update navigation + profile

2021-09-23 13:53:08 +02:00
parent 53ac145165
commit 1c0be5e1ea
25 changed files with 469 additions and 204 deletions
@@ -0,0 +1,13 @@
+<p>free: {{toCurrentUnit(dividerModel.free)}}{{unit.name}}</p>
+
+
+<mat-select [(ngModel)]="unit">
+    <mat-option *ngFor="let item of dividerModel.units" [value]="item">{{item.name}}</mat-option>
+</mat-select>
+
+<div *ngFor="let item of dividerModel.items">
+    <label>{{item.name}}: {{toCurrentUnit(item.value)}}{{unit.name}}</label>
+    <mat-slider [max]="toCurrentUnit(dividerModel.free + item.value)" min=0 [step]="unit.steps" [value]="toCurrentUnit(item.value)" thumbLabel
+        tickInterval="5" (change)="updateValue($event, item)">
+    </mat-slider>
+</div>
@@ -0,0 +1,3 @@
+mat-slider {
+    display: block;
+}
@@ -0,0 +1,36 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { I18nService } from '../../services/i18n.service';
+
+@Component({
+  selector: 'app-divider',
+  templateUrl: './divider.component.html',
+  styleUrls: [ './divider.component.scss' ]
+})
+export class DividerComponent implements OnInit {
+
+
+  @Input() dividerModel;
+  unit;
+
+  constructor(private i18n: I18nService) { }
+
+  ngOnInit(): void {
+    this.unit = this.dividerModel.units.find(unit => unit.name == this.dividerModel.unit);
+  }
+
+  toCurrentUnit(value) {
+    return this.unit.value * value;
+  }
+
+  fromCurrentUnit(value) {
+    return value / this.unit.value;
+  }
+
+  updateValue($event, item) {
+    const value = this.fromCurrentUnit($event.value);
+    const diff = item.value - value;
+    item.value = value;
+    this.dividerModel.free += diff;
+  }
+
+}
@@ -0,0 +1,86 @@
+<mat-toolbar color="primary">
+  <a href="javascript:" mat-icon-button>
+    <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
+  </a>
+  <mat-icon svgIcon="logo"></mat-icon>
+  <span>
+    we.bstly
+  </span>
+  <span class="spacer"></span>
+  <ng-container>
+
+    <button mat-button [matMenuTriggerFor]="menu">
+      <mat-icon>settings</mat-icon>
+      <mat-icon>arrow_drop_down</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <a *ngIf="!auth || auth && !auth.authenticated" routerLink="/login" routerLinkActive="active" mat-menu-item>
+        <mat-icon>login</mat-icon> {{'login' | i18n}}
+      </a>
+      <mat-divider *ngIf="!auth || auth && !auth.authenticated"></mat-divider>
+      <a *ngFor="let locale of locales" mat-menu-item (click)="setLocale(locale)">{{'locale.' + locale + '.long' |
+        i18n}} <mat-icon inline=true *ngIf="locale == currentLocale">done</mat-icon></a>
+      <a mat-menu-item>
+        <mat-slide-toggle (change)="darkThemeChange($event)" [checked]="darkTheme  == 'true'">
+          {{'profileField.name.darkTheme' | i18n}}
+        </mat-slide-toggle>
+      </a>
+      <mat-divider *ngIf="auth && auth.authenticated"></mat-divider>
+      <a *ngIf="auth && auth.authenticated" (click)="logout()" mat-menu-item>
+        <mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
+      </a>
+    </mat-menu>
+  </ng-container>
+</mat-toolbar>
+
+<mat-sidenav-container>
+  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [(opened)]="opened"
+    (click)="!isBiggerScreen() && opened=false">
+    <mat-nav-list>
+      <a *ngIf="!auth || auth && !auth.authenticated" routerLink="/login" routerLinkActive="active" mat-list-item>
+        <mat-icon>login</mat-icon> {{'login' | i18n}}
+      </a>
+      <a *ngIf="auth && auth.authenticated" routerLink="/account/info" routerLinkActive="active" mat-list-item>
+        <mat-icon>account_circle</mat-icon> {{'account' | i18n}}
+      </a>
+      <a *ngIf="auth && auth.authenticated" routerLink="/services" routerLinkActive="active" mat-list-item>
+        <mat-icon>widgets</mat-icon> {{'services' | i18n}}
+      </a>
+      <a routerLink="/tokens" mat-list-item>
+        <mat-icon>card_giftcard</mat-icon> {{'tokens.redeem' | i18n}}
+      </a>
+      <a (click)="openExternal('https://wiki.bstly.de/services/webstly','_blank')" mat-list-item>
+        <mat-icon>help</mat-icon> {{'help' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
+        </mat-icon>
+      </a>
+      <a (click)="openExternal('https://membership.bstly.de','_blank')" mat-list-item>
+        <mat-icon>shopping_cart</mat-icon> {{'tokens.get' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
+        </mat-icon>
+      </a>
+      <a *ngIf="auth && auth.authenticated" (click)="logout()" mat-list-item>
+        <mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
+      </a>
+    </mat-nav-list>
+
+    <span class="spacer"></span>
+
+    <mat-nav-list>
+      <a (click)="openExternal('https://www.bstly.de/imprint/')" mat-list-item style="font-size: 0.7em;">
+        {{'imprint' | i18n}}
+      </a>
+      <a (click)="openExternal('https://www.bstly.de/privacy-policy/#we.bstly')" mat-list-item style="font-size: 0.7em;">
+        {{'privacy-policy' | i18n}}
+      </a>
+      <a (click)="openExternal('https://www.bstly.de')" mat-list-item style="font-size: 0.7em;">
+        Bastelei e. V.
+      </a>
+    </mat-nav-list>
+  </mat-sidenav>
+
+  <!-- Main content -->
+  <mat-sidenav-content>
+    <div class="container">
+      <router-outlet></router-outlet>
+    </div>
+  </mat-sidenav-content>
+</mat-sidenav-container>
@@ -0,0 +1,144 @@
+import {Component, HostListener} from '@angular/core';
+
+import {AuthService} from '../../services/auth.service';
+import {I18nService} from '../../services/i18n.service';
+import {ProfileService} from '../../services/profile.service';
+import {Router} from '@angular/router';
+import {DomSanitizer} from '@angular/platform-browser';
+import {MatIconRegistry} from '@angular/material/icon';
+import {DateAdapter} from '@angular/material/core';
+
+@Component({
+  selector: 'app-main',
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.scss']
+})
+
+export class MainComponent {
+  opened = true;
+  darkTheme = "false";
+  title = 'we.bstly';
+  currentLocale: String;
+  datetimeformat: String;
+  locales;
+  auth;
+
+  constructor(
+    private i18n: I18nService,
+    private authService: AuthService,
+    private profileService: ProfileService,
+    private router: Router,
+    private iconRegistry: MatIconRegistry,
+    private sanitizer: DomSanitizer,
+    private _adapter: DateAdapter<any>) {
+    iconRegistry.addSvgIcon('logo', sanitizer.bypassSecurityTrustResourceUrl('assets/icons/logo.svg'));
+  }
+
+  ngOnInit() {
+    this.datetimeformat = this.i18n.get('format.datetime', []);
+    this.currentLocale = this.i18n.getLocale();
+    this.locales = this.i18n.getLocales();
+    this.authService.auth.subscribe(data => {
+      this.auth = data;
+    })
+
+    this._adapter.setLocale(this.currentLocale);
+
+    const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    if(width < 768) {
+      this.opened = false;
+    } else {
+      this.opened = true;
+    }
+
+    if(localStorage.getItem("bstly.darkTheme") == "true") {
+      this.darkTheme = "true";
+      window.document.body.classList.add("dark-theme");
+    }
+  }
+
+  setLocale(locale) {
+    localStorage.setItem("bstly.locale", locale);
+
+    if(this.auth && this.auth.authenticated) {
+      this.profileService.getField("locale").subscribe((profileField: any) => {
+
+        if(profileField == null) {
+          profileField = {
+            "name": "locale",
+            "type": "TEXT",
+            "visibility": "PRIVATE"
+          }
+        }
+
+        profileField.value = locale;
+        this.profileService.createOrUpdate(profileField).subscribe((response) => {
+          window.location.reload();
+        })
+      })
+    } else {
+      window.location.reload();
+    }
+  }
+
+  darkThemeChange($event) {
+    if($event.checked) {
+      this.darkTheme = "true";
+    } else {
+      this.darkTheme = "false";
+    }
+
+    localStorage.setItem("bstly.darkTheme", this.darkTheme);
+
+    if(this.auth && this.auth.authenticated) {
+      this.profileService.getField("darkTheme").subscribe((profileField: any) => {
+
+        if(profileField == null) {
+          profileField = {
+            "name": "darkTheme",
+            "type": "BOOL",
+            "visibility": "PRIVATE"
+          }
+        }
+
+        profileField.value = this.darkTheme;
+        this.profileService.createOrUpdate(profileField).subscribe((response) => {
+          window.location.reload();
+        })
+      })
+    } else {
+      window.location.reload();
+    }
+
+  }
+
+  logout() {
+    this.authService.logout().subscribe(data => {
+      this.router.navigate([""]).then(() => {
+        window.location.reload();
+      });
+    })
+  }
+
+  isBiggerScreen() {
+    const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    if(width < 768) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  openExternal(url, target = '_self') {
+    window.open(url, target);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    if(event.target.innerWidth < 768) {
+      this.opened = false;
+    } else {
+      this.opened = true;
+    }
+  }
+}