(web): use angulars built-in control flow everywhere
This commit is contained in:
Marcel Arndt
+138
-136
@@ -1,141 +1,143 @@
|
||||
<ng-container *ngIf="vm$ | async as vm; else loadingTmpl">
|
||||
<div class="flex flex-col m-0 md:m-4" *ngIf="!vm.isLoading; else loadingTmpl">
|
||||
<!-- 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>
|
||||
@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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<mat-chip-listbox (change)="changeSelectedType($event)">
|
||||
<mat-chip-option
|
||||
[value]="DiagrammType.Revenue"
|
||||
[selected]="vm.selectedMetric === DiagrammType.Revenue"
|
||||
<div
|
||||
class="my-5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 lg:gap-4"
|
||||
>
|
||||
Umsatz
|
||||
</mat-chip-option>
|
||||
<mat-chip-option
|
||||
[value]="DiagrammType.TimePerTour"
|
||||
[selected]="vm.selectedMetric === DiagrammType.TimePerTour"
|
||||
<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"
|
||||
>
|
||||
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>
|
||||
</ng-container>
|
||||
<ng-template #loadingTmpl>
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</ng-template>
|
||||
<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>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user