91 lines
3 KiB
Vue
91 lines
3 KiB
Vue
|
<template>
|
||
|
|
<form class="flex flex-col gap-2" @submit.prevent="setup">
|
||
|
|
<p class="text-primary cursor-pointer" @click="$emit('stepBack')">zurück</p>
|
||
|
|
<div class="flex flex-col gap-2">
|
||
|
|
<div>
|
||
|
|
<label for="description">Beschreibung des Schadens</label>
|
||
|
|
<textarea id="description" required :value="data.description"></textarea>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="location">Fundort (optional)</label>
|
||
|
|
<textarea id="location" :value="data.location"></textarea>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="note">Anmerkung für Bearbeiter (optional)</label>
|
||
|
|
<textarea id="note" :value="data.note"></textarea>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="reportedBy">Gemeldet von (optional)</label>
|
||
|
|
<input id="reportedBy" type="text" placeholder="dein Name" :value="data.reportedBy" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="image">Bild (optional)</label>
|
||
|
|
<input id="image" type="file" accept="image/*" @change="(e: any) => setImage(e.target.files[0])" />
|
||
|
|
<img ref="vis" class="mt-2 max-h-36 mx-auto" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button type="submit" primary>weiter</button>
|
||
|
|
</form>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { defineComponent, type PropType } from "vue";
|
||
|
|
import ScanInput from "@/components/scanner/ScanInput.vue";
|
||
|
|
import Spinner from "@/components/Spinner.vue";
|
||
|
|
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||
|
|
import FailureXMark from "@/components/FailureXMark.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({
|
||
|
|
props: {
|
||
|
|
data: {
|
||
|
|
type: Object as PropType<{
|
||
|
|
gear: undefined | MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel;
|
||
|
|
description: string;
|
||
|
|
location: string;
|
||
|
|
note: string;
|
||
|
|
reportedBy: string;
|
||
|
|
image: undefined | File;
|
||
|
|
}>,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
emits: {
|
||
|
|
nextStep: (s: string) => true,
|
||
|
|
stepBack: () => true,
|
||
|
|
data: (d: { description: string; location: string; note: string; reportedBy: string; image?: File }) => true,
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
if (this.data.image) {
|
||
|
|
this.setImage(this.data.image);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
setup(e: any) {
|
||
|
|
let formData = e.target.elements;
|
||
|
|
this.$emit("data", {
|
||
|
|
description: formData.description.value,
|
||
|
|
location: formData.location.value,
|
||
|
|
note: formData.note.value,
|
||
|
|
reportedBy: formData.reportedBy.value,
|
||
|
|
image: formData.image.files[0],
|
||
|
|
});
|
||
|
|
this.$emit("nextStep", "check");
|
||
|
|
},
|
||
|
|
setImage(img: File) {
|
||
|
|
let image = this.$refs.vis as HTMLImageElement;
|
||
|
|
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = function (e) {
|
||
|
|
image.src = e.target?.result as string;
|
||
|
|
};
|
||
|
|
reader.readAsDataURL(img);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|