123 lines
3.6 KiB
JavaScript
123 lines
3.6 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 = '';
|
|
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.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 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').textContent = json.device_id;
|
|
document.querySelector('#devices').appendChild(node);
|
|
let children = document.querySelector('#devices').children;
|
|
children[children.length - 1].id = json.device_id;
|
|
});
|
|
}
|