2025-11-02 21:36:28 +00:00
|
|
|
|
import {Component, computed, inject, OnInit, signal} from '@angular/core';
|
|
|
|
|
|
import {CommonModule, DatePipe} from '@angular/common';
|
|
|
|
|
|
import {MatTableModule} from '@angular/material/table';
|
|
|
|
|
|
import {MatButtonModule} from '@angular/material/button';
|
|
|
|
|
|
import {MatIconModule} from '@angular/material/icon';
|
|
|
|
|
|
import {MatTooltipModule} from '@angular/material/tooltip';
|
2025-11-02 21:25:10 +00:00
|
|
|
|
import {SiteService, StaffPlaytime} from '@api';
|
|
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
|
|
selector: 'app-staff-pt',
|
2025-11-02 21:36:28 +00:00
|
|
|
|
standalone: true,
|
|
|
|
|
|
imports: [CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatTooltipModule, DatePipe],
|
2025-11-02 21:25:10 +00:00
|
|
|
|
templateUrl: './staff-pt.component.html',
|
|
|
|
|
|
styleUrl: './staff-pt.component.scss'
|
|
|
|
|
|
})
|
|
|
|
|
|
export class StaffPtComponent implements OnInit {
|
|
|
|
|
|
siteService = inject(SiteService);
|
2025-11-02 21:36:28 +00:00
|
|
|
|
|
|
|
|
|
|
staffPt = signal<StaffPlaytime[]>([]);
|
|
|
|
|
|
|
|
|
|
|
|
weekStart = signal<Date>(this.getStartOfWeek(new Date()));
|
|
|
|
|
|
weekEnd = computed(() => this.getEndOfWeek(this.weekStart()));
|
|
|
|
|
|
|
|
|
|
|
|
todayStart = signal<Date>(this.startOfDay(new Date()));
|
|
|
|
|
|
|
|
|
|
|
|
displayedColumns = ['staff_member', 'playtime', 'last_played'];
|
2025-11-02 21:25:10 +00:00
|
|
|
|
|
|
|
|
|
|
ngOnInit(): void {
|
2025-11-02 21:36:28 +00:00
|
|
|
|
this.loadCurrentWeek();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private loadCurrentWeek() {
|
|
|
|
|
|
this.loadStaffData(this.weekStart(), this.weekEnd());
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
prevWeek() {
|
|
|
|
|
|
const prev = new Date(this.weekStart());
|
|
|
|
|
|
prev.setDate(prev.getDate() - 7);
|
|
|
|
|
|
prev.setHours(0, 0, 0, 0);
|
|
|
|
|
|
this.weekStart.set(prev);
|
|
|
|
|
|
this.loadCurrentWeek();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
nextWeek() {
|
|
|
|
|
|
if (!this.canGoNextWeek()) return;
|
|
|
|
|
|
const next = new Date(this.weekStart());
|
|
|
|
|
|
next.setDate(next.getDate() + 7);
|
|
|
|
|
|
next.setHours(0, 0, 0, 0);
|
|
|
|
|
|
this.weekStart.set(next);
|
|
|
|
|
|
this.loadCurrentWeek();
|
|
|
|
|
|
}
|
2025-11-02 21:25:10 +00:00
|
|
|
|
|
2025-11-02 21:36:28 +00:00
|
|
|
|
canGoNextWeek(): boolean {
|
|
|
|
|
|
const nextWeekStart = new Date(this.weekStart());
|
|
|
|
|
|
nextWeekStart.setDate(nextWeekStart.getDate() + 7);
|
|
|
|
|
|
nextWeekStart.setHours(0, 0, 0, 0);
|
|
|
|
|
|
return nextWeekStart.getTime() <= this.todayStart().getTime();
|
2025-11-02 21:25:10 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
2025-11-02 21:36:28 +00:00
|
|
|
|
weekLabel(): string {
|
|
|
|
|
|
const start = this.weekStart();
|
|
|
|
|
|
const end = this.weekEnd();
|
|
|
|
|
|
|
|
|
|
|
|
const startFmt = start.toLocaleDateString(undefined, {month: 'short', day: 'numeric'});
|
|
|
|
|
|
const endFmt = end.toLocaleDateString(undefined, {month: 'short', day: 'numeric'});
|
|
|
|
|
|
const year = end.getFullYear();
|
|
|
|
|
|
return `Week ${startFmt} – ${endFmt}, ${year}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
minutesToHm(mins?: number): string {
|
|
|
|
|
|
if (mins == null) return '';
|
|
|
|
|
|
const h = Math.floor(mins / 60);
|
|
|
|
|
|
const m = mins % 60;
|
|
|
|
|
|
return `${h}:${m.toString().padStart(2, '0')}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private loadStaffData(from: Date, to: Date) {
|
2025-11-02 21:25:10 +00:00
|
|
|
|
this.siteService.getStaffPlaytime(from.toISOString(), to.toISOString())
|
|
|
|
|
|
.subscribe({
|
2025-11-02 21:36:28 +00:00
|
|
|
|
next: data => this.staffPt.set(data ?? []),
|
2025-11-02 21:25:10 +00:00
|
|
|
|
error: err => console.error('Error getting staff playtime:', err)
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
2025-11-02 21:36:28 +00:00
|
|
|
|
|
|
|
|
|
|
private getStartOfWeek(date: Date): Date {
|
|
|
|
|
|
const d = new Date(date);
|
|
|
|
|
|
d.setDate(d.getDate() - d.getDay()); // Sunday start
|
|
|
|
|
|
d.setHours(0, 0, 0, 0);
|
|
|
|
|
|
return d;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private getEndOfWeek(start: Date): Date {
|
|
|
|
|
|
const d = new Date(start);
|
|
|
|
|
|
d.setDate(start.getDate() + 6);
|
|
|
|
|
|
d.setHours(23, 59, 59, 999);
|
|
|
|
|
|
return d;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private startOfDay(date: Date): Date {
|
|
|
|
|
|
const d = new Date(date);
|
|
|
|
|
|
d.setHours(0, 0, 0, 0);
|
|
|
|
|
|
return d;
|
|
|
|
|
|
}
|
2025-11-02 21:25:10 +00:00
|
|
|
|
}
|