feat: add the app

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

@@ -0,0 +1,68 @@
+/*
+ * Copyright (C) 2018 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * 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 {LangChangeEvent, TranslateService} from '@ngx-translate/core';
+import {
+  SCLanguageName,
+  SCSetting,
+  SCSettingMeta,
+} from '@openstapps/core';
+import {SettingsProvider} from '../../settingsProvider/settings.provider';
+
+@Component({
+  selector: 'stapps-settings-item',
+  templateUrl: 'settings-item.html',
+})
+export class SettingsItemComponent {
+  isVisible = true;
+  language: SCLanguageName;
+  meta = SCSettingMeta;
+
+  @Input() setting: SCSetting;
+
+  constructor(private translateService: TranslateService,
+              private settingsProvider: SettingsProvider) {
+    this.meta = SCSettingMeta;
+
+    this.language = translateService.currentLang as SCLanguageName;
+
+    translateService.onLangChange.subscribe((event: LangChangeEvent) => {
+      this.isVisible = false;
+      this.language = event.lang as SCLanguageName;
+      // workaround for selected 'select option' not updating translation
+      setTimeout(() => this.isVisible = true);
+    });
+  }
+
+  /**
+   * handles value changes of the setting
+   */
+  async settingChanged(): Promise<void> {
+    switch (this.setting.name) {
+      case 'language':
+        if (this.setting.input.value !== undefined) {
+          this.translateService.use(this.setting.input.value.toString());
+        }
+        break;
+      default:
+    }
+    await this.settingsProvider
+      .setSettingValue(this.setting.categories[0], this.setting.name, this.setting.input.value);
+  }
+
+  typeOf(val: any) {
+    return typeof (val);
+  }
+}

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

@@ -0,0 +1,55 @@
+<ion-card>
+  <ion-card-header>
+    <span id="settingTitle" >{{ meta.getFieldValueTranslation(language, 'name', setting) }}</span>
+  </ion-card-header>
+  <ion-card-content>
+    <ion-note >{{ meta.getFieldValueTranslation(language, 'description', setting) }}</ion-note>
+
+    <div [ngSwitch]="setting.input.inputType" *ngIf="isVisible" >
+      <ion-item *ngSwitchCase="'toggle'">
+        <ion-label></ion-label>
+        <ion-toggle start [(ngModel)]="setting.input.value" (ionChange)="settingChanged()"></ion-toggle>
+      </ion-item>
+      <ion-item *ngSwitchCase="'number'">
+        <ion-label></ion-label>
+        <ion-input type='number' [(ngModel)]="setting.input.value" value={{setting.input.value}}  (ionChange)="settingChanged()"></ion-input>
+      </ion-item>
+
+      <ion-item *ngSwitchCase="'text'">
+        <ion-label></ion-label>
+        <ion-input type="text" [(ngModel)]="setting.input.value" value={{setting.input.value}} (ionChange)="settingChanged()"></ion-input>
+      </ion-item>
+
+      <ion-item *ngSwitchCase="'password'">
+        <ion-label></ion-label>
+        <ion-input type="password" [(ngModel)]="setting.input.value" value={{setting.input.value}} (ionChange)="settingChanged()"></ion-input>
+      </ion-item>
+
+      <ion-item *ngSwitchCase="'singleChoice'">
+        <ion-label></ion-label>
+        <ion-toggle *ngIf="typeOf(setting.input.defaultValue) === 'boolean'" [(ngModel)]="setting.input.value" (ionChange)="settingChanged()"></ion-toggle>
+        <ion-select *ngIf="typeOf(setting.input.defaultValue) !== 'boolean'" interface="popover" [(ngModel)]="setting.input.value" (ionChange)="settingChanged()">
+          <ion-select-option *ngFor="let val of setting.input.values" [value]="val">
+            <div *ngIf="typeOf(val) !== 'number'">{{ val }}</div>
+            <div *ngIf="typeOf(val) === 'number'">{{ val }}</div>
+          </ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <ion-item *ngSwitchCase="'multipleChoice'">
+        <ion-label></ion-label>
+        <ion-select [(ngModel)]="setting.input.value" multiple="true" (ionChange)="settingChanged()">
+          <ion-select-option *ngFor="let val of setting.input.values" [value]="val">
+            <div *ngIf="typeOf(val) !== 'number'">{{ val }}</div>
+            <div *ngIf="typeOf(val) === 'number'">{{ val }}</div>
+          </ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <span *ngSwitchDefault>
+        <ion-note>no template for {{ setting.name }}</ion-note>
+      </span>
+    </div>
+
+  </ion-card-content>
+</ion-card>