added delete()

juice.py

@@ -277,6 +277,25 @@ def lock_device():
 	return jsonify(device_id=device.id, locked=device.locked)
 
 
+@app_views.route('/delete')
+def delete():
+	"""
+	Deletes a device.
+	"""
+	device_id = request.args.get('device_id')
+
+	for device in network:
+		if device.id == device_id:
+			break
+	else:
+		return make_error(404, "device_id not found")
+
+	network.remove(device)
+	save_network()
+
+	return jsonify(True)
+
+
 def make_error(code, message):
 	"""
 	Returns a JSON error.

static/juice.css

@@ -77,13 +77,13 @@ nav span:hover {
 	src: url("/static/fontawesome-webfont.woff2");
 }
 
-.edit, .save, .lock, .unlock {
+.edit, .save, .lock, .unlock, .delete {
 	font-size: 0.8em;
 	color: dimgrey;
 	margin-left: 0.4em;
 }
 
-.edit:hover, .save:hover, .lock:hover, .unlock:hover {
+.edit:hover, .save:hover, .lock:hover, .unlock:hover, .delete:hover {
 	color: red;
 	cursor: pointer;
 }

static/juice.js

@@ -114,7 +114,7 @@ function new_device() {
 	.then(function(json) {
 		let template = document.querySelector('#RelayDevice_template');
 		let node = document.importNode(template.content, true);
-		node.querySelector('.id').textContent = json.device_id;
+		node.querySelector('.id').querySelector('.field_value').textContent = json.device_id;
 		document.querySelector('#devices').appendChild(node);
 		let children = document.querySelector('#devices').children;
 		children[children.length - 1].id = json.device_id;
@@ -143,6 +143,7 @@ function lock_device(device) {
 			field.querySelector('.edit').remove();
 		});
 		device.querySelector('.id').querySelector('.lock').remove();
+		device.querySelector('.id').querySelector('.delete').remove();
 		let unlock = document.createElement('span');
 		unlock.innerHTML = '';
 		unlock.className = 'unlock font-awesome';
@@ -176,6 +177,13 @@ function unlock_device(device) {
 			field.appendChild(edit);
 		});
 		device.querySelector('.id').querySelector('.unlock').remove();
+
+		let delete_elem = document.createElement('span');
+		delete_elem.innerHTML = '';
+		delete_elem.className = 'delete font-awesome';
+		delete_elem.setAttribute('onclick', 'delete_device(this.parentElement.parentElement)');
+		device.querySelector('.id').appendChild(delete_elem);
+
 		let lock = document.createElement('span');
 		lock.innerHTML = '';
 		lock.className = 'lock font-awesome';
@@ -183,3 +191,22 @@ function unlock_device(device) {
 		device.querySelector('.id').appendChild(lock);
 	});
 }
+
+function delete_device(device) {
+	if (!window.confirm("Are you sure you want to delete this device?")) { return; }
+	let params = {
+		device_id: device.id,
+	};
+	let query = Object.keys(params)
+		.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+		.join('&');
+
+	fetch(window.location.href + 'delete?' + query)
+	.then(function(response) {
+		return response.json();
+	})
+	.then(function(json) {
+		if (!json) { return; }
+		device.remove()
+	});
+}

templates/index.html

@@ -18,7 +18,7 @@
 			<div id="devices">
 				{% for device in network %}
 				<div class="device {{ device.type }}" id="{{ device.id }}">
-					<div class="id editable"><span class="field_value">{{ device.id }}</span>{% if not device.locked %}<span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span><span class="lock font-awesome" onclick="lock_device(this.parentElement.parentElement)">&#xe803;</span>{% else %}<span class="unlock font-awesome" onclick="unlock_device(this.parentElement.parentElement)">&#xf13e;</span>{% endif %}</div>
+					<div class="id editable"><span class="field_value">{{ device.id }}</span>{% if not device.locked %}<span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span><span class="delete font-awesome" onclick="delete_device(this.parentElement.parentElement)">&#xe804;</span><span class="lock font-awesome" onclick="lock_device(this.parentElement.parentElement)">&#xe803;</span>{% else %}<span class="unlock font-awesome" onclick="unlock_device(this.parentElement.parentElement)">&#xf13e;</span>{% endif %}</div>
 					<div class="description editable"><span class="field_value">{{ device.description }}</span>{% if not device.locked %}<span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span>{% endif %}</div>
 					<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>
@@ -37,20 +37,20 @@
 		</main>
 		<template id="RelayDevice_template">
 			<div class="device RelayDevice" id="">
-				<div class="id"></div>
+				<div class="id editable"><span class="field_value"></span><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span><span class="delete font-awesome" onclick="delete_device(this.parentElement.parentElement)">&#xe804;</span><span class="lock font-awesome" onclick="lock_device(this.parentElement.parentElement)">&#xe803;</span></div>
-				<div class="description"><span class="field_value"></span><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
+				<div class="description editable"><span class="field_value"></span><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
-				<div class="location"><span class="field_value"></span><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
+				<div class="location editable"><span class="field_value"></span><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
-				<div class="ip_address"><span class="field_value"></span><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
+				<div class="ip_address editable"><span class="field_value"></span><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
 				<div class="sub_devices">
 					<div class="sub_device RelayOutlet" id="OUT0">
 						<div class="id">OUT0</div>
 						<object class="outlet_image" data="/static/outlet.svg"></object>
-						<div class="description"><span class="field_value"></span><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
+						<div class="description editable"><span class="field_value"></span><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
 					</div>
 					<div class="sub_device RelayOutlet" id="OUT2">
 						<div class="id">OUT2</div>
 						<object class="outlet_image" data="/static/outlet.svg"></object>
-						<div class="description"><span class="field_value"></span><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
+						<div class="description editable"><span class="field_value"></span><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
 					</div>
 				</div>
 			</div>