Files
release11-tools-mocked-serv…/src/main/resources/templates/index.html
Szakalakamaka dff31ab907 - fix collisions between js script from main page and the application,
- fix problem with special characters for etrack,
2020-11-03 15:23:21 +01:00

187 lines
11 KiB
HTML

<!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>
<hr>
<div id="container">
<div id="header"></div>
<div id="container1">
<div id="sidebar"></div>
<div id="child-body">
<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 class="row">
<div class="column">
<br>
<p>In order to set mockup response please fill the form below:</p>
<table>
<form action="#" th:action="@{/home/__${mockedMessageDto.clientUUID}__}"
th:object="${mockedMessageDto}" method="post">
<input type="text" th:field="*{clientUUID}" hidden/>
<tr>
<td>Mocked response id:</td>
<td><input type="text" th:field="*{mockedResponseId}" th:value="*{mockedResponseId}"/></td>
<td th:if="${#fields.hasErrors('mockedResponseId')}" th:errors="*{mockedResponseId}">Id
Error
</td>
</tr>
<tr>
<td>Mocked response body:</td>
<td><textarea rows="4" cols="30" th:field="*{messageBody}"
placeholder="Your message body"></textarea></td>
<td th:if="${#fields.hasErrors('messageBody')}" th:errors="*{messageBody}">Body Error</td>
</tr>
<tr>
<td>Mocked response http code status:</td>
<td><input type="text" th:field="*{httpStatus}" placeholder="200"></td>
<td th:if="${#fields.hasErrors('httpStatus')}" th:errors="*{httpStatus}">HttpStatus Error
</td>
</tr>
<tr>
<td>Header name</td>
<td>Header value</td>
</tr>
<tr>
<td><input type="text" name="headerKey" id="headerKey" placeholder="myHeaderKey"/></td>
<td>
<input type="text" name="headerValue" id="headerValue" placeholder="myHeaderValue"/>
<input type="image" name="addHeader" src="/img/icons8-plus-48.png"
style="width: 20px;"/>
</td>
</tr>
<tr th:each="entry, stats : *{httpHeaders}" bgcolor="#b3ffff">
<td><input type="text" name="value" th:value="${entry.key}" disabled="disabled"/></td>
<td>
&#9;
<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>Media type:</td>
<td><select 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></td>
</tr>
<tr>
<td><input type="submit" value="Save my message"/></td>
<td>
<button type="submit" name="newMessage" th:value="*{clientUUID}">
<img src="/img/update-button.png" style="width: 20px;"/>
</button>
</td>
</tr>
</form>
</table>
<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>
<form action="#" th:action="@{/home/getMockedResponse}" th:object="${mockedMessageDto}"
method="get">
<input type="text" th:field="*{clientUUID}" hidden/>
<input type="text" th:field="*{mockedResponseId}" hidden/>
<p th:if="${canTest}"><input type="submit" value="Test your mock"/></p>
</form>
</td>
</tr>
</table>
<p th:if="${mockSaved}">Mock has been saved</p>
</div>
<div class="column">
<br>
<form action="#" th:action="@{/home/__${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>
</div>
</section>
<hr>
</div>
<hr>
<div>
<br>If you are keen to use the mocking service with bigger amount of messages or automate the process by inserting
high amount of random messages please consider using the tools below:
<br><a href="http://[[${localhost}]]:8097/swagger-ui.html">http://[[${localhost}]]:8097/swagger-ui.html</a>
<br>
<br>http://[[${localhost}]]:8097/klaus/v1/delete/[[${mockedMessageDto.clientUUID}]]/{mockedResponseId}
<br>http://[[${localhost}]]:8097/klaus/v1/set/[[${mockedMessageDto.clientUUID}]]/{mockedResponseId}?httpStatus={httpStatus}
<br>http://[[${localhost}]]:8097/klaus/v1/get/[[${mockedMessageDto.clientUUID}]]/{mockedResponseId}
<br>http://[[${localhost}]]:8097/klaus/v1/getAll/[[${mockedMessageDto.clientUUID}]]
</div>
<hr>
</div>
</div>
</div>
<div id="foot"></div>
</div>
<script type="text/javascript" th:inline="javascript">
var listForPagination = /*[[${mockedMessageDtoList}]]*/;
</script>
<script src="/js/paggination.js"></script>
<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>
</body>
</html>