Juice/static/juice.js

function toggle_outlet(svg) {
	let sub_dev = svg.parentElement;
	let params = {
		device_id: sub_dev.parentElement.parentElement.id,
		sub_dev_id: sub_dev.id
	};
	let query = Object.keys(params)
		.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
		.join('&');
	fetch(window.location.href + 'toggle?' + query)
	.then(function(response) {
		return response.json();
	})
	.then(function(json) {
		if (!json.ok) { throw new Error('HTTP error, status = ' + json.status + ', message = ' + json.message); }
		if (json[sub_dev.id]) {
			svg.classList.remove('off');
			svg.classList.add('on');
		} else {
			svg.classList.remove('on');
			svg.classList.add('off');
		}
	});
}

function edit_field(field) {
	let value = field.firstElementChild.innerText;
	let input = document.createElement('input');
	input.value = value;
	field.firstElementChild.replaceWith(input);

	let save = document.createElement('span');
	save.innerHTML = '';
	save.className = 'save';
	save.setAttribute('onclick', 'save_field(this.parentElement)');
	field.children[1].replaceWith(save);
}

function save_field(field) {
	let value = field.firstElementChild.value;
	let device_id = field.parentElement.id;
	let sub_dev_id;
	if (field.parentElement.className.includes('sub_device')) {
		sub_dev_id = device_id;
		device_id = field.parentElement.parentElement.parentElement.id;
	} else {
		sub_dev_id = '';
	}
	let params = {
		device_id: device_id,
		sub_dev_id: sub_dev_id,
		field: field.className,
		value: value
	};
	let query = Object.keys(params)
		.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
		.join('&');

	fetch(window.location.href + 'edit?' + query)
	.then(function(response) {
		return response.json();
	})
	.then(function(json) {
		if (!json.ok) { throw new Error('HTTP error, status = ' + json.status + ', message = ' + json.message); }
		let span = document.createElement('span');
		span.innerText = json['value'];
		span.className = 'field_value';
		field.firstElementChild.replaceWith(span);

		let edit = document.createElement('span');
		edit.innerHTML = '';
		edit.className = 'edit';
		edit.setAttribute('onclick', 'edit_field(this.parentElement)');
		field.children[1].replaceWith(edit);
	});
}