added additional options to eq presets

Author: nodeful

ui/src/app/sections/effects/equalizers/equalizer.component.ts

@@ -1,5 +1,5 @@
 import { Option, Options } from 'src/app/components/options/options.component'
-import { EqualizerPreset } from './presets/equalizer-presets.component'
+import { AdditionalPresetOption, EqualizerPreset } from './presets/equalizer-presets.component'
 import { Input } from '@angular/core'
 import { MatDialogRef } from '@angular/material'
 import { OptionsDialogComponent } from '../../../components/options-dialog/options-dialog.component'
@@ -14,6 +14,9 @@ export abstract class EqualizerComponent {
     await this.sync()
   }
 
+  additionalPresetOptionLeft?: AdditionalPresetOption
+  additionalPresetOptionRight?: AdditionalPresetOption
+
   abstract selectPreset (preset: EqualizerPreset)
   abstract deletePreset ()
   abstract savePreset (name: string)

ui/src/app/sections/effects/equalizers/equalizers.component.html

@@ -40,7 +40,9 @@
     (presetSelected)="selectPreset($event)"
     (presetSaved)="savePreset($event)"
     (presetDeleted)="deletePreset()"
-  ></eqm-equalizer-presets> 
+    [additionalLeftOption]="activeEqualizer.additionalPresetOptionLeft"
+    [additionalLeftOption]="activeEqualizer.additionalPresetOptionRight"
+  ></eqm-equalizer-presets>
 </div>
 <eqm-loading *ngIf="!loaded"></eqm-loading>
 <eqm-carousel class="equalizers" #equalizersCarousel [hidden]="!loaded" 

ui/src/app/sections/effects/equalizers/presets/equalizer-presets.component.html

@@ -1,12 +1,15 @@
 <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
     <!-- Left buttons -->
-    <!-- <div class="button-container">
-      <eqm-button *ngIf="false" 
-        size="square" [height]="20" [width]="20"
-        eqmTooltip="Export Presets">
-        <eqm-icon name="minus" [width]="10" [height]="10" [stroke]="2"></eqm-icon>
+
+    <div class="button-container" *ngIf="additionalLeftOption">
+      <eqm-button 
+        size="square" [height]="20" [width]="20" [disabled]="disabled"
+        (pressed)="additionalLeftOption.action()"
+        [eqmTooltip]="additionalLeftOption.tooltip">
+        <eqm-icon [name]="additionalLeftOption.icon" [width]="10" [height]="10" [stroke]="2"></eqm-icon>
       </eqm-button>
-    </div> -->
+    </div>
+
     <div class="button-container">
       <eqm-button 
         size="square" [height]="20" [width]="20" [disabled]="disabled || selectedPreset?.isDefault"
@@ -32,10 +35,14 @@
         <eqm-icon name="cross" [width]="10" [height]="10" [stroke]="5" [rotate]="45"></eqm-icon>
       </eqm-button>
     </div>
-    <!-- <div class="button-container">
-      <eqm-button *ngIf="false" size="square" [height]="20" [width]="20"
-      eqmTooltip="Import Presets">
-        <eqm-icon name="cross" [width]="10" [height]="10" [stroke]="5" [rotate]="45"></eqm-icon>
+
+    <div class="button-container" *ngIf="additionalRightOption">
+      <eqm-button 
+        size="square" [height]="20" [width]="20" [disabled]="disabled"
+        (pressed)="additionalRightOption.action()"
+        [eqmTooltip]="additionalRightOption.tooltip">
+        <eqm-icon [name]="additionalRightOption.icon" [width]="10" [height]="10" [stroke]="2"></eqm-icon>
       </eqm-button>
-    </div> -->
+    </div>
+
 </div>

ui/src/app/sections/effects/equalizers/presets/equalizer-presets.component.ts

@@ -2,13 +2,20 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 import { MatDialog } from '@angular/material'
 import { PromptDialogComponent } from 'src/app/components/prompt-dialog/prompt-dialog.component'
 import { ConfirmDialogComponent } from 'src/app/components/confirm-dialog/confirm-dialog.component'
+import { IconName } from '../../../../modules/eqmac-components/components/icon/icons'
 
 export interface EqualizerPreset {
   id?: string
   name: string
   isDefault?: boolean
 }
 
+export interface AdditionalPresetOption {
+  tooltip: string
+  icon: IconName
+  action: () => void | Promise<void>
+}
+
 @Component({
   selector: 'eqm-equalizer-presets',
   templateUrl: './equalizer-presets.component.html',
@@ -21,6 +28,8 @@ export class EqualizerPresetsComponent implements OnInit {
   @Output() presetSelected = new EventEmitter<EqualizerPreset>()
   @Output() presetSaved = new EventEmitter<string>()
   @Output() presetDeleted = new EventEmitter()
+  @Input() additionalLeftOption?: AdditionalPresetOption
+  @Input() additionalRightOption?: AdditionalPresetOption
 
   constructor (
     public dialog: MatDialog