From 745d68c4f13daee4b27b3f36349cb11d204228e2 Mon Sep 17 00:00:00 2001 From: Robert Richter Date: Fri, 3 Jul 2020 15:01:01 +0200 Subject: [PATCH] update Fr 3. Jul 15:01:01 CEST 2020 --- public/js/client_dbrd.js | 382 +++++----------------------- views/includes/master_dashboard.pug | 8 +- 2 files changed, 62 insertions(+), 328 deletions(-) diff --git a/public/js/client_dbrd.js b/public/js/client_dbrd.js index 410a51a..546f158 100755 --- a/public/js/client_dbrd.js +++ b/public/js/client_dbrd.js @@ -1,6 +1,4 @@ - - - /* ########################### */ +/* ########################### */ /* ######### LEAFLET ######### */ /* ########################### */ @@ -41,6 +39,22 @@ var geojson = L.geoJSON().addTo(map); var counter_rmld = []; +var counter_ID = 0; + +function start_counter(zeitstempel, ablaufzeit) { + // Split timestamp into [ Y, M, D, h, m, s ] + var t1 = zeitstempel.split(/[- :]/), + t2 = ablaufzeit.split(/[- :]/); + + var start = new Date(t1[0], t1[1] - 1, t1[2], t1[3], t1[4], t1[5]), + end = new Date(t2[0], t2[1] - 1, t2[2], t2[3], t2[4], t2[5]); + + clearInterval(counter_ID); + counter_ID = setInterval(function () { + do_progressbar(start, end); + }, 1000); +}; + function reset_rmld(p_uuid) { var bar_uuid = 'bar-' + p_uuid; $('#pg-ek').children().each(function (i) { @@ -58,13 +72,6 @@ function reset_rmld(p_uuid) { $(this).remove(); }; }); - /*$('#pg-ek').empty(); - $('#pg-ma').empty(); - $('#pg-fk').empty(); - $('#ek-counter').text(0); - $('#ma-counter').text(0); - $('#fk-counter').text(0); - $('#agt-counter').text(0);*/ }; function add_resp_progressbar(p_uuid, p_id, p_type, p_agt, p_start, p_end) { @@ -127,6 +134,7 @@ function do_rmld_bar(p_id, start, end) { .attr('aria-valuenow', 100) .addClass('ion-md-checkmark-circle'); $('#pg-text-' + p_id).text(''); + // FIXME Counter_Id not defined clearInterval(counter_ID[p_id]); } else { $('#pg-bar-' + p_id) @@ -191,158 +199,28 @@ function recount_rmld(p_uuid) { /* ########################### */ // DOM element where the Timeline will be attached - //var container = document.getElementById('visualization'); - // Create a DataSet (allows two way data-binding) - var names = ["CB FW Cottbus 1", "CB FW Madlow", "Lee", "Grant"]; - var groupCount = 2; - //var groups = new vis.DataSet(); - //for (var g = 0; g < groupCount; g++) { - // groups.add({ id: g, content: names[g] }); - //}; + var container = document.getElementById('visualization'); + var items = new vis.DataSet(); + var groups = new vis.DataSet(); - var date = new Date(); - date.setMinutes(date.getMinutes() - 0,1 ); - var start = new Date(date); - date.setMinutes(date.getMinutes() +4,9 ); - var end = new Date(date); - - var date2 = new Date(); - var start2 = new Date(date2.setMinutes(date2.getMinutes() - 1)); - var end2 = new Date(date2.setMinutes(date2.getMinutes() + 9 )); - - var date3 = new Date(); - var start3 = new Date(date3.setMinutes(date3.getMinutes() - 1,5)); - var end3 = new Date(date3.setMinutes(date3.getMinutes() + 4,5 )); - - var date4 = new Date(); - var start4 = new Date(date4.setMinutes(date4.getMinutes() + 0,8 )); - var end4 = new Date(date4.setMinutes(date4.getMinutes() + 10,8 )); - - var date5 = new Date(); - var start5 = new Date(date5.setMinutes(date5.getMinutes() - 0,2)); - var end5 = new Date(date5.setMinutes(date5.getMinutes() + 1,8 )); - - var date6 = new Date(); - var start6 = new Date(date6.setMinutes(date6.getMinutes() - 0,1)); - var end6 = new Date(date6.setMinutes(date6.getMinutes() + 15,1 )); - - var date7 = new Date(); - var start7 = new Date(date7.setMinutes(date7.getMinutes() - 0,1)); - var end7 = new Date(date7.setMinutes(date7.getMinutes() + 15,1 )); - -var arr_resp = [ - { - "resp_uuid": "102bfe08-e414-40de-ae54-a00d1238dd71", - "waip_uuid": "102bfe08-e414-40de-ae54-a00d9378dd71", - "einsatzkraft": true, - "maschinist": false, - "fuehrungskraft": false, - "agt": false, - "set_time": start, - "arrival_time": end, - "wache_id": "117", - "wache_name": "LDS FW Pretschen" + // Configuration for the Timeline + var customDate = new Date(); + var alert_start = new Date(customDate.setMinutes(customDate.getMinutes() - 2)); + var timeline_end = new Date(customDate.setMinutes(customDate.getMinutes() + 13)); + var options = { + rollingMode: { + follow: true, + offset: 0.25 }, - { - "resp_uuid": "102bfe08-e414-40de-ae54-a00ds238dd71", - "waip_uuid": "102bfe08-e414-40de-ae54-a00d9378dd71", - "einsatzkraft": false, - "maschinist": true, - "fuehrungskraft": false, - "agt": false, - "set_time": start2, - "arrival_time": end2, - "wache_id": "568", - "wache_name": "SPN FW Döbern" - }, - { - "resp_uuid": "102bfe08-e414-40de-ae54-a00s1238fd71", - "waip_uuid": "102bfe08-e414-40de-ae54-a00d9378dd71", - "einsatzkraft": true, - "maschinist": false, - "fuehrungskraft": false, - "agt": true, - "set_time": start3, - "arrival_time": end3, - "wache_id": "253", - "wache_name": "EE FW Rehfeld" - }, - { - "resp_uuid": "102bfec8-e414-40de-ae54-a00d1238dd71", - "waip_uuid": "102bfe08-e414-40de-ae54-a00d9378dd71", - "einsatzkraft": false, - "maschinist": false, - "fuehrungskraft": true, - "agt": true, - "set_time": start4, - "arrival_time": end4, - "wache_id": "252", - "wache_name": "EE FW Kölsa" - }, - { - "resp_uuid": "10wbfe08-e414-40de-ae54-a00d1238dd71", - "waip_uuid": "102bfe08-e414-40de-ae54-a00d9378dd71", - "einsatzkraft": false, - "maschinist": false, - "fuehrungskraft": true, - "agt": false, - "set_time": start5, - "arrival_time": end5, - "wache_id": "252", - "wache_name": "EE FW Kölsa" - }, - { - "resp_uuid": "102bfe08-e414-4xde-ae54-a00d1238dd71", - "waip_uuid": "102bfe08-e414-40de-ae54-a00d9378dd71", - "einsatzkraft": false, - "maschinist": true, - "fuehrungskraft": false, - "agt": true, - "set_time": start6, - "arrival_time": end6, - "wache_id": "568", - "wache_name": "SPN FW Döbern" - }, - { - "resp_uuid": "102bce08-e414-40de-ae54-a00d1238dd71", - "waip_uuid": "102bfe08-e414-40de-ae54-a00d9378dd71", - "einsatzkraft": false, - "maschinist": true, - "fuehrungskraft": false, - "agt": true, - "set_time": start7, - "arrival_time": end7, - "wache_id": "568", - "wache_name": "SPN FW Döbern" - } - ]; + start: alert_start, + end: timeline_end + }; - - - - - var item5 = document.createElement('div'); - item5.className = 'ion-md-star'; - item5.innerHTML = ' Klaus (AGT)'; - - var item2 = document.createElement('div'); - item2.className = 'ion-md-star'; - item2.innerHTML = ' Günter (AGT)'; - - var items = new vis.DataSet([ - /* {id: 1, group: 0, className: 'ma', content: 'Hans', start: start, end: end}, - {id: 2, group: 0, className: 'fk-agt', content: item2, start: start2, end: end2}, - {id: 3, group: 1, className: 'ek', content: 'Rudi', start: start3, end: end3}, - {id: 4, group: 1, className: 'ek-agt', content: item5, start: start4, end: end4}, - {id: 5, group: 1, className: 'ma', content: 'Jürgen', start: start5, end: end5}, - {id: 6, group: 1, className: 'ek', content: 'Florian', start: start6, end: end6}, - */]); - - - - - - /* ########################### */ + // Create a Timeline + var timeline = new vis.Timeline(container, items, options); + timeline.setGroups(groups); + +/* ########################### */ /* ######## SOCKET.IO ######## */ /* ########################### */ @@ -382,10 +260,8 @@ socket.on('io.error', function (data) { console.log('Error:', data); }); - // Daten löschen, Uhr anzeigen socket.on('io.deleted', function (data) { - console.log('del') // Einsatz nicht mehr vorhanden $('#waipModal').modal('hide'); @@ -398,26 +274,6 @@ socket.on('io.deleted', function (data) { window.location.href = window.location.origin; }, 60000); }, 1000); - // Einsatz-ID auf 0 setzen - //waip_id = null; - // TODO: Wenn vorhanden, hier #hilfsfrist zurücksetzen - /*$('#einsatz_art').removeClass(function (index, className) { - return (className.match(/(^|\s)bg-\S+/g) || []).join(' '); - }); - $('#einsatz_stichwort').removeClass(); - $('#einsatz_stichwort').html(''); - $('#sondersignal').removeClass(); - $('#ortsdaten').html(''); - $('#besonderheiten').html(''); - $('#em_alarmiert').empty(); - $('#em_weitere').html(''); - reset_rmld(); - map.setView(new L.LatLng(0, 0), 14); - // Tareset_responsebleau ausblenden - $('#waiptableau').addClass('d-none'); - $('#waipclock').removeClass('d-none'); - // Text anpassen - resize_text();*/ }); // Einsatzdaten laden, Wachalarm anzeigen @@ -426,6 +282,10 @@ socket.on('io.Einsatz', function (data) { console.log(data); // Einsatz-ID speichern waip_id = data.id; + // DBRD-ID und Zeit setzten + $('#dbrd_id').html(' ' + data.uuid); + $('#einsatz_datum').html(data.zeitstempel); + // Hintergrund der Einsatzart zunächst entfernen $('#einsatz_art').removeClass(function (index, className) { return (className.match(/(^|\s)bg-\S+/g) || []).join(' '); @@ -484,7 +344,6 @@ socket.on('io.Einsatz', function (data) { $('#einsatzort_list').append('
  • ' + data.besonderheiten+ '
    • '); }; // Einsatzmittel-Tabelle - console.log(data.einsatzmittel); for (var i in data.einsatzmittel) { var table_em = document.getElementById('table_einsatzmittel'); var wache_vorhanden = false; @@ -494,7 +353,6 @@ socket.on('io.Einsatz', function (data) { if (row.cells[0].innerHTML == data.einsatzmittel[i].wachenname) { wache_vorhanden = true; wache_zeile = j; - console.log(wache_vorhanden); }; }; if (wache_vorhanden) { @@ -512,42 +370,8 @@ socket.on('io.Einsatz', function (data) { var newText2 = document.createTextNode(data.einsatzmittel[i].einsatzmittel); newCell2.appendChild(newText2); }; - - - - - - - - - - - }; - - // alarmierte Einsatzmittel setzen - //$('#em_alarmiert').empty(); - //var data_em_alarmiert = JSON.parse(data.em_alarmiert); - //for (var i in data_em_alarmiert) { - //var tmp = data_em_alarmiert[i].name.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-'); - //$('#em_alarmiert').append('
    '); - //$('#cn_' + tmp).append('
    ' + data_em_alarmiert[i].name + '
    '); - //}; - // weitere alarmierte Einsatzmittel setzen - /*$('#em_weitere').html(''); - var data_em_weitere = JSON.parse(data.em_weitere); - if (!data_em_weitere == null) { - var tmp; - for (var i in data_em_weitere) { - if (tmp) { - tmp = tmp + ', ' + data_em_weitere[i].name; - } else { - tmp = data_em_weitere[i].name; - }; - }; - $('#em_weitere').html(tmp); - };*/ // Karte leeren map.removeLayer(marker); map.removeLayer(geojson); @@ -563,75 +387,28 @@ socket.on('io.Einsatz', function (data) { map.fitBounds(geojson.getBounds()); map.setZoom(13); }; - // Ablaufzeit setzen - /*start_counter(data.zeitstempel, data.ablaufzeit); - // alte Rückmeldung entfernen - reset_rmld(data.uuid); - recount_rmld(data.uuid); - // TODO: Einzeige vergrößern wenn Felder nicht angezeigt werden - // Uhr ausblenden - $('#waipclock').addClass('d-none'); - $('#waiptableau').removeClass('d-none'); - // Text anpassen - resize_text();*/ + // Marker in Timeline setzen + var markerText = 'Alarmierung'; + var alarm_zeit = 'alarm_zeit'; + + + timeline.addCustomTime( + data.zeitstempel, + alarm_zeit + ); + timeline.setCustomTimeMarker(markerText, alarm_zeit, false); + + // Configuration for the Timeline + //var options2 = {}; + // Create a Timeline + //var timeline2 = new vis.Timeline(container2, items2, options2); + + // TODO Ablaufzeit setzen }); - - -var container = document.getElementById('visualization'); -// Create a DataSet (allows two way data-binding) -var names = ["CB FW Cottbus 1", "CB FW Madlow", "Lee", "Grant"]; -var groupCount = 2; -var groups = new vis.DataSet(); - - -var markerText = 'Alarmierung'; -var id2 = "id2"; -var customDate = new Date(); -var alert_start = new Date(customDate.setMinutes(customDate.getMinutes() - 2)); -var timeline_end = new Date(customDate.setMinutes(customDate.getMinutes() + 13)); - - - - -// Configuration for the Timeline -var options = { - rollingMode: { - follow: true, - offset: 0.25 - }, - start: alert_start, - end: timeline_end -}; -// Create a Timeline -var timeline = new vis.Timeline(container, items, options); -timeline.setGroups(groups); -// DOM element where the Timeline will be attached -var container2 = document.getElementById('visualization2'); -// Create a DataSet (allows two way data-binding) -var items2 = new vis.DataSet([ - -]); - -timeline.addCustomTime( - alert_start, - id2 -); -timeline.setCustomTimeMarker(markerText, id2, false); - -// Configuration for the Timeline -//var options2 = {}; -// Create a Timeline -//var timeline2 = new vis.Timeline(container2, items2, options2); - - - - - - socket.on('io.new_rmld', function (data) { // DEBUG - console.log('rmld'+data); + console.log(data); // FIXME Änderung des Funktions-Typ berücksichtigen // Neue Rueckmeldung hinterlegen data.forEach(function (arrayItem) { @@ -665,8 +442,6 @@ socket.on('io.new_rmld', function (data) { }; // Variablen für Anzeige vorbereiten var pg_waip_uuid = arrayItem.waip_uuid; - console.log(arrayItem.waip_uuid); - console.log(pg_waip_uuid); var pg_rmld_uuid = arrayItem.rmld_uuid; var pg_start = new Date(arrayItem.set_time); var pg_end = new Date(arrayItem.arrival_time); @@ -687,43 +462,4 @@ socket.on('io.new_rmld', function (data) { recount_rmld(pg_waip_uuid); }); - - - // Text anpassen - //resize_text(); }); - -// TODO Socket.on io.deleted - -/*arr_resp.forEach(function (arrayItem) { - //var x = arrayItem.prop1 + 2; - //console.log(x); - -if (arrayItem.einsatzkraft){ - -}; -if (arrayItem.maschinist){ - -item_type = 'ma'; -}; -if (arrayItem.fuehrungskraft){ - -item_type = 'fk'; -}; - -//var item_id = Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100); - - - add_resp_progressbar(arrayItem.resp_uuid, item_type, arrayItem.agt, new Date(arrayItem.set_time), new Date(arrayItem.arrival_time)); - - var tmp_count = parseInt( $( '#'+item_type+'-counter' ).text() ); - $( '#'+item_type+'-counter' ).text(tmp_count + 1 ); - - if (arrayItem.agt){ - var tmp_agt = parseInt( $( '#agt-counter' ).text() ); - $( '#agt-counter' ).text(tmp_agt + 1 ); - }; - -}); - -console.log(items.get());*/ \ No newline at end of file diff --git a/views/includes/master_dashboard.pug b/views/includes/master_dashboard.pug index bb42f6d..2bc0989 100755 --- a/views/includes/master_dashboard.pug +++ b/views/includes/master_dashboard.pug @@ -57,8 +57,8 @@ style(type='text/css'). .col-4 .row.no-gutters .col-12.d-flex.justify-content-start - #einsatz_datum.text-muted Einsatznummer: - #einsatz_uhrzeit.text-muted.text-right   420123456 + .text-muted Dashboard-ID: + #dbrd_id.text-muted.text-right   2345 .col-10.mt-2 #einsatz_art.align-items-center.font-weight-bold.rounded.bg-secondary.p-3.mr-2 #einsatz_stichwort.ion-md-apps -Stichwort- @@ -152,9 +152,7 @@ style(type='text/css'). .col-8 .row.no-gutters .col-12.d-flex.justify-content-end - #einsatz_datum.text-muted 01.01.2020 - #einsatz_datum.text-muted  -  - #einsatz_uhrzeit.text-muted.text-right 11:22:33 + #einsatz_datum.text-muted 01.01.2020 - 11:22:33 .col-12 //.card.bg-dark.mt-2 .card-header.bg-secondary.p-2