249 lines
14 KiB
HTML
249 lines
14 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>
|
|
<label><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>
|
|
<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>
|
|
<td><label><textarea rows="4" cols="30" 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>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 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>
|
|
<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>
|
|
<td>
|
|
<button class="btn-list" name="Messages List" id="btn-list-2">Advanced</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="@{/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>
|
|
<hr>
|
|
<div id="advanced-wrapper" style="display: none;">
|
|
<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> |