- fix collisions between js script from main page and the application,

- fix problem with special characters for etrack,

target/classes/static/css/styles.css

@@ -1,3 +1,11 @@
+html {
+   height: 100%;
+}
+
+body {
+   min-height: 100%;
+}
+
 
 .page-section{
   padding: 2rem 0;
@@ -105,7 +113,82 @@ button[name="removeHeader"] {
     cursor: pointer;
 }
 
-.active {
+.activeButton {
     background-color: rgb(153, 194, 255);
  }
 
+
+
+
+#child-body{
+     margin-left: 220px;
+}
+
+#container1{
+
+}
+#foot {
+  clear: both;
+  position: relative;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+/* The side navigation menu */
+.sidebar {
+  margin-top: 100px;
+  padding-top: 200px;
+  padding: 0;
+  width: 200px;
+  background-color: #f1f1f1;
+  position: absolute;
+  height: 100%;
+  overflow: auto;
+}
+
+/* Sidebar links */
+.sidebar a {
+  display: block;
+  color: black;
+  padding: 16px;
+  text-decoration: none;
+}
+
+/* Active/current link */
+.sidebar a.active {
+  background-color: #4CAF50;
+  color: white;
+}
+
+/* Links on mouse-over */
+.sidebar a:hover:not(.active) {
+  background-color: #555;
+  color: white;
+}
+
+/* On screens that are less than 700px wide, make the sidebar into a topbar */
+@media screen and (max-width: 700px) {
+  .sidebar {
+    width: 100%;
+    height: auto;
+    position: fixed;
+  }
+  .sidebar a {float: left;}
+  div.content {margin-left: 0;}
+}
+
+/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
+@media screen and (max-width: 400px) {
+  .sidebar a {
+    text-align: center;
+    float: none;
+  }
+}
+
+
+table { border-collapse: collapse; }
+tr { border: none; }
+td {
+border: none;
+}

target/classes/static/js/etrackPaggination.js

@@ -27,9 +27,9 @@ for (let i = 3; i >= 0; i--) {
 function addButtonListeners(i) {
   var buttons = document.querySelectorAll('.btn-sort');
   for (var j = buttons.length - 1; j >= 0; j--) {
-    buttons[j].classList.remove('active');
+    buttons[j].classList.remove('activeButton');
   }
-  document.querySelector('#btn-sort-' + i).classList.add('active');
+  document.querySelector('#btn-sort-' + i).classList.add('activeButton');
   buildTable();
 }
 
@@ -132,7 +132,7 @@ function showTable() {
 
 
 function sortTable() {
-  var sortBy = document.querySelector('.active').textContent
+  var sortBy = document.querySelector('.activeButton').textContent
   switch (sortBy) {
     case "MessageId":
       if (previousSort === "MessageId") {

target/classes/static/js/paggination.js

@@ -14,8 +14,7 @@ var state = {
 }
 
 var myList, data, previousSort;
-
-
+  console.log("raz dwa trzy")
 state.querySet = listForPagination;
 buildTable();
 
@@ -28,15 +27,13 @@ for (let i = 3; i >= 0; i--) {
 function addButtonListeners(i) {
   var buttons = document.querySelectorAll('.btn-sort');
   for (var j = buttons.length - 1; j >= 0; j--) {
-    buttons[j].classList.remove('active');
+    buttons[j].classList.remove('activeButton');
   }
-  document.querySelector('#btn-sort-' + i).classList.add('active');
+  document.querySelector('#btn-sort-' + i).classList.add('activeButton');
   buildTable();
 }
 
-
 function pagination(querySet, page, rows) {
-
   var trimStart = (page - 1) * rows
   var trimEnd = trimStart + rows
   var trimmedData = querySet.slice(trimStart, trimEnd)
@@ -48,10 +45,8 @@ function pagination(querySet, page, rows) {
   }
 }
 
-
 function pageButtons(pages) {
   var wrapper = document.getElementById('pagination-wrapper');
-
   wrapper.innerHTML = ``;
   var maxLeft = (state.page - Math.floor(state.window / 2))
   var maxRight = (state.page + Math.ceil(state.window / 2))
@@ -136,7 +131,6 @@ function showTable() {
                     </td>
                     `
     }
-
     table.append(row)
   }
     for (var i = myList.length + 1; i <= state.rows; i++) {
@@ -158,12 +152,13 @@ function showTable() {
       }
       table.append(row)
     }
-
   pageButtons(data.pages)
 }
 
 function sortTable() {
-  var sortBy = document.querySelector('.active').textContent
+console.log("sortTable");
+  var sortBy = document.querySelector('.activeButton').textContent;
+  console.log(sortBy);
   switch (sortBy) {
     case "MessageId":
       if (previousSort === "MessageId") {
@@ -191,6 +186,7 @@ function sortTable() {
     previousSort = ""
   } else previousSort = sortBy;
   myList = state.querySet;
+    console.log(myList);
 }
 
 function prepareTable() {
@@ -199,6 +195,7 @@ function prepareTable() {
 }
 
 function buildTable() {
+console.log("buildTable");
   sortTable();
   prepareTable();
   showTable();