overhaul new_device() function

events.py

@@ -98,42 +98,56 @@ async def new_device(request, ws, data):
 	Allows adding a new device. Accepts device_type parameter, returns
 	the device_id.
 	"""
+	device_id = data.get('device_id', '')
 	device_type = data.get('device_type')
+	num_sub_devices = data.get('num_sub_devices')
+
+	try:
+		num_sub_devices = int(num_sub_devices)
+	except (TypeError, ValueError):
+		data['ok'] = False
+		data['error'] = "num_sub_devices value error"
+		await ws.send_json(data)
+		return
 
 	data = {}
-	data['device_type'] = device_type
+	if device_type == 'relay_device':
-
-	if device_type == 'RelayDevice':
 		device = models.RelayDevice()
-		device.sub_devices.append(models.RelayOutlet())
+		for n in [0,2]:
-		device.sub_devices.append(models.RelayOutlet())
+			sub_device = models.RelayOutlet()
-		device.sub_devices[0].id = 'OUT0'
+			sub_device.id = 'OUT' + str(n)
-		device.sub_devices[0].gpio = '0'
+			sub_device.gpio = str(n)
-		device.sub_devices[1].id = 'OUT2'
+			device.sub_devices.append(sub_device)
-		device.sub_devices[1].gpio = '2'
 		device.update()
+	elif device_type == 'light_strip':
+		device = models.LightStrip()
+		for n in range(num_sub_devices):
+			sub_device = models.NeoPixel()
+			sub_device.id = 'LED' + str(n)
+			device.sub_devices.append(sub_device)
+	elif device_type == 'lixie_clock':
+		device = models.LixieClock()
+		for n in range(num_sub_devices):
+			sub_device = models.LixieDisplay()
+			sub_device.id = 'LixieDisplay' + str(n)
+			device.sub_devices.append(sub_device)
 	else:
 		data['ok'] = False
 		data['error'] = "unknown device type"
 		await ws.send_json(data)
 		return
 
-	devices = [dev for dev in network if dev.type == device_type]
+	while network.find(device_id):
-	devices.sort(key=lambda dev: dev.id)
+		device_id += '0'
-	if not devices:
+	device.id = device_id
-		device.id = device_type + '01'
+
-	else:
-		num = re.search(r'(\d*)$', devices[-1].id).groups()
-		if not num:
-			device.id = device_type + '01'
-		else:
-			num = str(int(num[0]) + 1).zfill(2)
-			device.id = device_type + num
 	network.append(device)
 	models.save_network(network)
 
 	data['ok'] = True
 	data['device_id'] = device.id
+	data['device_type'] = device_type
+	data['sub_device_ids'] = [sub_dev.id for sub_dev in device.sub_devices]
 	res = {'event': 'new_device', 'data': data}
 	await request.app.send_json_all(res)
 

models.py

@@ -159,11 +159,11 @@ class LightStrip(Device):
 		super().__init__()
 		self.type = "LightStrip"
 		self.state = "solid"
-		self.animation = "static",
+		self.animation = "static"
-		rainbow_params = [0.3, 0.3, 0.3, 0, 2, 4, 127, 128],
+		self.rainbow_params = [0.3, 0.3, 0.3, 0, 2, 4, 127, 128]
-		america_params = [8, 128],
+		self.america_params = [8, 128]
-		animation_rotate_count = 1,
+		self.animation_rotate_count = 1
-		animation_delay = 200,
+		self.animation_delay = 200
 
 	def mqtt_callback(self, app, msg):
 		topic = msg.topic.split('/')

static/juice.css

@@ -182,3 +182,20 @@ nav span:hover {
 	color: red;
 	cursor: pointer;
 }
+
+#new_device_dialog {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	border: 2px solid darkgray;
+	border-radius: 0.5em;
+	padding: 3em;
+	margin: 3em;
+	background-color: whitesmoke;
+}
+
+#new_device_settings {
+	display: flex;
+	column-gap: 2em;
+}

static/juice.js

@@ -109,14 +109,30 @@ function edit_field_recv(data) {
 }
 
 function new_device_recv(data) {
-	if (data.device_type == 'RelayDevice') {
+	let device_type, sub_device_template;
-		var template = document.querySelector('#RelayDevice_template');
+	if (data.device_type == 'relay_device') {
-	} else {
+		device_template = document.querySelector('#RelayDevice_template');
-		return;
+		sub_device_template = document.querySelector('#RelayOutlet_template');
+	} else if (data.device_type == 'light_strip') {
+		device_template = document.querySelector('#LightStrip_template');
+		sub_device_template = document.querySelector('#NeoPixel_template');
+	} else if (data.device_type == 'lixie_clock') {
+		device_template = document.querySelector('#LixieClock_template');
+		sub_device_template = document.querySelector('#LixieDisplay_template');
 	}
-	let node = document.importNode(template.content, true);
+
-	node.querySelector('.id').querySelector('.field_value').textContent = data.device_id;
+	let device = document.importNode(device_template.content, true);
-	document.querySelector('#devices').appendChild(node);
+	device.querySelector('.id').querySelector('.field_value').textContent = data.device_id;
+	for (let sub_device_id of data.sub_device_ids) {
+		let sub_device = document.importNode(sub_device_template.content, true);
+		sub_device.firstElementChild.classList.add(sub_device_id);
+		if (sub_device.querySelector('.id')) {
+			sub_device.querySelector('.id').textContent = sub_device_id;
+		}
+		device.querySelector('.sub_devices').appendChild(sub_device);
+	}
+
+	document.querySelector('#devices').appendChild(device);
 	let children = document.querySelector('#devices').children;
 	children[children.length - 1].id = data.device_id;
 }
@@ -277,10 +293,16 @@ function save_field(field) {
 	socket.send('edit_field', data);
 }
 
-function new_device() {
+function new_device(dialog) {
+	let device_id = dialog.querySelector('#new_device_id').value;
+	let device_type = dialog.querySelector('input[name=new_device_type]:checked').value;
+	let num_sub_devices = dialog.querySelector('#new_device_num_sub_devices').value;
+
 	let data = {
-		device_type: 'RelayDevice',
+		'device_id': device_id,
-	};
+		'device_type': device_type,
+		'num_sub_devices': num_sub_devices,
+	}
 	socket.send('new_device', data);
 }
 

templates/index.html

@@ -25,7 +25,7 @@
 			</div>
 			<nav>
 				<span class="font-awesome" title="Home"><a href="./">&#xe806;</a></span>
-				<span class="font-awesome" title="Add new device" onclick="new_device()">&#xe802;</span>
+				<span class="font-awesome" title="Add new device" onclick="document.querySelector('#new_device_dialog').showModal();">&#xe802;</span>
 			</nav>
 		</header>
 		<main>
@@ -78,7 +78,7 @@
 							<input type="radio" id="state_solid_single_" name="state_solid_" value="single" onchange="state_solid_amount(this)">
 							<label for="state_solid_single_">Single</label><br>
 							<label for="state_solid_all_color_">All:</label>
-							<input type="color" id="state_solid_all_color_" value="#ff0000" onchange="neopixel_state(this.closest('.device'))">
+							<input type="color" id="state_solid_all_color_" value="#000000" onchange="neopixel_state(this.closest('.device'))">
 						</div>
 						<div class="state_rainbow" style="display: none">
 							<table>
@@ -162,8 +162,8 @@
 		</template>
 		<template id="NeoPixel_template">
 			<div class="sub_device NeoPixel">
-				<label class="NeoPixel_color" style="background-color: #ff0000">
+				<label class="NeoPixel_color" style="background-color: #000000">
-					<input class="NeoPixel_color_input" type="color" value="#ff0000" onchange="neopixel_state(this.closest('.sub_device'))" disabled>
+					<input class="NeoPixel_color_input" type="color" value="#000000" onchange="neopixel_state(this.closest('.sub_device'))" disabled>
 				</label>
 			</div>
 		</template>
@@ -187,7 +187,7 @@
 						<input type="number" id="lixie_number_" class="number" min="0" max="9999" value="1111" onchange="lixie_clock(this)">
 					</div>
 					<label for="display_color_">Color:</label>
-					<input type="color" id="display_color_" class="color" value="#ff0000" onchange="lixie_clock(this)">
+					<input type="color" id="display_color_" class="color" value="#000000" onchange="lixie_clock(this)">
 				</div>
 				<div class="sub_devices">
 				</div>
@@ -198,5 +198,26 @@
 				LixieDisplay
 			</div>
 		</template>
+		<dialog id="new_device_dialog" onclose="new_device(this)">
+			<form id="new_device_form" method="dialog">
+				<div id="new_device_settings">
+					<div>
+						<input type="radio" name="new_device_type" id="new_device_relay" value="relay_device" checked>
+						<label for="new_device_relay">Relay Device</label><br>
+						<input type="radio" name="new_device_type" id="new_device_light_strip" value="light_strip">
+						<label for="new_device_light_strip">Light Strip</label><br>
+						<input type="radio" name="new_device_type" id="new_device_lixie_clock" value="lixie_clock">
+						<label for="new_device_lixie_clock">Lixie Clock</label>
+					</div>
+					<div>
+						<label for="new_device_id">New Device ID</label>
+						<input type"text" id="new_device_id" required><br>
+						<label for="new_device_num_sub_devices">Num. Sub-Devices:</label>
+						<input type="number" id="new_device_num_sub_devices" min="0" max="999" default="2"><br>
+					</div>
+				</div>
+				<input type="submit">
+			</form>
+		</dialog>
 	</body>
 </html>