From 0ab3da42977e6754689e7e7abd8e09135cb0c8b4 Mon Sep 17 00:00:00 2001
From: iou1name <iou1name@national.shitposting.agency>
Date: Wed, 20 Nov 2019 11:00:37 -0500
Subject: [PATCH] light strip frontend layout

---
 models.py            |  6 ++++
 static/juice.css     |  5 +++
 static/juice.js      | 42 +++++++++++++++++++++---
 templates/index.html | 77 +++++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 125 insertions(+), 5 deletions(-)

diff --git a/models.py b/models.py
index c7fe00f..bf39777 100644
--- a/models.py
+++ b/models.py
@@ -156,6 +156,12 @@ class LightStrip(Device):
 	def __init__(self):
 		super().__init__()
 		self.type = "LightStrip"
+		self.state = "solid"
+		self.animation = "static",
+		rainbow_params = [0.3, 0.3, 0.3, 0, 2, 4, 127, 128],
+		america_params = 8,
+		animation_rotate_count = 1,
+		animation_delay = 200,
 
 	async def mqtt_callback(self, app, msg):
 		topic = msg.topic.split('/')
diff --git a/static/juice.css b/static/juice.css
index ad5355b..6826310 100644
--- a/static/juice.css
+++ b/static/juice.css
@@ -86,6 +86,11 @@ nav span:hover {
 	margin: 0.2em;
 }
 
+.light_controls {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+}
+
 .sub_devices {
 	display: flex;
 }
diff --git a/static/juice.js b/static/juice.js
index 2c2811d..198d82e 100644
--- a/static/juice.js
+++ b/static/juice.js
@@ -4,11 +4,11 @@ function load() {
 	socket = init_websocket();
 
 	// initialize RelayOutlet SVG color
-	Object.entries(init_state).forEach(([device_id, sub_devs]) => {
+	Object.entries(init_state).forEach(([device_id, sub_devices]) => {
 		let device = document.querySelector('#' + device_id);
-		Object.entries(sub_devs).forEach(([sub_device_id, state]) => {
-			let sub_dev = device.querySelector('.' + sub_device_id);
-			let svg = sub_dev.querySelector('object').getSVGDocument().firstElementChild;
+		Object.entries(sub_devices).forEach(([sub_device_id, state]) => {
+			let sub_device = device.querySelector('.' + sub_device_id);
+			let svg = sub_device.querySelector('object').getSVGDocument().firstElementChild;
 			if (state) {
 				svg.classList.remove('off');
 				svg.classList.add('on');
@@ -271,3 +271,37 @@ function get_object_from_svg(svg) {
 function sleep(ms) {
 	return new Promise(resolve => setTimeout(resolve, ms));
 }
+
+function state_solid_amount(radio) {
+	let device = radio.parentElement.parentElement.parentElement.parentElement;
+	let sub_devices = device.querySelector('.sub_devices');
+	for (let sub_device of sub_devices.children) {
+		let input = sub_device.firstElementChild.firstElementChild;
+		if (radio.value === 'all') {
+			input.disabled = true;
+		} else if (radio.value === 'single') {
+			input.disabled = false;
+		}
+	}
+	if (radio.value === 'all') {
+		device.querySelector('#state_solid_all_color_' + device.id).disabled = false;
+	} else if (radio.value === 'single') {
+		device.querySelector('#state_solid_all_color_' + device.id).disabled = true;
+	}
+}
+
+function state_select(select) {
+	if (select.value === 'solid') {
+		select.parentElement.querySelector('.state_solid').style.display = 'block';
+		select.parentElement.querySelector('.state_rainbow').style.display = 'none';
+		select.parentElement.querySelector('.state_america').style.display = 'none';
+	} else if (select.value === 'rainbow') {
+		select.parentElement.querySelector('.state_solid').style.display = 'none';
+		select.parentElement.querySelector('.state_rainbow').style.display = 'block';
+		select.parentElement.querySelector('.state_america').style.display = 'none';
+	} else if (select.value === 'america') {
+		select.parentElement.querySelector('.state_solid').style.display = 'none';
+		select.parentElement.querySelector('.state_rainbow').style.display = 'none';
+		select.parentElement.querySelector('.state_america').style.display = 'block';
+	}
+}
diff --git a/templates/index.html b/templates/index.html
index 97312de..a27cff4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -39,6 +39,81 @@
 					<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>
 					{% elif device.type == 'LightStrip' %}
 					<div class="mqtt_root 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="light_controls">
+						<div class="state">
+							<span>State</span><br>
+							<select onchange="state_select(this)">
+								<option{% if device.state == 'solid' %} checked{% endif %} value="solid">Solid</option>
+								<option{% if device.state == 'rainbow' %} checked{% endif %} value="rainbow">Rainbow</option>
+								<option{% if device.state == 'america' %} checked{% endif %} value="america">America</option>
+							</select>
+							<div class="state_solid" style="display: {% if device.state == 'solid' %}block{% else %}hidden{% endif %}">
+								<input type="radio" id="state_solid_all_{{ device.id }}" name="state_solid_{{ device.id }}" value="all" onchange="state_solid_amount(this)" checked>
+								<label for="state_solid_all_{{ device.id }}">All</label><br>
+								<input type="radio" id="state_solid_single_{{ device.id }}" name="state_solid_{{ device.id }}" value="single" onchange="state_solid_amount(this)">
+								<label for="state_solid_single_{{ device.id }}">Single</label><br>
+								<label for="state_solid_all_color_{{ device.id }}">All:</label>
+								<input type="color" id="state_solid_all_color_{{ device.id }}">
+							</div>
+							<div class="state_rainbow" style="display: {% if device.state == 'rainbow' %}block{% else %}none{% endif %}">
+								<table>
+									<tr>
+										<td>Red</td>
+										<td>
+											<input type="number" id="state_rainbow_red_freq_{{ device.id }}" min="0" max="1" step="0.1">
+											<label for="state_rainbow_red_freq_{{ device.id }}">f</label>
+										</td>
+										<td>
+											<input type="number" id="state_rainbow_red_phase_{{ device.id }}" min="0" max="10" step="1">
+											<label for="state_rainbow_red_phase_{{ device.id }}">Φ</label>
+										</td>
+									</tr>
+									<tr>
+										<td>Green</td>
+										<td>
+											<input type="number" id="state_rainbow_green_freq_{{ device.id }}" min="0" max="1" step="0.1">
+											<label for="state_rainbow_green_freq_{{ device.id }}">f</label>
+										</td>
+										<td>
+											<input type="number" id="state_rainbow_green_phase_{{ device.id }}" min="0" max="10" step="1">
+											<label for="state_rainbow_green_phase_{{ device.id }}">Φ</label>
+										</td>
+									</tr>
+									<tr>
+										<td>Blue</td>
+										<td>
+											<input type="number" id="state_rainbow_blue_freq_{{ device.id }}" min="0" max="1" step="0.1">
+											<label for="state_rainbow_blue_freq_{{ device.id }}">f</label>
+										</td>
+										<td>
+											<input type="number" id="state_rainbow_blue_phase_{{ device.id }}" min="0" max="10" step="1">
+											<label for="state_rainbow_blue_phase_{{ device.id }}">Φ</label>
+										</td>
+									</tr>
+									<tr>
+										<td><label for="state_rainbow_center_{{ device.id }}">Center</label></td>
+										<td><input type="number" id="state_rainbow_center_{{ device.id }}" min="0" max="255" step="1"></td>
+									</tr>
+									<tr>
+										<td><label for="state_rainbow_width_{{ device.id }}">Width</label></td>
+										<td><input type="number" id="state_rainbow_width_{{ device.id }}" min="0" max="128" step="1"></td>
+									</tr>
+								</table>
+							</div>
+							<div class="state_america" style="display: {% if device.state == 'america' %}block{% else %}none{% endif %}">
+								<label for="state_america_stripe_{{ device.id }}">Stripe Length</label>
+								<input type="number" id="state_america_stripe_{{ device.id }}" min="1" max="256" step="1">
+							</div>
+						</div>
+						<div class="animation">
+							<span>Animation</span><br>
+							<select>
+								<option>Static</option>
+								<option>Rotate Left</option>
+								<option>Rotate Right</option>
+							</select>
+						</div>
+					</div>
 					{% endif %}
 					<div class="sub_devices">
 					{% for sub_device in device.sub_devices %}
@@ -49,7 +124,7 @@
 							<div class="description editable"><span class="field_value">{{ sub_device.description }}</span>{% if not device.locked %}<span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span>{% endif %}</div>
 							{% elif device.type == 'LightStrip' %}
 							<label class="NeoPixel_color" style="background-color: {{ sub_device.color|html_color }}">
-								<input class="NeoPixel_color_input" type="color" value="{{ sub_device.color|html_color }}" onchange="neopixel(this.parentElement.parentElement)">
+								<input class="NeoPixel_color_input" type="color" value="{{ sub_device.color|html_color }}" onchange="neopixel_state(this.parentElement.parentElement)" disabled>
 							</label>
 							{% endif %}
 						</div>