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>
<div class="week-header"> <app-header [current_page]="'staff-pt'" height="200px" background_image="/public/img/backgrounds/staff.png"
<button mat-icon-button (click)="prevWeek()" matTooltip="Previous week" aria-label="Previous week"> [overlay_gradient]="0.5">
<mat-icon>chevron_left</mat-icon>
</button>
<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()" <div class="week-title">{{ weekLabel() }}</div>
matTooltip="Next week" aria-label="Next week">
<mat-icon>chevron_right</mat-icon>
</button>
</div>
<table mat-table [dataSource]="staffPt()" class="mat-elevation-z2 full-width"> <button mat-icon-button (click)="nextWeek()" [disabled]="!canGoNextWeek()"
<ng-container matColumnDef="staff_member"> matTooltip="Next week" aria-label="Next week">
<th mat-header-cell *matHeaderCellDef> Staff Member</th> <mat-icon>chevron_right</mat-icon>
<td mat-cell *matCellDef="let row"> {{ row.staff_member }}</td> </button>
</ng-container> </div>
<ng-container matColumnDef="playtime"> <table mat-table [dataSource]="staffPt()" class="mat-elevation-z2 full-width">
<th mat-header-cell *matHeaderCellDef> Playtime (h:mm)</th> <ng-container matColumnDef="staff_member">
<td mat-cell *matCellDef="let row"> {{ minutesToHm(row.playtime) }}</td> <th mat-header-cell *matHeaderCellDef> Staff Member</th>
</ng-container> <td mat-cell *matCellDef="let row"> {{ row.staff_member }}</td>
</ng-container>
<ng-container matColumnDef="last_played"> <ng-container matColumnDef="playtime">
<th mat-header-cell *matHeaderCellDef> Last Played</th> <th mat-header-cell *matHeaderCellDef> Playtime (h:mm)</th>
<td mat-cell *matCellDef="let row"> {{ row.last_played | date:'medium' }}</td> <td mat-cell *matCellDef="let row"> {{ minutesToHm(row.playtime) }}</td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <ng-container matColumnDef="last_played">
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <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 mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="no-data"> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<td colspan="3">No data for this week.</td>
</tr> @if (!staffPt()?.length) {
} <tr class="no-data">
</table> <td colspan="3">No data for this week.</td>
</tr>
}
</table>
</div>
</section>
</div> </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 {MatIconModule} from '@angular/material/icon';
import {MatTooltipModule} from '@angular/material/tooltip'; import {MatTooltipModule} from '@angular/material/tooltip';
import {SiteService, StaffPlaytime} from '@api'; import {SiteService, StaffPlaytime} from '@api';
import {HeaderComponent} from '@header/header.component';
@Component({ @Component({
selector: 'app-staff-pt', selector: 'app-staff-pt',
standalone: true, standalone: true,
imports: [CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatTooltipModule, DatePipe], imports: [CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatTooltipModule, DatePipe, HeaderComponent],
templateUrl: './staff-pt.component.html', templateUrl: './staff-pt.component.html',
styleUrl: './staff-pt.component.scss' styleUrl: './staff-pt.component.scss'
}) })

4
frontend/src/styles.scss
View File

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