R11/release11-tools-mocked-services
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adding hints

Browse Source
This commit is contained in:
Szakalakamaka
2020-11-09 11:24:40 +01:00
parent e534dcdc28
commit 26636da555
9 changed files with 271 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
target/classes/static/css/styles.css
View File

@@ -191,4 +191,23 @@ table { border-collapse: collapse; }
tr { border: none; }
td {
border: none;
}
}
button{
padding: 5px 14px;
border-width: 1px;
border-style: solid;
background: #32a6cc;
color: #fff;
transition: all 0.3s ease;
font-family: Arial, sans-serif;
font-size: 1em;
border-radius: 2px;
}
label { display: block;}
.hint { display: none; color: gray; font-style: italic; float:right;}
input:focus + .hint { display: inline; float:right;}
textarea:focus + .hint { display: inline; float:right; }
textarea:focus + .hint { display: inline; float:right; }
select:focus + .hint { display: inline; float:right; }

20
target/classes/static/js/paggination.js
View File

@@ -14,10 +14,28 @@ var state = {
}
var myList, data, previousSort;
console.log("raz dwa trzy")
state.querySet = listForPagination;
buildTable();
document.querySelector('#btn-list-1').addEventListener('click', function() {
var x = document.getElementById("list-wrapper");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
})
document.querySelector('#btn-list-2').addEventListener('click', function() {
var x = document.getElementById("advanced-wrapper");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
})
for (let i = 3; i >= 0; i--) {
document.querySelector('#btn-sort-' + i).addEventListener('click', function() {
addButtonListeners(i)

301
target/classes/templates/index.html
View File

@@ -21,157 +21,186 @@
<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>
<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}">
<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></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>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>
</select>
<span class="hint">Standard that indicates the nature and format of a document, file, or assortment of bytes.</span>
</label>
</td>
<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>
<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>
&#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>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>
<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 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>
<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:
@@ -196,6 +225,8 @@
<script type="text/javascript" th:inline="javascript">
var listForPagination = /*[[${mockedMessageDtoList}]]*/;
</script>
<script src="/js/paggination.js"></script>
<script>
@@ -210,6 +241,8 @@ $.get("https://raw.githubusercontent.com/Szakalakamaka/viewpresenter/master/src/
});
</script>
</body>