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-06 09:39:25 +01:00
parent 0900fa1ac1
commit 77115f9da0
17 changed files with 878 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,17 @@
<ion-content fullscreen>
<!-- ======================================================
Header
====================================================== -->
<ion-header>
<!-- Ihr Header-Inhalt -->
</ion-header>
<!-- Fehlernachricht anzeigen -->
<!-- ======================================================
Fehlernachricht und Ladeindikator
====================================================== -->
<ion-grid>
<!-- Fehlernachricht anzeigen -->
<ion-row *ngIf="errorMessage">
<ion-col size="12" class="ion-text-center">
<ion-text color="danger">
@@ -23,41 +28,83 @@
</ion-row>
</ion-grid>
<!-- Grid-Container für Arrivals Kacheln -->
<!-- ======================================================
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)">
<!-- Nummerierung in der oberen linken Ecke -->
[ngClass]="getStatusClass(aviso.status, aviso.lkW_fertig, aviso.avisoTVHinweis)">
<div class="card-number">{{ getOverallIndex(i) }}</div>
<ion-card-header>
<ion-card-title class="ion-text-center">
<strong>{{ aviso.lkW_Nr }}</strong>
</ion-card-title>
</ion-card-header>
<ion-card-content>
<!-- Zentrierter Absatz für Ankunft und Dauer -->
<div class="centered-content">
<p class="ion-text-center">
<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)"></ion-icon>
[color]="getStatusColor(aviso.status)"
class="inline-icon"></ion-icon>
{{ aviso.ankunft }}
<ion-icon name="hourglass-outline" [color]="getStatusColor(aviso.status)"></ion-icon>
<ion-icon name="hourglass-outline"
[color]="getStatusColor(aviso.status)"
class="inline-icon"></ion-icon>
{{ aviso.dauer }}
</p>
<p class="ion-text-center">
</div>
<div class="ion-text-center"
appAutoFontSize
[maxFontSizePercentage]="33"
[maxFontSize]="avisoTvSettings[0].kachelFontSizeDateTime">
<ion-icon name="person-outline"></ion-icon>
{{ aviso.letzterMitarbeiter }}
</p>
</div>
</div>
</ion-card-content>
<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, wenn keine Arrivals vorhanden sind -->
<!-- ======================================================
Nachricht bei fehlenden Arrivals
====================================================== -->
<ion-grid>
<ion-row *ngIf="!loadingArrivals && arrivals.length === 0 && !errorMessage">
<ion-col size="12" class="ion-text-center">
@@ -71,45 +118,56 @@
<!-- 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' }}
{{ currentDate | date: 'dd.MM.yyyy' }}
</span>
<ion-title class="ion-text-center title">
<img [src]="'assets/Logos/' + avisoTvSettings[0].logo" class="logo">
<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>
<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>
<ion-footer>
<!-- ======================================================
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>
<ion-item lines="none" class="no-border-item">
<div [innerHTML]="settingDisplayData[i].nonEmptyFixeZeilen[settingDisplayData[i].currentDivIndex]?.sanitizedHtml"
autoResizeText
appAutoFontSize
[minFontSize]="12"
[maxFontSize]="24"
[style.text-align]="settingDisplayData[i].nonEmptyFixeZeilen[settingDisplayData[i].currentDivIndex]?.textAlign"
class="htmltext">
class="htmltext responsive-title">
</div>
</ion-item>
<div style="display:flex;justify-content:center">
<div style="width:10vw">
<ion-segment [(ngModel)]="settingDisplayData[i].currentDivIndex"
class="custom-segment">
<ion-segment-button *ngFor="let item of settingDisplayData[i].nonEmptyFixeZeilen; let j = index"
[value]="j"
class="custom-segment-button">
</ion-segment-button>
</ion-segment>
<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>