{% extends "base.html" %}

{% block content %}
    <p>
    Inserisci qua sotto i dati del WiFi e i dati necessari per la
    configurazione iniziale.
    </p>
    
    <p>
    Questi dati potranno essere cambiati in seguito utilizzando il file di 
    configurazione salvato sul server. La webcam scarichera' il file aggiornato
    appena prima di scattare una nuova foto.
    </p>

    <div id="page">

        <div class="sheet">
            <div class="row">
                <h3>Rete:</h3>
                <a href="/network" id="configure-network" class="button" style="margin: auto 0;">Configura la rete</a> 
            </div>
            <p>
                Tipo di connessione: <b>{{ network_data.type or "[non configurato]"}}</b><br>
                {% if network_data.type == "WiFi"%}
                Nome della rete (SSID): <b>{{ network_data.ssid or "[non configurato]"}}</b><br>
                Password: <b id="wifi_pwd"></b><a id="wifi_pwd_button" onclick="toggle_wifi_password()" style="margin-left:1rem;">Mostra</a>
                
                {% elif network_data.type == "Ethernet"%}
                
                {% elif network_data.type == "SIM"%}
                Access Point (AP): <b>{{ network_data.ap or "[non configurato]"}}</b><br>
                {% endif %}
            </p>
        </div>

        <div class="sheet">
            <div class="row">
                <h3>Server:</h3>
                <a href="/server" id="configure-server" class="button" style="margin: auto 0;">Configura Dati Server</a> 
            </div>
            <p>
                Protocollo: <b>{{ server_data.protocol  or "[non configurato]"}}</b><br>
                
                {% if server_data.protocol=="HTTP" %}
                URL: <b>{{ server_data.url  or "[non configurato]"}}</b><br>

                {% elif server_data.protocol=="FTP" %}
                Hostname: <b>{{ server_data.hostname  or "[non configurato]"}}</b><br>
                Sottocartella: <b>{{ server_data.subfolder  or "[non configurato]"}}</b><br>
                Usa TLS: <b>{%if server_data.tls %}Si'{% else %}No{% endif %}</b><br>
                {% endif %}
                
                Username: <b>{{ server_data.username or "[non configurato]" }}</b><br>
                Password: <b id="server_pwd"></b><a id="server_pwd_button" onclick="toggle_server_password()" style="margin-left:1rem;">Mostra</a>
            </p>
        </div>

        <div class="sheet">
            <div class="row">
                <h3>Webcam:</h3>
                <a href="/webcam" id="setup-webcam" class="button" type="button" style="margin: auto 0;">Setup Webcam</a>
            </div>
        </div>

        <div class="sheet">
            <div class="row">
                <h3>Hotspot:</h3>
                <label class="toggle">
                    <input type="radio" value="YES" name="hotspot_value" {% if not hotspot_value or hotspot_value=="YES" %}checked{%endif%} onchange="javascript:hotspotYES();">
                    <span class="label">SI</span>
                </label>
                <label class="toggle">
                    <input type="radio" value="NO" name="hotspot_value" {% if hotspot_value=="NO" %}checked{%endif%} onchange="javascript:hotspotNO();">
                    <span class="label">NO</span>
                </label>
                <br>
            </div>
            <p><b>NOTA BENE:</b> Questo switch serve per permettere a ZanzoCam di generare o meno un hotspot quando perde contatto
            con qualunque rete WiFi nota. Questo switch NON attiva l'hotspot se ZanzoCam è gia' in grado di collegarsi
            con un'altra rete WiFi o è collegata via rete Ethernet.<br>
        </div>

        <div class="sheet">
            <div class="row">
                <h3>Riavvia ZanzoCam:</h3>
                <a href="/reboot" class="button" type="button" style="margin: auto 0; background-color:#bb0000; border:0px;">Riavvia</a>
            </div>
            <p>
                ATTENZIONE! Una volta premuto "Riavvia", questa pagina si disconnettera' e 
                potrebbe riconnettersi a un altro indirizzo IP.
            </p>
        </div>
    </div>
    
    
    <script>
    function toggle_wifi_password() {
        const field_wifi = document.getElementById("wifi_pwd");
        const button_wifi = document.getElementById("wifi_pwd_button");
        if( button_wifi.innerHTML == 'Mostra' ) {
            button_wifi.innerHTML = 'Nascondi';
            field_wifi.innerHTML="{{ network_data.password  or '[non configurato]' }}";
        } else {
            button_wifi.innerHTML = 'Mostra';
            field_wifi.innerHTML="";
        }
    }

    function toggle_server_password() {
        const field = document.getElementById("server_pwd");
        const button = document.getElementById("server_pwd_button");
        if( button.innerHTML == 'Mostra' ) {
            button.innerHTML = 'Nascondi';
            field.innerHTML="{{ server_data.password  or '[non configurato]'}}";
        } else {
            button.innerHTML = 'Mostra';
            field.innerHTML="";
        }
    }
    
    function hotspotNO() {
        confirmation = confirm("ATTENZIONE! Una volta premuto questo bottone, " +
              "ZanzoCam smettera' di produrre il suo hotspot in caso di " +
              "assenza di WiFi.\n\n" +
              "Sei sicuro\a di voler proseguire?");
        if(confirmation){
            fetch("/configure/hotspot/NO", {
                method:'POST',
            })
            .then(r => {
                if (r.status === 200){
                    alert("Modifica completata con successo.");
                } else {
                    alert("Qualcosa è andato storto! " +
                      "ZanzoCam ha risposto con un codice "+ r.status +".");
                }
            }).catch(r => {
                alert("Qualcosa è andato storto! " +
                      "ZanzoCam non è raggiungibile.");
            })   
        }
    }
    function hotspotYES() {
        confirmation = confirm("ATTENZIONE! Una volta premuto questo bottone, " +
              "ZanzoCam comincera' a produrre il suo hotspot in caso di " +
              "assenza di WiFi.\n\n" +
              "Sei sicuro\a di voler proseguire?");
        if(confirmation){
            fetch("/configure/hotspot/YES", {
                method:'POST',
            })
            .then(r => {
                if (r.status === 200){
                    alert("Modifica completata con successo.");
                } else {
                    alert("Qualcosa è andato storto! " +
                      "ZanzoCam ha risposto con un codice "+ r.status +".");
                }
            }).catch(r => {
                alert("Qualcosa è andato storto! " +
                      "ZanzoCam non è raggiungibile.");
            })   
        }
    }
    </script>
    
{% endblock %}