Fixed light power button optical handling.
This commit is contained in:
Kai Lauterbach
parent
ebf587c73e
commit
fa90339fea
2 changed files with 235 additions and 233 deletions
|
|
@ -38,8 +38,7 @@ amain.classList.remove("pure-button-primary");
|
||||||
acfg.classList.remove("pure-button-primary");
|
acfg.classList.remove("pure-button-primary");
|
||||||
atde.classList.add("pure-button-primary");
|
atde.classList.add("pure-button-primary");
|
||||||
});
|
});
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
function loadGraphData() {
|
function loadGraphData() {
|
||||||
console.log('----> generate graph <----');
|
console.log('----> generate graph <----');
|
||||||
$.getJSON('/tc_data_blocks', function(data) {
|
$.getJSON('/tc_data_blocks', function(data) {
|
||||||
|
|
@ -208,9 +207,7 @@ pwmElementTxt.innerText = pwmValue.toString();
|
||||||
}
|
}
|
||||||
updatePWMValues();
|
updatePWMValues();
|
||||||
setInterval(updatePWMValues, 5000);
|
setInterval(updatePWMValues, 5000);
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
var links = document.querySelectorAll('[id^="on"][id$="_off"]');
|
var links = document.querySelectorAll('[id^="on"][id$="_off"]');
|
||||||
|
|
||||||
|
|
@ -226,6 +223,8 @@ xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + docume
|
||||||
|
|
||||||
xhr.send();
|
xhr.send();
|
||||||
updateLightState();
|
updateLightState();
|
||||||
|
this.classList.add('pure-button-primary');
|
||||||
|
document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -243,6 +242,8 @@ xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + documen
|
||||||
|
|
||||||
xhr.send();
|
xhr.send();
|
||||||
updateLightState();
|
updateLightState();
|
||||||
|
this.classList.remove('pure-button-primary');
|
||||||
|
document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,251 +1,252 @@
|
||||||
<!-- bottom -->
|
<!-- bottom -->
|
||||||
<script>
|
<script>
|
||||||
var tabMain = document.getElementById("tab-lights");
|
var tabMain = document.getElementById("tab-lights");
|
||||||
var tabConfig = document.getElementById("tab-config");
|
var tabConfig = document.getElementById("tab-config");
|
||||||
var tabTDE = document.getElementById("tab-tde");
|
var tabTDE = document.getElementById("tab-tde");
|
||||||
|
|
||||||
var amain = document.getElementById("tab-a-lights");
|
var amain = document.getElementById("tab-a-lights");
|
||||||
var acfg = document.getElementById("tab-a-config");
|
var acfg = document.getElementById("tab-a-config");
|
||||||
var atde = document.getElementById("tab-a-tde");
|
var atde = document.getElementById("tab-a-tde");
|
||||||
|
|
||||||
|
|
||||||
document.getElementById("tab-a-lights").addEventListener("click", function() {
|
document.getElementById("tab-a-lights").addEventListener("click", function() {
|
||||||
tabMain.classList.add("visible");
|
tabMain.classList.add("visible");
|
||||||
tabConfig.classList.remove("visible");
|
tabConfig.classList.remove("visible");
|
||||||
tabTDE.classList.remove("visible");
|
tabTDE.classList.remove("visible");
|
||||||
|
|
||||||
amain.classList.add("pure-button-primary");
|
amain.classList.add("pure-button-primary");
|
||||||
acfg.classList.remove("pure-button-primary");
|
acfg.classList.remove("pure-button-primary");
|
||||||
atde.classList.remove("pure-button-primary");
|
atde.classList.remove("pure-button-primary");
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById("tab-a-config").addEventListener("click", function() {
|
document.getElementById("tab-a-config").addEventListener("click", function() {
|
||||||
tabMain.classList.remove("visible");
|
tabMain.classList.remove("visible");
|
||||||
tabConfig.classList.add("visible");
|
tabConfig.classList.add("visible");
|
||||||
tabTDE.classList.remove("visible");
|
tabTDE.classList.remove("visible");
|
||||||
|
|
||||||
amain.classList.remove("pure-button-primary");
|
amain.classList.remove("pure-button-primary");
|
||||||
acfg.classList.add("pure-button-primary");
|
acfg.classList.add("pure-button-primary");
|
||||||
atde.classList.remove("pure-button-primary");
|
atde.classList.remove("pure-button-primary");
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById("tab-a-tde").addEventListener("click", function() {
|
document.getElementById("tab-a-tde").addEventListener("click", function() {
|
||||||
tabMain.classList.remove("visible");
|
tabMain.classList.remove("visible");
|
||||||
tabConfig.classList.remove("visible");
|
tabConfig.classList.remove("visible");
|
||||||
tabTDE.classList.add("visible");
|
tabTDE.classList.add("visible");
|
||||||
|
|
||||||
amain.classList.remove("pure-button-primary");
|
amain.classList.remove("pure-button-primary");
|
||||||
acfg.classList.remove("pure-button-primary");
|
acfg.classList.remove("pure-button-primary");
|
||||||
atde.classList.add("pure-button-primary");
|
atde.classList.add("pure-button-primary");
|
||||||
});
|
});
|
||||||
</script>
|
|
||||||
<script>
|
function loadGraphData() {
|
||||||
function loadGraphData() {
|
console.log('----> generate graph <----');
|
||||||
console.log('----> generate graph <----');
|
$.getJSON('/tc_data_blocks', function(data) {
|
||||||
$.getJSON('/tc_data_blocks', function(data) {
|
var currenttime = [];
|
||||||
var currenttime = [];
|
var time = [];
|
||||||
var time = [];
|
var channel1 = [];
|
||||||
var channel1 = [];
|
var channel2 = [];
|
||||||
var channel2 = [];
|
var channel3 = [];
|
||||||
var channel3 = [];
|
var channel4 = [];
|
||||||
var channel4 = [];
|
for (var i = 0; i < data['tcdata'].length; i++) {
|
||||||
for (var i = 0; i < data['tcdata'].length; i++) {
|
time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
|
||||||
time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
|
channel1.push(data['tcdata'][i]['ch1']);
|
||||||
channel1.push(data['tcdata'][i]['ch1']);
|
channel2.push(data['tcdata'][i]['ch2']);
|
||||||
channel2.push(data['tcdata'][i]['ch2']);
|
channel3.push(data['tcdata'][i]['ch3']);
|
||||||
channel3.push(data['tcdata'][i]['ch3']);
|
channel4.push(data['tcdata'][i]['ch4']);
|
||||||
channel4.push(data['tcdata'][i]['ch4']);
|
}
|
||||||
|
currenttime.push(data['currenttime']['hour']);
|
||||||
|
currenttime.push(data['currenttime']['min']);
|
||||||
|
console.log(currenttime);
|
||||||
|
var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
|
||||||
|
var index = time.indexOf(currentTimeStr);
|
||||||
|
if (index === -1) {
|
||||||
|
var lowerIndex = -1;
|
||||||
|
var upperIndex = -1;
|
||||||
|
for (var i = 0; i < time.length - 1; i++) {
|
||||||
|
console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
|
||||||
|
const currentDate = new Date();
|
||||||
|
const year = currentDate.getFullYear();
|
||||||
|
const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
|
||||||
|
const day = currentDate.getDate().toString().padStart(2, '0');
|
||||||
|
const dateString = `${year}-${month}-${day}`;
|
||||||
|
const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
|
||||||
|
const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
|
||||||
|
const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
|
||||||
|
console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
|
||||||
|
console.log(curr.isBetween(start, end));
|
||||||
|
if (curr.isBetween(start, end)) {
|
||||||
|
lowerIndex = i;
|
||||||
|
upperIndex = i + 1;
|
||||||
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
currenttime.push(data['currenttime']['hour']);
|
console.log('lowerIndex=' + lowerIndex);
|
||||||
currenttime.push(data['currenttime']['min']);
|
console.log('upperIndex=' + upperIndex);
|
||||||
console.log(currenttime);
|
if (lowerIndex === -1 || upperIndex === -1) {
|
||||||
var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
|
console.log("Error: Current time not found in time array and not between two elements in time array.");
|
||||||
var index = time.indexOf(currentTimeStr);
|
lowerIndex = 0;
|
||||||
if (index === -1) {
|
upperIndex = 1;
|
||||||
var lowerIndex = -1;
|
var tmp1 = time[0].split(':');
|
||||||
var upperIndex = -1;
|
console.log('tmp1 = ' + tmp1);
|
||||||
for (var i = 0; i < time.length - 1; i++) {
|
currenttime[0] = tmp1[0];
|
||||||
console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
|
currenttime[1] = tmp1[1];
|
||||||
const currentDate = new Date();
|
}
|
||||||
const year = currentDate.getFullYear();
|
var lowerTime = time[lowerIndex].split(":");
|
||||||
const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
|
var upperTime = time[upperIndex].split(":");
|
||||||
const day = currentDate.getDate().toString().padStart(2, '0');
|
var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
|
||||||
const dateString = `${year}-${month}-${day}`;
|
var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
|
||||||
const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
|
console.log("Index (float): " + indexFloat);
|
||||||
const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
|
} else {
|
||||||
const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
|
console.log("Index (integer): " + index);
|
||||||
console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
|
console.log("Index (float): " + index);
|
||||||
console.log(curr.isBetween(start, end));
|
}
|
||||||
if (curr.isBetween(start, end)) {
|
if (indexFloat > index) {
|
||||||
lowerIndex = i;
|
index = indexFloat;
|
||||||
upperIndex = i + 1;
|
}
|
||||||
break;
|
console.log("index in graph >>>" + index);
|
||||||
}
|
var trace1 = {
|
||||||
|
x: time,
|
||||||
|
y: channel1,
|
||||||
|
name: 'Channel 1',
|
||||||
|
type: 'scatter',
|
||||||
|
mode: 'lines+markers',
|
||||||
|
};
|
||||||
|
var trace2 = {
|
||||||
|
x: time,
|
||||||
|
y: channel2,
|
||||||
|
name: 'Channel 2',
|
||||||
|
type: 'scatter',
|
||||||
|
mode: 'lines+markers',
|
||||||
|
};
|
||||||
|
var trace3 = {
|
||||||
|
x: time,
|
||||||
|
y: channel3,
|
||||||
|
name: 'Channel 3',
|
||||||
|
type: 'scatter',
|
||||||
|
mode: 'lines+markers',
|
||||||
|
};
|
||||||
|
var trace4 = {
|
||||||
|
x: time,
|
||||||
|
y: channel4,
|
||||||
|
name: 'Channel 4',
|
||||||
|
type: 'scatter',
|
||||||
|
mode: 'lines+markers',
|
||||||
|
};
|
||||||
|
var layout = {
|
||||||
|
title: 'Timing Control Data Blocks',
|
||||||
|
xaxis: {
|
||||||
|
title: 'Time',
|
||||||
|
tickangle: -45,
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
title: 'Brightness',
|
||||||
|
range: [0, 255],
|
||||||
|
},
|
||||||
|
shapes: [{
|
||||||
|
type: 'line',
|
||||||
|
x0: index,
|
||||||
|
y0: 0,
|
||||||
|
x1: index,
|
||||||
|
y1: 255,
|
||||||
|
line: {
|
||||||
|
color: 'lightgrey',
|
||||||
|
width: 3,
|
||||||
|
dash: 'dot'
|
||||||
}
|
}
|
||||||
console.log('lowerIndex=' + lowerIndex);
|
}]
|
||||||
console.log('upperIndex=' + upperIndex);
|
};
|
||||||
if (lowerIndex === -1 || upperIndex === -1) {
|
Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
|
||||||
console.log("Error: Current time not found in time array and not between two elements in time array.");
|
});
|
||||||
lowerIndex = 0;
|
}
|
||||||
upperIndex = 1;
|
setInterval(loadGraphData, 10000);
|
||||||
var tmp1 = time[0].split(':');
|
loadGraphData();
|
||||||
console.log('tmp1 = ' + tmp1);
|
|
||||||
currenttime[0] = tmp1[0];
|
function updateLightState() {
|
||||||
currenttime[1] = tmp1[1];
|
console.log('----> setting bri and power switch <----');
|
||||||
}
|
for (let i = 1; i <= {{LIGHT_COUNT}}; i++) {
|
||||||
var lowerTime = time[lowerIndex].split(":");
|
const lightURL = `http://{{IP_ADDRESS}}/state?light=${i}`;
|
||||||
var upperTime = time[upperIndex].split(":");
|
fetch(lightURL).then(response => response.json()).then(data => {
|
||||||
var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
|
const briSlider = document.getElementById(`bri${i - 1}`);
|
||||||
var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
|
const briSliderVal = document.getElementById(`bri${i - 1}_val`);
|
||||||
console.log("Index (float): " + indexFloat);
|
const onLinkOn = document.getElementById(`on${i - 1}_on`);
|
||||||
|
const onLinkOff = document.getElementById(`on${i - 1}_off`);
|
||||||
|
briSlider.value = data.bri;
|
||||||
|
briSliderVal.innerHTML = (Math.round((data.bri * 100.0 / 255.0) * 100) / 100).toFixed(2);
|
||||||
|
console.log('data.on ' + i + ' = ' + data.on);
|
||||||
|
if (data.on == true) {
|
||||||
|
onLinkOn.classList.add('pure-button-primary');
|
||||||
|
onLinkOff.classList.remove('pure-button-primary');
|
||||||
} else {
|
} else {
|
||||||
console.log("Index (integer): " + index);
|
onLinkOn.classList.remove('pure-button-primary');
|
||||||
console.log("Index (float): " + index);
|
onLinkOff.classList.add('pure-button-primary');
|
||||||
}
|
}
|
||||||
if (indexFloat > index) {
|
}).catch(error => console.error(error));
|
||||||
index = indexFloat;
|
|
||||||
}
|
|
||||||
console.log("index in graph >>>" + index);
|
|
||||||
var trace1 = {
|
|
||||||
x: time,
|
|
||||||
y: channel1,
|
|
||||||
name: 'Channel 1',
|
|
||||||
type: 'scatter',
|
|
||||||
mode: 'lines+markers',
|
|
||||||
};
|
|
||||||
var trace2 = {
|
|
||||||
x: time,
|
|
||||||
y: channel2,
|
|
||||||
name: 'Channel 2',
|
|
||||||
type: 'scatter',
|
|
||||||
mode: 'lines+markers',
|
|
||||||
};
|
|
||||||
var trace3 = {
|
|
||||||
x: time,
|
|
||||||
y: channel3,
|
|
||||||
name: 'Channel 3',
|
|
||||||
type: 'scatter',
|
|
||||||
mode: 'lines+markers',
|
|
||||||
};
|
|
||||||
var trace4 = {
|
|
||||||
x: time,
|
|
||||||
y: channel4,
|
|
||||||
name: 'Channel 4',
|
|
||||||
type: 'scatter',
|
|
||||||
mode: 'lines+markers',
|
|
||||||
};
|
|
||||||
var layout = {
|
|
||||||
title: 'Timing Control Data Blocks',
|
|
||||||
xaxis: {
|
|
||||||
title: 'Time',
|
|
||||||
tickangle: -45,
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
title: 'Brightness',
|
|
||||||
range: [0, 255],
|
|
||||||
},
|
|
||||||
shapes: [{
|
|
||||||
type: 'line',
|
|
||||||
x0: index,
|
|
||||||
y0: 0,
|
|
||||||
x1: index,
|
|
||||||
y1: 255,
|
|
||||||
line: {
|
|
||||||
color: 'lightgrey',
|
|
||||||
width: 3,
|
|
||||||
dash: 'dot'
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
setInterval(loadGraphData, 10000);
|
}
|
||||||
loadGraphData();
|
setInterval(updateLightState, 10000);
|
||||||
|
updateLightState();
|
||||||
|
|
||||||
function updateLightState() {
|
function updatePWMValues() {
|
||||||
console.log('----> setting bri and power switch <----');
|
console.log('----> setting pwm data <----');
|
||||||
for (let i = 1; i <= {{LIGHT_COUNT}}; i++) {
|
for (let i = 0; i < {{LIGHT_COUNT}}; i++) {
|
||||||
const lightURL = `http://{{IP_ADDRESS}}/state?light=${i}`;
|
const lightID = i + 1;
|
||||||
fetch(lightURL).then(response => response.json()).then(data => {
|
const pwmElement = document.getElementById(`light${i}_pwm`);
|
||||||
const briSlider = document.getElementById(`bri${i - 1}`);
|
const pwmElementTxt = document.getElementById(`light${i}_pwm_txt`);
|
||||||
const briSliderVal = document.getElementById(`bri${i - 1}_val`);
|
if (pwmElement) {
|
||||||
const onLinkOn = document.getElementById(`on${i - 1}_on`);
|
const url = `http://{{IP_ADDRESS}}/state?light=${lightID}`;
|
||||||
const onLinkOff = document.getElementById(`on${i - 1}_off`);
|
fetch(url).then(response => response.json()).then(data => {
|
||||||
briSlider.value = data.bri;
|
const pwmValue = ((Math.round((data.curpwm - ((data.curpwm >= {{PWM_MIN}}) ? {{PWM_MIN}} : 0)) / {{PWM_MAX}} * 10000) / 100).toFixed(2));
|
||||||
briSliderVal.innerHTML = (Math.round((data.bri * 100.0 / 255.0) * 100) / 100).toFixed(2);
|
console.log('curpwm[' + i + '] = ' + data.curpwm + ' = ' + pwmValue);
|
||||||
console.log('data.on ' + i + ' = ' + data.on);
|
pwmElement.innerText = pwmValue.toString();
|
||||||
if (data.on == true) {
|
pwmElement.value = pwmValue;
|
||||||
onLinkOn.classList.add('pure-button-primary');
|
pwmElementTxt.innerText = pwmValue.toString();
|
||||||
onLinkOff.classList.remove('pure-button-primary');
|
|
||||||
} else {
|
|
||||||
onLinkOn.classList.remove('pure-button-primary');
|
|
||||||
onLinkOff.classList.add('pure-button-primary');
|
|
||||||
}
|
|
||||||
}).catch(error => console.error(error));
|
}).catch(error => console.error(error));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
setInterval(updateLightState, 10000);
|
}
|
||||||
updateLightState();
|
updatePWMValues();
|
||||||
|
setInterval(updatePWMValues, 5000);
|
||||||
|
|
||||||
function updatePWMValues() {
|
// Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
|
||||||
console.log('----> setting pwm data <----');
|
var links = document.querySelectorAll('[id^="on"][id$="_off"]');
|
||||||
for (let i = 0; i < {{LIGHT_COUNT}}; i++) {
|
// Füge einen Klick-Listener zu jedem Link hinzu
|
||||||
const lightID = i + 1;
|
links.forEach(function(link) {
|
||||||
const pwmElement = document.getElementById(`light${i}_pwm`);
|
link.addEventListener('click', function(event) {
|
||||||
const pwmElementTxt = document.getElementById(`light${i}_pwm_txt`);
|
// Verhindere, dass der Link die Seite neu lädt
|
||||||
if (pwmElement) {
|
event.preventDefault();
|
||||||
const url = `http://{{IP_ADDRESS}}/state?light=${lightID}`;
|
// Extrahiere die Zahl aus der ID des Links
|
||||||
fetch(url).then(response => response.json()).then(data => {
|
var id = this.id.replace('on', '').replace('_off', '');
|
||||||
const pwmValue = ((Math.round((data.curpwm - ((data.curpwm >= {{PWM_MIN}}) ? {{PWM_MIN}} : 0)) / {{PWM_MAX}} * 10000) / 100).toFixed(2));
|
// Erstelle eine neue Anfrage an die entsprechende URL
|
||||||
console.log('curpwm[' + i + '] = ' + data.curpwm + ' = ' + pwmValue);
|
var xhr = new XMLHttpRequest();
|
||||||
pwmElement.innerText = pwmValue.toString();
|
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true);
|
||||||
pwmElement.value = pwmValue;
|
// Sende die Anfrage im Hintergrund
|
||||||
pwmElementTxt.innerText = pwmValue.toString();
|
xhr.send();
|
||||||
}).catch(error => console.error(error));
|
updateLightState();
|
||||||
}
|
this.classList.add('pure-button-primary');
|
||||||
}
|
document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
|
||||||
}
|
});
|
||||||
updatePWMValues();
|
});
|
||||||
setInterval(updatePWMValues, 5000);
|
// Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
|
||||||
</script>
|
var links = document.querySelectorAll('[id^="on"][id$="_on"]');
|
||||||
|
// Füge einen Klick-Listener zu jedem Link hinzu
|
||||||
<script>
|
links.forEach(function(link) {
|
||||||
// Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
|
link.addEventListener('click', function(event) {
|
||||||
var links = document.querySelectorAll('[id^="on"][id$="_off"]');
|
// Verhindere, dass der Link die Seite neu lädt
|
||||||
// Füge einen Klick-Listener zu jedem Link hinzu
|
event.preventDefault();
|
||||||
links.forEach(function(link) {
|
// Extrahiere die Zahl aus der ID des Links
|
||||||
link.addEventListener('click', function(event) {
|
var id = this.id.replace('on', '').replace('_on', '');
|
||||||
// Verhindere, dass der Link die Seite neu lädt
|
// Erstelle eine neue Anfrage an die entsprechende URL
|
||||||
event.preventDefault();
|
var xhr = new XMLHttpRequest();
|
||||||
// Extrahiere die Zahl aus der ID des Links
|
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true);
|
||||||
var id = this.id.replace('on', '').replace('_off', '');
|
// Sende die Anfrage im Hintergrund
|
||||||
// Erstelle eine neue Anfrage an die entsprechende URL
|
xhr.send();
|
||||||
var xhr = new XMLHttpRequest();
|
updateLightState();
|
||||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true);
|
this.classList.remove('pure-button-primary');
|
||||||
// Sende die Anfrage im Hintergrund
|
document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
|
||||||
xhr.send();
|
});
|
||||||
updateLightState();
|
});
|
||||||
});
|
</script>
|
||||||
});
|
|
||||||
// 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 = 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);
|
|
||||||
// Sende die Anfrage im Hintergrund
|
|
||||||
xhr.send();
|
|
||||||
updateLightState();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue