From c7441434312024e1d3e43016f3d9b3600727aa62 Mon Sep 17 00:00:00 2001
From: iou1name <iou1name@national.shitposting.agency>
Date: Thu, 20 Jun 2019 14:51:00 -0400
Subject: [PATCH] added delete()

---
 juice.py                         |  19 +++++++++++++++++++
 static/fontawesome-webfont.woff2 | Bin 2932 -> 3140 bytes
 static/juice.css                 |   4 ++--
 static/juice.js                  |  29 ++++++++++++++++++++++++++++-
 templates/index.html             |  14 +++++++-------
 5 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/juice.py b/juice.py
index b84d52d..d1f0183 100644
--- a/juice.py
+++ b/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.
diff --git a/static/fontawesome-webfont.woff2 b/static/fontawesome-webfont.woff2
index 2d1883329e9de5096111e81076358b28d94d07c4..2153264f82dec31db2f0c5ad6be4e1abdea712b7 100644
GIT binary patch
literal 3140
zcmV-K47>ApPew8T0RR9101QL`4*&oF02#ah01NE^0RR9100000000000000000000
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

literal 2932
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

diff --git a/static/juice.css b/static/juice.css
index 3c446d1..f6104c3 100644
--- a/static/juice.css
+++ b/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;
 }
diff --git a/static/juice.js b/static/juice.js
index d9241de..2a90d6d 100644
--- a/static/juice.js
+++ b/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 = '&#xf13e;';
 		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 = '&#xe804;';
+		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 = '&#xe803;';
 		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()
+	});
+}
diff --git a/templates/index.html b/templates/index.html
index d2ce55f..6e7ba0d 100644
--- a/templates/index.html
+++ b/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="description"><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="ip_address"><span class="field_value"></span><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></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 editable"><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 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>