From 4c0d3f403232868e93203495bbc2366aa2373af0 Mon Sep 17 00:00:00 2001
From: Jessie Murray <jessie.murray@protonmail.com>
Date: Sun, 18 Jul 2021 15:46:30 -0700
Subject: [PATCH] Refactor websocket.html to remove duplicate HTML

---
 tests/websocket.html | 146 +++++++++++++++++--------------------------
 1 file changed, 57 insertions(+), 89 deletions(-)

diff --git a/tests/websocket.html b/tests/websocket.html
index 77ee9db..0f06fc8 100644
--- a/tests/websocket.html
+++ b/tests/websocket.html
@@ -45,108 +45,73 @@
 
 		<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>
-				<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>
-					</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="raw-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>
-					</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="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>
-					</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>
-				</div>
-			</div>
-
+			<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="$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>
+	<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="$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="$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>
+	<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="$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="$type-btn-clear">Clear logs</button></div>
+		<div class="log pure-u-1-1" id="$type-log">
+		</div>
+	</div>
+	`;
+	$(`${type}-container`).innerHTML = contents.replace(/\$TITLE/g, title).replace(/\$type/g, type);
+}
+
+
 class Client {
 	constructor(type, pingSerializer, getSerializer, setSerializer) {
 		this.type = type;
@@ -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]),