From 921163f454c26e6b87c89d21405d54a29187eb83 Mon Sep 17 00:00:00 2001
From: iou1name <iou1name@national.shitposting.agency>
Date: Tue, 2 Jul 2019 13:09:31 -0400
Subject: [PATCH] begin strip light

---
 models.py            | 32 +++++++++++++++++++++++++++++++-
 static/juice.css     | 23 +++++++++++++++++++++++
 static/juice.js      |  6 ++++++
 templates/index.html | 10 ++++++++++
 4 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/models.py b/models.py
index 4000d10..ee6c2ab 100644
--- a/models.py
+++ b/models.py
@@ -102,6 +102,35 @@ class RelayOutlet:
 		return self
 
 
+class LightStrip:
+	"""
+	Represents an RGB LED light strip controller.
+	"""
+	def __init__(self):
+		self.id = ""
+		self.type = "LightStrip"
+		self.description = ""
+		self.location = ""
+		self.ip_address = ""
+		self.locked = False
+
+	def from_dict(self, data):
+		"""
+		Initializes self with data from JSON dict.
+		"""
+		for key, value in data.items():
+			setattr(self, key, value)
+		self.sub_devices = []
+		for sub_dev_dict in data.get('sub_devices'):
+			if sub_dev_dict.get('type') == 'RelayOutlet':
+				sub_dev = RelayOutlet().from_dict(sub_dev_dict)
+				self.sub_devices.append(sub_dev)
+			else:
+				typ = sub_dev.get('type')
+				raise ValueError(f"Unknown sub_device type {typ}")
+		return self
+
+
 class DeviceEncoder(json.JSONEncoder):
 	"""
 	A custom json encoder for dumping devices to file.
@@ -123,7 +152,8 @@ def init_network(filepath="devices.json"):
 			device = RelayDevice().from_dict(device_dict)
 			network.append(device)
 		elif device_dict.get('type') == 'LightStrip':
-			continue
+			device = LightStrip().from_dict(device_dict)
+			network.append(device)
 		else:
 			raise ValueError(f"Unknown device type {device_dict.get('type')}")
 	return network
diff --git a/static/juice.css b/static/juice.css
index ede35d4..d32109e 100644
--- a/static/juice.css
+++ b/static/juice.css
@@ -105,6 +105,29 @@ nav span:hover {
 	height: 5em;
 }
 
+.LightStrip .sub_devices {
+	flex-wrap: wrap;
+}
+
+.led {
+	padding: 0.25em;
+	margin: 0.125em;
+}
+
+.led_color {
+	border-radius: 0.25em;
+	width: 1em;
+	height: 1em;
+}
+
+.led_color_input {
+	opacity: 0;
+	display: block;
+	width: 1em;
+	height: 1em;
+	border: 0;
+}
+
 @font-face {
 	font-family: FontAwesome;
 	src: url("/static/fontawesome-webfont.woff2");
diff --git a/static/juice.js b/static/juice.js
index 7334841..7045383 100644
--- a/static/juice.js
+++ b/static/juice.js
@@ -10,6 +10,12 @@ function load() {
 			}
 		});
 	});
+
+	document.querySelectorAll('input[type=color]').forEach((led_input) => {
+		led_input.onchange = function(event) {
+			event.target.parentElement.style.backgroundColor = event.target.value;
+		}
+	});
 }
 
 function get_object_from_svg(svg) {
diff --git a/templates/index.html b/templates/index.html
index 54efe39..1ea49db 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -36,6 +36,7 @@
 					<div class="location editable"><span class="field_value">{{ device.location }}</span>{% if not device.locked %}<span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span>{% endif %}</div>
 					<div class="ip_address editable"><span class="field_value">{{ device.ip_address }}</span>{% if not device.locked %}<span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span>{% endif %}</div>
 					<div class="sub_devices">
+					{% if device.type == 'RelayDevice' %}
 						{% for sub_dev in device.sub_devices %}
 						<div class="sub_device {{ sub_dev.type }} {{ sub_dev.id }}">
 							<div class="id">{{ sub_dev.id }}</div>
@@ -43,6 +44,15 @@
 							<div class="description editable"><span class="field_value">{{ sub_dev.description }}</span>{% if not device.locked %}<span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span>{% endif %}</div>
 						</div>
 						{% endfor %}
+					{% elif device.type == 'LightStrip' %}
+					{% for n in range(48) %}
+						<div class="sub_device led led{{n}}">
+							<label class="led_color">
+								<input class="led_color_input" type="color">
+							</label>
+						</div>
+					{% endfor %}
+					{% endif %}
 					</div>
 				</div>
 			{% endfor %}