Newer
Older
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title id="title">SmartHome</title>
<!-- link all other useful scripts -->
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js"
type="text/javascript"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
crossorigin="anonymous"></script>
<!-- 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>
<script defer src="js/multithread.js-master/multithread.js"></script>
<!-- link ts/stript.ts which calls other scripts -->
<script defer src="js/script.js" type="module"></script>
<!-- link bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- link style.css -->
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/buttons.css" type="text/css">
<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>
<!-- actual containers -->
<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">
<!-- TODO 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">
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<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>
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!-- antifurto -->
<div id="antifurtoContainer" class="invisible container-fluid">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" 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>
</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>
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
<!-- 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>