Merge pull request #836 from jwetzell/feat/webui-add-export-import-mi…

…di-list

add export import midi list to patch editor

webui/src/app/app.component.ts

@@ -4,7 +4,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { get } from 'lodash-es';
 import { filter } from 'rxjs';
 import { ClipboardDialogComponent } from './components/clipboard-dialog/clipboard-dialog.component';
-import { ImportConfigComponent } from './components/import-config/import-config.component';
+import { ImportJSONComponent } from './components/import-json/import-json.component';
 import { MIDIInfoDialogComponent } from './components/midi-info-dialog/midi-info-dialog.component';
 import { PatchEditorComponent } from './components/patch-editor/patch-editor.component';
 import { ConfigState } from './models/config.models';
@@ -123,9 +123,13 @@ export class AppComponent {
   }
 
   importConfig() {
-    const dialogRef = this.dialog.open(ImportConfigComponent, {
+    const dialogRef = this.dialog.open(ImportJSONComponent, {
       width: '400px',
       height: '400px',
+      data: {
+        schema: this.schemaService.schema,
+        title: 'Import Config',
+      },
     });
 
     dialogRef

webui/src/app/app.module.ts

@@ -24,7 +24,7 @@ import { ActionComponent } from './components/action/action.component';
 import { ArrayFormComponent } from './components/array-form/array-form.component';
 import { ClipboardDialogComponent } from './components/clipboard-dialog/clipboard-dialog.component';
 import { ConfigComponent } from './components/config/config.component';
-import { ImportConfigComponent } from './components/import-config/import-config.component';
+import { ImportJSONComponent } from './components/import-json/import-json.component';
 import { MessageTypeComponent } from './components/message-type/message-type.component';
 import { MIDIInfoDialogComponent } from './components/midi-info-dialog/midi-info-dialog.component';
 import { ParamsFormComponent } from './components/params-form/params-form.component';
@@ -41,7 +41,7 @@ import { TriggerComponent } from './components/trigger/trigger.component';
     MessageTypeComponent,
     ParamsFormComponent,
     ArrayFormComponent,
-    ImportConfigComponent,
+    ImportJSONComponent,
     MIDIInfoDialogComponent,
     ClipboardDialogComponent,
     PatchEditorComponent,

webui/src/app/components/clipboard-dialog/clipboard-dialog.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { CopyService } from 'src/app/services/copy.service';
-import { ImportConfigComponent } from '../import-config/import-config.component';
 
 @Component({
   selector: 'app-clipboard-dialog',
@@ -14,7 +13,7 @@ export class ClipboardDialogComponent {
 
   constructor(
     private copyService: CopyService,
-    public dialogRef: MatDialogRef<ImportConfigComponent>
+    public dialogRef: MatDialogRef<ClipboardDialogComponent>
   ) {
     this.formGroup = new FormGroup({
       clipboard: new FormControl(null, [Validators.required, this.jsonValidator()]),

webui/src/app/components/import-config/import-config.component.html → webui/src/app/components/import-json/import-json.component.html

@@ -1,15 +1,15 @@
 <div class="flex flex-col h-full">
-  <h1 mat-dialog-title>Import Config</h1>
+  <h1 mat-dialog-title>{{ this.data.title }}</h1>
   <ng-container *ngIf="formGroup">
     <div class="flex-auto w-full h-full">
       <form [formGroup]="formGroup" class="w-full h-full p-2">
-        <textarea formControlName="config" placeholder="Paste Config Here" class="w-full h-full pt-1 pl-1"></textarea>
+        <textarea formControlName="json" placeholder="Paste Config Here" class="w-full h-full pt-1 pl-1"></textarea>
       </form>
     </div>
     <div mat-dialog-actions>
       <button mat-button mat-dialog-close>Cancel</button>
       <span class="flex-auto"></span>
-      <button mat-button (click)="importConfig()" [disabled]="!formGroup.valid">Import</button>
+      <button mat-button (click)="importJson()" [disabled]="!formGroup.valid">Import</button>
     </div>
   </ng-container>
 </div>

webui/src/app/components/import-json/import-json.component.ts

@@ -0,0 +1,59 @@
+import { Component, inject } from '@angular/core';
+import { AbstractControl, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { SomeJSONSchema } from 'ajv/dist/types/json-schema';
+import { SchemaService } from 'src/app/services/schema.service';
+
+type ImportJSONComponentData = {
+  schema?: SomeJSONSchema;
+  title: string;
+};
+
+@Component({
+  selector: 'app-import-json',
+  templateUrl: './import-json.component.html',
+  styleUrls: ['./import-json.component.css'],
+})
+export class ImportJSONComponent {
+  readonly data = inject<ImportJSONComponentData>(MAT_DIALOG_DATA);
+
+  formGroup?: FormGroup;
+
+  constructor(
+    private schemaService: SchemaService,
+    public dialogRef: MatDialogRef<ImportJSONComponent>
+  ) {
+    if (this.data.schema !== undefined) {
+      console.log(this.data.schema);
+      this.formGroup = new FormGroup({
+        json: new FormControl(null, [
+          Validators.required,
+          this.isJSON,
+          this.schemaService.jsonValidator(this.data.schema),
+        ]),
+      });
+    } else {
+      this.formGroup = new FormGroup({
+        json: new FormControl(null, [Validators.required, this.isJSON]),
+      });
+    }
+
+    this.formGroup.valueChanges.subscribe(console.log);
+  }
+
+  isJSON(control: AbstractControl): ValidationErrors | null {
+    console.log(control);
+    try {
+      JSON.parse(control.value);
+      return null;
+    } catch (error) {
+      return { json: error };
+    }
+  }
+
+  importJson() {
+    if (this.formGroup?.valid) {
+      this.dialogRef.close(JSON.parse(this.formGroup.controls['json'].value));
+    }
+  }
+}

webui/src/app/components/patch-editor/patch-editor.component.html

@@ -7,6 +7,18 @@
           (click)="addMIDIPatch()">
           Add MIDI Patch
         </button>
+        <button
+          class="px-8 py-1 my-2 ml-2 text-sm text-gray-300 bg-gray-800 border border-gray-500 border-solid rounded-lg"
+          (click)="copyMIDIDevices()">
+          Copy Device List
+        </button>
+
+        <button
+          *ngIf="settingsService.isDummySite"
+          class="px-8 py-1 my-2 ml-2 text-sm text-gray-300 bg-gray-800 border border-gray-500 border-solid rounded-lg"
+          (click)="importMIDIDevices()">
+          Import Device List
+        </button>
       </div>
       <table class="w-full">
         <thead>

webui/src/app/components/patch-editor/patch-editor.component.ts

@@ -1,12 +1,15 @@
+import { Clipboard } from '@angular/cdk/clipboard';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MIDIPatch, NetworkPatch } from '@showbridge/types';
 import { combineLatest, filter, take } from 'rxjs';
 import { MIDIDeviceInfo } from 'src/app/models/events.model';
 import { EventService } from 'src/app/services/event.service';
 import { SettingsService } from 'src/app/services/settings.service';
 import { VarsService } from 'src/app/services/vars.service';
+import { ImportJSONComponent } from '../import-json/import-json.component';
 
 @Component({
   selector: 'app-patch-editor',
@@ -24,7 +27,9 @@ export class PatchEditorComponent {
     public varsService: VarsService,
     private eventService: EventService,
     private snackbar: MatSnackBar,
-    public settingsService: SettingsService
+    public settingsService: SettingsService,
+    private clipboard: Clipboard,
+    private dialog: MatDialog
   ) {
     eventService.protocolStatus$
       .pipe(
@@ -65,6 +70,28 @@ export class PatchEditorComponent {
     this.midiPatches.push({ name: '', port: '' });
   }
 
+  copyMIDIDevices() {
+    this.clipboard.copy(JSON.stringify(this.midiPorts));
+    this.snackbar.open('Device list copied....', undefined, { duration: 3000 });
+  }
+
+  importMIDIDevices() {
+    const dialogRef = this.dialog.open(ImportJSONComponent, {
+      width: '400px',
+      height: '400px',
+      data: {
+        title: 'Import Device List',
+      },
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(filter((result) => !!result && result !== ''))
+      .subscribe((result) => {
+        this.midiPorts = result;
+      });
+  }
+
   savePatches() {
     this.midiPatches = this.midiPatches.filter((patch) => patch.port !== undefined);
     this.networkPatches = this.networkPatches.filter((patch) => patch.host !== '');

webui/src/app/services/schema.service.ts

@@ -617,16 +617,17 @@ export class SchemaService {
     }
   }
 
-  configValidator(validateSchema: JSONSchemaType<ConfigFile>) {
+  jsonValidator(validateSchema: SomeJSONSchema) {
     return (control: AbstractControl): ValidationErrors | null => {
       try {
-        const configObj = JSON.parse(control.value);
-        if (this.ajv.validate(validateSchema, configObj)) {
+        const jsonObj = JSON.parse(control.value);
+        if (this.ajv.validate(validateSchema, jsonObj)) {
           return null;
         } else {
-          return { config: this.ajv.errors };
+          return { json: this.ajv.errors };
         }
       } catch (error) {
+        console.error(error);
         return { json: true };
       }
     };