T204 Save moved. Need final touches
This commit is contained in:
		| @@ -1,180 +0,0 @@ | ||||
| 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('activeButton'); | ||||
|   } | ||||
|   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) | ||||
|   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">« First</button>` + wrapper.innerHTML | ||||
|   } | ||||
|   if (state.page != pages) { | ||||
|     wrapper.innerHTML += `<button value=${pages} class="page btn btn-sm btn-info">Last »</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; | ||||
|   console.log(myList); | ||||
|   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">"${JSON.stringify(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('.activeButton').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(); | ||||
| } | ||||
| @@ -1,37 +0,0 @@ | ||||
| function httpGet() | ||||
| { | ||||
|   var clientUUID = document.getElementById("getClientUUID").value; | ||||
|    var mockedResponseId = document.getElementById("getMockedResponseId").value; | ||||
|    var url = "http://localhost:8097/klaus/v1/get/" + clientUUID + "/" + mockedResponseId; | ||||
|     var xmlHttp = new XMLHttpRequest(); | ||||
|     xmlHttp.open( "GET", url, false ); // false for synchronous request | ||||
|     xmlHttp.send( null ); | ||||
|  | ||||
|     var container = document.getElementById("getMockedResponse"); | ||||
|     var headers = xmlHttp.getAllResponseHeaders(); | ||||
|     container.appendChild(document.createTextNode(headers)); | ||||
|     container.appendChild(document.createTextNode("Your message: ")); | ||||
|     container.appendChild(document.createElement("br")); | ||||
|     container.appendChild(document.createTextNode((xmlHttp.responseText))); | ||||
|     return xmlHttp.responseText; | ||||
|  | ||||
| } | ||||
|  | ||||
|         var numberOfHeaders = 0; | ||||
|             function addFields(){ | ||||
|             var container = document.getElementById("headers"); | ||||
|  | ||||
|                 numberOfHeaders++; | ||||
|                 container.appendChild(document.createElement("br")); | ||||
|                 container.appendChild(document.createTextNode("Header " + (numberOfHeaders))); | ||||
|                 var headerInput = document.createElement("input"); | ||||
|                 headerInput.type = "text"; | ||||
|                 headerInput.name = "header"; | ||||
|                 container.appendChild(headerInput); | ||||
|  | ||||
|                 container.appendChild(document.createTextNode("Value " + (numberOfHeaders))); | ||||
|                 var valueInput = document.createElement("input"); | ||||
|                 valueInput.type = "text"; | ||||
|                 valueInput.name = "value"; | ||||
|                 container.appendChild(valueInput); | ||||
|         } | ||||
| @@ -1,225 +0,0 @@ | ||||
| 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(); | ||||
|  | ||||
|  | ||||
| document.querySelector('#btn-list-1').addEventListener('click', function() { | ||||
|   var x = document.getElementById("list-wrapper"); | ||||
|   if (x.style.display === "none") { | ||||
|     x.style.display = "block"; | ||||
|   } else { | ||||
|     x.style.display = "none"; | ||||
|   } | ||||
|   }) | ||||
|  | ||||
| document.querySelector('#btn-list-2').addEventListener('click', function() { | ||||
|   var x = document.getElementById("advanced-wrapper"); | ||||
|   if (x.style.display === "none") { | ||||
|     x.style.display = "block"; | ||||
|   } else { | ||||
|     x.style.display = "none"; | ||||
|   } | ||||
|   }) | ||||
|  | ||||
| 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('activeButton'); | ||||
|   } | ||||
|   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) | ||||
|   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">« First</button>` + wrapper.innerHTML | ||||
|   } | ||||
|  | ||||
|   if (state.page != pages) { | ||||
|     wrapper.innerHTML += `<button value=${pages} class="page btn btn-sm btn-info">Last »</button>` | ||||
|   } | ||||
|  | ||||
|   $('.page').on('click', function() { | ||||
|     $('#table-body').empty() | ||||
|  | ||||
|     state.page = Number($(this).val()) | ||||
|  | ||||
|     buildPage() | ||||
|   }) | ||||
|  | ||||
|  | ||||
| } | ||||
|  | ||||
| function showTable() { | ||||
|   var table = $('#table-body') | ||||
|   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> | ||||
|                     <td>${myList[i-1].mediaType}</td> | ||||
|                     <td>${myList[i-1].httpStatus}</td> | ||||
|                     <td> | ||||
|                       <button type="submit" name="updateMessage" value="${myList[i-1].mockedResponseId}"> | ||||
|                       <img src="/img/update-button.png" style="width: 20px;"/> | ||||
|                       </button> | ||||
|                     </td> | ||||
|                     <td> | ||||
|                       <button type="submit" name="removeMessage" value="${myList[i-1].mockedResponseId}"> | ||||
|                       <img src="/img/icons8-cancel-64.png" style="width: 20px;"/> | ||||
|                       </button> | ||||
|                     </td> | ||||
|                     ` | ||||
|     } else { | ||||
|       var row = `<tr bgcolor="#e6ffff"> | ||||
|                     <td>` + j + `</td> | ||||
|                     <td>${myList[i-1].mockedResponseId}</td> | ||||
|                     <td>${myList[i-1].mediaType}</td> | ||||
|                     <td>${myList[i-1].httpStatus}</td> | ||||
|                     <td> | ||||
|                       <button type="submit" name="updateMessage" value="${myList[i-1].mockedResponseId}"> | ||||
|                       <img src="/img/update-button.png" style="width: 20px;"/> | ||||
|                       </button> | ||||
|                     </td> | ||||
|                     <td> | ||||
|                       <button type="submit" name="removeMessage" value="${myList[i-1].mockedResponseId}"> | ||||
|                       <img src="/img/icons8-cancel-64.png" style="width: 20px;"/> | ||||
|                       </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() { | ||||
| console.log("sortTable"); | ||||
|   var sortBy = document.querySelector('.activeButton').textContent; | ||||
|   console.log(sortBy); | ||||
|   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; | ||||
|     console.log(myList); | ||||
| } | ||||
|  | ||||
| function prepareTable() { | ||||
|   data = pagination(state.querySet, state.page, state.rows) | ||||
|   myList = data.querySet | ||||
| } | ||||
|  | ||||
| function buildTable() { | ||||
| console.log("buildTable"); | ||||
|   sortTable(); | ||||
|   prepareTable(); | ||||
|   showTable(); | ||||
| } | ||||
|  | ||||
| function buildPage(){ | ||||
|      prepareTable(); | ||||
|      showTable(); | ||||
| } | ||||
		Reference in New Issue
	
	Block a user