From 50a2be243aaef3bc1727015e79a8e387e73b8ee8 Mon Sep 17 00:00:00 2001
From: Matt Hill <matthewonthemoon@gmail.com>
Date: Wed, 27 Jan 2021 22:11:52 -0700
Subject: [PATCH] implement base ui for LAN services

---
 .../app-installed-list.page.html              |  2 +-
 .../app-installed-list.page.ts                | 12 +++++++---
 .../app-installed-show.page.html              | 24 +++++++++++++------
 .../app-installed-show.page.ts                | 14 +++++++++--
 4 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.html b/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.html
index 6f198a0e6..e1c4f8214 100644
--- a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.html
+++ b/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.html
@@ -26,7 +26,7 @@
 
           <ion-card class="installed-card" [class.installed-card-on]="vars.status === 'RUNNING'" style="position:relative" [routerLink]="['/services', 'installed', app.id]">
             <div class="launch-container" *ngIf="vars.ui && !isConsulate">
-              <div class="launch-button-triangle"  (click)="launchUiTab(vars.tor, $event)" [class.disabled]="vars.status !== AppStatus.RUNNING || !isTor">
+              <div class="launch-button-triangle"  (click)="launchUiTab(vars.tor, app.id, $event)" [class.disabled]="vars.status !== AppStatus.RUNNING || !isTor">
                 <ion-icon class="launch-button-triangle-icon" name="globe-outline"></ion-icon>
               </div>
             </div>
diff --git a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.ts b/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.ts
index 5ef1a916d..db86ec051 100644
--- a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.ts
+++ b/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.ts
@@ -99,11 +99,17 @@ export class AppInstalledListPage extends Cleanup {
 
   }
 
-  async launchUiTab (address: string, event: Event) {
+  async launchUiTab (torAddress: string, id: string, event: Event) {
     event.preventDefault()
     event.stopPropagation()
-    address = address.startsWith('http') ? address : `http://${address}`
-    return window.open(address, '_blank')
+
+    let uiAddress: string
+    if (this.isTor) {
+      uiAddress = torAddress.startsWith('http') ? torAddress : `http://${torAddress}`
+    } else {
+      uiAddress = `https://${id}.${this.serverModel.peek().serverId}.local`
+    }
+    return window.open(uiAddress, '_blank')
   }
 
   async doRefresh (event: any) {
diff --git a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.html b/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.html
index 333c85c30..6ceb55e72 100644
--- a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.html
+++ b/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.html
@@ -93,14 +93,24 @@
 
     <ng-container *ngIf="app && app.id && vars.status !== 'INSTALLING'">
       <ion-item-group class="ion-padding-bottom">
-        <ion-item-divider>Tor Address</ion-item-divider>
-        <ion-item lines="none">
-          <ion-label style="display: flex; justify-content: space-between; align-items: center;" class="ion-text-wrap">
-            <p style="color: var(--ion-color-dark)">{{ vars.torAddress }}</p>
-            <ion-button slot="end" fill="clear" (click)="copyTor()">
-              <ion-icon slot="icon-only" name="copy-outline" color="primary"></ion-icon>
-            </ion-button>
+        <ion-item-divider>Addresses</ion-item-divider>
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            <h2>Tor Address</h2>
+            <p>{{ vars.torAddress }}</p>
           </ion-label>
+          <ion-button slot="end" fill="clear" (click)="copyTor()">
+            <ion-icon slot="icon-only" name="copy-outline" color="primary"></ion-icon>
+          </ion-button>
+        </ion-item>
+        <ion-item lines="none">
+          <ion-label class="ion-text-wrap">
+            <h2>LAN Address</h2>
+            <p>{{ lanAddress }}</p>
+          </ion-label>
+          <ion-button slot="end" fill="clear" (click)="copyTor()">
+            <ion-icon slot="icon-only" name="copy-outline" color="primary"></ion-icon>
+          </ion-button>
         </ion-item>
 
         <ion-item-divider>Backups</ion-item-divider>
diff --git a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.ts b/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.ts
index 32a02307e..19a8ecd64 100644
--- a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.ts
+++ b/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.ts
@@ -19,6 +19,7 @@ import { InformationPopoverComponent } from 'src/app/components/information-popo
 import { Emver } from 'src/app/services/emver.service'
 import { displayEmver } from 'src/app/pipes/emver.pipe'
 import { ConfigService } from 'src/app/services/config.service'
+import { ServerModel } from 'src/app/models/server-model'
 
 @Component({
   selector: 'app-installed-show',
@@ -31,6 +32,7 @@ export class AppInstalledShowPage extends Cleanup {
 
   $error$ = new BehaviorSubject<string>('')
   app: PropertySubject<AppInstalledFull> = { } as any
+  lanAddress = ''
   appId: string
   AppStatus = AppStatus
   showInstructions = false
@@ -57,6 +59,7 @@ export class AppInstalledShowPage extends Cleanup {
     private readonly appModel: AppModel,
     private readonly popoverController: PopoverController,
     private readonly emver: Emver,
+    private readonly serverModel: ServerModel,
     config: ConfigService,
   ) {
     super()
@@ -66,6 +69,8 @@ export class AppInstalledShowPage extends Cleanup {
 
   async ngOnInit () {
     this.appId = this.route.snapshot.paramMap.get('appId') as string
+    const server = this.serverModel.peek()
+    this.lanAddress = `https://${this.appId}.${server.serverId}.local`
 
     this.cleanup(
       markAsLoadingDuring$(this.$loading$, this.preload.appFull(this.appId))
@@ -103,8 +108,13 @@ export class AppInstalledShowPage extends Cleanup {
   }
 
   async launchUiTab () {
-    let uiAddress = this.app.torAddress.getValue()
-    uiAddress = uiAddress.startsWith('http') ? uiAddress : `http://${uiAddress}`
+    let uiAddress: string
+    if (this.isTor) {
+      const torAddress = this.app.torAddress.getValue()
+      uiAddress = torAddress.startsWith('http') ? torAddress : `http://${torAddress}`
+    } else {
+      uiAddress = this.lanAddress
+    }
     return window.open(uiAddress, '_blank')
   }