From 7844151b5036cd7ca9379ec9b277ac6e2457a6b7 Mon Sep 17 00:00:00 2001 From: Joel Wetzell Date: Wed, 30 Oct 2024 18:44:53 -0500 Subject: [PATCH 1/3] turn import-config component into generic import json --- webui/src/app/app.component.ts | 8 ++- webui/src/app/app.module.ts | 4 +- .../import-config/import-config.component.ts | 30 ---------- .../import-json.component.css} | 0 .../import-json.component.html} | 6 +- .../import-json/import-json.component.ts | 59 +++++++++++++++++++ webui/src/app/services/schema.service.ts | 9 +-- 7 files changed, 75 insertions(+), 41 deletions(-) delete mode 100644 webui/src/app/components/import-config/import-config.component.ts rename webui/src/app/components/{import-config/import-config.component.css => import-json/import-json.component.css} (100%) rename webui/src/app/components/{import-config/import-config.component.html => import-json/import-json.component.html} (58%) create mode 100644 webui/src/app/components/import-json/import-json.component.ts diff --git a/webui/src/app/app.component.ts b/webui/src/app/app.component.ts index 129c98e7..9ed493bf 100644 --- a/webui/src/app/app.component.ts +++ b/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 diff --git a/webui/src/app/app.module.ts b/webui/src/app/app.module.ts index 8d9e2e42..d40cb3ec 100644 --- a/webui/src/app/app.module.ts +++ b/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, diff --git a/webui/src/app/components/import-config/import-config.component.ts b/webui/src/app/components/import-config/import-config.component.ts deleted file mode 100644 index fe4f9834..00000000 --- a/webui/src/app/components/import-config/import-config.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Component } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; -import { MatDialogRef } from '@angular/material/dialog'; -import { SchemaService } from 'src/app/services/schema.service'; - -@Component({ - selector: 'app-import-config', - templateUrl: './import-config.component.html', - styleUrls: ['./import-config.component.css'], -}) -export class ImportConfigComponent { - formGroup?: FormGroup; - - constructor( - private schemaService: SchemaService, - public dialogRef: MatDialogRef - ) { - if (this.schemaService.schema !== undefined) { - this.formGroup = new FormGroup({ - config: new FormControl(null, [Validators.required, schemaService.configValidator(this.schemaService.schema)]), - }); - } - } - - importConfig() { - if (this.formGroup?.valid) { - this.dialogRef.close(JSON.parse(this.formGroup.controls['config'].value)); - } - } -} diff --git a/webui/src/app/components/import-config/import-config.component.css b/webui/src/app/components/import-json/import-json.component.css similarity index 100% rename from webui/src/app/components/import-config/import-config.component.css rename to webui/src/app/components/import-json/import-json.component.css diff --git a/webui/src/app/components/import-config/import-config.component.html b/webui/src/app/components/import-json/import-json.component.html similarity index 58% rename from webui/src/app/components/import-config/import-config.component.html rename to webui/src/app/components/import-json/import-json.component.html index 1023e15e..a4da4b3e 100644 --- a/webui/src/app/components/import-config/import-config.component.html +++ b/webui/src/app/components/import-json/import-json.component.html @@ -1,15 +1,15 @@
-

Import Config

+

{{ this.data.title }}

- +
- +
diff --git a/webui/src/app/components/import-json/import-json.component.ts b/webui/src/app/components/import-json/import-json.component.ts new file mode 100644 index 00000000..317a475c --- /dev/null +++ b/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(MAT_DIALOG_DATA); + + formGroup?: FormGroup; + + constructor( + private schemaService: SchemaService, + public dialogRef: MatDialogRef + ) { + 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)); + } + } +} diff --git a/webui/src/app/services/schema.service.ts b/webui/src/app/services/schema.service.ts index dcdb3476..0cea18e0 100644 --- a/webui/src/app/services/schema.service.ts +++ b/webui/src/app/services/schema.service.ts @@ -617,16 +617,17 @@ export class SchemaService { } } - configValidator(validateSchema: JSONSchemaType) { + 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 }; } }; From 70c42307ec3cbd3ba6ca6c94ebd510a1fbf2f8c7 Mon Sep 17 00:00:00 2001 From: Joel Wetzell Date: Wed, 30 Oct 2024 18:45:11 -0500 Subject: [PATCH 2/3] add copy and import buttons to patch-editor --- .../patch-editor/patch-editor.component.html | 12 ++++++++ .../patch-editor/patch-editor.component.ts | 29 ++++++++++++++++++- 2 files changed, 40 insertions(+), 1 deletion(-) diff --git a/webui/src/app/components/patch-editor/patch-editor.component.html b/webui/src/app/components/patch-editor/patch-editor.component.html index f666ac28..f3a11cbe 100644 --- a/webui/src/app/components/patch-editor/patch-editor.component.html +++ b/webui/src/app/components/patch-editor/patch-editor.component.html @@ -7,6 +7,18 @@ (click)="addMIDIPatch()"> Add MIDI Patch + + + diff --git a/webui/src/app/components/patch-editor/patch-editor.component.ts b/webui/src/app/components/patch-editor/patch-editor.component.ts index 52b8da23..7a439b25 100644 --- a/webui/src/app/components/patch-editor/patch-editor.component.ts +++ b/webui/src/app/components/patch-editor/patch-editor.component.ts @@ -1,5 +1,7 @@ +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'; @@ -7,6 +9,7 @@ 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 !== ''); From ea203321d90d4a8085d212c2d2c3722db8428523 Mon Sep 17 00:00:00 2001 From: Joel Wetzell Date: Wed, 30 Oct 2024 18:45:26 -0500 Subject: [PATCH 3/3] fix dialog ref type in clipboard dialog --- .../components/clipboard-dialog/clipboard-dialog.component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/webui/src/app/components/clipboard-dialog/clipboard-dialog.component.ts b/webui/src/app/components/clipboard-dialog/clipboard-dialog.component.ts index 8bc09ddf..3b5f4f44 100644 --- a/webui/src/app/components/clipboard-dialog/clipboard-dialog.component.ts +++ b/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 + public dialogRef: MatDialogRef ) { this.formGroup = new FormGroup({ clipboard: new FormControl(null, [Validators.required, this.jsonValidator()]),