initial commit

src/app/ui/main/main.ui.ts

@@ -0,0 +1,126 @@
+import { Component, HostListener } from '@angular/core';
+
+import { AuthService } from '../../services/auth.service';
+import { UserService } from '../../services/user.service';
+import { I18nService } from '../../services/i18n.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: 'ui-main',
+  templateUrl: './main.ui.html'
+})
+
+export class UiMain {
+  opened = true;
+  darkTheme = "false";
+  title = 'bstlboard';
+  currentLocale: String;
+  datetimeformat: String;
+  locales;
+  auth;
+
+  constructor(
+    private i18n: I18nService,
+    private authService: AuthService,
+    private userService: UserService,
+    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("bstlboard.darkTheme") == "true") {
+      this.darkTheme = "true";
+      window.document.body.classList.add("dark-theme");
+    }
+  }
+
+  setLocale(locale) {
+    localStorage.setItem("bstlboard.locale", locale);
+
+    if (this.auth && this.auth.authenticated) {
+
+      this.userService.get().subscribe((user: any) => {
+        user.locale = locale;
+        this.userService.update(user).subscribe(() => {
+          window.location.reload();
+        })
+      });
+    } else {
+      window.location.reload();
+    }
+  }
+
+  darkThemeChange($event) {
+    if ($event.checked) {
+      this.darkTheme = "true";
+    } else {
+      this.darkTheme = "false";
+    }
+
+    localStorage.setItem("bstlboard.darkTheme", this.darkTheme);
+
+    if (this.auth && this.auth.authenticated) {
+      this.userService.get().subscribe((user: any) => {
+        user.darkTheme = $event.checked;
+        this.userService.update(user).subscribe(() => {
+          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;
+    }
+  }
+}