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