Subnav (#391)

* begin subnav implementation

* implement subnav AND angular forms for comparison

* unions working-ish, list of enums working

* new form approach almost complete

* finish new forms approach for action inputs and config

* expandable list items and handlebars display

* Config animation (#394)

* config cammel

* config animation

Co-authored-by: Drew Ansbacher <drew.ansbacher@spiredigital.com>

* improve server settings inputs, still needs work

* delete all notifications, styling, and bugs

* contracted by default

Co-authored-by: Drew Ansbacher <drew.ansbacher@gmail.com>
Co-authored-by: Drew Ansbacher <drew.ansbacher@spiredigital.com>

ui/src/app/modals/enum-list/enum-list.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { EnumListPage } from './enum-list.page'
+import { FormsModule } from '@angular/forms'
+
+@NgModule({
+  declarations: [EnumListPage],
+  imports: [
+    CommonModule,
+    IonicModule,
+    FormsModule,
+  ],
+  entryComponents: [EnumListPage],
+  exports: [EnumListPage],
+})
+export class EnumListPageModule { }

ui/src/app/modals/enum-list/enum-list.page.html

@@ -0,0 +1,36 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      {{ spec.name }}
+    </ion-title>
+    <ion-buttons slot="end">
+      <ion-button slot="end" fill="clear" color="primary" (click)="toggleSelectAll()">
+        {{ selectAll ? 'All' : 'None' }}
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-item-group>
+    <ion-item *ngFor="let option of options | keyvalue : asIsOrder">
+      <ion-label>{{ option.key }}</ion-label>
+      <ion-checkbox slot="end" [(ngModel)]="option.value" (click)="toggleSelected(option.key)"></ion-checkbox>
+    </ion-item>
+  </ion-item-group>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-buttons slot="start" class="ion-padding-start">
+      <ion-button fill="outline" (click)="dismiss()">
+        Cancel
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end" class="ion-padding-end">
+      <ion-button fill="outline" color="primary" (click)="save()">
+        Done
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>

ui/src/app/modals/enum-list/enum-list.page.ts

@@ -0,0 +1,56 @@
+import { Component, Input } from '@angular/core'
+import { ModalController } from '@ionic/angular'
+import { ValueSpecListOf } from '../../pkg-config/config-types'
+// import { Range } from '../../pkg-config/config-utilities'
+
+@Component({
+  selector: 'enum-list',
+  templateUrl: './enum-list.page.html',
+  styleUrls: ['./enum-list.page.scss'],
+})
+export class EnumListPage {
+  @Input() key: string
+  @Input() spec: ValueSpecListOf<'enum'>
+  @Input() current: string[]
+  options: { [option: string]: boolean } = { }
+
+  // min: number | undefined
+  // max: number | undefined
+  // minMessage: string
+  // maxMessage: string
+
+  selectAll = true
+
+  constructor (
+    private readonly modalCtrl: ModalController,
+  ) { }
+
+  ngOnInit () {
+    // const range = Range.from(this.spec.range)
+    // this.min = range.integralMin()
+    // this.max = range.integralMax()
+    // this.minMessage = `The minimum number of ${this.key} is ${this.min}.`
+    // this.maxMessage = `The maximum number of ${this.key} is ${this.max}.`
+
+    for (let val of this.spec.spec.values) {
+      this.options[val] = this.current.includes(val)
+    }
+  }
+
+  dismiss () {
+    this.modalCtrl.dismiss()
+  }
+
+  save () {
+    this.modalCtrl.dismiss(Object.keys(this.options).filter(key => this.options[key]))
+  }
+
+  toggleSelectAll () {
+    Object.keys(this.options).forEach(k => this.options[k] = this.selectAll)
+    this.selectAll = !this.selectAll
+  }
+
+  async toggleSelected (key: string) {
+    this.options[key] = !this.options[key]
+  }
+}