Status output implemented - after click on a button
This commit is contained in:
parent
1564f9b559
commit
1ca1f3e6e3
6 changed files with 224 additions and 4 deletions
|
@ -310,9 +310,36 @@ var links = document.querySelectorAll('[id^="on"][id$="_off"]');
|
||||||
links.forEach(function(link) {
|
links.forEach(function(link) {
|
||||||
link.addEventListener('click', function(event) {
|
link.addEventListener('click', function(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
var id_full = this.id;
|
||||||
var id = this.id.replace('on', '').replace('_off', '');
|
var id = this.id.replace('on', '').replace('_off', '');
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&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_full);
|
||||||
|
if (xhr.status === 200) {
|
||||||
|
button.classList.remove("pure-button-primary");
|
||||||
|
button.classList.add("success");
|
||||||
|
button.innerHTML = "Disabled!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("success");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "OFF";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Data successfully sent to server!');
|
||||||
|
} else {
|
||||||
|
button.classList.remove("pure-button-primary");
|
||||||
|
button.classList.add("error");
|
||||||
|
button.innerHTML = "Error!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("error");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "OFF";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Error while sending data to server.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
xhr.send();
|
xhr.send();
|
||||||
updateLightState();
|
updateLightState();
|
||||||
this.classList.add('pure-button-primary');
|
this.classList.add('pure-button-primary');
|
||||||
|
@ -323,9 +350,36 @@ var links = document.querySelectorAll('[id^="on"][id$="_on"]');
|
||||||
links.forEach(function(link) {
|
links.forEach(function(link) {
|
||||||
link.addEventListener('click', function(event) {
|
link.addEventListener('click', function(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
var id_full = this.id;
|
||||||
var id = this.id.replace('on', '').replace('_on', '');
|
var id = this.id.replace('on', '').replace('_on', '');
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true);
|
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!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("success");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "ON";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Data successfully sent to server!');
|
||||||
|
} else {
|
||||||
|
button.classList.remove("pure-button-primary");
|
||||||
|
button.classList.add("error");
|
||||||
|
button.innerHTML = "Error!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("error");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "ON";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Error while sending data to server.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
xhr.send();
|
xhr.send();
|
||||||
updateLightState();
|
updateLightState();
|
||||||
this.classList.add('pure-button-primary');
|
this.classList.add('pure-button-primary');
|
||||||
|
|
|
@ -7,13 +7,13 @@
|
||||||
<a id="on{{LIGHT_NUMBER_DEC}}_off" class="pure-button" href="#">OFF</a>
|
<a id="on{{LIGHT_NUMBER_DEC}}_off" class="pure-button" href="#">OFF</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="pure-control-group">
|
<div class="pure-control-group">
|
||||||
<label for="bri{{LIGHT_NUMBER_DEC}}">Bri</label>
|
<label for="bri{{LIGHT_NUMBER_DEC}}">Target brightness</label>
|
||||||
<input id="bri{{LIGHT_NUMBER_DEC}}" onchange="sendSliderValue({{LIGHT_NUMBER}})" name="bri{{LIGHT_NUMBER_DEC}}" type="range" min="0" max="255" value="25">
|
<input id="bri{{LIGHT_NUMBER_DEC}}" onchange="sendSliderValue({{LIGHT_NUMBER}})" name="bri{{LIGHT_NUMBER_DEC}}" type="range" min="0" max="255" value="25">
|
||||||
|
|
||||||
<span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span>
|
<span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span>
|
||||||
%
|
%
|
||||||
<br>
|
<br>
|
||||||
<label for="light{{LIGHT_NUMBER_DEC}}_pwm">PWM-Value</label>
|
<label for="light{{LIGHT_NUMBER_DEC}}_pwm">Actual Bri.</label>
|
||||||
<input type="range" min="0" max="100" value="0" id="light{{LIGHT_NUMBER_DEC}}_pwm" disabled>
|
<input type="range" min="0" max="100" value="0" id="light{{LIGHT_NUMBER_DEC}}_pwm" disabled>
|
||||||
|
|
||||||
<span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span>
|
<span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span>
|
||||||
|
|
|
@ -4,6 +4,32 @@ link.addEventListener('click', function(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true);
|
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', 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!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("success");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "ON";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Data successfully sent to server!');
|
||||||
|
} else {
|
||||||
|
button.classList.remove("pure-button-primary");
|
||||||
|
button.classList.add("error");
|
||||||
|
button.innerHTML = "Error!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("error");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "ON";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Error while sending data to server.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
xhr.send();
|
xhr.send();
|
||||||
document.getElementById('tc_on').classList.add('pure-button-primary');
|
document.getElementById('tc_on').classList.add('pure-button-primary');
|
||||||
document.getElementById('tc_off').classList.remove('pure-button-primary');
|
document.getElementById('tc_off').classList.remove('pure-button-primary');
|
||||||
|
@ -15,6 +41,32 @@ link.addEventListener('click', function(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true);
|
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!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("success");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "OFF";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Data successfully sent to server!');
|
||||||
|
} else {
|
||||||
|
button.classList.remove("pure-button-primary");
|
||||||
|
button.classList.add("error");
|
||||||
|
button.innerHTML = "Error!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("error");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "OFF";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Error while sending data to server.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
xhr.send();
|
xhr.send();
|
||||||
document.getElementById('tc_off').classList.add('pure-button-primary');
|
document.getElementById('tc_off').classList.add('pure-button-primary');
|
||||||
document.getElementById('tc_on').classList.remove('pure-button-primary');
|
document.getElementById('tc_on').classList.remove('pure-button-primary');
|
||||||
|
|
|
@ -361,10 +361,39 @@ links.forEach(function(link) {
|
||||||
// Verhindere, dass der Link die Seite neu lädt
|
// Verhindere, dass der Link die Seite neu lädt
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
// Extrahiere die Zahl aus der ID des Links
|
// Extrahiere die Zahl aus der ID des Links
|
||||||
|
var id_full = this.id;
|
||||||
var id = this.id.replace('on', '').replace('_off', '');
|
var id = this.id.replace('on', '').replace('_off', '');
|
||||||
// Erstelle eine neue Anfrage an die entsprechende URL
|
// Erstelle eine neue Anfrage an die entsprechende URL
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&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_full);
|
||||||
|
if (xhr.status === 200) {
|
||||||
|
button.classList.remove("pure-button-primary");
|
||||||
|
button.classList.add("success");
|
||||||
|
button.innerHTML = "Disabled!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("success");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "OFF";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Data successfully sent to server!');
|
||||||
|
} else {
|
||||||
|
button.classList.remove("pure-button-primary");
|
||||||
|
button.classList.add("error");
|
||||||
|
button.innerHTML = "Error!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("error");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "OFF";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Error while sending data to server.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// Sende die Anfrage im Hintergrund
|
// Sende die Anfrage im Hintergrund
|
||||||
xhr.send();
|
xhr.send();
|
||||||
updateLightState();
|
updateLightState();
|
||||||
|
@ -380,10 +409,39 @@ links.forEach(function(link) {
|
||||||
// Verhindere, dass der Link die Seite neu lädt
|
// Verhindere, dass der Link die Seite neu lädt
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
// Extrahiere die Zahl aus der ID des Links
|
// Extrahiere die Zahl aus der ID des Links
|
||||||
|
var id_full = this.id;
|
||||||
var id = this.id.replace('on', '').replace('_on', '');
|
var id = this.id.replace('on', '').replace('_on', '');
|
||||||
// Erstelle eine neue Anfrage an die entsprechende URL
|
// Erstelle eine neue Anfrage an die entsprechende URL
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true);
|
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!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("success");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "ON";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Data successfully sent to server!');
|
||||||
|
} else {
|
||||||
|
button.classList.remove("pure-button-primary");
|
||||||
|
button.classList.add("error");
|
||||||
|
button.innerHTML = "Error!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("error");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "ON";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Error while sending data to server.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// Sende die Anfrage im Hintergrund
|
// Sende die Anfrage im Hintergrund
|
||||||
xhr.send();
|
xhr.send();
|
||||||
updateLightState();
|
updateLightState();
|
||||||
|
|
|
@ -7,13 +7,13 @@
|
||||||
<a id="on{{LIGHT_NUMBER_DEC}}_off" class="pure-button" href="#">OFF</a>
|
<a id="on{{LIGHT_NUMBER_DEC}}_off" class="pure-button" href="#">OFF</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="pure-control-group">
|
<div class="pure-control-group">
|
||||||
<label for="bri{{LIGHT_NUMBER_DEC}}">Bri</label>
|
<label for="bri{{LIGHT_NUMBER_DEC}}">Target brightness</label>
|
||||||
<input id="bri{{LIGHT_NUMBER_DEC}}" onchange="sendSliderValue({{LIGHT_NUMBER}})" name="bri{{LIGHT_NUMBER_DEC}}" type="range" min="0" max="255" value="25">
|
<input id="bri{{LIGHT_NUMBER_DEC}}" onchange="sendSliderValue({{LIGHT_NUMBER}})" name="bri{{LIGHT_NUMBER_DEC}}" type="range" min="0" max="255" value="25">
|
||||||
|
|
||||||
<span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span>
|
<span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span>
|
||||||
%
|
%
|
||||||
<br>
|
<br>
|
||||||
<label for="light{{LIGHT_NUMBER_DEC}}_pwm">PWM-Value</label>
|
<label for="light{{LIGHT_NUMBER_DEC}}_pwm">Actual Bri.</label>
|
||||||
<input type="range" min="0" max="100" value="0" id="light{{LIGHT_NUMBER_DEC}}_pwm" disabled>
|
<input type="range" min="0" max="100" value="0" id="light{{LIGHT_NUMBER_DEC}}_pwm" disabled>
|
||||||
|
|
||||||
<span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span>
|
<span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span>
|
||||||
|
|
|
@ -4,6 +4,34 @@ links.forEach(function(link) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true);
|
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', 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!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("success");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "ON";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Data successfully sent to server!');
|
||||||
|
} else {
|
||||||
|
button.classList.remove("pure-button-primary");
|
||||||
|
button.classList.add("error");
|
||||||
|
button.innerHTML = "Error!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("error");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "ON";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Error while sending data to server.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
xhr.send();
|
xhr.send();
|
||||||
//console.log('tc=true call');
|
//console.log('tc=true call');
|
||||||
document.getElementById('tc_on').classList.add('pure-button-primary');
|
document.getElementById('tc_on').classList.add('pure-button-primary');
|
||||||
|
@ -16,6 +44,34 @@ links.forEach(function(link) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true);
|
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!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("success");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "OFF";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Data successfully sent to server!');
|
||||||
|
} else {
|
||||||
|
button.classList.remove("pure-button-primary");
|
||||||
|
button.classList.add("error");
|
||||||
|
button.innerHTML = "Error!";
|
||||||
|
setTimeout(function () {
|
||||||
|
button.classList.remove("error");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.innerHTML = "OFF";
|
||||||
|
}, 2000);
|
||||||
|
console.log('Error while sending data to server.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
xhr.send();
|
xhr.send();
|
||||||
//console.log('tc=false call');
|
//console.log('tc=false call');
|
||||||
document.getElementById('tc_off').classList.add('pure-button-primary');
|
document.getElementById('tc_off').classList.add('pure-button-primary');
|
||||||
|
|
Loading…
Reference in a new issue