tv app

src/app/pages/aviso/aviso.page.html

@@ -1,14 +1,10 @@
-
 <ion-content fullscreen>
-  <!-- Titel für Arrivals -->
 
   <ion-header>
-    <ion-toolbar>
-      <ion-title class="ion-text-center">
-        Ankünfte ({{ totalArrivals }}) Seite {{ currentPageIndex + 1 }} von {{ pages.length }}
-      </ion-title>
-    </ion-toolbar>
+
   </ion-header>
+
+
   <!-- Fehlernachricht anzeigen -->
   <ion-grid>
     <ion-row *ngIf="errorMessage">
@@ -28,10 +24,14 @@
   </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]"
+  <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)">
+              [ngClass]="getStatusClass(aviso.status, aviso.lkW_fertig)">
+
+      <!-- Nummerierung in der oberen linken Ecke -->
+      <div class="card-number">{{ getOverallIndex(i) }}</div>
+
       <ion-card-header>
         <ion-card-title class="ion-text-center">
           <strong>{{ aviso.lkW_Nr }}</strong>
@@ -44,7 +44,7 @@
             <ion-icon [name]="getStatusIcon(aviso.status)"
                       [color]="getStatusColor(aviso.status)"></ion-icon>
             {{ aviso.ankunft }}
-            <ion-icon name="hourglass-outline"></ion-icon>
+            <ion-icon name="hourglass-outline" [color]="getStatusColor(aviso.status)"></ion-icon>
             {{ aviso.dauer }}
           </p>
           <p class="ion-text-center">
@@ -56,6 +56,7 @@
     </ion-card>
   </div>
 
+
   <!-- Nachricht, wenn keine Arrivals vorhanden sind -->
   <ion-grid>
     <ion-row *ngIf="!loadingArrivals && arrivals.length === 0 && !errorMessage">
@@ -70,27 +71,45 @@
   <!-- Bedingtes Textfeld für TV-Einstellungen -->
 
 </ion-content>
+<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>
 <ion-footer>
-  <ng-container *ngFor="let setting of avisoTvSettings; let i = index">
-    <ng-container *ngIf="setting.isActive && setting.fixeZeile1">
+  <ng-container *ngFor="let setting of avisoTvTextSettings; let i = index">
+    <ng-container *ngIf="setting.isActive && settingDisplayData[i]?.nonEmptyFixeZeilen?.length">
       <ion-item>
-        <!-- Erstes Div, wird angezeigt, wenn showFirstDiv true ist -->
-        <div *ngIf="showFirstDiv"
-             [innerHTML]="sanitizeHtml(setting.fixeZeile1 || '',i)"
+        <div [innerHTML]="settingDisplayData[i].nonEmptyFixeZeilen[settingDisplayData[i].currentDivIndex]?.sanitizedHtml"
              autoResizeText
-             [style.text-align]="getTextAlign(i)"
-             class="htmltext">
-        </div>
-
-        <!-- Zweites Div, wird angezeigt, wenn showFirstDiv false ist -->
-        <div *ngIf="!showFirstDiv"
-             [innerHTML]="sanitizeHtml(setting.fixeZeile2 || '',i)"
-             autoResizeText
-             [style.text-align]="getTextAlign(i)"
+             [style.text-align]="settingDisplayData[i].nonEmptyFixeZeilen[settingDisplayData[i].currentDivIndex]?.textAlign"
              class="htmltext">
         </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>
+      </div>
     </ng-container>
   </ng-container>
+
+
 </ion-footer>