enable public report

src/components/public/damageReport/InputData.vue

@@ -0,0 +1,90 @@
+<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>