Leds.html
This commit is contained in:
parent
e41f0b92d8
commit
13c9bdfd25
|
|
@ -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 d’attachement 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 %}
|
||||
Loading…
Reference in New Issue