|
|
|
@ -45,61 +45,32 @@
|
|
|
|
|
|
|
|
|
|
<div class="pure-g">
|
|
|
|
|
<div class="pure-u-1-8"></div>
|
|
|
|
|
<div class="pure-u-1-3">
|
|
|
|
|
<h3>JSON</h3>
|
|
|
|
|
<form class="pure-form">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<div class="pure-g">
|
|
|
|
|
<div class="pure-u-2-3"><label class="ws-state pure-u-23-24" id="json-state">State: Disconnected</label></div>
|
|
|
|
|
<div class="pure-u-1-3"><button type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="json-btn-connect">Connect</button></div>
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
<form class="pure-form">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<div class="pure-g">
|
|
|
|
|
<div class="pure-u-2-3"> </div>
|
|
|
|
|
<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="json-btn-ping">Ping</button></div>
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
<form class="pure-form">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<div class="pure-g">
|
|
|
|
|
<div class="pure-u-1-3"><input disabled class="pure-u-23-24" type="text" placeholder="key" id="json-set-key" value="hello" /></div>
|
|
|
|
|
<div class="pure-u-1-3"><input disabled class="pure-u-23-24" type="text" placeholder="value" id="json-set-value" value="world" /></div>
|
|
|
|
|
<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="json-btn-set">SET</button></div>
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
<form class="pure-form">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<div class="pure-g">
|
|
|
|
|
<div class="pure-u-1-3"> </div>
|
|
|
|
|
<div class="pure-u-1-3"><input disabled class="pure-u-23-24" type="text" placeholder="key" id="json-get-key" value="hello" /></div>
|
|
|
|
|
<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="json-btn-get">GET</button></div>
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<div class="pure-g">
|
|
|
|
|
<div class="pure-u-2-3"> </div>
|
|
|
|
|
<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="json-btn-clear">Clear logs</button></div>
|
|
|
|
|
<div class="log pure-u-1-1" id="json-log">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pure-u-1-3" id="json-container"></div>
|
|
|
|
|
|
|
|
|
|
<!-- spacer -->
|
|
|
|
|
<div class="pure-u-1-12"></div>
|
|
|
|
|
|
|
|
|
|
<div class="pure-u-1-3">
|
|
|
|
|
<h3>Raw</h3>
|
|
|
|
|
<div class="pure-u-1-3" id="raw-container"></div>
|
|
|
|
|
<div class="pure-u-1-8"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
$ = function(id) {return document.getElementById(id);};
|
|
|
|
|
const host = "127.0.0.1";
|
|
|
|
|
const port = 7379;
|
|
|
|
|
|
|
|
|
|
function installBlock(title, type) {
|
|
|
|
|
const contents = `
|
|
|
|
|
<h3>$TITLE</h3>
|
|
|
|
|
<form class="pure-form">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<div class="pure-g">
|
|
|
|
|
<div class="pure-u-2-3"><label class="ws-state pure-u-23-24" id="raw-state">State: Disconnected</label></div>
|
|
|
|
|
<div class="pure-u-1-3"><button type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="raw-btn-connect">Connect</button></div>
|
|
|
|
|
<div class="pure-u-2-3"><label class="ws-state pure-u-23-24" id="$type-state">State: Disconnected</label></div>
|
|
|
|
|
<div class="pure-u-1-3"><button type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="$type-btn-connect">Connect</button></div>
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
@ -107,16 +78,16 @@
|
|
|
|
|
<fieldset>
|
|
|
|
|
<div class="pure-g">
|
|
|
|
|
<div class="pure-u-2-3"> </div>
|
|
|
|
|
<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="raw-btn-ping">Ping</button></div>
|
|
|
|
|
<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="$type-btn-ping">Ping</button></div>
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
<form class="pure-form">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<div class="pure-g">
|
|
|
|
|
<div class="pure-u-1-3"><input disabled class="pure-u-23-24" type="text" placeholder="key" id="raw-set-key" value="hello" /></div>
|
|
|
|
|
<div class="pure-u-1-3"><input disabled class="pure-u-23-24" type="text" placeholder="value" id="raw-set-value" value="world" /></div>
|
|
|
|
|
<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="raw-btn-set">SET</button></div>
|
|
|
|
|
<div class="pure-u-1-3"><input disabled class="pure-u-23-24" type="text" placeholder="key" id="$type-set-key" value="hello" /></div>
|
|
|
|
|
<div class="pure-u-1-3"><input disabled class="pure-u-23-24" type="text" placeholder="value" id="$type-set-value" value="world" /></div>
|
|
|
|
|
<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="$type-btn-set">SET</button></div>
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
@ -124,28 +95,22 @@
|
|
|
|
|
<fieldset>
|
|
|
|
|
<div class="pure-g">
|
|
|
|
|
<div class="pure-u-1-3"> </div>
|
|
|
|
|
<div class="pure-u-1-3"><input disabled class="pure-u-23-24" type="text" placeholder="key" id="raw-get-key" value="hello" /></div>
|
|
|
|
|
<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="raw-btn-get">GET</button></div>
|
|
|
|
|
<div class="pure-u-1-3"><input disabled class="pure-u-23-24" type="text" placeholder="key" id="$type-get-key" value="hello" /></div>
|
|
|
|
|
<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="$type-btn-get">GET</button></div>
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<div class="pure-g">
|
|
|
|
|
<div class="pure-u-2-3"> </div>
|
|
|
|
|
<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="raw-btn-clear">Clear logs</button></div>
|
|
|
|
|
<div class="log pure-u-1-1" id="raw-log">
|
|
|
|
|
<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="$type-btn-clear">Clear logs</button></div>
|
|
|
|
|
<div class="log pure-u-1-1" id="$type-log">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="pure-u-1-8"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
`;
|
|
|
|
|
$(`${type}-container`).innerHTML = contents.replace(/\$TITLE/g, title).replace(/\$type/g, type);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$ = function(id) {return document.getElementById(id);};
|
|
|
|
|
const host = "127.0.0.1";
|
|
|
|
|
const port = 7379;
|
|
|
|
|
|
|
|
|
|
class Client {
|
|
|
|
|
constructor(type, pingSerializer, getSerializer, setSerializer) {
|
|
|
|
@ -229,6 +194,9 @@ class Client {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
addEventListener("DOMContentLoaded", () => {
|
|
|
|
|
installBlock('JSON', 'json');
|
|
|
|
|
installBlock('Raw', 'raw');
|
|
|
|
|
|
|
|
|
|
const jsonClient = new Client('json',
|
|
|
|
|
() => JSON.stringify(['PING']),
|
|
|
|
|
(key) => JSON.stringify(['GET', key]),
|
|
|
|
|