git_bsmd/AIS/bsmd.AIS2Service/zonen.js

/* startup, load groups from database */

var groupIds = [];
var groupZones = [];

async function loadAlarms(groupId)
{
    let data;
    try {
        const res = await fetch('http://localhost:9050/api/slr?id=' + groupId);
        data = await res.json();
        updateData(data, groupId);
    }
    catch(error) {
        console.error(error);
    }
}

function updateData(data, groupId) {

    var table = document.getElementById('table-' + groupId);

    for (var i = 0; i < data.length; i++) {

        let row_id = "row_" + groupId + "_" + data[i].MMSI;
        row = document.getElementById(row_id);
        if(row == null) { // not found, create new row
            row = document.createElement('tr');
            row.setAttribute("id", row_id);
            // add leading cells
            var td1 = document.createElement('td');
            //td1.innerHTML = data[i].Name;
            row.appendChild(td1);
            var td2 = document.createElement('td');

            row.appendChild(td2);
            var td3 = document.createElement('td');
            // td3.innerHTML = data[i].IMO;
            row.appendChild(td3);
            // create dummy cells for each zone
            for(var j = 0; j < groupZones[groupId].length; j++) {
                var td = document.createElement('td');
                td.id = "cell_" + groupId + "_" + groupZones[groupId][j] + "_" + data[i].MMSI;
                row.appendChild(td);
            }
            // add trailing cells
            var td4 = document.createElement('td');
            //td4.innerHTML = data[i].NavStatus;
            row.appendChild(td4);
            var td5 = document.createElement('td');
            //td5.innerHTML = data[i].MMSI;
            row.appendChild(td5);
            var td6 = document.createElement('td');
            //td6.innerHTML = data[i].Destination;
            row.appendChild(td6);

            table.childNodes[1].appendChild(row); // append row to tbody subelement
        }
        row.setAttribute("isActive", "true");
        const colCount = row.childNodes.length;
        row.childNodes[0].innerHTML = data[i].Name;
        if(data[i].VoyageDirection == 0) row.childNodes[1].innerHTML = '<img src="img/bullet_square_yellow.png" />';
        if(data[i].VoyageDirection == 1) row.childNodes[1].innerHTML = '<img src="img/arrow_down_red.png" />';
        if(data[i].VoyageDirection == 2) row.childNodes[1].innerHTML = '<img src="img/arrow_up_green.png" />';
        if(data[i].VoyageDirection == 3) row.childNodes[1].innerHTML = '<img src="img/clock.png" />';
        row.childNodes[2].innerHTML = data[i].IMO;

        // find alarm cell and set value
        let cellId = "cell_" + groupId + "_" + data[i].MonitorZoneId + "_" + data[i].MMSI;
        var cell = document.getElementById(cellId);
        if(cell != null) {
            const timestamp = Date.parse(data[i].Timestamp_First);
            const d = new Date(timestamp);
            cell.innerHTML = ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2) + " " + d.getDate() + "." + (d.getMonth() + 1) + "." + ("" + d.getFullYear()).slice(-2);
        }

        row.childNodes[colCount - 3].innerHTML = data[i].NavStatus;
        row.childNodes[colCount - 2].innerHTML = data[i].MMSI;
        row.childNodes[colCount - 1].innerHTML = data[i].Destination;
    }

    // array in-place removal taking place
    var i = table.childNodes[1].rows.length;
    while (i--) {
        row = table.childNodes[1].rows[i];
        if(row["isActive"] !== "true") { 
            table.childNodes[1].rows.remove(row);
        } 
    }

}

function update() {

    for(var i = 0; i < groupIds.length; i++)
    {
        loadAlarms(groupIds[i]);
    }
}

function createAreas()
{
    fetch('http://localhost:9050/api/zones')
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            createAreasFromData(data);
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });

    function createAreasFromData(data)
    {
        var root_div = document.getElementById('root-div');
        for (var i = 0; i < data.length; i++) {
            groupIds.push(data[i].Id);
            groupZones[data[i].Id] = [];
            var aDiv = document.createElement('div');
            aDiv.className = '';
            aDiv.id = 'group-' + data[i].Id;
            aDiv.innerHTML = data[i].Name;
            root_div.appendChild(aDiv);

            // create table header with zones
            var aTable = document.createElement('table');
            aTable.id = 'table-' + data[i].Id;
            aTable.className = "styled-table";
            var thead = document.createElement('thead');
            aTable.appendChild(thead);
            var tr = document.createElement('tr');
            thead.appendChild(tr);
            var th1 = document.createElement('th');
            th1.innerHTML='Name';
            tr.appendChild(th1);
            var th2 = document.createElement('th');
            th2.innerHTML='E/A';
            tr.appendChild(th2);
            var th3 = document.createElement('th');
            th3.innerHTML='IMO';
            tr.appendChild(th3);

            for(var j = 0; j < data[i].Zones.length; j++) {
                groupZones[data[i].Id].push(data[i].Zones[j].Id);
                var aTH = document.createElement('th');
                aTH.id = 'zone-' + data[i].Zones[j].Id;
                aTH.innerHTML = data[i].Zones[j].Name;
                tr.appendChild(aTH);
            }

            var th4 = document.createElement('th');
            th4.innerHTML='Nav. status';
            tr.appendChild(th4);
            var th5 = document.createElement('th');
            th5.innerHTML='MMSI';
            tr.appendChild(th5);
            var th6 = document.createElement('th');
            th6.innerHTML='Destination';
            tr.appendChild(th6);

            tr.setAttribute("isActive", "true"); // set marker so it won't get deleted later

            aTable.appendChild(document.createElement('tbody'));
            aDiv.appendChild(aTable);
            aDiv.appendChild(document.createElement('hr'));
        }

        setInterval(function () { update(); }, 15000);
    }

}