your messages table with update, delete buttons
This commit is contained in:
@@ -1,2 +1,2 @@
|
||||
redis.host = redis-server
|
||||
redis.port = 6379
|
||||
redis.host = localhost
|
||||
redis.port = 6379
|
||||
@@ -3,7 +3,7 @@
|
||||
<include resource="org/springframework/boot/logging/logback/base.xml"/>
|
||||
<!--https://github.com/kmtong/logback-redis-appender-->
|
||||
<appender name="LOGSTASH" class="com.release11.klaus.utilis.RedisAppender">
|
||||
<host>redis-image</host>
|
||||
<host>redis-server</host>
|
||||
<port>6379</port>
|
||||
<key>logstash</key>
|
||||
<layout class="ch.qos.logback.classic.PatternLayout">
|
||||
|
||||
@@ -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