Moved install prompt from menu to dashboard.

jirkapok · Oct 6, 2024 · a4feb2f · a4feb2f
1 parent 38d9fa3
commit a4feb2f
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 29 deletions.
diff --git a/projects/planner/src/app/dashboard/dashboard.component.html b/projects/planner/src/app/dashboard/dashboard.component.html
@@ -11,6 +11,16 @@
                 <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"
                     (click)="startup.stopDisclaimer()"></button>
             </div>
+
+            <div class="alert alert-info alert-dismissible fade show mt-4" role="alert" *ngIf="startup.showInstallButton">
+                <fa-icon [icon]="exclamation" class="me-2 fa-lg"></fa-icon>
+                <span>To be able to use the application in offline mode, you need to add it (install) to your Home screen.</span>
+                <span *ngIf="startup.showAppleInstall">Tap "Share" button and than "Add to home screen".</span>
+                <button *ngIf="!startup.showAppleInstall" (click)="startup.addToHomeScreen()"
+                        class="btn btn-success btn-small mr-auto ms-3">Add to Home screen</button>
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"
+                        (click)="startup.stopShowInstallButton()"></button>
+            </div>
         </div>
 
         <app-plan-tabs></app-plan-tabs>

diff --git a/projects/planner/src/app/dashboard/dashboard.component.ts b/projects/planner/src/app/dashboard/dashboard.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit } from '@angular/core';
 import { FormGroup, NonNullableFormBuilder } from '@angular/forms';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { takeUntil } from 'rxjs';
@@ -44,7 +44,7 @@ export class DashboardComponent extends Streamed implements OnInit {
         // than it starts to receive the event.
         this.dispatcher.infoCalculated$.pipe(takeUntil(this.unsubscribe$))
             .subscribe((diveId?: number) => {
-                if(this.schedules.selected.id === diveId) {
+                if (this.schedules.selected.id === diveId) {
                     this.startup.updateQueryParams();
                 }
             });
@@ -54,4 +54,9 @@ export class DashboardComponent extends Streamed implements OnInit {
                 this.startup.updateQueryParams();
             });
     }
+
+    @HostListener('window:beforeinstallprompt', ['$event'])
+    public onbeforeinstallprompt(e: Event): void {
+        this.startup.onbeforeinstallprompt(e);
+    }
 }
diff --git a/projects/planner/src/app/mainmenu/mainmenu.component.html b/projects/planner/src/app/mainmenu/mainmenu.component.html
@@ -35,8 +35,7 @@
                 <a class="nav-link" routerLink="/about">About</a>
             </ul>
             <ul class="nav navbar-nav navbar-right">
-                <li><button *ngIf="showInstallButton" (click)="addToHomeScreen()"
-                        class="btn btn-success btn-small mr-auto">Add to Home screen</button></li>
+                <li></li>
             </ul>
         </div>
     </div>

diff --git a/projects/planner/src/app/mainmenu/mainmenu.component.ts b/projects/planner/src/app/mainmenu/mainmenu.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener } from '@angular/core';
+import { Component } from '@angular/core';
 import { Urls } from '../shared/navigation.service';
 import {
     faBars, faMountainSun, faHouse, faLungs, faTable,
@@ -24,35 +24,13 @@ export class MainMenuComponent {
     public iconNitrox = faPercent;
     public iconBlender = faFaucet;
 
-    public showInstallButton = false;
-    private deferredPrompt: any;
-
     constructor(private schedules: ManagedDiveSchedules, public urls: Urls) { }
 
-    @HostListener('window:beforeinstallprompt', ['$event'])
-    public onbeforeinstallprompt(e: Event): void {
-        e.preventDefault();
-        this.deferredPrompt = e;
-        this.showInstallButton = true;
-    }
-
     public saveDefaults(): void {
         this.schedules.saveDefaults();
     }
 
     public loadDefaults(): void {
         this.schedules.loadDefaults();
     }
-
-    public addToHomeScreen(): void {
-        this.showInstallButton = false;
-
-        if (this.deferredPrompt) {
-            this.deferredPrompt.prompt();
-            this.deferredPrompt.userChoice
-                .then((choiceResult: any) => {
-                    this.deferredPrompt = null;
-                });
-        }
-    }
 }
diff --git a/projects/planner/src/app/shared/preferencesStore.ts b/projects/planner/src/app/shared/preferencesStore.ts
@@ -9,6 +9,7 @@ export class PreferencesStore {
     private static readonly storageKey = 'preferences';
     private static readonly storageDefaultsKey = 'defaults';
     private static readonly disclaimerKey = 'disclaimer';
+    private static readonly showInstallKey = 'showInstall';
 
     constructor(private preferencesFactory: Preferences) {}
 
@@ -62,4 +63,13 @@ export class PreferencesStore {
         const saved = localStorage.getItem(PreferencesStore.disclaimerKey);
         return saved !== PreferencesStore.disclaimerValue;
     }
+
+    public disableShowInstall(): void {
+        localStorage.setItem(PreferencesStore.showInstallKey, PreferencesStore.disclaimerValue);
+    }
+
+    public installEnabled(): boolean {
+        const saved = localStorage.getItem(PreferencesStore.showInstallKey);
+        return saved !== PreferencesStore.disclaimerValue;
+    }
 }
diff --git a/projects/planner/src/app/shared/startUp.ts b/projects/planner/src/app/shared/startUp.ts
@@ -7,7 +7,10 @@ import { ViewStates } from './viewStates';
 
 @Injectable()
 export class DashboardStartUp {
-    public _showDisclaimer = true;
+    private _showDisclaimer = true;
+    private _showInstallButton = false;
+    private allowInstall = false;
+    private deferredPrompt: any;
 
     constructor(
         private location: Location,
@@ -16,12 +19,21 @@ export class DashboardStartUp {
         private viewStore: SubViewStorage,
         private views: ViewStates) {
         this._showDisclaimer = this.preferences.disclaimerEnabled();
+        this._showInstallButton = this.preferences.installEnabled();
     }
 
     public get showDisclaimer(): boolean {
         return this._showDisclaimer;
     }
 
+    public get showInstallButton(): boolean {
+        return this.allowInstall && this._showInstallButton;
+    }
+
+    public get showAppleInstall(): boolean {
+        return true;
+    }
+
     public onDashboard(): void {
         const query = window.location.search;
 
@@ -45,6 +57,11 @@ export class DashboardStartUp {
         this.preferences.disableDisclaimer();
     }
 
+    public stopShowInstallButton(): void {
+        this._showInstallButton = false;
+        this.preferences.disableShowInstall();
+    }
+
     public updateQueryParams(): void {
         let urlParams = this.urlSerialization.toUrl();
         const maxUrlRecommendedLength = 2048;
@@ -59,4 +76,23 @@ export class DashboardStartUp {
 
         this.location.go(urlParams);
     }
+
+    public onbeforeinstallprompt(e: Event): void {
+        e.preventDefault();
+        this.deferredPrompt = e;
+        this.allowInstall = true;
+    }
+
+    public addToHomeScreen(): void {
+        this.allowInstall = false;
+        this.stopShowInstallButton();
+
+        if (this.deferredPrompt) {
+            this.deferredPrompt.prompt();
+            this.deferredPrompt.userChoice
+                .then((choiceResult: any) => {
+                    this.deferredPrompt = null;
+                });
+        }
+    }
 }
diff --git a/projects/planner/src/index.html b/projects/planner/src/index.html
@@ -12,7 +12,7 @@
     <meta name="theme-color" content="#1976d2">
 
     <!-- Apple iOs, iPhone support -->
-    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
     <link rel="apple-touch-icon" href="assets/icons/icon-72x72.png">
     <link rel="apple-touch-icon" sizes="152x152" href="assets/icons/apple-icon-152.png">
     <link rel="apple-touch-icon" sizes="167x167" href="assets/icons/apple-icon-167.png">