Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate HeaderComponent into Staff Playtime view, update layout with full-height styling, and enhance UI consistency.

Browse Source
This commit is contained in:
akastijn 2025-11-02 22:48:27 +01:00
parent edaebe9e4a
commit 710771f5f7
3 changed files with 46 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.html
View File

@ -1,40 +1,48 @@
<div class="staff-pt-container">
<div class="week-header">
<button mat-icon-button (click)="prevWeek()" matTooltip="Previous week" aria-label="Previous week">
<mat-icon>chevron_left</mat-icon>
</button>
<div>
<app-header [current_page]="'staff-pt'" height="200px" background_image="/public/img/backgrounds/staff.png"
[overlay_gradient]="0.5">
<div class="week-title">{{ weekLabel() }}</div>
</app-header>
<section class="darkmodeSection full-height">
<div class="staff-pt-container">
<div class="week-header">
<button mat-icon-button (click)="prevWeek()" matTooltip="Previous week" aria-label="Previous week">
<mat-icon>chevron_left</mat-icon>
</button>
<button mat-icon-button (click)="nextWeek()" [disabled]="!canGoNextWeek()"
matTooltip="Next week" aria-label="Next week">
<mat-icon>chevron_right</mat-icon>
</button>
</div>
<div class="week-title">{{ weekLabel() }}</div>
<table mat-table [dataSource]="staffPt()" class="mat-elevation-z2 full-width">
<ng-container matColumnDef="staff_member">
<th mat-header-cell *matHeaderCellDef> Staff Member</th>
<td mat-cell *matCellDef="let row"> {{ row.staff_member }}</td>
</ng-container>
<button mat-icon-button (click)="nextWeek()" [disabled]="!canGoNextWeek()"
matTooltip="Next week" aria-label="Next week">
<mat-icon>chevron_right</mat-icon>
</button>
</div>
<ng-container matColumnDef="playtime">
<th mat-header-cell *matHeaderCellDef> Playtime (h:mm)</th>
<td mat-cell *matCellDef="let row"> {{ minutesToHm(row.playtime) }}</td>
</ng-container>
<table mat-table [dataSource]="staffPt()" class="mat-elevation-z2 full-width">
<ng-container matColumnDef="staff_member">
<th mat-header-cell *matHeaderCellDef> Staff Member</th>
<td mat-cell *matCellDef="let row"> {{ row.staff_member }}</td>
</ng-container>
<ng-container matColumnDef="last_played">
<th mat-header-cell *matHeaderCellDef> Last Played</th>
<td mat-cell *matCellDef="let row"> {{ row.last_played | date:'medium' }}</td>
</ng-container>
<ng-container matColumnDef="playtime">
<th mat-header-cell *matHeaderCellDef> Playtime (h:mm)</th>
<td mat-cell *matCellDef="let row"> {{ minutesToHm(row.playtime) }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<ng-container matColumnDef="last_played">
<th mat-header-cell *matHeaderCellDef> Last Played</th>
<td mat-cell *matCellDef="let row"> {{ row.last_played | date:'medium' }}</td>
</ng-container>
@if (!staffPt()?.length) {
<tr class="no-data">
<td colspan="3">No data for this week.</td>
</tr>
}
</table>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
@if (!staffPt()?.length) {
<tr class="no-data">
<td colspan="3">No data for this week.</td>
</tr>
}
</table>
</div>
</section>
</div>

3
frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.ts
View File

@ -5,11 +5,12 @@ import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import {MatTooltipModule} from '@angular/material/tooltip';
import {SiteService, StaffPlaytime} from '@api';
import {HeaderComponent} from '@header/header.component';
@Component({
selector: 'app-staff-pt',
standalone: true,
imports: [CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatTooltipModule, DatePipe],
imports: [CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatTooltipModule, DatePipe, HeaderComponent],
templateUrl: './staff-pt.component.html',
styleUrl: './staff-pt.component.scss'
})

4
frontend/src/styles.scss
View File

@ -159,6 +159,10 @@ time, mark, audio, video {
width: 100%;
}
.full-height {
height: 100%;
}
.centered {
margin-left: auto;
margin-right: auto;