<%#
Module for providing data from a mobile satellite navigation system ( mobile modems, etc.)
-= Design and Development 2021-2022 =-
Licensed to the public under the Apache License 2.0.
-%>

<%+gpoint/css/style%>

<%+header%>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v6.8.1/css/ol.css"
      type="text/css">
<style type="text/css">
    #marker {
        width: 200px;
        height: 200px;
        background: url("<%=resource%>/icons/gpoint_icons/spiner.gif") no-repeat scroll 0% 0% transparent;
    }
</style>

<h2>
    <div>GPoint: Router Location
        <span class="status" id="stat">◉</span>
    </div>
</h2>
<body>
<div id="map" class="map"></div>
<div style="display: none;">
    <div id="marker" title="Marker"></div>
</div>
<div><a id="address" href=""></a></div>

<div class="cbi-section fade-in" style="">
    <h3><%:Details:%></h3>
    <div>
        <table class="table">
            <tr class="tr">
                <td class="td left" width="33.3%"><%:Longitude:%></td>
                <td class="td left" id="longitude">-</td>
                <td class="td left" width="33.3%"><%:Latitude:%></td>
                <td class="td left" id="latitude">-</td>
                <td class="td left" width="33.3%"><%:Altitude:%></td>
                <td class="td left" id="altitude">-</td>
            </tr>
            <tr class="tr">
                <td class="td left" width="33.3%"><%:Time (UTC):%></td>
                <td class="td left" id="utc">-</td>
                <td class="td left" width="33.3%"><%:Date:%></td>
                <td class="td left" id="date">-</td>
                <td class="td left" width="33.3%"><%:Satellites:%></td>
                <td class="td left" id="nsat">-</td>
            </tr>
            <tr class="tr">
                <td class="td left" width="33.3%"><%:Hdop:%></td>
                <td class="td left" id="hdop">-</td>
                <td class="td left" width="33.3%"><%:Course:%></td>
                <td class="td left" id="cog">-</td>
                <td class="td left" width="33.3%"><%:Speed:%></td>
                <td class="td left" id="spkm">-</td>
            </tr>
        </table>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v6.8.1/build/ol.js"></script>
<%+gpoint/js/js%>
<script type="text/javascript">
    var prev = true; // show geolocation (auto zoom) <%=resource%>/gpoint
    const keys = ["longitude", "latitude", "altitude", "utc", "date", "nsat", "hdop", "cog", "spkm"];

    function cleanTable() {
        for (var key of keys) {
            document.getElementById(key).innerHTML = "-";
        }
    }

    function preview(prev) {
        if (prev) {
            document.getElementById('fmr').click();
            prev = false;
        } else {
            document.getElementById('fmr').click();
            document.getElementById('address').innerHTML = "";
            prev = true;
        }
        return prev
    }


    XHR.poll(4, '<%=build_url("admin/services/gpoint/geopoint")%>', null,
        // x - luci json header, geopoint - payload;
        function (x, geopoint) {
            // GP Data
            if (!geopoint.warning.app[0]) {
                if (geopoint.gp.latitude != '-' && geopoint.gp.longitude != '-') {
                    getAddress(geopoint.gp.latitude, geopoint.gp.longitude);
                    addMarker(geopoint.gp.latitude, geopoint.gp.longitude, icon);
                }
                for (const key of keys) {
                    document.getElementById(key).innerHTML = String.format(geopoint.gp[key]);
                }
                if (prev) {
                    document.getElementById('fmr').click();
                    prev = false;
                }
            } else {
                addSpiner();
                if (!prev) {
                    cleanTable();
                    document.getElementById('fmr').click();
                    document.getElementById('address').innerHTML = "";
                    prev = true;
                }
            }

            if (!geopoint.warning.app[0] && !geopoint.warning.geofence[0]) {
                addCircle(geopoint.geofence);
            }

            var color = "orange";
            var error_status = "";
            if (geopoint.warning.locator[1] === "Data received from locator...") {
                error_status = geopoint.warning.locator[1];
                if (geopoint.warning.app[0]) {
                    error_status = error_status + " (Service: " + geopoint.warning.app[1] + ')';
                }
            } else if (geopoint.warning.app[0]) {
                color = "red";
                error_status = geopoint.warning.app[1];
            } else if (geopoint.warning.gp[0]) {
                color = "orange"
                error_status = geopoint.warning.gp[1]
            } else if (!geopoint.warning.app[0] && !geopoint.warning.gp[0]) {
                color = "greenyellow";
                error_status = geopoint.warning.gp[1];
            } else {
            }

            document.querySelector("#stat").style.color = color;
            document.getElementById("stat").title = error_status;
        });
</script>
<%+footer%>
