89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
import { CommonModule } from "@angular/common";
|
|
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 { TranslationPipe } from '../../pipes/translation.pipe';
|
|
import { PanelSevice } from "../../services/panel.service";
|
|
import { TranslateService } from "../../services/translate.service";
|
|
|
|
@Component({
|
|
standalone: true,
|
|
selector: "app-panel",
|
|
imports: [CommonModule, FontAwesomeModule, TranslationPipe],
|
|
templateUrl: "./panel.component.html",
|
|
styleUrls: ["./panel.component.less"],
|
|
})
|
|
export class PanelComponent {
|
|
source_code_btn_title = "SOURCE_CODE_TITLE"
|
|
|
|
public time = "";
|
|
faGithub = faGithub;
|
|
faVolume = faVolumeHigh;
|
|
faPower = faPowerOff;
|
|
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();
|
|
}, 1000);
|
|
}
|
|
|
|
private getTime() {
|
|
const time = this.panelService.getTime();
|
|
return time.toLocaleDateString(this.translateService.translate("TIME_SCHEMA"), {
|
|
month: "short",
|
|
day: "numeric",
|
|
hour: "numeric",
|
|
minute: "numeric",
|
|
});
|
|
}
|
|
|
|
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)`;
|
|
}
|
|
|
|
@HostListener("window:click", ["$event"])
|
|
private closeLangModal(event: MouseEvent) {
|
|
if (
|
|
this.langModal &&
|
|
this.langBtn &&
|
|
!this.langModal.nativeElement.contains(event.target as Node) &&
|
|
!this.langBtn.nativeElement.contains(event.target as Node)
|
|
) {
|
|
this.langModal.nativeElement.classList.remove("active");
|
|
}
|
|
}
|
|
|
|
toggleModal() {
|
|
if (this.langModal) {
|
|
this.langModal.nativeElement.classList.toggle("active");
|
|
if (this.langModal.nativeElement.classList.contains("active")) {
|
|
this.moveLangModal();
|
|
}
|
|
}
|
|
}
|
|
|
|
useLang(lang: string) {
|
|
this.langModal && this.langModal.nativeElement.classList.remove("active");
|
|
this.translateService.use(lang);
|
|
}
|
|
|
|
getLang() {
|
|
return this.translateService.lang;
|
|
}
|
|
}
|