144 lines
5.5 KiB
HTML
144 lines
5.5 KiB
HTML
@if (vm$ | async; as vm) {
|
|
@if (!vm.isLoading) {
|
|
<div class="flex flex-col m-0 md:m-4">
|
|
<!-- Top row with user input elements -->
|
|
<div class="flex flex-wrap md:flex-nowrap justify-between items-center">
|
|
<div class="flex items-center m-2">
|
|
<button mat-icon-button (click)="addMonthToSelectedDate(-1)">
|
|
<mat-icon>chevron_left</mat-icon>
|
|
</button>
|
|
<div class="flex items-center">
|
|
<span class="pr-2">
|
|
{{ vm.selectedDate | date : "MM.yyyy" }}
|
|
</span>
|
|
<input
|
|
[formControl]="selectedDate"
|
|
[matDatepicker]="picker"
|
|
[matDatepickerFilter]="notSunday"
|
|
[min]="minSelectableDate"
|
|
class="invisible w-0"
|
|
/>
|
|
<button mat-icon-button (click)="picker.open()">
|
|
<mat-icon>today</mat-icon>
|
|
</button>
|
|
<mat-datepicker
|
|
#picker
|
|
startView="multi-year"
|
|
(monthSelected)="setMonthAndYear($event, picker)"
|
|
class="month-picker"
|
|
></mat-datepicker>
|
|
</div>
|
|
<button mat-icon-button (click)="addMonthToSelectedDate(1)">
|
|
<mat-icon>chevron_right</mat-icon>
|
|
</button>
|
|
</div>
|
|
<mat-chip-listbox (change)="changeSelectedType($event)">
|
|
<mat-chip-option
|
|
[value]="DiagrammType.Revenue"
|
|
[selected]="vm.selectedMetric === DiagrammType.Revenue"
|
|
>
|
|
Umsatz
|
|
</mat-chip-option>
|
|
<mat-chip-option
|
|
[value]="DiagrammType.TimePerTour"
|
|
[selected]="vm.selectedMetric === DiagrammType.TimePerTour"
|
|
>
|
|
Kapazität pro Tour
|
|
</mat-chip-option>
|
|
<mat-chip-option
|
|
[value]="DiagrammType.AverageRevenue"
|
|
[selected]="vm.selectedMetric === DiagrammType.AverageRevenue"
|
|
>
|
|
Durchschnittsumsatz
|
|
</mat-chip-option>
|
|
</mat-chip-listbox>
|
|
</div>
|
|
<div
|
|
class="my-5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 lg:gap-4"
|
|
>
|
|
<dks-view-type-selector
|
|
[viewType]="DashboardViewType.BTW"
|
|
[currentMetric]="vm.selectedMetric"
|
|
[metrics]="vm.btwMetrics"
|
|
[selected]="vm.selectedViewType === DashboardViewType.BTW"
|
|
(viewTypeSelected)="setSelectedViewType(DashboardViewType.BTW)"
|
|
></dks-view-type-selector>
|
|
<dks-view-type-selector
|
|
[viewType]="DashboardViewType.TSW"
|
|
[currentMetric]="vm.selectedMetric"
|
|
[metrics]="vm.tswMetrics"
|
|
[selected]="vm.selectedViewType === DashboardViewType.TSW"
|
|
(viewTypeSelected)="setSelectedViewType(DashboardViewType.TSW)"
|
|
></dks-view-type-selector>
|
|
<dks-view-type-selector
|
|
[viewType]="DashboardViewType.KTW"
|
|
[currentMetric]="vm.selectedMetric"
|
|
[metrics]="vm.ktwMetrics"
|
|
[selected]="vm.selectedViewType === DashboardViewType.KTW"
|
|
(viewTypeSelected)="setSelectedViewType(DashboardViewType.KTW)"
|
|
></dks-view-type-selector>
|
|
<dks-view-type-selector
|
|
[viewType]="DashboardViewType.Gesamt"
|
|
[currentMetric]="vm.selectedMetric"
|
|
[metrics]="vm.combinedMetrics"
|
|
[selected]="vm.selectedViewType === DashboardViewType.Gesamt"
|
|
(viewTypeSelected)="setSelectedViewType(DashboardViewType.Gesamt)"
|
|
></dks-view-type-selector>
|
|
</div>
|
|
<!-- Visualisation -->
|
|
<mat-card
|
|
appearance="outlined"
|
|
class="grid grid-cols-2 lg:grid-cols-4 gap-2 lg:gap-4"
|
|
>
|
|
<mat-card-content>
|
|
@switch (vm.selectedViewType) { @case (DashboardViewType.BTW) {
|
|
<div class="col-span-2 lg:col-span-4 w-full">
|
|
<dks-metric-summary
|
|
[metrics]="vm.btwMetrics"
|
|
[metricTimeScale]="metricTimeScale"
|
|
[selectedMetric]="vm.selectedMetric"
|
|
[labelFormat]="'d.M.yy'"
|
|
></dks-metric-summary>
|
|
</div>
|
|
} @case (DashboardViewType.TSW) {
|
|
<div class="col-span-2 lg:col-span-4 w-full">
|
|
<dks-metric-summary
|
|
[metrics]="vm.tswMetrics"
|
|
[metricTimeScale]="metricTimeScale"
|
|
[selectedMetric]="vm.selectedMetric"
|
|
[labelFormat]="'d.M.yy'"
|
|
></dks-metric-summary>
|
|
</div>
|
|
} @case (DashboardViewType.KTW) {
|
|
<div
|
|
class="col-span-2 lg:col-span-4 w-full rounded"
|
|
>
|
|
<dks-metric-summary
|
|
[metrics]="vm.ktwMetrics"
|
|
[metricTimeScale]="metricTimeScale"
|
|
[selectedMetric]="vm.selectedMetric"
|
|
[labelFormat]="'d.M.yy'"
|
|
></dks-metric-summary>
|
|
</div>
|
|
} @case (DashboardViewType.Gesamt) {
|
|
<div
|
|
class="col-span-2 lg:col-span-4 w-full"
|
|
>
|
|
<dks-metric-summary
|
|
[metrics]="vm.combinedMetrics"
|
|
[metricTimeScale]="metricTimeScale"
|
|
[selectedMetric]="vm.selectedMetric"
|
|
[labelFormat]="'d.M.yy'"
|
|
></dks-metric-summary>
|
|
</div>
|
|
} }
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
} @else {
|
|
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
|
}
|
|
} @else {
|
|
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
|
}
|