juice.py

@@ -23,11 +23,10 @@ class RelayDevice:
 	"""
 	def __init__(self):
 		self.id = ""
-		self.type = ""
 		self.description = ""
 		self.location = ""
 		self.ip_address = ""
-		self.sub_devices = []
+		self.sub_devices = {}
 
 		self.update()
 
@@ -36,16 +35,16 @@ class RelayDevice:
 		Queries the physical device and updates the internal model as
 		appropriate.
 		"""
-		for sub_dev in self.sub_devices:
+		for name, device in self.sub_devices.items():
 			res = requests.get(self.ip_address)
 			gpio0 = re.search(r"GPIO0: (\bLow|\bHigh)", res.text).groups()[0]
-			sub_dev.state = gpio0 == 'High'
+			device.state = gpio0 == 'High'
 
 	def toggle(self, sub_dev_id):
 		"""
 		Toggles the state of a sub device.
 		"""
-		for sub_dev in self.sub_devices:
+		for sub_dev in sum(self.sub_devices.values(), []):
 			if sub_dev.id == sub_dev_id:
 				break
 		else:
@@ -69,14 +68,14 @@ class RelayDevice:
 		"""
 		for key, value in data.items():
 			setattr(self, key, value)
-		self.sub_devices = []
+		for sub_dev_type, sub_devs in data['sub_devices'].items():
-		for sub_dev_dict in data.get('sub_devices'):
+			if sub_dev_type == 'RelayOutlet':
-			if sub_dev_dict.get('type') == 'RelayOutlet':
+				self.sub_devices[sub_dev_type] = []
-				sub_dev = RelayOutlet().from_dict(sub_dev_dict)
+				for sub_dev in sub_devs:
-				self.sub_devices.append(sub_dev)
+					sub_dev = RelayOutlet().from_dict(sub_dev)
+					self.sub_devices[sub_dev_type].append(sub_dev)
 			else:
-				typ = sub_dev.get('type')
+				raise ValueError(f"Unknown sub_device type {dev_name}")
-				raise ValueError(f"Unknown sub_device type {typ}")
 		return self
 
 
@@ -86,7 +85,6 @@ class RelayOutlet:
 	"""
 	def __init__(self):
 		self.id = ""
-		self.type = ""
 		self.description = ""
 		self.gpio = ""
 		self.state = False
@@ -115,13 +113,15 @@ def init_network(filepath="devices.json"):
 	with open(filepath, 'r') as file:
 		data = file.read()
 	data = json.loads(data)
-	network = []
+	network = {}
-	for device_dict in data:
+	for dev_type, devices in data.items():
-		if device_dict.get('type') == 'RelayDevice':
+		if dev_type == 'RelayDevice':
-			device = RelayDevice().from_dict(device_dict)
+			network[dev_type] = []
-			network.append(device)
+			for device in devices:
+				device = RelayDevice().from_dict(device)
+				network[dev_type].append(device)
 		else:
-			raise ValueError(f"Unknown device type {device.get('type')}")
+			raise ValueError(f"Unknown device type {dev_name}")
 	return network
 
 
@@ -140,13 +140,7 @@ def index():
 	"""
 	The index page.
 	"""
-	init_state = {}
+	return render_template('index.html', network=network)
-	for device in network:
-		device_state = {}
-		for sub_dev in device.sub_devices:
-			device_state[sub_dev.id] = sub_dev.state
-		init_state[device.id] = device_state
-	return render_template('index.html', network=network,init_state=init_state)
 
 
 @app_views.route('/toggle')
@@ -158,7 +152,7 @@ def toggle():
 	device_id = request.args.get('device_id')
 	sub_dev_id = request.args.get('sub_dev_id')
 
-	for device in network:
+	for device in sum(network.values(), []):
 		if device.id == device_id:
 			break
 	else:
@@ -180,14 +174,14 @@ def edit():
 	field = request.args.get('field')
 	value = request.args.get('value')
 
-	for device in network:
+	for device in sum(network.values(), []):
 		if device.id == device_id:
 			break
 	else:
 		return make_error(404, "device_id not found")
 
 	if sub_dev_id:
-		for sub_dev in device.sub_devices:
+		for sub_dev in sum(device.sub_devices.values(), []):
 			if sub_dev.id == sub_dev_id:
 				break
 		else:

static/juice.js

@@ -1,17 +1,3 @@
-function load() {
-	Object.entries(init_state).forEach(([device_id, sub_devs]) => {
-		let device = document.querySelector('#' + device_id);
-		Object.entries(sub_devs).forEach(([sub_dev_id, state]) => {
-			let sub_dev = device.querySelector('#' + sub_dev_id);
-			let svg = sub_dev.querySelector('object').getSVGDocument().firstElementChild;
-			if (state) {
-				svg.classList.remove('off');
-				svg.classList.add('on');
-			}
-		});
-	});
-}
-
 function get_object_from_svg(svg) {
 	var all_objects = document.getElementsByTagName("object");
 	for (var i=0; i < all_objects.length; i++) {

templates/index.html

@@ -4,50 +4,32 @@
 		<title>Juice</title>
 		<link rel="stylesheet" type="text/css" href="/static/juice.css">
 		<script type="text/javascript" src="/static/juice.js"></script>
-		<script>var init_state = {{ init_state|tojson|safe }};</script>
-		<script>window.onload = load;</script>
 	</head>
 	<body>
 		<main>
 			<div id="devices">
-				{% for device in network %}
+				{% for dev_type, devices in network.items() %}
-				<div class="device {{ device.type }}" id="{{ device.id }}">
+				{% for device in devices %}
+				<div class="device {{ dev_type }}" id="{{ device.id }}">
 					<div class="id">{{ device.id }}</div>
 					<div class="description"><span class="field_value">{{ device.description }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
 					<div class="location"><span class="field_value">{{ device.location }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
 					<div class="ip_address"><i>{{ device.ip_address }}</i></div>
 					<div class="sub_devices">
-						{% for sub_dev in device.sub_devices %}
+						{% for sub_dev_type, sub_devs in device.sub_devices.items() %}
-						<div class="sub_device {{ sub_dev.type }}" id="{{ sub_dev.id }}">
+						{% 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>
 							<div class="description"><span class="field_value">{{ sub_dev.description }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
 						</div>
 						{% endfor %}
+						{% endfor %}
 					</div>
 				</div>
 			{% endfor %}
+			{% endfor %}
 			</div>
 		</main>
-		<template id="RelayDevice">
-			<div class="device RelayDevice" id="">
-				<div class="id"></div>
-				<div class="description"><span class="field_value"></span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
-				<div class="location"><span class="field_value"></span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
-				<div class="ip_address"><i></i></div>
-				<div class="sub_devices">
-					<div class="sub_device RelayOutlet" id="">
-						<div class="id"></div>
-						<object class="outlet_image" data="/static/outlet.svg"></object>
-						<div class="description"><span class="field_value"></span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
-					</div>
-					<div class="sub_device RelayOutlet" id="">
-						<div class="id"></div>
-						<object class="outlet_image" data="/static/outlet.svg"></object>
-						<div class="description"><span class="field_value"></span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
-					</div>
-				</div>
-			</div>
-		</template>
 	</body>
 </html>