Revert "Button initialization refactorized."
This reverts commit dbaa21bd30.
This commit is contained in:
Kai Lauterbach
parent
88b738ac75
commit
91d2d867b0
|
|
@ -310,21 +310,26 @@ pwmElementTxt.innerText = pwmValue.toString();
|
|||
}
|
||||
updateLightStateAndPWMValues();
|
||||
setInterval(updateLightStateAndPWMValues, 5000);
|
||||
function sendRequest(id, value) {
|
||||
var links = document.querySelectorAll('[id^="on"][id$="_off"]');
|
||||
links.forEach(function(link) {
|
||||
link.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
var id_full = this.id;
|
||||
var id = this.id.replace('on', '').replace('_off', '');
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=' + value + '&transition=' + document.getElementById('transition').value, true);
|
||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
var button = document.getElementById(id + '_button');
|
||||
var button = document.getElementById(id_full);
|
||||
if (xhr.status === 200) {
|
||||
button.classList.remove("pure-button-primary");
|
||||
button.classList.add("success");
|
||||
button.innerHTML = (value ? "Enabled!" : "Disabled!");
|
||||
button.innerHTML = "Disabled!";
|
||||
button.style.backgroundColor = "green";
|
||||
setTimeout(function () {
|
||||
button.classList.remove("success");
|
||||
button.classList.add("pure-button-primary");
|
||||
button.innerHTML = (value ? "ON" : "OFF");
|
||||
button.innerHTML = "OFF";
|
||||
button.style.backgroundColor = "";
|
||||
}, 2000);
|
||||
console.log('Data successfully sent to server!');
|
||||
|
|
@ -336,7 +341,7 @@ button.style.backgroundColor = "red";
|
|||
setTimeout(function () {
|
||||
button.classList.remove("error");
|
||||
button.classList.add("pure-button-primary");
|
||||
button.innerHTML = (value ? "ON" : "OFF");
|
||||
button.innerHTML = "OFF";
|
||||
button.style.backgroundColor = "";
|
||||
}, 2000);
|
||||
showToast('Error while sending data to server.', 'error');
|
||||
|
|
@ -346,24 +351,55 @@ console.log('Error while sending data to server.');
|
|||
};
|
||||
xhr.send();
|
||||
updateLightState();
|
||||
}
|
||||
function addButtonClickListener(id, value) {
|
||||
var link = document.getElementById(id);
|
||||
link.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
var id = this.id.replace('_button', '');
|
||||
sendRequest(id, value);
|
||||
this.classList.add('pure-button-primary');
|
||||
document.getElementById(id + (value ? '_off' : '_on') + '_button').classList.remove('pure-button-primary');
|
||||
document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
|
||||
});
|
||||
}
|
||||
function initializeButtons() {
|
||||
for (let i = 0; i <= {{LIGHT_COUNT}}; i++) {
|
||||
addButtonClickListener('on' + i + '_off_button', false);
|
||||
addButtonClickListener('on' + i + '_on_button', true);
|
||||
});
|
||||
var links = document.querySelectorAll('[id^="on"][id$="_on"]');
|
||||
links.forEach(function(link) {
|
||||
link.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
var id_full = this.id;
|
||||
var id = this.id.replace('on', '').replace('_on', '');
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
var button = document.getElementById(id_full);
|
||||
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!";
|
||||
button.style.backgroundColor = "red";
|
||||
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.');
|
||||
}
|
||||
}
|
||||
initializeButtons();
|
||||
};
|
||||
xhr.send();
|
||||
updateLightState();
|
||||
this.classList.add('pure-button-primary');
|
||||
document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
|
||||
});
|
||||
});
|
||||
function createTable() {
|
||||
var table = document.createElement("table");
|
||||
table.border = "1";
|
||||
|
|
|
|||
|
|
@ -357,71 +357,116 @@ function updateLightStateAndPWMValues() {
|
|||
})
|
||||
.catch(error => console.error(error));
|
||||
}
|
||||
|
||||
updateLightStateAndPWMValues();
|
||||
setInterval(updateLightStateAndPWMValues, 5000);
|
||||
|
||||
function sendRequest(id, value) {
|
||||
// Erstelle eine neue Anfrage an die entsprechende URL
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=' + value + '&transition=' + document.getElementById('transition').value, true);
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
var button = document.getElementById(id + '_button');
|
||||
if (xhr.status === 200) {
|
||||
button.classList.remove("pure-button-primary");
|
||||
button.classList.add("success");
|
||||
button.innerHTML = (value ? "Enabled!" : "Disabled!");
|
||||
button.style.backgroundColor = "green";
|
||||
setTimeout(function () {
|
||||
button.classList.remove("success");
|
||||
button.classList.add("pure-button-primary");
|
||||
button.innerHTML = (value ? "ON" : "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 = (value ? "ON" : "OFF");
|
||||
button.style.backgroundColor = "";
|
||||
}, 2000);
|
||||
showToast('Error while sending data to server.', 'error');
|
||||
console.log('Error while sending data to server.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Sende die Anfrage im Hintergrund
|
||||
xhr.send();
|
||||
updateLightState();
|
||||
}
|
||||
|
||||
function addButtonClickListener(id, value) {
|
||||
var link = document.getElementById(id);
|
||||
link.addEventListener('click', function (event) {
|
||||
// Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
|
||||
var links = document.querySelectorAll('[id^="on"][id$="_off"]');
|
||||
// Füge einen Klick-Listener zu jedem Link hinzu
|
||||
links.forEach(function(link) {
|
||||
link.addEventListener('click', function(event) {
|
||||
// Verhindere, dass der Link die Seite neu lädt
|
||||
event.preventDefault();
|
||||
var id = this.id.replace('_button', '');
|
||||
sendRequest(id, value);
|
||||
// Extrahiere die Zahl aus der ID des Links
|
||||
var id_full = this.id;
|
||||
var id = this.id.replace('on', '').replace('_off', '');
|
||||
// Erstelle eine neue Anfrage an die entsprechende URL
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true);
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
var button = document.getElementById(id_full);
|
||||
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.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Sende die Anfrage im Hintergrund
|
||||
xhr.send();
|
||||
updateLightState();
|
||||
this.classList.add('pure-button-primary');
|
||||
document.getElementById(id + (value ? '_off' : '_on') + '_button').classList.remove('pure-button-primary');
|
||||
document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
|
||||
});
|
||||
}
|
||||
});
|
||||
// Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
|
||||
var links = document.querySelectorAll('[id^="on"][id$="_on"]');
|
||||
// Füge einen Klick-Listener zu jedem Link hinzu
|
||||
links.forEach(function(link) {
|
||||
link.addEventListener('click', function(event) {
|
||||
// Verhindere, dass der Link die Seite neu lädt
|
||||
event.preventDefault();
|
||||
// Extrahiere die Zahl aus der ID des Links
|
||||
var id_full = this.id;
|
||||
var id = this.id.replace('on', '').replace('_on', '');
|
||||
// Erstelle eine neue Anfrage an die entsprechende URL
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true);
|
||||
|
||||
function initializeButtons() {
|
||||
for (let i = 0; i <= {{LIGHT_COUNT}}; i++) {
|
||||
addButtonClickListener('on' + i + '_off_button', false);
|
||||
addButtonClickListener('on' + i + '_on_button', true);
|
||||
}
|
||||
}
|
||||
|
||||
initializeButtons();
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
var button = document.getElementById(id_full);
|
||||
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!";
|
||||
button.style.backgroundColor = "red";
|
||||
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.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Sende die Anfrage im Hintergrund
|
||||
xhr.send();
|
||||
updateLightState();
|
||||
this.classList.add('pure-button-primary');
|
||||
document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
|
||||
});
|
||||
});
|
||||
|
||||
function createTable() {
|
||||
// Erstelle eine Tabelle
|
||||
|
|
|
|||
Loading…
Reference in a new issue