Skip to content

Commit cec58a0

Browse files
emichafemichaf
authored
GUI CSS and layout fixes, epoch time handling added in frontend & epoch time generation moved to backend (#12)
* Created date moved to backend, handling of epochtime to UTC added * maxwidth fix for subscription page * Eiffel icon added index page, subscription modale layout, and css fixes * Time conversion in modal popup
1 parent 09ab116 commit cec58a0

File tree

3 files changed

+62
-58
lines changed

3 files changed

+62
-58
lines changed

‎src/main/resources/static/js/subscription.js

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,6 @@ jQuery(document).ready(function() {
138138

139139

140140

141-
142141
function conditions_model(condition){
143142
this.conditions = ko.observableArray(condition);
144143
}
@@ -179,6 +178,13 @@ jQuery(document).ready(function() {
179178

180179

181180

181+
self.getUTCDate= function(epochtime){
182+
var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
183+
d.setUTCMilliseconds(epochtime);
184+
return d; // Is now a date (in client time zone)
185+
}
186+
187+
182188
self.add_condition = function(data, event, requirement_index) {
183189

184190
self.subscription()[0].requirements()[ko.toJSON(requirement_index)].conditions().push(new jmespath_model({"jmespath": ko.observable("")}));
@@ -220,6 +226,7 @@ jQuery(document).ready(function() {
220226

221227

222228

229+
223230
// /Start ## Datatables ##################################################
224231
table = $('#table').DataTable({
225232

@@ -263,8 +270,11 @@ jQuery(document).ready(function() {
263270
{
264271
"targets": [ 3 ],
265272
"orderable": true,
266-
"title": "Created",
267-
"data": "created"
273+
"title": "Date",
274+
"data": "created",
275+
"mRender" : function (data, type, row, meta) {
276+
return vm.getUTCDate(data);
277+
}
268278
},
269279
{
270280
"targets": [ 4 ],
@@ -468,13 +478,6 @@ jQuery(document).ready(function() {
468478
}
469479
};
470480

471-
// Fetch Date and format
472-
var now = new Date();
473-
var nowStr = now.format("isoDate") + ' ' + now.format("isoTime");
474-
475-
// Update property created with datetime (formatted)
476-
subscriptionJson.created = String(nowStr);
477-
478481
// Perform AJAX
479482
var ajaxHttpSender = new AjaxHttpSender();
480483
ajaxHttpSender.sendAjax(frontendServiceUrl + "/subscriptions", "POST", ko.toJSON(subscriptionJson), callback);
@@ -611,7 +614,7 @@ jQuery(document).ready(function() {
611614
// /Stop ## Edit Subscription ###########################################
612615

613616

614-
// /Start ## pupulate JSON ###########################################
617+
// /Start ## populate JSON ###########################################
615618
function populate_json(data, save_method_in)
616619
{
617620
var returnData = [data];
@@ -780,12 +783,6 @@ jQuery(document).ready(function() {
780783
}
781784
};
782785

783-
// Fetch Date and format
784-
var now = new Date();
785-
var nowStr = now.format("isoDate") + ' ' + now.format("isoTime");
786-
787-
// Update property created with datetime (formatted)
788-
vm.subscription()[0].created(String(nowStr));
789786

790787
// Perform AJAX
791788
var ajaxHttpSender = new AjaxHttpSender();
@@ -852,8 +849,6 @@ jQuery(document).ready(function() {
852849

853850

854851

855-
}); // $(document).ready(function() {
856-
857-
858852

853+
}); // $(document).ready(function() {
859854

‎src/main/resources/templates/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,9 @@
3030

3131

3232
<div class="hidden" style="display: none" id="eiffelDocumentationUrlLinks" th:text="${eiffelDocumentationUrlLinks}"></div>
33-
3433
<!-- Navigation-->
3534
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
36-
<a class="navbar-brand" href="/">Eiffel Intelligence</a>
35+
<a class="navbar-brand" href="/"><img width="32" alt="Information" src="assets/images/favicon-32x32.png"/>Eiffel Intelligence</a>
3736
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
3837
<span class="navbar-toggler-icon"></span>
3938
</button>

‎src/main/resources/templates/subscription.html

Lines changed: 46 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
<script type="text/javascript" src="resources/subscription_templates.js"></script>
2020

21-
<div class="container pull-left">
21+
<div style="max-width: 100%;" class="container pull-left">
2222
<h1 style="font-size:20pt">Eiffel Intelligence Subscription Handling (<span th:text="${frontendServiceUrl}"></span>)
2323
<button data-toggle="tooltip" title="EI connection status check is refreshed continuesly. Click button to force check status." type="button" id="btnEIConnection" class="btn btnEIConnectionStatus"><i class="glyphicon"></i>EI Backend Status</button>
2424
</h1>
@@ -45,7 +45,7 @@ <h3>Subscription Data</h3>
4545

4646
<!-- Bootstrap modal -->
4747
<div class="modal fade" id="modal_form" role="dialog">
48-
<div class="modal-dialog">
48+
<div style="max-width: 50%;" class="modal-dialog">
4949
<div class="modal-content">
5050
<div class="modal-header">
5151
<div class="container pull-left">
@@ -61,29 +61,29 @@ <h3 class="modal-title text-center">Subscription Form</h3>
6161

6262
<!-- ko foreach: subscription -->
6363
<div class="form-group">
64-
<label class="control-label col-md-3">SubscriptionName</label>
65-
<div class="col-md-9">
64+
<label class="pl-1 control-label font-weight-bold">SubscriptionName</label>
65+
<div>
6666
<input data-toggle="tooltip" title="Specify a SubsciptionName" data-bind="textInput:$data.subscriptionName" name="subscriptionName" placeholder="subscriptionName" class="form-control" type="text" />
6767
<span class="help-block"></span>
6868
</div>
6969
</div>
7070
<div class="form-group" data-bind="visible: created()">
71-
<label class="control-label col-md-3">Created</label>
72-
<div class="col-md-9">
73-
<span data-toggle="tooltip" title="Specify the creation date" data-bind="text:$data.created" name="created" placeholder="created" class="form-control" type="text" />
71+
<label class="pl-1 control-label font-weight-bold">Date</label>
72+
<div>
73+
<span data-toggle="tooltip" title="Specify the creation date" data-bind="text: $root.getUTCDate($data.created())" name="created" placeholder="created" class="form-control" type="text" />
7474
<span class="help-block"></span>
7575
</div>
7676
</div>
7777
<div class="form-group">
78-
<label class="control-label col-md-3">Type</label>
79-
<div class="col-md-9">
78+
<label class="pl-1 control-label font-weight-bold">Type</label>
79+
<div>
8080
<span data-toggle="tooltip" title="Specify the creation date" data-bind="text:$data.aggregationtype" name="aggregationtype" placeholder="aggregation_type" class="form-control" type="text" />
8181
<span class="help-block"></span>
8282
</div>
8383
</div>
8484
<div class="form-group">
85-
<label class="control-label col-md-3">NotificationType</label>
86-
<div class="col-md-9">
85+
<label class="pl-1 control-label font-weight-bold">NotificationType</label>
86+
<div>
8787
<select data-toggle="tooltip" title="Choose a notification type" data-bind="options: $root.notificationType_in,
8888
optionsText: 'text',
8989
optionsValue: 'value',
@@ -92,15 +92,8 @@ <h3 class="modal-title text-center">Subscription Form</h3>
9292
</div>
9393
</div>
9494
<div class="form-group">
95-
<label class="control-label col-md-3">NotificationMeta</label>
96-
<div class="col-md-9">
97-
<input data-toggle="tooltip" title="Specify notification meta data" data-bind="textInput:$data.notificationMeta" name="notificationMeta" placeholder="notificationMeta" class="form-control" type="text" />
98-
<span class="help-block"></span>
99-
</div>
100-
</div>
101-
<div class="form-group">
102-
<label class="control-label col-md-3">Repeat</label>
103-
<div class="col-md-9">
95+
<label class="pl-1 control-label font-weight-bold">Repeat</label>
96+
<div>
10497
<select data-toggle="tooltip" title="Choose if to repeat or not to repeat" data-bind="options: $root.repeat_in,
10598
optionsText: $data.repeat(),
10699
value: $data.repeat,
@@ -109,24 +102,37 @@ <h3 class="modal-title text-center">Subscription Form</h3>
109102
</div>
110103
</div>
111104
<div class="form-group">
112-
<label class="control-label col-md-3">NotificationMessage</label>
113-
<div class="col-md-9">
114-
<input data-toggle="tooltip" title="Choose a notification message" data-bind="textInput:$data.notificationMessage" name="notificationMessage" placeholder="notificationMessage" class="form-control" type="text" />
105+
<label class="pl-1 control-label font-weight-bold">NotificationMeta</label>
106+
<div>
107+
<!--<input data-toggle="tooltip" title="Specify notification meta data" data-bind="textInput:$data.notificationMeta" name="notificationMeta" placeholder="notificationMeta" class="form-control" type="text" />-->
108+
109+
<textarea data-toggle="tooltip" title="Specify notification meta data" data-bind="textInput:$data.notificationMeta" name="notificationMeta" placeholder="notificationMeta" class="form-control" type="text" />
110+
111+
112+
<span class="help-block"></span>
113+
</div>
114+
</div>
115+
<div class="form-group">
116+
<label class="pl-1 control-label font-weight-bold">NotificationMessage</label>
117+
<div>
118+
<!--<input data-toggle="tooltip" title="Choose a notification message" data-bind="textInput:$data.notificationMessage" name="notificationMessage" placeholder="notificationMessage" class="form-control" type="text" />-->
119+
<textarea data-toggle="tooltip" title="Choose a notification message" data-bind="textInput:$data.notificationMessage" name="notificationMessage" placeholder="notificationMessage" class="form-control" type="text" />
120+
115121
<span class="help-block"></span>
116122
</div>
117123
</div>
118124

119-
<img width="16" alt="Information" src="assets/images/information.png" title="Info: 'AND' is used between Conditions in Requirement groups, and 'OR' is used between Requirement groups"/>
120125

121126
<!-- ko foreach: { data: requirements, as: 'requirements_item' } -->
122-
<div class="form-group">
123-
<label class="control-label col-md-3">Requirements</label>
124-
<div class="col-md-9">
127+
<div class="pl-0 ml-0"><img width="16" alt="Information" src="assets/images/information.png" title="Info: 'AND' is used between Conditions in Requirement groups, and 'OR' is used between Requirement groups"/></div>
128+
<div class="pb-3 border border-primary form-group">
129+
<label class="pl-1 control-label font-weight-bold">Requirement</label>
130+
<div>
125131

126132
<!-- ko foreach: requirements_item.conditions -->
127133
<div class="form-group">
128-
<label class="control-label col-md-3">Conditions</label>
129-
<div class="col-md-9">
134+
<label class="pl-3 control-label font-weight-bold">Condition</label>
135+
<div class="p-3">
130136
<textarea data-toggle="tooltip" title="Write a Subscription Rule(JmePath)" data-bind="textInput:$data.jmespath()" name="jmespath" placeholder="jmespath" class="form-control" type="text" />
131137
<button data-bind="click: function(data, event) { $root.delete_condition(data, event, requirements_item , $index(), $parentContext.$index() ); }, clickBubble: false" data-toggle="tooltip" title="Delete condition" class="btn btn-danger float-right" ><i class="glyphicon glyphicon-trash"></i>Delete</button>
132138
<span class="help-block"></span>
@@ -135,22 +141,26 @@ <h3 class="modal-title text-center">Subscription Form</h3>
135141

136142

137143
<!-- /ko -->
144+
145+
<div >
146+
<label class="p-3"></label>
147+
<div>
148+
<button data-bind="click: function(data, event) { $root.add_condition(data, event, $index()); }, clickBubble: false" data-toggle="tooltip" title="Add a new condition" class="btn btn-success float-right"><i class="glyphicon glyphicon-plus"></i> Add Condition</button>
149+
150+
</div>
151+
</div>
138152

139153
</div>
140154

141-
<div class="form-group">
142-
<label class="control-label col-md-3"></label>
143-
<div class="col-md-9">
144-
<button data-bind="click: function(data, event) { $root.add_condition(data, event, $index()); }, clickBubble: false" data-toggle="tooltip" title="Add a new condition" class="btn btn-success float-right"><i class="glyphicon glyphicon-plus"></i> Add Condition</button>
145-
<span class="help-block"></span>
146-
</div>
147-
</div>
155+
148156

149157

150158

151159

152160
</div>
161+
<label class="control-label pt-15 col-md-3"></label>
153162
<!-- /ko -->
163+
154164
<div class="container">
155165
<button data-bind="click: $root.add_requirement, clickBubble: false" data-toggle="tooltip" title="Add a new requirement" class="btn btn-success float-left"><i class="glyphicon glyphicon-plus float-right"></i> Add Requirement</button>
156166
</div>

0 commit comments

Comments
 (0)