Add option to disable menu button

Macro-Deck-App · Apr 29, 2024 · 280b3a5 · 280b3a5
1 parent e67f249
commit 280b3a5
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 30 deletions.
diff --git a/src/app/pages/deck/deck.page.html b/src/app/pages/deck/deck.page.html
@@ -1,20 +1,41 @@
-<ion-content [scrollY]="false" [scrollX]="false" [fullscreen]="true">
-  <app-widget-grid class="widgets-grid-container"></app-widget-grid>
+<ion-menu type="reveal" content-id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Macro Deck</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-menu-toggle>
+        <ion-item *ngIf="environment.webVersion" [button]="true" (click)="openFullscreen()">
+          <ion-icon slot="start" name="expand" size="large"></ion-icon>
+          <ion-label>Open full screen</ion-label>
+        </ion-item>
+        <ion-item [button]="true" (click)="openSettings()">
+          <ion-icon slot="start" name="settings" size="large"></ion-icon>
+          <ion-label>Settings</ion-label>
+        </ion-item>
+        <ion-item *ngIf="!environment.webVersion" [button]="true" (click)="close()">
+          <ion-icon color="danger" slot="start" name="close" size="large"></ion-icon>
+          <ion-label>Close connection</ion-label>
+        </ion-item>
+      </ion-menu-toggle>
+    </ion-list>
+  </ion-content>
+  <ion-toolbar>
+    <ion-text class="ms-3">{{version}} | Client Id: {{clientId}}</ion-text>
+  </ion-toolbar>
+</ion-menu>
 
-  <ion-fab class="fab-menu" slot="fixed" vertical="bottom" horizontal="start">
-    <ion-fab-button size="small">
-      <ion-icon name="ellipsis-vertical"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-list side="top">
-      <ion-fab-button *ngIf="!environment.webVersion" (click)="close()" color="danger">
-        <ion-icon name="close"></ion-icon>
-      </ion-fab-button>
-      <ion-fab-button (click)="openSettings()">
-        <ion-icon name="settings"></ion-icon>
-      </ion-fab-button>
-      <ion-fab-button *ngIf="environment.webVersion" (click)="openFullscreen()">
-        <ion-icon name="expand"></ion-icon>
-      </ion-fab-button>
-    </ion-fab-list>
-  </ion-fab>
-</ion-content>
+<div class="ion-page" id="main-content">
+  <ion-content [scrollY]="false" [scrollX]="false" [fullscreen]="true">
+    <app-widget-grid class="widgets-grid-container"></app-widget-grid>
+    <ion-fab *ngIf="showMenuButton" class="fab-menu" slot="fixed" vertical="top" horizontal="start">
+      <ion-menu-toggle>
+          <ion-fab-button size="small">
+            <ion-icon name="menu-outline"></ion-icon>
+          </ion-fab-button>
+      </ion-menu-toggle>
+    </ion-fab>
+  </ion-content>
+</div>
diff --git a/src/app/pages/deck/deck.page.ts b/src/app/pages/deck/deck.page.ts
@@ -5,6 +5,8 @@ import {CurrentPlatformService} from "../../services/current-platform/current-pl
 import {SettingsModalComponent} from "../shared/modals/settings-modal/settings-modal.component";
 import {ModalController} from "@ionic/angular";
 import {environment} from "../../../environments/environment";
+import {SettingsService} from "../../services/settings/settings.service";
+import {DiagnosticService} from "../../services/diagnostic/diagnostic.service";
 
 @Component({
   selector: 'app-deck',
@@ -13,17 +15,25 @@ import {environment} from "../../../environments/environment";
 })
 export class DeckPage implements AfterViewInit {
 
+  showMenuButton: boolean = true;
+  clientId: string = "";
+  version: string = "";
 
   constructor(private websocketService: WebsocketService,
               private router: Router,
-              private currentPlatformService: CurrentPlatformService,
-              private modalController: ModalController) {
+              private modalController: ModalController,
+              private settingsService: SettingsService,
+              private diagnosticsService: DiagnosticService) {
   }
 
   async ngAfterViewInit() {
     if (!this.websocketService.isConnected) {
       await this.router.navigate([''], {replaceUrl: true});
     }
+
+    this.clientId = await this.settingsService.getClientId();
+    this.version = await this.diagnosticsService.getVersion();
+    await this.loadSettings();
   }
 
   async close() {
@@ -35,6 +45,8 @@ export class DeckPage implements AfterViewInit {
       component: SettingsModalComponent
     });
     await modal.present();
+    await modal.onWillDismiss();
+    await this.loadSettings();
   }
 
   openFullscreen() {
@@ -44,5 +56,9 @@ export class DeckPage implements AfterViewInit {
     }
   }
 
+  private async loadSettings() {
+    this.showMenuButton = await this.settingsService.getShowMenuButton();
+  }
+
   protected readonly environment = environment;
 }
diff --git a/src/app/pages/home/home.page.ts b/src/app/pages/home/home.page.ts
@@ -3,7 +3,6 @@ import {ModalController} from "@ionic/angular";
 import {SettingsService} from "../../services/settings/settings.service";
 import {environment} from "../../../environments/environment";
 import {DiagnosticService} from "../../services/diagnostic/diagnostic.service";
-import {Capacitor} from "@capacitor/core";
 import {SettingsModalComponent} from "../shared/modals/settings-modal/settings-modal.component";
 
 @Component({
@@ -23,13 +22,7 @@ export class HomePage implements OnInit {
 
     async ngOnInit() {
         this.clientId = await this.settingsService.getClientId();
-        if (Capacitor.isNativePlatform()) {
-            this.diagnosticService.getVersion().then(version => {
-                this.version = `v${version}`;
-            });
-        } else {
-            this.version = "Web Version";
-        }
+        this.version = await this.diagnosticsService.getVersion();
     }
 
     protected readonly environment = environment;

diff --git a/src/app/pages/shared/modals/settings-modal/settings-modal.component.html b/src/app/pages/shared/modals/settings-modal/settings-modal.component.html
@@ -19,6 +19,13 @@
         [(ngModel)]="preventScreenTimeout">Prevent screen timeout</ion-toggle>
     </ion-item>
 
+    <ion-item>
+      <ion-icon name="menu-outline" slot="start"></ion-icon>
+      <ion-toggle
+        (ngModelChange)="displayMenuButtonChange($event)"
+        [(ngModel)]="showMenuButton">Show menu button</ion-toggle>
+    </ion-item>
+
     <ion-item *ngIf="isAndroid()">
       <ion-icon slot="start" class="mdi mdi-lock-off d-flex align-items-center"></ion-icon>
       <ion-toggle

diff --git a/src/app/pages/shared/modals/settings-modal/settings-modal.component.ts b/src/app/pages/shared/modals/settings-modal/settings-modal.component.ts
@@ -15,6 +15,7 @@ import {DiagnosticService} from "../../../../services/diagnostic/diagnostic.serv
 export class SettingsModalComponent  implements OnInit {
 
   preventScreenTimeout: boolean = false;
+  showMenuButton: boolean = true;
   skipSslValidation: boolean = false;
   buttonLongPressDelay: number = 1000;
   screenOrientation: string = "0";
@@ -41,6 +42,7 @@ export class SettingsModalComponent  implements OnInit {
 
   async saveSettings() {
     await this.settingsService.setWakeLockEnabled(this.preventScreenTimeout);
+    await this.settingsService.setShowMenuButton(this.showMenuButton);
     await this.settingsService.setSkipSslValidation(this.skipSslValidation);
     await this.settingsService.setButtonLongPressDelay(this.buttonLongPressDelay);
     await this.settingsService.setScreenOrientation(Number.parseInt(this.screenOrientation));
@@ -51,6 +53,7 @@ export class SettingsModalComponent  implements OnInit {
 
   async loadCurrentSettings() {
     this.preventScreenTimeout = await this.settingsService.getWakeLockEnabled();
+    this.showMenuButton = await this.settingsService.getShowMenuButton();
     this.skipSslValidation = await this.settingsService.getSkipSslValidation();
     this.buttonLongPressDelay = await this.settingsService.getButtonLongPressDelay();
     this.screenOrientation = (await this.settingsService.getScreenOrientation()).toString();
@@ -70,6 +73,20 @@ export class SettingsModalComponent  implements OnInit {
     await alert.present();
   }
 
+  async displayMenuButtonChange(event: any) {
+    if (event !== false) {
+      return;
+    }
+
+    const alert = await this.alertController.create({
+      header: 'Information',
+      message: 'To access the menu, swipe from the left edge of the screen',
+      buttons: ['OK'],
+    });
+
+    await alert.present();
+  }
+
   public isAndroid() {
     return this.diagnosticService.isAndroid()
   }

diff --git a/src/app/services/diagnostic/diagnostic.service.ts b/src/app/services/diagnostic/diagnostic.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import {App} from "@capacitor/app";
 import {Platform} from "@ionic/angular";
+import {Capacitor} from "@capacitor/core";
 
 @Injectable({
   providedIn: 'root'
@@ -10,7 +11,13 @@ export class DiagnosticService {
   constructor(private platform: Platform) { }
 
   async getVersion() {
-    return await App.getInfo().then(info => info.version);
+    if (Capacitor.isNativePlatform()) {
+      await App.getInfo().then(info => {
+        return `v${info.version}`;
+      });
+    }
+
+    return "Web Version";
   }
 
   public isAndroid() {

diff --git a/src/app/services/settings/settings.service.ts b/src/app/services/settings/settings.service.ts
@@ -9,6 +9,7 @@ const screenOrientationKey: string = "screen_orientation";
 const connectionCountKey: string = "connection_count";
 const lastConnectionKey: string = "last_connection";
 const skipSslValidationKey: string = "skip_ssl_validation";
+const showMenuButtonKey: string = "show_menu_button";
 
 @Injectable({
   providedIn: 'root'
@@ -19,6 +20,14 @@ export class SettingsService {
   constructor(private storage: Storage) {
   }
 
+  public async setShowMenuButton(showMenuButton: boolean) {
+    await this.storage.set(showMenuButtonKey, showMenuButton);
+  }
+
+  public async getShowMenuButton() {
+    return await this.storage.get(showMenuButtonKey) ?? true;
+  }
+
   public async setSkipSslValidation(lastConnection: boolean) {
     await this.storage.set(skipSslValidationKey, lastConnection);
   }