Leds.html

This commit is contained in:
Nicolas Bertrand 2025-09-25 18:26:29 +02:00
parent e41f0b92d8
commit 13c9bdfd25
1 changed files with 74 additions and 0 deletions

View File

@ -0,0 +1,74 @@
{% extends "base.html" %}
{% block content %}
<section class="section">
<div class="container">
<h1 class="title">Conroler les LEDS</h1>
<div class="columns">
<div class="column is-half">
<div class="switch-slice">
<h2>LED 1</h2>
<label for="led-switch">OFF</label>
<label class="switch">
<input type="checkbox" id="led-switch-led1">
<span class="slider"></span>
</label>
<label for="led-switch">ON</label>
</div>
<div class="switch-slice">
<h2>LED 2</h2>
<label for="led-switch">OFF</label>
<label class="switch">
<input type="checkbox" id="led-switch-led2">
<span class="slider"></span>
</label>
<label for="led-switch">ON</label>
</div>
<div class="switch-slice">
<h2>LED 3</h2>
<label for="led-switch">OFF</label>
<label class="switch">
<input type="checkbox" id="led-switch-led3">
<span class="slider"></span>
</label>
<label for="led-switch">ON</label>
</div>
<div class="column">
</div>
</div>
</section>
{% endblock content %}
{% block extrajs %}
<script>
function setLedState(ledName, state) {
fetch('/leds/set', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ led: ledName, state: state })
})
.then(response => response.json())
.then(data => {
if (data.status !== 'ok') {
alert('Erreur lors du contrôle de la LED : ' + (data.error || 'inconnue'));
}
});
}
// Exemple dattachement dévénement pour plusieurs LEDs
document.addEventListener('DOMContentLoaded', function () {
['led1', 'led2', 'led3'].forEach(function (ledName) {
const checkbox = document.getElementById('led-switch-' + ledName);
if (checkbox) {
checkbox.addEventListener('change', function () {
setLedState(ledName, checkbox.checked ? 'on' : 'off');
});
}
});
});
</script>
{% endblock extrajs %}