function load() { Object.entries(init_state).forEach(([device_id, sub_devs]) => { let device = document.querySelector('#' + device_id); Object.entries(sub_devs).forEach(([sub_dev_id, state]) => { let sub_dev = device.querySelector('#' + sub_dev_id); let svg = sub_dev.querySelector('object').getSVGDocument().firstElementChild; if (state) { svg.classList.remove('off'); svg.classList.add('on'); } }); }); } function get_object_from_svg(svg) { var all_objects = document.getElementsByTagName("object"); for (var i=0; i < all_objects.length; i++) { if (svg === all_objects[i].getSVGDocument().firstElementChild) { return all_objects[i]; } } return null; } function toggle_outlet(svg) { let sub_dev = get_object_from_svg(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 font-awesome'; 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.classList[0], 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 font-awesome'; edit.setAttribute('onclick', 'edit_field(this.parentElement)'); field.children[1].replaceWith(edit); }); } function new_device() { let params = { device_type: 'RelayDevice', }; let query = Object.keys(params) .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])) .join('&'); fetch(window.location.href + 'new_device?' + query) .then(function(response) { return response.json(); }) .then(function(json) { let template = document.querySelector('#RelayDevice_template'); let node = document.importNode(template.content, true); 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; }); } function lock_device(device) { if (device.querySelector('.save')) { return; } let params = { device_id: device.id, 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(); 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); }); } function unlock_device(device) { let params = { device_id: device.id, locked: false, }; 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) { 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(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() }); }