Refactorized the action listener of the tc buttons in the webinterface
This commit is contained in:
Kai Lauterbach
parent
ec30fa512b
commit
83c2d74a79
|
|
@ -1,21 +1,18 @@
|
|||
var links = document.querySelectorAll('[id^="tc_on"]');
|
||||
links.forEach(function(link) {
|
||||
link.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
function handleRequest(id, url) {
|
||||
var button = document.getElementById(id);
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true);
|
||||
xhr.open('GET', url, true);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
var button = document.getElementById("tc_on");
|
||||
if (xhr.status === 200) {
|
||||
button.classList.remove("pure-button-primary");
|
||||
button.classList.add("success");
|
||||
button.innerHTML = "Enabled!";
|
||||
button.innerHTML = (id === 'tc_on') ? "Enabled!" : "Disabled!";
|
||||
button.style.backgroundColor = "green";
|
||||
setTimeout(function () {
|
||||
button.classList.remove("success");
|
||||
button.classList.add("pure-button-primary");
|
||||
button.innerHTML = "ON";
|
||||
button.innerHTML = (id === 'tc_on') ? "ON" : "OFF";
|
||||
button.style.backgroundColor = "";
|
||||
}, 2000);
|
||||
console.log('Data successfully sent to server!');
|
||||
|
|
@ -27,7 +24,7 @@ button.style.backgroundColor = "";
|
|||
setTimeout(function () {
|
||||
button.classList.remove("error");
|
||||
button.classList.add("pure-button-primary");
|
||||
button.innerHTML = "ON";
|
||||
button.innerHTML = (id === 'tc_on') ? "ON" : "OFF";
|
||||
button.style.backgroundColor = "";
|
||||
}, 2000);
|
||||
showToast('Error while sending data to server.', 'error');
|
||||
|
|
@ -36,52 +33,18 @@ console.log('Error while sending data to server.');
|
|||
}
|
||||
};
|
||||
xhr.send();
|
||||
document.getElementById('tc_on').classList.add('pure-button-primary');
|
||||
document.getElementById('tc_off').classList.remove('pure-button-primary');
|
||||
});
|
||||
});
|
||||
var links = document.querySelectorAll('[id^="tc_off"]');
|
||||
links.forEach(function(link) {
|
||||
link.addEventListener('click', function(event) {
|
||||
}
|
||||
function addButtonClickListener(id, url) {
|
||||
var link = document.getElementById(id);
|
||||
link.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
var button = document.getElementById("tc_off");
|
||||
if (xhr.status === 200) {
|
||||
button.classList.remove("pure-button-primary");
|
||||
button.classList.add("success");
|
||||
button.innerHTML = "Disabled!";
|
||||
button.style.backgroundColor = "green";
|
||||
setTimeout(function () {
|
||||
button.classList.remove("success");
|
||||
button.classList.add("pure-button-primary");
|
||||
button.innerHTML = "OFF";
|
||||
button.style.backgroundColor = "";
|
||||
}, 2000);
|
||||
console.log('Data successfully sent to server!');
|
||||
} else {
|
||||
button.classList.remove("pure-button-primary");
|
||||
button.classList.add("error");
|
||||
button.innerHTML = "Error!";
|
||||
button.style.backgroundColor = "red";
|
||||
setTimeout(function () {
|
||||
button.classList.remove("error");
|
||||
button.classList.add("pure-button-primary");
|
||||
button.innerHTML = "OFF";
|
||||
button.style.backgroundColor = "";
|
||||
}, 2000);
|
||||
showToast('Error while sending data to server.', 'error');
|
||||
console.log('Error while sending data to server.');
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
document.getElementById('tc_off').classList.add('pure-button-primary');
|
||||
document.getElementById('tc_on').classList.remove('pure-button-primary');
|
||||
});
|
||||
handleRequest(id, url);
|
||||
document.getElementById(id).classList.add('pure-button-primary');
|
||||
document.getElementById(id === 'tc_on' ? 'tc_off' : 'tc_on').classList.remove('pure-button-primary');
|
||||
});
|
||||
}
|
||||
addButtonClickListener('tc_on', 'http://{{IP_ADDRESS}}/?tc=true');
|
||||
addButtonClickListener('tc_off', 'http://{{IP_ADDRESS}}/?tc=false');
|
||||
let timeoutId;
|
||||
function sendSliderValue(x) {
|
||||
x = x - 1;
|
||||
|
|
|
|||
|
|
@ -1,93 +1,55 @@
|
|||
var links = document.querySelectorAll('[id^="tc_on"]');
|
||||
links.forEach(function(link) {
|
||||
link.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true);
|
||||
function handleRequest(id, url) {
|
||||
var button = document.getElementById(id);
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
var button = document.getElementById("tc_on");
|
||||
if (xhr.status === 200) {
|
||||
button.classList.remove("pure-button-primary");
|
||||
button.classList.add("success");
|
||||
button.innerHTML = "Enabled!";
|
||||
button.style.backgroundColor = "green";
|
||||
setTimeout(function () {
|
||||
button.classList.remove("success");
|
||||
button.classList.add("pure-button-primary");
|
||||
button.innerHTML = "ON";
|
||||
button.style.backgroundColor = "";
|
||||
}, 2000);
|
||||
console.log('Data successfully sent to server!');
|
||||
} else {
|
||||
button.classList.remove("pure-button-primary");
|
||||
button.classList.add("error");
|
||||
button.innerHTML = "Error!";
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url, true);
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
button.classList.remove("pure-button-primary");
|
||||
button.classList.add("success");
|
||||
button.innerHTML = (id === 'tc_on') ? "Enabled!" : "Disabled!";
|
||||
button.style.backgroundColor = "green";
|
||||
setTimeout(function () {
|
||||
button.classList.remove("success");
|
||||
button.classList.add("pure-button-primary");
|
||||
button.innerHTML = (id === 'tc_on') ? "ON" : "OFF";
|
||||
button.style.backgroundColor = "";
|
||||
setTimeout(function () {
|
||||
button.classList.remove("error");
|
||||
button.classList.add("pure-button-primary");
|
||||
button.innerHTML = "ON";
|
||||
button.style.backgroundColor = "";
|
||||
}, 2000);
|
||||
showToast('Error while sending data to server.', 'error');
|
||||
console.log('Error while sending data to server.');
|
||||
}
|
||||
}, 2000);
|
||||
console.log('Data successfully sent to server!');
|
||||
} else {
|
||||
button.classList.remove("pure-button-primary");
|
||||
button.classList.add("error");
|
||||
button.innerHTML = "Error!";
|
||||
button.style.backgroundColor = "";
|
||||
setTimeout(function () {
|
||||
button.classList.remove("error");
|
||||
button.classList.add("pure-button-primary");
|
||||
button.innerHTML = (id === 'tc_on') ? "ON" : "OFF";
|
||||
button.style.backgroundColor = "";
|
||||
}, 2000);
|
||||
showToast('Error while sending data to server.', 'error');
|
||||
console.log('Error while sending data to server.');
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
xhr.send();
|
||||
//console.log('tc=true call');
|
||||
document.getElementById('tc_on').classList.add('pure-button-primary');
|
||||
document.getElementById('tc_off').classList.remove('pure-button-primary');
|
||||
});
|
||||
});
|
||||
var links = document.querySelectorAll('[id^="tc_off"]');
|
||||
links.forEach(function(link) {
|
||||
link.addEventListener('click', function(event) {
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
function addButtonClickListener(id, url) {
|
||||
var link = document.getElementById(id);
|
||||
link.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true);
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
var button = document.getElementById("tc_off");
|
||||
if (xhr.status === 200) {
|
||||
button.classList.remove("pure-button-primary");
|
||||
button.classList.add("success");
|
||||
button.innerHTML = "Disabled!";
|
||||
button.style.backgroundColor = "green";
|
||||
setTimeout(function () {
|
||||
button.classList.remove("success");
|
||||
button.classList.add("pure-button-primary");
|
||||
button.innerHTML = "OFF";
|
||||
button.style.backgroundColor = "";
|
||||
}, 2000);
|
||||
console.log('Data successfully sent to server!');
|
||||
} else {
|
||||
button.classList.remove("pure-button-primary");
|
||||
button.classList.add("error");
|
||||
button.innerHTML = "Error!";
|
||||
button.style.backgroundColor = "red";
|
||||
setTimeout(function () {
|
||||
button.classList.remove("error");
|
||||
button.classList.add("pure-button-primary");
|
||||
button.innerHTML = "OFF";
|
||||
button.style.backgroundColor = "";
|
||||
}, 2000);
|
||||
showToast('Error while sending data to server.', 'error');
|
||||
console.log('Error while sending data to server.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
xhr.send();
|
||||
//console.log('tc=false call');
|
||||
document.getElementById('tc_off').classList.add('pure-button-primary');
|
||||
document.getElementById('tc_on').classList.remove('pure-button-primary');
|
||||
handleRequest(id, url);
|
||||
document.getElementById(id).classList.add('pure-button-primary');
|
||||
document.getElementById(id === 'tc_on' ? 'tc_off' : 'tc_on').classList.remove('pure-button-primary');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
addButtonClickListener('tc_on', 'http://{{IP_ADDRESS}}/?tc=true');
|
||||
addButtonClickListener('tc_off', 'http://{{IP_ADDRESS}}/?tc=false');
|
||||
|
||||
let timeoutId;
|
||||
function sendSliderValue(x) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue