@mxtommy/kip 1.3.0 → 2.0.1

package/src/app/settings-config/settings-config.component.css

@@ -1,39 +0,0 @@
-.config-size {
-    width: 100%;
-  }
-
-.textheight {
-    height: 120px;
-}
-
-.almost-full-width {
-  width: 90%;
-}
-.server-form {
-  min-width: 150px;
-  max-width: 500px;
-  width: 100%;
-}
-
-.warningText{
-  padding-left: 15px;
-}
-
-.mat-radio-button ~ .mat-radio-button {
-  margin-right: 16px;
-  margin-left: 16px;
-}
-
-.config-row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: 100%;
-}
-.config-column {
-  display: flex;
-  flex-direction: column;
-  flex-basis: 100%;
-  flex: 1;
-  margin: 10px;
-}

package/src/app/settings-config/settings-config.component.html

@@ -1,118 +0,0 @@
-<mat-tab-group>
-  <mat-tab label="Server">
-    <p>Kip configuration can be stored and retrieved from the SignalK server. This enables configuration sharing (Kip Widgets and Kip general settings) with multiple devices. Note you require a token on the server in order to save config.</p>
-    <div class="config-row">
-      <div class="config-column">
-        <mat-card>
-          <form>
-            Load Config from Server <div *ngIf="!supportApplicationData" class="warningText">Node Server version greater than 1.27.0 required</div>
-            <mat-form-field class="almost-full-width">
-              <mat-label>Config Name</mat-label>
-              <mat-select required [formControl]="configLoad">
-                <mat-option *ngFor="let config of possibleConfigs" [value]="config">
-                  {{config.scope}} / {{config.name}}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-            <mat-card-actions align="end">
-              <button mat-raised-button type="button" color="warn" [disabled]="!(configLoad.valid && configLoad.dirty)" (click)='loadServerSettings()'>Load</button>
-            </mat-card-actions>
-
-          </form>
-        </mat-card>
-      </div>
-      <div class="config-column">
-        <mat-card>
-          <form>
-            Save Config to Server<div *ngIf="!supportApplicationData" class="warningText">Node Server version greater than 1.27.0 required</div>
-              <mat-form-field class="almost-full-width">
-                <mat-label>Server Config Name</mat-label>
-                <input matInput name="serverConfigName" placeholder="Config Name" [formControl]="configName">
-              </mat-form-field>
-              <mat-card-actions align="end">
-                <div *ngIf="!hasToken">R/W token required for SignalK Server</div>
-                <div *ngIf="hasToken">
-                  <mat-radio-group aria-label="Scope" [formControl]="configScope">
-                    <mat-radio-button value="global">Global (needs Admin priv)</mat-radio-button>
-                    <mat-radio-button value="user">User</mat-radio-button>
-                  </mat-radio-group>
-                </div>
-                <button mat-raised-button type="button" [disabled]="!hasToken" color="accent"(click)='saveServerSettings()'>Save</button>
-              </mat-card-actions>
-          </form>
-        </mat-card>
-      </div>
-    </div>
-  </mat-tab>
-  <mat-tab label="Browser Config">
-    <form name="appSettingsForm" (ngSubmit)="submitConfig('appConfig')">
-      <mat-expansion-panel>
-        <mat-expansion-panel-header>Application</mat-expansion-panel-header>
-        <mat-form-field class="config-size">
-            <textarea name="jsonConf" class="textheight" matInput placeholder="Raw Application JSON configuration" wrap="off" [(ngModel)]="appJSONConfig"></textarea>
-        </mat-form-field>
-        <mat-action-row>
-          <button mat-raised-button type="submit" color="accent">Save Edits</button>
-        </mat-action-row>
-      </mat-expansion-panel>
-    </form>
-    <form name="widgetSettingsForm" (ngSubmit)="submitConfig('widgetConfig')">
-      <mat-expansion-panel>
-        <mat-expansion-panel-header>Widgets</mat-expansion-panel-header>
-        <mat-form-field class="config-size">
-            <textarea name="jsonConf" class="textheight" matInput placeholder="Raw Widget JSON configuration" wrap="off" [(ngModel)]="widgetJSONConfig"></textarea>
-        </mat-form-field>
-        <mat-action-row>
-          <button mat-raised-button type="submit" color="accent">Save Edits</button>
-        </mat-action-row>
-      </mat-expansion-panel>
-    </form>
-    <form name="layoutSettingsForm" (ngSubmit)="submitConfig('layoutConfig')">
-      <mat-expansion-panel>
-        <mat-expansion-panel-header>Layouts</mat-expansion-panel-header>
-        <mat-form-field class="config-size">
-            <textarea name="jsonConf" class="textheight" matInput placeholder="Raw Layout JSON configuration" wrap="off" [(ngModel)]="layoutJSONConfig"></textarea>
-        </mat-form-field>
-        <mat-action-row>
-          <button mat-raised-button type="submit" color="accent">Save Edits</button>
-        </mat-action-row>
-      </mat-expansion-panel>
-    </form>
-    <form name="themeSettingsForm" (ngSubmit)="submitConfig('themeConfig')">
-      <mat-expansion-panel>
-        <mat-expansion-panel-header>Theme</mat-expansion-panel-header>
-        <mat-form-field class="config-size">
-            <textarea name="jsonConf" class="textheight" matInput placeholder="Raw Theme JSON configuration" wrap="off" [(ngModel)]="themeJSONConfig"></textarea>
-        </mat-form-field>
-        <mat-action-row>
-          <button mat-raised-button type="submit" color="accent">Save Edits</button>
-        </mat-action-row>
-      </mat-expansion-panel>
-    </form>
-    <form name="zoneSettingsForm" (ngSubmit)="submitConfig('zonesConfig')">
-      <mat-expansion-panel>
-        <mat-expansion-panel-header>Zones</mat-expansion-panel-header>
-        <mat-form-field class="config-size">
-            <textarea name="jsonConf" class="textheight" matInput placeholder="Raw Layout JSON configuration" wrap="off" [(ngModel)]="zonesJSONConfig"></textarea>
-        </mat-form-field>
-        <mat-action-row>
-          <button mat-raised-button type="submit" color="accent">Save Edits</button>
-        </mat-action-row>
-      </mat-expansion-panel>
-    </form>    
-  </mat-tab>
-
-  <mat-tab label="Demo/Erase">
-    <mat-card>
-      <mat-card-actions align="end">
-        <button mat-raised-button type="button" color="warn" (click)='loadDemoConfig()'>Load Demo Config</button>
-        <button mat-raised-button type="button" color="warn" (click)='resetSettings()'>Erase Config</button>
-      </mat-card-actions>
-    </mat-card>
-  </mat-tab>
-
-</mat-tab-group>
-
-
- 
- 

package/src/app/settings-config/settings-config.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { SettingsConfigComponent } from './settings-config.component';
-
-describe('SettingsConfigComponent', () => {
-  let component: SettingsConfigComponent;
-  let fixture: ComponentFixture<SettingsConfigComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SettingsConfigComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SettingsConfigComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/app/settings-config/settings-config.component.ts

@@ -1,161 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { FormControl, Validators }    from '@angular/forms';
-
-import { AppSettingsService, IAppConfig, IWidgetConfig, ILayoutConfig, IThemeConfig, IZonesConfig } from '../app-settings.service';
-import { SignalKService } from '../signalk.service';
-import { SignalKConnectionService } from '../signalk-connection.service';
-import { NotificationsService } from '../notifications.service';
-
-interface possibleConfig {
-  name: string
-  scope: string
-}
-
-@Component({
-  selector: 'app-settings-config',
-  templateUrl: './settings-config.component.html',
-  styleUrls: ['./settings-config.component.css']
-})
-export class SettingsConfigComponent implements OnInit {
-
-  appJSONConfig: string = '';
-  widgetJSONConfig: string = '';
-  layoutJSONConfig: string = '';
-  themeJSONConfig: string = '';
-  zonesJSONConfig: string = '';
-
-  hasToken: boolean = false;
-  supportApplicationData: boolean = false;
-  possibleConfigs: possibleConfig[] = [];
-
-  configName = new FormControl("default", [ Validators.required, Validators.pattern("^[a-zA-Z0-9\-_]+$") ]);
-  configScope = new FormControl("global", Validators.required);
-  configLoad = new FormControl(Validators.required);
-
-
-  authTokenSub: Subscription;
-  serverSupportSaveSub: Subscription;
-
-  constructor(
-    private AppSettingsService: AppSettingsService,
-    private SignalKService: SignalKService,
-    private SignalKConnectionService: SignalKConnectionService,
-    private NotificationsService: NotificationsService,
-  ) { }
-
-
-  ngOnInit() {
-    this.serverSupportSaveSub = this.SignalKService.getServerSupportApplicationDataAsO().subscribe(supported => {
-      this.supportApplicationData = supported;
-      if (supported) {
-        this.getPossibleConfigs();
-      }
-    });
-
-    this.appJSONConfig = JSON.stringify(this.AppSettingsService.getAppConfig(), null, 2);
-    this.widgetJSONConfig = JSON.stringify(this.AppSettingsService.getWidgetConfig(), null, 2);
-    this.layoutJSONConfig = JSON.stringify(this.AppSettingsService.getLayoutConfig(), null, 2);
-    this.themeJSONConfig = JSON.stringify(this.AppSettingsService.getThemeConfig(), null, 2);
-    this.zonesJSONConfig = JSON.stringify(this.AppSettingsService.getZonesConfig(), null, 2);
-
-
-    this.authTokenSub = this.AppSettingsService.getSignalKTokenAsO().subscribe(token => {
-      if (token.token) {
-        this.hasToken = true;
-      } else {
-        this.hasToken = false;
-      }
-    });
-
-  }
-
-  private getPossibleConfigs() {
-    this.possibleConfigs = [];
-    this.SignalKConnectionService.getApplicationDataKeys('global').subscribe(configNames => {
-      for(let cname of configNames) {
-        this.possibleConfigs.push({ scope: 'global', name: cname });
-      }
-    });
-    this.SignalKConnectionService.getApplicationDataKeys('user').subscribe(configNames => {
-      for(let cname of configNames) {
-        this.possibleConfigs.push({ scope: 'user', name: cname });
-      }
-    });
-  }
-
-  saveServerSettings() {
-    let allConfig = {};
-    allConfig['app'] = this.AppSettingsService.getAppConfig();
-    allConfig['widget'] = this.AppSettingsService.getWidgetConfig();
-    allConfig['layout'] = this.AppSettingsService.getLayoutConfig();
-    allConfig['theme'] = this.AppSettingsService.getThemeConfig();
-    allConfig['zones'] = this.AppSettingsService.getZonesConfig();
-
-
-    this.SignalKConnectionService.postApplicationData(this.configScope.value, this.configName.value, allConfig).subscribe(result => {
-      this.NotificationsService.sendSnackbarNotification("Configuration saved to SignalK server", 3000);
-    });
-  }
-
-  loadServerSettings() {
-    this.SignalKConnectionService.getApplicationData(this.configLoad.value.scope, this.configLoad.value.name).subscribe(newConfig => {
-      let app: IAppConfig = newConfig['app'];
-      let widget: IWidgetConfig = newConfig['widget'];
-      let layout: ILayoutConfig = newConfig['layout'];
-      let theme: IThemeConfig = newConfig['theme'];
-      let zones: IZonesConfig = newConfig['zones'] || [];
-
-      // preserve kip uuid
-      app.kipUUID = this.AppSettingsService.getKipUUID();
-
-      this.AppSettingsService.replaceConfig("appConfig", JSON.stringify(app), false);
-      this.AppSettingsService.replaceConfig("widgetConfig", JSON.stringify(widget), false);
-      this.AppSettingsService.replaceConfig("layoutConfig", JSON.stringify(layout), false);
-      this.AppSettingsService.replaceConfig("themeConfig", JSON.stringify(theme), false);
-      this.AppSettingsService.replaceConfig("zonesConfig", JSON.stringify(zones), true);
-
-    });
-
-
-  }
-
-  resetSettings() {
-    this.AppSettingsService.resetSettings();
-  }
-
-  submitConfig(configType: string) {
-    switch (configType) {
-      case "appConfig":
-        this.AppSettingsService.replaceConfig(configType, this.appJSONConfig, true);
-        break;
-
-      case "widgetConfig":
-        this.AppSettingsService.replaceConfig(configType, this.widgetJSONConfig, true);
-        break;
-
-      case "layoutConfig":
-        this.AppSettingsService.replaceConfig(configType, this.layoutJSONConfig, true);
-        break;
-
-      case "themeConfig":
-        this.AppSettingsService.replaceConfig(configType, this.themeJSONConfig, true);
-        break;
-
-      case "zonesConfig":
-        console.log(this.zonesJSONConfig);
-        this.AppSettingsService.replaceConfig(configType, this.zonesJSONConfig, true);
-        break;
-    }
-  }
-
-  loadDemoConfig() {
-    this.AppSettingsService.loadDemoConfig();
-  }
-
-  ngOnDestroy() {
-    this.authTokenSub.unsubscribe();
-    this.serverSupportSaveSub.unsubscribe();
-  }
-
-}

package/src/app/settings-datasets/settings-datasets.component.html

@@ -1,43 +0,0 @@
-<form name="existingDataSet" #existingDataSet="ngForm">
-  <mat-card>
-    <mat-card-header>
-      <mat-card-title>Datasets Configuration</mat-card-title>
-      <mat-card-subtitle>Create recording datasets to be used with the Historical DataSet Widget.</mat-card-subtitle>
-    </mat-card-header>
-    <div style="overflow-x:auto;">
-      <table style="width: 100%;">
-          <tr>
-              <th>
-                  Path
-              </th>
-              <th>
-                  Interval
-              </th>
-              <th>
-                  Data Points
-              </th>
-              <th>
-
-              </th>
-          </tr>
-          <tr *ngFor="let ds of dataSets">
-              <td>
-                  {{ ds.path }}
-              </td>
-              <td>
-                  {{ ds.updateTimer }} Sec
-              </td>
-              <td>
-                  {{ ds.dataPoints }}
-              </td>
-              <td>
-                  <button mat-raised-button color="accent" (click)="deleteDataSet(ds.uuid)">Delete</button>
-              </td>
-          </tr>
-      </table>
-    </div>
-    <mat-card-actions align="end">
-      <button mat-raised-button color="accent" (click)='openNewDataSetModal()'>Add New Dataset</button>
-    </mat-card-actions>
-  </mat-card>
-</form>

package/src/app/settings-datasets/settings-datasets.component.scss

@@ -1,39 +0,0 @@
-@use '~@angular/material' as mat;
-
-@mixin theme-settings-data($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
-  table, th, td {
-    border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
-  }
-
-  th {
-    padding: 10px;
-    text-align: left;
-    background-color: mat.get-color-from-palette($accent, 300);
-    color: mat.get-color-from-palette($foreground, text);
-  }
-
-  td {
-    padding: 5px 5px 5px 10px;
-    text-align: left;
-    font-size: 14px;
-  }
-
-  tr:nth-child(even) {
-    background-color: mat.get-color-from-palette($background, hover);
-  }
-
-}
-
-.full-width {
-    width: 100%;
-}
-
-table {
-  border-collapse: collapse;
-}

package/src/app/settings-datasets/settings-datasets.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { SettingsDatasetsComponent } from './settings-datasets.component';
-
-describe('SettingsDatasetsComponent', () => {
-  let component: SettingsDatasetsComponent;
-  let fixture: ComponentFixture<SettingsDatasetsComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SettingsDatasetsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SettingsDatasetsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/app/settings-datasets/settings-datasets.component.ts

@@ -1,98 +0,0 @@
-import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-
-import { SignalKService } from '../signalk.service';
-import { IPathObject } from "../signalk-interfaces";
-import { DataSetService, IDataSet } from '../data-set.service';
-
-interface settingsForm {
-  selectedPath: string;
-  selectedSource: string;
-  interval: number;
-  dataPoints: number;
-};
-
-@Component({
-  selector: 'app-settings-datasets',
-  templateUrl: './settings-datasets.component.html',
-  styleUrls: ['./settings-datasets.component.scss']
-})
-export class SettingsDatasetsComponent implements OnInit {
-
-  selectedDataSet: string;
-  dataSets: IDataSet[];
-
-  constructor(
-    public dialog: MatDialog,
-    private SignalKService: SignalKService,
-    private DataSetService: DataSetService
-    ) { }
-
-  ngOnInit() {
-    this.loadDataSets();
-  }
-
-  loadDataSets() {
-    this.dataSets = this.DataSetService.getDataSets();
-  }
-
-  openNewDataSetModal() {
-    let dialogRef = this.dialog.open(SettingsDatasetsModalComponent, {
-      width: '600px'
-    });
-    dialogRef.afterClosed().subscribe(result => { this.loadDataSets() });
-  }
-
-
-  deleteDataSet(uuid:string) {
-    this.DataSetService.deleteDataSet(uuid); //TODO, bit bruteforce, can cause errors cause dataset deleted before subscrioptions canceled
-    this.loadDataSets();
-  }
-
-}
-
-@Component({
-  selector: 'app-settings-datasets-modal',
-  templateUrl: './settings-datasets.modal.html',
-  styleUrls: ['./settings-datasets.component.scss']
-})
-export class SettingsDatasetsModalComponent implements OnInit {
-
-  settingsForm: settingsForm = {
-    selectedPath: null,
-    selectedSource: null,
-    interval: 1,
-    dataPoints: 30
-  };
-
-  availablePaths: string[] = [];
-  availableSources: string[] = [];
-  filterSelfPaths:boolean = true;
-
-  constructor(
-    private SignalKService: SignalKService,
-    private DataSetService: DataSetService,
-    public dialogRef:MatDialogRef<SettingsDatasetsModalComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-    ) { }
-
-  ngOnInit() {
-    this.availablePaths = this.SignalKService.getPathsByType('number').sort();
-  }
-
-  settingsFormUpdatePath() { // called when we choose a new path. resets the rest with default info of this path
-    let pathObject = this.SignalKService.getPathObject(this.settingsForm.selectedPath);
-    if (pathObject === null) { return; }
-    this.availableSources = ['default'].concat(Object.keys(pathObject.sources));
-    this.settingsForm.selectedSource = 'default';
-  }
-
-  addNewDataSet() {
-    this.DataSetService.addDataSet(
-      this.settingsForm.selectedPath,
-      this.settingsForm.selectedSource,
-      this.settingsForm.interval,
-      this.settingsForm.dataPoints);
-    this.dialogRef.close();
-  }
-}

package/src/app/settings-datasets/settings-datasets.modal.html

@@ -1,54 +0,0 @@
-<h2 mat-dialog-title>New Dataset:</h2>
-<mat-dialog-content>
-    <form name="newDataSetForm" (ngSubmit)="addNewDataSet()" #newDataSetForm="ngForm">
-        <mat-horizontal-stepper>
-            <mat-step label="Source">
-                <div class="tab-content">
-                    <mat-form-field class="full-width">
-                        <mat-select
-                            placeholder="SignalK Path"
-                            [(ngModel)]="settingsForm.selectedPath"
-                            name="selectedPath"
-                            (ngModelChange)="settingsFormUpdatePath()"
-                            required>
-                            <mat-option *ngFor="let path of (availablePaths | filterSelf: filterSelfPaths)" [value]="path">
-                                {{path}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                   <mat-checkbox
-                        [(ngModel)]="filterSelfPaths"
-                        name="filterSelfPaths"
-                        >
-                        Restric to own vessel
-                    </mat-checkbox>
-                    <mat-form-field  class="full-width">
-                        <mat-select
-                            placeholder="Source"
-                            [(ngModel)]="settingsForm.selectedSource"
-                            name="selectedSource">
-                            <mat-option *ngFor="let source of availableSources" [value]="source">
-                                {{source}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-
-                </div>
-                <button type="button" mat-raised-button color="accent" matStepperNext [disabled]="!settingsForm.selectedPath">Next</button>
-            </mat-step>
-            <mat-step label="Data Set">
-                <div class="tab-content">
-                    <mat-form-field class="full-width">
-                        <input matInput placeholder="Interval(seconds)" type=number name="interval" [(ngModel)]="settingsForm.interval">
-                    </mat-form-field>
-                    <mat-form-field class="full-width">
-                        <input matInput placeholder="Data Points" type="number" name="decimals" [(ngModel)]="settingsForm.dataPoints">
-                    </mat-form-field>
-                    <br>
-                    <button type="button" mat-raised-button matStepperPrevious>Back</button>
-                    <button mat-raised-button color="accent" type="submit">Save</button>
-                </div>
-            </mat-step>
-        </mat-horizontal-stepper>
-    </form>
-</mat-dialog-content>

package/src/app/settings-notifications/settings-notifications.component.html

@@ -1,65 +0,0 @@
-<form name="notificationSetting">
-  <mat-card>
-    <mat-card-header>
-      <mat-card-title>Server Notifications</mat-card-title>
-      <mat-card-subtitle>Notifications are a special type of data sent from SignalK and displayed in the notification menu. They are meant to alert or inform operators. Set server notification preferences such as types of messages to display and audio prompts.</mat-card-subtitle>
-    </mat-card-header>
-    <mat-slide-toggle name="disableNotifications" [(ngModel)]="notificationConfig.disableNotifications" [ngModelOptions]="{standalone: true}">Disable All Notifications</mat-slide-toggle>
-    <mat-accordion>
-      <mat-expansion-panel expanded="true">
-        <mat-expansion-panel-header>
-          <mat-panel-title>
-            Messages
-          </mat-panel-title>
-          <mat-panel-description>
-            Control what messages the server will send
-          </mat-panel-description>
-        </mat-expansion-panel-header>
-        <!-- <h4>Security</h4>
-        <mat-checkbox [(ngModel)]="notificationConfig.security.disableSecurity" [ngModelOptions]="{standalone: true}">Disable all Security notifications</mat-checkbox> -->
-        <!-- <h4>Devices</h4> -->
-        <!-- <mat-checkbox [(ngModel)]="notificationConfig.devices.disableDevices" [ngModelOptions]="{standalone: true}">Disable all Devices notifications</mat-checkbox>
-        <br/> -->
-        <mat-checkbox [(ngModel)]="notificationConfig.devices.showNormalState" [ngModelOptions]="{standalone: true}">Show Devices Informational notifications</mat-checkbox>
-      </mat-expansion-panel>
-
-      <!-- <mat-expansion-panel expanded="false">
-        <mat-expansion-panel-header>
-          <mat-panel-title>
-            Menu
-          </mat-panel-title>
-          <mat-panel-description>
-            Configure notification menu display options
-          </mat-panel-description>
-        </mat-expansion-panel-header>
-        <h3>Display</h3>
-        <mat-checkbox [(ngModel)]="notificationConfig.menuGrouping" [ngModelOptions]="{standalone: true}">Groupe notifications by source types</mat-checkbox>
-      </mat-expansion-panel> -->
-
-      <mat-expansion-panel expanded="false">
-        <mat-expansion-panel-header>
-          <mat-panel-title>
-            Audio
-          </mat-panel-title>
-          <mat-panel-description>
-            Configure sound options
-          </mat-panel-description>
-        </mat-expansion-panel-header>
-        <mat-checkbox [(ngModel)]="notificationConfig.sound.disableSound" [ngModelOptions]="{standalone: true}">Disable All Audio notification</mat-checkbox>
-        <br/>
-        <mat-checkbox [(ngModel)]="notificationConfig.sound.muteNormal" [ngModelOptions]="{standalone: true}">Disable <b>Information</b> notifications audio</mat-checkbox>
-        <br/>
-        <mat-checkbox [(ngModel)]="notificationConfig.sound.muteAlert" [ngModelOptions]="{standalone: true}">Disable <b>Alert Severity</b> notifications audio</mat-checkbox>
-        <br/>
-        <mat-checkbox [(ngModel)]="notificationConfig.sound.muteWarning" [ngModelOptions]="{standalone: true}">Disable <b>Warning</b> notifications audio</mat-checkbox>
-        <br/>
-        <mat-checkbox [(ngModel)]="notificationConfig.sound.muteAlarm" [ngModelOptions]="{standalone: true}">Disable <b>Alarm Severity</b> notifications audio</mat-checkbox>
-        <br/>
-        <mat-checkbox [(ngModel)]="notificationConfig.sound.muteEmergency" [ngModelOptions]="{standalone: true}">Disable <b>Emergency Severity</b> notifications audio</mat-checkbox>
-      </mat-expansion-panel>
-    </mat-accordion>
-    <mat-card-actions align="end">
-      <button mat-raised-button color="accent" (click)='saveNotificationsSettings()'>Save</button>
-    </mat-card-actions>
-  </mat-card>
-</form>