update Mi 6. Mai 12:01:01 CEST 2020

This commit is contained in:
Robert Richter 2020-05-06 12:01:01 +02:00
parent d33386ae14
commit 4404d5dc63

View File

@ -9,17 +9,14 @@ $(window).on("resize", function () {
resize_text(); resize_text();
}); });
$('#replay').on('click', function (event) {
audio.play();
});
/* ############################ */ /* ############################ */
/* ######### BUTTONS ########## */ /* ######### BUTTONS ########## */
/* ############################ */ /* ############################ */
var waipAudio = document.getElementById('audio'); var waipAudio = document.getElementById('audio');
waipAudio.addEventListener('ended', function () { waipAudio.addEventListener('ended', function(){
$('.ion-md-pause').toggleClass("ion-md-play-circle"); $('.ion-md-pause').toggleClass("ion-md-play-circle");
}); });
@ -27,11 +24,15 @@ waipAudio.addEventListener("play", function () {
$('.ion-md-play-circle').toggleClass("ion-md-pause"); $('.ion-md-play-circle').toggleClass("ion-md-pause");
}); });
$('#replay').on('click', function (event) {
$('#audio').play();
});
/* ############################ */ /* ############################ */
/* ####### TEXT-RESIZE ######## */ /* ####### TEXT-RESIZE ######## */
/* ############################ */ /* ############################ */
// Textgröße dynamisch anpassen, Hintergrundfarbe ggf. anpassen // Größen dynamisch anpassen, Hintergrundfarbe ggf. anpassen
function resize_text() { function resize_text() {
// Uhr-Text nur Anpassen wenn sichtbar // Uhr-Text nur Anpassen wenn sichtbar
if ($('#waipclock').is(':visible')) { if ($('#waipclock').is(':visible')) {
@ -39,9 +40,9 @@ function resize_text() {
minFontSize: 3, minFontSize: 3,
maxFontSize: 500 maxFontSize: 500
}); });
$("body").css("background-color", "#000"); $('body').css('background-color', '#000');
}; };
// Tableau-Text nur Anpassen wenn sichtbar // Tableau nur Anpassen wenn sichtbar
if ($('#waiptableau').is(':visible')) { if ($('#waiptableau').is(':visible')) {
textFit(document.getElementsByClassName('tf_singleline'), { textFit(document.getElementsByClassName('tf_singleline'), {
minFontSize: 1, minFontSize: 1,
@ -50,18 +51,12 @@ function resize_text() {
textFit(document.getElementsByClassName('tf_multiline'), { textFit(document.getElementsByClassName('tf_multiline'), {
detectMultiLine: false detectMultiLine: false
}); });
textFit(document.getElementsByClassName('tf_test'), { // Karte neu setzen
minFontSize: 1,
maxFontSize: 500,
reProcess: true,
alignVertWithFlexbox: false
});
map.invalidateSize(); map.invalidateSize();
$("body").css("background-color", "#222"); $('body').css('background-color', '#222');
}; };
}; };
// Text nach bestimmter Laenge, in Abhaengigkeit von Zeichen, umbrechen // Text nach bestimmter Laenge, in Abhaengigkeit von Zeichen, umbrechen
function break_text_15(text) { function break_text_15(text) {
var new_text; var new_text;
@ -72,7 +67,6 @@ function break_text_15(text) {
return new_text; return new_text;
}; };
function break_text_35(text) { function break_text_35(text) {
var new_text; var new_text;
new_text = text.replace(/.{50}\S*\s+/g, "$&@").split(/\s+@/); new_text = text.replace(/.{50}\S*\s+/g, "$&@").split(/\s+@/);
@ -112,14 +106,14 @@ function start_inactivtimer() {
// bei Inaktivitaet Header/Footer ausblenden // bei Inaktivitaet Header/Footer ausblenden
function do_on_Inactive() { function do_on_Inactive() {
// do something // do something
$(".navbar").fadeOut("slow"); $('.navbar').fadeOut('slow');
$(".footer").fadeOut("slow"); $('.footer').fadeOut('slow');
$(".fullheight").css({ $('.fullheight').css({
height: 'calc(100vh - 2rem)', height: 'calc(100vh - 2rem)',
cursor: 'none' cursor: 'none'
}); });
$("body").css({ $('body').css({
paddingTop: "1rem", paddingTop: '1rem',
margin: 0 margin: 0
}); });
resize_text(); resize_text();
@ -129,14 +123,14 @@ function do_on_Inactive() {
function do_on_Active() { function do_on_Active() {
start_inactivtimer(); start_inactivtimer();
// do something // do something
$(".navbar").fadeIn('slow'); $('.navbar').fadeIn('slow');
$(".footer").fadeIn('slow'); $('.footer').fadeIn('slow');
$("body").css({ $('body').css({
marginBottom: '60px', marginBottom: '60px',
paddingTop: '5rem', paddingTop: '5rem',
paddingBottom: '0' paddingBottom: '0'
}); });
$(".fullheight").css({ $('.fullheight').css({
height: 'calc(100vh - 60px - 5rem)', height: 'calc(100vh - 60px - 5rem)',
cursor: 'auto' cursor: 'auto'
}); });
@ -182,10 +176,10 @@ function do_progressbar(start, end) {
}; };
var minutes = minutesDifference + ':' + secondsDifference; var minutes = minutesDifference + ':' + secondsDifference;
// Progressbar anpassen // Progressbar anpassen
$("#hilfsfrist") $('#hilfsfrist')
.css("width", current_progress + "%") .css('width', current_progress + '%')
.attr("aria-valuenow", current_progress) .attr('aria-valuenow', current_progress)
.text(minutes + " min"); .text(minutes + ' min');
}; };
/* ########################### */ /* ########################### */
@ -217,6 +211,8 @@ var redIcon = new L.Icon({
var marker = L.marker(new L.LatLng(0, 0), { var marker = L.marker(new L.LatLng(0, 0), {
icon: redIcon icon: redIcon
}).addTo(map); }).addTo(map);
// GeoJSON vordefinieren
var geojson = L.geoJSON().addTo(map); var geojson = L.geoJSON().addTo(map);
/* ########################### */ /* ########################### */
@ -240,7 +236,6 @@ socket.on('connect_error', function (err) {
// ID von Server und Client vergleichen, falls ungleich -> Seite neu laden // ID von Server und Client vergleichen, falls ungleich -> Seite neu laden
socket.on('io.version', function (server_id) { socket.on('io.version', function (server_id) {
// TODO: socket.emit(lade client xxx neu)
if (client_id != server_id) { if (client_id != server_id) {
$('#waipModal').modal('hide'); $('#waipModal').modal('hide');
setTimeout(function () { setTimeout(function () {
@ -261,13 +256,12 @@ socket.on('io.error', function (data) {
// Sounds stoppen // Sounds stoppen
socket.on('io.stopaudio', function (data) { socket.on('io.stopaudio', function (data) {
var audio = document.getElementById('audio'); $('#audio').pause;
audio.pause;
}); });
// Sounds abspielen // Sounds abspielen
socket.on('io.playtts', function (data) { socket.on('io.playtts', function (data) {
var audio = document.getElementById('audio'); var audio = $('#audio');
audio.src = (data); audio.src = (data);
// Audio-Blockade des Browsers erkennen // Audio-Blockade des Browsers erkennen
var promise = document.querySelector('audio').play(); var promise = document.querySelector('audio').play();
@ -275,11 +269,8 @@ socket.on('io.playtts', function (data) {
promise.then(function (_) { promise.then(function (_) {
audio.play(); audio.play();
}).catch(function (error) { }).catch(function (error) {
//$('#waipModalTitle').html('Audio-Fehler'); $('#volume').addClass('btn-danger');
//$('#waipModalBody').html('Die automatische Audio-Wiedergabe wird durch Ihren Browser blockiert! Fehlermeldung: ' + error.message); $('.ion-md-volume-high').toggleClass('ion-md-volume-off');
//$('#waipModal').modal('show');
$('#volume').addClass("btn-danger");
$('.ion-md-volume-high').toggleClass("ion-md-volume-off");
}); });
}; };
}); });
@ -299,10 +290,11 @@ socket.on('io.standby', function (data) {
$('#besonderheiten').html(''); $('#besonderheiten').html('');
$('#em_alarmiert').empty(); $('#em_alarmiert').empty();
$('#em_weitere').html(''); $('#em_weitere').html('');
reset_rmld();
map.setView(new L.LatLng(0, 0), 14); map.setView(new L.LatLng(0, 0), 14);
// Tableau ausblenden // Tareset_responsebleau ausblenden
$("#waiptableau").addClass("d-none"); $('#waiptableau').addClass('d-none');
$("#waipclock").removeClass("d-none"); $('#waipclock').removeClass('d-none');
// Text anpassen // Text anpassen
resize_text(); resize_text();
}); });
@ -322,26 +314,26 @@ socket.on('io.neuerEinsatz', function (data) {
// Art und Stichwort festlegen hinterlegen // Art und Stichwort festlegen hinterlegen
switch (data.einsatzart) { switch (data.einsatzart) {
case 'Brandeinsatz': case 'Brandeinsatz':
$('#einsatz_art').addClass("bg-danger"); $('#einsatz_art').addClass('bg-danger');
$('#einsatz_stichwort').addClass("ion-md-flame"); $('#einsatz_stichwort').addClass('ion-md-flame');
$('#rueckmeldung').removeClass("d-none"); $('#rueckmeldung').removeClass('d-none');
break; break;
case 'Hilfeleistungseinsatz': case 'Hilfeleistungseinsatz':
$('#einsatz_art').addClass("bg-info"); $('#einsatz_art').addClass('bg-info');
$('#einsatz_stichwort').addClass("ion-md-construct"); $('#einsatz_stichwort').addClass('ion-md-construct');
$('#rueckmeldung').removeClass("d-none"); $('#rueckmeldung').removeClass('d-none');
break; break;
case 'Rettungseinsatz': case 'Rettungseinsatz':
$('#einsatz_art').addClass("bg-warning"); $('#einsatz_art').addClass('bg-warning');
$('#einsatz_stichwort').addClass("ion-md-medkit"); $('#einsatz_stichwort').addClass('ion-md-medkit');
break; break;
case 'Krankentransport': case 'Krankentransport':
$('#einsatz_art').addClass("bg-success"); $('#einsatz_art').addClass('bg-success');
$('#einsatz_stichwort').addClass("ion-md-medical"); $('#einsatz_stichwort').addClass('ion-md-medical');
break; break;
default: default:
$('#einsatz_art').addClass("bg-secondary"); $('#einsatz_art').addClass('bg-secondary');
$('#einsatz_stichwort').addClass("ion-md-information-circle"); $('#einsatz_stichwort').addClass('ion-md-information-circle');
}; };
$('#einsatz_stichwort').html(' ' + data.stichwort); $('#einsatz_stichwort').html(' ' + data.stichwort);
// Sondersignal setzen // Sondersignal setzen
@ -385,9 +377,7 @@ socket.on('io.neuerEinsatz', function (data) {
// weitere alarmierte Einsatzmittel setzen // weitere alarmierte Einsatzmittel setzen
$('#em_weitere').html(''); $('#em_weitere').html('');
var data_em_weitere = JSON.parse(data.em_weitere); var data_em_weitere = JSON.parse(data.em_weitere);
if (data_em_weitere == null) { if (!data_em_weitere == null) {
// TODO: Einzeige vergrößern (-.h-5) wenn keine weiteren Einsatzmittel beteiligt
} else {
var tmp; var tmp;
for (var i in data_em_weitere) { for (var i in data_em_weitere) {
if (tmp) { if (tmp) {
@ -398,9 +388,10 @@ socket.on('io.neuerEinsatz', function (data) {
}; };
$('#em_weitere').html(tmp); $('#em_weitere').html(tmp);
}; };
// Karte setzen // Karte leeren
map.removeLayer(marker); map.removeLayer(marker);
map.removeLayer(geojson); map.removeLayer(geojson);
// Karte setzen
if (data.wgs84_x && data.wgs84_y) { if (data.wgs84_x && data.wgs84_y) {
marker = L.marker(new L.LatLng(data.wgs84_x, data.wgs84_y), { marker = L.marker(new L.LatLng(data.wgs84_x, data.wgs84_y), {
icon: redIcon icon: redIcon
@ -412,20 +403,22 @@ socket.on('io.neuerEinsatz', function (data) {
map.fitBounds(geojson.getBounds()); map.fitBounds(geojson.getBounds());
map.setZoom(13); map.setZoom(13);
}; };
// Hilfsfrist setzen // Ablaufzeit setzen
start_counter(data.zeitstempel, data.ablaufzeit); start_counter(data.zeitstempel, data.ablaufzeit);
// alte Rückmeldung entfernen // alte Rückmeldung entfernen
/////////uuid prüfen
//$('#rueckmeldung').addClass("d-none"); //$('#rueckmeldung').addClass("d-none");
// Rueckmeldung leeren // Rueckmeldung leeren
/*$('#pg-ek').empty();
$('#pg-ma').empty(); // TODO: Einzeige vergrößern wenn Felder nicht angezeigt werden
$('#pg-fk').empty();
$('#ek-counter').text(0);
$('#ma-counter').text(0);
$('#fk-counter').text(0);
$('#agt-counter').text(0);*/
// Uhr ausblenden // Uhr ausblenden
$("#waipclock").addClass("d-none"); $("#waipclock").addClass("d-none");
$("#waiptableau").removeClass("d-none"); $("#waiptableau").removeClass("d-none");
@ -433,102 +426,7 @@ socket.on('io.neuerEinsatz', function (data) {
resize_text(); 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);
// Uhrzeit verschieben
$(document).ready(function () {
setTimeout(function () {
// Position neu setzen
var newq = makeNewPosition();
$('.clock_y').css('top', newq[0]);
$('.clock_y').css('left', newq[1]);
// langsam verschieben
animateDiv();
}, 500);
});
// neue Random-Position fuer Uhrzeit ermitteln
function makeNewPosition() {
// Get viewport dimensions
var h = $('.fullheight').height() - $('.clock_y').height();
var w = $('.fullheight').width() - $('.clock_y').width();
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
};
// Verschieben animieren
function animateDiv() {
var newq = makeNewPosition();
var oldq = $('.clock_y').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.clock_y').animate({
top: newq[0],
left: newq[1]
}, speed, function () {
animateDiv();
});
};
// Verschiebe-Geschindigkeit berechnen
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.001;
var speed = Math.ceil(greatest / speedModifier);
return speed;
};
/* ########################### */ /* ########################### */
/* ####### Rückmeldung ####### */ /* ####### Rückmeldung ####### */
@ -550,11 +448,31 @@ $('#send_response').on('click', function () {
socket.emit('response', waip_id, respo); socket.emit('response', waip_id, respo);
});*/ });*/
function reset_rmld() {
/*$('#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);*/
};
/*$('#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);*/
var counter_tmld = []; var counter_tmld = [];
function add_resp_progressbar(p_id, p_type, p_agt, p_start, p_end) {
function add_resp_progressbar(uuid, p_id, p_type, p_agt, p_start, p_end) {
// Split timestamp into [ Y, M, D, h, m, s ] // Split timestamp into [ Y, M, D, h, m, s ]
//var t1 = zeitstempel.split(/[- :]/), //var t1 = zeitstempel.split(/[- :]/),
//t2 = ablaufzeit.split(/[- :]/); //t2 = ablaufzeit.split(/[- :]/);
@ -648,43 +566,157 @@ socket.on('io.response', function (data) {
// Neue Rueckmeldung hinterlegen // Neue Rueckmeldung hinterlegen
data.forEach(function (arrayItem) { data.forEach(function (arrayItem) {
// HTML festlegen // HTML festlegen
var item_content = ''; //var item_content = '';
var item_classname = ''; //var item_classname = '';
var item_type = ''; var item_type = '';
// wenn Einsatzkraft dann:
if (arrayItem.einsatzkraft) { if (arrayItem.einsatzkraft) {
item_content = 'Einsatzkraft'; //item_content = 'Einsatzkraft';
item_classname = 'ek'; //item_classname = 'ek';
item_type = 'ek'; item_type = 'ek';
}; };
// wenn Maschinist dann:
if (arrayItem.maschinist) { if (arrayItem.maschinist) {
item_content = 'Maschinist'; //item_content = 'Maschinist';
item_classname = 'ma'; //item_classname = 'ma';
item_type = 'ma'; item_type = 'ma';
}; };
// wenn Fuehrungskraft dann:
if (arrayItem.fuehrungskraft) { if (arrayItem.fuehrungskraft) {
item_content = 'Führungskraft'; //item_content = 'Führungskraft';
item_classname = 'fk' //item_classname = 'fk'
item_type = 'fk'; item_type = 'fk';
}; };
// wenn AGT dann:
if (arrayItem.agt) { if (arrayItem.agt) {
item_content = item_content + (' (AGT)'); //item_content = item_content + (' (AGT)');
item_classname = item_classname + ('-agt'); //item_classname = item_classname + ('-agt');
}; };
//var item_id = Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100); // Variablen für Anzeige vorbereiten
var pg_waip_uuid = arrayItem.waip_uuid;
var pg_rmld_uuid = arrayItem.rmld_uuid;
var pg_agt = arrayItem.agt;
var pg_start = new Date(arrayItem.set_time);
var pg_end = new Date(arrayItem.arrival_time);
// Progressbar hinterlegen
add_resp_progressbar(pg_waip_uuid, pg_rmld_uuid, item_type, pg_agt, pg_start, pg_end);
recount_rmld(pg_waip_uuid, item_type, pg_agt);
//add_resp_progressbar(arrayItem.rmld_uuid, item_type, arrayItem.agt, new Date(arrayItem.set_time), new Date(arrayItem.arrival_time));
add_resp_progressbar(arrayItem.rmld_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);
};
}); });
resize_text(); resize_text();
}); });
function recount_rmld(pg_waip_uuid, item_type, pg_agt) {
var tmp_count = parseInt($('#' + item_type + '-counter').text());
$('#' + item_type + '-counter').text(tmp_count + 1);
if (pg_agt) {
var tmp_agt = parseInt($('#agt-counter').text());
$('#agt-counter').text(tmp_agt + 1);
};
};
/* ########################### */
/* ####### 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 ($('#time').text() !== element_time) {
// Uhrzeit anzeigen
$('#time').html(element_time);
// Datum (Text) anzeigen
$('#day').html(element_day);
// Datum anzeigen, sofern sichtbar
$('#date-time').html(element_date_time);
// Textgröße neu setzen
resize_text();
};
};
// Uhrzeit jede Sekunden anpassen
setInterval(set_clock, 1000);
// Uhrzeit verschieben
$(document).ready(function () {
setTimeout(function () {
// Position neu setzen
var newq = makeNewPosition();
$('.clock_y').css('top', newq[0]);
$('.clock_y').css('left', newq[1]);
// langsam verschieben
animateDiv();
}, 500);
});
// neue Random-Position fuer Uhrzeit ermitteln
function makeNewPosition() {
// Get viewport dimensions
var h = $('.fullheight').height() - $('.clock_y').height();
var w = $('.fullheight').width() - $('.clock_y').width();
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
};
// Verschieben animieren
function animateDiv() {
var newq = makeNewPosition();
var oldq = $('.clock_y').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.clock_y').animate({
top: newq[0],
left: newq[1]
}, speed, function () {
animateDiv();
});
};
// Verschiebe-Geschwindigkeit berechnen
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.001;
var speed = Math.ceil(greatest / speedModifier);
return speed;
};