Initial commit

src/app/admin-view/key/key.component.html

@@ -0,0 +1,42 @@
+<div id="upper-bar">
+    <mat-form-field>
+        <mat-label>Wyszukaj</mat-label>
+        <input matInput (keyup)="filter($event)">
+    </mat-form-field>
+    <mat-chip-listbox [(ngModel)]="filters" multiple>
+        <mat-chip-option value="showAll">Pokaż wszystko</mat-chip-option>
+    </mat-chip-listbox>
+    <button mat-icon-button (click)="new()"><mat-icon>add</mat-icon></button>
+</div>
+<mat-spinner *ngIf="loading"></mat-spinner>
+<table mat-table [dataSource]="keys">
+    <div matColumnDef="room">
+        <th mat-header-cell *matHeaderCellDef>Sala</th>
+        <td mat-cell *matCellDef="let element">{{element.room}}</td>
+    </div>
+    <div matColumnDef="whom">
+        <th mat-header-cell *matHeaderCellDef>Wypożyczający</th>
+        <td mat-cell *matCellDef="let element">{{element.whom.uname}}</td>
+    </div>
+    <div matColumnDef="borrow">
+        <th mat-header-cell *matHeaderCellDef>Data wypożyczenia</th>
+        <td mat-cell *matCellDef="let element">{{element.borrow.format("HH:mm, ddd D.MM.")}}</td>
+    </div>
+    <div matColumnDef="tb">
+        <th mat-header-cell *matHeaderCellDef>Data zwrotu</th>
+        <td mat-cell *matCellDef="let element">
+            @if (element.tb) {
+                {{element.tb.format("HH:mm, ddd D.MM.")}}
+            }
+        </td>
+    </div>
+    <div matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef>Akcje</th>
+        <td mat-cell *matCellDef="let element">
+            <button mat-mini-fab (click)="tb(element._id)" *ngIf="!element.tb"><mat-icon>person_cancel</mat-icon></button>
+        </td>
+    </div>
+    <tr mat-header-row *matHeaderRowDef="collumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: collumns"></tr>
+</table>
+<mat-paginator pageSize="9" [pageSizeOptions]="[9, 15, 20, 50, 160]"></mat-paginator>