Removed old, depracated content
This commit is contained in:
@@ -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;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 392 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -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,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">« 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();
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://thymeleaf.org">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>R11 Klaus</title>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
|
||||
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header"></div>
|
||||
<div id="container1">
|
||||
<div id="sidebar"></div>
|
||||
<div id="child-body">
|
||||
<section class="page-section" id="main-section">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<br>To see your activity history use the form below
|
||||
<form action="#" th:action="@{/etrack/__${clientUUID}__}" th:object="${eventRequestDto}" method="post">
|
||||
<input type="text" th:name="clientUUID" th:value="${clientUUID}" hidden />
|
||||
<br><label>Mocked response id:</label><br>
|
||||
<input type="text" th:name="mockedResponseId" th:id="mockedResponseId" th:placeholder="all" />
|
||||
<td th:if="${#fields.hasErrors('mockedResponseId')}" th:errors="*{mockedResponseId}">mockedResponseId
|
||||
error
|
||||
</td>
|
||||
<br><label>Date from:</label><br>
|
||||
<input type="datetime-local" th:field="*{localDateTimeFrom}"/>
|
||||
<td th:if="${#fields.hasErrors('localDateTimeFrom')}" th:errors="*{localDateTimeFrom}">localDateTimeFrom
|
||||
Error
|
||||
</td>
|
||||
<br><label>Date to:</label><br>
|
||||
<input type="datetime-local" th:field="*{localDateTimeTo}"/>
|
||||
<td th:if="${#fields.hasErrors('localDateTimeTo')}" th:errors="*{localDateTimeTo}">localDateTimeTo
|
||||
Error
|
||||
</td>
|
||||
<div th:if="${#fields.hasAnyErrors()}">
|
||||
<p th:each="err : ${#fields.allErrors()}" th:text="${err}">...</p>
|
||||
</div>
|
||||
<input type="submit" value="See my history"/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="column">
|
||||
<br>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tr-pageable"><p class="btn-sort" id="btn-sort-0">#</p></th>
|
||||
<th class="tr-pageable"><p class="btn-sort activeButton" id="btn-sort-1">MessageId</p></th>
|
||||
<th class="tr-pageable"><p class="btn-sort" id="btn-sort-2">TimeStamp</p></th>
|
||||
<th class="tr-pageable"><p class="btn-sort" id="btn-sort-3">Action</p></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="container ">
|
||||
<div id="pagination-wrapper"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="foot"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
<script>
|
||||
$.get("https://raw.githubusercontent.com/Szakalakamaka/viewpresenter/master/src/main/resources/templates/navbar.html", function(data){
|
||||
$("#header").html(data);
|
||||
});
|
||||
$.get("https://raw.githubusercontent.com/Szakalakamaka/viewpresenter/master/src/main/resources/templates/sidebar.html", function(data){
|
||||
$("#sidebar").html(data);
|
||||
});
|
||||
$.get("https://raw.githubusercontent.com/Szakalakamaka/viewpresenter/master/src/main/resources/templates/footer.html", function(data){
|
||||
$("#foot").html(data);
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript" th:inline="javascript">
|
||||
var listForPagination = /*[[${eventList}]]*/;
|
||||
</script>
|
||||
<script src="/js/etrackPaggination.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,193 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>R11 Tools: Mock</title>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
|
||||
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<hr>
|
||||
<div id="container">
|
||||
<div class="container">
|
||||
<section class="page-section" id="main-section">
|
||||
<div class="container">
|
||||
<p>With this tool you can create mockups for http requests and use them for integration tests of
|
||||
your system.
|
||||
</p>
|
||||
<div>
|
||||
<br>
|
||||
<p>You can test the mocked message using the url default values from the form will be used.</p>
|
||||
<script>
|
||||
var pubhost = location.hostname;
|
||||
document.getElementById("pubhost").innerHTML = location.hostname;
|
||||
</script>
|
||||
<gen-link>http://<span id="pubhost">localhost</span>:8097/klaus/v1/get/[[${mockedMessageDto.clientUUID}]]/[[${mockedMessageDto.mockedResponseId}]]</gen-link>
|
||||
<p>Use this link to get your message.</p>
|
||||
<br>
|
||||
<table>
|
||||
<p>In order to change mockup response settings please fill the form below and save.</p>
|
||||
<br>
|
||||
<form action="#" th:action="@{/mock/__${mockedMessageDto.clientUUID}__}"
|
||||
th:object="${mockedMessageDto}" method="post">
|
||||
<input type="text" th:field="*{clientUUID}" hidden/>
|
||||
<tr>
|
||||
<td>Media type:</td>
|
||||
<td>
|
||||
<label>
|
||||
<select id="media-type" th:field="*{mediaType}">
|
||||
<option value="application/xml">application/xml</option>
|
||||
<option value="application/json">application/json</option>
|
||||
<option value="text/xml">text/xml</option>
|
||||
</select>
|
||||
<span class="hint">Standard that indicates the nature and format of a document, file, or assortment of bytes.</span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mocked response body:</td>
|
||||
<!-- rows="4" cols="30"-->
|
||||
<td><label>
|
||||
<textarea id="message-body" th:field="*{messageBody}" placeholder="Your message body"></textarea>
|
||||
<span class="hint">The resource data that will be requested by the client.</span>
|
||||
</label>
|
||||
</td>
|
||||
<td th:if="${#fields.hasErrors('messageBody')}" th:errors="*{messageBody}">
|
||||
Body Error
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mocked response http code status:</td>
|
||||
<td>
|
||||
<label>
|
||||
<input type="text" th:field="*{httpStatus}" placeholder="200">
|
||||
<span class="hint">Status codes are issued by a server in response to a client's request made to the server.</span>
|
||||
</label>
|
||||
</td>
|
||||
<td th:if="${#fields.hasErrors('httpStatus')}" th:errors="*{httpStatus}">
|
||||
HttpStatus Error
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><br></td>
|
||||
<td><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Header name</td>
|
||||
<td>Header value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<label>
|
||||
<td><input type="text" name="headerKey" id="headerKey"
|
||||
placeholder="myHeaderKey"/>
|
||||
<span class="hint"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label>
|
||||
<input type="text" name="headerValue" id="headerValue"
|
||||
placeholder="myHeaderValue"/>
|
||||
<span class="hint">HTTP headers let the client and the server pass additional information with an HTTP request or response.</span>
|
||||
<input type="image" name="addHeader" src="/img/icons8-plus-48.png"
|
||||
style="width: 20px;"/>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr th:each="entry, stats : *{httpHeaders}">
|
||||
<td bgcolor="#b3ffff"><input type="text" name="value" th:value="${entry.key}"
|
||||
disabled="disabled"/></td>
|
||||
<td>
|
||||
	
|
||||
<input type="text" name="value"
|
||||
th:field="*{httpHeaders[__${entry.key}__]}"/>
|
||||
<button type="submit" name="removeHeader" th:value="${entry.key}">
|
||||
<img src="/img/icons8-cancel-64.png" style="width: 20px;"/>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mocked response id:</td>
|
||||
<td><label><input type="text" th:field="*{mockedResponseId}"
|
||||
th:value="*{mockedResponseId}"/>
|
||||
<span class="hint">Unique identifier for the mocked message.</span>
|
||||
</label>
|
||||
</td>
|
||||
<td th:if="${#fields.hasErrors('mockedResponseId')}"
|
||||
th:errors="*{mockedResponseId}">Id
|
||||
Error
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="submit" value="Save settings"/></td>
|
||||
<td>
|
||||
<button type="submit" name="newMessage" th:value="*{clientUUID}">
|
||||
<img src="/img/update-button.png" style="width: 20px;"/>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</form>
|
||||
</table>
|
||||
<p th:if="${mockSaved}">Mock has been saved</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<form action="#" th:action="@{/etrack/__${mockedMessageDto.clientUUID}__}"
|
||||
th:object="${mockedMessageDto}"
|
||||
method="get">
|
||||
<p><input type="submit" value="History"/></p>
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn-list" name="Messages List" id="btn-list-1">Messages List
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr>
|
||||
</div>
|
||||
<div>
|
||||
<div id="list-wrapper" style="display: none;">
|
||||
<p>Here you can see the interactive list of all your mocked messages. You can call all of them. Use
|
||||
the buttons to sort the list and also update or delete messages.
|
||||
</p>
|
||||
<form action="#" th:action="@{/mock/__${mockedMessageDto.clientUUID}__}"
|
||||
th:object="${mockedMessageDto}" method="post">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tr-pageable">
|
||||
<p class="btn-sort" id="btn-sort-0">#</p>
|
||||
</th>
|
||||
<th class="tr-pageable">
|
||||
<p class="btn-sort activeButton" id="btn-sort-1">MessageId</p>
|
||||
</th>
|
||||
<th class="tr-pageable">
|
||||
<p class="btn-sort" id="btn-sort-2">Media Type</p>
|
||||
</th>
|
||||
<th class="tr-pageable">
|
||||
<p class="btn-sort" id="btn-sort-3">Http Status</p>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<input type="text" th:field="*{clientUUID}" hidden/>
|
||||
<tbody id="table-body"></tbody>
|
||||
</table>
|
||||
</form>
|
||||
<div class="container ">
|
||||
<div id="pagination-wrapper"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<script src="/js/paggination.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 392 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
2
src/main/resources/static/js/jquery.js
vendored
2
src/main/resources/static/js/jquery.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,36 +0,0 @@
|
||||
[{
|
||||
"clientUUID": "dfdea9a4-03e4-4157-abda-3723f998b6ee",
|
||||
"mockedResponseId": 3,
|
||||
"mediaType": "application/xml",
|
||||
"messageBody": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<note>\n <to>Tove</to>\n <from>Jani</from>\n <heading>Reminder</heading>\n <body>Don't forget me this weekend!</body>\n</note>",
|
||||
"httpHeaders": {"Connection": "keep-alive", "Keep-Alive": "timeout=60", "Date": "2021-02-08T11:36:43.375639"},
|
||||
"httpStatus": 200
|
||||
}, {
|
||||
"clientUUID": "dfdea9a4-03e4-4157-abda-3723f998b6ee",
|
||||
"mockedResponseId": 4,
|
||||
"mediaType": "application/xml",
|
||||
"messageBody": "Hello world!",
|
||||
"httpHeaders": {"Keep-Alive": "timeout=60", "Connection": "keep-alive", "Date": "2021-02-08T11:37:00.644399"},
|
||||
"httpStatus": 200
|
||||
}, {
|
||||
"clientUUID": "dfdea9a4-03e4-4157-abda-3723f998b6ee",
|
||||
"mockedResponseId": 1,
|
||||
"mediaType": "application/xml",
|
||||
"messageBody": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<note>\n <to>Tove</to>\n <from>Jani</from>\n <heading>Reminder</heading>\n <body>Don't forget me this weekend!</body>\n</note>",
|
||||
"httpHeaders": {"Connection": "keep-alive", "Keep-Alive": "timeout=60", "Date": "2021-02-08T11:36:39.348495"},
|
||||
"httpStatus": 200
|
||||
}, {
|
||||
"clientUUID": "dfdea9a4-03e4-4157-abda-3723f998b6ee",
|
||||
"mockedResponseId": 2,
|
||||
"mediaType": "application/xml",
|
||||
"messageBody": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<note>\n <to>Tove</to>\n <from>Jani</from>\n <heading>Reminder</heading>\n <body>Don't forget me this weekend!</body>\n</note>",
|
||||
"httpHeaders": {"Keep-Alive": "timeout=60", "Connection": "keep-alive", "Date": "2021-02-08T11:36:41.569362"},
|
||||
"httpStatus": 200
|
||||
}, {
|
||||
"clientUUID": "dfdea9a4-03e4-4157-abda-3723f998b6ee",
|
||||
"mockedResponseId": 5,
|
||||
"mediaType": "application/xml",
|
||||
"messageBody": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<note>\n <to>Tove</to>\n <from>Jani</from>\n <heading>Reminder</heading>\n <body>Don't forget me this weekend!</body>\n</note>",
|
||||
"httpHeaders": {"Keep-Alive": "timeout=60", "Connection": "keep-alive", "Date": "2021-02-08T11:37:28.249797"},
|
||||
"httpStatus": 200
|
||||
}]
|
||||
Reference in New Issue
Block a user