feat: add disconnected hint

MaSch0212 · Jun 23, 2024 · 9ac2d25 · 9ac2d25
1 parent 91103d5
commit 9ac2d25
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 65 deletions.
diff --git a/src/client/src/app/components/app/menu/menu.component.html b/src/client/src/app/components/app/menu/menu.component.html
@@ -1,24 +1,65 @@
 @if (isAdmin()) {
-  <p-menubar class="relative block" [model]="menuItems()" [autoDisplay]="false">
+  <p-menubar class="relative block" [model]="adminMenuItems()" [autoDisplay]="false">
     <ng-template pTemplate="end">
-      <div class="flex flex-row flex-wrap items-baseline justify-end gap-x-4">
-        @if (title()) {
-          <span class="font-semibold">{{ title() }}</span>
-          <span class="ml-8 text-xs">{{ translations.title() }}</span>
-        } @else {
-          <span class="font-semibold">{{ translations.title() }}</span>
+      <div class="flex flex-row gap-4">
+        <div class="flex flex-row flex-wrap items-baseline justify-end gap-x-4 text-end">
+          @if (title()) {
+            <span class="font-semibold">{{ title() }}</span>
+            <span class="ml-8 text-xs">{{ translations.title() }}</span>
+          } @else {
+            <span class="font-semibold">{{ translations.title() }}</span>
+          }
+        </div>
+        @if (!isServerConnected()) {
+          <p-button
+            [icon]="'i-[mdi--wifi-off]'"
+            [rounded]="true"
+            [text]="true"
+            [severity]="'danger'"
+            class="-my-8 self-center"
+            styleClass="text-[1.5rem]"
+            (onClick)="offlinePanel.toggle($event)"
+          />
+          <p-overlayPanel #offlinePanel [dismissable]="true">
+            <span>{{ translations.nav_offline() }}</span>
+          </p-overlayPanel>
         }
       </div>
       <ng-container *ngTemplateOutlet="updateButtonTemplate"></ng-container>
     </ng-template>
   </p-menubar>
 } @else {
   <div class="relative flex flex-row gap-2">
-    @for (item of menuItems(); track index; let index = $index) {
-      <ng-container
-        *ngTemplateOutlet="menuItemTemplate; context: { $implicit: item, index }"
-      ></ng-container>
+    <p-button
+      [icon]="'i-[mdi--home]'"
+      [pTooltip]="translations.nav_home()"
+      [rounded]="true"
+      [text]="true"
+      styleClass="h-14 w-14 p-4 text-[1.5rem]"
+      [routerLink]="'/home'"
+    />
+    <div class="grow"></div>
+    @if (!isServerConnected()) {
+      <p-button
+        [icon]="'i-[mdi--wifi-off]'"
+        [rounded]="true"
+        [text]="true"
+        [severity]="'danger'"
+        styleClass="h-14 w-14 p-4 text-[1.5rem]"
+        (onClick)="offlinePanel.toggle($event)"
+      />
+      <p-overlayPanel #offlinePanel [dismissable]="true">
+        <span>{{ translations.nav_offline() }}</span>
+      </p-overlayPanel>
     }
+    <p-button
+      [icon]="'i-[mdi--cog]'"
+      [pTooltip]="translations.nav_settings()"
+      [rounded]="true"
+      [text]="true"
+      styleClass="h-14 w-14 p-4 text-[1.5rem]"
+      [routerLink]="'/user-settings'"
+    />
     <ng-container *ngTemplateOutlet="updateButtonTemplate"></ng-container>
   </div>
 }
@@ -39,45 +80,3 @@
     </div>
   }
 </ng-template>
-
-<ng-template #menuItemTemplate let-item let-index="index">
-  @if (item.visible !== false) {
-    @if (item.separator) {
-      @if (item.state?.['grow']) {
-        <div class="grow"></div>
-      } @else {
-        <div class="mx-4 my-auto h-8 w-[1px] bg-surface-d"></div>
-      }
-    } @else if (item.items) {
-      @if (item.state?.['expand'] === true) {
-        @for (subItem of item.items; track index; let index = $index) {
-          <ng-container
-            *ngTemplateOutlet="menuItemTemplate; context: { $implicit: subItem, index }"
-          ></ng-container>
-        }
-      } @else {
-        <div>
-          <p-button
-            [icon]="item.icon"
-            [pTooltip]="item.label"
-            [rounded]="true"
-            [text]="true"
-            styleClass="h-14 w-14 p-4 text-[1.5rem]"
-            (onClick)="menu.toggle($event)"
-          />
-          <p-menu #menu [model]="item.items" [popup]="true" />
-        </div>
-      }
-    } @else {
-      <p-button
-        [icon]="item.icon"
-        [pTooltip]="item.label"
-        [rounded]="true"
-        [text]="true"
-        styleClass="h-14 w-14 p-4 text-[1.5rem]"
-        [routerLink]="item.routerLink"
-        (onClick)="item.command?.({ originalEvent: $event, item, index })"
-      />
-    }
-  }
-</ng-template>
diff --git a/src/client/src/app/components/app/menu/menu.component.ts b/src/client/src/app/components/app/menu/menu.component.ts
@@ -8,6 +8,7 @@ import { MenuItem } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 import { MenuModule } from 'primeng/menu';
 import { MenubarModule } from 'primeng/menubar';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
 import { TooltipModule } from 'primeng/tooltip';
 import { filter, fromEvent, map, merge } from 'rxjs';
 
@@ -20,7 +21,14 @@ import { chainSignals } from '../../../utils/signal.utils';
 @Component({
   selector: 'app-menu',
   standalone: true,
-  imports: [ButtonModule, CommonModule, MenubarModule, MenuModule, TooltipModule],
+  imports: [
+    ButtonModule,
+    CommonModule,
+    MenubarModule,
+    MenuModule,
+    TooltipModule,
+    OverlayPanelModule,
+  ],
   templateUrl: './menu.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
@@ -56,13 +64,13 @@ export class MenuComponent {
     ),
     { initialValue: false }
   );
+  protected readonly isServerConnected = this._realtimeEventsService.isConnected;
 
-  protected readonly menuItems = computed<MenuItem[]>(() => [
+  protected readonly adminMenuItems = computed<MenuItem[]>(() => [
     {
       label: this.translations.nav_home(),
       icon: 'i-[mdi--home]',
       routerLink: '/home',
-      visible: this.isLoggedIn(),
     },
     {
       label: this.translations.nav_manage(),
@@ -84,18 +92,11 @@ export class MenuComponent {
           routerLink: '/manage/events',
         },
       ],
-      visible: this.isAdmin(),
-    },
-    {
-      separator: true,
-      visible: !this.isAdmin(),
-      state: { grow: true },
     },
     {
       label: this.translations.nav_settings(),
       icon: 'i-[mdi--cog]',
       routerLink: '/user-settings',
-      visible: this.isLoggedIn(),
     },
   ]);
 

diff --git a/src/client/src/app/i18n/de.json b/src/client/src/app/i18n/de.json
@@ -24,7 +24,8 @@
     "eventTimeslot": "Zeitslot",
     "maps": "Bahnen",
     "users": "Benutzer",
-    "settings": "Einstellungen"
+    "settings": "Einstellungen",
+    "offline": "Die Verbindung zum Server wurde unterbrochen. Die Verbindung wird automatisch wiederhergestellt, sobald sie wieder verfügbar ist."
   },
   "settings": {
     "general": {

diff --git a/src/client/src/app/i18n/en.json b/src/client/src/app/i18n/en.json
@@ -24,7 +24,8 @@
     "eventTimeslot": "Timeslot",
     "maps": "Maps",
     "users": "Users",
-    "settings": "Settings"
+    "settings": "Settings",
+    "offline": "The connection to the server has been lost. The connection will be restored automatically once it is available again."
   },
   "settings": {
     "general": {