119 lines
3.0 KiB
HTML
119 lines
3.0 KiB
HTML
<style>
|
|
:host {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.toolbar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.toolbar #filter-date-range{
|
|
flex-grow: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
.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-area {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
align-items: stretch;
|
|
}
|
|
.dashboard-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
/* make all columns equal width - flex-basis:0 to make all resizing start from the same size*/
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
flex-basis: 0;
|
|
|
|
}
|
|
.editable {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.editable-hovered {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.editable:hover .editable-hovered{
|
|
visibility: visible;
|
|
}
|
|
|
|
.handle {
|
|
display: block;
|
|
height: 1.5em;
|
|
visibility: hidden;
|
|
width: fit-content;
|
|
}
|
|
[cdkDrag] {
|
|
position: relative;
|
|
}
|
|
[cdkDrag]:hover .handle, .cdk-drop-list-dragging .handle {
|
|
cursor: grab;
|
|
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-flat-button (click)="save()" [disabled]="!isDirty()">Save</button>
|
|
<div id="filter-date-range">
|
|
Date range: <app-date-picker #datePicker (dateValueSelected)="updateDateRange($event)" ></app-date-picker>
|
|
</div>
|
|
</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 class="dashboard-area">
|
|
<div
|
|
cdkDropList
|
|
class="dashboard-column"
|
|
*ngFor="let i of [0,1]"
|
|
[cdkDropListData]="i"
|
|
(cdkDropListDropped)="drop($event)">
|
|
<div
|
|
cdkDrag
|
|
*ngFor="let id of dashboard.arrangement[i]"
|
|
[attr.widget-id]="id">
|
|
<div cdkDragHandle class="handle"><img src="/assets/img/drag_handle.svg" class="icon-small"/></div>
|
|
<app-text-widget
|
|
*ngIf="isTextWidget(id)"
|
|
[data]="getTextWidget(id)!" (deleted)="delete($event)"></app-text-widget>
|
|
<app-plot-widget
|
|
*ngIf="isPlotWidget(id)"
|
|
[data]="getPlotWidget(id)!" (deleted)="delete($event)"></app-plot-widget>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|