198 lines
9.7 KiB
HTML
198 lines
9.7 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>R11 MockedServices</title>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="/css/main.css" type="text/css">
|
|
<link rel="stylesheet" href="/css/tooltip.css" type="text/css">
|
|
<link rel="stylesheet" href="http://gordon.zipper.release11.com:8085/common.css" type="text/css">
|
|
<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/table.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 id="container">
|
|
<div id="toolName">Mocked Service</div>
|
|
<div id="itemData">
|
|
<div id="basicItemData" class="articleHead">Your message</div>
|
|
<div id="advancedItemData" class="articleHead" style="display: none;">Message id: <span id="mockedMessageId"></span></div>
|
|
<div id="link">
|
|
<label for="messageLink">Link</label>
|
|
<div id="messageLink" class="field"></div>
|
|
</div>
|
|
<div id="msgBody">
|
|
<div id="messageFields">
|
|
<div class="fieldFloater">
|
|
<div>
|
|
<label for="httpStatus">Http Status</label>
|
|
<input type="text" id="httpStatus" class="field fieldDefault" 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>
|
|
<div id="typeSelection">
|
|
<label for="typeSelector">Content Type</label>
|
|
<input id="typeSelector" class="field fieldDefault" list="contentTypes" value="application/xml"/>
|
|
<datalist id="contentTypes">
|
|
<option value="application/xml">
|
|
<option value="application/json">
|
|
<option value="text/xml">
|
|
</datalist>
|
|
</div>
|
|
</div>
|
|
<div class="fieldFloater" id="functionBar">
|
|
<div class="buttonSpacer"></div>
|
|
<div><button id="btn-save" type="submit" class="functionBarButton btn-action">Save</button></div>
|
|
<div class="buttonSpacer"></div>
|
|
<div style="clear: both;"></div>
|
|
</div>
|
|
<div style="clear: both;"></div>
|
|
</div>
|
|
|
|
<div id="bodyEdition">
|
|
<label for="bodyEditor">Body:</label>
|
|
<textarea type="text" id="bodyEditor" class="field resizeNone fieldText"></textarea>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="optional">> show/hide advanced settings</div>
|
|
<div id="advanced" style="display: none;">
|
|
<div id="advancedMenu">
|
|
<div id="headersTab" class="advancedMenuTabSelected">Headers</div>
|
|
<div id="historyTab" class="advancedMenuTab">History</div>
|
|
</div>
|
|
<div id="headers">
|
|
<table id="headerTable">
|
|
<thead>
|
|
<tr>
|
|
<td>Header</td>
|
|
<td>Value</td>
|
|
<td></td>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="httpStatusValues">
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td><input type="text" name="headerKey" id="headerKeyInput" placeholder="key" class="tableField"/></td>
|
|
<td><input type="text" name="headerValue" id="headerValueInput" placeholder="value" class="tableField"/></td>
|
|
<td id="btn-addRow" class="btn-function-table btn-table-add">+</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
<div id="history" style="display:none;">
|
|
<div id="historyFunction">
|
|
<div>
|
|
<label for="historyFrom">From</label>
|
|
<input type="date" name="dateFrom" id="historyFrom"/>
|
|
<input type="time" name="timeFrom" id="historyTimeFrom"/>
|
|
</div>
|
|
<div>
|
|
<label for="historyTo">To</label>
|
|
<input type="date" name="dateTo" id="historyTo"/>
|
|
<input type="time" name="dateTo" id="historyTimeTo"/>
|
|
</div>
|
|
<button id="btn-searchHistory">Search</button>
|
|
</div>
|
|
<div style="clear:both;"></div>
|
|
<div id="historyDisplay">
|
|
<table id="historyTable" class="simpleTable">
|
|
<thead>
|
|
<tr class="head">
|
|
<th>Timestamp</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="selectMenu">
|
|
<div id="selectMenuContent" style="display: none;">
|
|
<div id="selectMenuHead" class="articleHead">List</div>
|
|
<div id="listItems"></div>
|
|
<div id="iconPlus" class="menuItem"><i class="icon-plus"></i></div>
|
|
</div>
|
|
</div>
|
|
<div id="tooltip" class="fixed tooltip">
|
|
<div id="mockIntroTip">
|
|
<h2>What's mock service?</h2>
|
|
<p>It's super simple! Need data as response from the server? Mock your api in just a few clicks.</p>
|
|
<p>Hover over an item to see description!</p>
|
|
<br>
|
|
<h2>Help:</h2>
|
|
</div>
|
|
|
|
<div id="messageLinkTip" class="collapsible" style="display: none;">
|
|
<!--style="display: none;"-->
|
|
<h4>The link</h4>
|
|
<p>It's url where you need send your request</p>
|
|
</div>
|
|
<div id="httpStatusTip" class="collapsible" style="display: none;">
|
|
<h4>Http status</h4>
|
|
<p>Set http status for server response. 200 OK is default.</p>
|
|
</div>
|
|
<div id="typeSelectorTip" class="collapsible" style="display: none;">
|
|
<h4>Content type</h4>
|
|
<p>Select content type of body. Set plain text if data has no format.</p>
|
|
</div>
|
|
<div id="bodyEditorTip" class="collapsible" style="display: none;">
|
|
<h4>Body</h4>
|
|
<p>Text placed in this field will be displayed as response body</p>
|
|
</div>
|
|
<div id="headersTabTip" class="collapsible" style="display: none;">
|
|
<h4>Headers</h4>
|
|
<p>Set headers for your messages.</p>
|
|
</div>
|
|
<div id="historyTabTip" class="collapsible" style="display: none;">
|
|
<h4>History</h4>
|
|
<p>Check history of this message</p>
|
|
</div>
|
|
<div id="newHeaderTip" class="collapsible" style="display: none;">
|
|
<h4>Next header value</h4>
|
|
<p>Type values and press enter to add new header.</p>
|
|
</div>
|
|
</div>
|
|
<div style="clear:both;"></div>
|
|
|
|
|
|
</div>
|
|
<div id="overlay"></div>
|
|
<div id="modal-confirm" class="modal">
|
|
<div class="header">
|
|
<div>Message saved<i class="r-exclamation"></i></div>
|
|
<button>×</button>
|
|
</div>
|
|
<div class="body">Your message has been successfuly saved.<br>You might view it under the link.</div>
|
|
</div>
|
|
<div id="modal-query" class="modal">
|
|
<div class="header">
|
|
<div>Unsaved data<i class="r-exclamation"></i></div>
|
|
<button>×</button>
|
|
</div>
|
|
<div class="body">You haven't saved your message! Any changes will be lost.<br>Do you want to continue?</div>
|
|
<div class="function">
|
|
<button>Yes</button>
|
|
<button>No</button>
|
|
</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> |