174 lines
6.3 KiB
HTML
174 lines
6.3 KiB
HTML
<ion-content fullscreen>
|
|
|
|
<!-- ======================================================
|
|
Header
|
|
====================================================== -->
|
|
<ion-header>
|
|
<!-- Ihr Header-Inhalt -->
|
|
</ion-header>
|
|
|
|
<!-- ======================================================
|
|
Fehlernachricht und Ladeindikator
|
|
====================================================== -->
|
|
<ion-grid>
|
|
<!-- Fehlernachricht anzeigen -->
|
|
<ion-row *ngIf="errorMessage">
|
|
<ion-col size="12" class="ion-text-center">
|
|
<ion-text color="danger">
|
|
<p>{{ errorMessage }}</p>
|
|
</ion-text>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<!-- Ladeindikator -->
|
|
<ion-row *ngIf="loadingArrivals && arrivals.length === 0">
|
|
<ion-col size="12" class="ion-text-center">
|
|
<ion-spinner name="crescent"></ion-spinner>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
|
|
<!-- ======================================================
|
|
Grid-Container für Arrivals Kacheln
|
|
====================================================== -->
|
|
<div class="grid-container" *ngIf="!loadingArrivals && pages.length > 0">
|
|
<ion-card *ngFor="let aviso of pages[currentPageIndex]; let i = index"
|
|
class="arrival-card"
|
|
[ngClass]="getStatusClass(aviso.status, aviso.lkW_fertig, aviso.avisoTVHinweis)">
|
|
<div class="card-number">{{ getOverallIndex(i) }}</div>
|
|
|
|
<ng-container *ngIf="shouldShowNormalContent(aviso); else showAvisoHinweis">
|
|
<div class="flex-container">
|
|
|
|
<div class="lkwnr"
|
|
appAutoFontSize
|
|
[maxFontSizePercentage]="34"
|
|
[maxFontSize]="avisoTvSettings[0].kachelFontSizeLkwNummer">
|
|
{{ aviso.lkW_Nr }}
|
|
</div>
|
|
|
|
<div class="ion-text-center"
|
|
appAutoFontSize
|
|
[maxFontSizePercentage]="33"
|
|
[maxFontSize]="avisoTvSettings[0].kachelFontSizeDateTime">
|
|
<ion-icon [name]="getStatusIcon(aviso.status)"
|
|
[color]="getStatusColor(aviso.status)"
|
|
class="inline-icon"></ion-icon>
|
|
{{ aviso.ankunft }}
|
|
<ion-icon name="hourglass-outline"
|
|
[color]="getStatusColor(aviso.status)"
|
|
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 }}
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div *ngIf="aviso.avisoTVHinweis"
|
|
[ngClass]="getImageClassButtomLeft(aviso.avisoTVHinweis)"
|
|
class="blinking-image">
|
|
<img [src]="getTvHinweisImgSrc(aviso.avisoTVHinweis)" alt="Aviso Hinweis" />
|
|
</div>
|
|
<div *ngIf="aviso.lkW_fertig && aviso.avisoTVHinweis == '' " class="bottom-left-image-round">
|
|
<img [src]="'assets/warnings/okRound.png'" alt="Aviso Hinweis" />
|
|
</div>
|
|
</ng-container>
|
|
|
|
|
|
<ng-template #showAvisoHinweis>
|
|
|
|
<div class="flex-container">
|
|
<div class="lkwnr" style="margin-top: 1%; margin-bottom: 1%"
|
|
appAutoFontSize
|
|
[maxFontSizePercentage]="35">
|
|
{{ aviso.avisoTVHinweis }}
|
|
</div>
|
|
<div class="ion-text-center">
|
|
<img [src]="getTvHinweisImgSrc(aviso.avisoTVHinweis)"
|
|
[ngClass]="getImageClass(aviso.avisoTVHinweis)"
|
|
alt="Aviso Hinweis" />
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
|
|
</ion-card>
|
|
|
|
</div>
|
|
|
|
<!-- ======================================================
|
|
Nachricht bei fehlenden Arrivals
|
|
====================================================== -->
|
|
<ion-grid>
|
|
<ion-row *ngIf="!loadingArrivals && arrivals.length === 0 && !errorMessage">
|
|
<ion-col size="12" class="ion-text-center">
|
|
<ion-text>
|
|
<p>Keine Ankünfte gefunden.</p>
|
|
</ion-text>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
|
|
<!-- Bedingtes Textfeld für TV-Einstellungen -->
|
|
|
|
</ion-content>
|
|
|
|
<!-- ======================================================
|
|
Logobar mit Progress Bar
|
|
====================================================== -->
|
|
<ion-toolbar class="logobar">
|
|
<span slot="start" class="title">
|
|
{{ currentDate | date: 'HH:mm:ss' }} <br />
|
|
{{ currentDate | date: 'dd.MM.yyyy' }}
|
|
</span>
|
|
|
|
<ion-title class="ion-text-center title">
|
|
<img [src]="'assets/Logos/' + avisoTvSettings[0].logo" class="logo" />
|
|
</ion-title>
|
|
|
|
<span slot="end" class="title">
|
|
({{ 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
|
|
====================================================== -->
|
|
<ion-footer class="no-border-footer">
|
|
<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"
|
|
class="htmltext responsive-title">
|
|
</div>
|
|
</ion-item>
|
|
|
|
<div class="tabs-container"
|
|
style="display: flex; justify-content: center; background-color:white;">
|
|
<div class="custom-segment">
|
|
<button *ngFor="let item of settingDisplayData[i].nonEmptyFixeZeilen; let j = index"
|
|
(click)="settingDisplayData[i].currentDivIndex = j"
|
|
[class.active]="settingDisplayData[i].currentDivIndex === j"
|
|
class="custom-segment-button">
|
|
<img [src]="getImageForTab(j)" alt="Tab Image" class="tab-image" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ion-footer>
|