Moved older files to their directory

src/main/resources/static/css/main.css

@@ -162,6 +162,10 @@
     cursor: pointer;
 }
 
+.menuFactory {
+    color: lightgray;
+}
+
 .menuItem:hover {
     background: lightgray;
     color: white;

src/main/resources/static/css/styles.css

@@ -1,241 +0,0 @@
-html {
-   height: 100%;
-}
-
-body {
-   min-height: 100%;
-}
-
-
-.page-section{
-  padding: 2rem 0;
-}
-
-.page-section .column{
-    float: left;
-    width: 50%;
-}
-
-.page-section .row:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-@media screen and (max-width: 600px) {
-  .column {
-    width: 100%;
-  }
-}
-
-button:hover { font-weight: 600; }
-button:hover i { margin-right: 20px; }
-
-button:focus {
-    outline: none;
-}
-
-.pageable {
-    border: 1px solid rgba(0, 0, 0, .11);
-    ;
-    padding: 10px;
-}
-
-.tr-pageable{
-    margin-left:1000px;
-}
-
-.controls-item {
-    display: inline-block;
-}
-
-.btn {
-    margin: 1px;
-}
-
-
-tr[name="tr-button"]:hover{
-background-color: #ddd;
-cursor: pointer;
-}
-
-#pagination-wrapper button {
-    background: none;
-    border: 2px solid #00b3b3;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
-}
-
-button[name="removeMessage"]{
-    background: none;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
-}
-
-button[name="updateMessage"]{
-background: none;
-border: none;
-cursor: pointer;
-transition: background-color 0.3s, color 0.3s;
-}
-
-button[name="allMessagesClicked"] {
-    color: #00b3b3;
-}
-
-button[name="removeHeader"] {
-    position: absolute;
-    background: none;
-    border: none;
-    cursor: pointer;
-    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;
-}
-
-.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;
-    vertical-align: top;
-}
-
-button{
-    padding: 5px 14px;
-    border-width: 1px;
-    border-style: solid;
-    background: #32a6cc;
-    color: #fff;
-    transition: all 0.3s ease;
-    font-family: Arial, sans-serif;
-    font-size: 1em;
-    border-radius: 2px;
-}
-
-disabled-button{
-    padding: 5px 14px;
-    border-width: 1px;
-    border-style: solid;
-    background: darkgrey;
-    color: #fff;
-    font-family: Arial, sans-serif;
-    font-size: 1em;
-    border-radius: 2px;
-}
-
-label { display: block;
-}
-.hint { display: none; color: gray; font-style: italic; float:right;}
-input:focus + .hint { display: inline; float:right;}
-textarea:focus  + .hint { display: inline; float:right; }
-textarea:focus  + .hint { display: inline; float:right; }
-select:focus  + .hint { display: inline; float:right; }
-
-select#media-type {
-    width: 500px;
-}
-
-textarea#message-body {
-    width: 500px;
-    height: 300px;
-}
-
-gen-link {
-    margin-top: 60px;
-    margin-bottom: 30px;
-    font-size: 24px;
-}

src/main/resources/static/js/etrackPaggination.js

@@ -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">&#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;
-  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();
-}

src/main/resources/static/js/main.js

@@ -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);
-}

src/main/resources/static/js/paggination.js

@@ -1,221 +0,0 @@
-var pubhost = location.hostname;
-document.getElementById("pubhost").innerHTML = location.hostname;
-
-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";
-  }
-  });
-
-
-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">&#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 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();
-}

src/main/resources/static/js/uianimation.js

@@ -14,4 +14,10 @@ function changeAdvancedVisibility(){
     }
 }
 
-document.getElementById("optional").addEventListener("click", changeAdvancedVisibility);
+function createMessageTab() {
+    var items = document.getElementById("listItems");
+    items.innerHTML += '<div class="menuItem">Item</div>';
+}
+
+$("#optional").click(changeAdvancedVisibility);
+$(".menuFactory").click(createMessageTab);