changed svg to inline, clicking changes color, remembers state

static/juice.css

@@ -30,3 +30,15 @@ body {
 	width: 5em;
 	height: 5em;
 }
+
+path {
+	cursor: pointer;
+}
+
+.on {
+	stroke: red;
+}
+
+.off {
+	stroke: black;
+}

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) {
+		if (!response.ok) { throw new Error('HTTP error, status = ' + response.status); }
-			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;
-}

static/outlet.svg

@@ -1,34 +1,20 @@
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<svg class="off" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-	<style>
-		path { cursor: pointer; }
-	</style>
 	<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>

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 %}