clicking svg turns outlet on/off

juice.py

@@ -6,7 +6,7 @@ import re
 import json
 
 import requests
-from flask import Flask, render_template
+from flask import Flask, render_template, request, abort
 
 
 class RelayDevice:
@@ -34,6 +34,28 @@ class RelayDevice:
 			gpio0 = re.search(r"GPIO0: (\bLow|\bHigh)", res.text).groups()[0]
 			device.state = gpio0 == 'High'
 
+	def toggle(self, sub_dev_id):
+		"""
+		Toggles the state of a sub device.
+		"""
+		for sub_dev in sum(self.sub_devices.values(), []):
+			if sub_dev.id == sub_dev_id:
+				break
+		else:
+			return None
+
+		params = {sub_dev.gpio: 'toggle'}
+		res = requests.get('http://' + self.ip_address + '/gpio',params=params)
+		res.raise_for_status()
+
+		state = re.search(
+			rf"GPIO{sub_dev.gpio}: (\bLow|\bHigh)",
+			res.text
+		).groups()[0] == 'High'
+		sub_dev.state = state
+
+		return json.dumps({sub_dev_id: state})
+
 	def from_dict(self, data):
 		"""
 		Initializes self with data from JSON dict.
@@ -61,6 +83,7 @@ class RelayOutlet:
 	def __init__(self):
 		self.id = ""
 		self.description = ""
+		self.gpio = ""
 		self.state = False
 
 	def from_dict(self, data):
@@ -69,6 +92,7 @@ class RelayOutlet:
 		"""
 		self.id = data['id']
 		self.description = data['description']
+		self.gpio = data['gpio']
 		self.state = data['state']
 		return self
 
@@ -103,5 +127,24 @@ def index():
 	return render_template('index.html', network=network)
 
 
+@app.route('/toggle')
+def toggle():
+	"""
+	Toggles the state of a RelayDevice.
+	"""
+	device_id = request.args.get('device_id')
+	sub_dev_id = request.args.get('sub_dev_id')
+
+	for device in sum(network.values(), []):
+		if device.id == device_id:
+			break
+	else:
+		abort(404)
+	res = device.toggle(sub_dev_id)
+	if not res:
+		abort(404)
+	return res
+
+
 if __name__ == '__main__':
 	app.run(host='0.0.0.0', port=5300)

static/juice.js

@@ -0,0 +1,30 @@
+function toggle_outlet(svg) {
+	let sub_dev = get_object_from_svg(svg).parentElement;
+	let params = {
+		device_id: sub_dev.parentElement.parentElement.id,
+		sub_dev_id: sub_dev.id
+	};
+	let query = Object.keys(params)
+		.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+		.join('&');
+	fetch(window.location.href + 'toggle?' + query)
+	.then(function(response) {
+		if (!response.ok) {
+			throw new Error('HTTP error, status = ' + response.status);
+		}
+		return response.json();
+	})
+	.then(function(json) {
+		console.log(json);
+	});
+}
+
+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,12 +1,4 @@
 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-	<path fill="none" stroke="red"
-		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" />
-
 	<path fill="none" stroke="red"
 		d="M 29,30
 		L 35, 30
@@ -27,4 +19,13 @@
 		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" />
 </svg>

templates/index.html

@@ -18,7 +18,7 @@
 			{% for sub_dev in sub_devs %}
 			<div class="sub_device {{ sub_dev_type }}" id="{{ sub_dev.id }}">
 				<div class="id">{{ sub_dev.id }}</div>
-				<img class="outlet_image" src="/static/outlet.svg">
+				<object class="outlet_image" data="/static/outlet.svg"></object>
 				<div class="description">{{ sub_dev.description }}</div>
 			</div>
 			{% endfor %}