static fields are initilialized
This commit is contained in:
@@ -3,33 +3,41 @@
|
||||
<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"/>
|
||||
<!-- TODO: Remove dependency -->
|
||||
<!-- <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">
|
||||
<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 id="container">
|
||||
<div id="toolName">Mocked Service <span id="version">v0.0.1</span></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 class="container">
|
||||
<div class="tool extended">
|
||||
<div class="tool-context">
|
||||
<div>
|
||||
<h1>MockedServices <span class="version-span">v1.0.0</span></h1>
|
||||
</div>
|
||||
<div id="msgBody">
|
||||
<div id="messageFields">
|
||||
<div class="fieldFloater">
|
||||
<div>
|
||||
<div>
|
||||
<!-- h2 -->
|
||||
<div id="basicItemData" class="hiddable active"><h2>Your Message</h2></div>
|
||||
<div id="advancedItemData" class="hiddable"><h2>Messaged id: <span id="mockedMessageId">1</span></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 type="text" id="httpStatus" class="field fieldDefault" value="200" list="httpStatusSuggestion">
|
||||
<input id="httpStatus" class="bordered-field max-width" type="text" value="200" list="httpStatusSuggestion">
|
||||
<datalist id="httpStatusSuggestion">
|
||||
<option value="200">
|
||||
<option value="300">
|
||||
@@ -39,9 +47,10 @@
|
||||
<option value="500">
|
||||
</datalist>
|
||||
</div>
|
||||
<div id="typeSelection">
|
||||
<!-- content type -->
|
||||
<div class="max-width small-vertical-margin">
|
||||
<label for="typeSelector">Content Type</label>
|
||||
<input id="typeSelector" class="field fieldDefault" list="contentTypes" value="application/xml"/>
|
||||
<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">
|
||||
@@ -49,145 +58,169 @@
|
||||
</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>
|
||||
<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 id="optional" class="clickable-text highlight">
|
||||
<h3>> show/hide advanced settings</h3>
|
||||
</div>
|
||||
<!-- advanced -->
|
||||
<div id="advanced" class="max-width with-padding hiddable">
|
||||
<!-- 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>
|
||||
<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>
|
||||
<!-- container -->
|
||||
<div class="medium-vertical-margin">
|
||||
<!-- headers -->
|
||||
<div id="headers" class="medium-vertical-margin tabcontent active">
|
||||
<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="modification-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="modification-button btn-add"><i class="icon-plus"></i></button></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
</div>
|
||||
<!-- history -->
|
||||
<div id="history" class="medium-vertical-margin tabcontent">
|
||||
<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 id="selectMenuContent" 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="modification-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="modification-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="modification-button btn-tile"><i class="icon-cancel"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</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 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 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>
|
||||
|
||||
Reference in New Issue
Block a user