feat: show Message if there are no event instances (#128)

Closes: #123
MaSch0212 · Jul 6, 2024 · f1d5425 · f1d5425
1 parent 98cb696
commit f1d5425
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 1 deletion.
diff --git a/src/client/src/app/components/app/app.component.html b/src/client/src/app/components/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="bg-image pointer-events-none absolute bottom-0 -z-10 opacity-30 dark:opacity-15"></div>
+<div class="bg-image pointer-events-none absolute bottom-0 -z-10 opacity-15"></div>
 
 <header class="p-4">
   <app-menu />

diff --git a/...src/app/components/player-events/player-event-details/player-event-details.component.html b/...src/app/components/player-events/player-event-details/player-event-details.component.html
@@ -126,6 +126,25 @@ <h2 class="m-0 pt-4">{{ translations.playerEvents_registrations() }}</h2>
         }
         @if (event.isStarted) {
           <h2 class="m-0 pt-4">{{ translations.playerEvents_games() }}</h2>
+
+          @if (games().length === 0) {
+            <p-messages severity="info">
+              <ng-template pTemplate>
+                <span class="i-[mdi--info-circle-outline] mr-2"></span>
+                <div class="flex flex-col gap-1">
+                  <span class="font-semibold">{{
+                    translations.playerEvents_noGames_general()
+                  }}</span>
+                  <span>{{
+                    hasRegisteredTimeslot()
+                      ? translations.playerEvents_noGames_registered()
+                      : translations.playerEvents_noGames_notRegistered()
+                  }}</span>
+                </div>
+              </ng-template>
+            </p-messages>
+          }
+
           @for (game of games(); track game.timeslot.id) {
             <p-card>
               <h3 class="m-0 pb-8">

diff --git a/...t/src/app/components/player-events/player-event-details/player-event-details.component.ts b/...t/src/app/components/player-events/player-event-details/player-event-details.component.ts
@@ -95,6 +95,9 @@ export class PlayerEventDetailsComponent {
   protected readonly timeslots = computed(() =>
     [...(this.event()?.timeslots ?? [])].sort((a, b) => compareTimes(a.time, b.time))
   );
+  protected readonly hasRegisteredTimeslot = computed(() =>
+    this.timeslots().some(x => x.isRegistered)
+  );
   protected readonly timeslotSaveStates = chainSignals(
     computed(() => this.timeslots().map(x => x.id), { equal: areArraysEqual }),
     id =>

diff --git a/src/client/src/app/i18n/de.json b/src/client/src/app/i18n/de.json
@@ -226,6 +226,11 @@
     "time": "Uhrzeit",
     "groupCode": "Raumname",
     "map": "Bahn",
+    "noGames": {
+      "general": "Keine Spiele verfügbar.",
+      "registered": "Der/die Zeitslot(s) für die du angemeldet bist, finden nicht statt, da sich zu wenig Spieler dafür angemeldet haben.",
+      "notRegistered": "Du hast dich für keinen Zeitslot angemeldet."
+    },
     "error": {
       "load": "Fehler beim Laden der Veranstaltungen.",
       "loadOne": "Fehler beim Laden der Veranstaltung.",

diff --git a/src/client/src/app/i18n/en.json b/src/client/src/app/i18n/en.json
@@ -226,6 +226,11 @@
     "time": "Time",
     "groupCode": "Group code",
     "map": "Map",
+    "noGames": {
+      "general": "No games available.",
+      "registered": "The timeslot(s) for which you are registered will not take place because too few players have registered for it.",
+      "notRegistered": "You have not registered for a timeslot."
+    },
     "error": {
       "load": "Failed to load events.",
       "loadOne": "Failed to load event.",