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

Added tips and returned its functionallity

Browse Source
This commit is contained in:
Gabriel Modzelewski
2021-04-06 12:59:25 +02:00
parent 4e2196cc07
commit 361a50a4a9
3 changed files with 63 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/main/resources/static/css/commons/r11form.css
View File

@@ -29,9 +29,6 @@
}
.tooltip-window .tip {
width: 80%;
background: gray;
}
.bordered-field {

75
src/main/resources/static/html/mock.html
View File

@@ -26,8 +26,8 @@
</div>
<!-- link -->
<div>
<label for="message-link" class="block-display">Link</label>
<input id="message-link" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla">
<label for="messageLink" class="block-display">Link</label>
<input id="messageLink" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla">
</div>
<div class="display-space-between max-width">
<!-- status and type -->
@@ -71,23 +71,32 @@
<div class="max-width with-padding">
<!-- tab menu -->
<div class="tabmenu medium-vertical-margin">
<button class="tabitem active clickable-text big-font">Headers</button>
<button class="tabitem clickable-text big-font">History</button>
<button id="headersTab" class="tabitem active clickable-text big-font">Headers</button>
<button id="historyTab" class="tabitem clickable-text big-font">History</button>
</div>
<!-- container -->
<div class="medium-vertical-margin">
<!-- headers -->
<div class="medium-vertical-margin tabcontent centered-content">
<table class="table-map">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="key" value="basic value"></td>
<td><input value="basic value"></td>
<td><button class="deletion-button btn-hashmap"><i class="icon-cancel"></i></button></td>
</tr>
</tbody>
<tr>
<th>Name</th>
<th>Value</th>
<th></th>
</tr>
<tr>
<td><input class="key" value="basic value"></td>
<td><input value="basic value"></td>
<td><button class="deletion-button btn-hashmap"><i class="icon-cancel"></i></button></td>
<td><input id="headerKeyInput" placeholder="name"></td>
<td><input id="headerValueInput" placeholder="value"></td>
<td><button class="clickable-text"><i class="icon-plus"></i></button></td>
</tr>
</table>
</div>
@@ -168,9 +177,45 @@
<h2>Help</h2>
<p>When cursor hovers over an item. It's description is displayed below.</p>
<div class="large-vertical-margin">
<div>
<h3>Example</h3>
<p>Here should be instruction for given field.</p>
<div id="messageLinkTip" class="tip">
<h3>Link</h3>
<p>Link is an url representing an endpoint at which you can receive your mocked response by simply sending get request.</p>
</div>
</div>
<div class="large-vertical-margin">
<div id="httpStatusTip" class="tip">
<h3>Http Status</h3>
<p>Value of the field is corresponding to status value that server will return.</p>
</div>
</div>
<div class="large-vertical-margin">
<div id="typeSelectorTip" class="tip">
<h3>Content Type</h3>
<p>Value of the field describes content of body payload contained in the response. For example if content is in xml format the value should be "application/xml" or "text/xml"</p>
</div>
</div>
<div class="large-vertical-margin">
<div id="bodyEditorTip" class="tip">
<h3>Body</h3>
<p>Value of the field describes content of response body. It's basicly the message we want server to return. If it's simple response like 200 OK or 404 not found then field might be left empty.</p>
</div>
</div>
<div class="large-vertical-margin">
<div id="headersTabTip" class="tip">
<h3>Headers</h3>
<p>Content of this tab allows to set and modify headers that will be included in the response.</p>
</div>
</div>
<div class="large-vertical-margin">
<div id="historyTabTip" class="tip">
<h3>History</h3>
<p>Content of this tab displays the history of requests or responses received/sent to the endpoint</p>
</div>
</div>
<div class="large-vertical-margin">
<div id="newHeaderTip" class="tip">
<h3>New header</h3>
<p>Insert value in the field and press the plus icon to add a new header to the message.</p>
</div>
</div>
</div>

6
src/main/resources/static/js/uianimation.js
View File

@@ -65,13 +65,13 @@ function focusOutTip(element){
function hidTip(element){
if(focusedField) return;
$('#'+element).fadeOut(100);
$('#'+element).removeClass('active');
}
function showTip(element){
if(focusedField) return;
$('.collapsible').fadeOut(0);
$('#'+element).fadeIn(100);
$('.tip').removeClass('active');
$('#'+element).addClass('active');
}
$('#messageLink').mouseover(function(){showTip('messageLinkTip')});