revamp wifi, fix error messaging in forms

ui/src/app/modals/app-action-input/app-action-input.page.ts

@@ -1,41 +0,0 @@
-import { Component, Input } from '@angular/core'
-import { FormGroup } from '@angular/forms'
-import { ModalController } from '@ionic/angular'
-import { Action } from 'src/app/services/patch-db/data-model'
-import { FormService } from 'src/app/services/form.service'
-
-@Component({
-  selector: 'app-action-input',
-  templateUrl: './app-action-input.page.html',
-  styleUrls: ['./app-action-input.page.scss'],
-})
-export class AppActionInputPage {
-  @Input() action: Action
-  actionForm: FormGroup
-
-  constructor (
-    private readonly modalCtrl: ModalController,
-    private readonly formService: FormService,
-  ) { }
-
-  ngOnInit () {
-    this.actionForm = this.formService.createForm(this.action['input-spec'])
-  }
-
-  async dismiss (): Promise<void> {
-    this.modalCtrl.dismiss()
-  }
-
-  async save (): Promise<void> {
-    if (this.actionForm.invalid) {
-      this.actionForm.markAllAsTouched()
-      document.getElementsByClassName('validation-error')[0].parentElement.parentElement.scrollIntoView({ behavior: 'smooth' })
-      return
-    }
-    this.modalCtrl.dismiss(this.actionForm.value)
-  }
-
-  asIsOrder () {
-    return 0
-  }
-}

ui/src/app/modals/generic-form/generic-form.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
-import { AppActionInputPage } from './app-action-input.page'
+import { GenericFormPage } from './generic-form.page'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { FormObjectComponentModule } from 'src/app/components/form-object/form-object.component.module'
 
 @NgModule({
-  declarations: [AppActionInputPage],
+  declarations: [GenericFormPage],
   imports: [
     CommonModule,
     IonicModule,
@@ -14,7 +14,7 @@ import { FormObjectComponentModule } from 'src/app/components/form-object/form-o
     ReactiveFormsModule,
     FormObjectComponentModule,
   ],
-  entryComponents: [AppActionInputPage],
-  exports: [AppActionInputPage],
+  entryComponents: [GenericFormPage],
+  exports: [GenericFormPage],
 })
-export class AppActionInputPageModule { }
+export class GenericFormPageModule { }

ui/src/app/modals/generic-form/generic-form.page.html

@@ -1,14 +1,14 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>{{ action.name }}</ion-title>
+    <ion-title>{{ title }}</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content class="ion-padding">
-  <form [formGroup]="actionForm" (ngSubmit)="save()" novalidate>
+  <form [formGroup]="formGroup" (ngSubmit)="save()" novalidate>
     <form-object
-      [objectSpec]="action['input-spec']"
-      [formGroup]="actionForm"
+      [objectSpec]="spec"
+      [formGroup]="formGroup"
     ></form-object>
   </form>
 </ion-content>
@@ -16,13 +16,13 @@
 <ion-footer>
   <ion-toolbar>
     <ion-buttons slot="start" class="ion-padding-start">
-      <ion-button fill="outline" (click)="dismiss()">
+      <ion-button fill="clear" (click)="dismiss()">
         Cancel
       </ion-button>
     </ion-buttons>
     <ion-buttons slot="end" class="ion-padding-end">
-      <ion-button fill="outline" color="primary" (click)="save()">
-        Execute
+      <ion-button *ngFor="let button of buttons" fill="clear" (click)="handleClick(button)">
+        {{ button.text }}
       </ion-button>
     </ion-buttons>
   </ion-toolbar>

ui/src/app/modals/generic-form/generic-form.page.ts

@@ -0,0 +1,46 @@
+import { Component, Input } from '@angular/core'
+import { FormGroup } from '@angular/forms'
+import { ModalController } from '@ionic/angular'
+import { FormService } from 'src/app/services/form.service'
+import { ConfigSpec } from 'src/app/pkg-config/config-types'
+
+export interface ActionButton {
+  text: string
+  handler: (value: any) => Promise<boolean>
+}
+
+@Component({
+  selector: 'generic-form',
+  templateUrl: './generic-form.page.html',
+  styleUrls: ['./generic-form.page.scss'],
+})
+export class GenericFormPage {
+  @Input() title: string
+  @Input() spec: ConfigSpec
+  @Input() buttons: ActionButton[]
+  formGroup: FormGroup
+
+  constructor (
+    private readonly modalCtrl: ModalController,
+    private readonly formService: FormService,
+  ) { }
+
+  ngOnInit () {
+    this.formGroup = this.formService.createForm(this.spec)
+  }
+
+  async dismiss (): Promise<void> {
+    this.modalCtrl.dismiss()
+  }
+
+  async handleClick (button: ActionButton): Promise<void> {
+    if (this.formGroup.invalid) {
+      this.formGroup.markAllAsTouched()
+      document.getElementsByClassName('validation-error')[0].parentElement.parentElement.scrollIntoView({ behavior: 'smooth' })
+      return
+    }
+
+    const success = await button.handler(this.formGroup.value)
+    if (success !== false) this.modalCtrl.dismiss()
+  }
+}