we_bstly-web/src/app/ui/main/main.component.ts

import { Component, HostListener } from '@angular/core';
import { DateAdapter } from '@angular/material/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { fromEvent } from 'rxjs';

import { Location } from '@angular/common';
import { AuthService } from '../../services/auth.service';
import { I18nService } from '../../services/i18n.service';
import { ProfileService } from '../../services/profile.service';

@Component({
  standalone: false,
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent {

  opened: boolean = true;
  darkTheme = "false";
  title = 'we.bstly';
  currentLocale: String;
  datetimeformat: String;
  locales;
  auth;

  touchThresh: number = 150;
  touchStartX: number;
  touchX: number;

  constructor(
    private i18n: I18nService,
    private authService: AuthService,
    private profileService: ProfileService,
    private router: Router,
    private iconRegistry: MatIconRegistry,
    private sanitizer: DomSanitizer,
    private location: Location,
    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({
      next: (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;
    }
    try {
      if (localStorage.getItem("bstly.darkTheme") == "true") {
        this.darkTheme = "true";
        window.document.body.classList.add("dark-theme");
      }
    } catch { }

    this.touchEvents();
  }

  setLocale(locale) {
    try {
      localStorage.setItem("bstly.locale", locale);
    } catch {
      this.location.replaceState(window.location.pathname, 'locale=' + locale);
    }

    if (this.auth && this.auth.authenticated) {
      this.profileService.getField("locale").subscribe({
        next: (profileField: any) => {

          if (profileField == null) {
            profileField = {
              "name": "locale",
              "type": "TEXT",
              "visibility": "PRIVATE"
            }
          }

          profileField.value = locale;
          this.profileService.createOrUpdate(profileField).subscribe({
            next: (response) => {
              window.location.reload();
            }
          })
        }
      })
    } else {
      window.location.reload();
    }
  }

  darkThemeChange($event) {
    if ($event.checked) {
      this.darkTheme = "true";
    } else {
      this.darkTheme = "false";
    }

    try {
      localStorage.setItem("bstly.darkTheme", this.darkTheme);
    } catch { }

    if (this.auth && this.auth.authenticated) {
      this.profileService.getField("darkTheme").subscribe({
        next: (profileField: any) => {

          if (profileField == null) {
            profileField = {
              "name": "darkTheme",
              "type": "BOOL",
              "visibility": "PRIVATE"
            }
          }

          profileField.value = this.darkTheme;
          this.profileService.createOrUpdate(profileField).subscribe({
            next: (response) => {
              window.location.reload();
            }
          })
        }
      })
    } else {
      window.location.reload();
    }

  }

  logout() {
    this.authService.logout().subscribe({
      next: (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;
    }
  }

  hasAdminRole(): boolean {
    if (this.auth && this.auth.authorities) {
      return this.auth.authorities.some((auth: any) => auth.authority === 'ROLE_ADMIN');
    }
    return false;
  }

  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;
    }
  }

  touchEvents(): void {
    fromEvent(document, 'touchstart').subscribe({
      next: (event: TouchEvent) => {
        if (event.touches[0]) {
          this.touchStartX = event.touches[0].screenX;

        }
      }
    })

    fromEvent(document, 'touchmove').subscribe({
      next: (event: TouchEvent) => {
        if (event.touches[0]) {
          this.touchX = event.touches[0].screenX;
        }
      }
    })

    fromEvent(document, 'touchend').subscribe({
      next: (event: TouchEvent) => {
        if (this.touchX != 0) {
          const touchDiff = this.touchStartX - this.touchX;
          this.touchStartX = 0;
          this.touchX = 0;
          if (touchDiff < 0 && touchDiff < (this.touchThresh * -1) && !this.opened) {
            this.opened = true;
          } else if (touchDiff > 0 && touchDiff > this.touchThresh && this.opened) {
            this.opened = false;
          }
        }
      }
    })
  }
}