Merge pull request #20 from Macro-Deck-App/19-add-usb-connection-button

Add USB settings and button

src/app/app.component.html

@@ -1,3 +1,3 @@
 <ion-app>
-  <ion-router-outlet></ion-router-outlet>
+  <ion-nav [root]="rootComponent"></ion-nav>
 </ion-app>

src/app/app.component.ts

@@ -1,11 +1,14 @@
-import {Component, OnInit} from '@angular/core';
+import {AfterViewInit, Component, OnInit} from '@angular/core';
 import {Storage} from "@ionic/storage";
 import {WakelockService} from "./services/wakelock/wakelock.service";
 import {ScreenOrientationService} from "./services/screen-orientation/screen-orientation.service";
 import {SslHandler} from "../../capacitor_plugins/sslhandler/src";
 import {SettingsService} from "./services/settings/settings.service";
 import {DiagnosticService} from "./services/diagnostic/diagnostic.service";
 import {ThemeService} from "./services/theme/theme.service";
+import {HomePage} from "./pages/home/home.page";
+import {environment} from "../environments/environment";
+import {WebHomePage} from "./pages/web-home/web-home.page";
 
 @Component({
   selector: 'app-root',
@@ -21,6 +24,8 @@ export class AppComponent implements OnInit {
               private themeService: ThemeService) {
   }
 
+  rootComponent = environment.webVersion ? WebHomePage : HomePage;
+
   async ngOnInit() {
     await this.storage.create();
     await this.screenOrientationService.updateScreenOrientation();

src/app/app.module.ts

@@ -1,42 +1,45 @@
 import {NgModule, isDevMode} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
-import {RouteReuseStrategy} from '@angular/router';
 
-import {IonicModule, IonicRouteStrategy} from '@ionic/angular';
+import {IonicModule} from '@ionic/angular';
 
-import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {FormsModule} from "@angular/forms";
 import {IonicStorageModule} from "@ionic/storage-angular";
 import {WidgetContentComponentsModule} from "./widget-content-components/widget-content-components.module";
-import { ServiceWorkerModule } from '@angular/service-worker';
+import {ServiceWorkerModule} from '@angular/service-worker';
 import {SettingsModalComponent} from "./pages/shared/modals/settings-modal/settings-modal.component";
 import {HttpClientModule} from "@angular/common/http";
+import {WebHomePageModule} from "./pages/web-home/web-home.module";
+import {HomePageModule} from "./pages/home/home.module";
+import {DeckPageModule} from "./pages/deck/deck.module";
+import {ConnectionLostPageModule} from "./pages/connection-lost/connection-lost.module";
 
 @NgModule({
-    declarations: [
-        AppComponent,
-        SettingsModalComponent
-    ],
-    imports: [
-        BrowserModule,
-        HttpClientModule,
-        IonicModule.forRoot({swipeBackEnabled: false}),
-        IonicStorageModule.forRoot(),
-        AppRoutingModule,
-        FormsModule,
-        WidgetContentComponentsModule,
-        ServiceWorkerModule.register('ngsw-worker.js', {
-          enabled: !isDevMode(),
-          // Register the ServiceWorker as soon as the application is stable
-          // or after 30 seconds (whichever comes first).
-          registrationStrategy: 'registerWhenStable:30000'
-        })
-    ],
-    providers: [
-        {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
-    ],
-    bootstrap: [AppComponent],
+  declarations: [
+    AppComponent,
+    SettingsModalComponent
+  ],
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    IonicModule.forRoot({swipeBackEnabled: false}),
+    IonicStorageModule.forRoot(),
+    FormsModule,
+    WidgetContentComponentsModule,
+    WebHomePageModule,
+    HomePageModule,
+    DeckPageModule,
+    ConnectionLostPageModule,
+    ServiceWorkerModule.register('ngsw-worker.js', {
+      enabled: !isDevMode(),
+      // Register the ServiceWorker as soon as the application is stable
+      // or after 30 seconds (whichever comes first).
+      registrationStrategy: 'registerWhenStable:30000'
+    })
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
 })
 export class AppModule {
 }

src/app/datatypes/connection.ts

@@ -5,5 +5,6 @@ export interface Connection {
   port: number,
   ssl: boolean,
   index: number | undefined,
-  autoConnect: boolean | undefined
+  autoConnect: boolean | undefined,
+  usbConnection: boolean | undefined
 }

src/app/enums/navigation-destination.ts

@@ -0,0 +1,5 @@
+export enum NavigationDestination {
+  Home,
+  Deck,
+  ConnectionLost
+}

src/app/pages/connection-lost/connection-lost.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ConnectionLostPage } from './connection-lost.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule
+  ],
+  declarations: [ConnectionLostPage]
+})
+export class ConnectionLostPageModule {}

src/app/pages/connection-lost/connection-lost.page.html

@@ -0,0 +1,14 @@
+<ion-content>
+  <div class="d-flex justify-content-center align-items-center align-content-center h-100">
+    <div class="d-flex flex-column align-items-center">
+      <div class="icon mb-2"></div>
+      <h4>I lost the connection to the server</h4>
+      <p>I'll try to reconnect in {{retryCountdown}}...</p>
+
+      <div class="d-flex flex-row gap-3 mt-1">
+        <ion-button (click)="connect()">Retry now</ion-button>
+        <ion-button fill="outline" (click)="cancel()">Cancel</ion-button>
+      </div>
+    </div>
+  </div>
+</ion-content>

src/app/pages/connection-lost/connection-lost.page.scss

@@ -0,0 +1,24 @@
+.icon {
+  background-image: url(^assets/icon.png);
+  width: 10rem;
+  height: 10rem;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  transform: scale(.9);
+  animation: pulseAnimation 2s ease 1s infinite normal forwards;
+}
+
+@keyframes pulseAnimation {
+  0% {
+    transform: scale(.9);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(.9);
+  }
+}

src/app/pages/home/connections/connections.page.spec.ts → src/app/pages/connection-lost/connection-lost.page.spec.ts

@@ -1,12 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ConnectionsPage } from './connections.page';
+import { ConnectionLostPage } from './connection-lost.page';
 
-describe('ConnectionsPage', () => {
-  let component: ConnectionsPage;
-  let fixture: ComponentFixture<ConnectionsPage>;
+describe('ConnectionLostPage', () => {
+  let component: ConnectionLostPage;
+  let fixture: ComponentFixture<ConnectionLostPage>;
 
   beforeEach(async(() => {
-    fixture = TestBed.createComponent(ConnectionsPage);
+    fixture = TestBed.createComponent(ConnectionLostPage);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));

src/app/pages/connection-lost/connection-lost.page.ts

@@ -0,0 +1,63 @@
+import {Component} from '@angular/core';
+import {WebsocketService} from "../../services/websocket/websocket.service";
+import {Connection} from "../../datatypes/connection";
+import {Subscription} from "rxjs";
+import {NavigationService} from "../../services/navigation/navigation.service";
+import {NavigationDestination} from "../../enums/navigation-destination";
+import {ViewDidEnter, ViewDidLeave} from "@ionic/angular";
+
+@Component({
+  selector: 'app-connection-lost',
+  templateUrl: './connection-lost.page.html',
+  styleUrls: ['./connection-lost.page.scss'],
+})
+export class ConnectionLostPage implements ViewDidEnter, ViewDidLeave {
+
+  retryCountdown: number = 10;
+
+  connection: Connection | undefined;
+
+  private subscription: Subscription = new Subscription();
+
+  private interval: any;
+
+  constructor(private websocketService: WebsocketService,
+              private navigationService: NavigationService) {
+    this.connection = websocketService.getConnection();
+  }
+
+  ionViewDidLeave() {
+    this.subscription.unsubscribe();
+  }
+
+  async ionViewDidEnter() {
+    this.subscription.add(this.websocketService.connectionFailed.subscribe(() => {
+      this.startRetry();
+    }));
+    await this.startRetry();
+  }
+
+  async startRetry() {
+    this.retryCountdown = 10;
+    this.interval = setInterval(async () => {
+      this.retryCountdown--;
+      if (this.retryCountdown == 0) {
+        await this.connect();
+      }
+    }, 1000);
+  }
+
+  async connect() {
+    clearInterval(this.interval);
+    if (this.connection == undefined) {
+      await this.navigationService.navigateTo(NavigationDestination.Home);
+      return;
+    }
+    await this.websocketService.connectToConnection(this.connection);
+  }
+
+  async cancel() {
+    clearInterval(this.interval);
+    await this.navigationService.navigateTo(NavigationDestination.Home);
+  }
+}

src/app/pages/deck/deck.module.ts

@@ -4,8 +4,6 @@ import { FormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
-import { DeckPageRoutingModule } from './deck-routing.module';
-
 import { DeckPage } from './deck.page';
 import {WidgetGridComponent} from "./widget-grid/widget-grid.component";
 import {WidgetContentComponent} from "./widget-grid/widget-content/widget-content.component";
@@ -15,7 +13,6 @@ import {WidgetContentComponent} from "./widget-grid/widget-content/widget-conten
     CommonModule,
     FormsModule,
     IonicModule,
-    DeckPageRoutingModule
   ],
     declarations: [
         DeckPage,

src/app/pages/deck/deck.page.html

@@ -23,7 +23,7 @@
     </ion-list>
   </ion-content>
   <ion-toolbar>
-    <ion-text class="ms-3">{{version}} | Client Id: {{clientId}}</ion-text>
+    <ion-text class="ms-3">{{ version }} | Client Id: {{ clientId }}</ion-text>
   </ion-toolbar>
 </ion-menu>
 
@@ -32,10 +32,11 @@
     <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-fab-button size="small">
+          <ion-icon name="menu-outline"></ion-icon>
+        </ion-fab-button>
       </ion-menu-toggle>
     </ion-fab>
   </ion-content>
 </div>
+

src/app/pages/deck/deck.page.ts

@@ -1,34 +1,35 @@
-import {AfterViewInit, Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 import {WebsocketService} from "../../services/websocket/websocket.service";
 import {Router} from "@angular/router";
-import {CurrentPlatformService} from "../../services/current-platform/current-platform.service";
 import {SettingsModalComponent} from "../shared/modals/settings-modal/settings-modal.component";
-import {ModalController} from "@ionic/angular";
+import {ModalController, ViewDidEnter, ViewDidLeave} from "@ionic/angular";
 import {environment} from "../../../environments/environment";
 import {SettingsService} from "../../services/settings/settings.service";
 import {DiagnosticService} from "../../services/diagnostic/diagnostic.service";
+import {NavigationService} from "../../services/navigation/navigation.service";
+import {NavigationDestination} from "../../enums/navigation-destination";
 
 @Component({
   selector: 'app-deck',
   templateUrl: './deck.page.html',
   styleUrls: ['./deck.page.scss'],
 })
-export class DeckPage implements AfterViewInit {
+export class DeckPage implements ViewDidEnter {
 
   showMenuButton: boolean = true;
   clientId: string = "";
   version: string = "";
 
   constructor(private websocketService: WebsocketService,
-              private router: Router,
               private modalController: ModalController,
               private settingsService: SettingsService,
-              private diagnosticsService: DiagnosticService) {
+              private diagnosticsService: DiagnosticService,
+              private navigationService: NavigationService) {
   }
 
-  async ngAfterViewInit() {
+  async ionViewDidEnter() {
     if (!this.websocketService.isConnected) {
-      await this.router.navigate([''], {replaceUrl: true});
+      await this.navigationService.navigateTo(NavigationDestination.Home);
     }
 
     this.clientId = await this.settingsService.getClientId();