ui: launch buttons, not on consulate

ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.html

@@ -22,18 +22,29 @@
     <ion-grid>
       <ion-row>
         <ion-col *ngFor="let app of apps" sizeXs="4" sizeSm="3" sizeMd="2" sizeLg="2">
-          <ion-card class="installed-card" [class.installed-card-on]="(app.subject.status | async) === 'RUNNING'" style="position:relative" [routerLink]="['/services', 'installed', app.id]">
-            <img style="position: absolute" class="main-img" [src]="app.subject.iconURL | async | iconParse" [alt]="app.subject.title | async" />
+          <ng-container *ngIf="{ tor: app.subject.torAddress | async, status: app.subject.status | async, ui: app.subject.ui | async, iconURL: app.subject.iconURL | async | iconParse, title: app.subject.title | async } as vars"  >
+          <ion-button
+            *ngIf="vars.ui && !isConsulate"
+            [disabled]="vars.status !== AppStatus.RUNNING"
+            [class.launch-button-off]="vars.status !== AppStatus.RUNNING"
+            class="launch-button-transparent"
+            (click)="launchUiTab(vars.tor)"
+          >
+            <ion-icon name="rocket-outline"></ion-icon>
+          </ion-button>
+          <ion-card class="installed-card" [class.installed-card-on]="vars.status === 'RUNNING'" style="position:relative" [routerLink]="['/services', 'installed', app.id]">
+            <img style="position: absolute" class="main-img" [src]="vars.iconURL" [alt]="app.subject.title | async" />
             <img class="main-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
-            <img class="bulb-on"  *ngIf="app.subject.status | async | displayBulb: 'green'" src="assets/img/running-bulb.png"/>
-            <img class="bulb-on"  *ngIf="app.subject.status | async | displayBulb: 'red'" src="assets/img/issue-bulb.png"/>
-            <img class="bulb-on"  *ngIf="app.subject.status | async | displayBulb: 'yellow'" src="assets/img/warning-bulb.png"/>
-            <img class="bulb-off" *ngIf="app.subject.status | async | displayBulb: 'off'" src="assets/img/off-bulb.png"/>
+            <img class="bulb-on"  *ngIf="vars.status | displayBulb: 'green'" src="assets/img/running-bulb.png"/>
+            <img class="bulb-on"  *ngIf="vars.status | displayBulb: 'red'" src="assets/img/issue-bulb.png"/>
+            <img class="bulb-on"  *ngIf="vars.status | displayBulb: 'yellow'" src="assets/img/warning-bulb.png"/>
+            <img class="bulb-off" *ngIf="vars.status | displayBulb: 'off'" src="assets/img/off-bulb.png"/>
             <ion-card-header>
-              <status [appStatus]="app.subject.status | async" size="small"></status>
-              <p>{{ app.subject.title | async }}</p>
+              <status [appStatus]="vars.status" size="small"></status>
+              <p>{{ vars.title }}</p>
             </ion-card-header>
           </ion-card>
+          </ng-container>
         </ion-col>
       </ion-row>
     </ion-grid>

ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.scss

@@ -51,3 +51,35 @@
   width: 13px !important;
   margin: 9px;
 }
+
+.launch-button-opaque {
+  position: absolute;
+  z-index: 1;
+  --border-radius: 100px;
+  width: 42px;
+  height: 42px;
+  right: -5px;
+  top: -5px;
+  --background: #2b2a2b //linear-gradient(120deg, rgb(35, 178, 251, 0.7), transparent);
+  box-shadow: 0 0 4px 2px rgb(91 200 255);
+  border-radius: 100px;
+}
+
+.launch-button-transparent {
+  position: absolute;
+  z-index: 1;
+  --border-radius: 100px;
+  width: 42px;
+  height: 42px;
+  right: -5px;
+  top: -5px;
+  --background: linear-gradient(200deg, rgb(35, 178, 251, 1), rgb(35, 178, 251, 0.25));
+}
+
+.launch-button-off {
+  --background: transparent;
+  --box-shadow: none;
+  ion-icon {
+    color: var(--ion-color-medium);
+  }
+}

ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core'
-import { AppModel } from 'src/app/models/app-model'
+import { AppModel, AppStatus } from 'src/app/models/app-model'
 import { AppInstalledPreview } from 'src/app/models/app-types'
 import { ModelPreload } from 'src/app/models/model-preload'
 import { doForAtLeast } from 'src/app/util/misc.util'
@@ -9,6 +9,7 @@ import { BehaviorSubject, Observable, Subscription } from 'rxjs'
 import { S9Server, ServerModel, ServerStatus } from 'src/app/models/server-model'
 import { SyncDaemon } from 'src/app/services/sync.service'
 import { Cleanup } from 'src/app/util/cleanup'
+import { ConfigService } from 'src/app/services/config.service'
 
 @Component({
   selector: 'app-installed-list',
@@ -21,6 +22,8 @@ export class AppInstalledListPage extends Cleanup {
   $loading$ = new BehaviorSubject(true)
   s9Host$: Observable<string>
 
+  AppStatus = AppStatus
+
   server: PropertySubject<S9Server>
   currentServer: S9Server
   apps: PropertySubjectId<AppInstalledPreview>[] = []
@@ -32,14 +35,17 @@ export class AppInstalledListPage extends Cleanup {
   segmentValue: 'services' | 'embassy' = 'services'
 
   showCertDownload : boolean
+  isConsulate: boolean
 
   constructor (
     private readonly serverModel: ServerModel,
     private readonly appModel: AppModel,
     private readonly preload: ModelPreload,
     private readonly syncDaemon: SyncDaemon,
+    config: ConfigService,
   ) {
     super()
+    this.isConsulate = config.isConsulateAndroid || config.isConsulateIos
   }
 
   ngOnDestroy () {
@@ -50,6 +56,7 @@ export class AppInstalledListPage extends Cleanup {
     this.server = this.serverModel.watch()
     this.apps = []
     this.cleanup(
+
       // serverUpdateSubscription
       this.server.status.subscribe(status => {
         if (status === ServerStatus.UPDATING) {
@@ -87,6 +94,11 @@ export class AppInstalledListPage extends Cleanup {
         this.error = e.message
       },
     })
+
+  }
+
+  async launchUiTab (address: string) {
+    return window.open(address, '_blank')
   }
 
   async doRefresh (event: any) {

ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.html

@@ -76,11 +76,16 @@
           </ion-button>
         </ion-label>
       </ion-item>
-      <!-- TODO get rid of || true below lol. -->
-      <ion-item class="no-cushion-item" *ngIf="vars.ui || true" lines="none">
-        <ion-label style="margin: 10px 0px; display: flex; justify-content: space-between; align-items: center;" class="ion-text-wrap">
-          <ion-button [fill]="vars.status !== 'RUNNING' ? 'outline' : 'solid'" [disabled]="vars.status !== 'RUNNING'"style="width: 100%; padding: 0px 10px" (click)="launchUiTab()">
-            Launch
+
+      <ion-item class="no-cushion-item" *ngIf="vars.ui && !isConsulate" lines="none">
+        <ion-label style="margin: 10px 0px; display: flex; justify-content: left; align-items: center;" class="ion-text-wrap">
+          <ion-button fill="clear" size="small" class="launch-explanation-button" (click)="presentPopover(vars.status === 'RUNNING' ? launchDefinition() : launchOffDefinition(), $event)">
+            <ion-icon color="medium" name="information-circle-outline">
+            </ion-icon>
+          </ion-button>
+          <ion-button  [disabled]="vars.status !== 'RUNNING'" class="launch-button" [class.launch-button-off]="vars.status !== 'RUNNING'" (click)="launchUiTab()">
+            <ion-icon style="position: absolute; z-index: 1; left: 0;" name="rocket-outline"></ion-icon>
+            <ion-text>LAUNCH</ion-text>
           </ion-button>
         </ion-label>
       </ion-item>

ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.scss

@@ -39,3 +39,25 @@
 .no-cushion-item {
   --background: transparent; --padding-start: 0px; --inner-padding-end: 0px; --padding-end: 0px;
 }
+
+.launch-button {
+  width: 100%; 
+  padding: 0px 10px;
+  --background: linear-gradient(200deg, rgb(70 193 255), rgb(70 193 255 / 45%));
+  width: calc(100% - 32px);
+  border-radius: 8px;
+  --border-radius: 8px;
+}
+
+.launch-button-off {
+  --background: #383838;
+  color: var(--ion-color-medium)
+}
+
+.launch-explanation-button {
+  position: absolute;
+  z-index: 1;
+  right: -2px;
+  top: 10px;
+  --border-radius: 100px;
+}

ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.ts

@@ -18,6 +18,7 @@ import { Cleanup } from 'src/app/util/cleanup'
 import { InformationPopoverComponent } from 'src/app/components/information-popover/information-popover.component'
 import { Emver } from 'src/app/services/emver.service'
 import { displayEmver } from 'src/app/pipes/emver.pipe'
+import { ConfigService } from 'src/app/services/config.service'
 
 @Component({
   selector: 'app-installed-show',
@@ -33,8 +34,11 @@ export class AppInstalledShowPage extends Cleanup {
   appId: string
   AppStatus = AppStatus
   showInstructions = false
+  isConsulate: boolean
 
   dependencyDefintion = () => `<span style="font-style: italic">Dependencies</span> are other services which must be installed, configured appropriately, and started in order to start ${this.app.title.getValue()}`
+  launchDefinition = () => `<span style="font-style: italic">Launch A Service</span> <p>This button appears only for services that can be accessed inside the browser. If a service does not have this button, you must access it using another interface, such as a mobile app, desktop app, or another service on the Embassy. Please view the instructions for a service for details on how to use it.</p>`
+  launchOffDefinition = () => `<span style="font-style: italic">Launch A Service</span> <p>This button appears only for services that can be accessed inside the browser. Get your service running in order to launch!</p>`
 
   @ViewChild(IonContent) content: IonContent
 
@@ -51,8 +55,10 @@ export class AppInstalledShowPage extends Cleanup {
     private readonly appModel: AppModel,
     private readonly popoverController: PopoverController,
     private readonly emver: Emver,
+    config: ConfigService,
   ) {
     super()
+    this.isConsulate = config.isConsulateIos || config.isConsulateAndroid
   }
 
   async ngOnInit () {