65 lines
2.2 KiB
JavaScript
65 lines
2.2 KiB
JavaScript
(function() {
|
|
let state = {
|
|
'animation': 'off',
|
|
'color': "#000000"
|
|
}
|
|
|
|
let setState = function() {
|
|
let request = new XMLHttpRequest();
|
|
request.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
// process state here
|
|
console.log("state changed to " + JSON.stringify(state));
|
|
}
|
|
};
|
|
request.open("POST", "/api/state", true);
|
|
request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
|
|
request.send(JSON.stringify(state));
|
|
}
|
|
|
|
let animation_radios = document.getElementsByClassName("js_animation")
|
|
for (let el of animation_radios) {
|
|
el.addEventListener("click", function(ev) {
|
|
state.animation = el.value;
|
|
setState();
|
|
})
|
|
console.log("attached to " + el.value)
|
|
}
|
|
|
|
let color = document.getElementById("color")
|
|
color.addEventListener("change", function(ev) {
|
|
state.color = color.value;
|
|
setState();
|
|
})
|
|
for (let el of document.getElementsByClassName("js_color")) {
|
|
el.addEventListener("click", function(ev) {
|
|
color.value = el.dataset.color;
|
|
state.color = color.value;
|
|
setState();
|
|
})
|
|
console.log("attached to " + el.value)
|
|
}
|
|
|
|
window.setInterval(function() {
|
|
// console.log("Updating state")
|
|
let request = new XMLHttpRequest();
|
|
request.onreadystatechange = function(response) {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
var json = JSON.parse(this.responseText)
|
|
// console.log("state is " + JSON.stringify(json));
|
|
color.value = json.color;
|
|
state.color = json.color;
|
|
if (state.animation != json.animation) {
|
|
console.log("Animation has been updated to " + json.animation)
|
|
state.animation = json.animation;
|
|
for (let el of animation_radios) {
|
|
el.checked = el.value == state.animation;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
request.open("GET", "/api/state", true);
|
|
request.send();
|
|
}, 500);
|
|
})();
|