display QR code for interfaces (#1507)

* display QR code for interfaces

* add play-outline to preloader

Co-authored-by: Matt Hill <matthill@Matt-M1.local>

frontend/projects/ui/src/app/app/preloader/preloader.component.ts

@@ -57,6 +57,7 @@ const ICONS = [
   'pencil',
   'phone-portrait-outline',
   'play-circle-outline',
+  'play-outline',
   'power',
   'pulse',
   'qr-code-outline',

frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces-item.component.html

@@ -1,11 +1,15 @@
 <ion-item>
-  <ion-icon slot="start" size="large" [name]="interface.def.ui ? 'desktop-outline' : 'terminal-outline'"></ion-icon>
+  <ion-icon
+    slot="start"
+    size="large"
+    [name]="interface.def.ui ? 'desktop-outline' : 'terminal-outline'"
+  ></ion-icon>
   <ion-label>
     <h1>{{ interface.def.name }}</h1>
     <h2>{{ interface.def.description }}</h2>
   </ion-label>
 </ion-item>
-<div style="padding-left: 64px;">
+<div style="padding-left: 64px">
   <!-- has tor -->
   <ion-item *ngIf="interface.addresses['tor-address'] as tor">
     <ion-label>
@@ -16,6 +20,13 @@
       <ion-button *ngIf="interface.def.ui" fill="clear" (click)="launch(tor)">
         <ion-icon size="small" slot="icon-only" name="open-outline"></ion-icon>
       </ion-button>
+      <ion-button fill="clear" (click)="showQR(tor)">
+        <ion-icon
+          size="small"
+          slot="icon-only"
+          name="qr-code-outline"
+        ></ion-icon>
+      </ion-button>
       <ion-button fill="clear" (click)="copy(tor)">
         <ion-icon size="small" slot="icon-only" name="copy-outline"></ion-icon>
       </ion-button>
@@ -39,6 +50,13 @@
       <ion-button *ngIf="interface.def.ui" fill="clear" (click)="launch(lan)">
         <ion-icon size="small" slot="icon-only" name="open-outline"></ion-icon>
       </ion-button>
+      <ion-button fill="clear" (click)="showQR(lan)">
+        <ion-icon
+          size="small"
+          slot="icon-only"
+          name="qr-code-outline"
+        ></ion-icon>
+      </ion-button>
       <ion-button fill="clear" (click)="copy(lan)">
         <ion-icon size="small" slot="icon-only" name="copy-outline"></ion-icon>
       </ion-button>
@@ -51,4 +69,4 @@
       <p>N/A</p>
     </ion-label>
   </ion-item>
-</div>
+</div>

frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts

@@ -1,6 +1,6 @@
 import { Component, Input, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { IonContent, ToastController } from '@ionic/angular'
+import { IonContent, ModalController, ToastController } from '@ionic/angular'
 import { getPkgId } from '@start9labs/shared'
 import { getUiInterfaceKey } from 'src/app/services/config.service'
 import {
@@ -9,6 +9,7 @@ import {
 } from 'src/app/services/patch-db/data-model'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { copyToClipboard } from 'src/app/util/web.util'
+import { QRComponent } from 'src/app/components/qr/qr.component'
 
 interface LocalInterface {
   def: InterfaceDef
@@ -90,12 +91,26 @@ export class AppInterfacesPage {
 export class AppInterfacesItemComponent {
   @Input() interface: LocalInterface
 
-  constructor(private readonly toastCtrl: ToastController) {}
+  constructor(
+    private readonly toastCtrl: ToastController,
+    private readonly modalCtrl: ModalController,
+  ) {}
 
   launch(url: string): void {
     window.open(url, '_blank', 'noreferrer')
   }
 
+  async showQR(text: string): Promise<void> {
+    const modal = await this.modalCtrl.create({
+      component: QRComponent,
+      componentProps: {
+        text,
+      },
+      cssClass: 'qr-modal',
+    })
+    await modal.present()
+  }
+
   async copy(address: string): Promise<void> {
     let message = ''
     await copyToClipboard(address || '').then(success => {