refactor(#228): move disconnect remote control

deckgo · Oct 27, 2019 · 60907f3 · 60907f3
1 parent a696abd
commit 60907f3
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 4 deletions.
diff --git a/remote/src/app/app-root.tsx b/remote/src/app/app-root.tsx
@@ -98,6 +98,7 @@ export class AppRoot {
                 <ion-nav id="menu-content"/>
 
                 <ion-modal-controller></ion-modal-controller>
+                <ion-alert-controller></ion-alert-controller>
 
             </ion-app>
         );

diff --git a/remote/src/app/pages/app-remote/app-remote.tsx b/remote/src/app/pages/app-remote/app-remote.tsx
@@ -421,6 +421,30 @@ export class AppRemote {
         await this.accelerometerService.stop();
     }
 
+    private async openDisconnectConfirm() {
+        const alert: HTMLIonAlertElement = await IonControllerUtils.createAlert({
+            header: 'Disconnect',
+            message: 'The remote control must be disconnected from the presentation?',
+            cssClass: 'custom-info',
+            buttons: [
+                {
+                    text: 'No',
+                    role: 'cancel',
+                    handler: () => {
+                        // Nothing
+                    }
+                }, {
+                    text: 'Yes',
+                    handler: async () => {
+                        await this.disconnect();
+                    }
+                }
+            ]
+        });
+
+        await alert.present();
+    }
+
     @Listen('drawing')
     isDrawing(event: CustomEvent) {
         this.drawing = event.detail;
@@ -477,6 +501,10 @@ export class AppRemote {
             <ion-button onClick={() => this.openSlidePicker()}>
                 <ion-icon src="/assets/icons/chapters.svg"></ion-icon>
             </ion-button>
+
+            <ion-button onClick={() => this.openDisconnectConfirm()}>
+                <ion-icon name="log-out"></ion-icon>
+            </ion-button>
         </ion-buttons>;
     }
 
@@ -587,9 +615,7 @@ export class AppRemote {
                     </ion-fab-list>
                     <ion-fab-list side="top">
                         {this.renderExtraActions()}
-                        <ion-fab-button color="medium" onClick={() => this.disconnect()}>
-                            <ion-icon name="log-out"></ion-icon>
-                        </ion-fab-button>
+
                     </ion-fab-list>
                 </ion-fab>
             );

diff --git a/remote/src/app/services/utils/ion-controller-utils.tsx b/remote/src/app/services/utils/ion-controller-utils.tsx
@@ -1,4 +1,4 @@
-import {ModalOptions} from '@ionic/core';
+import {AlertOptions, ModalOptions} from '@ionic/core';
 
 export class IonControllerUtils {
 
@@ -13,4 +13,15 @@ export class IonControllerUtils {
         });
     }
 
+    static createAlert(opts: AlertOptions): Promise<HTMLIonAlertElement> {
+        return new Promise<HTMLIonAlertElement>(async (resolve) => {
+            const alertController: HTMLIonAlertControllerElement = document.querySelector('ion-alert-controller');
+            await alertController.componentOnReady();
+
+            const alert: HTMLIonAlertElement = await alertController.create(opts);
+
+            resolve(alert);
+        });
+    }
+
 }