- finishing etrack

- new buttons for main page
- swagger

target/classes/static/css/styles.css

@@ -46,6 +46,10 @@ button:focus {
 }
 
 
+tr[name="tr-button"]:hover{
+background-color: #ddd;
+cursor: pointer;
+}
 
 #pagination-wrapper button {
     background: none;
@@ -80,3 +84,28 @@ button[name="removeHeader"] {
     transition: background-color 0.3s, color 0.3s;
 }
 
+
+
+.btn-sort {
+    border: 0;
+    padding: 0 20px;
+    text-align: center;
+    color: #fff;
+    text-shadow: 1px 1px 1px #000;
+    border-radius: 10px;
+    background-color: rgb(0, 102, 255);
+    background-image: linear-gradient(to top left,
+                                      rgba(0, 0, 0, .2),
+                                      rgba(0, 0, 0, .2) 30%,
+                                      rgba(0, 0, 0, 0));
+}
+
+.btn-sort:hover {
+    background-color: rgb(153, 194, 255);
+    cursor: pointer;
+}
+
+.active {
+    background-color: rgb(153, 194, 255);
+ }
+

target/classes/static/js/etrackPaggination.js

@@ -0,0 +1,178 @@
+var state = {
+  'querySet': [{
+    "clientUUID": "436c4774-038f-4540-9c18-2691ca9b53d4",
+    "mockedResponseId": 1908998,
+    "mediaType": "application/xml",
+    "messageBody": "body",
+    "httpHeaders": null,
+    "httpStatus": 200
+  }],
+
+  'page': 1,
+  'rows': 10,
+  'window': 5,
+}
+
+var myList, data, previousSort;
+
+state.querySet = listForPagination;
+buildTable();
+
+for (let i = 3; i >= 0; i--) {
+  document.querySelector('#btn-sort-' + i).addEventListener('click', function() {
+    addButtonListeners(i)
+  })
+}
+
+function addButtonListeners(i) {
+  var buttons = document.querySelectorAll('.btn-sort');
+  for (var j = buttons.length - 1; j >= 0; j--) {
+    buttons[j].classList.remove('active');
+  }
+  document.querySelector('#btn-sort-' + i).classList.add('active');
+  buildTable();
+}
+
+
+function pagination(querySet, page, rows) {
+
+  var trimStart = (page - 1) * rows
+  var trimEnd = trimStart + rows
+  var trimmedData = querySet.slice(trimStart, trimEnd)
+  var pages = Math.ceil(querySet.length / rows);
+  if (pages === 0) {
+    pages = 1
+  }
+  return {
+    'querySet': trimmedData,
+    'pages': pages,
+  }
+}
+
+
+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))
+  if (maxLeft < 1) {
+    maxLeft = 1
+    maxRight = state.window
+  }
+
+  if (maxRight > pages) {
+    maxLeft = pages - (state.window - 1)
+
+    if (maxLeft < 1) {
+      maxLeft = 1
+    }
+    maxRight = pages
+  }
+
+  for (var page = maxLeft; page <= maxRight; page++) {
+    if (page === state.page) {
+      wrapper.innerHTML += `<button value=${page} class="page btn btn-sm btn-info" name="allMessagesClicked">${page}</button>`
+    } else {
+      wrapper.innerHTML += `<button value=${page} class="page btn btn-sm btn-info">${page}</button>`
+    }
+  }
+  if (state.page != 1) {
+    wrapper.innerHTML = `<button value=${1} class="page btn btn-sm btn-info">&#171; First</button>` + wrapper.innerHTML
+  }
+  if (state.page != pages) {
+    wrapper.innerHTML += `<button value=${pages} class="page btn btn-sm btn-info">Last &#187;</button>`
+  }
+  $('.page').on('click', function() {
+    $('#table-body').empty()
+
+    state.page = Number($(this).val())
+
+    buildPage()
+  })
+
+}
+
+function showBody(elt){
+    $("#" + elt.id + "-body").toggle();
+}
+
+function showTable() {
+  var table = $('#table-body')
+  table.empty();
+  var color;
+  for (var i = 1; i <= myList.length; i++) {
+    var j = i + (state.page - 1) * 10;
+    i % 2 === 0 ? color = "#b3ffff" : color="#e6ffff";
+      var row = `<tr bgcolor="${color}" id="etrack-tr-${j}" onclick="showBody(this)" name="tr-button">
+                    <td>` + j + `</td>
+                    <td>${myList[i-1].messageId}</td>
+                    <td>${myList[i-1].dateTimeStamp}</td>
+                    <td>${myList[i-1].interfaceName}</td>
+                    </tr>
+                    <tr bgcolor="${color}" id="etrack-tr-${j}-body" name="tr-body" hidden>
+                    <td colspan="4">"${myList[i-1].message}"</td>
+                    </tr>`
+    table.append(row)
+  }
+  for (var i = myList.length + 1; i <= state.rows; i++) {
+    i % 2 === 0 ? color = "#b3ffff" : color="#e6ffff";
+    var j = i + (state.page - 1) * 10;
+      var row = `<tr bgcolor="${color}">
+                        <td>` + j + `</td>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                        `
+    table.append(row)
+  }
+
+  pageButtons(data.pages)
+}
+
+
+function sortTable() {
+  var sortBy = document.querySelector('.active').textContent
+  switch (sortBy) {
+    case "MessageId":
+      if (previousSort === "MessageId") {
+        state.querySet.sort((a, b) => (a.messageId > b.messageId) ? -1 : ((b.messageId > a.messageId) ? 1 : 0));
+      } else {
+        state.querySet.sort((a, b) => (a.messageId > b.messageId) ? 1 : ((b.messageId > a.messageId) ? -1 : 0));
+      }
+      break;
+    case "TimeStamp":
+      if (previousSort === "TimeStamp") {
+        state.querySet.sort((a, b) => (a.dateTimeStamp > b.dateTimeStamp) ? -1 : ((b.dateTimeStamp > a.dateTimeStamp) ? 1 : 0));
+      } else {
+        state.querySet.sort((a, b) => (a.dateTimeStamp > b.dateTimeStamp) ? 1 : ((b.dateTimeStamp > a.dateTimeStamp) ? -1 : 0));
+      }
+      break;
+    case "Action":
+      if (previousSort === "Action") {
+        state.querySet.sort((a, b) => (a.interfaceName > b.interfaceName) ? -1 : ((b.interfaceName > a.interfaceName) ? 1 : 0));
+      } else {
+        state.querySet.sort((a, b) => (a.interfaceName > b.interfaceName) ? 1 : ((b.interfaceName > a.interfaceName) ? -1 : 0));
+      }
+      break;
+  }
+  if (previousSort === sortBy) {
+    previousSort = ""
+  } else previousSort = sortBy;
+}
+
+function prepareTable() {
+  data = pagination(state.querySet, state.page, state.rows)
+  myList = data.querySet
+}
+
+function buildTable() {
+  sortTable();
+  prepareTable();
+  showTable();
+}
+
+function buildPage() {
+  prepareTable();
+  showTable();
+}

target/classes/static/js/paggination.js

@@ -1,21 +1,47 @@
 var state = {
-  'querySet': [{"clientUUID":"436c4774-038f-4540-9c18-2691ca9b53d4","mockedResponseId":1908998,"mediaType":"application/xml","messageBody":"body","httpHeaders":null,"httpStatus":200}],
+  'querySet': [{
+    "clientUUID": "436c4774-038f-4540-9c18-2691ca9b53d4",
+    "mockedResponseId": 1908998,
+    "mediaType": "application/xml",
+    "messageBody": "body",
+    "httpHeaders": null,
+    "httpStatus": 200
+  }],
 
   'page': 1,
   'rows': 10,
   'window': 5,
 }
 
-state.querySet = mockedMessageDtoList;
+var myList, data, previousSort;
+
+
+state.querySet = listForPagination;
 buildTable();
 
+for (let i = 3; i >= 0; i--) {
+  document.querySelector('#btn-sort-' + i).addEventListener('click', function() {
+    addButtonListeners(i)
+  })
+}
+
+function addButtonListeners(i) {
+  var buttons = document.querySelectorAll('.btn-sort');
+  for (var j = buttons.length - 1; j >= 0; j--) {
+    buttons[j].classList.remove('active');
+  }
+  document.querySelector('#btn-sort-' + i).classList.add('active');
+  buildTable();
+}
+
+
 function pagination(querySet, page, rows) {
 
   var trimStart = (page - 1) * rows
   var trimEnd = trimStart + rows
   var trimmedData = querySet.slice(trimStart, trimEnd)
   var pages = Math.ceil(querySet.length / rows);
-
+  if(pages === 0){pages = 1}
   return {
     'querySet': trimmedData,
     'pages': pages,
@@ -44,12 +70,11 @@ function pageButtons(pages) {
   }
 
   for (var page = maxLeft; page <= maxRight; page++) {
-  if(page === state.page){
+    if (page === state.page) {
       wrapper.innerHTML += `<button value=${page} class="page btn btn-sm btn-info" name="allMessagesClicked">${page}</button>`
-  }
-  else{
+    } else {
       wrapper.innerHTML += `<button value=${page} class="page btn btn-sm btn-info">${page}</button>`
-  }
+    }
   }
 
   if (state.page != 1) {
@@ -65,20 +90,18 @@ function pageButtons(pages) {
 
     state.page = Number($(this).val())
 
-    buildTable()
+    buildPage()
   })
 
+
 }
 
-
-function buildTable() {
+function showTable() {
   var table = $('#table-body')
-
-  var data = pagination(state.querySet, state.page, state.rows)
-  var myList = data.querySet
-    for(var i = 1; i<=myList.length; i++){
-    var j = i + (state.page-1) * 10;
-  if(i%2 === 0){
+  table.empty();
+  for (var i = 1; i <= myList.length; i++) {
+    var j = i + (state.page - 1) * 10;
+    if (i % 2 === 0) {
       var row = `<tr bgcolor="#b3ffff">
                     <td>` + j + `</td>
                     <td>${myList[i-1].mockedResponseId}</td>
@@ -95,7 +118,7 @@ function buildTable() {
                       </button>
                     </td>
                     `
-  }else{
+    } else {
       var row = `<tr bgcolor="#e6ffff">
                     <td>` + j + `</td>
                     <td>${myList[i-1].mockedResponseId}</td>
@@ -112,10 +135,76 @@ function buildTable() {
                       </button>
                     </td>
                     `
- }
+    }
 
     table.append(row)
   }
+    for (var i = myList.length + 1; i <= state.rows; i++) {
+    var j = i + (state.page - 1) * 10;
+   if (i % 2 === 0) {
+        var row = `<tr bgcolor="#b3ffff">
+                      <td>` + j + `</td>
+                      <td></td>
+                      <td></td>
+                      <td></td>
+                      `
+      } else {
+        var row = `<tr bgcolor="#e6ffff">
+                      <td>` + j + `</td>
+                      <td></td>
+                      <td></td>
+                      <td></td>
+                      `
+      }
+      table.append(row)
+    }
 
   pageButtons(data.pages)
 }
+
+function sortTable() {
+  var sortBy = document.querySelector('.active').textContent
+  switch (sortBy) {
+    case "MessageId":
+      if (previousSort === "MessageId") {
+        state.querySet.sort((a, b) => (a.mockedResponseId > b.mockedResponseId) ? -1 : ((b.mockedResponseId > a.mockedResponseId) ? 1 : 0));
+      } else {
+        state.querySet.sort((a, b) => (a.mockedResponseId > b.mockedResponseId) ? 1 : ((b.mockedResponseId > a.mockedResponseId) ? -1 : 0));
+      }
+      break;
+    case "Media Type":
+      if (previousSort === "Media Type") {
+        state.querySet.sort((a, b) => (a.mediaType > b.mediaType) ? -1 : ((b.mediaType > a.mediaType) ? 1 : 0));
+      } else {
+        state.querySet.sort((a, b) => (a.mediaType > b.mediaType) ? 1 : ((b.mediaType > a.mediaType) ? -1 : 0));
+      }
+      break;
+    case "Http Status":
+      if (previousSort === "Http Status") {
+        state.querySet.sort((a, b) => (a.httpStatus > b.httpStatus) ? -1 : ((b.httpStatus > a.httpStatus) ? 1 : 0));
+      } else {
+        state.querySet.sort((a, b) => (a.httpStatus > b.httpStatus) ? 1 : ((b.httpStatus > a.httpStatus) ? -1 : 0));
+      }
+      break;
+  }
+  if (previousSort === sortBy) {
+    previousSort = ""
+  } else previousSort = sortBy;
+  myList = state.querySet;
+}
+
+function prepareTable() {
+  data = pagination(state.querySet, state.page, state.rows)
+  myList = data.querySet
+}
+
+function buildTable() {
+  sortTable();
+  prepareTable();
+  showTable();
+}
+
+function buildPage(){
+     prepareTable();
+     showTable();
+}