From 32ff9d48c90df834c0899243edd80185919a44c7 Mon Sep 17 00:00:00 2001 From: Robert Richter Date: Sun, 16 Feb 2020 20:01:01 +0100 Subject: [PATCH] update So 16. Feb 20:01:01 CET 2020 --- public/js/client_dbrd.js | 78 +++++++++++++++++++++ public/js/client_rmld.js | 15 ++++- server.js | 1 + server/routing.js | 13 +++- views/dbrd.pug | 15 +++++ views/includes/master_dashboard.pug | 101 ++++++++++++++++++++++++++++ views/tests/test_dashboard.pug | 12 ++++ views/tests/test_rueckmeldung.pug | 5 +- 8 files changed, 234 insertions(+), 6 deletions(-) create mode 100755 public/js/client_dbrd.js create mode 100755 views/dbrd.pug create mode 100755 views/includes/master_dashboard.pug create mode 100755 views/tests/test_dashboard.pug diff --git a/public/js/client_dbrd.js b/public/js/client_dbrd.js new file mode 100755 index 0000000..302e2a8 --- /dev/null +++ b/public/js/client_dbrd.js @@ -0,0 +1,78 @@ +/* ########################### */ +/* ######### LEAFLET ######### */ +/* ########################### */ + +// Karte definieren +var map = L.map('map', { + zoomControl: false + }).setView([51.733005, 14.338048], 13); + + // Layer der Karte + mapLink = L.tileLayer( + 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + //map_tile, { + maxZoom: 18 + }).addTo(map); + + // Icon der Karte zuordnen + var redIcon = new L.Icon({ + iconUrl: '/media/marker-icon-2x-red.png', + shadowUrl: '/media/marker-shadow.png', + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + shadowSize: [41, 41] + }); + + // Icon setzen + var marker = L.marker(new L.LatLng(0, 0), { + icon: redIcon + }).addTo(map); + + // Karte setzen + map.removeLayer(marker); + marker = L.marker(new L.LatLng(einsatzdaten_obj.wgs84_x, einsatzdaten_obj.wgs84_y), { + icon: redIcon + }).addTo(map); + map.setView(new L.LatLng(einsatzdaten_obj.wgs84_x, einsatzdaten_obj.wgs84_y), 13); + + + /* ########################### */ + /* ####### Funktionen ######## */ + /* ########################### */ + + + // Split timestamp into [ Y, M, D, h, m, s ] + var t1 = einsatzdaten_obj.zeitstempel.split(/[- :]/); + var d = new Date(t1[0], t1[1] - 1, t1[2], t1[3], t1[4], t1[5]); + + // Zeitwerte + var curr_day = d.getDay(); + var curr_date = d.getDate(); + var curr_month_id = d.getMonth(); + curr_month_id = curr_month_id + 1; + var curr_year = d.getFullYear(); + var curr_hour = d.getHours(); + var curr_min = d.getMinutes(); + var curr_sek = d.getSeconds(); + // Tag und Monat Anpassen + if ((String(curr_date)).length == 1) + curr_date = '0' + curr_date; + if ((String(curr_month_id)).length == 1) + curr_month_id = '0' + curr_month_id; + // Uhrzeit anpassen + if (curr_min <= 9) { + curr_min = '0' + curr_min; + }; + if (curr_hour <= 9) { + curr_hour = '0' + curr_hour; + }; + if (curr_sek <= 9) { + curr_sek = '0' + curr_sek; + }; + var curr_month = d.getMonth(); + var curr_year = d.getFullYear(); + + // Datum und Uhrzeit setzen + $("#einsatz_datum").text(curr_date + '.' + curr_month_id + '.' + curr_year); + $("#einsatz_uhrzeit").text(curr_hour + ':' + curr_min + ':' + curr_sek); diff --git a/public/js/client_rmld.js b/public/js/client_rmld.js index a217ecd..f784ab2 100755 --- a/public/js/client_rmld.js +++ b/public/js/client_rmld.js @@ -86,4 +86,17 @@ $('#rueckmeldung').each(function(index) { $(this).on("click", function(){ $('#responseModal').modal('show'); }); -}); \ No newline at end of file +}); + +/* ########################### */ +/* ######## SOCKET.IO ######## */ +/* ########################### */ + +// Websocket +var socket = io.connect(); + +// Wachen-ID bei Connect an Server senden +/*socket.on('connect', function() { + socket.emit('dbrd_uuid', wachen_id); + $('#waipModal').modal('hide'); +});*/ \ No newline at end of file diff --git a/server.js b/server.js index 5d776aa..85f1175 100644 --- a/server.js +++ b/server.js @@ -18,6 +18,7 @@ var passport = require('passport'); // Express-Einstellungen app.set('views', path.join(__dirname, 'views')); +app.locals.basedir = app.get('views'); app.set('view engine', 'pug'); app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(express.static(path.join(__dirname, 'public'))); diff --git a/server/routing.js b/server/routing.js index 26eb8f8..c7da55f 100644 --- a/server/routing.js +++ b/server/routing.js @@ -115,8 +115,8 @@ module.exports = function(app, sql, app_cfg, passport, auth, udp) { }); }); - // get /test_tableau - app.get('/test_tableau', function(req, res) { + // get /test_wachalarm + app.get('/test_wachalarm', function(req, res) { res.render('tests/test_wachalarm', { public: app_cfg.public, title: 'Test Wachalarm', @@ -133,6 +133,15 @@ module.exports = function(app, sql, app_cfg, passport, auth, udp) { }); }); + // get /test_dashboard + app.get('/test_dashboard', function(req, res) { + res.render('tests/test_dashboard', { + public: app_cfg.public, + title: 'Test Dashboard', + user: req.user + }); + }); + // get /show_active_user app.get('/adm_show_clients', auth.ensureAdmin, function(req, res) { sql.db_get_active_clients(function(data) { diff --git a/views/dbrd.pug b/views/dbrd.pug new file mode 100755 index 0000000..9412510 --- /dev/null +++ b/views/dbrd.pug @@ -0,0 +1,15 @@ +extends layout + +append head + link(rel='stylesheet', href='/css/leaflet.css') + +block content + //include includes/modal_info + //include includes/modal_rmld + .container-fluid + include includes/master_dashboard + //script. + var einsatzdaten_obj = !{JSON.stringify(einsatzdaten).replace(/<\//g, '<\\/')} + script(src='/socket.io/socket.io.js') + script(src='/js/leaflet.js') + script(src='/js/client_dbrd.js') \ No newline at end of file diff --git a/views/includes/master_dashboard.pug b/views/includes/master_dashboard.pug new file mode 100755 index 0000000..168ef7c --- /dev/null +++ b/views/includes/master_dashboard.pug @@ -0,0 +1,101 @@ +.row.no-gutters + .col-12.d-flex.justify-content-between + p#einsatz_datum.text-muted 01.01.2020 + p#einsatz_uhrzeit.text-muted.text-right 11:22:33 + .col-10 + .align-items-center.font-weight-bold.rounded.bg-light.p-3.mr-2 + .ion-md-apps -Stichwort- + .col-2 + .align-items-center.justify-content-center.rounded.bg-light.text-info.p-3 + .ion-md-apps.text-center + .col-12 + div.border-top.m-3 + .card.mt-2 + .card-body.p-0 + #map.rounded(style={height: '20em'}) + .card-body.p-0 + ul.list-group.list-group-flush + li.list-group-item -Objekt- + li.list-group-item -Ort- + li.list-group-item -Orststeil- + li.list-group-item -Straße Hsnr- + li.list-group-item.text-warning -Besonderheiten- + .col-12 + div.border-top.m-3 + .card.bg-secondary.mt-2 + .card-header.bg-light.p-2 + h5.text-danger.text-center Alarmierte Einsatzmittel + .card-body.p-1 + div.d-flex.flex-wrap.justify-content-between.align-items-center + div.flex-fill.rounded.bg-light.p-2.m-1 + div.d-flex.justify-content-between + + //.col-12 + div.border-top.my-3 + .card.bg-secondary.mt-2 + .card-header.bg-light.p-2 + h5.text-info.font-weight-bold CB FW Cottbus 1 + .card-body.p-1 + div.d-flex.flex-wrap.justify-content-between.align-items-center + div.flex-fill.rounded.bg-light.p-2.m-1 + div.d-flex.justify-content-between + div.pr-2 FL CB 00/00-00 + div.p-2.badge.badge-success 2 + div.flex-fill.rounded.bg-light.p-2.m-1 + div.d-flex.justify-content-between + div.pr-2 FL CB 01/00-00 + div.p-2.badge.badge-warning 3 + div.flex-fill.rounded.bg-light.p-2.m-1 + div.d-flex.justify-content-between + div.pr-2 FL CB T-Dienst + div.p-2.badge.badge-danger 4 + .card.bg-secondary.mt-2 + .card-header.bg-light.p-2 + h5.text-info.font-weight-bold CB FW Madlow + .card-body.p-1 + div.d-flex.flex-wrap.justify-content-between.align-items-center + div.flex-fill.rounded.bg-light.p-2.m-1 + div.d-flex.justify-content-between + div.pr-2 FL CB 12/00-00 + div.p-2.badge.badge-success 2 + div.flex-fill.rounded.bg-light.p-2.m-1 + div.d-flex.justify-content-between + div.pr-2 FL SPN 00/00-00 + div.p-2.badge.badge-info 1 + .card.bg-secondary.mt-2 + .card-header.bg-light.p-2 + h5.text-info.font-weight-bold CB FW Cottbus 3 + .card-body.p-1 + div.d-flex.flex-wrap.justify-content-between.align-items-center + div.flex-fill.rounded.bg-light.p-2.m-1 + div.d-flex.justify-content-between + div.pr-2 KAT CB 00/00-00 + div.p-2.badge.badge-success 2 + //table.table.table-striped + tbody + tr + th + div.d-flex.justify-content-between.align-items-center + div FL CB 00/00-00 + div.badge.badge-success 2 + th + div.d-flex.justify-content-between.align-items-center + div FL CB 12/00-00 + div.badge.badge-warning 3 + tr + th + div.d-flex.justify-content-between.align-items-center + div FL CB T-Dienst + div.badge.badge-danger 4 + th + div.d-flex.justify-content-between.align-items-center + div KAT CB 00/00-00 + div.badge.badge-success 2 + tr + th + div.d-flex.justify-content-between.align-items-center + div FL SPN 00/00-00 + div.badge.badge-info 1 + .col-12 + div.border-top.m-3 + button#rueckmeldung.btn.btn-danger.btn-lg.btn-block.ion-md-paper-plane(type='button') Rückmeldung senden diff --git a/views/tests/test_dashboard.pug b/views/tests/test_dashboard.pug new file mode 100755 index 0000000..f0b3a37 --- /dev/null +++ b/views/tests/test_dashboard.pug @@ -0,0 +1,12 @@ +extends /layout + +append head + link(rel='stylesheet', href='/css/leaflet.css') + +block content + //include includes/modal_response + .container-fluid + include /includes/master_dashboard + script(src='/js/leaflet.js') + script(src='/js/client_rmld.js') + diff --git a/views/tests/test_rueckmeldung.pug b/views/tests/test_rueckmeldung.pug index eb993b7..16fbb46 100755 --- a/views/tests/test_rueckmeldung.pug +++ b/views/tests/test_rueckmeldung.pug @@ -1,13 +1,12 @@ extends layout append head - link(rel='stylesheet', href='/css/ionicons.min.css') link(rel='stylesheet', href='/css/leaflet.css') block content - include includes/modal_response + include includes/modal_rmld .container-fluid - include includes/rueckmeldung + include includes/master_rueckmeldung script(src='/js/leaflet.js') script(src='/js/rueckmeldung_client.js')