add copy and import buttons to patch-editor

Author: jwetzell

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 !== '');