T204 Save moved. Need final touches

This commit is contained in:
2021-03-02 14:18:23 +01:00
parent 1a04120ea4
commit 9c186a1295
56 changed files with 42 additions and 2195 deletions

View File

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

View File

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

View File

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