added controls to change sound notification

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormsModule } from "@angular/forms";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { HttpModule } from "@angular/http";
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
@@ -148,6 +148,7 @@ const routes: Routes = [
         HttpModule,
         HttpClientModule,
         FormsModule,
+        ReactiveFormsModule,
         PickerModule,
         OwlDateTimeModule, 
         OwlNativeDateTimeModule,

src/app/components/floating-column/settings/settings.component.html

@@ -1,6 +1,16 @@
 <div class="panel">
     <h3 class="panel__title">settings</h3>
 
-    <p class="version">Sengi version: {{version}}</p>
-</div>
+    <!-- <select name="notification-sound" class="form-control" [(ngModel)]="branch.PhysicalProvince">
+        <option *ngFor="let p of branchService.provinces" [value]="p">{{p}}</option>
+    </select> -->
 
+    <form [formGroup]="notificationForm">
+        <select formControlName="countryControl" (change)="onChange($event.target.value)">
+            <option [value]="s.id" *ngFor="let s of notificationSounds"> {{s.name}}</option>
+        </select>
+    </form>
+    <a href class="form-button" type="submit" (click)="playNotificationSound()">play</a>
+
+    <p class="version">Sengi version: {{version}}</p>
+</div>

src/app/components/floating-column/settings/settings.component.ts

@@ -1,5 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Howl } from 'howler';
+
 import { environment } from '../../../../environments/environment';
+import { ToolsService } from '../../../services/tools.service';
+import { UserNotificationService, NotificationSoundDefinition } from '../../../services/user-notification.service';
 
 @Component({
     selector: 'app-settings',
@@ -9,10 +14,40 @@ import { environment } from '../../../../environments/environment';
 export class SettingsComponent implements OnInit {
 
     version: string;
+    notificationSounds: NotificationSoundDefinition[];
+    notificationSoundId: string;
+    notificationForm: FormGroup;
 
-    constructor() { }
+    constructor(
+        private formBuilder: FormBuilder,
+        private readonly toolsService: ToolsService,
+        private readonly userNotificationsService: UserNotificationService) { }
 
     ngOnInit() {
         this.version = environment.VERSION;
+
+        this.notificationSounds = this.userNotificationsService.getAllNotificationSounds();
+        this.notificationSoundId = this.toolsService.getSettings().notificationSoundFileId;
+        this.notificationForm = this.formBuilder.group({
+            countryControl: [this.notificationSounds[this.notificationSoundId].id]
+        });
+    }
+
+    onChange(soundId: string) {
+        this.notificationSoundId = soundId;
+        let settings = this.toolsService.getSettings()
+        settings.notificationSoundFileId = soundId;
+        this.toolsService.saveSettings(settings);
+    }
+
+    playNotificationSound(): boolean {
+        let soundData = this.notificationSounds.find(x => x.id === this.notificationSoundId);
+
+        let sound = new Howl({
+            src: [soundData.path]
+        });
+        sound.play();
+
+        return false;
     }
 }

src/app/services/user-notification.service.ts

@@ -39,15 +39,20 @@ export class UserNotificationService {
     private setNotificationSound() {
         let settings = this.toolsService.getSettings();
         let soundId = settings.notificationSoundFileId;
+
+        console.warn(`soundId: ${soundId}`);
         
         if(!soundId){
-            soundId = 0;
-            settings.notificationSoundFileId = 0;
+            soundId = '0';
+            settings.notificationSoundFileId = '0';
             this.toolsService.saveSettings(settings);
         }
 
         var sound = this.getAllNotificationSounds().find(x => x.id === soundId);
 
+        console.warn(this.getAllNotificationSounds());
+        console.warn(sound);
+
         this.sound = new Howl({
             src: [sound.path]
         });
@@ -225,10 +230,10 @@ export class UserNotificationService {
 
     getAllNotificationSounds(): NotificationSoundDefinition[] {
         let defs: NotificationSoundDefinition[] = [
-            new NotificationSoundDefinition(0, 'assets/audio/all-eyes-on-me.mp3', 'All eyes on me'),
-            new NotificationSoundDefinition(1, 'assets/audio/exquisite.mp3', 'Exquisite'),
-            new NotificationSoundDefinition(2, 'assets/audio/appointed.mp3', 'Appointed'),
-            new NotificationSoundDefinition(3, 'assets/audio/boop.mp3', 'Mastodon boop'),            
+            new NotificationSoundDefinition('0', 'assets/audio/all-eyes-on-me.mp3', 'All eyes on me'),
+            new NotificationSoundDefinition('1', 'assets/audio/exquisite.mp3', 'Exquisite'),
+            new NotificationSoundDefinition('2', 'assets/audio/appointed.mp3', 'Appointed'),
+            new NotificationSoundDefinition('3', 'assets/audio/boop.mp3', 'Mastodon boop'),            
         ];
         return defs;
     }
@@ -257,7 +262,7 @@ enum NotificationTypeEnum {
 export class NotificationSoundDefinition {
 
     constructor(
-        public readonly id: number,
+        public readonly id: string,
         public readonly path: string,
         public readonly name: string) {}
 }

src/app/states/settings.state.ts

@@ -28,7 +28,7 @@ export class AccountSettings {
 
 export class GlobalSettings {
     disableAllNotifications = false;
-    notificationSoundFileId: number = 0;
+    notificationSoundFileId: string = '0';
     accountSettings: AccountSettings[] = [];
 }