From edc37e33f16522cdba4da2904464d95ed6228f75 Mon Sep 17 00:00:00 2001 From: Matt Hill Date: Tue, 13 Jul 2021 10:18:08 -0600 Subject: [PATCH] action inputs --- ui/package-lock.json | 1 - ui/package.json | 1 - ui/src/app/app.component.html | 4 +- .../app-action-input.module.ts | 19 +++++++ .../app-action-input.page.html | 27 +++++++++ .../app-action-input.page.scss | 0 .../app-action-input/app-action-input.page.ts | 55 +++++++++++++++++++ .../app-config-value/app-config-value.page.ts | 2 +- ui/src/app/modals/markdown/markdown.page.html | 2 +- .../app-actions/app-actions.module.ts | 2 + .../app-actions/app-actions.page.ts | 46 +++++++++++----- .../app-instructions.module.ts | 2 + .../app-instructions.page.html | 2 +- .../apps-routes/app-list/app-list.page.html | 2 +- .../apps-routes/app-logs/app-logs.module.ts | 2 + .../apps-routes/app-logs/app-logs.page.html | 4 +- .../app-properties/app-properties.module.ts | 2 + .../app-properties/app-properties.page.html | 2 +- .../apps-routes/app-show/app-show.page.html | 14 ++--- .../apps-routes/app-show/app-show.page.ts | 6 +- .../marketplace-show.page.html | 2 +- ui/src/app/services/loader.service.ts | 8 --- .../app/services/startup-alerts.notifier.ts | 1 - 23 files changed, 160 insertions(+), 46 deletions(-) create mode 100644 ui/src/app/modals/app-action-input/app-action-input.module.ts create mode 100644 ui/src/app/modals/app-action-input/app-action-input.page.html create mode 100644 ui/src/app/modals/app-action-input/app-action-input.page.scss create mode 100644 ui/src/app/modals/app-action-input/app-action-input.page.ts diff --git a/ui/package-lock.json b/ui/package-lock.json index 1f1997515..69c275baf 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -17,7 +17,6 @@ "@ionic/angular": "^5.6.0", "@ionic/storage": "^3.0.0", "@ionic/storage-angular": "^3.0.0", - "@ngrx/component": "^11.1.1", "@start9labs/emver": "^0.1.4", "ajv": "^6.12.6", "angularx-qrcode": "^11.0.0", diff --git a/ui/package.json b/ui/package.json index ef0e6550a..5a118b99d 100644 --- a/ui/package.json +++ b/ui/package.json @@ -13,7 +13,6 @@ "lint": "ng lint", "e2e": "ng e2e" }, - "private": true, "dependencies": { "@angular/common": "^11.0.0", "@angular/core": "^11.0.0", diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html index c775eb98d..75de58045 100644 --- a/ui/src/app/app.component.html +++ b/ui/src/app/app.component.html @@ -36,8 +36,8 @@ - - + + diff --git a/ui/src/app/modals/app-action-input/app-action-input.module.ts b/ui/src/app/modals/app-action-input/app-action-input.module.ts new file mode 100644 index 000000000..10465c32a --- /dev/null +++ b/ui/src/app/modals/app-action-input/app-action-input.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core' +import { CommonModule } from '@angular/common' +import { IonicModule } from '@ionic/angular' +import { AppActionInputPage } from './app-action-input.page' +import { ObjectConfigComponentModule } from 'src/app/components/object-config/object-config.component.module' +import { ConfigHeaderComponentModule } from 'src/app/components/config-header/config-header.component.module' + +@NgModule({ + declarations: [AppActionInputPage], + imports: [ + CommonModule, + IonicModule, + ObjectConfigComponentModule, + ConfigHeaderComponentModule, + ], + entryComponents: [AppActionInputPage], + exports: [AppActionInputPage], +}) +export class AppActionInputPageModule { } \ No newline at end of file diff --git a/ui/src/app/modals/app-action-input/app-action-input.page.html b/ui/src/app/modals/app-action-input/app-action-input.page.html new file mode 100644 index 000000000..bc17ab980 --- /dev/null +++ b/ui/src/app/modals/app-action-input/app-action-input.page.html @@ -0,0 +1,27 @@ + + + + + + + + {{ action.name }} + + + Save + + + + + + + + + + + + + + + + diff --git a/ui/src/app/modals/app-action-input/app-action-input.page.scss b/ui/src/app/modals/app-action-input/app-action-input.page.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ui/src/app/modals/app-action-input/app-action-input.page.ts b/ui/src/app/modals/app-action-input/app-action-input.page.ts new file mode 100644 index 000000000..403b049bb --- /dev/null +++ b/ui/src/app/modals/app-action-input/app-action-input.page.ts @@ -0,0 +1,55 @@ +import { Component, Input } from '@angular/core' +import { LoadingController, ModalController } from '@ionic/angular' +import { ConfigCursor } from 'src/app/pkg-config/config-cursor' +import { ValueSpecObject } from 'src/app/pkg-config/config-types' +import { LoaderService } from 'src/app/services/loader.service' +import { Action } from 'src/app/services/patch-db/data-model' + +@Component({ + selector: 'app-action-input', + templateUrl: './app-action-input.page.html', + styleUrls: ['./app-action-input.page.scss'], +}) +export class AppActionInputPage { + @Input() action: Action + @Input() cursor: ConfigCursor<'object'> + @Input() execute: () => Promise + spec: ValueSpecObject + value: object + error: string + + constructor ( + private readonly modalCtrl: ModalController, + private readonly loadingCtrl: LoadingController, + private loaderService: LoaderService, + ) { } + + ngOnInit () { + this.spec = this.cursor.spec() + this.value = this.cursor.config() + this.error = this.cursor.checkInvalid() + } + + async dismiss (): Promise { + this.modalCtrl.dismiss() + } + + async save (): Promise { + this.loaderService.of({ + spinner: 'lines', + message: 'Executing action', + cssClass: 'loader-ontop-of-all', + }).displayDuringAsync(async () => { + try { + await this.execute() + this.modalCtrl.dismiss() + } catch (e) { + this.error = e.message + } + }) + } + + handleObjectEdit (): void { + this.error = this.cursor.checkInvalid() + } +} diff --git a/ui/src/app/modals/app-config-value/app-config-value.page.ts b/ui/src/app/modals/app-config-value/app-config-value.page.ts index 41281d986..be1e57ec5 100644 --- a/ui/src/app/modals/app-config-value/app-config-value.page.ts +++ b/ui/src/app/modals/app-config-value/app-config-value.page.ts @@ -57,7 +57,7 @@ export class AppConfigValuePage { if ((!!this.saveFn && this.edited) || (!this.saveFn && this.error)) { await this.presentAlert() } else { - await this.modalCtrl.dismiss() + await this.modalCtrl.dismiss(this.value) } } diff --git a/ui/src/app/modals/markdown/markdown.page.html b/ui/src/app/modals/markdown/markdown.page.html index 42ae32c2b..f6a7cbf93 100644 --- a/ui/src/app/modals/markdown/markdown.page.html +++ b/ui/src/app/modals/markdown/markdown.page.html @@ -10,7 +10,7 @@ - + {{ error }} diff --git 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 index c8f8af810..a769ef9b9 100644 --- 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], }) diff --git 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 index 68c242168..b647bc1b9 100644 --- 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() diff --git 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 index edd0c012a..ba27bd38c 100644 --- 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, diff --git 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 index e0f42904c..6be97af18 100644 --- 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 @@ - + diff --git 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 index 37034be02..57f9ac3e0 100644 --- 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 @@ - + {{ pkg.value.manifest.title }} diff --git 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 index d40377b13..d815b561a 100644 --- 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], }) diff --git 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 index 2f7347c1e..5844eacb8 100644 --- 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 @@ {{ error }} - + -

{{ logs }}

+
{{ logs }}
 \ No newline at end of file diff --git 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 index 680bdd4ff..ccf65fd53 100644 --- 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], }) diff --git 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 index 4fc2b1cdd..efcf971c4 100644 --- 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 @@ - + diff --git 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 index 8522ee8b9..33f28fa23 100644 --- 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 @@
- - + + Configure - + Stop - + Fix - + Start
@@ -52,11 +52,11 @@ - + - +


diff --git 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 index 5577cdb38..21391d1f0 100644 --- 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: [], diff --git 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 index b1718f32c..901aabfe9 100644 --- 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 @@ - + diff --git a/ui/src/app/services/loader.service.ts b/ui/src/app/services/loader.service.ts index 11dd2559b..ca1f5c930 100644 --- a/ui/src/app/services/loader.service.ts +++ b/ui/src/app/services/loader.service.ts @@ -70,14 +70,6 @@ export function markAsLoadingDuring$ ($trigger$: Subject, o: Observa ) } -export function markAsLoadingDuringP ($trigger$: Subject, p: Promise): Promise { - return markAsLoadingDuring$($trigger$, from(p)).toPromise() -} - -export function markAsLoadingDuringAsync ($trigger$: Subject, thunk: () => Promise): Promise { - return markAsLoadingDuringP($trigger$, fromAsyncP(thunk)) -} - const defaultOptions: () => LoadingOptions = () => ({ spinner: 'lines', diff --git a/ui/src/app/services/startup-alerts.notifier.ts b/ui/src/app/services/startup-alerts.notifier.ts index 3af4e7a2c..a9c09bee6 100644 --- a/ui/src/app/services/startup-alerts.notifier.ts +++ b/ui/src/app/services/startup-alerts.notifier.ts @@ -5,7 +5,6 @@ import { WizardBaker } from '../components/install-wizard/prebaked-wizards' import { OSWelcomePage } from '../modals/os-welcome/os-welcome.page' import { displayEmver } from '../pipes/emver.pipe' import { ApiService } from './api/api.service' -import { RR } from './api/api-types' import { ConfigService } from './config.service' import { Emver } from './emver.service' import { OsUpdateService } from './os-update.service'