64 lines
1.7 KiB
HTML
64 lines
1.7 KiB
HTML
<style>
|
|
:host {
|
|
/*
|
|
height: calc(100% - 29px);
|
|
*/
|
|
width: 100%;
|
|
position: absolute;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
|
|
.center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.center-content {
|
|
text-align: center;
|
|
}
|
|
.is-error {
|
|
font-size: 3rem;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
</style>
|
|
|
|
<div *ngIf="loading" class="center">
|
|
<mat-spinner></mat-spinner>
|
|
</div>
|
|
<div *ngIf="error" class="center is-error center-content ">
|
|
{{error}}
|
|
</div>
|
|
<div *ngIf="!loading && !error">
|
|
<div class="toolbar">
|
|
<button mat-button (click)="createNewDashboard()">New</button>
|
|
</div>
|
|
<div *ngIf="dataSource.length == 0" class="center center-content is-error">
|
|
No Dashboard Found
|
|
</div>
|
|
<table *ngIf="dataSource.length > 0" mat-table [dataSource]="dataSource" >
|
|
|
|
<!-- Icon Column -->
|
|
<ng-container matColumnDef="icon">
|
|
<th mat-header-cell *matHeaderCellDef></th>
|
|
<td mat-cell *matCellDef="let element"><a [routerLink]="['/dashboard', element.id]"><img src="assets/img/dashboard-outline.svg"/></a></td>
|
|
</ng-container>
|
|
<!-- Name Column -->
|
|
<ng-container matColumnDef="name">
|
|
<th mat-header-cell *matHeaderCellDef> Name </th>
|
|
<td mat-cell *matCellDef="let element"><a [routerLink]="['/dashboard', element.id]">{{element.name}}</a></td>
|
|
</ng-container>
|
|
<!-- Description Column -->
|
|
<ng-container matColumnDef="description">
|
|
<th mat-header-cell *matHeaderCellDef>Description</th>
|
|
<td mat-cell *matCellDef="let element">{{element.description}}</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
|
</table>
|
|
</div>
|
|
|