action inputs

2026-03-30 20:14:49 +00:00 · 2021-07-13 10:18:08 -06:00
parent 15eb13e156
commit edc37e33f1
23 changed files with 160 additions and 46 deletions
--- a/ui/src/app/pages/apps-routes/app-actions/app-actions.module.ts
+++ b/ui/src/app/pages/apps-routes/app-actions/app-actions.module.ts
@@ -6,6 +6,7 @@ import { AppActionsPage } from './app-actions.page'
 import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { QRComponentModule } from 'src/app/components/qr/qr.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
+import { AppActionInputPageModule } from 'src/app/modals/app-action-input/app-action-input.module'

 const routes: Routes = [
  {
@@ -22,6 +23,7 @@ const routes: Routes = [
    PwaBackComponentModule,
    QRComponentModule,
    SharingModule,
+    AppActionInputPageModule,
  ],
  declarations: [AppActionsPage],
 })
--- a/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
+++ b/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
@@ -9,6 +9,9 @@ import { Action, Manifest, PackageDataEntry, PackageMainStatus } from 'src/app/s
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { Subscription } from 'rxjs'
+import { AppConfigObjectPage } from 'src/app/modals/app-config-object/app-config-object.page'
+import { ConfigCursor } from 'src/app/pkg-config/config-cursor'
+import { AppActionInputPage } from 'src/app/modals/app-action-input/app-action-input.page'

@Component({
  selector: 'app-actions',
@@ -46,23 +49,36 @@ export class AppActionsPage {

  async handleAction (pkg: PackageDataEntry, action: { key: string, value: Action }) {
    if ((action.value['allowed-statuses'] as PackageMainStatus[]).includes(pkg.installed.status.main.status)) {
-      const alert = await this.alertCtrl.create({
-        header: 'Confirm',
-        message: `Are you sure you want to execute action "${action.value.name}"? ${action.value.warning || ''}`,
-        buttons: [
-          {
-            text: 'Cancel',
-            role: 'cancel',
+      const inputSpec = action.value['input-spec']
+      if (inputSpec) {
+        const modal = await this.modalCtrl.create({
+          component: AppActionInputPage,
+          componentProps: {
+            action: action.value,
+            cursor: new ConfigCursor(inputSpec, { }),
+            execute: () => this.executeAction(pkg.manifest.id, action.key),
          },
-          {
-            text: 'Execute',
-            handler: () => {
-              this.executeAction(pkg.manifest.id, action.key)
+        })
+        await modal.present()
+      } else {
+        const alert = await this.alertCtrl.create({
+          header: 'Confirm',
+          message: `Are you sure you want to execute action "${action.value.name}"? ${action.value.warning || ''}`,
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
            },
-          },
-        ],
-      })
-      await alert.present()
+            {
+              text: 'Execute',
+              handler: () => {
+                this.executeAction(pkg.manifest.id, action.key)
+              },
+            },
+          ],
+        })
+        await alert.present()
+      }
    } else {
      const statuses = [...action.value['allowedStatuses']]
      const last = statuses.pop()
--- a/ui/src/app/pages/apps-routes/app-instructions/app-instructions.module.ts
+++ b/ui/src/app/pages/apps-routes/app-instructions/app-instructions.module.ts
@@ -5,6 +5,7 @@ import { IonicModule } from '@ionic/angular'
 import { AppInstructionsPage } from './app-instructions.page'
 import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
+import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'

 const routes: Routes = [
  {
@@ -20,6 +21,7 @@ const routes: Routes = [
    RouterModule.forChild(routes),
    PwaBackComponentModule,
    SharingModule,
+    TextSpinnerComponentModule,
  ],
  declarations: [
    AppInstructionsPage,
--- a/ui/src/app/pages/apps-routes/app-instructions/app-instructions.page.html
+++ b/ui/src/app/pages/apps-routes/app-instructions/app-instructions.page.html
@@ -8,7 +8,7 @@
 </ion-header>

 <ion-content class="ion-padding">
-  <ion-spinner *ngIf="loading; else loaded" class="center" name="lines" color="warning"></ion-spinner>
+  <text-spinner *ngIf="loading; else loaded" text="Loading Instructions"></text-spinner>

  <ng-template #loaded>
    <ion-item *ngIf="error" style="margin-bottom: 16px;">
--- a/ui/src/app/pages/apps-routes/app-list/app-list.page.html
+++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.html
@@ -36,7 +36,7 @@
              <img [class]="serviceInfo[pkg.key].bulbInfo.class" [src]="serviceInfo[pkg.key].bulbInfo.img"/>

              <ion-card-header>
-                <status *ngIf="connected" [rendering]="serviceInfo[pkg.key].rendering" size="calc(8px + .4vw)" weight="bold"></status>
+                <status [rendering]="serviceInfo[pkg.key].rendering" size="calc(8px + .4vw)" weight="bold"></status>
                <ion-card-title>{{ pkg.value.manifest.title }}</ion-card-title>
              </ion-card-header>
            </ion-card>
--- a/ui/src/app/pages/apps-routes/app-logs/app-logs.module.ts
+++ b/ui/src/app/pages/apps-routes/app-logs/app-logs.module.ts
@@ -4,6 +4,7 @@ import { Routes, RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
 import { AppLogsPage } from './app-logs.page'
 import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
+import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'

 const routes: Routes = [
  {
@@ -18,6 +19,7 @@ const routes: Routes = [
    IonicModule,
    RouterModule.forChild(routes),
    PwaBackComponentModule,
+    TextSpinnerComponentModule,
  ],
  declarations: [AppLogsPage],
 })
--- a/ui/src/app/pages/apps-routes/app-logs/app-logs.page.html
+++ b/ui/src/app/pages/apps-routes/app-logs/app-logs.page.html
@@ -18,7 +18,7 @@
    <ion-text class="ion-text-wrap" color="danger">{{ error }}</ion-text>
  </ion-item>

-  <ion-spinner *ngIf="!logs" class="center" name="lines" color="warning"></ion-spinner>
+  <text-spinner *ngIf="!logs" text="Loading Logs"></text-spinner>

-  <p style="white-space: pre-line;">{{ logs }}</p>
+  <div style="white-space: pre-line;">{{ logs }}</div>
 </ion-content>
--- a/ui/src/app/pages/apps-routes/app-properties/app-properties.module.ts
+++ b/ui/src/app/pages/apps-routes/app-properties/app-properties.module.ts
@@ -6,6 +6,7 @@ import { AppPropertiesPage } from './app-properties.page'
 import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { QRComponentModule } from 'src/app/components/qr/qr.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
+import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'

 const routes: Routes = [
  {
@@ -22,6 +23,7 @@ const routes: Routes = [
    PwaBackComponentModule,
    QRComponentModule,
    SharingModule,
+    TextSpinnerComponentModule,
  ],
  declarations: [AppPropertiesPage],
 })
--- a/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html
+++ b/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html
@@ -13,7 +13,7 @@
 </ion-header>

 <ion-content class="ion-padding-top">
-  <ion-spinner *ngIf="loading; else loaded" class="center" name="lines" color="warning"></ion-spinner>
+  <text-spinner *ngIf="loading; else loaded" text="Loading Properties"></text-spinner>

  <ng-template #loaded>
    <ion-item *ngIf="error" style="margin-bottom: 16px;">
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.html
+++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.html
@@ -31,17 +31,17 @@
      </ion-item>

      <div class="status-readout">
-        <status *ngIf="connected" size="large" weight="500" [rendering]="rendering"></status>
-        <ion-button *ngIf="(pkgId | status | async) === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
+        <status size="large" weight="500" [rendering]="rendering"></status>
+        <ion-button *ngIf="rendering.feStatus === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
          Configure
        </ion-button>
-        <ion-button *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : (pkgId | status | async)" expand="block" color="danger" (click)="stop()">
+        <ion-button *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : rendering.feStatus" expand="block" color="danger" (click)="stop()">
          Stop
        </ion-button>
-        <ion-button *ngIf="(pkgId | status | async) === FeStatus.DependencyIssue" expand="block" (click)="scrollToRequirements()">
+        <ion-button *ngIf="rendering.feStatus === FeStatus.DependencyIssue" expand="block" (click)="scrollToRequirements()">
          Fix
        </ion-button>
-        <ion-button *ngIf="(pkgId | status | async) === FeStatus.Stopped" expand="block" color="success" (click)="tryStart()">
+        <ion-button *ngIf="rendering.feStatus === FeStatus.Stopped" expand="block" color="success" (click)="tryStart()">
          Start
        </ion-button>
      </div>
@@ -52,11 +52,11 @@
      </ion-button>
    </div>

-    <ng-container *ngIf="!([FeStatus.Installing, FeStatus.Updating, FeStatus.Removing] | includes : pkg.status)">
+    <ng-container *ngIf="!([FeStatus.Installing, FeStatus.Updating, FeStatus.Removing] | includes : rendering.feStatus)">
      <ion-grid class="ion-text-center" style="margin: 0 6px;">
        <ion-row>
          <ion-col *ngFor="let button of buttons" sizeMd="4" sizeSm="6" sizeXs="6">
-              <ion-button style="width: 100%; min-height: 120px;" color="light" [disabled]="button.disabled | includes : pkg.status" (click)="button.action()">
+              <ion-button style="width: 100%; min-height: 120px;" color="light" [disabled]="button.disabled | includes : rendering.feStatus" (click)="button.action()">
                <div>
                  <ion-icon size="large" [name]="button.icon"></ion-icon>
                  <br/><br/>
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
+++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
@@ -7,9 +7,9 @@ import { LoaderService } from 'src/app/services/loader.service'
 import { combineLatest, Observable, of, Subscription } from 'rxjs'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
-import { ConfigService, getManifest } from 'src/app/services/config.service'
+import { ConfigService } from 'src/app/services/config.service'
 import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
-import { DependencyErrorConfigUnsatisfied, DependencyErrorNotInstalled, DependencyErrorType, Manifest, PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
+import { DependencyErrorConfigUnsatisfied, DependencyErrorNotInstalled, DependencyErrorType, PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
 import { FEStatus, PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
 import { ConnectionService } from 'src/app/services/connection.service'

@@ -279,7 +279,7 @@ export class AppShowPage {
      },
      {
        action: () => this.navCtrl.navigateForward(['manifest'], { relativeTo: this.route }),
-        title: 'Package Manifest',
+        title: 'Package Details',
        icon: 'finger-print-outline',
        color: 'danger',
        disabled: [],
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
+++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
@@ -12,7 +12,7 @@

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

-  <text-spinner *ngIf="!marketplaceService.pkgs[pkgId]" [text]="'fetching package'"></text-spinner>
+  <text-spinner *ngIf="!marketplaceService.pkgs[pkgId]" text="Loading Package"></text-spinner>

  <ng-container *ngIf="marketplaceService.pkgs[pkgId] as pkg">
    <ion-item *ngIf="error" style="margin-bottom: 16px;">