more efficient subscriptions, more styling

2026-03-30 20:14:49 +00:00 · 2021-07-02 00:05:05 -06:00
parent 330d5a08af
commit da3aa0a2a7
53 changed files with 583 additions and 585 deletions
--- a/ui/src/app/pages/server-routes/developer-routes/dev-options/dev-options.page.html
+++ b/ui/src/app/pages/server-routes/developer-routes/dev-options/dev-options.page.html
@@ -9,7 +9,7 @@

 <ion-content class="ion-padding-top">

-  <ion-item-group *ngrxLet="patch.watch$('server-info') as server">
+  <ion-item-group>
    <ion-item detail="true" button [routerLink]="['ssh-keys']">
      <ion-label>SSH Keys</ion-label>
    </ion-item>
--- a/ui/src/app/pages/server-routes/developer-routes/dev-options/dev-options.page.ts
+++ b/ui/src/app/pages/server-routes/developer-routes/dev-options/dev-options.page.ts
@@ -1,6 +1,8 @@
 import { Component } from '@angular/core'
 import { ServerConfigService } from 'src/app/services/server-config.service'
 import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { ServerInfo } from 'src/app/models/patch-db/data-model'
+import { Subscription } from 'rxjs'

@Component({
  selector: 'dev-options',
@@ -8,12 +10,27 @@ import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
  styleUrls: ['./dev-options.page.scss'],
 })
 export class DevOptionsPage {
+  server: ServerInfo = { } as any
+  subs: Subscription[] = []

  constructor (
    private readonly serverConfigService: ServerConfigService,
-    public readonly patch: PatchDbModel,
+    private readonly patch: PatchDbModel,
  ) { }

+  ngOnInit () {
+    this.subs = [
+      this.patch.watch$('server-info')
+      .subscribe(server => {
+        this.server = server
+      }),
+    ]
+  }
+
+  ngOnDestroy () {
+    this.subs.forEach(sub => sub.unsubscribe())
+  }
+
  async presentModalValueEdit (key: string, current?: any): Promise<void> {
    await this.serverConfigService.presentModalValueEdit(key, current)
  }
--- a/ui/src/app/pages/server-routes/developer-routes/dev-ssh-keys/dev-ssh-keys.page.html
+++ b/ui/src/app/pages/server-routes/developer-routes/dev-ssh-keys/dev-ssh-keys.page.html
@@ -4,6 +4,11 @@
      <pwa-back-button></pwa-back-button>
    </ion-buttons>
    <ion-title>SSH Keys</ion-title>
+    <ion-buttons slot="end" class="ion-padding-end">
+      <ion-button (click)="presentModalAdd()">
+        <ion-icon slot="icon-only" name="add-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
  </ion-toolbar>
 </ion-header>

@@ -16,7 +21,7 @@

  <ion-item-group>
    <ion-item-divider>Saved Keys</ion-item-divider>
-    <ion-item *ngFor="let ssh of sshService.watch$() | ngrxPush | keyvalue : asIsOrder">
+    <ion-item *ngFor="let ssh of sshKeys | keyvalue : asIsOrder">
      <ion-label class="ion-text-wrap">
        {{ ssh.value.alg }} {{ ssh.key }} {{ ssh.value.hostname }}
      </ion-label>
@@ -26,10 +31,4 @@
    </ion-item>
  </ion-item-group>

-  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button (click)="presentModalAdd()" class="fab-button">
-      <ion-icon name="add"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
 </ion-content>
--- a/ui/src/app/pages/server-routes/developer-routes/dev-ssh-keys/dev-ssh-keys.page.ts
+++ b/ui/src/app/pages/server-routes/developer-routes/dev-ssh-keys/dev-ssh-keys.page.ts
@@ -3,6 +3,8 @@ import { ServerConfigService } from 'src/app/services/server-config.service'
 import { AlertController } from '@ionic/angular'
 import { LoaderService } from 'src/app/services/loader.service'
 import { SSHService } from './ssh.service'
+import { Subscription } from 'rxjs'
+import { SSHKeys } from 'src/app/services/api/api-types'

@Component({
  selector: 'dev-ssh-keys',
@@ -12,18 +14,31 @@ import { SSHService } from './ssh.service'
 export class DevSSHKeysPage {
  error = ''
  loading = true
+  sshKeys: SSHKeys
+  subs: Subscription[] = []

  constructor (
    private readonly loader: LoaderService,
    private readonly serverConfigService: ServerConfigService,
    private readonly alertCtrl: AlertController,
-    public readonly sshService: SSHService,
+    private readonly sshService: SSHService,
  ) { }

-  ngOnInit () {
-    this.sshService.getKeys().then(() => {
-      this.loading = false
-    })
+  async ngOnInit () {
+    await this.sshService.getKeys()
+
+    this.subs = [
+      this.sshService.watch$()
+      .subscribe(keys => {
+        this.sshKeys = keys
+      }),
+    ]
+
+    this.loading = false
+  }
+
+  ngOnDestroy () {
+    this.subs.forEach(sub => sub.unsubscribe())
  }

  async presentModalAdd () {
--- a/ui/src/app/pages/server-routes/lan/lan.page.html
+++ b/ui/src/app/pages/server-routes/lan/lan.page.html
@@ -17,8 +17,9 @@
        <h2>You can connect to your Embassy over your Local Area Network (LAN). This can be useful for achieving a faster experience, as well as a fallback in case the Tor network is experiencing issues.</h2>
      </ion-label>
    </ion-item>
-    <ion-item>
-      <ion-button slot="start" fill="clear" color="primary" [href]="docsUrl" target="_blank">View Instructions</ion-button>
+    <ion-item [href]="docsUrl" target="_blank" detail="false">
+      <ion-icon slot="start" name="list-outline"></ion-icon>
+      <ion-label>View Instructions</ion-label>
    </ion-item>

    <ng-container *ngIf="lanDisabled">
@@ -39,11 +40,9 @@
        <h2>If you are having issues connecting to your Embassy over LAN, try refreshing the network by clicking the button below.</h2>
      </ion-label>
    </ion-item>
-    <ion-item>
-      <ion-button slot="start" fill="clear" (click)="refreshLAN()">
-        <ion-icon slot="start" name="refresh-outline"></ion-icon>
-        Refresh Network
-      </ion-button>
+    <ion-item button (click)="refreshLAN()" detail="false">
+      <ion-icon slot="start" name="refresh-outline"></ion-icon>
+      <ion-label>Refresh Network</ion-label>
    </ion-item>

    <ion-item-divider></ion-item-divider>
@@ -63,7 +62,7 @@
      <ion-item>
        <ion-label class="ion-text-wrap">
          <h2>LAN Address</h2>
-          <p>https://{{ patch.watch$('server-info', 'lan-address') | ngrxPush }}</p>
+          <p>{{ lanAddress }}</p>
        </ion-label>
        <ion-button slot="end" fill="clear" (click)="copyLAN()">
          <ion-icon slot="icon-only" name="copy-outline"></ion-icon>
--- a/ui/src/app/pages/server-routes/lan/lan.page.ts
+++ b/ui/src/app/pages/server-routes/lan/lan.page.ts
@@ -5,6 +5,7 @@ import { ConfigService } from 'src/app/services/config.service'
 import { LoaderService } from 'src/app/services/loader.service'
 import { ApiService } from 'src/app/services/api/api.service'
 import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { Subscription } from 'rxjs'

@Component({
  selector: 'lan',
@@ -19,13 +20,14 @@ export class LANPage {
    NotTor: `For security reasons, you must setup LAN over a Tor connection. Please navigate to your Embassy Tor Address and try again.`,
  }
  readonly docsUrl = 'https://docs.start9.com/user-manual/general/lan-setup'
+  subs: Subscription[] = []

  constructor (
    private readonly toastCtrl: ToastController,
    private readonly config: ConfigService,
    private readonly loader: LoaderService,
    private readonly apiService: ApiService,
-    public readonly patch: PatchDbModel,
+    private readonly patch: PatchDbModel,
  ) { }

  ngOnInit () {
@@ -34,6 +36,16 @@ export class LANPage {
    } else if (!this.config.isTor()) {
      this.lanDisabled = LanSetupIssue.NOT_TOR
    }
+    this.subs = [
+      this.patch.watch$('server-info', 'lan-address')
+      .subscribe(addr => {
+        this.lanAddress = `https://${addr}`
+      }),
+    ]
+  }
+
+  ngOnDestroy () {
+    this.subs.forEach(sub => sub.unsubscribe())
  }

  async refreshLAN (): Promise<void> {
--- a/ui/src/app/pages/server-routes/preferences/preferences.page.html
+++ b/ui/src/app/pages/server-routes/preferences/preferences.page.html
@@ -9,7 +9,7 @@

 <ion-content class="ion-padding-top">

-  <ion-item-group *ngrxLet="patch.watch$('ui') as ui">
+  <ion-item-group>
    <ion-item button (click)="presentModalValueEdit('name', ui['server-name'])">
      <ion-label>Embassy Name</ion-label>
      <ion-note slot="end">{{ ui['server-name'] }}</ion-note>
--- a/ui/src/app/pages/server-routes/preferences/preferences.page.ts
+++ b/ui/src/app/pages/server-routes/preferences/preferences.page.ts
@@ -1,6 +1,8 @@
 import { Component } from '@angular/core'
 import { ServerConfigService } from 'src/app/services/server-config.service'
 import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { Subscription } from 'rxjs'
+import { UIData } from 'src/app/models/patch-db/data-model'

@Component({
  selector: 'preferences',
@@ -8,11 +10,27 @@ import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
  styleUrls: ['./preferences.page.scss'],
 })
 export class PreferencesPage {
+  subs: Subscription[] = []
+  ui: UIData = { } as any
+
  constructor (
    private readonly serverConfigService: ServerConfigService,
-    public readonly patch: PatchDbModel,
+    private readonly patch: PatchDbModel,
  ) { }

+  ngOnInit () {
+    this.subs = [
+      this.patch.watch$('ui')
+      .subscribe(ui => {
+        this.ui = ui
+      }),
+    ]
+  }
+
+  ngOnDestroy () {
+    this.subs.forEach(sub => sub.unsubscribe())
+  }
+
  async presentModalValueEdit (key: string, current?: string): Promise<void> {
    await this.serverConfigService.presentModalValueEdit(key, current)
  }
--- a/ui/src/app/pages/server-routes/server-backup/server-backup.page.html
+++ b/ui/src/app/pages/server-routes/server-backup/server-backup.page.html
@@ -4,9 +4,9 @@
      <pwa-back-button></pwa-back-button>
    </ion-buttons>
    <ion-title>Create Backup</ion-title>
-    <ion-buttons slot="end">
-      <ion-button (click)="doRefresh()" color="primary">
-        <ion-icon slot="icon-only" name="reload-outline"></ion-icon>
+    <ion-buttons slot="end" class="ion-padding-end">
+      <ion-button (click)="doRefresh()">
+        <ion-icon slot="icon-only" name="refresh-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
--- a/ui/src/app/pages/server-routes/server-logs/server-logs.page.html
+++ b/ui/src/app/pages/server-routes/server-logs/server-logs.page.html
@@ -5,8 +5,8 @@
    </ion-buttons>
    <ion-title>Logs</ion-title>
    <ion-buttons slot="end" class="ion-padding-end">
-      <ion-button (click)="getLogs()" color="primary">
-        <ion-icon name="refresh-outline"></ion-icon>
+      <ion-button (click)="getLogs()">
+        <ion-icon slot="icon-only" name="refresh-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
--- a/ui/src/app/pages/server-routes/server-show/server-show.page.html
+++ b/ui/src/app/pages/server-routes/server-show/server-show.page.html
@@ -1,6 +1,6 @@
 <ion-header>
  <ion-toolbar>
-    <ion-title>{{ patch.watch$('ui', 'server-name') | ngrxPush }}</ion-title>
+    <ion-title>{{ patch.watch$('ui', 'server-name') | async }}</ion-title>
    <ion-buttons slot="end">
      <badge-menu-button></badge-menu-button>
    </ion-buttons>
--- a/ui/src/app/pages/server-routes/server-specs/server-specs.page.html
+++ b/ui/src/app/pages/server-routes/server-specs/server-specs.page.html
@@ -11,7 +11,7 @@

  <ion-item-divider>Basic</ion-item-divider>

-  <ion-item-group *ngIf="patch.watch$('server-info') | ngrxPush as server">
+  <ion-item-group *ngIf="server">
    <ion-item>
      <ion-label>
        <h2>Version</h2>
--- a/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts
+++ b/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts
@@ -2,6 +2,8 @@ import { Component } from '@angular/core'
 import { ToastController } from '@ionic/angular'
 import { copyToClipboard } from 'src/app/util/web.util'
 import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { ServerInfo } from 'src/app/models/patch-db/data-model'
+import { Subscription } from 'rxjs'

@Component({
  selector: 'server-specs',
@@ -9,12 +11,27 @@ import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
  styleUrls: ['./server-specs.page.scss'],
 })
 export class ServerSpecsPage {
+  server: ServerInfo
+  subs: Subscription[] = []

  constructor (
    private readonly toastCtrl: ToastController,
-    public readonly patch: PatchDbModel,
+    private readonly patch: PatchDbModel,
  ) { }

+  ngOnInit () {
+    this.subs = [
+      this.patch.watch$('server-info')
+      .subscribe(server => {
+        this.server = server
+      }),
+    ]
+  }
+
+  ngOnDestroy () {
+    this.subs.forEach(sub => sub.unsubscribe())
+  }
+
  async copy (address: string) {
    let message = ''
    await copyToClipboard(address || '')
--- a/ui/src/app/pages/server-routes/wifi/wifi.page.html
+++ b/ui/src/app/pages/server-routes/wifi/wifi.page.html
@@ -4,6 +4,11 @@
      <pwa-back-button></pwa-back-button>
    </ion-buttons>
    <ion-title>WiFi Settings</ion-title>
+    <ion-buttons slot="end" class="ion-padding-end">
+      <ion-button [routerLink]="['add']">
+        <ion-icon slot="icon-only" name="add-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
  </ion-toolbar>
 </ion-header>

@@ -17,13 +22,11 @@
      <ion-label class="ion-text-wrap">
        <p style="padding-bottom: 6px;">About</p>
        <h2>Embassy will automatically connect to available networks, allowing you to remove the Ethernet cable.</h2>
-        <br />
-        <h2>Connecting, disconnecting, or changing WiFi networks can cause your Embassy and its services to become unreachable for up to an hour. Please be patient.</h2>
      </ion-label>
    </ion-item>

    <ion-item-divider>Saved Networks</ion-item-divider>
-    <ng-container *ngIf="patch.watch$('server-info', 'wifi') | ngrxPush as wifi">
+    <ng-container *ngIf="wifi">
      <ion-item button detail="false" *ngFor="let ssid of wifi.ssids" (click)="presentAction(ssid, wifi)">
        <ion-label>{{ ssid }}</ion-label>
        <ion-icon *ngIf="ssid === wifi.connected" name="wifi" color="success"></ion-icon>
@@ -31,10 +34,4 @@
    </ng-container>
  </ion-item-group>

-  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button [routerLink]="['add']" class="fab-button">
-      <ion-icon name="add"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
-
 </ion-content>
--- a/ui/src/app/pages/server-routes/wifi/wifi.page.ts
+++ b/ui/src/app/pages/server-routes/wifi/wifi.page.ts
@@ -6,6 +6,7 @@ import { WifiService } from './wifi.service'
 import { LoaderService } from 'src/app/services/loader.service'
 import { WiFiInfo } from 'src/app/models/patch-db/data-model'
 import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { Subscription } from 'rxjs'

@Component({
  selector: 'wifi',
@@ -14,15 +15,30 @@ import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
 })
 export class WifiListPage {
  error = ''
+  wifi: WiFiInfo
+  subs: Subscription[] = []

  constructor (
    private readonly apiService: ApiService,
    private readonly loader: LoaderService,
    private readonly actionCtrl: ActionSheetController,
    private readonly wifiService: WifiService,
-    public readonly patch: PatchDbModel,
+    private readonly patch: PatchDbModel,
  ) { }

+  ngOnInit () {
+    this.subs = [
+      this.patch.watch$('server-info', 'wifi')
+      .subscribe(wifi => {
+        this.wifi = wifi
+      }),
+    ]
+  }
+
+  ngOnDestroy () {
+    this.subs.forEach(sub => sub.unsubscribe())
+  }
+
  async presentAction (ssid: string, wifi: WiFiInfo) {
    const buttons: ActionSheetButton[] = [
      {
--- a/ui/src/app/pages/server-routes/wifi/wifi.service.ts
+++ b/ui/src/app/pages/server-routes/wifi/wifi.service.ts
@@ -57,7 +57,7 @@ export class WifiService {
          },
        },
      ],
-      cssClass: 'notification-toast-error',
+      cssClass: 'notification-toast',
    })

    await toast.present()