Skip to content

Commit d182ecf

Browse files
Christoffer-CortesChristoffer-Cortes
authored
Tweaks and fixes to the CSS in EI frontend. (#74)
* Tweaks and fixes to the CSS in EI frontend.
1 parent 045cea5 commit d182ecf

File tree

7 files changed

+76
-81
lines changed

7 files changed

+76
-81
lines changed

‎src/functionaltest/java/com/ericsson/ei/frontend/TestSubscriptionCRUD.java

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,11 +73,12 @@ public void init() throws Exception {
7373
String filePath = tempFile.getAbsolutePath().toString();
7474
Files.write(Paths.get(filePath), "[]".getBytes());
7575
backEndInstanceFileUtils.setEiInstancesPath(filePath);
76-
76+
7777
backEndInstancesUtils.setDefaultBackEndInstanceToNull();
7878
backEndInstancesUtils.setDefaultBackEndInstance("test", "localhost", mockServerRule.getPort(), "", false);
7979

8080
subscriptionRequestBody = FileUtils.readFileToString(new File(SUBSCRIPTION_FILE_PATH), "UTF-8");
81+
subscriptionRequestBody = subscriptionRequestBody.replaceAll("\r", "");
8182
String auth = ADMIN + ":" + ADMIN;
8283
encodedAuth = StringUtils.newStringUtf8(Base64.encodeBase64(auth.getBytes()));
8384
responseBodyPost = new JsonParser().parse("{\"msg\": \"Inserted Successfully\"," + "\"statusCode\": 200}")

‎src/main/resources/static/css/style.css

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
.sub-action-column {
55
min-width: 160px;
66
}
7+
.card-standard {
8+
width: 25rem;
9+
}
710
.rule-button {
811
width: 150px;
912
}
@@ -13,8 +16,13 @@
1316
.white-space-normal {
1417
white-space: normal;
1518
}
16-
.card-switch-backend {
17-
max-width: 40rem;
19+
.split {
20+
max-width: 50%;
21+
}
22+
@media (max-width: 576px) {
23+
.split {
24+
max-width: 100%;
25+
}
1826
}
1927
.table-responsive>.table-bordered {
2028
border: 1px solid #dee2e6;
@@ -75,6 +83,6 @@ body {
7583
}
7684
@media (max-width: 576px) {
7785
body {
78-
padding-top: 80px;
86+
padding-top: 100px;
7987
}
8088
}

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

Lines changed: 13 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -94,10 +94,7 @@ jQuery(document).ready(function () {
9494
window.setInterval(function () { checkBackendStatus(); }, 15000);
9595

9696
// Check if EI Backend Server is online when Status Connection button is pressed.
97-
$('.container').on('click', 'button.btnEIConnectionStatus', function (event) {
98-
event.stopPropagation();
99-
event.preventDefault();
100-
97+
$("#btnEIConnection").click(function () {
10198
checkBackendStatus();
10299
});
103100
// END OF EI Backend Server check #########################################
@@ -428,16 +425,23 @@ jQuery(document).ready(function () {
428425
});
429426
// /Stop ## check all subscriptions #####################################
430427

428+
// /Start ## Add Subscription ########################################
429+
$("#addSubscription").click(function () {
430+
vm.choosen_subscription_template(null);
431+
json_obj_clone = JSON.parse(JSON.stringify(default_json_empty));
432+
populate_json(json_obj_clone, "add");
433+
});
434+
// /Stop ## Add Subscription ############################################
431435

432436
// /Start ## Reload Table################################################
433-
$('.container').on('click', 'button.table_reload', function (event) {
434-
reload_table();
437+
$("#reloadButton").click(function () {
438+
reload_table();
435439
});
436440
// /Stop ## Reload Table#################################################
437441

438442

439443
// /Start ## Bulk delete#################################################
440-
$('.container').on('click', 'button.bulk_delete', function (event) {
444+
$("#bulkDelete").click(function () {
441445
var subscriptionsToDelete = [];
442446
var data = table.rows().nodes();
443447
$.each(data, function (index, value) {
@@ -516,9 +520,7 @@ jQuery(document).ready(function () {
516520
}
517521

518522
// /Start ## get_subscription_template #################################################
519-
$('.container').on('click', 'button.get_subscription_template', function (event) {
520-
event.stopPropagation();
521-
event.preventDefault();
523+
$("#getTemplateButton").click(function () {
522524
getTemplate();
523525
});
524526
// /END ## get_subscription_template #################################################
@@ -586,10 +588,7 @@ jQuery(document).ready(function () {
586588

587589

588590
// /Start ## upload_subscriptions #################################################
589-
$('.container').on('click', 'button.upload_subscriptions', function (event) {
590-
event.stopPropagation();
591-
event.preventDefault();
592-
591+
$("#uploadSubscription").click(function () {
593592
function createUploadWindow() {
594593
// var pom = document.createElement('input');
595594
// pom.setAttribute('id', 'uploadFile');
@@ -626,18 +625,6 @@ jQuery(document).ready(function () {
626625
});
627626
// /END ## upload_subscriptions #################################################
628627

629-
630-
// /Start ## Add Subscription ########################################
631-
$('.container').on('click', 'button.btn.btn-success.add_subscription', function (event) {
632-
event.stopPropagation();
633-
event.preventDefault();
634-
vm.choosen_subscription_template(null);
635-
json_obj_clone = JSON.parse(JSON.stringify(default_json_empty));
636-
populate_json(json_obj_clone, "add");
637-
});
638-
// /Stop ## Add Subscription ############################################
639-
640-
641628
// /Start ## Reload Datatables ###########################################
642629
function reload_table() {
643630
table.ajax.reload(null, false); //reload datatable ajax

‎src/main/resources/templates/add-instances.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
</head>
1010
<body class="bg-dark">
1111
<div class="hidden" style="display: none" id="frontendServiceUrl" th:text="${frontendServiceUrl}"></div>
12-
<div class="container pull-left">
13-
<div class="card card-login mx-auto mt-5">
12+
<div class="d-flex justify-content-center ml-3 mr-3">
13+
<div class="card card-standard">
1414
<div class="card-header">Add backend instance</div>
1515
<div class="card-body">
1616
<form id="instanceModel">

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
4040
<span class="navbar-toggler-icon"></span>
4141
</button>
42-
<select id="selectInstances" data-bind="optionsCaption: 'Choose backend instance', options: instances, optionsText: 'information', optionsValue: 'name', value: selectedActive, event: {change: onChange}"></select>
42+
<select class="split mt-1" id="selectInstances" data-bind="optionsCaption: 'Choose backend instance', options: instances, optionsText: 'information', optionsValue: 'name', value: selectedActive, event: {change: onChange}"></select>
4343
<div class="collapse navbar-collapse" id="navbarResponsive">
4444
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
4545
<li id="subscriptionBtn" class="nav-item">
@@ -54,7 +54,7 @@
5454
<span class="nav-link-text">Test Rules</span>
5555
</a>
5656
</li>
57-
<li id="eiInfoBtn" class="nav-item" data-toggle="tooltip" data-placement="right" title="Eiffel Intelligence Information">
57+
<li id="eiInfoBtn" class="nav-item">
5858
<a class="nav-link" href="#">
5959
<i class="fa fa-fw fa-info"></i>
6060
<span class="nav-link-text">Eiffel Intelligence Info</span>

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

Lines changed: 40 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -20,53 +20,52 @@
2020

2121
<script type="text/javascript" src="resources/subscription_templates.js"></script>
2222

23-
<div style="max-width: 100%;" class="container pull-left">
24-
<div class="d-flex">
25-
<div class="col-lg-10 col-md-10 col-9">
26-
<h1 style="font-size:20pt">Eiffel Intelligence Subscription Handling (<span th:text="${frontendServiceUrl}"></span>)
27-
</h1>
28-
</div>
29-
<div class="col-lg-2 col-md-2 col-3">
30-
<button data-toggle="tooltip" title="EI connection status check is refreshed continuesly. Click button to force check status."
31-
type="button" id="btnEIConnection" class="btn btnEIConnectionStatus white-space-normal">
32-
<i class="glyphicon"></i>EI Backend Status
33-
</button>
23+
<div class="d-flex">
24+
<div class="col-md-9 col-8">
25+
<h3>Eiffel Intelligence Subscription Handling</h3>
26+
</div>
27+
<div class="col-md-3 col-4 d-flex justify-content-end">
28+
<div id="btnEIContainer">
29+
<button data-toggle="tooltip" title="EI connection status check is refreshed continuously. Click button to force check status."
30+
type="button" id="btnEIConnection" class="btn btnEIConnectionStatus white-space-normal">
31+
<i class="glyphicon"></i>EI Backend Status
32+
</button>
3433
</div>
3534
</div>
35+
</div>
3636

37-
<div class="pb-1 col-12">
38-
<h3 id="subData">Subscription Data</h3>
39-
<br/>
40-
41-
<div class="pb-1 col-12 subButtons">
42-
<button id="addSubscription" data-toggle="tooltip" title="Add a new subscription to EI" class="mt-1 btn btn-success add_subscription show_if_authorized">
43-
<i class="glyphicon glyphicon-plus"></i> Add Subscription
44-
</button>
45-
<button id="reloadButton" data-toggle="tooltip" title="Reload all subscriptions data from EI" class="mt-1 btn btn-default table_reload">
46-
<i class="glyphicon glyphicon-refresh"></i> Reload
47-
</button>
48-
<button id="bulkDelete" data-toggle="tooltip" title="Delete all marked subscriptions from EI" class="mt-1 btn btn-danger bulk_delete show_if_authorized">
49-
<i class="glyphicon glyphicon-trash"></i> Bulk Delete
50-
</button>
51-
<button id="getTemplateButton" data-toggle="tooltip" title="Download Subscription JSON template" class="mt-1 btn btn-primary get_subscription_template">
52-
<i class="glyphicon glyphicon-download"></i> Get Template
53-
</button>
54-
<button data-toggle="tooltip" title="Upload Subscription JSON" class="mt-1 btn btn-info upload_subscriptions show_if_authorized">
55-
<i class="glyphicon glyphicon-upload"></i>Upload Subscriptions
56-
</button>
57-
<input class="hidden" type='file' id='upload_sub' name='file' style="position: absolute; left: -999em;" />
58-
</div>
59-
<div class="pb-1 col-12 loadingAnimation">
60-
<!-- This div is the animated loading indicator -->
61-
<div class="loader"></div>
62-
</div>
37+
<div class="pb-1 col-12">
38+
<h3 id="subData">Subscription Data</h3>
39+
<br/>
40+
41+
<div class="pb-1 col-12 subButtons">
42+
<button id="addSubscription" data-toggle="tooltip" title="Add a new subscription to EI" class="mt-1 btn btn-success add_subscription show_if_authorized">
43+
<i class="glyphicon glyphicon-plus"></i> Add Subscription
44+
</button>
45+
<button id="reloadButton" data-toggle="tooltip" title="Reload all subscriptions data from EI" class="mt-1 btn btn-default table_reload">
46+
<i class="glyphicon glyphicon-refresh"></i> Reload
47+
</button>
48+
<button id="bulkDelete" data-toggle="tooltip" title="Delete all marked subscriptions from EI" class="mt-1 btn btn-danger bulk_delete show_if_authorized">
49+
<i class="glyphicon glyphicon-trash"></i> Bulk Delete
50+
</button>
51+
<button id="getTemplateButton" data-toggle="tooltip" title="Download Subscription JSON template" class="mt-1 btn btn-primary get_subscription_template">
52+
<i class="glyphicon glyphicon-download"></i> Get Template
53+
</button>
54+
<button id="uploadSubscription" data-toggle="tooltip" title="Upload Subscription JSON" class="mt-1 btn btn-info upload_subscriptions show_if_authorized">
55+
<i class="glyphicon glyphicon-upload"></i>Upload Subscriptions
56+
</button>
57+
<input class="hidden" type='file' id='upload_sub' name='file' style="position: absolute; left: -999em;" />
58+
</div>
59+
<div class="pb-1 col-12 loadingAnimation">
60+
<!-- This div is the animated loading indicator -->
61+
<div class="loader"></div>
6362
</div>
63+
</div>
6464

65-
<!-- Datatable -->
65+
<!-- Datatable -->
6666

67-
<div class="card-body">
68-
<table id="table" class="table table-bordered" width="100%" cellspacing="0"></table>
69-
</div>
67+
<div class="pl-2 pr-2">
68+
<table id="table" class="table table-bordered" width="100%" cellspacing="0"></table>
7069
</div>
7170

7271
<!-- Bootstrap modal -->

‎src/main/resources/templates/switch-backend.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
</head>
1010
<body class="bg-dark">
1111
<div class="hidden" style="display: none" id="frontendServiceUrl" th:text="${frontendServiceUrl}"></div>
12-
<div class="container pull-left">
13-
<div class="card card-switch-backend mx-auto mt-5">
12+
<div class="d-flex justify-content-center ml-3 mr-3">
13+
<div class="card">
1414
<div class="card-header">Switch backend</div>
1515
<div class="card-body" id="instancesModel">
1616
<div class="table-responsive">
@@ -30,10 +30,10 @@
3030
<tr>
3131
<td align="center"><input align="center" name="activate" type="radio"
3232
data-bind="checked: active, checkedValue: true, click: $parent.checked, attr: { id: 'SelectBackendInstance' + $index()}"/></td>
33-
<td data-bind="text: name, attr: { id: 'BackendInstance' + $index() + 'Name'}" align="center"></td>
34-
<td data-bind="text: host" align="center"></td>
35-
<td data-bind="text: port" align="center"></td>
36-
<td data-bind="text: path" align="center"></td>
33+
<td data-bind="text: name, attr: { id: 'BackendInstance' + $index() + 'Name'}"></td>
34+
<td data-bind="text: host"></td>
35+
<td data-bind="text: port"></td>
36+
<td data-bind="text: path"></td>
3737
<td align="center"><input type="checkbox" disabled="disabled" data-bind="checked: https"/></td>
3838
<td align="center"><a href="#" data-bind="click: $parent.removeInstance, attr: { id: 'removeBtn' + $index()}">Remove</a></td>
3939
</tr>

0 commit comments

Comments
 (0)