506 lines
15 KiB
JavaScript
506 lines
15 KiB
JavaScript
// TODO: Remote-Reload per Socket
|
|
// TODO: Client-Server-Version abgleichen
|
|
// TODO: Modal bei Chrome, dass Audio erst bei interaktion aktiv
|
|
|
|
$(document).ready(function() {
|
|
set_clock();
|
|
});
|
|
|
|
$(window).on("resize", function() {
|
|
resize_text();
|
|
});
|
|
|
|
$('#replay').on('click', function(event) {
|
|
audio.play();
|
|
});
|
|
|
|
/* ############################ */
|
|
/* ######### BUTTONS ########## */
|
|
/* ############################ */
|
|
|
|
var waipAudio = document.getElementById('audio');
|
|
|
|
waipAudio.addEventListener('ended', function(){
|
|
$('.ion-md-pause').toggleClass("ion-md-play-circle");
|
|
});
|
|
|
|
waipAudio.addEventListener("play", function () {
|
|
$('.ion-md-play-circle').toggleClass("ion-md-pause");
|
|
});
|
|
|
|
/* ############################ */
|
|
/* ####### TEXT-RESIZE ######## */
|
|
/* ############################ */
|
|
|
|
// Textgröße dynamisch anpassen, Hintergrundfarbe ggf. anpassen
|
|
function resize_text() {
|
|
// Uhr-Text nur Anpassen wenn sichtbar
|
|
if ($('#waipclock').is(':visible')) {
|
|
textFit(document.getElementsByClassName('tf_clock'), {
|
|
minFontSize: 3,
|
|
maxFontSize: 500
|
|
});
|
|
$("body").css("background-color", "#000");
|
|
};
|
|
// Tableau-Text nur Anpassen wenn sichtbar
|
|
if ($('#waiptableau').is(':visible')) {
|
|
textFit(document.getElementsByClassName('tf_singleline'), {
|
|
minFontSize: 1,
|
|
maxFontSize: 500
|
|
});
|
|
textFit(document.getElementsByClassName('tf_multiline'), {
|
|
detectMultiLine: false
|
|
});
|
|
textFit(document.getElementsByClassName('tf_test'), {
|
|
widthOnly: true,
|
|
alignHoriz: false,
|
|
alignVert: false,
|
|
alignVertWithFlexbox: false
|
|
});
|
|
map.invalidateSize();
|
|
$("body").css("background-color", "#222");
|
|
};
|
|
};
|
|
|
|
|
|
// Text nach bestimmter Laenge, in Abhaengigkeit von Zeichen, umbrechen
|
|
function break_text_15(text){
|
|
var new_text;
|
|
new_text = text.replace(/.{15}(\s+|\-+)+/g, "$&@")
|
|
new_text = new_text.split(/@/);
|
|
new_text= new_text.join("<br>");
|
|
//console.log(new_text);
|
|
return new_text;
|
|
};
|
|
|
|
|
|
function break_text_35(text){
|
|
var new_text;
|
|
new_text = text.replace(/.{50}\S*\s+/g, "$&@").split(/\s+@/);
|
|
new_text= new_text.join("<br>");
|
|
//console.log(new_text);
|
|
return new_text;
|
|
};
|
|
|
|
/* ############################ */
|
|
/* ####### INAKTIVITAET ####### */
|
|
/* ############################ */
|
|
|
|
var timeoutID;
|
|
|
|
// Inactivitaet auswerten
|
|
function setup_inactivcheck() {
|
|
this.addEventListener("mousemove", resetActivTimer, false);
|
|
this.addEventListener("mousedown", resetActivTimer, false);
|
|
this.addEventListener("keypress", resetActivTimer, false);
|
|
this.addEventListener("DOMMouseScroll", resetActivTimer, false);
|
|
this.addEventListener("mousewheel", resetActivTimer, {
|
|
passive: true
|
|
}, false);
|
|
this.addEventListener("touchmove", resetActivTimer, false);
|
|
this.addEventListener("MSPointerMove", resetActivTimer, false);
|
|
start_inactivtimer();
|
|
};
|
|
|
|
setup_inactivcheck();
|
|
|
|
// warte xxxx Millisekunden um dann do_on_Inactive zu starten
|
|
function start_inactivtimer() {
|
|
clearTimeout(timeoutID);
|
|
timeoutID = window.setTimeout(do_on_Inactive, 3000);
|
|
};
|
|
|
|
// bei Inaktivitaet Header/Footer ausblenden
|
|
function do_on_Inactive() {
|
|
// do something
|
|
$(".navbar").fadeOut("slow");
|
|
$(".footer").fadeOut("slow");
|
|
$(".fullheight").css({
|
|
height: 'calc(100vh - 2rem)'
|
|
});
|
|
$("body").css({
|
|
paddingTop: "1rem",
|
|
margin: 0
|
|
});
|
|
resize_text();
|
|
};
|
|
|
|
// bei Activitaet Header/Footer einblenden
|
|
function do_on_Active() {
|
|
start_inactivtimer();
|
|
// do something
|
|
$(".navbar").fadeIn('slow');
|
|
$(".footer").fadeIn('slow');
|
|
$("body").css({
|
|
marginBottom: '60px',
|
|
paddingTop: '5rem',
|
|
paddingBottom: '0'
|
|
});
|
|
$(".fullheight").css({
|
|
height: 'calc(100vh - 60px - 5rem)'
|
|
});
|
|
resize_text();
|
|
};
|
|
|
|
// bei Event (Aktiviaet) alles zuruecksetzen
|
|
function resetActivTimer(e) {
|
|
do_on_Active();
|
|
};
|
|
|
|
/* ############################ */
|
|
/* ####### Progressbar ####### */
|
|
/* ############################ */
|
|
|
|
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 do_progressbar(start, end) {
|
|
today = new Date();
|
|
// restliche Zeit ermitteln
|
|
var current_progress = Math.round(100 / (end.getTime() - start.getTime()) * (end.getTime() - today.getTime()));
|
|
|
|
var diff = Math.abs(end - today);
|
|
var minutesDifference = Math.floor(diff / 1000 / 60);
|
|
diff -= minutesDifference * 1000 * 60;
|
|
var secondsDifference = Math.floor(diff / 1000);
|
|
if (secondsDifference <= 9) {
|
|
secondsDifference = '0' + secondsDifference;
|
|
};
|
|
var minutes = minutesDifference + ':' + secondsDifference;
|
|
// Progressbar anpassen
|
|
$("#hilfsfrist")
|
|
.css("width", current_progress + "%")
|
|
.attr("aria-valuenow", current_progress)
|
|
.text(minutes + " min");
|
|
};
|
|
|
|
/* ########################### */
|
|
/* ######### LEAFLET ######### */
|
|
/* ########################### */
|
|
|
|
// Karte definieren
|
|
var map = L.map('map', {
|
|
zoomControl: false
|
|
}).setView([51.733005, 14.338048], 13);
|
|
|
|
// Layer der Karte
|
|
mapLink = L.tileLayer(
|
|
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);
|
|
|
|
/* ########################### */
|
|
/* ######## SOCKET.IO ######## */
|
|
/* ########################### */
|
|
|
|
// Websocket
|
|
var socket = io.connect();
|
|
|
|
// Wachen-ID bei Connect an Server senden
|
|
socket.on('connect', function() {
|
|
socket.emit('wachen_id', wachen_id);
|
|
$('#waipModal').modal('hide');
|
|
});
|
|
|
|
socket.on('connect_error', function(err) {
|
|
$('#waipModalTitle').html('FEHLER');
|
|
$('#waipModalBody').html('Verbindung zum Server getrennt!');
|
|
$('#waipModal').modal('show');
|
|
});
|
|
|
|
// ID von Server und Client vergleichen, falls ungleich -> Seite neu laden
|
|
socket.on('io.version', function(server_id) {
|
|
// TODO: socket.emit(lade client xxx neu)
|
|
if (client_id != server_id) {
|
|
$('#waipModalTitle').html('ACHTUNG');
|
|
$('#waipModalBody').html('Neue Server-Version. Seite wird in 10 Sekunden neu geladen!');
|
|
if ($('#waipModal').hasClass('in')) {
|
|
$('#waipModal').modal('hide');
|
|
};
|
|
$('#waipModal').modal('show');
|
|
setTimeout(function() {
|
|
location.reload();
|
|
}, 10000);
|
|
};
|
|
});
|
|
|
|
// ggf. Fehler ausgeben
|
|
socket.on('io.error', function(data) {
|
|
console.log('Error:', data);
|
|
});
|
|
|
|
// Sounds stoppen
|
|
socket.on('io.stopaudio', function(data) {
|
|
var audio = document.getElementById('audio');
|
|
audio.pause;
|
|
});
|
|
|
|
// Sounds abspielen
|
|
socket.on('io.playtts', function(data) {
|
|
var audio = document.getElementById('audio');
|
|
audio.src = (data);
|
|
// Audio-Blockade des Browsers erkennen
|
|
var promise = document.querySelector('audio').play();
|
|
if (promise !== undefined) {
|
|
promise.then(function(_) {
|
|
audio.play();
|
|
}).catch(function(error) {
|
|
//$('#waipModalTitle').html('Audio-Fehler');
|
|
//$('#waipModalBody').html('Die automatische Audio-Wiedergabe wird durch Ihren Browser blockiert! Fehlermeldung: ' + error.message);
|
|
//$('#waipModal').modal('show');
|
|
$('#volume').addClass("btn-danger");
|
|
$('.ion-md-volume-high').toggleClass("ion-md-volume-off");
|
|
});
|
|
};
|
|
});
|
|
|
|
// Daten löschen, Uhr anzeigen
|
|
socket.on('io.standby', function(data) {
|
|
// 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('');
|
|
map.setView(new L.LatLng(0, 0), 14);
|
|
// Tableau ausblenden
|
|
$("#waiptableau").addClass("d-none");
|
|
$("#waipclock").removeClass("d-none");
|
|
// Text anpassen
|
|
resize_text();
|
|
});
|
|
|
|
// Einsatzdaten laden, Wachalarm anzeigen
|
|
socket.on('io.neuerEinsatz', function(data) {
|
|
// DEBUG
|
|
//console.log(data);
|
|
// Einsatz-ID speichern
|
|
waip_id = data.id;
|
|
// Hintergrund der Einsatzart zunächst entfernen
|
|
$('#einsatz_art').removeClass(function(index, className) {
|
|
return (className.match(/(^|\s)bg-\S+/g) || []).join(' ');
|
|
});
|
|
// Icon der Einsatzart enfernen
|
|
$('#einsatz_stichwort').removeClass();
|
|
// Rückmeldung ausblenden
|
|
$('#rueckmeldung').addClass("d-none");
|
|
// Art und Stichwort festlegen hinterlegen
|
|
switch (data.einsatzart) {
|
|
case 'Brandeinsatz':
|
|
$('#einsatz_art').addClass("bg-danger");
|
|
$('#einsatz_stichwort').addClass("ion-md-flame");
|
|
$('#rueckmeldung').removeClass("d-none");
|
|
break;
|
|
case 'Hilfeleistungseinsatz':
|
|
$('#einsatz_art').addClass("bg-info");
|
|
$('#einsatz_stichwort').addClass("ion-md-construct");
|
|
$('#rueckmeldung').removeClass("d-none");
|
|
break;
|
|
case 'Rettungseinsatz':
|
|
$('#einsatz_art').addClass("bg-warning");
|
|
$('#einsatz_stichwort').addClass("ion-md-medkit");
|
|
break;
|
|
case 'Krankentransport':
|
|
$('#einsatz_art').addClass("bg-success");
|
|
$('#einsatz_stichwort').addClass("ion-md-medical");
|
|
break;
|
|
default:
|
|
$('#einsatz_art').addClass("bg-secondary");
|
|
$('#einsatz_stichwort').addClass("ion-md-information-circle");
|
|
};
|
|
$('#einsatz_stichwort').html(' ' + data.stichwort);
|
|
// Sondersignal setzen
|
|
$('#sondersignal').removeClass();
|
|
switch (data.sondersignal) {
|
|
case 1:
|
|
$('#sondersignal').addClass('ion-md-notifications');
|
|
break;
|
|
default:
|
|
$('#sondersignal').addClass('ion-md-notifications-off');
|
|
};
|
|
// Ortsdaten zusammenstellen und setzen
|
|
var small_ortsdaten;
|
|
small_ortsdaten = '';
|
|
if (data.objekt) {
|
|
small_ortsdaten = small_ortsdaten + break_text_15(data.objekt) + '<br>';
|
|
};
|
|
if (data.ort) {
|
|
small_ortsdaten = small_ortsdaten + break_text_15(data.ort) + '<br>';
|
|
};
|
|
if (data.ortsteil) {
|
|
small_ortsdaten = small_ortsdaten + break_text_15(data.ortsteil) + '<br>';
|
|
};
|
|
if (data.strasse) {
|
|
small_ortsdaten = small_ortsdaten + break_text_15(data.strasse) + '<br>';
|
|
};
|
|
if (small_ortsdaten.substr(small_ortsdaten.length - 4) == '<br>') {
|
|
small_ortsdaten = small_ortsdaten.slice(0, -4);
|
|
};
|
|
$('#ortsdaten').html(small_ortsdaten);
|
|
// Besonderheiten setzen
|
|
$('#besonderheiten').html(break_text_35(data.besonderheiten));
|
|
// alarmierte Einsatzmittel setzen
|
|
$('#em_alarmiert').empty();
|
|
var data_em_alarmiert = JSON.parse(data.em_alarmiert);
|
|
for (var i in data_em_alarmiert) {
|
|
$('#em_alarmiert').append('<li class="list-group-item d-flex justify-content-between align-items-center">' + data_em_alarmiert[i].name + '</li>');
|
|
};
|
|
// weitere alarmierte Einsatzmittel setzen
|
|
$('#em_weitere').html('');
|
|
var data_em_weitere = JSON.parse(data.em_weitere);
|
|
if (data_em_weitere == null) {
|
|
// TODO: Einzeige vergrößern (-.h-5) wenn keine weiteren Einsatzmittel beteiligt
|
|
} else {
|
|
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 setzen
|
|
map.removeLayer(marker);
|
|
marker = L.marker(new L.LatLng(data.wgs84_x, data.wgs84_y), {
|
|
icon: redIcon
|
|
}).addTo(map);
|
|
map.setView(new L.LatLng(data.wgs84_x, data.wgs84_y), 15);
|
|
// Hilfsfrist setzen
|
|
start_counter(data.zeitstempel, data.ablaufzeit);
|
|
// Uhr ausblenden
|
|
$("#waipclock").addClass("d-none");
|
|
$("#waiptableau").removeClass("d-none");
|
|
// Text anpassen
|
|
resize_text();
|
|
});
|
|
|
|
/* ########################### */
|
|
/* ####### SCREENSAVER ####### */
|
|
/* ########################### */
|
|
|
|
// Uhrzeit und Datum für Bildschirmschoner
|
|
function set_clock() {
|
|
// Wochentage
|
|
var d_names = new Array('Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag');
|
|
// Monate
|
|
var m_names = new Array('Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember');
|
|
// Aktuelle Zeit
|
|
var d = new Date();
|
|
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();
|
|
// 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 und Minute anpassen
|
|
if (curr_min <= 9) {
|
|
curr_min = '0' + curr_min;
|
|
};
|
|
if (curr_hour <= 9) {
|
|
curr_hour = '0' + curr_hour;
|
|
};
|
|
var curr_month = d.getMonth();
|
|
var curr_year = d.getFullYear();
|
|
var element_time = curr_hour + ':' + curr_min;
|
|
var element_day = d_names[curr_day] + ', ' + curr_date + '. ' + m_names[curr_month];
|
|
var element_date_time = curr_date + '.' + curr_month_id + '.' + curr_year + ' - ' + element_time;
|
|
// nur erneuern wenn sich Zeit geändert hat
|
|
if (document.getElementById('time').textContent !== element_time) {
|
|
// Uhrzeit anzeigen
|
|
document.getElementById('time').innerHTML = element_time;
|
|
// Datum (Text) anzeigen
|
|
document.getElementById('day').innerHTML = element_day;
|
|
// Datum anzeigen, sofern sichtbar
|
|
document.getElementById('date-time').innerHTML = element_date_time;
|
|
// Textgröße neu setzen
|
|
resize_text();
|
|
};
|
|
};
|
|
|
|
// Uhrzeit jede Sekunden anpassen
|
|
setInterval(set_clock, 1000);
|
|
|
|
/* ########################### */
|
|
/* ####### Rückmeldung ####### */
|
|
/* ########################### */
|
|
|
|
$('#rueckmeldung').each(function(index) {
|
|
$(this).on("click", function(){
|
|
$('#responseModal').modal('show');
|
|
});
|
|
});
|
|
|
|
$('#send_response').on('click', function() {
|
|
// Rückmeldung sammeln
|
|
var respo = {};
|
|
respo.einsatzkraft = $('#radios_res_ek').prop('checked');
|
|
respo.maschinist = $('#radios_res_ma').prop('checked');
|
|
respo.fuehrungskraft = $('#radios_res_fk').prop('checked');
|
|
respo.atemschutz = $('#cb_res_agt').prop('checked');
|
|
socket.emit('response',waip_id,respo);
|
|
});
|
|
|
|
socket.on('io.response', function(data) {
|
|
// neue Rückmeldungen hinterlegen
|
|
$('#rueckmeldung').empty();
|
|
//{einsatzkraft: "0", maschinist: "0", fuehrungskraft: "0", atemschutz: "0"}
|
|
for (var i in data) {
|
|
var item_class = 'list-group-item flex-fill list-group-item-action tf_singleline';
|
|
switch (data[i]) {
|
|
case '0':
|
|
item_class = item_class + ' text-danger';
|
|
break;
|
|
case '1':
|
|
item_class = item_class + ' text-warning';
|
|
break;
|
|
default:
|
|
item_class = item_class + ' text-success';
|
|
};
|
|
$('#rueckmeldung').append('<a class="' + item_class + '">' + data[i] + ' ' + i + '</a>');
|
|
};
|
|
resize_text();
|
|
});
|