your messages table with update, delete buttons
This commit is contained in:
Szakalakamaka
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -45,9 +45,7 @@ button:focus {
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
button[name="allMessagesClicked"] {
|
||||
color: #00b3b3;
|
||||
}
|
||||
|
||||
|
||||
#pagination-wrapper button {
|
||||
background: none;
|
||||
@@ -56,6 +54,23 @@ button[name="allMessagesClicked"] {
|
||||
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;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
var state = {
|
||||
'querySet': ["dupa1", "sra", "na", "leb"],
|
||||
'querySet': [{"clientUUID":"436c4774-038f-4540-9c18-2691ca9b53d4","mockedResponseId":1908998,"mediaType":"application/xml","messageBody":"body","httpHeaders":null,"httpStatus":200}],
|
||||
|
||||
'page': 1,
|
||||
'rows': 10,
|
||||
@@ -10,6 +10,7 @@ state.querySet = mockedMessageDtoList;
|
||||
buildTable();
|
||||
|
||||
function pagination(querySet, page, rows) {
|
||||
|
||||
var trimStart = (page - 1) * rows
|
||||
var trimEnd = trimStart + rows
|
||||
var trimmedData = querySet.slice(trimStart, trimEnd)
|
||||
@@ -75,7 +76,6 @@ function buildTable() {
|
||||
|
||||
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){
|
||||
@@ -84,6 +84,16 @@ function buildTable() {
|
||||
<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">
|
||||
@@ -91,6 +101,16 @@ function buildTable() {
|
||||
<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>
|
||||
`
|
||||
}
|
||||
|
||||
|
||||
@@ -10,14 +10,11 @@
|
||||
</head>
|
||||
<body>
|
||||
<hr>
|
||||
<div><br>In order to set mockup response please fill the form below:
|
||||
</div>
|
||||
|
||||
<section class="page-section" id="main-section" >
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="column" >
|
||||
<br>You can also simply fill and submit the below form:
|
||||
<br>In order to set mockup response please fill the form below:
|
||||
<form action="#" th:action="@{/home/__${mockedMessageDto.clientUUID}__}"
|
||||
th:object="${mockedMessageDto}" method="post">
|
||||
<table>
|
||||
@@ -93,6 +90,7 @@
|
||||
</div>
|
||||
<div class="column">
|
||||
<br>
|
||||
<form th:action="@{/home/__${mockedMessageDto.clientUUID}__}" method="post" id="dupa" >
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -102,15 +100,14 @@
|
||||
<th class="tr-pageable">Http Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
|
||||
</tbody>
|
||||
<tbody id="table-body">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<div class="container ">
|
||||
<div id="pagination-wrapper"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -124,6 +121,8 @@
|
||||
<br>In order to set or get responses through curl or http tools you can use urls below.
|
||||
<br>When you set your response simply set headers and media type of your request that you expect to get in the
|
||||
response from the next step.
|
||||
<br>http://<a th:text="@{__${localhost}__}">localhost</a>:8097/klaus/v1/delete/<a
|
||||
th:text="${mockedMessageDto.clientUUID}">clientUUID should be here</a>/{mockedResponseId}
|
||||
<br>http://<a th:text="@{__${localhost}__}">localhost</a>:8097/klaus/v1/set/ <a
|
||||
th:text="${mockedMessageDto.clientUUID}">clientUUID should be here</a>/{mockedResponseId}?httpStatus={httpStatus}
|
||||
<br>http://<a th:text="@{__${localhost}__}">localhost</a>:8097/klaus/v1/get/<a
|
||||
@@ -135,12 +134,14 @@
|
||||
|
||||
<div>
|
||||
<br>To see your activity history use the form below
|
||||
<form action="#" th:action="@{/eventsForm}" th:object="${eventsDto}" method="post">
|
||||
<form action="#" th:action="@{/eventsForm}" th:object="${eventRequestDto}" method="post">
|
||||
<input type="text" th:name="clientUUID" th:value="${mockedMessageDto.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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user