Juice/static/juice.js
2020-03-18 13:07:07 -04:00

505 lines
17 KiB
JavaScript

var socket;
function load() {
socket = init_websocket();
// initialize RelayOutlet SVG color
Object.entries(init_state).forEach(([device_id, sub_devices]) => {
let device = document.querySelector('#' + device_id);
Object.entries(sub_devices).forEach(([sub_device_id, state]) => {
let sub_device = device.querySelector('.' + sub_device_id);
let svg = sub_device.querySelector('object').getSVGDocument().firstElementChild;
if (state) {
svg.classList.remove('off');
svg.classList.add('on');
}
});
});
/*document.querySelectorAll('input[type=color]').forEach((led_input) => {
led_input.onchange = function(event) {
}
});*/
}
/* Websocket setup */
function init_websocket() {
let socket = new WebSocket('wss://' + window.location.hostname + ws_uri);
socket._send = socket.send;
socket.send = function(event_title, data) {
data = JSON.stringify({event: event_title, data: data});
if (socket.readyState == 0) {
console.log("Socket is still opening!");
return;
}
socket._send(data);
}
socket.onmessage = onmessage;
socket.onclose = onclose;
socket.onerror = onerror;
socket.events = {};
socket.events['toggle_outlet'] = toggle_outlet_recv;
socket.events['edit_field'] = edit_field_recv;
socket.events['new_device'] = new_device_recv;
socket.events['lock_device'] = lock_device_recv;
socket.events['delete_device'] = delete_device_recv;
socket.events['neopixel'] = neopixel_recv;
socket.events['lixie_clock'] = lixie_clock_recv;
return socket;
}
function onmessage (e) {
let data = JSON.parse(e.data);
let event = data.event;
data = data.data;
if (!data.ok) {
throw new Error("Socket error: event = " + event + ", error = " + data.error);
}
if (socket.events[event] === undefined) {
console.log("Unknown socket event: " + event);
return;
}
socket.events[event](data);
}
async function onclose(e) {
if (e.wasClean) { return; } // no need to reconnect
console.log(e);
console.log('Websocket lost connection to server. Re-trying...');
socket = init_websocket();
await sleep(5000);
}
function onerror(e) {
console.log("Websocket error!")
console.log(e);
}
/* Websocket receive */
function toggle_outlet_recv(data) {
let device = document.querySelector('#' + data.device_id);
let sub_device = device.querySelector('.' + data.sub_device_id);
let svg = sub_device.querySelector('.outlet_image').getSVGDocument().firstChild;
if (data.state === true) {
svg.classList.remove('off');
svg.classList.add('on');
} else {
svg.classList.remove('on');
svg.classList.add('off');
}
}
function edit_field_recv(data) {
let device = document.querySelector('#' + data.device_id);
if (data.sub_device_id) {
device = device.querySelector('.' + data.sub_device_id);
}
let field = device.querySelector('.' + data.field);
let span = document.createElement('span');
span.innerText = data['value'];
span.className = 'field_value';
field.firstElementChild.replaceWith(span);
let edit = document.createElement('span');
edit.innerHTML = '';
edit.className = 'edit font-awesome';
edit.setAttribute('onclick', 'edit_field(this.parentElement)');
field.children[1].replaceWith(edit);
}
function new_device_recv(data) {
if (data.device_type == 'RelayDevice') {
var template = document.querySelector('#RelayDevice_template');
} else {
return;
}
let node = document.importNode(template.content, true);
node.querySelector('.id').querySelector('.field_value').textContent = data.device_id;
document.querySelector('#devices').appendChild(node);
let children = document.querySelector('#devices').children;
children[children.length - 1].id = data.device_id;
}
function lock_device_recv(data) {
let device = document.querySelector('#' + data.device_id);
let fields = device.querySelectorAll('.editable');
if (data.locked) {
fields.forEach(function(field) {
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';
unlock.setAttribute('onclick', 'unlock_device(this.parentElement.parentElement)');
device.querySelector('.id').appendChild(unlock);
} else {
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 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';
lock.setAttribute('onclick', 'lock_device(this.parentElement.parentElement)');
device.querySelector('.id').appendChild(lock);
}
}
function delete_device_recv(data) {
let device = document.querySelector('#' + data.device_id);
device.remove()
}
function neopixel_recv(data) {
let device = document.querySelector('#' + data.device_id);
if (data.change_mode === 'state') {
select = device.querySelector('.state_select');
if (data.type === 'solid') {
select.value = data.type;
state_select(select, false);
if (data.amount === 'all') {
let sub_devices = device.querySelector('.sub_devices');
for (let sub_device of sub_devices.children) {
sub_device.firstElementChild.style.backgroundColor = data.color;
sub_device.firstElementChild.firstElementChild.value = data.color;
}
device.querySelector('#state_solid_all_color_' + device.id).value = data.color;
} else if (data.amount === 'single') {
let sub_device = device.querySelector('.' + data.sub_device_id);
sub_device.firstElementChild.style.backgroundColor = data.color;
sub_device.firstElementChild.firstElementChild.value = data.color;
}
} else if (data.type === 'rainbow') {
select.value = data.type;
state_select(select, false);
device.querySelector('#state_rainbow_red_freq_' + device.id).value = data.rainbow_params[0];
device.querySelector('#state_rainbow_green_freq_' + device.id).value = data.rainbow_params[1];
device.querySelector('#state_rainbow_blue_freq_' + device.id).value = data.rainbow_params[2];
device.querySelector('#state_rainbow_red_phase_' + device.id).value = data.rainbow_params[3];
device.querySelector('#state_rainbow_green_phase_' + device.id).value = data.rainbow_params[4];
device.querySelector('#state_rainbow_blue_phase_' + device.id).value = data.rainbow_params[5];
device.querySelector('#state_rainbow_center_' + device.id).value = data.rainbow_params[6];
device.querySelector('#state_rainbow_width_' + device.id).value = data.rainbow_params[7];
} else if (data.type === 'america') {
select.value = data.type;
state_select(select, false);
device.querySelector('#state_america_stripe_' + device.id).value = data.america_params[0];
device.querySelector('#state_america_magnitude_' + device.id).value = data.america_params[1];
}
} else if (data.change_mode === 'animation') {
if (data.property_type === 'mode') {
select = device.querySelector('.animation_select');
if (data.type === 'static') {
select.value = data.type;
animation_select(select, false);
} else if (data.type === 'rotate_left') {
select.value = data.type;
animation_select(select, false);
device.querySelector('#animation_rotate_count_' + device.id).value = data.rotate_count;
} else if (data.type === 'rotate_right') {
select.value = data.type;
animation_select(select, false);
device.querySelector('#animation_rotate_count_' + device.id).value = data.rotate_count;
}
} else if (data.property_type === 'delay') {
device.querySelector('#animation_delay_' + device.id).value = data.delay;
}
} else if (data.change_mode === 'strip') {
if (data.amount === 'full') {
let sub_devices = device.querySelector('.sub_devices');
for (let i = 0; i < sub_devices.children.length; i++) {
sub_devices.children[i].firstElementChild.style.backgroundColor = data.colors[i];
sub_devices.children[i].firstElementChild.firstElementChild.value = data.colors[i];
}
}
}
}
function lixie_clock_recv(data) {
let device = document.querySelector('#' + data.device_id);
if (data.change_mode === 'time') {
let radio = device.querySelector('#display_mode_time_' + device.id);
radio.checked = true;
lixie_display_mode(radio, false);
} else if (data.change_mode === 'number') {
let radio = device.querySelector('#display_mode_number_' + device.id);
radio.checked = true;
lixie_display_mode(radio, false);
device.querySelector('#lixie_number_' + device.id).value = data.display_number;
} else if (data.change_mode === 'color') {
device.querySelector('#display_color_' + device.id).value = data.color;
} else if (data.change_mode === 'time_offset') {
device.querySelector('#lixie_time_offset_' + device.id).value = data.time_offset;
}
}
/* Websocket send */
function toggle_outlet(svg) {
let sub_dev = get_object_from_svg(svg).parentElement;
let data = {
device_id: sub_dev.parentElement.parentElement.id,
sub_device_id: sub_dev.querySelector('.id').innerText,
};
socket.send('toggle_outlet', data);
}
function save_field(field) {
let value = field.firstElementChild.value;
let device_id = field.parentElement.id;
let sub_device_id;
if (field.parentElement.className.includes('sub_device')) {
sub_device_id = field.parentElement.children[0].textContent;
device_id = field.parentElement.parentElement.parentElement.id;
} else {
sub_device_id = '';
}
let data = {
device_id: device_id,
sub_device_id: sub_device_id,
field: field.classList[0],
value: value
};
socket.send('edit_field', data);
}
function new_device() {
let data = {
device_type: 'RelayDevice',
};
socket.send('new_device', data);
}
function lock_device(device) {
if (device.querySelector('.save')) { return; }
let data = {
device_id: device.id,
locked: true,
};
socket.send('lock_device', data);
}
function unlock_device(device) {
let data = {
device_id: device.id,
locked: false,
};
socket.send('lock_device', data);
}
function delete_device(device) {
if (!window.confirm("Are you sure you want to delete this device?")) { return; }
let data = {
device_id: device.id,
};
socket.send('delete_device', data);
}
function neopixel_state(device) {
let sub_device;
if (device.classList.contains('sub_device')) {
sub_device = device;
device = sub_device.closest('.device');
}
let state_mode = device.querySelector('.state_select').value;
let data = {
device_id: device.id,
change_mode: 'state',
type: state_mode,
}
if (state_mode === 'solid') {
let amount;
let radios = device.querySelector('.state_solid').querySelectorAll('input[type=radio]');
for (let radio of radios) {
if (radio.checked) {
amount = radio.value;
break;
}
}
data['amount'] = amount;
if (amount === 'all') {
data['color'] = device.querySelector('#state_solid_all_color_' + device.id).value;
} else if (amount === 'single') {
data['color'] = sub_device.firstElementChild.firstElementChild.value;
data['sub_device_id'] = sub_device.classList[2];
}
} else if (state_mode === 'rainbow') {
data['rainbow_params'] = [
device.querySelector('#state_rainbow_red_freq_' + device.id).value,
device.querySelector('#state_rainbow_green_freq_' + device.id).value,
device.querySelector('#state_rainbow_blue_freq_' + device.id).value,
device.querySelector('#state_rainbow_red_phase_' + device.id).value,
device.querySelector('#state_rainbow_green_phase_' + device.id).value,
device.querySelector('#state_rainbow_blue_phase_' + device.id).value,
device.querySelector('#state_rainbow_center_' + device.id).value,
device.querySelector('#state_rainbow_width_' + device.id).value
]
} else if (state_mode === 'america') {
data['america_params'] = [
device.querySelector('#state_america_stripe_' + device.id).value,
device.querySelector('#state_america_magnitude_' + device.id).value
]
}
socket.send('neopixel', data);
}
function neopixel_animation(device) {
let property_type;
if (device.nodeName === 'INPUT') {
property_type = 'delay';
device = device.closest('.device');
} else {
property_type = 'mode';
}
let data = {
device_id: device.id,
change_mode: 'animation',
property_type: property_type
}
if (property_type === 'mode') {
let animation_mode = device.querySelector('.animation_select').value;
data['type'] = animation_mode;
if (animation_mode === 'static') {
} else if (animation_mode === 'rotate_left' || animation_mode === 'rotate_right') {
data['rotate_count'] = device.querySelector('#animation_rotate_count_' + device.id).value;
}
} else if (property_type === 'delay') {
data['delay'] = device.querySelector('#animation_delay_' + device.id).value;
}
socket.send('neopixel', data);
}
function lixie_clock(input) {
let device = input.closest('.device');
data = {
device_id: device.id
}
if (input.className === 'time') {
data['change_mode'] = 'time';
} else if (input.className === 'number') {
data['change_mode'] = 'number';
data['display_number'] = device.querySelector('#lixie_number_' + device.id).value;
} else if (input.className === 'color') {
data['change_mode'] = 'color';
data['color'] = input.value
} else if (input.className === 'time_offset') {
data['change_mode'] = 'time_offset';
data['time_offset'] = device.querySelector('#lixie_time_offset_' + device.id).value;
}
socket.send('lixie_clock', data);
}
/* DOM */
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 = '&#xe801;';
save.className = 'save font-awesome';
save.setAttribute('onclick', 'save_field(this.parentElement)');
field.children[1].replaceWith(save);
}
function state_solid_amount(radio) {
let device = radio.closest('.device');
let sub_devices = device.querySelector('.sub_devices');
for (let sub_device of sub_devices.children) {
let input = sub_device.firstElementChild.firstElementChild;
if (radio.value === 'all') {
input.disabled = true;
} else if (radio.value === 'single') {
input.disabled = false;
}
}
if (radio.value === 'all') {
device.querySelector('#state_solid_all_color_' + device.id).disabled = false;
} else if (radio.value === 'single') {
device.querySelector('#state_solid_all_color_' + device.id).disabled = true;
}
}
function state_select(select, send_socket_event = true) {
let device = select.closest('.device');
if (select.value === 'solid') {
select.parentElement.querySelector('.state_solid').style.display = 'block';
select.parentElement.querySelector('.state_rainbow').style.display = 'none';
select.parentElement.querySelector('.state_america').style.display = 'none';
} else if (select.value === 'rainbow') {
select.parentElement.querySelector('.state_solid').style.display = 'none';
select.parentElement.querySelector('.state_rainbow').style.display = 'block';
select.parentElement.querySelector('.state_america').style.display = 'none';
} else if (select.value === 'america') {
select.parentElement.querySelector('.state_solid').style.display = 'none';
select.parentElement.querySelector('.state_rainbow').style.display = 'none';
select.parentElement.querySelector('.state_america').style.display = 'block';
}
let sub_devices = device.querySelector('.sub_devices');
for (let sub_device of sub_devices.children) {
let input = sub_device.firstElementChild.firstElementChild;
input.disabled = true;
}
if (send_socket_event) {
neopixel_state(device);
}
}
function animation_select(select, send_socket_event = true) {
let device = select.closest('.device');
if (select.value === 'static') {
select.parentElement.querySelector('.animation_static').style.display = 'block';
select.parentElement.querySelector('.animation_rotate').style.display = 'none';
} else if (select.value === 'rotate_left' || select.value === 'rotate_right') {
select.parentElement.querySelector('.animation_static').style.display = 'none';
select.parentElement.querySelector('.animation_rotate').style.display = 'block';
}
if (send_socket_event) {
neopixel_animation(device);
}
}
function lixie_display_mode(radio, send_socket_event = true) {
let device = radio.closest('.device');
if (radio.value === 'time') {
device.querySelector('.lixie_number').style.display = 'none';
device.querySelector('.lixie_time_offset').style.display = 'block';
} else if (radio.value === 'number') {
device.querySelector('.lixie_number').style.display = 'block';
device.querySelector('.lixie_time_offset').style.display = 'none';
}
if (send_socket_event) {
lixie_clock(radio);
}
}
/* Misc */
function get_object_from_svg(svg) {
let all_objects = document.getElementsByTagName("object");
for (let i=0; i < all_objects.length; i++) {
if (svg === all_objects[i].getSVGDocument().firstElementChild) {
return all_objects[i];
}
}
return null;
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}