229 lines
12 KiB
HTML
229 lines
12 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>R11 MockedServices</title>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="../Dependency/fontello-plus/css/fontello.css" type="text/css"/>
|
|
<link rel="stylesheet" href="../css/modal.css" type="text/css">
|
|
<link rel="stylesheet" href="../css/commons/r11form.css" type="text/css">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Acme&family=Josefin+Slab:wght@500&display=swap" rel="stylesheet">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="tool extended">
|
|
<div class="tool-context">
|
|
<div>
|
|
<h1>MockedServices <span class="version-span">v1.0.0</span></h1>
|
|
</div>
|
|
<div>
|
|
<!-- h2 -->
|
|
<div><h2>Your Message</h2></div>
|
|
<!-- save -->
|
|
<div>
|
|
<!-- <button class="action-button active large-button small-vertical-margin">Save</button> -->
|
|
</div>
|
|
<!-- link -->
|
|
<div>
|
|
<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 -->
|
|
<div class="medium-input block-display small-vertical-margin">
|
|
<!-- status -->
|
|
<div class="max-width small-vertical-margin">
|
|
<label for="httpStatus">Http Status</label>
|
|
<input id="httpStatus" class="bordered-field max-width" type="text" value="200" list="httpStatusSuggestion">
|
|
<datalist id="httpStatusSuggestion">
|
|
<option value="200">
|
|
<option value="300">
|
|
<option value="400">
|
|
<option value="403">
|
|
<option value="404">
|
|
<option value="500">
|
|
</datalist>
|
|
</div>
|
|
<!-- content type -->
|
|
<div class="max-width small-vertical-margin">
|
|
<label for="typeSelector">Content Type</label>
|
|
<input id="typeSelector" class="bordered-field max-width" type="text" value="application/xml" list="contentTypes">
|
|
<datalist id="contentTypes">
|
|
<option value="application/xml">
|
|
<option value="application/json">
|
|
<option value="text/xml">
|
|
</datalist>
|
|
</div>
|
|
</div>
|
|
<button class="small-margins half-width with-padding action-button active">Save</button>
|
|
</div>
|
|
<!-- body -->
|
|
<div class="small-vertical-margin">
|
|
<label for="bodyEditor">Body</label>
|
|
<textarea id="bodyEditor" class="bordered-field max-width with-padding height-300 vertically-resizeable"></textarea>
|
|
</div>
|
|
<!-- show/hide -->
|
|
<div class="clickable-text highlight">
|
|
<h3>> show/hide advanced settings</h3>
|
|
</div>
|
|
<!-- advanced -->
|
|
<div class="max-width with-padding">
|
|
<!-- tab menu -->
|
|
<div class="tabmenu medium-vertical-margin">
|
|
<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>
|
|
<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>
|
|
<!-- history -->
|
|
<div class="medium-vertical-margin tabcontent centered-content">
|
|
<table class="table-default">
|
|
<tr class="bottom-border">
|
|
<th>Timestamp</th>
|
|
<th>Type</th>
|
|
</tr>
|
|
<tr class="even">
|
|
<td>2021-01-01T10:57:26</td>
|
|
<td>Client request</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2021-01-01T10:57:26</td>
|
|
<td>Client request</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tool-extention">
|
|
<!-- header -->
|
|
<div>
|
|
<h2>Message List</h2>
|
|
</div>
|
|
<!-- tile list -->
|
|
<div>
|
|
<div class="tile active">
|
|
<div class="content">
|
|
<div class="display-space-between">
|
|
<div class="centered-vertically">
|
|
<p>Id: 1</p>
|
|
<p>Status: 200</p>
|
|
</div>
|
|
<div>
|
|
<button class="deletion-button btn-tile"><i class="icon-cancel"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tile">
|
|
<div class="content">
|
|
<div class="display-space-between">
|
|
<div class="centered-vertically">
|
|
<p>Id: 2</p>
|
|
<p>Status: 200</p>
|
|
</div>
|
|
<div>
|
|
<button class="deletion-button btn-tile"><i class="icon-cancel"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tile">
|
|
<div class="content">
|
|
<div class="display-space-between">
|
|
<div class="centered-vertically">
|
|
<p>Id: 3</p>
|
|
<p>Status: 200</p>
|
|
</div>
|
|
<div>
|
|
<button class="deletion-button btn-tile"><i class="icon-cancel"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tooltip-window lite">
|
|
<div>
|
|
<h2>What's this?</h2>
|
|
<p>MockedServices is a tool that allows developer to create, in easy and simple way, http server mocked endpoints for integration tests.</p>
|
|
<h2>Help</h2>
|
|
<p>When cursor hovers over an item. It's description is displayed below.</p>
|
|
<div class="large-vertical-margin">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="/js/modal.js"></script>
|
|
<script type="text/javascript" src="/js/uianimation.js"></script>
|
|
<script type="text/javascript" src="/js/datatransfer.js"></script>
|
|
<script type="text/javascript" src="/js/historyloader.js"></script>
|
|
</body>
|
|
</html> |