feat: add explanation why event cannot be started

Refs: #87
MaSch0212 · Jun 23, 2024 · eeb7359 · eeb7359
1 parent a57e395
commit eeb7359
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 15 deletions.
diff --git a/src/client/src/app/components/events/event-details/event-details.component.html b/src/client/src/app/components/events/event-details/event-details.component.html
@@ -39,14 +39,25 @@
             <span>{{ event.registrationDeadline | date: 'medium' : undefined : locale() }}</span>
           </div>
           @if (canStart()) {
-            <p-button
-              class="self-center"
-              icon="i-[mdi--play]"
-              [label]="translations.events_start()"
-              (onClick)="startEvent()"
-              [loading]="isStartBusy()"
-              [disabled]="!allowToStart()"
-            />
+            <div class="flex flex-col gap-2">
+              <p-button
+                class="self-center"
+                icon="i-[mdi--play]"
+                [label]="translations.events_start()"
+                (onClick)="startEvent()"
+                [loading]="isStartBusy()"
+                [disabled]="!allowToStart()"
+              />
+              @if (!hasInstances()) {
+                <small class="text-warning text-center">{{
+                  translations.events_warning_notStartableNoInstances()
+                }}</small>
+              } @else if (!allTimeslotsHaveMaps()) {
+                <small class="text-warning text-center">{{
+                  translations.events_warning_notStartableMissingMap()
+                }}</small>
+              }
+            </div>
           }
           @if (canCommit()) {
             <p-button

diff --git a/src/client/src/app/components/events/event-details/event-details.component.ts b/src/client/src/app/components/events/event-details/event-details.component.ts
@@ -85,13 +85,18 @@ export class EventDetailsComponent {
   protected readonly hasInstances = computed(() =>
     this.timeslots().some(x => x.instances.length > 0)
   );
+  protected readonly allTimeslotsHaveMaps = computed(
+    () =>
+      !this.event()
+        ?.timeslots.filter(x => x.instances.length > 0)
+        .some(x => x.mapId === null || x.mapId === undefined)
+  );
 
   protected readonly canBuildInstances = computed(() =>
     ifTruthy(this.event(), event => event.registrationDeadline.getTime() < this.now(), false)
   );
   protected readonly canStart = computed(
-    () =>
-      this.canBuildInstances() && this.event() && !this.event()?.startedAt && this.hasInstances()
+    () => this.canBuildInstances() && this.event() && !this.event()?.startedAt
   );
 
   protected readonly canCommit = computed(
@@ -103,10 +108,7 @@ export class EventDetailsComponent {
   );
 
   protected readonly allowToStart = computed(
-    () =>
-      !this.event()
-        ?.timeslots.filter(x => x.instances.length > 0)
-        .some(x => x.mapId === null || x.mapId === undefined)
+    () => this.hasInstances() && this.allTimeslotsHaveMaps()
   );
 
   constructor() {

diff --git a/src/client/src/app/i18n/de.json b/src/client/src/app/i18n/de.json
@@ -131,6 +131,10 @@
       "title": "Veranstaltung freigeben",
       "text": "Möchtest du die Veranstlaung {{date}} wirklich freigeben? Die Zeitfenster können nicht mehr angepasst werden und die Spieler werden über ein neues Event benachrichtigt"
     },
+    "warning": {
+      "notStartableNoInstances": "Die Veranstaltung kann nicht gestartet werden, da die Gruppen noch nicht gebildet wurden.",
+      "notStartableMissingMap": "Die Veranstaltung kann nicht gestartet werden, da nicht für alle gespielten Zeitslots eine Bahn festgelegt wurde."
+    },
     "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
@@ -131,6 +131,10 @@
       "title": "Commit event",
       "text": "Do you really want to release the event {{date}}? The time slots can no longer be adjusted and players will be notified of a new event"
     },
+    "warning": {
+      "notStartableNoInstances": "The event cannot be started because the groups have not been built yet.",
+      "notStartableMissingMap": "The event cannot be started because not all played timeslots have a map assigned."
+    },
     "error": {
       "load": "Failed to load events.",
       "loadOne": "Failed to load event.",

diff --git a/src/client/src/dark-theme.scss b/src/client/src/dark-theme.scss
@@ -15,5 +15,6 @@
     sans-serif;
   --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
     Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  --danger-color: #fca5a5;
+  --danger-color: #f87171;
+  --warning-color: #fb923c;
 }
diff --git a/src/client/src/light-theme.scss b/src/client/src/light-theme.scss
@@ -16,4 +16,5 @@
   --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
     Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --danger-color: #ef4444;
+  --warning-color: #f97316;
 }
diff --git a/src/client/tailwind.config.js b/src/client/tailwind.config.js
@@ -29,6 +29,7 @@ module.exports = {
       'text-color-secondary': 'var(--text-color-secondary)',
       primary: 'var(--primary-color)',
       danger: 'var(--danger-color)',
+      warning: 'var(--warning-color)',
       'primary-text': 'var(--primary-color-text)',
       'surface-0': 'var(--surface-0)',
       'surface-50': 'var(--surface-50)',