<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Alerts actuality</title>
</head>
<script src="https://yandex.st/jquery/2.0.3/jquery.min.js"></script>
<script type='text/javascript' src="{% static 'js/xmlhttp.js' %}"></script>
<script type="text/javascript">
    var outdated_services = [];

    function get_alerts_status(elem){
        var service = elem.id.split('.')[0];
        var ctype = elem.id.split('.')[1];
        var xmlhttp = getXmlHttp();
        var req_url = '?service=' + service + '&ctype=' + ctype;
        xmlhttp.open('GET', '{%  url "check_alerts" %}' + req_url, true);
       // document.getElementById("answer").innerHTML = 'opening ' + ctype + ' ' + service + '...';
        xmlhttp.onreadystatechange = function() {
            try {
            if (xmlhttp.readyState == 4) {
                //console.log('answered');
                if (xmlhttp.status > 200) {
                    document.getElementById("errors").innerHTML =
                        xmlhttp.status + ' ' + xmlhttp.responseText;
                } else {
                    var stat = JSON.parse(xmlhttp.responseText);
                    var color = 'grey';
                    var message = 'No alerts info';
                    if (!stat.is_actual) {
                        outdated_services.push(service);
                        var el_act = document.getElementById('do-act-all');
                        if (el_act.hasAttribute('hidden')) { el_act.removeAttribute('hidden'); }
                    }
                    if (stat.is_actual ) { color = '#cbf3c6'; message = 'Alerts are up to date'; }
                    else if (! stat.presence.is_actual) { color = '#ffb191'; message = 'Outdated juggler checks list';}
                    else if (! stat.checks.is_actual) { color = '#d2a38c'; message = 'Outdated juggler settings';}
                    else if (! stat.alerts.is_actual) { color = '#ded381'; message = 'Outdated alerts settings';}
                    else { color = '#ffd7b1'; message = 'Unknown unactuality';}
                    elem.style.backgroundColor = color;
                    elem.title = message;
                    document.getElementById("answer").innerHTML =
                        elem.id + ' ' + xmlhttp.responseText;
                }
            }
            } catch(err) { console.log(err); }
        };
        xmlhttp.send();
    }
    function actualize_alerts(service){
        var xmlhttp = getXmlHttp();
        var req_url = '?service=' + service + '&rewrite=1&juggler=1';
        xmlhttp.open('GET', '{%  url "set_alerts" %}' + req_url, true);
       // document.getElementById("answer").innerHTML = 'opening ' + ctype + ' ' + service + '...';
        xmlhttp.onreadystatechange = function() {
            try {
            if (xmlhttp.readyState == 4) {
                //console.log('answered');
                if (xmlhttp.status > 200) {
                    document.getElementById("errors").innerHTML =
                        xmlhttp.status + ' ' + xmlhttp.responseText;
                } else {
                    var stat = JSON.parse(xmlhttp.responseText);
                    var els_al = document.getElementsByName('alert');
                    for (var i=0; i<els_al.length; ++i) {
                        if (els_al[i].id.split('.')[0] === service) {
                            setTimeout(get_alerts_status, 5000, els_al[i]);
                        }
                    }
                    document.getElementById("answer").innerHTML =
                        'last answer: ' + service + ' ' + xmlhttp.responseText;
                }
            }
            } catch(err) { console.log(err); }
        };
        xmlhttp.send();
    }
    $(document).ready(function(){
        var els = document.getElementsByName('alert');
        get_alerts_status(els[0]);
        for (var i=1; i<els.length; ++i){
            try {
                setTimeout(get_alerts_status, 10000 * Math.random(), els[i]);
            } catch(err) { console.log(err); }
        }
    });
    function actualize_all() {
        var outs = outdated_services;
        outdated_services = [];
        for (var i=0; i<outs.length; ++i) {
            try {
                setTimeout(actualize_alerts, 20000 * Math.random(), outs[i]);
            } catch(err) { console.log(err); }
        }
        var el_act = document.getElementById('do-act-all');
        el_act.setAttribute('hidden', '1');
    }
</script>
<body>
    <div id="errors"></div>
    <table>
        {% for servline in data %}
            <tr>{% for ct, serv, s1 in servline %}
                <td name="alert" id="{{ serv }}.{{ ct }}"
                    style="text-align:center">
                    <a href="{% url 'service_alerts' %}/?service={{ serv }}"
                       target="_blank" style="color:black;text-decoration: none">
                    {% autoescape off %}{{ s1 }}{% endautoescape %}</a>
                    <span style="font-size: small">{{ ct }}</span></td>
                {% endfor %}
            </tr>

        {% endfor %}
    </table>
    <div id="do-act-all" hidden>
        <button style="background-color:#38d6a1;font-weight:bold"
        onclick="actualize_all()">
            Actualize all</button></div>
    <div id="answer"></div>
</body>
</html>
