77 lines
1.9 KiB
HTML
77 lines
1.9 KiB
HTML
<style>
|
|
:host {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.content {
|
|
padding: 0.5em;
|
|
}
|
|
.dashboard-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.editable .editable-hovered {
|
|
visibility: hidden;
|
|
}
|
|
.editable:hover .editable-hovered {
|
|
visibility: visible;
|
|
}
|
|
</style>
|
|
|
|
<div *ngIf="dashboard === undefined && !error" class="center">
|
|
<mat-spinner></mat-spinner>
|
|
</div>
|
|
<div *ngIf="error" class="center center-content">
|
|
<div class="is-error">{{error}}</div>
|
|
<div>Try another <a [routerLink]="['/dashboard']">dashboard</a>.</div>
|
|
</div>
|
|
<div *ngIf="dashboard !== undefined" class="content">
|
|
<div class="toolbar">
|
|
<button mat-button (click)="addText()">Add Text</button>
|
|
<button mat-button (click)="addPlot()">Add Plot</button>
|
|
<button class="save-button" mat-button (click)="save()">Save</button>
|
|
</div>
|
|
<div class="editable">
|
|
<h1>{{dashboard.name}}<button mat-icon-button (click)="editNameAndDescription()" class="editable-hovered"><img src="/assets/img/edit-outline.svg"/></button></h1>
|
|
<p>{{dashboard.description}}</p>
|
|
</div>
|
|
|
|
<div cdkDropListGroup>
|
|
<!-- All lists in here will be connected. -->
|
|
<div
|
|
cdkDropList
|
|
class="dashboard-column"
|
|
*ngFor="let column of dashboard.arrangement"
|
|
[cdkDropListData]="column"
|
|
(cdkDropListDropped)="drop($event)">
|
|
<div
|
|
cdkDrag
|
|
*ngFor="let id of column"
|
|
[attr.widget-id]="id">
|
|
<app-text-widget
|
|
*ngIf="isTextWidget(id)"
|
|
[data]="getTextWidget(id)!"></app-text-widget>
|
|
<app-plot-widget
|
|
*ngIf="isPlotWidget(id)"
|
|
[data]="getPlotWidget(id)!"></app-plot-widget>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|