Juice/static/juice.js
2019-06-20 14:51:00 -04:00

213 lines
6.3 KiB
JavaScript

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 = '&#xe801;';
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 = '&#xe800;';
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 = '&#xf13e;';
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 = '&#xe800;';
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 = '&#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';
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()
});
}