<!doctype html>
<html>
    <head>
        <title>Live</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <script type="text/javascript" src="api.js"></script>
    </head>
    <body>
        <div class="topnav">
            <a href="/" class="title">AhoyDTU</a>
            <a href="javascript:void(0);" class="icon" onclick="topnav()">
                <span></span>
                <span></span>
                <span></span>
            </a>
            <div id="topnav" class="hide"></div>
        </div>
        <div id="wrapper">
            <div id="content">
                <div id="live"></div>
                <p>Every <span id="refresh"></span> seconds the values are updated</p>
            </div>
        </div>
        <div id="footer">
            <div class="left">
                <a href="https://ahoydtu.de" target="_blank">AhoyDTU &copy 2022</a>
                <ul>
                    <li><a href="https://discord.gg/WzhxEY62mB" target="_blank">Discord</a></li>
                    <li><a href="https://github.com/lumapu/ahoy" target="_blank">Github</a></li>
                </ul>
            </div>
            <div class="right">
                <span id="version"></span><br/><br/>
                <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/de" target="_blank" >CC BY-NC-SA 3.0</a>
            </div>
        </div>
        <script type="text/javascript">
            var exeOnce = true;

            function parseSys(obj) {
                if(true == exeOnce)
                    parseVersion(obj);
            }

            function parseIv(obj, root) {
                var ivHtml = [];

                var tDiv = div(["ch-all", "iv"]);
                tDiv.appendChild(span("Total", ["head"]));
                var total = new Array(root.ch0_fld_names.length).fill(0);
                if(obj.length > 1)
                    ivHtml.push(tDiv);

                for(var iv of obj) {
                    main = div(["iv"]);
                    var ch0 = div(["ch-iv"]);
                    var limit = iv["power_limit_read"] + "%";
                    if(limit == "65535%")
                        limit = "n/a";
                    ch0.appendChild(span(iv["name"] + " Limit " + limit + " | last Alarm: " + iv["last_alarm"], ["head"]));

                    for(var j = 0; j < root.ch0_fld_names.length; j++) {
                        var val = Math.round(iv["ch"][0][j] * 100) / 100;
                        if(val > 0) {
                            var sub = div(["subgrp"]);
                            sub.appendChild(span(val + " " + span(root["ch0_fld_units"][j], ["unit"]).innerHTML, ["value"]));
                            sub.appendChild(span(root["ch0_fld_names"][j], ["info"]));
                            ch0.appendChild(sub);

                            switch(j) {
                                case 2:  total[j] += val; break; // P_AC
                                case 6:  total[j] += val; break; // YieldTotal
                                case 7:  total[j] += val; break; // YieldDay
                                case 8:  total[j] += val; break; // P_DC
                                case 10: total[j] += val; break; // Q_AC
                            }
                        }
                    }
                    main.appendChild(ch0);


                    for(var i = 1; i < (iv["channels"] + 1); i++) {
                        var ch = div(["ch"]);
                        ch.appendChild(span(("" == iv["ch_names"][i]) ? ("CHANNEL " + i) : iv["ch_names"][i], ["head"]));

                        for(var j = 0; j < root.fld_names.length; j++) {
                            var val = Math.round(iv["ch"][i][j] * 100) / 100;
                            if(val > 0) {
                                ch.appendChild(span(val + " " + span(root["fld_units"][j], ["unit"]).innerHTML, ["value"]));
                                ch.appendChild(span(root["fld_names"][j], ["info"]));
                            }
                        }
                        main.appendChild(ch);
                    }

                    var ts = div(["ts"]);
                    var ageInfo = "Last received data requested at: ";
                    if(iv["ts_last_success"] > 0) {
                        var date = new Date(iv["ts_last_success"] * 1000);
                        ageInfo += date.toLocaleString('de-DE');
                    }
                    else
                        ageInfo += "nothing received";

                    ts.innerHTML = ageInfo;

                    main.appendChild(ts);
                    ivHtml.push(main);
                }

                // total
                if(obj.length > 1) {
                    for(var j = 0; j < root.ch0_fld_names.length; j++) {
                        var val = total[j];
                        if(val > 0) {
                            var sub = div(["subgrp"]);
                            sub.appendChild(span(val + " " + span(root["ch0_fld_units"][j], ["unit"]).innerHTML, ["value"]));
                            sub.appendChild(span(root["ch0_fld_names"][j], ["info"]));
                            tDiv.appendChild(sub);
                        }
                    }
                }

                document.getElementById("live").replaceChildren(...ivHtml);
            }

            function parse(obj) {
                if(null != obj) {
                    if(true == exeOnce)
                        parseMenu(obj["menu"]);
                    parseSys(obj["system"]);
                    parseIv(obj["inverter"], obj);
                    document.getElementById("refresh").innerHTML = obj["refresh_interval"];
                    if(true == exeOnce) {
                        window.setInterval("getAjax('/api/live', parse)", obj["refresh_interval"] * 1000);
                        exeOnce = false;
                    }
                }
                else
                    document.getElementById("refresh").innerHTML = "n/a";
            }

            getAjax("/api/live", parse);
        </script>
    </body>
</html>