options

src/app/settings/options.component.html

@@ -0,0 +1,23 @@
+<div class="page-header">
+    <h1>{{'options' | i18n}}</h1>
+</div>
+<div class="row">
+    <div class="col-6">
+        <div class="form-group">
+            <label for="locale">{{'language' | i18n}}</label>
+            <select id="locale" name="Locale" [(ngModel)]="locale" (change)="saveLocale()" class="form-control">
+                <option *ngFor="let o of localeOptions" [ngValue]="o.value">{{o.name}}</option>
+            </select>
+            <small class="form-text text-muted">{{'languageDesc' | i18n}}</small>
+        </div>
+    </div>
+</div>
+<div class="form-group">
+    <div class="form-check">
+        <input class="form-check-input" type="checkbox" id="disableIcons" name="DisableIcons" [(ngModel)]="disableIcons" (change)="saveIcons()">
+        <label class="form-check-label" for="disableIcons">
+            {{'disableIcons' | i18n}}
+        </label>
+    </div>
+    <small class="form-text text-muted">{{'disableIconsDesc' | i18n}}</small>
+</div>

src/app/settings/options.component.ts

@@ -0,0 +1,53 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+import { Angulartics2 } from 'angulartics2';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { StateService } from 'jslib/abstractions/state.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
+
+import { ConstantsService } from 'jslib/services/constants.service';
+
+@Component({
+    selector: 'app-options',
+    templateUrl: 'options.component.html',
+})
+export class OptionsComponent implements OnInit {
+    disableIcons: boolean;
+    locale: string;
+    localeOptions: any[];
+
+    constructor(private storageService: StorageService, private stateService: StateService,
+        private analytics: Angulartics2, i18nService: I18nService) {
+        this.localeOptions = [{ name: i18nService.t('default'), value: null }];
+        i18nService.supportedTranslationLocales.forEach((locale) => {
+            this.localeOptions.push({ name: locale, value: locale });
+        });
+    }
+
+    async ngOnInit() {
+        this.disableIcons = await this.storageService.get<boolean>(ConstantsService.disableFaviconKey);
+        this.locale = await this.storageService.get<string>(ConstantsService.localeKey);
+    }
+
+    async saveIcons() {
+        await this.storageService.save(ConstantsService.disableFaviconKey, this.disableIcons);
+        await this.stateService.save(ConstantsService.disableFaviconKey, this.disableIcons);
+        this.callAnalytics('Website Icons', !this.disableIcons);
+    }
+
+    async saveLocale() {
+        await this.storageService.save(ConstantsService.localeKey, this.locale);
+        this.analytics.eventTrack.next({ action: 'Set Locale ' + this.locale });
+        window.location.reload();
+    }
+
+    private callAnalytics(name: string, enabled: boolean) {
+        const status = enabled ? 'Enabled' : 'Disabled';
+        this.analytics.eventTrack.next({ action: `${status} ${name}` });
+    }
+
+}

src/app/settings/settings.component.html

@@ -2,13 +2,13 @@
     <div class="row">
         <div class="col-3">
             <div class="card">
-                <div class="card-header">Settings</div>
+                <div class="card-header">{{'settings' | i18n}}</div>
                 <div class="list-group list-group-flush">
                     <a routerLink="account" class="list-group-item" routerLinkActive="active">
-                        My Account
+                        {{'myAccount' | i18n}}
                     </a>
                     <a routerLink="options" class="list-group-item" routerLinkActive="active">
-                        Options
+                        {{'options' | i18n}}
                     </a>
                     <a routerLink="organizations" class="list-group-item" routerLinkActive="active">
                         Organizations