refactor: initialise settings from config module and persist only the values

Closes #30, #59

src/app/modules/settings/page/settings-page.component.ts

@@ -13,8 +13,9 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component} from '@angular/core';
+import {AlertController, ToastController} from '@ionic/angular';
 import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
-import {SCSettingMeta, SCTranslations} from '@openstapps/core';
+import {SCSettingMeta, SCThingTranslator, SCTranslations} from '@openstapps/core';
 import {SettingsCache, SettingsProvider} from '../settings.provider';
 
 @Component({
@@ -28,22 +29,81 @@ export class SettingsPageComponent {
   meta = SCSettingMeta;
   objectKeys = Object.keys;
   settingsCache: SettingsCache;
+  translator: SCThingTranslator;
 
-  constructor(public settingsProvider: SettingsProvider,
-              translateService: TranslateService) {
+  constructor(private alertController: AlertController,
+              private settingsProvider: SettingsProvider,
+              private toastController: ToastController,
+              private translateService: TranslateService) {
     this.language = translateService.currentLang as keyof SCTranslations<any>;
+    this.translator = new SCThingTranslator(this.language, 'de');
+
     translateService.onLangChange.subscribe((event: LangChangeEvent) => {
       this.language = event.lang as keyof SCTranslations<any>;
+      this.translator = new SCThingTranslator(this.language, 'de');
     });
     this.settingsCache = {};
     this.categoriesOrder = settingsProvider.getCategoriesOrder();
+
   }
 
+  /**
+   * Presents a Toast with message for settings successful reset
+   */
+  private async presentSettingsResetToast() {
+    const toast = await this.toastController.create({
+      cssClass: 'text-center',
+      duration: 2000,
+      message: this.translateService.instant('settings.resetToast.message'),
+    });
+    toast.present();
+  }
+
+  /**
+   * Loads cache of settings from SettingProvider
+   */
   async loadSettings(): Promise<void> {
-    this.settingsCache = await this.settingsProvider.getSettingsCache();
+    this.settingsCache = await this.settingsProvider.getCache();
   }
 
   async ngOnInit() {
     await this.loadSettings();
   }
+
+  /**
+   * Presents an alert to the user to reset settings to default values
+   */
+  async presentResetAlert() {
+    const cancelText = await this.translateService.get('settings.resetAlert.buttonCancel').toPromise();
+    const yesText = await this.translateService.get('settings.resetAlert.buttonYes').toPromise();
+    const title = await this.translateService.get('settings.resetAlert.title').toPromise();
+    const message = await this.translateService.get('settings.resetAlert.message').toPromise();
+
+    const alert = await this.alertController.create({
+      buttons: [
+        {
+          role: 'cancel',
+          text: cancelText,
+        },
+        {
+          handler: async () => {
+            await this.resetSettings();
+          },
+          text: yesText,
+        },
+      ],
+      header: title,
+      message: message,
+    });
+    alert.present();
+  }
+
+  /**
+   * Resets all settings to default values
+   */
+  async resetSettings() {
+    await this.settingsProvider.resetDefault();
+    await this.loadSettings();
+    await this.presentSettingsResetToast();
+  }
 }

src/app/modules/settings/page/settings-page.html

@@ -1,20 +1,25 @@
-
 <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
-    <ion-title ><div id="title" > {{'settings.title' | translate}}</div></ion-title>
+    <ion-title>{{'settings.title' | translate}}</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content >
+<ion-content>
   <ion-list *ngFor="let categoryKey of categoriesOrder ">
     <div *ngIf="objectKeys(settingsCache).includes(categoryKey)">
-      <ion-item-divider><h5>{{ meta.getFieldValueTranslation(language, 'categories',
-        settingsCache[categoryKey].settings[objectKeys(settingsCache[categoryKey].settings)[0]]) }}</h5></ion-item-divider>
+      <ion-item-divider>
+        <h5>{{translator.translate(settingsCache[categoryKey].settings[objectKeys(settingsCache[categoryKey].settings)[0]]).categories()[0]}}
+        </h5>
+      </ion-item-divider>
       <stapps-settings-item *ngFor="let settingKeys of objectKeys(settingsCache[categoryKey].settings)" [setting]="settingsCache[categoryKey].settings[settingKeys]"></stapps-settings-item>
     </div>
   </ion-list>
+  <ion-button color="medium" expand="block" fill="outline" (click)="presentResetAlert()">
+    {{'settings.resetSettings' | translate}}
+    <ion-icon slot="start" name="undo"></ion-icon>
+  </ion-button>
 </ion-content>