-
Alfredo Chissotti authoredAlfredo Chissotti authored
index.html 18.77 KiB
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title id="title">SmartHome</title>
<link rel="icon" href="res/favicon.png">
<!-- 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">
</head>
<body>
<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 -->
</div>
<!-- container of the top buttons to change what is seen -->
<div id="mainButtonContainer" class="d-flex flex-row justify-content-around">
<button class="btn-12 btn btn-dark">
<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">
<!-- luci -->
<table class="table table-striped">
<thead>
<tr class="more-margin-top">
<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>
</tr> -->
<!-- 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"
data-bs-target="#luci-modal"></i>
</th>
<td>
<span>Aggiungi una luce</span>
</td>
</tr>
</tbody>
</table>
</div>
<!-- scenari -->
<div id="scenariContainer" class="invisible container-fluid">
<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
</button>
<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>
</div>
</div>
<!-- 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> -->
</div>
<!-- modals for new stuff -->
<!-- luci modal -->
<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> -->
</div>
<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>
</div>
</form>
</div>
</div>
</div>
<!-- scenari modal -->
<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">
<h3 class="modal-title">Avviso:</h3>
<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>
<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>
</div>
</div>
</div>
</div>
<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">
<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>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>
<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>
</div>
</div>
</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>
</div>
</div>
</div>
</div>
<!-- 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>
</body>
</html>