<!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="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"
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>
<!-- link my scripts and styles -->
<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/authentication/keycloak.js"></script>
<script defer src="js/script.js" type="module"></script>
</head>
<body id="body-id">
<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">
<!-- 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"
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>
<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" data-bs-toggle="tooltip" data-bs-placement="bottom" 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" role="progressbar" style="width: 0%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" id="antifurto-progress">
</div>
</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" data-bs-toggle="tooltip" data-bs-placement="bottom" id="antifurto-stato-antifurto">
OFF
</button>
</div>
</div>
<i class="fa-solid fa-bell fa-3x" id="antifurto-bell" data-bs-toggle="tooltip" data-bs-placement="bottom"></i>
<!-- <i class="fa-brands fa-github fa-3x" id="boost-progressbar">
</i> -->
<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>
<!-- 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>
<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>
</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" id="scenari-modal-recordbtn" data-bs-toggle="tooltip" data-bs-placement="bottom">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" data-bs-toggle="tooltip" data-bs-placement="bottom">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" data-bs-toggle="tooltip" data-bs-placement="bottom">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" data-bs-toggle="tooltip" data-bs-placement="bottom" 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" data-bs-toggle="tooltip" data-bs-placement="bottom" id="toggle-antifurto-btn">Attiva</button>
</div>
</div>
</div>
</div>
</body>
</html>