From fec387cf6c57d03fc60c199d1b74489b5b32b770 Mon Sep 17 00:00:00 2001
From: iou1name <iou1name@national.shitposting.agency>
Date: Thu, 6 Jun 2019 14:25:14 -0400
Subject: [PATCH] changed svg to inline, clicking changes color, remembers
 state

---
 static/juice.css     | 12 ++++++++++++
 static/juice.js      | 24 +++++++++---------------
 static/outlet.svg    | 38 ++++++++++++--------------------------
 templates/index.html |  7 ++++++-
 4 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/static/juice.css b/static/juice.css
index 3063a4c..4ada69c 100644
--- a/static/juice.css
+++ b/static/juice.css
@@ -30,3 +30,15 @@ body {
 	width: 5em;
 	height: 5em;
 }
+
+path {
+	cursor: pointer;
+}
+
+.on {
+	stroke: red;
+}
+
+.off {
+	stroke: black;
+}
diff --git a/static/juice.js b/static/juice.js
index 75411ec..5f98600 100644
--- a/static/juice.js
+++ b/static/juice.js
@@ -1,5 +1,5 @@
 function toggle_outlet(svg) {
-	let sub_dev = get_object_from_svg(svg).parentElement;
+	let sub_dev = svg.parentElement;
 	let params = {
 		device_id: sub_dev.parentElement.parentElement.id,
 		sub_dev_id: sub_dev.id
@@ -9,22 +9,16 @@ function toggle_outlet(svg) {
 		.join('&');
 	fetch(window.location.href + 'toggle?' + query)
 	.then(function(response) {
-		if (!response.ok) {
-			throw new Error('HTTP error, status = ' + response.status);
-		}
+		if (!response.ok) { throw new Error('HTTP error, status = ' + response.status); }
 		return response.json();
 	})
 	.then(function(json) {
-		console.log(json);
+		if (json[sub_dev.id]) {
+			svg.classList.remove('off');
+			svg.classList.add('on');
+		} else {
+			svg.classList.remove('on');
+			svg.classList.add('off');
+		}
 	});
 }
-
-function get_object_from_svg(svg) {
-	var all_objects = document.getElementsByTagName("object");
-	for (var i=0; i < all_objects.length; i++) {
-		if (svg === all_objects[i].getSVGDocument().firstElementChild) {
-			return all_objects[i];
-		}
-	}
-	return null;
-}
diff --git a/static/outlet.svg b/static/outlet.svg
index 60ab70d..314f598 100644
--- a/static/outlet.svg
+++ b/static/outlet.svg
@@ -1,34 +1,20 @@
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-	<style>
-		path { cursor: pointer; }
-	</style>
+<svg class="off" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
 	<path fill="none" stroke="red"
-		d="M 29,30
-		L 35, 30
-		L 35, 51
-		L 29, 51
-		Z" />
-
-		<path fill="none" stroke="red"
-		d="M 65, 30
-		L 71, 30
-		L 71, 51
-		L 65, 51
-		Z" />
-
-		<path fill="none" stroke="red"
-		d="M 43, 75
-		A 1 1 0 0 1 57,75
-		L 57,84
-		L 43,84
-		Z" />
-
-	<path fill="white" fill-opacity="0.0" stroke="red"
-		onclick="top.toggle_outlet(this.parentElement)"
 		d="M 23,10
 		L 77,10
 		A 50 49 0 0 1 77,91
 		L 23,91
 		A 50 49 0 0 1 23,10
 		Z" />
+
+	<rect x="29" y="30" width="6" height="21" fill="none" stroke="red" />
+
+	<rect x="65" y="30" width="6" height="21" fill="none" stroke="red" />
+
+	<path fill="none" stroke="red"
+		d="M 43, 75
+		A 1 1 0 0 1 57,75
+		L 57,84
+		L 43,84
+		Z" />
 </svg>
diff --git a/templates/index.html b/templates/index.html
index 5671186..ea076b3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -18,7 +18,12 @@
 			{% for sub_dev in sub_devs %}
 			<div class="sub_device {{ sub_dev_type }}" id="{{ sub_dev.id }}">
 				<div class="id">{{ sub_dev.id }}</div>
-				<object class="outlet_image" data="/static/outlet.svg"></object>
+				<svg class="outlet_image {% if sub_dev.state %}on{% else %}off{% endif %}" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+					<rect x="29" y="30" width="6" height="21" fill="none" />
+					<rect x="65" y="30" width="6" height="21" fill="none" />
+					<path fill="none" d="M 43, 75 A 1 1 0 0 1 57,75 L 57,84 L 43,84 Z" />
+					<path fill="white" fill-opacity="0.0" d="M 23,10 L 77,10 A 50 49 0 0 1 77,91 L 23,91 A 50 49 0 0 1 23,10 Z" onclick="toggle_outlet(this.parentElement)" />
+				</svg>
 				<div class="description">{{ sub_dev.description }}</div>
 			</div>
 			{% endfor %}