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>

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

@@ -0,0 +1,48 @@
+/*
+ * 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, OnInit} from '@angular/core';
+import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
+import {SCLanguageName, SCSettingMeta} from '@openstapps/core';
+import {SettingsCache, SettingsProvider} from '../../settingsProvider/settings.provider';
+
+@Component({
+  selector: 'stapps-settings-page',
+  templateUrl: 'settings-page.html',
+})
+export class SettingsPageComponent implements OnInit {
+  categoriesOrder: string[];
+  language: SCLanguageName;
+  meta = SCSettingMeta;
+  objectKeys = Object.keys;
+  settingsCache: SettingsCache;
+
+  constructor(public settingsProvider: SettingsProvider,
+              translateService: TranslateService) {
+    this.language = translateService.currentLang as SCLanguageName;
+    translateService.onLangChange.subscribe((event: LangChangeEvent) => {
+      this.language = event.lang as SCLanguageName;
+    });
+    this.settingsCache = {};
+    this.categoriesOrder = settingsProvider.getCategoriesOrder();
+  }
+
+  async loadSettings(): Promise<void> {
+    this.settingsCache = await this.settingsProvider.getSettingsCache();
+  }
+
+  async ngOnInit() {
+    await this.loadSettings();
+  }
+}

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

@@ -0,0 +1,20 @@
+
+<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-toolbar>
+</ion-header>
+
+<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>
+      <stapps-settings-item *ngFor="let settingKeys of objectKeys(settingsCache[categoryKey].settings)" [setting]="settingsCache[categoryKey].settings[settingKeys]"></stapps-settings-item>
+    </div>
+  </ion-list>
+</ion-content>

src/app/modules/settings/settings.module.ts

@@ -0,0 +1,44 @@
+/*
+ * 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 {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {RouterModule, Routes} from '@angular/router';
+import {IonicModule} from '@ionic/angular';
+import {TranslateModule} from '@ngx-translate/core';
+
+import {SettingsItemComponent} from './item/settings-item.component';
+import {SettingsPageComponent} from './page/settings-page.component';
+
+const settingsRoutes: Routes = [
+  { path: 'settings', component: SettingsPageComponent },
+];
+
+@NgModule({
+  declarations: [
+    SettingsPageComponent,
+    SettingsItemComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule.forRoot(),
+    TranslateModule.forChild(),
+    RouterModule.forChild(settingsRoutes),
+  ],
+  providers: [
+  ],
+})
+export class SettingsModule {}

src/app/modules/settings/settings.scss

@@ -0,0 +1,3 @@
+page-settings {
+  
+}