(c)
Informatikbüro Daniel Schick
diff --git a/AIS/bsmd.AIS2Service/style.css b/AIS/bsmd.AIS2Service/style.css
index 6aa16f65..4dd3c01f 100644
--- a/AIS/bsmd.AIS2Service/style.css
+++ b/AIS/bsmd.AIS2Service/style.css
@@ -6,127 +6,46 @@
body{
font-family: Helvetica;
-webkit-font-smoothing: antialiased;
- background: rgba( 71, 147, 227, 1);
-}
-h2{
- text-align: center;
- font-size: 18px;
- text-transform: uppercase;
- letter-spacing: 1px;
- color: white;
- padding: 30px 0;
}
-/* Table Styles */
-
-.table-wrapper{
- margin: 10px 70px 70px;
- box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
-}
-
-.fl-table {
- border-radius: 5px;
- font-size: 12px;
- font-weight: normal;
- border: none;
+.styled-table {
border-collapse: collapse;
- width: 100%;
- max-width: 100%;
- white-space: nowrap;
- background-color: white;
+ margin: 25px 0;
+ font-size: 0.9em;
+ font-family: sans-serif;
+ min-width: 400px;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
-.fl-table td, .fl-table th {
- text-align: center;
- padding: 8px;
-}
-
-.fl-table td {
- border-right: 1px solid #f8f8f8;
- font-size: 12px;
-}
-
-.fl-table thead th {
+.styled-table thead tr {
+ background-color: #009879;
color: #ffffff;
- background: #4FC3A1;
+ text-align: left;
}
-
-.fl-table thead th:nth-child(odd) {
- color: #ffffff;
- background: #324960;
+.styled-table th,
+.styled-table td {
+ padding: 12px 15px;
}
-.fl-table tr:nth-child(even) {
- background: #F8F8F8;
+.styled-table tbody tr {
+ border-bottom: 1px solid #dddddd;
}
-/* Responsive */
-
-@media (max-width: 767px) {
- .fl-table {
- display: block;
- width: 100%;
- }
- .table-wrapper:before{
- content: "Scroll horizontally >";
- display: block;
- text-align: right;
- font-size: 11px;
- color: white;
- padding: 0 0 10px;
- }
- .fl-table thead, .fl-table tbody, .fl-table thead th {
- display: block;
- }
- .fl-table thead th:last-child{
- border-bottom: none;
- }
- .fl-table thead {
- float: left;
- }
- .fl-table tbody {
- width: auto;
- position: relative;
- overflow-x: auto;
- }
- .fl-table td, .fl-table th {
- padding: 20px .625em .625em .625em;
- height: 60px;
- vertical-align: middle;
- box-sizing: border-box;
- overflow-x: hidden;
- overflow-y: auto;
- width: 120px;
- font-size: 13px;
- text-overflow: ellipsis;
- }
- .fl-table thead th {
- text-align: left;
- border-bottom: 1px solid #f7f7f9;
- }
- .fl-table tbody tr {
- display: table-cell;
- }
- .fl-table tbody tr:nth-child(odd) {
- background: none;
- }
- .fl-table tr:nth-child(even) {
- background: transparent;
- }
- .fl-table tr td:nth-child(odd) {
- background: #F8F8F8;
- border-right: 1px solid #E6E4E4;
- }
- .fl-table tr td:nth-child(even) {
- border-right: 1px solid #E6E4E4;
- }
- .fl-table tbody td {
- display: block;
- text-align: center;
- }
+.styled-table tbody tr:nth-of-type(even) {
+ background-color: #f3f3f3;
}
+.styled-table tbody tr:last-of-type {
+ border-bottom: 2px solid #009879;
+}
+
+.styled-table tbody tr.active-row {
+ font-weight: bold;
+ color: #009879;
+}
+
+
#bottomcenter {
position: fixed;
left: 50%;
diff --git a/AIS/bsmd.AIS2Service/zonen.js b/AIS/bsmd.AIS2Service/zonen.js
index 2320feb3..af32799e 100644
--- a/AIS/bsmd.AIS2Service/zonen.js
+++ b/AIS/bsmd.AIS2Service/zonen.js
@@ -3,72 +3,160 @@
/* startup, load groups from database */
-document.addEventListener('DOMContentLoaded', function () {
- let table = new DataTable('#aisTable', {
- "ajax" : {
- "url" : "http://192.168.2.25:9050/api/ais",
- "dataSrc" : "",
- "type" : "GET"
- },
- columns: [
- { data: 'MMSI' },
- { data: 'Name' },
- { data: 'LastUpdate' },
- { data: 'Latitude' },
- { data: 'Longitude' },
- { data: 'IMO' },
- { data: 'IsClassB' }
- ]
- } );
+var groupIds = [];
+var groupZones = [];
- setInterval( function () {
- table.ajax.reload( null, false ); // user paging is not reset on reload
- }, 30000 );
+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
+ }
+
+ const colCount = row.childNodes.length;
+ row.childNodes[0].innerHTML = data[i].Name;
+ // TODO: incoming/outgoing symbol
+ 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;
+ }
+
+ // TODO: remove rows (after an interval) that are not in the result set any more
+}
function update() {
- fetch('http://192.168.2.25:9050/api/ais')
+
+ 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) {
- updateData(data);
+ createAreasFromData(data);
})
.catch(function (err) {
console.log('error: ' + err);
});
- function updateData(data) {
- var table = document.getElementById('aisTable');
- for (var i = 0; i < data.length; i++) {
- let row_id = "row_" + 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);
- row.innerHTML = `
` + data[i].MMSI +
- ` | | ` +
- `
| ` +
- `
| ` +
- `
| ` +
- `
| ` +
- `
` + data[i].IsClassB + ` | `;
- table.appendChild(row);
+ 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);
}
- // update existing row
- var td = document.getElementById("name_" + data[i].MMSI);
- td.innerHTML = data[i].Name;
- td = document.getElementById("timestamp_" + data[i].MMSI);
- td.innerHTML = data[i].LastUpdate;
- td = document.getElementById("lat_" + data[i].MMSI);
- td.innerHTML = data[i].Latitude;
- td = document.getElementById("lon_" + data[i].MMSI);
- td.innerHTML = data[i].Longitude;
- td = document.getElementById("imo_" + data[i].MMSI);
- td.innerHTML = data[i].IMO;
+ 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);
+
+ aTable.appendChild(document.createElement('tbody'));
+ aDiv.appendChild(aTable);
+ aDiv.appendChild(document.createElement('hr'));
}
+
+ setInterval(function () { update(); }, 15000);
}
+
}
\ No newline at end of file