v1

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

@@ -0,0 +1,96 @@
+
+<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">
+      <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]"
+              class="arrival-card"
+              [ngClass]="getStatusClass(aviso.status)">
+      <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">
+            <ion-icon [name]="getStatusIcon(aviso.status)"
+                      [color]="getStatusColor(aviso.status)"></ion-icon>
+            {{ aviso.ankunft }}
+            <ion-icon name="hourglass-outline"></ion-icon>
+            {{ aviso.dauer }}
+          </p>
+          <p class="ion-text-center">
+            <ion-icon name="person-outline"></ion-icon>
+            {{ aviso.letzterMitarbeiter }}
+          </p>
+        </div>
+      </ion-card-content>
+    </ion-card>
+  </div>
+
+  <!-- Nachricht, wenn keine Arrivals vorhanden sind -->
+  <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>
+
+<ion-footer>
+  <ng-container *ngFor="let setting of avisoTvSettings; let i = index">
+    <ng-container *ngIf="setting.isActive && setting.fixeZeile1">
+      <ion-item>
+        <!-- Erstes Div, wird angezeigt, wenn showFirstDiv true ist -->
+        <div *ngIf="showFirstDiv"
+             [innerHTML]="sanitizeHtml(setting.fixeZeile1 || '',i)"
+             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)"
+             class="htmltext">
+        </div>
+      </ion-item>
+    </ng-container>
+  </ng-container>
+</ion-footer>