{% extends "base.html" %}

{% set title = "Riego - Dashboard" %}
{% set active_menu = "dashboard" %}

{% block content %}

{%for valve in valves if not valve.is_hidden %}

<div class="bg-light p-3 rounded">
    <h3>{{valve['name']}}</h3>
    <label for="valves_{{valve['id']}}_duration" class="form-label">Dauer: {{valve['duration']}} Minuten</label>
    <input type="range" class="form-range" min="0" max="90" id="valves_{{valve['id']}}_duration" autocomplete="off"
        value="{{valve['duration']}}"
        onchange="ws.send(JSON.stringify({action: 'update', scope: 'valves', id: '{{valve['id']}}', key: 'duration', value: this.value } ));this.blur();"
        oninput="this.previousElementSibling.innerHTML = 'Dauer: ' + this.value + ' Minuten';">

    <label for="valves_{{valve['id']}}_interval" class="form-label">Intervall: {{valve['interval']}} Tage</label>
    <input type="range" class="form-range" min="0" max="10" id="valves_{{valve['id']}}_interval" autocomplete="off"
        value="{{valve['interval']}}"
        onchange="ws.send(JSON.stringify({action: 'update', scope: 'valves', id: '{{valve['id']}}', key: 'interval', value: this.value } ));this.blur();"
        oninput="this.previousElementSibling.innerHTML = 'Intervall: ' + this.value + ' Tage';">


    <div class="row g-3">
        <div class="col form-check form-switch">
            <input class="form-check-input" type="checkbox" id="valves_{{valve['id']}}_is_running" autocomplete="off" 
            {% if valve['is_running'] == 1 %} checked {% endif %}
                onchange="ws.send(JSON.stringify({action: 'update', scope: 'valves', id: '{{ valve['id'] }}', key: 'is_running', value: this.checked } ))">
            <label class="form-check-label" for="valves_{{valve['id']}}_is_running">Offen</label>
        </div>

        <div class="col form-check">
            <input class="form-check-input" type="checkbox" value="" id="valves_{{valve['id']}}_is_enabled" autocomplete="off"
                {% if valve['is_enabled'] == 1 %} checked {% endif %}
                onchange="ws.send(JSON.stringify({action: 'update', scope: 'valves', id: '{{valve['id'] }}', key: 'is_enabled', value: this.checked } ))">
            <label class="form-check-label" for="valves_{{valve['id']}}_is_enabled">Aktiviert</label>
        </div>
    </div>
    

    
</div>
<p>&nbsp;</p>

{%endfor%}


<div class="form-floating">
    <textarea class="form-control" placeholder="Leave a comment here" autocomplete="off" id="floating_1_Textarea2"
        style="height: 100px"></textarea>
    <label for="floatingTextarea2">Comments</label>
</div>

<script>
    var ws = null;
    function start (){
        var wsUri = (window.location.protocol == 'https:' && 'wss://' || 'ws://') + window.location.host + "{{app.options.websocket_path}}";
        ws = new WebSocket(wsUri);
        ws.onmessage = function (event) {
            el_debug = document.getElementById('floating_1_Textarea2');
            el_debug.value = event.data;
            data = JSON.parse(event.data);
            switch (data.action) {
                case 'status':
                    dom_id = data.scope + "_" + data.id + "_" + data.key
                    el = document.getElementById(dom_id)
                    if (data.value == -1) {
                        el.disabled = true;
                    } else {
                        el.disabled = false;
                    }
                    if (el.hasAttribute('value')) {
                        el.value = data.value;
                    }
                    if (el.checked !== "undefined") {
                        el.checked = data.value
                    }
                    break;
                case 'reload':
                    location.reload(true);
                    break;
                default:
                    break;
            }
        };
        ws.onclose = function(){
            //reconnect now
            check();
        };
    };
    function check(){
        if(!ws || ws.readyState == 3) start();
    }
    start();
    setInterval(check, 5000);

</script>

{% endblock %}