svgs color correctly on page load

juice.py

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

static/juice.js

@@ -1,3 +1,17 @@
+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,32 +4,50 @@
 		<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 dev_type, devices in network.items() %}
+				{% for device in network %}
-				{% for device in devices %}
+				<div class="device {{ device.type }}" id="{{ device.id }}">
-				<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_type, sub_devs in device.sub_devices.items() %}
+						{% for sub_dev in device.sub_devices %}
-						{% for sub_dev in sub_devs %}
+						<div class="sub_device {{ sub_dev.type }}" id="{{ sub_dev.id }}">
-						<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>