server remembers device locked state

juice.py

@@ -27,6 +27,8 @@ class RelayDevice:
 		self.description = ""
 		self.location = ""
 		self.ip_address = ""
+		self.locked = False
+
 		self.sub_devices = []
 		self.sub_devices.append(RelayOutlet())
 		self.sub_devices.append(RelayOutlet())
@@ -194,6 +196,9 @@ def edit():
 	else:
 		return make_error(404, "device_id not found")
 
+	if device.locked:
+		return make_error(400, "device is locked for editing")
+
 	if sub_dev_id:
 		for sub_dev in device.sub_devices:
 			if sub_dev.id == sub_dev_id:
@@ -249,6 +254,29 @@ def new_device():
 	return json.dumps(data)
 
 
+@app_views.route('/lock_device')
+def lock_device():
+	"""
+	Locks or unlocks a device to prevent or allow editing it's fields.
+	"""
+	device_id = request.args.get('device_id')
+	locked = request.args.get('locked') == 'true'
+
+	for device in network:
+		if device.id == device_id:
+			break
+	else:
+		return make_error(404, "device_id not found")
+
+	if locked:
+		device.locked = True
+	else:
+		device.locked = False
+	save_network()
+
+	return jsonify(device_id=device.id, locked=device.locked)
+
+
 def make_error(code, message):
 	"""
 	Returns a JSON error.

static/juice.js

@@ -123,31 +123,63 @@ function new_device() {
 
 function lock_device(device) {
 	if (device.querySelector('.save')) { return; }
-	let fields = device.querySelectorAll('.editable');
+	let params = {
-	fields.forEach(function(field) {
+		device_id: device.id,
-		field.querySelector('.edit').remove();
+		locked: true,
+	};
+	let query = Object.keys(params)
+		.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+		.join('&');
+
+	fetch(window.location.href + 'lock_device?' + query)
+	.then(function(response) {
+		return response.json();
+	})
+	.then(function(json) {
+		if (!json.locked) { return; }
+
+		let fields = device.querySelectorAll('.editable');
+		fields.forEach(function(field) {
+			field.querySelector('.edit').remove();
+		});
+		device.querySelector('.id').querySelector('.lock').remove();
+		let unlock = document.createElement('span');
+		unlock.innerHTML = '';
+		unlock.className = 'unlock font-awesome';
+		unlock.setAttribute('onclick', 'unlock_device(this.parentElement.parentElement)');
+		device.querySelector('.id').appendChild(unlock);
 	});
-	device.querySelector('.id').querySelector('.lock').remove();
-	let unlock = document.createElement('span');
-	unlock.innerHTML = '';
-	unlock.className = 'unlock font-awesome';
-	unlock.setAttribute('onclick', 'unlock_device(this.parentElement.parentElement)');
-	device.querySelector('.id').appendChild(unlock);
 }
 
 function unlock_device(device) {
-	let fields = device.querySelectorAll('.editable');
+	let params = {
-	fields.forEach(function(field) {
+		device_id: device.id,
-		let edit = document.createElement('span');
+		locked: false,
-		edit.innerHTML = '';
+	};
-		edit.className = 'edit font-awesome';
+	let query = Object.keys(params)
-		edit.setAttribute('onclick', 'edit_field(this.parentElement)');
+		.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
-		field.appendChild(edit);
+		.join('&');
+
+	fetch(window.location.href + 'lock_device?' + query)
+	.then(function(response) {
+		return response.json();
+	})
+	.then(function(json) {
+		if (json.locked) { return; }
+
+		let fields = device.querySelectorAll('.editable');
+		fields.forEach(function(field) {
+			let edit = document.createElement('span');
+			edit.innerHTML = '';
+			edit.className = 'edit font-awesome';
+			edit.setAttribute('onclick', 'edit_field(this.parentElement)');
+			field.appendChild(edit);
+		});
+		device.querySelector('.id').querySelector('.unlock').remove();
+		let lock = document.createElement('span');
+		lock.innerHTML = '';
+		lock.className = 'lock font-awesome';
+		lock.setAttribute('onclick', 'lock_device(this.parentElement.parentElement)');
+		device.querySelector('.id').appendChild(lock);
 	});
-	device.querySelector('.id').querySelector('.unlock').remove();
-	let lock = document.createElement('span');
-	lock.innerHTML = '';
-	lock.className = 'lock font-awesome';
-	lock.setAttribute('onclick', 'lock_device(this.parentElement.parentElement)');
-	device.querySelector('.id').appendChild(lock);
 }

templates/index.html

@@ -18,16 +18,16 @@
 			<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><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></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="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><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></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><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></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><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></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">
 						{% for sub_dev in device.sub_devices %}
 						<div class="sub_device {{ sub_dev.type }}" id="{{ sub_dev.id }}">
 							<div class="id">{{ sub_dev.id }}</div>
 							<object class="outlet_image" data="/static/outlet.svg"></object>
-							<div class="description editable"><span class="field_value">{{ sub_dev.description }}</span><span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
+							<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 %}
 					</div>