Newer
Older
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title id="title">SmartHome</title>
<!-- <script defer src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script> -->
<script defer src="js/mqtt/paho.javascript-1.0.3/paho-mqtt.js" type="text/javascript"></script>
<script defer src="js/mqtt/mqtthat.js" type="module"></script>
<!-- <script defer src="js/multithread.js-master/multithread.js"></script> -->
<!-- qui sopra viene usato per quando la beagle bone invia un messaggio che dev'essere mostrato all'utente dall'intefaccia -->
<!-- link bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
<!-- link fontawesome (for icons)-->
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> -->
<script defer src="https://kit.fontawesome.com/a1635545b7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/buttons.css" type="text/css">
<!-- link ts/stript.ts which calls other scripts -->
<script defer src="js/script.js" type="module"></script>
<h1>Pissir SmartHome ${nomeCasa o nomeProprio}</h1>
<div id="alert-message" role="alert" class="alert invisible">
<!-- <div class="d-flex justify-content-around container-fluid">
<i class="fa-solid fa-exclamation-circle fa-4x" aria-hidden="true"></i>
<div>
<h4 class="alert-heading">Attenzione</h4>
<p>Stai registrando uno scenario, termina la registrazione per attivare l'antifurto.</p>
</div>
</div> -->
<!-- any error or confirmation goes here (updated by JS) -->
<!-- alert-danger -->
<!-- alert-success -->
<!-- container of the top buttons to change what is seen -->
<div id="mainButtonContainer" class="d-flex flex-row justify-content-around">
<span>Luci</span>
</button>
<button class="btn-12 btn btn-dark">
<span>Scenari</span>
</button>
<button class="btn-12 btn btn-dark">
<span>Antifurto</span>
</button>
</div>
<div id="sensoriContainer" class="container-fluid">
<ul class="d-flex flex-row justify-content-center more-margin-top no-padding-left">
<!-- <li class="d-flex flex-column">
<span class="d-flex justify-content-center">
<img id="sensore-in1" src="res/led-red.png" alt="sensore in0" class="" height="70" width="70"
data-bs-toggle="tooltip" data-bs-placement="bottom" title="I believe I could even add a very long text and still be able to make it pretty!">
</span>
<p class="d-flex justify-content-center">in1</p>
</li> -->
</ul>
</div>
<div id="luciContainer" class="invisible container-fluid">
<th scope="col">Luogo</th>
<th scope="col">Stato</th>
</tr>
</thead>
<tbody id="table-row-luci">
<!-- template for each row; here will be filled by JS -->
<!-- <tr>
<th scope="row">Cucina</th>
<td>
<div class="switch-container no-box-sizing">
<div class="toggle-button no-box-sizing">
<div class="inner-circle no-box-sizing" />
</div>
</div>
</td>
<!-- row to add a new element -->
<tr>
<th scope="row">
<!-- FIXME show fa-bounce if there's at no light [it moves the button :/] -->
<i class="fa-solid fa-circle-plus fa-2x" data-bs-toggle="modal"
</th>
<td>
<span>Aggiungi una luce</span>
</td>
</tr>
</tbody>
</table>
</div>
<div id="scenariContainer" class="invisible container-fluid">
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<table class="table table-striped">
<thead>
<tr class="more-margin-top">
<th scope="col">Nome</th>
<th scope="col">Data</th>
<th scope="col">Prova</th>
<th scope="col">Attiva</th>
</tr>
</thead>
<tbody id="table-row-scenari">
<!-- template for each row; here will be filled by JS -->
<!-- <tr id="scenario-0">
<th scope="row">Festività</th>
<td>
<span>25 Dic.</span>
</td>
<td>
<h5>
<span class="badge rounded-pill bg-secondary">anteprima</span>
</h5>
</td>
<td>
<div class="switch-container no-box-sizing">
<div class="toggle-button no-box-sizing" data-bs-toggle="modal" data-bs-target="#attiva-scenari-modal">
<div class="inner-circle no-box-sizing"></div>
</div>
</div>
</td>
</tr> -->
</tbody>
</table>
<div class="position-relative">
<button id="scenari-registra" type="button"
class="btn btn-info position-absolute top-0 start-50 translate-middle-x">
Registra
<div class="position-absolute top-0 end-10px">
<span>
Antifurto:
</span>
<button type="button" class="btn btn-danger" id="scenari-stato-antifurto">
OFF
</button>
</div>
<!-- antifurto -->
<div id="antifurtoContainer" class="invisible container-fluid">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" id="antifurto-progress">
</div>
<!-- try to have valuemax = 150 and set the 100% -->
</div>
<div class="position-relative">
<button type="button" class="btn btn-info position-absolute top-0 start-50 translate-middle-x"
id="setup-button-antifurto" data-bs-toggle="modal" data-bs-target="#setup-antifurto-modal">
Setup
</button>
<div class="position-absolute top-0 end-10px">
<span>
Antifurto:
</span>
<button type="button" class="btn btn-danger" id="antifurto-stato-antifurto">
OFF
</button>
</div>
</div>
<i class="fa-solid fa-bell fa-3x" id="antifurto-bell"></i>
<i class="fa-brands fa-github fa-3x" id="boost-progressbar">
<!-- FIXME test remove this -->
</i>
<!-- <div class="switch-container no-box-sizing">
<div class="toggle-button no-box-sizing">
<div class="inner-circle no-box-sizing">
antifurto
</div>
</div>
<div class="modal fade" id="luci-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Nuova luce</h5>
<!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
<form method="POST" id="search-form">
<div class="modal-body">
<div>
<label for="#luogoLuce" class="form-label">Luogo</label>
<!-- <input type="text" class="form-control" id="luogoLuce" aria-describedby="luogoLuceHelp" required> -->
<select class="form-select" id="luogoLuce" name="luogo">
<option value="unselected" selected>Scegli un luogo</option>
<option value="cucina">Cucina</option>
<option value="camera1">Camera 1</option>
<option value="camera2">Camera 2</option>
<option value="bagno">Bagno</option>
<option value="ingresso">Ingresso</option>
<option value="soggiorno">Soggiorno</option>
<option value="giardino">Giardino</option>
<option value="garage">Garage</option>
<option value="altro">Altro</option>
</select>
<div id="luogoLuceHelp" class="form-text">Scegli la stanza in cui si trova la tua
luce.</div>
<label for "#scelta-porta-in" class="more-margin-top form-label">Porta di attivazione</label>
<select class="form-select" id="scelta-porta-in" name="porta-in">
<option value="unselected">Scegli una porta di attivazione</option>
<!-- <option value="in0">in0</option> -->
<!-- TODO js populate the options with the available sensors -->
</select>
<div class="form-text">Scegli una porta di attivazione della luce.</div>
<label for "#scelta-porta-out" class="more-margin-top form-label">Porta della luce</label>
<select class="form-select" id="scelta-porta-out" name="porta-out">
<option value="unselected">Scegli la porta della luce</option>
<!-- <option value="in0">in0</option> -->
<!-- TODO js populate the options with the available sensors -->
</select>
<div class="form-text">Scegli la porta in cui si trova la luce.</div>
</div>
<div class="invisible" id="nuovaStanzaDIV">
<label for="nuovaStanza" class="form-label">Nuova stanza</label>
<input type="text" class="form-control" id="nuovaStanza" aria-describedby="nuovaStanzaHelp">
<div id="nuovaStanzaHelp" class="form-text">Inserisci il nome della nuova stanza.</div>
</div>
</div>
<div class="modal-footer justify-content-around">
<button type="button" class="btn btn-secondary w-25" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary w-25">Add</button>
<span id="registra-modal-launcer" data-bs-toggle="modal" data-bs-target="#scenari-modal" class="invisible"></span>
<div class="modal fade" id="scenari-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Stai per attivare la registrazione dei comandi.</p>
<p>Dal momento in cui premerai sul bottone azzurro, inizierai a registrare tutte le interazioni con
le tue luci.</p>
<p>Inoltre disabiliterai eventuali scenari attivi.</p>
<p>Una volta che sarai soddisfatto del risultato, torna su questa pagina per terminare la
registrazione.</p>
<p>Iniziare la registrazione?</p>
<div class="modal-footer justify-content-around">
<button type="button" class="btn btn-danger w-25" data-bs-dismiss="modal">Annulla</button>
<button type="button" class="btn btn-info w-25">Registra</button>
<span id="termina-registrazione-launcher" data-bs-toggle="modal" data-bs-target="#termina-registrazione-modal"
class="invisible"></span>
<div class="modal fade" id="termina-registrazione-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Registrazione dello scenario</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form method="POST" id="termina-registrazione-form">
<div class="modal-body">
<label for="nome-nuovo-scenario" class="form-label">Nome</label>
<input type="text" class="form-control" id="nome-nuovo-scenario"
placeholder="Nome della registrazione" required>
</div>
<div class="modal-footer justify-content-around">
<button type="button" class="btn btn-danger w-25" data-bs-dismiss="modal">Annulla</button>
<button type="submit" class="btn btn-success w-25">Conferma</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="attiva-scenari-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<p>Attivando questo scenario, abiliterai l'antifurto.</p>
<fieldset disabled>
<select id="p" class="form-select">
<!-- <option value="0">${scenario.nome}</option> -->
</select>
</fieldset>
<p class="more-margin-top">Inoltre disabiliterai gli altri scenari attivi.</p>
<p>Continuare l'attivazione?</p>
<div class="modal-footer justify-content-around">
<button type="button" class="btn btn-danger w-25" data-bs-dismiss="modal">Cancella</button>
<button type="button" class="btn btn-success w-25" id="attiva-scenari-btn">Attiva</button>
</div>
</div>
</div>
</div>
<!-- anteprima scenario -->
<span class="invisible" data-bs-toggle="modal" data-bs-target="#anteprima-modal"
id="anteprima-modal-launcher"></span>
<div class="modal fade" id="anteprima-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- <div class="modal-header">
<h5 class="modal-title">Anteprima</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> -->
<div class="modal-body">
Interno del body
</div>
<div class="modal-footer justify-content-around">
<button type="button" class="btn btn-danger w-25" data-bs-dismiss="modal">Cancella</button>
<button type="button" class="btn btn-success w-25" id="anteprima-scenari-btn">Attiva</button>
</div>
<!-- scenari-antifurto modal -->
<span id="lancia-antifurto-modal" class="invisible" data-bs-toggle="modal" data-bs-target="#antifurto-modal"></span>
<div class="modal fade" id="antifurto-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Attenzione!</h5>
<!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
</div>
<div class="modal-body">
<p>Stai per abilitare l'antifurto.</p>
<p>Vuoi continuare?</p>
</div>
<div class="modal-footer justify-content-around">
<button type="button" class="btn btn-danger w-25" data-bs-dismiss="modal">Cancella</button>
<button type="button" class="btn btn-success w-25" id="attiva-antifurto-btn">Attiva</button>
<!-- set up antifurto modal -->
<!-- <span id="setup-modal-launcher-antifurto" class="invisible" data-bs-toggle="modal"
data-bs-target="#setup-antifurto-modal"></span> -->
<div class="modal fade" id="setup-antifurto-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Personalizzazione:</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form method="post" id="setup-antifurto-form">
<div class="modal-body">
<label for="sogliaAntifurto" class="form-label">Soglia</label>
<input type="text" class="form-control" id="sogliaAntifurto" aria-describedby="nuovaStanzaHelp">
<div id="sogliaAntifurtoHelp" class="form-text">Inserisci il valore oltre il quale attivare
l'antifurto.</div>
</div>
<div class="modal-footer justify-content-around">
<button type="button" class="btn btn-danger w-25" data-bs-dismiss="modal">Cancella</button>
<button type="submit" class="btn btn-success w-25">Perfetto</button>
</div>
</form>
</div>
</div>
</div>
<!-- antifurto modal -->
<span id="antifurto-modal-launcher" class="invisible" data-bs-toggle="modal"
data-bs-target="#toggle-antifurto-modal"></span>
<div class="modal fade" id="toggle-antifurto-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Attenzione!</h5>
<!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
</div>
<div class="modal-body">
<p>Stai per abilitare l'antifurto.</p>
<p>Vuoi continuare?</p>
</div>
<div class="modal-footer justify-content-around">
<button type="button" class="btn btn-danger w-25" data-bs-dismiss="modal">Cancella</button>
<button type="button" class="btn btn-success w-25" id="toggle-antifurto-btn">Attiva</button>
</div>
</div>
</div>
</div>