fluidB
/
webdiss
1
0
Fork 0
Code Pull Requests Activity

Refactor websocket.html to remove duplicate HTML

Browse Source
master
Jessie Murray 3 years ago
parent 05a90b7b7a
commit 4c0d3f4032
No known key found for this signature in database
GPG Key ID: E7E4D57EDDA744C5
1 changed files with 57 additions and 89 deletions
Show Stats Download Patch File Download Diff File

98
tests/websocket.html
Unescape Escape View File

@ -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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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]),

Write Preview
Loading…
Cancel
Save