216 lines
12 KiB
HTML
216 lines
12 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>
|
|
<br>
|
|
<p>You can test the mocked message using the url or the button below:</p>
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<p>
|
|
http://[[${localhost}]]:8097/klaus/v1/get/[[${mockedMessageDto.clientUUID}]]/[[${mockedMessageDto.mockedResponseId}]]</p>
|
|
</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/>
|
|
<input type="submit" value="Test your mock"/>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<br>
|
|
|
|
<table>
|
|
<p>In order to set or update mockup response please fill the form below and save
|
|
your message:</p>
|
|
<form action="#" th:action="@{/home/__${mockedMessageDto.clientUUID}__}"
|
|
th:object="${mockedMessageDto}" method="post">
|
|
<input type="text" th:field="*{clientUUID}" hidden/>
|
|
<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>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>
|
|
	
|
|
<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><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><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>
|
|
</tr>
|
|
</table>
|
|
<p th:if="${mockSaved}">Mock has been saved</p>
|
|
</div>
|
|
<div class="column">
|
|
<br>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<hr>
|
|
</div>
|
|
|
|
<div>
|
|
<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="@{/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>
|
|
<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 swagger or send batch requests on the urls 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> |