edv/TvAPP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1

Browse Source
This commit is contained in:
m.ilhan
2024-12-13 11:43:32 +01:00
parent b8d00a24d0
commit 34f86fccd1
14 changed files with 539 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
angular.json
View File

@@ -45,7 +45,7 @@
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
"maximumError": "5kb"
}
],
"fileReplacements": [

102
src/app/pages/aviso/aviso.page.html
View File

@@ -4,7 +4,7 @@
Header
====================================================== -->
<ion-header>
</ion-header>
<!-- ======================================================
@@ -60,17 +60,24 @@
class="inline-icon"></ion-icon>
{{ aviso.dauer }}
</div>
<div class="ion-text-center"
appAutoFontSize
[maxFontSizePercentage]="33"
[maxFontSize]="avisoTvSettings[0].kachelFontSizeDateTime">
<ion-icon name="person-outline"></ion-icon>
{{ aviso.letzterMitarbeiter }}
[maxFontSize]="avisoTvSettings[0].kachelFontSizeDateTime"
[ngClass]="{'wechseltextdiv': displayMitarbeiterTexts[aviso.lkW_Nr] === 'BITTE KOMMEN / LÜTFEN GELIN'}">
<ion-icon name="person-outline"
[ngClass]="{'wechseltext': displayMitarbeiterTexts[aviso.lkW_Nr] === 'BITTE KOMMEN / LÜTFEN GELIN'}">
</ion-icon>
{{ displayMitarbeiterTexts[aviso.lkW_Nr] || aviso.letzterMitarbeiter }}
</div>
</div>
<div *ngIf="aviso.avisoTVHinweis"
[ngClass]="getImageClassButtomLeft(aviso.avisoTVHinweis)"
class="blinking-image bottom-left-image-problem">
@@ -79,27 +86,42 @@
<div *ngIf="aviso.lkW_fertig && aviso.avisoTVHinweis == '' " class="bottom-left-image-round">
<img [src]="'assets/warnings/okRound.png'" alt="Aviso Hinweis" />
</div>
<div *ngIf="standort === 'WAI'">
<div class="bottom-right-icon-im" *ngIf="aviso.imEx === 'IMPORT'">
<img src="assets/icon/import_icon.png" style="width: 0.7em; aspect-ratio: 10 / 12" /> </div>
<div class="bottom-right-icon-ex" *ngIf="aviso.imEx === 'EXPORT'">
<img src="assets/icon/import_icon.png" style="width: 0.7em; aspect-ratio: 10 / 12" /> </div>
</div>
</ng-container>
<ng-template #showAvisoHinweis>
<div class="flex-container-hinweis" >
<div class="lkwnr" style="margin-top: 1%; margin-bottom: 1%"
appAutoFontSize
[maxFontSizePercentage]="30">
{{ aviso.avisoTVHinweis }}
</div>
<div class="ion-text-center">
<img [src]="getTvHinweisImgSrc(aviso.avisoTVHinweis)"
[ngClass]="getImageClass(aviso.avisoTVHinweis)"
alt="Aviso Hinweis" />
</div>
<ng-template #showAvisoHinweis>
<div class="flex-container-hinweis">
<div class="lkwnr" style="margin-top: 1%; margin-bottom: 1%"
appAutoFontSize
[maxFontSizePercentage]="30">
{{ aviso.avisoTVHinweis }}
</div>
</ng-template>
<div class="ion-text-center">
<img [src]="getTvHinweisImgSrc(aviso.avisoTVHinweis)"
[ngClass]="getImageClass(aviso.avisoTVHinweis)"
alt="Aviso Hinweis" />
</div>
</div>
<div *ngIf="standort === 'WAI'">
<div class="bottom-right-icon" *ngIf="aviso.imEx === 'IMPORT'">
<ion-icon name="download-outline"></ion-icon>
</div>
<div class="bottom-right-icon" *ngIf="aviso.imEx === 'EXPORT'">
<ion-icon name="upload-outline"></ion-icon>
</div>
</div>
</ng-template>
</ion-card>
</div>
<!-- ======================================================
@@ -122,25 +144,41 @@
<!-- ======================================================
Logobar mit Progress Bar
====================================================== -->
<ion-progress-bar [value]="progressBarValue"
class="custom-progress-bar"
buffer="1"></ion-progress-bar>
<ion-toolbar class="logobar">
<span slot="start" class="title">
<!-- Start Slot -->
<span slot="start" class="title" style="margin-left:0.3%">
{{ currentDate | date: 'HH:mm:ss' }} <br />
{{ currentDate | date: 'dd.MM.yyyy' }}
</span>
<ion-title class="ion-text-center title">
<!-- Logo und Icons Container -->
<div class="logo-and-icons">
<img [src]="'assets/Logos/' + avisoTvSettings[0].logo" class="logo" />
</ion-title>
<span slot="end" class="title">
<!-- Bedingtes Div für WAI Standort -->
<div *ngIf="standort === 'WAI'" class="title legendecontainer">
<div class="div-import">
<img src="assets/icon/import_icon.png" style="width: 0.8em; aspect-ratio: 10 / 12" /> = IMPORT
</div>
<div class="div-export">
<img src="assets/icon/export_icon_1.png" style="width: 0.8em; aspect-ratio: 10 / 12" /> = EXPORT
</div>
</div>
</div>
<!-- End Slot -->
<span slot="end" class="title" style="margin-right:0.3%">
({{ totalArrivals }}) <br /> {{ currentPageIndex + 1 }} / {{ pages.length }}
</span>
<ion-progress-bar [value]="progressBarValue"
class="custom-progress-bar"
buffer="1"></ion-progress-bar>
</ion-toolbar>
<!-- ======================================================
Footer mit Tabs
====================================================== -->
@@ -148,17 +186,15 @@
<ng-container *ngFor="let setting of avisoTvTextSettings; let i = index">
<ng-container *ngIf="setting.isActive && settingDisplayData[i]?.nonEmptyFixeZeilen?.length">
<ion-item lines="none" class="no-border-item">
<div [innerHTML]="settingDisplayData[i].nonEmptyFixeZeilen[settingDisplayData[i].currentDivIndex]?.sanitizedHtml"
appAutoFontSize
[minFontSize]="12"
[maxFontSize]="24"
[style.text-align]="settingDisplayData[i].nonEmptyFixeZeilen[settingDisplayData[i].currentDivIndex]?.textAlign"
<div [innerHTML]="settingDisplayData[i].nonEmptyFixeZeilen[settingDisplayData[i].currentDivIndex].sanitizedHtml"
autoResizeText
[style.text-align]="settingDisplayData[i].nonEmptyFixeZeilen[settingDisplayData[i].currentDivIndex].textAlign"
class="htmltext responsive-title">
</div>
</ion-item>
<div class="tabs-container"
style="display: flex; justify-content: center; background-color:white;">
style="display: flex; justify-content: center; background-color:transparent;">
<div class="custom-segment">
<button *ngFor="let item of settingDisplayData[i].nonEmptyFixeZeilen; let j = index"
(click)="settingDisplayData[i].currentDivIndex = j"

193
src/app/pages/aviso/aviso.page.scss
View File

@@ -44,14 +44,13 @@ div {
.card-number {
position: absolute;
top: 5px;
left: 5px;
font-size: calc(var(--tile-height-vh) * 0.18);
top: 2%;
left: 0.1%;
font-size: calc(var(--tile-height-vh) * 0.14);
font-weight: bold;
background-color: transparent;
padding: 2px 5px;
border-radius: 3px;
color: #003680;
padding: 0.1% 2%;
color: #003680;
}
/* ======================================================
@@ -83,20 +82,24 @@ ion-title {
width: 100%;
white-space: pre-line;
transition: box-shadow 0.3s, transform 0.3s;
display:flex;
align-items:center;
justify-content:center;
}
/* ======================================================
Icons
====================================================== */
ion-icon {
.grid-container ion-icon {
vertical-align: middle;
font-size: calc(var(--tile-height-vh) * 0.15);
margin-right: -3px;
margin-left: 0.1em;
margin-bottom:0.1em;
margin-bottom: 0.1em;
}
/* ======================================================
@@ -122,8 +125,8 @@ ion-icon {
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.95);
opacity: 1;
transform: scale(0.3);
}
to {
@@ -157,6 +160,9 @@ ion-icon {
.logobar {
max-height: 12vh;
display: flex;
align-items: center;
justify-content: space-between;
}
@@ -178,8 +184,8 @@ ion-icon {
.bottom-left-image-round img {
position: absolute;
width: 11%;
aspect-ratio: 10 / 9;
width: 8%;
aspect-ratio: 9.5 / 9;
bottom: 2%;
left: 1%;
}
@@ -256,6 +262,7 @@ ion-icon {
.custom-progress-bar {
--progress-background: #003680;
width: 100%;
}
/* ======================================================
@@ -267,7 +274,6 @@ ion-icon {
align-items: center;
justify-content: center;
width: 100%;
row-gap: var(--tile-row-gap);
}
@@ -283,3 +289,164 @@ ion-icon {
}
.tabs-container {
position: absolute;
bottom: var(--text-flagge-bottom);
left: var(--text-flagge-left);
z-index: 10;
}
.bottom-right-icon-im {
position: absolute;
bottom: 0.1%;
right: 2%;
font-size: calc(var(--tile-height-vh) * 0.15);
color: #003680;
}
.bottom-right-icon-ex {
position: absolute;
bottom: 0.1%;
right: 2.5%;
font-size: calc(var(--tile-height-vh) * 0.15);
color: #ee7621;
}
.logo-and-icons {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.legendecontainer {
display: flex;
position: absolute;
margin-left: 55%;
flex-direction: column;
}
.div-import {
color: #003680;
}
.div-export {
margin-bottom:0%;
color: #ee7621;
}
.wechseltext {
visibility: hidden;
}
.wechseltextdiv {
margin-left:-9%;
}
@media only screen and (max-width: 768px) {
/* Grid-Container anpassen */
.grid-container {
grid-template-columns: 1fr; /* Eine Spalte */
row-gap: 1px; /* 20px * 0.8 */
column-gap: 1px; /* 20px * 0.8 */
padding: 8px; /* 10px * 0.8 */
}
.arrival-card {
height: 120px; /* Flexible Höhe bleibt unverändert */
padding: 8px; /* 10px * 0.8 */
margin-bottom: 8px; /* 10px * 0.8 */
}
.card-number {
font-size: 16px; /* 16px * 0.8 */
padding: 1.6% 2.4%; /* 2% * 0.8 und 3% * 0.8 */
}
/* Typografie anpassen */
ion-title {
font-size: 10px; /* 24px * 0.8 */
}
.title {
font-size: 20px; /* 16px * 0.8 */
}
.lkwnr {
font-size: 11px; /* 14px * 0.8 */
}
.htmltext {
height: auto;
padding: 8px; /* 10px * 0.8 */
}
.grid-container ion-icon {
font-size: 16px; /* 20px * 0.8 */
margin-right: 0;
margin-left: 0.16em; /* 0.2em * 0.8 */
margin-bottom: 0.16em; /* 0.2em * 0.8 */
}
.logo {
max-height: 8vh; /* 8vh * 0.8 */
}
.logobar {
max-height: 8vh; /* 10vh * 0.8 */
}
.bottom-left-image-problem img,
.bottom-left-image-passport img,
.bottom-left-image-round img {
width: 4%; /* 5% * 0.8 */
left: 4%; /* 5% * 0.8 */
}
.problem,
.passport {
width: 100%;
}
/* Benutzerdefinierte Segmente anpassen */
.custom-segment {
height: 40px; /* 50px * 0.8 */
}
.custom-segment-button {
min-width: 32px; /* 40px * 0.8 */
height: 24px; /* 30px * 0.8 */
padding: 3px; /* 4px * 0.8 */
font-size: 8px; /* 10px * 0.8 */
}
.tab-image {
width: 16px; /* 20px * 0.8 */
height: 14px; /* 18px * 0.8 */
}
/* Flex Container anpassen */
.flex-container {
row-gap: 1px; /* 20px * 0.8 */
}
.tabs-container {
bottom: 4%; /* 5% * 0.8 */
left: 4%; /* 5% * 0.8 */
}
.bottom-right-icon-im,
.bottom-right-icon-ex {
font-size: 14px; /* 18px * 0.8 */
}
.legendecontainer {
margin-left: 8%; /* 10% * 0.8 */
}
}

492
src/app/pages/aviso/aviso.page.ts
View File

@@ -5,26 +5,23 @@ import {
HostListener,
ChangeDetectorRef,
HostBinding,
ViewChildren,
QueryList,
ElementRef,
AfterViewInit,
Renderer2
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { interval, Subject, throwError, lastValueFrom, Subscription } from 'rxjs';
import { switchMap, takeUntil, distinctUntilChanged, tap, catchError, map, take, debounceTime } from 'rxjs/operators';
import { interval, Subject, throwError, lastValueFrom, Subscription, of } from 'rxjs';
import { switchMap, takeUntil, distinctUntilChanged, tap, catchError, map, take } from 'rxjs/operators';
import { AvisoService, AvisoArrivalsResponse } from '../../services/aviso.service';
import { AvisoDto, TvSettings } from '../../services/aviso.dto';
import { AvisoTvTextSettingsDto } from '../../services/aviso-tv-settings.dto';
// Schnittstelle für die aufgelösten Daten vom Resolver
interface AvisoResolvedData {
avisoTvTextSettings: AvisoTvTextSettingsDto[];
avisoTvSettings: TvSettings[];
arrivals: AvisoArrivalsResponse;
standortID: number;
}
interface CssVariables {
@@ -35,13 +32,16 @@ interface CssVariables {
tileSeitenwechselInSek: string;
textBalkenHeightVh: string;
tileRowGapinPercent: string;
flaggeLeft: string;
flaggeBottom: string;
}
const ARRIVALS_INTERVAL_MS = 10000;
const TVTEXTSETTINGS_INTERVAL_MS = 60000;
const TVSETTINGS_INTERVAL_MS = 10000;
const TOGGLE_DIV_INTERVAL_MS = 5000;
const WECHSELTEXT = "BITTE KOMMEN / LÜTFEN GELIN"
interface StatusInfo {
class: string;
icon: string;
@@ -56,14 +56,13 @@ const STATUS_MAP: { [key: string]: StatusInfo } = {
'default': { class: 'status-default', icon: 'help-circle', color: 'medium', text: 'Unbekannt' }
};
// Neues Interface für die Anzeige der Fixzeilen
interface SettingDisplayData {
nonEmptyFixeZeilen: {
sanitizedHtml: SafeHtml;
textAlign: string;
}[];
currentDivIndex: number;
isDivReady: boolean; // Flag zur Steuerung der Sichtbarkeit
isDivReady: boolean;
}
@Component({
@@ -73,13 +72,14 @@ interface SettingDisplayData {
})
export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
// HostBindings für CSS-Variablen
@HostBinding('style.--tile-width-percent') tileWidthPercent = '50vw';
@HostBinding('style.--tile-height-vh') tileHeightVh = '40vh';
@HostBinding('style.--tile-title-font-size') tileTitleFontSize = '5vh';
@HostBinding('style.--tile-font-size-date-time') tileFontSizeDateTime = '5vh';
@HostBinding('style.--text-balken-height-vh') textBalkenHeightVh = '10vh';
@HostBinding('style.--tile-row-gap') tileRowGapinPercent = '10px';
@HostBinding('style.--text-flagge-left') flaggeLeft = '10px';
@HostBinding('style.--text-flagge-bottom') flaggeBottom = '10px';
progressBarValue: number = 0;
private progressBarSubscription: Subscription = new Subscription();
@@ -87,50 +87,47 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
currentDate: Date = new Date();
private dateSubscription: Subscription = new Subscription();
// Standort- und Filterinformationen
standort = '';
standortID = 0;
seiten = false;
seiten = true;
onlyOK = false;
// Datenmodelle
arrivals: AvisoDto[] = [];
avisoTvTextSettings: AvisoTvTextSettingsDto[] = [];
avisoTvSettings: TvSettings[] = [];
// Paginierung
pages: AvisoDto[][] = [];
currentPageIndex = 0;
tilesPerPage = 0;
// Ladezustände
loadingArrivals = false;
loadingTextSettings = false;
loadingTvSettings = false;
// Gesamtanzahlen
totalArrivals = 0;
totalTextSettings = 0;
// Fehlermeldungen
errorMessage = '';
settingsErrorMessage = '';
// Sonstige Variablen
private destroy$ = new Subject<void>();
private toggleDivInterval: any;
private currentCssVariables: CssVariables | null = null;
// Neues Array für die Anzeige der Fixzeilen
settingDisplayData: SettingDisplayData[] = [];
// Hinzugefügte Variablen für die Kachel-Umschaltung
avisoTimeouts: { [key: string]: any } = {};
avisoStates: { [key: string]: boolean } = {};
// Dauer in Millisekunden
contentDuration = 3000; // Zeit in ms, die der normale Inhalt angezeigt wird
avisoHinweisDuration = 1500; // Zeit in ms, die der avisoTVHinweis Text angezeigt wird
displayMitarbeiterTexts: { [key: string]: string } = {};
avisoOriginalLetzterMitarbeiter: { [key: string]: string } = {};
avisoMitarbeiterIntervals: { [key: string]: any } = {};
private MITARBEITER_INTERVAL_MS = 3000;
contentDuration = 3000;
avisoHinweisDuration = 1500;
pendingArrivals: AvisoDto[] | null = null;
constructor(
private route: ActivatedRoute,
@@ -140,11 +137,6 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
private renderer: Renderer2
) { }
/**
* Konvertiert eine Schriftgröße in verschiedene Einheiten zu Pixel.
* @param fontSize Die Schriftgröße als String (z.B. '12pt', '16px')
* @returns Die Schriftgröße in Pixel
*/
private convertToPx(fontSize: string): number {
if (fontSize.endsWith('pt')) {
return parseFloat(fontSize) * 1.333;
@@ -157,8 +149,6 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
ngOnInit() {
this.currentDate = new Date();
// Aktualisieren Sie das Datum jede Sekunde
this.dateSubscription = interval(1000).subscribe(() => {
this.currentDate = new Date();
});
@@ -173,95 +163,89 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
this.onlyOK = queryParams.get('onlyOK') === 'true';
});
// Zugriff auf die vom Resolver bereitgestellten Daten
this.route.data.pipe(takeUntil(this.destroy$)).subscribe((resolvedData) => {
const data = (resolvedData as any)['avisoData'] as AvisoResolvedData;
this.avisoTvTextSettings = data.avisoTvTextSettings;
this.avisoTvSettings = data.avisoTvSettings;
this.arrivals = data.arrivals.avisos;
console.log(this.arrivals);
this.totalArrivals = data.arrivals.totalCount;
this.standortID = data.standortID;
// Avisos für Testzwecke modifizieren
this.arrivals.forEach(aviso => {
if (aviso.lkW_Nr === '34HG827') {
aviso.lkW_Nr = '10AKN96310AKN96310AKN96310AKN963';
if (aviso.lkW_fertig && aviso.avisoTVHinweis === "") {
this.displayMitarbeiterTexts[aviso.lkW_Nr] = WECHSELTEXT;
}
});
this.arrivals.forEach(aviso => {
if (aviso.lkW_Nr === 'OOLU9267058') {
/* this.arrivals.forEach(aviso => {
if (aviso.lkW_Nr === '81ACY359') {
aviso.avisoTVHinweis = 'URGENT';
}
});
*/
this.paginateArrivals();
this.updateAvisoStatesAndCycles();
this.cdr.detectChanges();
// Process the HTML settings
this.preprocessHtmlSettings();
// Setzen der CSS-Variablen
this.setCSSVariables();
// Starten der Div-Umschaltung
this.startDivToggle();
// Starten der Seitenrotation
this.paginateArrivals();
this.startPageRotation();
// Starten der Aviso-Kachel-Umschaltung
this.updateAvisoStatesAndCycles();
// Nach dem Laden der Daten die Schriftgröße anpassen (falls nicht mehr benötigt)
// Da die Direktive jetzt die Schriftgröße anpasst, kann dieser Code eventuell entfernt werden
});
const ARRIVALS_INTERVAL_MS = (this.avisoTvSettings[0].seitenwechselInSek * 1000 / 2);
// Automatisches Aktualisieren der Arrivals alle 10 Sekunden
interval(ARRIVALS_INTERVAL_MS)
.pipe(
switchMap(() => {
this.loadingArrivals = this.arrivals.length === 0;
this.errorMessage = '';
return this.avisoService.getArrivals(this.standort, this.seiten, this.onlyOK);
return this.avisoService.getArrivals(this.standort, this.onlyOK).pipe(
catchError((error) => {
this.errorMessage = 'Fehler beim Laden der Arrivals. Bitte versuche es später erneut.';
this.loadingArrivals = false;
return of({ avisos: [], totalCount: 0 });
})
);
}),
distinctUntilChanged((prev, curr) => this.arrivalsAreEqual(prev.avisos, curr.avisos)),
takeUntil(this.destroy$)
)
.subscribe(
(data: AvisoArrivalsResponse) => {
.subscribe((data: AvisoArrivalsResponse) => {
this.loadingArrivals = false;
/* this.arrivals.forEach(aviso => {
if (aviso.lkW_Nr === '81ACY359') {
aviso.avisoTVHinweis = 'URGENT';
}
});*/
if (this.pages.length > 1) {
this.pendingArrivals = data.avisos;
this.totalArrivals = data.totalCount;
} else {
this.arrivals = data.avisos;
this.totalArrivals = data.totalCount;
this.loadingArrivals = false;
this.arrivals.forEach(aviso => {
this.arrivals.forEach(aviso => {
if (aviso.lkW_Nr === '34HG827') {
aviso.lkW_Nr = '10AKN96310AKN96310AKN96310AKN963';
}
});
this.arrivals.forEach(aviso => {
if (aviso.lkW_Nr === 'OOLU9267058') {
aviso.avisoTVHinweis = 'URGENT';
}
});
});
this.paginateArrivals();
this.updateAvisoStatesAndCycles();
this.cdr.detectChanges();
},
(error) => {
this.errorMessage = 'Fehler beim Laden der Arrivals. Bitte versuche es später erneut.';
this.loadingArrivals = false;
this.arrivals.forEach(aviso => {
if (aviso.lkW_fertig && aviso.avisoTVHinweis === "") {
if (!this.displayMitarbeiterTexts[aviso.lkW_Nr]) {
this.displayMitarbeiterTexts[aviso.lkW_Nr] = WECHSELTEXT;
}
} else {
if (this.displayMitarbeiterTexts[aviso.lkW_Nr]) {
delete this.displayMitarbeiterTexts[aviso.lkW_Nr];
}
}
});
}
);
});
// Automatisches Aktualisieren der TV Settings alle 10 Sekunden
interval(TVSETTINGS_INTERVAL_MS)
.pipe(
switchMap(() => this.loadAvisoTvSettings()),
@@ -269,7 +253,6 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
)
.subscribe();
// Automatisches Aktualisieren der TV Text Settings alle 60 Sekunden
interval(TVTEXTSETTINGS_INTERVAL_MS)
.pipe(
switchMap(() => this.loadAvisoTvTextSettings()),
@@ -279,14 +262,18 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
}
ngAfterViewInit() {
// Die Schriftgrößenanpassung wird jetzt von der Direktive übernommen
// Falls zusätzliche Initialisierungen erforderlich sind, können sie hier durchgeführt werden
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
Object.values(this.avisoMitarbeiterIntervals).forEach(intervalId => clearInterval(intervalId));
this.avisoMitarbeiterIntervals = {};
Object.values(this.avisoTimeouts).forEach(timeoutId => clearTimeout(timeoutId));
this.avisoTimeouts = {};
if (this.toggleDivInterval) {
clearInterval(this.toggleDivInterval);
}
@@ -298,21 +285,15 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
if (this.dateSubscription) {
this.dateSubscription.unsubscribe();
}
// Bereinigen der Aviso-Timer
Object.values(this.avisoTimeouts).forEach(timeoutId => clearTimeout(timeoutId));
}
private startProgressBar(seitenwechselInSek: number): void {
// Falls eine vorherige Subscription existiert, beenden wir sie
if (this.progressBarSubscription) {
this.progressBarSubscription.unsubscribe();
}
// Setzen des Fortschrittswerts auf 0
this.progressBarValue = 0;
const progressBarIntervalMs = 100; // Aktualisierung alle 100ms
const progressBarIntervalMs = 100;
const totalSteps = Math.floor((seitenwechselInSek * 1000) / progressBarIntervalMs);
this.progressBarSubscription = interval(progressBarIntervalMs)
@@ -339,26 +320,23 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
this.settingDisplayData = this.avisoTvTextSettings.map((setting, index) => ({
nonEmptyFixeZeilen: this.getNonEmptyFixeZeilen(setting),
currentDivIndex: 0,
isDivReady: true // Initialisieren auf true
isDivReady: true
}));
}
private getNonEmptyFixeZeilen(setting: AvisoTvTextSettingsDto) {
const nonEmptyFixeZeilen = [];
// Verarbeiten von fixeZeile1
if (setting.fixeZeile1) {
const { sanitizedHtml, textAlign } = this.processHtml(setting.fixeZeile1, setting);
nonEmptyFixeZeilen.push({ sanitizedHtml, textAlign });
}
// Verarbeiten von fixeZeile2
if (setting.fixeZeile2) {
const { sanitizedHtml, textAlign } = this.processHtml(setting.fixeZeile2, setting);
nonEmptyFixeZeilen.push({ sanitizedHtml, textAlign });
}
// Verarbeiten von fixeZeile3
if (setting.fixeZeile3) {
const { sanitizedHtml, textAlign } = this.processHtml(setting.fixeZeile3, setting);
nonEmptyFixeZeilen.push({ sanitizedHtml, textAlign });
@@ -368,8 +346,6 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
}
private processHtml(html: string, setting: AvisoTvTextSettingsDto): { sanitizedHtml: SafeHtml; textAlign: string } {
// Vermeide das Modifizieren des HTML-Inhalts, um die Formatierung zu erhalten
// Extrahiere text-align aus dem ersten Div
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const firstDiv = doc.querySelector('div');
@@ -384,7 +360,6 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
div.dataset['originalFontSizePx'] = fontSizePx.toString();
div.dataset['originalTextAlign'] = textAlign;
}
// Entferne die inline Schriftgröße und füge eine Klasse hinzu
div.style.fontSize = '';
div.classList.add('dynamic-font-size');
});
@@ -406,6 +381,8 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
tileSeitenwechselInSek: `${settings.seitenwechselInSek}s`,
textBalkenHeightVh: `${settings.textBalkenHeightInPercent}vh`,
tileRowGapinPercent: `${settings.kachelRowGapInPercent}px`,
flaggeLeft: `${settings.flaggeLeft}vw`,
flaggeBottom: `${settings.flaggeBottom}vh`,
};
if (this.currentCssVariables && this.hasCssVariablesChanged(newCssVariables)) {
@@ -415,10 +392,8 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
Object.assign(this, newCssVariables);
this.currentCssVariables = newCssVariables;
console.log('CSS-Variablen gesetzt:', newCssVariables);
} else {
console.warn('avisoTvSettings ist nicht verfügbar oder leer');
console.warn('Fehler CSS Variablen');
}
}
@@ -430,7 +405,7 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
this.loadingTvSettings = true;
try {
const data: TvSettings[] = await lastValueFrom(
this.avisoService.getAvisoTvSettings(this.avisoTvTextSettings[0].standortID || this.standortID).pipe(
this.avisoService.getAvisoTvSettings(this.standortID).pipe(
tap((data: TvSettings[]) => {
this.avisoTvSettings = data;
this.loadingTvSettings = false;
@@ -440,6 +415,7 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
)
);
} catch {
// Fehler bereits behandelt
}
}
@@ -452,14 +428,13 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
this.avisoTvTextSettings = data;
this.totalTextSettings = data.length;
this.loadingTextSettings = false;
// Process the new HTML settings
this.preprocessHtmlSettings();
}),
catchError((error: any) => this.handleSettingsError(error, 'TV Text Settings'))
)
);
} catch {
// Fehler wird bereits in handleSettingsError behandelt
// Fehler bereits behandelt
}
}
@@ -478,17 +453,13 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
this.toggleDivInterval = setInterval(() => {
this.settingDisplayData.forEach((data, index) => {
if (data.nonEmptyFixeZeilen.length > 1) {
// Setze das Flag auf false, um das aktuelle div zu verstecken
this.settingDisplayData[index].isDivReady = false;
// Aktualisiere den currentDivIndex
data.currentDivIndex = (data.currentDivIndex + 1) % data.nonEmptyFixeZeilen.length;
}
});
this.cdr.detectChanges();
}, TOGGLE_DIV_INTERVAL_MS);
} else {
// Initialize currentDivIndex to 0 und setze isDivReady auf true
this.settingDisplayData.forEach((data, index) => {
data.currentDivIndex = 0;
data.isDivReady = true;
@@ -496,7 +467,6 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
}
}
// Status-Methoden mithilfe des STATUS_MAP
getStatusClass(status: number, lkwFertig: boolean, avisoTvhinweis: string): string {
if (lkwFertig && avisoTvhinweis == "") {
return STATUS_MAP['lkwfertig'].class;
@@ -530,22 +500,6 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
return STATUS_MAP[status.toString()]?.text || STATUS_MAP['default'].text;
}
/**
* Gibt die CSS-Klasse basierend auf dem Position-Wert zurück.
* @param position Die Position (Top, Middle, Left, Right)
* @returns Eine CSS-Klassen-String
*/
getPositionClass(position: string): string {
const pos = position.toLowerCase();
const positionClasses: { [key: string]: string } = {
'top': 'position-top',
'middle': 'position-middle',
'left': 'position-left',
'right': 'position-right'
};
return positionClasses[pos] || '';
}
private reloadPageOnce(): void {
if (!sessionStorage.getItem('pageReloaded')) {
sessionStorage.setItem('pageReloaded', 'true');
@@ -555,48 +509,56 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
}
}
// Paginierung der Arrivals
private paginateArrivals(): void {
if (!this.avisoTvSettings || this.avisoTvSettings.length === 0) {
return;
}
const settings = this.avisoTvSettings[0];
const windowWidth = window.outerWidth;
const windowHeight = window.outerHeight;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const isMobileDevice = () => {
const mobileBreakpoint = 768;
return windowWidth <= mobileBreakpoint;
};
if (isMobileDevice()) {
this.pages = [this.arrivals];
this.tilesPerPage = this.arrivals.length;
this.currentPageIndex = 0;
return;
}
const allFixeZeilenEmpty = this.settingDisplayData.every(data => data.nonEmptyFixeZeilen.length === 0);
let effectiveTileHeightPercent = settings.kachelHeightInPercent;
let htmltextHeight = (settings.textBalkenHeightInPercent / 100) * windowHeight;
if (allFixeZeilenEmpty) {
htmltextHeight = 0;
}
const tileWidth = (settings.kachelWidthInPercent / 100) * windowWidth;
const tileHeight = (settings.kachelHeightInPercent / 100) * windowHeight;
const logo = (10 / 100) * windowHeight;
const tileHeight = (effectiveTileHeightPercent / 100) * windowHeight;
// Definieren Sie separate horizontale und vertikale Gutter
const logo = (10 / 100) * windowHeight;
const gutterHorizontal = (1 / 100) * windowHeight;
const gutterVertical = (1 / 100) * windowHeight;
const containerPadding = (0 / 100) * windowHeight;
const containerPaddingTotal = containerPadding * 2;
// Berechnung der Spalten unter Verwendung von gutterHorizontal
const columns = Math.floor(
(windowWidth - containerPaddingTotal + gutterHorizontal) / (tileWidth + gutterHorizontal)
) || 1;
// **Änderung beginnt hier**
const htmltext = (this.avisoTvTextSettings && this.avisoTvTextSettings.length > 0 && this.totalArrivals > 0)
? (settings.textBalkenHeightInPercent / 100) * windowHeight
: 0;
// **Änderung endet hier**
// Verfügbare Höhe für Kacheln unter Verwendung von gutterVertical
const availableHeightForTiles =
windowHeight -
logo -
htmltext -
htmltextHeight -
containerPadding * 2 -
gutterVertical * (columns > 1 ? columns : 0);
// Berechnung der Reihen unter Verwendung von gutterVertical
const rows = Math.floor(
(availableHeightForTiles + gutterVertical) / (tileHeight + gutterVertical)
) || 1;
@@ -614,44 +576,52 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
}
}
// Automatisches Wechseln der Seiten alle seitenwechselInSek Sekunden
// *** NEU *** Anpassung im startPageRotation(), um pendingArrivals einzuspielen
private startPageRotation(): void {
if (!this.avisoTvSettings || this.avisoTvSettings.length === 0) {
console.warn('avisoTvSettings ist nicht verfügbar oder leer');
return;
}
// Überprüfen, ob mehr als eine Seite vorhanden ist
if (this.pages.length <= 1) {
console.info('Nur eine Seite vorhanden. Automatischer Seitenwechsel wird nicht gestartet.');
return;
}
const seitenwechselInSek = this.avisoTvSettings[0].seitenwechselInSek;
console.log('Seitenwechselintervall (Sek):', seitenwechselInSek);
if (typeof seitenwechselInSek === 'number' && seitenwechselInSek > 0) {
const intervalMs = seitenwechselInSek * 1000;
console.log('Seitenwechselintervall (ms):', intervalMs);
// Starten Sie den Fortschrittsbalken
this.startProgressBar(seitenwechselInSek);
interval(intervalMs)
.pipe(takeUntil(this.destroy$))
.subscribe(() => {
// *** NEU *** Hier prüfen wir, ob pendingArrivals vorliegen
if (this.pendingArrivals) {
this.arrivals = this.pendingArrivals;
this.pendingArrivals = null;
this.paginateArrivals();
// Aktualisierung der Mitarbeitertexte
this.arrivals.forEach(aviso => {
if (aviso.lkW_fertig && aviso.avisoTVHinweis === "") {
if (!this.displayMitarbeiterTexts[aviso.lkW_Nr]) {
this.displayMitarbeiterTexts[aviso.lkW_Nr] = WECHSELTEXT;
}
} else {
if (this.displayMitarbeiterTexts[aviso.lkW_Nr]) {
delete this.displayMitarbeiterTexts[aviso.lkW_Nr];
}
}
});
this.cdr.detectChanges();
}
if (this.pages.length > 1) {
this.currentPageIndex = (this.currentPageIndex + 1) % this.pages.length;
console.log('Wechsel zu Seite:', this.currentPageIndex + 1);
this.cdr.detectChanges();
// Fortschrittsbalken neu starten
this.startProgressBar(seitenwechselInSek);
// Nach dem Seitenwechsel die Schriftgröße anpassen (nicht mehr notwendig)
// setTimeout(() => {
// this.adjustFontSize();
// }, 0);
} else {
console.warn('Keine ausreichende Anzahl von Seiten zum Wechseln');
}
@@ -661,23 +631,14 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
}
}
/**
* Event Listener für Fenstergrößenänderungen, um die Paginierung anzupassen
*/
@HostListener('window:resize')
onResizeHostListener(): void {
this.paginateArrivals();
}
/**
* Vergleicht zwei Arrivals-Arrays, um festzustellen, ob sie gleich sind.
* @param a Erstes Arrivals-Array
* @param b Zweites Arrivals-Array
* @returns `true`, wenn beide Arrays gleich sind, ansonsten `false`
*/
private arrivalsAreEqual(a: AvisoDto[], b: AvisoDto[]): boolean {
if (a.length !== b.length) {
console.log(`Arrays haben unterschiedliche Längen: a.length = ${a.length}, b.length = ${b.length}`);
console.log(`Array-Längen sind unterschiedlich: a.length = ${a.length}, b.length = ${b.length}`);
return false;
}
@@ -685,98 +646,180 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
const aItem = a[i];
const bItem = b[i];
if (
aItem.avisoID !== bItem.avisoID ||
aItem.status !== bItem.status ||
aItem.lkW_Nr !== bItem.lkW_Nr ||
aItem.ankunft !== bItem.ankunft ||
aItem.dauer !== bItem.dauer ||
aItem.letzterMitarbeiter !== bItem.letzterMitarbeiter ||
aItem.weiterleitungTextTV !== bItem.weiterleitungTextTV ||
aItem.imEx !== bItem.imEx ||
aItem.zollDigitalEingereicht !== bItem.zollDigitalEingereicht ||
aItem.buero !== bItem.buero ||
aItem.avisoTVHinweis !== bItem.avisoTVHinweis
) {
console.log(`Unterschied bei Index ${i}:`);
console.log(`a[${i}] =`, aItem);
console.log(`b[${i}] =`, bItem);
console.log(`Unterschiede:`);
if (aItem.avisoID !== bItem.avisoID) console.log(` avisoID: ${aItem.avisoID} !== ${bItem.avisoID}`);
if (aItem.status !== bItem.status) console.log(` status: ${aItem.status} !== ${bItem.status}`);
if (aItem.lkW_Nr !== bItem.lkW_Nr) console.log(` lkW_Nr: ${aItem.lkW_Nr} !== ${bItem.lkW_Nr}`);
if (aItem.ankunft !== bItem.ankunft) console.log(` ankunft: ${aItem.ankunft} !== ${bItem.ankunft}`);
if (aItem.dauer !== bItem.dauer) console.log(` dauer: ${aItem.dauer} !== ${bItem.dauer}`);
if (aItem.letzterMitarbeiter !== bItem.letzterMitarbeiter)
console.log(` letzterMitarbeiter: ${aItem.letzterMitarbeiter} !== ${bItem.letzterMitarbeiter}`);
if (aItem.weiterleitungTextTV !== bItem.weiterleitungTextTV)
console.log(` weiterleitungTextTV: ${aItem.weiterleitungTextTV} !== ${bItem.weiterleitungTextTV}`);
if (aItem.imEx !== bItem.imEx) console.log(` imEx: ${aItem.imEx} !== ${bItem.imEx}`);
if (aItem.zollDigitalEingereicht !== bItem.zollDigitalEingereicht)
console.log(` zollDigitalEingereicht: ${aItem.zollDigitalEingereicht} !== ${bItem.zollDigitalEingereicht}`);
if (aItem.buero !== bItem.buero) console.log(` buero: ${aItem.buero} !== ${bItem.buero}`);
if (aItem.avisoTVHinweis !== bItem.avisoTVHinweis)
console.log(` avisoTVHinweis: ${aItem.avisoTVHinweis} !== ${bItem.avisoTVHinweis}`);
if (aItem.avisoID !== bItem.avisoID) {
console.log(`Unterschied bei avisoID an Index ${i}: a.avisoID = ${aItem.avisoID}, b.avisoID = ${bItem.avisoID}`);
return false;
}
if (aItem.status !== bItem.status) {
console.log(`Unterschied bei status an Index ${i}: a.status = ${aItem.status}, b.status = ${bItem.status}`);
return false;
}
if (aItem.lkW_Nr !== bItem.lkW_Nr) {
console.log(`Unterschied bei lkW_Nr an Index ${i}: a.lkW_Nr = ${aItem.lkW_Nr}, b.lkW_Nr = ${bItem.lkW_Nr}`);
return false;
}
if (aItem.ankunft !== bItem.ankunft) {
console.log(`Unterschied bei ankunft an Index ${i}: a.ankunft = ${aItem.ankunft}, b.ankunft = ${bItem.ankunft}`);
return false;
}
if (aItem.dauer !== bItem.dauer) {
console.log(`Unterschied bei dauer an Index ${i}: a.dauer = ${aItem.dauer}, b.dauer = ${bItem.dauer}`);
return false;
}
if (aItem.letzterMitarbeiter !== bItem.letzterMitarbeiter) {
console.log(`Unterschied bei letzterMitarbeiter an Index ${i}: a.letzterMitarbeiter = ${aItem.letzterMitarbeiter}, b.letzterMitarbeiter = ${bItem.letzterMitarbeiter}`);
return false;
}
if (aItem.weiterleitungTextTV !== bItem.weiterleitungTextTV) {
console.log(`Unterschied bei weiterleitungTextTV an Index ${i}: a.weiterleitungTextTV = ${aItem.weiterleitungTextTV}, b.weiterleitungTextTV = ${bItem.weiterleitungTextTV}`);
return false;
}
if (aItem.imEx !== bItem.imEx) {
console.log(`Unterschied bei imEx an Index ${i}: a.imEx = ${aItem.imEx}, b.imEx = ${bItem.imEx}`);
return false;
}
if (aItem.zollDigitalEingereicht !== bItem.zollDigitalEingereicht) {
console.log(`Unterschied bei zollDigitalEingereicht an Index ${i}: a.zollDigitalEingereicht = ${aItem.zollDigitalEingereicht}, b.zollDigitalEingereicht = ${bItem.zollDigitalEingereicht}`);
return false;
}
if (aItem.buero !== bItem.buero) {
console.log(`Unterschied bei buero an Index ${i}: a.buero = ${aItem.buero}, b.buero = ${bItem.buero}`);
return false;
}
if (aItem.avisoTVHinweis !== bItem.avisoTVHinweis) {
console.log(`Unterschied bei avisoTVHinweis an Index ${i}: a.avisoTVHinweis = ${aItem.avisoTVHinweis}, b.avisoTVHinweis = ${bItem.avisoTVHinweis}`);
return false;
}
}
console.log("Die Arrays sind gleich.");
console.log('Die beiden Arrays sind gleich.');
return true;
}
// Hinzugefügte Methode zum Verwalten der Aviso-Zyklen
private updateAvisoStatesAndCycles(): void {
const currentKeys = new Set<string>();
this.pages.forEach(page => {
page.forEach(aviso => {
const key = aviso.lkW_Nr; // Eindeutiger Schlüssel
currentKeys.add(key);
if (aviso.avisoTVHinweis && !(key in this.avisoStates)) {
this.avisoStates[key] = true; // Initialer Zustand
this.startAvisoCycle(key);
} else if (!aviso.avisoTVHinweis) {
// Falls kein Hinweis vorhanden ist, Zustand auf true setzen
this.avisoStates[key] = true;
}
});
this.arrivals.forEach(aviso => {
const key = aviso.lkW_Nr;
currentKeys.add(key);
this.handleAvisoTVHinweis(aviso, key);
this.handleLkwFertigAndTextToggle(aviso, key);
});
// Bereinigen von Avisos, die nicht mehr vorhanden sind
this.cleanupObsoleteEntries(currentKeys);
}
private handleAvisoTVHinweis(aviso: AvisoDto, key: string): void {
if (aviso.avisoTVHinweis) {
if (!(key in this.avisoStates)) {
this.avisoStates[key] = true;
this.startAvisoCycle(key);
console.log(`Started aviso cycle for key: ${key}`);
}
} else {
this.avisoStates[key] = true;
}
}
private handleLkwFertigAndTextToggle(aviso: AvisoDto, key: string): void {
if (aviso.lkW_fertig && aviso.avisoTVHinweis === "") {
if (!this.displayMitarbeiterTexts[key]) {
this.displayMitarbeiterTexts[key] = WECHSELTEXT;
console.log(`Initialized displayMitarbeiterTexts for key: ${key}`);
}
if (!this.avisoMitarbeiterIntervals[key]) {
this.avisoMitarbeiterIntervals[key] = setInterval(() => {
this.toggleMitarbeiterText(aviso, key);
}, this.MITARBEITER_INTERVAL_MS);
console.log(`Started text toggle interval for key: ${key}`);
}
} else {
this.clearMitarbeiterTextToggle(key);
}
}
private toggleMitarbeiterText(aviso: AvisoDto, key: string): void {
if (this.displayMitarbeiterTexts[key] === WECHSELTEXT) {
this.displayMitarbeiterTexts[key] = aviso.letzterMitarbeiter || 'Mitarbeiter nicht verfügbar';
} else {
this.displayMitarbeiterTexts[key] = WECHSELTEXT;
}
this.cdr.detectChanges();
}
private cleanupObsoleteEntries(currentKeys: Set<string>): void {
Object.keys(this.avisoStates).forEach(key => {
if (!currentKeys.has(key)) {
clearTimeout(this.avisoTimeouts[key]);
delete this.avisoStates[key];
delete this.avisoTimeouts[key];
console.log(`Cleaned up avisoStates and timeouts for key: ${key}`);
}
});
Object.keys(this.avisoMitarbeiterIntervals).forEach(key => {
if (!currentKeys.has(key)) {
clearInterval(this.avisoMitarbeiterIntervals[key]);
delete this.avisoMitarbeiterIntervals[key];
console.log(`Cleaned up Mitarbeiter-Interval for key: ${key}`);
}
});
Object.keys(this.displayMitarbeiterTexts).forEach(key => {
if (!currentKeys.has(key)) {
delete this.displayMitarbeiterTexts[key];
console.log(`Cleaned up displayMitarbeiterTexts for key: ${key}`);
}
});
}
private clearMitarbeiterTextToggle(key: string): void {
if (this.avisoMitarbeiterIntervals[key]) {
clearInterval(this.avisoMitarbeiterIntervals[key]);
delete this.avisoMitarbeiterIntervals[key];
console.log(`Cleared text toggle interval for key: ${key}`);
}
if (this.displayMitarbeiterTexts[key]) {
delete this.displayMitarbeiterTexts[key];
console.log(`Cleared displayMitarbeiterTexts for key: ${key}`);
}
}
private startAvisoCycle(key: string): void {
// Aviso mit diesem Schlüssel finden
const aviso = this.findAvisoByKey(key);
if (!aviso || !aviso.avisoTVHinweis) {
return;
}
if (this.avisoStates[key]) {
// Aktuell wird der normale Inhalt angezeigt
this.avisoTimeouts[key] = setTimeout(() => {
this.avisoStates[key] = false; // Umschalten auf avisoTVHinweis Text
this.startAvisoCycle(key); // Nächsten Zyklus starten
this.avisoStates[key] = false;
this.startAvisoCycle(key);
this.cdr.detectChanges();
}, this.contentDuration);
} else {
// Aktuell wird der avisoTVHinweis Text angezeigt
this.avisoTimeouts[key] = setTimeout(() => {
this.avisoStates[key] = true; // Umschalten auf normalen Inhalt
this.startAvisoCycle(key); // Nächsten Zyklus starten
this.avisoStates[key] = true;
this.startAvisoCycle(key);
this.cdr.detectChanges();
}, this.avisoHinweisDuration);
}
}
// Hilfsmethode zum Finden eines Aviso anhand des Schlüssels
private findAvisoByKey(key: string): AvisoDto | undefined {
for (const page of this.pages) {
for (const aviso of page) {
@@ -788,10 +831,9 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
return undefined;
}
// Neue Methode zur Entscheidung, welcher Inhalt angezeigt wird
shouldShowNormalContent(aviso: AvisoDto): boolean {
if (!aviso.avisoTVHinweis) {
return true; // Kein Hinweis vorhanden, immer normalen Inhalt anzeigen
return true;
}
return this.avisoStates[aviso.lkW_Nr];
}
@@ -802,24 +844,16 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
'assets/flags/EN.gif',
'assets/flags/TR.gif',
];
return images[index] || 'assets/imgs/DE.png';
}
/**
* Event Handler für das `resizeComplete` Event der Directive.
* Setzt das `isDivReady` Flag auf `true`, um das Div anzuzeigen.
* @param index Der Index des SettingDisplayData
*/
onResizeComplete(index: number): void {
this.settingDisplayData[index].isDivReady = true;
this.cdr.detectChanges();
}
getImageClass(hinweis: string): string {
const lowercaseHinweis = hinweis.toLowerCase();
if (lowercaseHinweis === 'problem') {
return 'problem';
} else if (lowercaseHinweis === 'passport') {
@@ -831,10 +865,8 @@ export class AvisoPage implements OnInit, OnDestroy, AfterViewInit {
}
}
getImageClassButtomLeft(hinweis: string): string {
const lowercaseHinweis = hinweis.toLowerCase();
if (lowercaseHinweis === 'problem') {
return 'bottom-left-image-problem';
} else if (lowercaseHinweis === 'passport') {

21
src/app/pages/aviso/aviso.resolver.ts
View File

@@ -7,6 +7,7 @@ import { AvisoService, AvisoArrivalsResponse } from '../../services/aviso.servic
import { AvisoTvTextSettingsDto, TvSettings } from '../../services/aviso.dto';
interface AvisoResolvedData {
standortID?: number;
avisoTvTextSettings: AvisoTvTextSettingsDto[];
avisoTvSettings: TvSettings[];
arrivals: AvisoArrivalsResponse;
@@ -23,7 +24,6 @@ export class AvisoResolver implements Resolve<AvisoResolvedData> {
state: RouterStateSnapshot
): Observable<AvisoResolvedData> {
const standort = route.queryParamMap.get('standort') || '';
const seiten = route.queryParamMap.get('seiten') === 'true';
const onlyOK = route.queryParamMap.get('onlyOK') === 'true';
if (!standort) {
@@ -35,7 +35,7 @@ export class AvisoResolver implements Resolve<AvisoResolvedData> {
} as AvisoResolvedData);
}
return this.avisoService.getStandortID(standort).pipe(
return this.avisoService.getStandortID(standort).pipe(
catchError(error => {
console.error('Fehler beim Abrufen der StandortID', error);
return of(null);
@@ -52,8 +52,8 @@ export class AvisoResolver implements Resolve<AvisoResolvedData> {
const standortID = result.standortID;
return forkJoin({
avisoTvTextSettings: this.avisoService.getAvisoTvTextSettings(standort).pipe(
return forkJoin({
avisoTvTextSettings: this.avisoService.getAvisoTvTextSettings(standort).pipe(
catchError(error => {
console.error('Fehler beim Laden der TV Text Settings', error);
return of([] as AvisoTvTextSettingsDto[]);
@@ -65,13 +65,22 @@ export class AvisoResolver implements Resolve<AvisoResolvedData> {
return of([] as TvSettings[]);
})
),
arrivals: this.avisoService.getArrivals(standort, seiten, onlyOK).pipe(
arrivals: this.avisoService.getArrivals(standort, onlyOK).pipe(
catchError(error => {
console.error('Fehler beim Laden der Arrivals', error);
return of({ avisos: [], totalCount: 0 } as AvisoArrivalsResponse);
})
)
});
}).pipe(
switchMap(data => {
return of({
standortID,
avisoTvTextSettings: data.avisoTvTextSettings,
avisoTvSettings: data.avisoTvSettings,
arrivals: data.arrivals
} as AvisoResolvedData);
})
);
}),
catchError(error => {
console.error('Allgemeiner Fehler im Resolver', error);

4
src/app/services/aviso.dto.ts
View File

@@ -11,6 +11,8 @@ export interface AvisoDto {
zollDigitalEingereicht: boolean;
buero: string;
avisoTVHinweis: string;
displayText?: string;
}
export interface TvSettings {
@@ -25,6 +27,8 @@ export interface TvSettings {
textBalkenHeightInPercent: number;
lineHeight: number;
logo: string;
flaggeLeft: string;
flaggeBottom: string;
}
export interface AvisoTvTextSettingsDto {

8
src/app/services/aviso.service.ts
View File

@@ -6,14 +6,12 @@ import { AvisoDto, TvSettings } from './aviso.dto';
import { AvisoTvTextSettingsDto } from './aviso-tv-settings.dto';
import { environment } from '../../environments/environment';
// Definiere die Response Interfaces
export interface AvisoArrivalsResponse {
avisos: AvisoDto[];
totalCount: number;
}
@Injectable({
providedIn: 'root'
})
@@ -30,10 +28,10 @@ export class AvisoService {
* @param onlyOK Gibt an, ob nur gültige Ankünfte zurückgegeben werden sollen.
* @returns Ein Observable von AvisoArrivalsResponse.
*/
getArrivals(standort: string, seiten: boolean = false, onlyOK: boolean = false): Observable<AvisoArrivalsResponse> {
getArrivals(standort: string, onlyOK: boolean = false): Observable<AvisoArrivalsResponse> {
let params = new HttpParams()
.set('standort', standort)
.set('seiten', seiten.toString())
.set('seiten', 'True')
.set('onlyOK', onlyOK.toString());
return this.http.get<AvisoArrivalsResponse>(`${this.baseUrl}/Aviso/arrivals`, { params })

BIN
src/assets/icon/export_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
src/assets/icon/export_icon_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 314 KiB

BIN
src/assets/icon/import_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

2
src/environments/environment.prod.ts
View File

@@ -1,4 +1,4 @@
export const environment = {
production: true,
baseUrl: 'https://avisotv.server.app.verag.ag/api/Aviso'
baseUrl: 'https://avisotv.server.app.verag.ag/api'
};

2
src/global.scss
View File

@@ -34,4 +34,4 @@
/* @import "@ionic/angular/css/palettes/dark.always.css"; */
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
@import "@ionic/angular/css/palettes/dark.system.css";
//@import "@ionic/angular/css/palettes/dark.system.css";

6
src/index.html
View File

@@ -7,7 +7,7 @@
<base href="/" />
<meta name="color-scheme" content="light dark" />
<meta name="color-scheme" content="light" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
@@ -15,8 +15,8 @@
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-status-bar-style" content="black" />
</head>
<body>

2
src/theme/variables.scss
View File

@@ -1,2 +0,0 @@
// For information on how to create your own theme, please see:
// http://ionicframework.com/docs/theming/