125 lines
4 KiB
Vue
125 lines
4 KiB
Vue
<template>
|
|
<MainTemplate title="Schaden melden" :showBack="false">
|
|
<template #main>
|
|
<RouterLink :to="{ name: 'login' }" class="w-fit! text-primary">
|
|
{{ dictionary[step] == "result" ? "zurück zu Startseite" : "abbrechen" }}
|
|
</RouterLink>
|
|
<div class="max-w-md w-full flex flex-col gap-4 mx-auto">
|
|
<CheckProgressBar :total="dictionary.length" :step="step" :successfull="successfull" />
|
|
<Start v-if="dictionary[step] == 'start'" @nextStep="selectNextStep" @stepBack="stepBack" />
|
|
<SelectGear
|
|
v-else-if="dictionary[step] == 'select'"
|
|
@nextStep="selectNextStep"
|
|
@stepBack="stepBack"
|
|
@data="(gear) => (content.gear = gear)"
|
|
/>
|
|
<InputData
|
|
v-else-if="dictionary[step] == 'input'"
|
|
:data="content"
|
|
@nextStep="selectNextStep"
|
|
@stepBack="stepBack"
|
|
@data="updateContent"
|
|
/>
|
|
<CheckEntry
|
|
v-else-if="dictionary[step] == 'check'"
|
|
:check="content"
|
|
@nextStep="selectNextStep"
|
|
@stepBack="stepBack"
|
|
/>
|
|
<Result v-else-if="dictionary[step] == 'result'" @start="reset" />
|
|
</div>
|
|
</template>
|
|
</MainTemplate>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import MainTemplate from "@/templates/Main.vue";
|
|
import CheckProgressBar from "@/components/CheckProgressBar.vue";
|
|
import Start from "@/components/public/damageReport/Start.vue";
|
|
import SelectGear from "@/components/public/damageReport/SelectGear.vue";
|
|
import InputData from "@/components/public/damageReport/InputData.vue";
|
|
import CheckEntry from "@/components/public/damageReport/CheckEntry.vue";
|
|
import Result from "@/components/public/damageReport/Result.vue";
|
|
import type { MinifiedEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
|
|
import type { MinifiedVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
|
|
import type { MinifiedWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default defineComponent({
|
|
data() {
|
|
return {
|
|
dictionary: ["start", "select", "input", "check", "result"],
|
|
step: 0 as number,
|
|
successfull: 0 as number,
|
|
usingBarcode: false,
|
|
content: {
|
|
gear: undefined,
|
|
title: "",
|
|
description: "",
|
|
location: "",
|
|
note: "",
|
|
reportedBy: "",
|
|
image: undefined,
|
|
} as {
|
|
gear: undefined | MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel;
|
|
title: string;
|
|
description: string;
|
|
location: string;
|
|
note: string;
|
|
reportedBy: string;
|
|
image: undefined | File;
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
stepIndex() {
|
|
return (dict: string) => this.dictionary.findIndex((d) => d == dict);
|
|
},
|
|
},
|
|
methods: {
|
|
selectNextStep(s: string) {
|
|
let index = this.dictionary.findIndex((d) => d == s);
|
|
if (this.step == 0 && index == 2) this.usingBarcode = true;
|
|
this.step = index;
|
|
this.successfull = index - 1;
|
|
},
|
|
updateContent(d: {
|
|
title: string;
|
|
description: string;
|
|
location: string;
|
|
note: string;
|
|
reportedBy: string;
|
|
image?: File;
|
|
}) {
|
|
this.content.title = d.title;
|
|
this.content.description = d.description;
|
|
this.content.location = d.location;
|
|
this.content.note = d.note;
|
|
this.content.reportedBy = d.reportedBy;
|
|
if (d.image) this.content.image = d.image;
|
|
},
|
|
stepBack() {
|
|
console.log("hi");
|
|
if (this.step == 2 && this.usingBarcode) this.step = 0;
|
|
else this.step--;
|
|
this.successfull = Math.max(0, this.step - 1);
|
|
},
|
|
reset() {
|
|
this.step = 0;
|
|
this.successfull = 0;
|
|
this.usingBarcode = false;
|
|
this.content = {
|
|
gear: undefined,
|
|
title: "",
|
|
description: "",
|
|
location: "",
|
|
note: "",
|
|
reportedBy: "",
|
|
image: undefined,
|
|
};
|
|
},
|
|
},
|
|
});
|
|
</script>
|