Added i18n translations

src/app/modules/panel/panel.component.ts

@@ -1,9 +1,10 @@
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, ElementRef, HostListener, ViewChild } from "@angular/core";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
 import { faPowerOff, faVolumeHigh } from "@fortawesome/free-solid-svg-icons";
 import { PanelSevice } from "../../services/panel.service";
+import { TranslateService } from "../../services/translate.service";
 
 @Component({
   standalone: true,
@@ -17,7 +18,11 @@ export class PanelComponent {
   faGithub = faGithub;
   faVolume = faVolumeHigh;
   faPower = faPowerOff;
-  constructor(private panelService: PanelSevice) {
+  showLangModalBool = false;
+  @ViewChild("lang_modal") langModal: ElementRef<HTMLDivElement> | null = null;
+  @ViewChild("lang_btn") langBtn: ElementRef<HTMLSpanElement> | null = null;
+
+  constructor(private panelService: PanelSevice, private translateService: TranslateService) {
     this.time = this.getTime();
     setInterval(() => {
       this.time = this.getTime();
@@ -26,7 +31,7 @@ export class PanelComponent {
 
   private getTime() {
     const time = this.panelService.getTime();
-    return time.toLocaleDateString("en-US", {
+    return time.toLocaleDateString(this.translateService.translate("TIME_SCHEMA"), {
       month: "short",
       day: "numeric",
       hour: "numeric",
@@ -37,4 +42,31 @@ export class PanelComponent {
   goToSource() {
     window.open("https://git.nwaifu.su/neuro_llc/NwaifuWeb", "_blank");
   }
+
+  @HostListener("window:resize")
+  private moveLangModal() {
+    if (!this.langModal || !this.langBtn) {
+      return;
+    }
+
+    const x = this.langBtn.nativeElement.getBoundingClientRect().x;
+    this.langModal.nativeElement.style.left = `calc(${x}px - 3.5rem)`;
+  }
+
+  toggleModal() {
+    if (this.langModal) {
+      this.langModal.nativeElement.classList.toggle("active");
+      if (this.langModal.nativeElement.classList.contains("active")) {
+        this.moveLangModal();
+      }
+    }
+  }
+
+  useLang(lang: string) {
+    this.translateService.use(lang);
+  }
+
+  getLang() {
+    return this.translateService.lang;
+  }
 }