Skip to content
Snippets Groups Projects
Select Git revision
  • master default protected
1 result
Blame Permalink
index.html 26.64 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 -->
    <!-- link crypto.js -->
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
    <!-- <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/moment.min.js"></script>
    <script defer src="js/scriptIndex.js" type="module"></script>
</head>

<body id="body-id">
    <h1>Pissir SmartHome</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>
    <div id="no-services" class="invisible d-col position-absolute top-50 start-50 translate-middle">
        <h1 style="width: 50%; margin: 0 auto;">Non hai servizi</h1>
        <h3 style="width: 90%; margin: 10px auto;">Non hai scelto nessun nostro servizio attivo. Questa pagina rimane vuota.</h3>
    </div>
    <button class="btn btn-primary position-absolute bottom-0 end-0" id="button-logout">Logout</button>

    <!-- 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 invisible" id="luci-btn">
            <span>Luci</span>
        </button>
        <button class="btn-12 btn btn-dark invisible" id="scenari-btn">
            <span>Scenari</span>
        </button>
        <button class="btn-12 btn btn-dark invisible" id="antifurto-btn">
            <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" id="${luce.id}>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&agrave;</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>
        <!-- scenari modal for admin -->
        <div class="admin-panel invisible">
            <i class="fa-solid fa-user-cog fa-2x" data-bs-toggle="modal" data-bs-target="#admin-modal-scenari"></i>
        </div>
        <div class="modal fade admin-modal" id="admin-modal-scenari" tabindex="-1" role="dialog" aria-labelledby="admin-modal-title"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="admin-modal-title">Modifica impostazioni di base</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="admin-in-apprendimento">Seleziona un ingresso per attivare l'apprendimento.</label>
                            <select class="form-select scelta-porta-in more-margin-top" name="porta-in" id="admin-in-apprendimento">
                                <option value="unselected">Scegli la porta di apprendimento</option>
                                <!-- <option value="in0">in0</option> -->
                                <!-- js populates the options with the available sensors -->
                            </select>
                            <label for="admin-in-scenari" class="more-margin-top">Seleziona un ingresso per attivare gli scenari.</label>
                            <select class="form-select scelta-porta-in more-margin-top" name="porta-in" id="admin-in-scenari">
                                <option value="unselected">Scegli la porta degli scenari</option>
                                <!-- <option value="in0">in0</option> -->
                                <!-- js populates the options with the available sensors -->
                            </select>
                            <label for="admin-out-scenari" class="more-margin-top">Seleziona un'uscita per mostrare l'attivazione degli scenari.</label>
                            <select class="form-select scelta-porta-out more-margin-top" name="porta-out" id="admin-out-scenari">
                                <option value="unselected">Scegli la porta della luce</option>
                                <!-- <option value="in0">in0</option> -->
                                <!-- js populates the options with the available sensors -->
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-around">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Annulla</button>
                        <button type="button" class="btn btn-success" id="admin-scenari-submit">Conferma scelte</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- antifurto -->
    <div id="antifurtoContainer" class="invisible container-fluid more-margin-top">
        <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="d-flex justify-content-around more-margin-top">
            <i class="fa-solid fa-bell fa-2x" id="antifurto-bell" data-bs-toggle="tooltip" data-bs-placement="bottom"></i>
            <div class="admin-panel invisible">
                <i class="fa-solid fa-user-cog fa-2x" data-bs-toggle="modal" data-bs-target="#admin-modal-antifurto"></i>
            </div>
            <button type="button" class="btn btn-info"
                id="setup-button-antifurto" data-bs-toggle="modal" data-bs-target="#setup-antifurto-modal">
                Setup
            </button>
            <span>
                <span>
                    Antifurto:
                </span>
                <button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" id="antifurto-stato-antifurto">
                    OFF
                </button>
            </span>
        </div>
        <!-- <i class="fa-brands fa-github fa-3x" id="boost-progressbar">
        </i> -->
        <div id="sensoriContainer" class="container-fluid">
            <!-- FIXME should be removed ? -->
            <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>
        <!-- antifurto modal for admin -->
        <div class="modal fade admin-modal" id="admin-modal-antifurto" tabindex="-1" role="dialog" aria-labelledby="admin-modal-title"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="admin-modal-title">Modifica impostazioni di base</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="admin-in-antifurto">Seleziona un ingresso per attivare l'antifurto.</label>
                            <select class="form-select scelta-porta-in more-margin-top" name="porta-in" id="admin-in-antifurto">
                                <option value="unselected">Scegli la porta per l'antifurto</option>
                                <!-- <option value="in0">in0</option> -->
                                <!-- js populates the options with the available sensors -->
                            </select>
                            <label for="admin-out-antifurto" class="more-margin-top">Seleziona un'uscita per mostrare lo stato dell'antifurto.</label>
                            <select class="form-select scelta-porta-out more-margin-top" name="porta-out" id="admin-out-antifurto">
                                <option value="unselected">Scegli la porta dello stato</option>
                                <!-- <option value="in0">in0</option> -->
                                <!-- js populates the options with the available sensors -->
                            </select>
                            <label for="admin-out-allarme" class="more-margin-top">Seleziona un'uscita per l'allarme dell'antifurto.</label>
                            <select class="form-select scelta-porta-out more-margin-top" name="porta-out" id="admin-out-allarme">
                                <option value="unselected">Scegli la porta dell'allarme</option>
                                <!-- <option value="in0">in0</option> -->
                                <!-- js populates the options with the available sensors -->
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-around">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Annulla</button>
                        <button type="button" class="btn btn-success" id="admin-antifurto-submit">Conferma scelte</button>
                    </div>
                </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>
                            <label for="#scelta-porta-in" class="more-margin-top form-label">Porta di
                                attivazione</label>
                            <select class="form-select scelta-porta-in" 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 scelta-porta-out" 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>