refactor(setting): adjust setting module to new core translation

Closes #53

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

@@ -12,61 +12,68 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {AlertController} from '@ionic/angular';
 import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
 import {
+  SCLanguage,
   SCSetting,
   SCSettingValue,
   SCSettingValues,
   SCThingTranslator,
   SCTranslations,
 } from '@openstapps/core';
+import {Logger} from '@openstapps/logger';
 import {SettingsProvider} from '../settings.provider';
 
 /**
- * TODO
+ * Setting item component
  */
 @Component({
   selector: 'stapps-settings-item',
   templateUrl: 'settings-item.html',
 })
-export class SettingsItemComponent {
+export class SettingsItemComponent implements OnInit {
   /**
-   * TODO
+   * Flag for workaround for selected 'select option' not updating translation
    */
   isVisible = true;
   /**
-   * TODO
-   * 
-   * limit to languages that are available in StApps Core
+   * current language
    */
-  language: keyof SCTranslations<any>;
+  language: keyof SCTranslations<SCLanguage>;
   /**
-   * TODO
+   * The setting to handle
    */
   @Input() setting: SCSetting;
+
   /**
-   * TODO
+   * Translated setting from SCThingTranslator
+   */
+  // tslint:disable-next-line:no-any
+  translatedSetting: any;
+
+  /**
+   * Core translator
    */
   translator: SCThingTranslator;
 
   /**
-   * 
-   * @param alertCtrl TODO
-   * @param translateService TODO
-   * @param settingsProvider TODO
+   *
+   * @param alertCtrl AlertController
+   * @param translateService TranslateService
+   * @param settingsProvider SettingProvider
    */
   constructor(private readonly alertCtrl: AlertController,
               private readonly translateService: TranslateService,
               private readonly settingsProvider: SettingsProvider) {
-    this.language = translateService.currentLang as keyof SCTranslations<any>;
+    this.language = translateService.currentLang as keyof SCTranslations<SCLanguage>;
     this.translator = new SCThingTranslator(this.language);
 
     translateService.onLangChange.subscribe((event: LangChangeEvent) => {
       this.isVisible = false;
-      this.language = event.lang as keyof SCTranslations<any>;
-      this.translator = new SCThingTranslator(this.language);
+      this.language = event.lang as keyof SCTranslations<SCLanguage>;
+      this.translator.language = this.language;
       // TODO: Issue #53 check workaround for selected 'select option' not updating translation
       setTimeout(() => this.isVisible = true);
     });
@@ -96,11 +103,20 @@ export class SettingsItemComponent {
     await this.presentAlert(title, message);
   }
 
+  /**
+   * NgInit
+   */
+  ngOnInit(): void {
+    Logger.log(JSON.stringify(this.setting));
+
+    this.translatedSetting = this.translator.translate(this.setting);
+  }
+
   /**
    * Shows alert with given title and message and a 'ok' button
    *
-   * @param title title of the alert
-   * @param message message of the alert
+   * @param title Title of the alert
+   * @param message Message of the alert
    */
   async presentAlert(title: string, message: string) {
     const alert = await this.alertCtrl.create({
@@ -123,7 +139,7 @@ export class SettingsItemComponent {
           this.translateService.use(this.setting.value.toString());
           break;
         case 'geoLocation':
-          if (this.setting.value) {
+          if (!!this.setting.value) {
             await this.checkGeoLocationPermission();
           }
           break;
@@ -140,10 +156,10 @@ export class SettingsItemComponent {
   }
 
   /**
-   * TODO
+   * Mapping of typeOf for Html usage
    */
   // tslint:disable-next-line:prefer-function-over-method
-  typeOf(val: any) {
+  typeOf(val: unknown) {
     return typeof (val);
   }
 }

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

@@ -1,9 +1,9 @@
-<ion-card>
+<ion-card *ngIf="setting">
   <ion-card-header>
-    <span>{{ translator.translate(setting).name() }}</span>
+    <span>{{ translatedSetting.name() | titlecase }}</span>
   </ion-card-header>
   <ion-card-content>
-    <ion-note>{{ translator.translate(setting).description() }}</ion-note>
+    <ion-note>{{ translatedSetting.description() }}</ion-note>
 
     <div [ngSwitch]="setting.inputType" *ngIf="isVisible" >
       <ion-item *ngSwitchCase="'number'">
@@ -21,22 +21,24 @@
         <ion-input type="password" [(ngModel)]="setting.value" value={{setting.value}} (ionChange)="settingChanged()"></ion-input>
       </ion-item>
 
-      <ion-item *ngSwitchCase="'singleChoice'">
+      <ion-item *ngSwitchCase="'single choice'">
         <ion-label></ion-label>
+        <!--    if values are boolean show as toggle    -->
         <ion-toggle *ngIf="typeOf(setting.defaultValue) === 'boolean'" [(ngModel)]="setting.value" (ionChange)="settingChanged()"></ion-toggle>
+        <!--    else show select input    -->
         <ion-select *ngIf="typeOf(setting.defaultValue) !== 'boolean'" interface="popover" [(ngModel)]="setting.value" (ionChange)="settingChanged()">
-          <ion-select-option *ngFor="let val of setting.values" [value]="val">
-            <div *ngIf="typeOf(val) !== 'number'">{{ val }}</div>
+          <ion-select-option *ngFor="let val of setting.values, index as i" [value]="val">
+            <div *ngIf="typeOf(val) !== 'number'">{{ translatedSetting.values()[i] | titlecase }}</div>
             <div *ngIf="typeOf(val) === 'number'">{{ val }}</div>
           </ion-select-option>
         </ion-select>
       </ion-item>
 
-      <ion-item *ngSwitchCase="'multipleChoice'">
+      <ion-item *ngSwitchCase="'multiple choice'">
         <ion-label></ion-label>
         <ion-select [(ngModel)]="setting.value" multiple="true" (ionChange)="settingChanged()">
-          <ion-select-option *ngFor="let val of setting.values" [value]="val">
-            <div *ngIf="typeOf(val) !== 'number'">{{ val }}</div>
+          <ion-select-option *ngFor="let val of setting.values, index as i" [value]="val">
+            <div *ngIf="typeOf(val) !== 'number'">{{ translatedSetting.values()[i] }}</div>
             <div *ngIf="typeOf(val) === 'number'">{{ val }}</div>
           </ion-select-option>
         </ion-select>