Skip to content

Commit

Permalink
stepper mit leben gefuellt
Browse files Browse the repository at this point in the history
  • Loading branch information
Der-Alex-K committed Apr 3, 2024
1 parent 2e3c513 commit f3cfcd9
Show file tree
Hide file tree
Showing 9 changed files with 308 additions and 57 deletions.
6 changes: 5 additions & 1 deletion frontend/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ declare module '@vue/runtime-core' {
HeatmapCard: typeof import('./src/components/zaehlstelle/charts/HeatmapCard.vue')['default']
ImageAssetForm: typeof import('./src/components/pdfreport/assetforms/ImageAssetForm.vue')['default']
InfoMessage: typeof import('./src/components/app/InfoMessage.vue')['default']
JahreStepContent: typeof import('./src/components/messstelle/gesamtauswertung/stepper/JahreStepContent.vue')['default']
KommentarInfo: typeof import('./src/components/zaehlstelle/KommentarInfo.vue')['default']
Loader: typeof import('./src/components/common/Loader.vue')['default']
MessquerschnittAnzahlInfo: typeof import('./src/components/messstelle/MessquerschnittAnzahlInfo.vue')['default']
Expand Down Expand Up @@ -80,6 +81,7 @@ declare module '@vue/runtime-core' {
StepLine: typeof import('./src/components/zaehlstelle/charts/StepLine.vue')['default']
StepLineCard: typeof import('./src/components/zaehlstelle/charts/StepLineCard.vue')['default']
TagesTypRadiogroup: typeof import('./src/components/messstelle/optionsmenue/panels/TagesTypRadiogroup.vue')['default']
TagesTypStepContent: typeof import('./src/components/messstelle/gesamtauswertung/stepper/TagesTypStepContent.vue')['default']
TextAssetForm: typeof import('./src/components/pdfreport/assetforms/TextAssetForm.vue')['default']
TheSnackbar: typeof import('./src/components/common/TheSnackbar.vue')['default']
TooltipWithIcon: typeof import('./src/components/zaehlstelle/icons/TooltipWithIcon.vue')['default']
Expand All @@ -94,6 +96,7 @@ declare module '@vue/runtime-core' {
VCardText: typeof import('vuetify/lib')['VCardText']
VCardTitle: typeof import('vuetify/lib')['VCardTitle']
VCheckbox: typeof import('vuetify/lib')['VCheckbox']
VChip: typeof import('vuetify/lib')['VChip']
VCol: typeof import('vuetify/lib')['VCol']
VContainer: typeof import('vuetify/lib')['VContainer']
VDataTable: typeof import('vuetify/lib')['VDataTable']
Expand Down Expand Up @@ -147,6 +150,7 @@ declare module '@vue/runtime-core' {
VToolbarTitle: typeof import('vuetify/lib')['VToolbarTitle']
VTooltip: typeof import('vuetify/lib')['VTooltip']
WetterIcon: typeof import('./src/components/zaehlstelle/icons/WetterIcon.vue')['default']
WochentagStepContent: typeof import('@/components/messstelle/gesamtauswertung/stepper/TagesTypStepContent.vue')['default']
YesNoDialog: typeof import('./src/components/common/YesNoDialog.vue')['default']
ZaehlartIcon: typeof import('./src/components/zaehlstelle/icons/ZaehlartIcon.vue')['default']
ZaehldatenDiagramme: typeof import('./src/components/zaehlstelle/ZaehldatenDiagramme.vue')['default']
Expand All @@ -168,7 +172,7 @@ declare module '@vue/runtime-core' {
ZeitauswahlStundeOrBlock: typeof import('./src/components/messstelle/optionsmenue/panels/ZeitauswahlStundeOrBlock.vue')['default']
ZeitIntervall: typeof import('./src/components/messstelle/optionsmenue/panels/ZeitIntervall.vue')['default']
ZeitintervallStep: typeof import('@/components/messstelle/gesamtauswertung/stepper/ZeitintervallStepContent.vue')['default']
ZeitintervallStepContent: typeof import('@/components/messstelle/gesamtauswertung/stepper/ZeitintervallStepContent.vue')['default']
ZeitintervallStepContent: typeof import('./src/components/messstelle/gesamtauswertung/stepper/ZeitintervallStepContent.vue')['default']
ZeitPanel: typeof import('./src/components/messstelle/optionsmenue/panels/ZeitPanel.vue')['default']
Zeitreihe: typeof import('./src/components/zaehlstelle/charts/Zeitreihe.vue')['default']
ZeitreiheCard: typeof import('./src/components/zaehlstelle/charts/ZeitreiheCard.vue')['default']
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,41 +12,39 @@
:complete="activeStep > 1"
step="1"
editable
:rules="[isJahresintervallSelected]"
>
Zeitintervalle
<small> {{ selectedJahresintervallAsSummary }}</small>
</v-stepper-step>
<v-stepper-content step="1">
<zeitintervall-step-content />
<zeitintervall-step-content v-model="auswertungOptions" />
</v-stepper-content>

<v-stepper-step
:complete="activeStep > 2"
step="2"
editable
:rules="[isOneYearSelected]"
>
Jahre
<small> {{ selectedYearsAsSummary }}</small>
</v-stepper-step>
<v-stepper-content step="2">
<v-card
color="grey lighten-1"
class="mb-12"
height="200px"
></v-card>
<jahre-step-content v-model="auswertungOptions" />
</v-stepper-content>

<v-stepper-step
step="3"
editable
:rules="[isTagesTypSelected]"
>
Wochentag
<small> {{ selectedTagesTypAsSummary }}</small>
</v-stepper-step>

<v-stepper-content step="3">
<v-card
color="grey lighten-1"
class="mb-12"
height="200px"
></v-card>
<tages-typ-step-content v-model="auswertungOptions" />
</v-stepper-content>
</v-stepper>
</v-sheet>
Expand All @@ -55,17 +53,74 @@
<script setup lang="ts">
import { computed } from "vue";
import ZeitintervallStepContent from "@/components/messstelle/gesamtauswertung/stepper/ZeitintervallStepContent.vue";
import MessstelleAuswertungOptionsDTO from "@/types/messstelle/MessstelleAuswertungOptionsDTO";
import JahreStepContent from "@/components/messstelle/gesamtauswertung/stepper/JahreStepContent.vue";
import TagesTypStepContent from "@/components/messstelle/gesamtauswertung/stepper/TagesTypStepContent.vue";
import { tagesTypText } from "@/types/enum/TagesTyp";
interface Props {
value: number;
value: MessstelleAuswertungOptionsDTO;
activeStep: number;
height: string;
}
const props = defineProps<Props>();
const emit = defineEmits<(e: "input", v: number) => void>();
const activeStep = computed({
const emits = defineEmits<{
(e: "input", v: MessstelleAuswertungOptionsDTO): void;
(e: "update:activeStep", v: number): void;
}>();
const auswertungOptions = computed({
get: () => props.value,
set: (payload: number) => emit("input", payload),
set: (v) => emits("input", v),
});
const activeStep = computed({
get: () => props.activeStep,
set: (v) => emits("update:activeStep", v),
});
const selectedYearsAsSummary = computed(() => {
let summary = auswertungOptions.value.jahre.join(", ");
if (!isOneYearSelected()) {
summary = "Es muss mindestens ein Jahr ausgewählt sein.";
}
return summary;
});
const selectedJahresintervallAsSummary = computed(() => {
let summary = auswertungOptions.value.zeitintervalle.join(", ");
if (!isJahresintervallSelected()) {
summary = "Es muss mindestens ein Zeitintervall ausgewählt sein.";
}
return summary;
});
const selectedTagesTypAsSummary = computed(() => {
let summary = tagesTypText.get(auswertungOptions.value.tagesTyp) ?? "";
if (!isTagesTypSelected()) {
summary = "Es muss ein Wochentag ausgewählt sein.";
}
return summary;
});
function isOneYearSelected(): boolean {
return !(
auswertungOptions.value.jahre.length === 0 && activeStep.value > 1
);
}
function isTagesTypSelected(): boolean {
return !(
auswertungOptions.value.tagesTyp.length === 0 && activeStep.value > 2
);
}
function isJahresintervallSelected(): boolean {
return !(
auswertungOptions.value.zeitintervalle.length === 0 &&
activeStep.value > 0
);
}
</script>
Original file line number Diff line number Diff line change
@@ -1,32 +1,47 @@
<template>
<v-card
color="grey lighten-1"
class="mb-12"
height="200px"
>
<v-autocomplete
v-model="values"
:items="jahre"
outlined
dense
chips
small-chips
label="Jahre"
multiple
></v-autocomplete>
</v-card>
<v-autocomplete
v-model="auswertungOptions.jahre"
:items="jahre"
class="mt-4"
outlined
dense
chips
small-chips
label="Jahre"
multiple
clearable
deletable-chips
/>
</template>

<script setup lang="ts">
import { computed, ComputedRef } from "vue";
import KeyVal from "@/types/KeyVal";
import MessstelleAuswertungOptionsDTO from "@/types/messstelle/MessstelleAuswertungOptionsDTO";
import { computed } from "vue";
interface Props {
value: MessstelleAuswertungOptionsDTO;
}
const jahre = computed(() => {
// TODO Einschränkung der Jahre je nach Zeitintervall
const years = [];
for (let index = 2006; index <= new Date().getFullYear(); index++) {
years.push(index);
const props = defineProps<Props>();
const emits = defineEmits<{
(e: "input", v: MessstelleAuswertungOptionsDTO): void;
}>();
const auswertungOptions = computed({
get: () => props.value,
set: (v) => emits("input", v),
});
const jahre: ComputedRef<Array<KeyVal>> = computed(() => {
const result: Array<KeyVal> = [];
for (let index = 2006; index < new Date().getFullYear(); index++) {
result.push({
text: `${index}`,
value: `${index}`,
});
}
return years;
return result;
});
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<template>
<v-card color="grey lighten-1">
<v-radio-group
v-model="auswertungOptions.tagesTyp"
class="full-width"
>
<v-radio
:value="TagesTyp.WERKTAG_DI_MI_DO"
:label="getTagesTypText(TagesTyp.WERKTAG_DI_MI_DO)"
/>
<v-radio
:value="TagesTyp.WERKTAG_MO_FR"
:label="getTagesTypText(TagesTyp.WERKTAG_MO_FR)"
/>
<v-radio
:value="TagesTyp.SAMSTAG"
:label="getTagesTypText(TagesTyp.SAMSTAG)"
/>
<v-radio
:value="TagesTyp.SONNTAG_FEIERTAG"
:label="getTagesTypText(TagesTyp.SONNTAG_FEIERTAG)"
/>
<v-radio
:value="TagesTyp.WERKTAG_FERIEN"
:label="getTagesTypText(TagesTyp.WERKTAG_FERIEN)"
/>
<v-radio
:value="TagesTyp.MO_SO"
:label="getTagesTypText(TagesTyp.MO_SO)"
/>
</v-radio-group>
</v-card>
</template>

<script setup lang="ts">
import TagesTyp, { tagesTypText } from "@/types/enum/TagesTyp";
import MessstelleAuswertungOptionsDTO from "@/types/messstelle/MessstelleAuswertungOptionsDTO";
import { computed } from "vue";
interface Props {
value: MessstelleAuswertungOptionsDTO;
}
const props = defineProps<Props>();
const emits = defineEmits<{
(e: "input", v: MessstelleAuswertungOptionsDTO): void;
}>();
const auswertungOptions = computed({
get: () => props.value,
set: (v) => emits("input", v),
});
function getTagesTypText(key: string): string | undefined {
return tagesTypText.get(key);
}
</script>

This file was deleted.

Loading

0 comments on commit f3cfcd9

Please sign in to comment.