Skip to content

Commit c6b3105

Browse files
pacesmpacesm
committed
Improving the GUI styling.
- A scrolbar is enabled for large number of scenarios and layers. - Ingestion Admin Client uses red info messages.
1 parent c5565ee commit c6b3105

File tree

5 files changed

+142
-95
lines changed

5 files changed

+142
-95
lines changed

‎app/scripts/controller/IngestionAdminT5Controller.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,12 @@
5151
initialize: function(options) {
5252

5353
// model initialization:
54-
5554
this.model.fetch({
5655
error:function(m,r,o){
57-
console.log("fetch error:\n"+r);
58-
for (var i in r) {
59-
console.log(i+" : "+r[i]);
60-
}
56+
console.error("Failed to fetch the ingestion scenarios!");
57+
console.error(m);
58+
console.error(r);
59+
console.error(o);
6160
}
6261
});
6362

‎app/scripts/views/IngestionAdminT5View.js‎

Lines changed: 94 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -77,92 +77,103 @@
7777
if (! that.is_showing ) { return; }
7878
var scenarios = that.model.get('scenarios');
7979
var scenarioHTML = '';
80-
for (var i=0; i<scenarios.length; i++)
81-
{
82-
var ncn_id = scenarios[i].ncn_id;
83-
scenarioHTML +=
84-
'<table width="100%" frame="void">' +
85-
'<tr>' +
86-
87-
// buttons
88-
'<td width=19%>' +
89-
// ingest
90-
'<button type="button" class="btn btn-default" ' +
91-
'id="btn-ingest-scenario-' + ncn_id + '" title="Ingest scenario '+ ncn_id +'" >' +
92-
'<i class="fa fa-sign-in fa-rotate-90"></i></button>' +
93-
94-
// Add local product from file
95-
'<button type="button" class="btn btn-default" ' +
96-
'id="btn-add-product-' + ncn_id + '" title="Add local product to '+ ncn_id+'" >' +
97-
'<i class="fa fa-file-o"></i></button>' +
98-
99-
// edit
100-
'<button type="button" class="btn btn-default" ' +
101-
'id="btn-edit-scenario-' + ncn_id + '" title="Edit scenario '+ ncn_id + '" >' +
102-
'<i class="fa fa-edit"></i></button>' +
103-
104-
// delete
105-
'<button type="button" class="btn btn-default" ' +
106-
'id="btn-delete-scenario-' + ncn_id + '" title="Delete scenario '+ ncn_id+'" >' +
107-
'<i class="fa fa-trash-o"></i></button>' +
108-
'</td>' +
109-
110-
// id and name
111-
'<td width=10% title="Scenario Id">' + ncn_id + '</td>' +
112-
'<td colspan=2 title="Scenario Name">' + scenarios[i].scenario_name + '</td>' +
113-
'</tr>' +
114-
'<tr>' +
115-
// '<td></td>' +
116-
117-
// description text accross all columns
118-
'<td colspan=3 title="Description">' + scenarios[i].scenario_description + '</td>' +
119-
'</tr>' +
120-
'<tr>' +
121-
// '<td></td>' +
122-
123-
// status
124-
'<td><div id="div_status_' + ncn_id + '"/>' + scenarios[i].st_st + '</td>' +
125-
126-
// stop button
127-
'<td><button type="button" class="btn btn-default" ' +
128-
'id="btn-stop-scenario-' + ncn_id + '" title="Stop scenario'+ ncn_id+'" >' +
129-
'<i class="fa fa-stop"></i></button>' +
130-
'</td>' +
131-
'<td>' +
132-
133-
// progress bar
134-
'<div id="pro_container_' + ncn_id + '" ' +
135-
'style="width:100%; height:10px; border:1px solid black; ' +
136-
'vertical-align:middle; padding:0">' +
137-
'<div id="progress_bar_' + ncn_id + '" ' +
138-
'style="width:' + scenarios[i].st_done +'%; height:8px; border:none; background-color:#6666dd; ' +
139-
'padding:0; vertical-align:sub"/>' +
140-
'</div>' +
141-
142-
'</td>' +
143-
'</tr>' +
144-
'</table>' +
145-
'<hr>';
80+
var alertMessage = '';
81+
82+
if (scenarios) {
83+
for (var i=0; i<scenarios.length; i++)
84+
{
85+
var ncn_id = scenarios[i].ncn_id;
86+
scenarioHTML +=
87+
'<table width="100%" frame="void">' +
88+
'<tr>' +
89+
90+
// buttons
91+
'<td width=19%>' +
92+
// ingest
93+
'<button type="button" class="btn btn-default" ' +
94+
'id="btn-ingest-scenario-' + ncn_id + '" title="Ingest scenario '+ ncn_id +'" >' +
95+
'<i class="fa fa-sign-in fa-rotate-90"></i></button>' +
96+
97+
// Add local product from file
98+
'<button type="button" class="btn btn-default" ' +
99+
'id="btn-add-product-' + ncn_id + '" title="Add local product to '+ ncn_id+'" >' +
100+
'<i class="fa fa-file-o"></i></button>' +
101+
102+
// edit
103+
'<button type="button" class="btn btn-default" ' +
104+
'id="btn-edit-scenario-' + ncn_id + '" title="Edit scenario '+ ncn_id + '" >' +
105+
'<i class="fa fa-edit"></i></button>' +
106+
107+
// delete
108+
'<button type="button" class="btn btn-default" ' +
109+
'id="btn-delete-scenario-' + ncn_id + '" title="Delete scenario '+ ncn_id+'" >' +
110+
'<i class="fa fa-trash-o"></i></button>' +
111+
'</td>' +
112+
113+
// id and name
114+
'<td width=10% class="scenario-id" title="Scenario Id">' + ncn_id + '</td>' +
115+
'<td colspan=2 class="scenario-title" title="Scenario Name">' + scenarios[i].scenario_name + '</td>' +
116+
'</tr>' +
117+
'<tr>' +
118+
// '<td></td>' +
119+
120+
// description text accross all columns
121+
'<td colspan=3 class="scenario-info" title="Description">' + scenarios[i].scenario_description + '</td>' +
122+
'</tr>' +
123+
'<tr>' +
124+
// '<td></td>' +
125+
126+
// status
127+
'<td><div id="div_status_' + ncn_id + '"/>' + scenarios[i].st_st + '</td>' +
128+
129+
// stop button
130+
'<td><button type="button" class="btn btn-default" ' +
131+
'id="btn-stop-scenario-' + ncn_id + '" title="Stop scenario'+ ncn_id+'" >' +
132+
'<i class="fa fa-stop"></i></button>' +
133+
'</td>' +
134+
'<td>' +
135+
136+
// progress bar
137+
'<div id="pro_container_' + ncn_id + '" ' +
138+
'style="width:100%; height:10px; border:1px solid black; ' +
139+
'vertical-align:middle; padding:0">' +
140+
'<div id="progress_bar_' + ncn_id + '" ' +
141+
'style="width:' + scenarios[i].st_done +'%; height:8px; border:none; background-color:#6666dd; ' +
142+
'padding:0; vertical-align:sub"/>' +
143+
'</div>' +
144+
145+
'</td>' +
146+
'</tr>' +
147+
'</table>' +
148+
'<hr>';
149+
}
150+
if (scenarios.length == 0) {
151+
alertMessage = "No ingestion scenario defined. Create a new one by clicking on the Create Scenario button below.";
152+
}
153+
} else {
154+
alertMessage = "Failed to fetch scenarios from the Ingestion Engine!";
146155
}
147156

157+
that.$('#ingestion-alert').html(alertMessage);
148158
that.$('#scenario-list').html(scenarioHTML);
149159

150-
for (var i=0; i<scenarios.length; i++)
151-
{
152-
var ncn_id = scenarios[i].ncn_id;
153-
var sc_id = scenarios[i].id;
154-
155-
that.$('#btn-ingest-scenario-' + ncn_id).on
156-
("click", _.bind(that.run_iet5_ajax, that, "ingestScenario", "Ingest", sc_id, ncn_id));
157-
that.$('#btn-delete-scenario-' + ncn_id).on
158-
("click", _.bind(that.run_iet5_ajax, that, "deleteScenario", "Delete", sc_id, ncn_id));
159-
that.$('#btn-stop-scenario-' + ncn_id).on
160-
("click", _.bind(that.run_iet5_ajax, that, "stopScenario", "Stop", sc_id, ncn_id));
161-
that.$('#btn-add-product-' + ncn_id).on("click", _.bind(that.onAddLocalProduct, that, sc_id, ncn_id));
162-
that.$('#btn-edit-scenario-' + ncn_id).on("click", _.bind(that.onEditScenario, that, ncn_id));
160+
if (scenarios) {
161+
for (var i=0; i<scenarios.length; i++)
162+
{
163+
var ncn_id = scenarios[i].ncn_id;
164+
var sc_id = scenarios[i].id;
165+
166+
that.$('#btn-ingest-scenario-' + ncn_id).on
167+
("click", _.bind(that.run_iet5_ajax, that, "ingestScenario", "Ingest", sc_id, ncn_id));
168+
that.$('#btn-delete-scenario-' + ncn_id).on
169+
("click", _.bind(that.run_iet5_ajax, that, "deleteScenario", "Delete", sc_id, ncn_id));
170+
that.$('#btn-stop-scenario-' + ncn_id).on
171+
("click", _.bind(that.run_iet5_ajax, that, "stopScenario", "Stop", sc_id, ncn_id));
172+
that.$('#btn-add-product-' + ncn_id).on("click", _.bind(that.onAddLocalProduct, that, sc_id, ncn_id));
173+
that.$('#btn-edit-scenario-' + ncn_id).on("click", _.bind(that.onEditScenario, that, ncn_id));
163174

175+
}
164176
}
165-
166177
},
167178

168179
run_iet5_ajax : function (url_key, op, sc_id, ncn_id)
@@ -236,11 +247,9 @@
236247
this.$('#btn-iet5-addscenario').on("click", _.bind(this.onAddScenario, this));
237248
this.$('#btn-iet5-showlog').on("click", _.bind(this.onShowLog, this));
238249

239-
this.updater.i = setInterval(_.bind(function() {
240-
this.model.fetch();
241-
},
242-
this ),
243-
2250);
250+
this.$('#ingestion-alert').html("Loading scenarios from the Ingestion Engine ...");
251+
252+
this.updater.i = setInterval(_.bind(function() { this.model.fetch(); }, this ), 2250);
244253

245254
this.$el.draggable(
246255
{

‎app/styles/main.scss‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,23 @@ button[active=active] {
226226
.fa-sort {
227227
cursor: ns-resize;
228228
}
229+
#layer-control-products-alert {
230+
color:red;
231+
}
232+
#layer-control-overlays {
233+
padding-bottom: 0px;
234+
}
235+
#layer-control-products {
236+
padding-top: 0px;
237+
padding-bottom: 0px;
238+
max-height: 30em;
239+
overflow-y: auto;
240+
overflow-x: hidden;
241+
}
242+
#layer-control-base {
243+
padding-top: 0px;
244+
}
245+
229246

230247
/*
231248
* Tool control
@@ -476,9 +493,28 @@ button[active=active] {
476493
margin: 0 0 0 0;
477494
font-size: 1em;
478495
position: absolute;
479-
overflow-y: scroll;
480496
}
481497

498+
.ingestion-overview .panel-body {
499+
max-height: 30em;
500+
overflow-y: auto;
501+
}
502+
503+
#ingestion-alert {
504+
color:red;
505+
}
506+
507+
.scenario-id {
508+
color: darkblue;
509+
font-weight: bold;
510+
}
511+
512+
.scenario-title {
513+
font-weight: bold;
514+
}
515+
516+
.scenario-info {}
517+
482518
/*
483519
* Add Local Product
484520
*/

‎app/templates/IngestionAdminT5.hbs‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,9 @@
55
<td align="right" style="align:right;"><button class="btn btn-default" id="btn-iet5-showlog"><i class="fa fa-fw fa-file-text-o"></i>&nbsp;Show Log File</button></td>
66
</tr></table>
77
</div>
8-
98
<div class="panel-body">
10-
9+
<div id="ingestion-alert" style="width:100%;"></div>
1110
<div class="input-group" id="scenario-list" style="width:100%;"></div>
12-
1311
</div>
1412
<div class="panel-footer">
1513
<button class="btn btn-default" id="btn-iet5-addscenario" ><i class="fa fa-fw fa-plus"></i>&nbsp;Add Scenario</button>

‎app/templates/LayerControl.hbs‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
<button type="button" class="close"><i class="fa fa-times-circle"></i></button>
33
<h3 class="panel-title"><i class="fa fa-fw fa-globe"></i> Layers</h3>
44
</div>
5-
<div class="panel-body">
5+
<div class="panel-body" id="layer-control-overlays">
66
<div id="overlays"></div>
7+
</div>
8+
<div class="panel-body" id="layer-control-products">
9+
<div id="layer-control-products-alert">
710
<div id="products"></div>
11+
</div>
12+
<div class="panel-body" id="layer-control-base">
813
<div id="baseLayers"></div>
914
</div>

0 commit comments

Comments
 (0)