- finishing etrack

- new buttons for main page
- swagger

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();
+}