enable public report

src/components/admin/management/setting/AppSetting.vue

@@ -18,7 +18,23 @@
         <CheckIcon v-if="appSettings['app.show_link_to_calendar']" class="h-2.5 w-2.5 stroke-4 text-white" />
       </div>
       <input v-else id="show_link_to_calendar" type="checkbox" :checked="appSettings['app.show_link_to_calendar']" />
-      <label for="show_link_to_calendar">Kalender-Link anzeigen</label>
+      <label for="show_link_to_calendar"><i>Kalender</i> Link anzeigen</label>
+    </div>
+    <div class="w-full flex flex-row items-center gap-2">
+      <div
+        v-if="!enableEdit"
+        class="border-2 border-gray-500 rounded-sm"
+        :class="appSettings['app.show_link_to_damagereport'] ? 'bg-gray-500' : 'h-3.5 w-3.5'"
+      >
+        <CheckIcon v-if="appSettings['app.show_link_to_damagereport']" class="h-2.5 w-2.5 stroke-4 text-white" />
+      </div>
+      <input
+        v-else
+        id="show_link_to_damagereport"
+        type="checkbox"
+        :checked="appSettings['app.show_link_to_damagereport']"
+      />
+      <label for="show_link_to_damagereport"><i>Schaden melden</i> Link anzeigen</label>
     </div>
   </BaseSetting>
 </template>
@@ -60,6 +76,10 @@ export default defineComponent({
           key: "app.show_link_to_calendar",
           value: formData.show_link_to_calendar.checked,
         },
+        {
+          key: "app.show_link_to_damagereport",
+          value: formData.show_link_to_damagereport.checked,
+        },
       ]);
     },
   },

src/components/public/damageReport/CheckEntry.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <p class="text-primary cursor-pointer" @click="$emit('stepBack')">zurück</p>
+    <div class="flex flex-col gap-2">
+      <p class="mx-auto">Eingaben prüfen</p>
+      <div v-if="check.gear" class="rounded-md p-2 box-border border-2 font-medium border-primary text-black">
+        <p>
+          {{ check.gear.name }} <small>({{ check.gear.code }})</small>
+        </p>
+        <p>Typ: {{ check.gear.type }}</p>
+      </div>
+      <div>
+        <label for="description">Beschreibung des Schadens</label>
+        <textarea id="description" readonly :value="check.description"></textarea>
+      </div>
+      <div>
+        <label for="location">Fundort (optional)</label>
+        <textarea id="location" readonly :value="check.location"></textarea>
+      </div>
+      <div>
+        <label for="note">Anmerkung für Bearbeiter (optional)</label>
+        <textarea id="note" readonly :value="check.note"></textarea>
+      </div>
+      <div>
+        <label for="reportedBy">Gemeldet von (optional)</label>
+        <input id="reportedBy" type="text" readonly :value="check.reportedBy" />
+      </div>
+      <div>
+        <label for="image">Bild (optional)</label>
+        <img ref="vis" class="mt-2 max-h-36 mx-auto" />
+      </div>
+    </div>
+
+    <div class="flex flex-row gap-2">
+      <button primary :disabled="status == 'loading' || status == 'success'" @click="submit">
+        Schadensmeldung absenden
+      </button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status == 'success'" />
+      <FailureXMark v-else-if="status == 'failed'" />
+    </div>
+    <p v-if="message" class="text-center">{{ message }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "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: {
+    check: {
+      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() {
+    return {
+      status: undefined as undefined | "loading" | "success" | "failed",
+      message: "" as string,
+    };
+  },
+  mounted() {
+    if (this.check.image) {
+      this.setImage(this.check.image);
+    }
+  },
+  methods: {
+    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);
+    },
+    submit() {
+      this.status = "loading";
+      this.message = "";
+      const formData = new FormData();
+      if (this.check.gear) formData.append("related", JSON.stringify(this.check.gear));
+      formData.append("description", this.check.description);
+      formData.append("location", this.check.location);
+      formData.append("note", this.check.note);
+      formData.append("reportedBy", this.check.reportedBy);
+      if (this.check.image) formData.append("images", this.check.image);
+
+      this.$http
+        .post("/public/reportdamage", formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        })
+        .then((res) => {
+          this.status = "success";
+          setTimeout(() => {
+            this.$emit("nextStep", "result");
+          }, 2000);
+        })
+        .catch((err) => {
+          this.status = "failed";
+          this.message = err.message;
+        });
+    },
+  },
+});
+</script>

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>

src/components/public/damageReport/Result.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <h1 class="font-medium text-center">Schadensmeldung eingereicht</h1>
+    <br />
+    <p>
+      Deine Schadensmeldung wurde erfolgreich übermittelt.
+      <br />
+      Die Verwantwortlichen werden benachtichtigt.
+      <br />
+      Du kannst diese Seite jetzt schließen.
+    </p>
+    <br />
+
+    <p class="text-primary cursor-pointer self-end" @click="$emit('start')">neue Meldung einreichen</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  emits: {
+    start: () => true,
+  },
+});
+</script>

src/components/public/damageReport/SelectGear.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <p class="text-primary cursor-pointer" @click="$emit('stepBack')">zurück</p>
+
+    <Scanner v-if="!scanned" useInput @code="checkCode" />
+
+    <div v-if="scanned" class="contents">
+      <div class="flex flex-col gap-2 h-80 overflow-y-scroll pr-2">
+        <div v-if="status != undefined" class="flex flex-row gap-2 h-7 w-7 mx-auto">
+          <p>Suche</p>
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status == 'success'" />
+          <FailureXMark v-else-if="status == 'failed'" />
+        </div>
+        <p v-else-if="available.length == 0" class="mx-auto">nichts gefunden</p>
+        <div
+          v-for="item in available"
+          :key="item.id"
+          class="rounded-md p-2 cursor-pointer box-border border-2 font-medium"
+          :class="
+            item.type == selected?.type && item.id == selected.id
+              ? 'bg-primary text-white border-transparent hover:bg-accent'
+              : 'border-primary text-black hover:bg-primary hover:text-white'
+          "
+          @click="selected = item"
+        >
+          <p>
+            {{ item.name }} <small>({{ item.code }})</small>
+          </p>
+          <p>Typ: {{ item.type }}</p>
+        </div>
+      </div>
+      <button
+        v-if="selected != undefined"
+        primary
+        :disabled="status == 'loading'"
+        @click="
+          $emit('data', selected);
+          $emit('nextStep', 'input');
+        "
+      >
+        mit ausgewähltem fortfahren
+      </button>
+      <button
+        primary-outline
+        :disabled="status == 'loading'"
+        @click="
+          scanned = false;
+          code = '';
+        "
+      >
+        neu Scannen
+      </button>
+    </div>
+    <p v-if="message" class="text-center">{{ message }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } 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 Scanner from "@/components/scanner/Scanner.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({
+  emits: {
+    nextStep: (s: string) => true,
+    stepBack: () => true,
+    data: (gear: MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel) => true,
+  },
+  data() {
+    return {
+      code: "" as string,
+      status: undefined as undefined | "loading" | "success" | "failed",
+      message: "" as string,
+      available: [] as Array<MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel>,
+      selected: undefined as
+        | undefined
+        | MinifiedEquipmentViewModel
+        | MinifiedVehicleViewModel
+        | MinifiedWearableViewModel,
+      scanned: false as boolean,
+    };
+  },
+  methods: {
+    checkCode(c: string) {
+      this.available = [];
+      this.selected = undefined;
+      this.scanned = true;
+      this.status = "loading";
+      this.code = c;
+      this.$http
+        .get(`/public/reportdamage?code=${this.code}`)
+        .then((res) => {
+          this.available = res.data;
+          this.status = "success";
+        })
+        .catch((err) => {
+          this.status = "failed";
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.status = undefined;
+          }, 1500);
+        });
+    },
+  },
+});
+</script>

src/components/public/damageReport/Start.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <br />
+    <button primary @click="$emit('nextStep', 'select')">Barcode verwenden</button>
+    <button primary-outline @click="$emit('nextStep', 'input')">ohne Barcode fortfahren</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  emits: {
+    nextStep: (s: string) => true,
+  },
+});
+</script>

src/components/scanner/Scanner.vue

@@ -10,13 +10,16 @@
       @detect="onDetect"
       @camera-on="onCameraReady"
     />
-    <br />
     <select v-model="selectedCamera">
       <option v-for="c in selecteableCameras" :value="c">{{ c.label }}</option>
     </select>
+    <div>
+      <label for="manual">Code eingeben</label>
+      <input v-if="useInput" id="manual" type="text" v-model="detected" />
+    </div>
     <div class="flex flex-row justify-end gap-4 py-2">
       <button primary-outline @click="paused = false" :disabled="!paused">weiter scannen</button>
-      <button primary-outline @click="commit">bestätigen</button>
+      <button primary-outline @click="commit" :disabled="detected == ''">bestätigen</button>
     </div>
   </div>
 </template>
@@ -36,7 +39,13 @@ import { QrcodeStream, type DetectedBarcode } from "vue-qrcode-reader";
 
 <script lang="ts">
 export default defineComponent({
-  emits: ["code"],
+  props: {
+    useInput: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["code", "ready"],
   data() {
     return {
       selecteableCameras: defaultConstraintOptions,
@@ -51,6 +60,7 @@ export default defineComponent({
       if (!this.selectedCamera) {
         this.selectedCamera = this.selecteableCameras[0];
       }
+      this.$emit("ready");
     },
     onDetect(result: Array<DetectedBarcode>) {
       this.paused = true;

src/main.css

@@ -74,12 +74,12 @@ button:not([class*="ql"] *):not([class*="fc"]):not([id*="headlessui-combobox"]),
 
 button[primary]:not([primary="false"]),
 [button][primary]:not([primary="false"]) {
-  @apply border-2 border-transparent text-white bg-primary hover:bg-primary;
+  @apply border-2 border-transparent text-white bg-primary hover:bg-accent;
 }
 
 button[primary-outline]:not([primary-outline="false"]),
 [button][primary-outline]:not([primary-outline="false"]) {
-  @apply border-2 border-primary text-black hover:bg-primary;
+  @apply border-2 border-primary text-black hover:bg-primary hover:text-white;
 }
 
 button:disabled,

src/router/index.ts

@@ -1444,6 +1444,11 @@ const router = createRouter({
             },
           ],
         },
+        {
+          path: "damagereport",
+          name: "public-damage_report",
+          component: () => import("@/views/public/damageReport/Report.vue"),
+        },
       ],
     },
     {

src/stores/configuration.ts

@@ -10,6 +10,7 @@ export const useConfigurationStore = defineStore("configuration", {
       clubWebsite: "",
       appCustom_login_message: "",
       appShow_link_to_calendar: false as boolean,
+      appShow_link_to_damagereport: false as boolean,
 
       serverOffline: false as boolean,
     };
@@ -25,6 +26,7 @@ export const useConfigurationStore = defineStore("configuration", {
           this.clubWebsite = res.data["club.website"];
           this.appCustom_login_message = res.data["app.custom_login_message"];
           this.appShow_link_to_calendar = res.data["app.show_link_to_calendar"];
+          this.appShow_link_to_damagereport = res.data["app.show_link_to_damagereport"];
         })
         .catch(() => {
           this.serverOffline = true;

src/types/settingTypes.ts

@@ -8,6 +8,7 @@ export type SettingString =
   | "club.website"
   | "app.custom_login_message"
   | "app.show_link_to_calendar"
+  | "app.show_link_to_damagereport"
   | "session.jwt_expiration"
   | "session.refresh_expiration"
   | "session.pwa_refresh_expiration"
@@ -32,6 +33,7 @@ export type SettingValueMapping = {
   "club.website": string;
   "app.custom_login_message": string;
   "app.show_link_to_calendar": boolean;
+  "app.show_link_to_damagereport": boolean;
   "session.jwt_expiration": string;
   "session.refresh_expiration": string;
   "session.pwa_refresh_expiration": string;
@@ -66,6 +68,7 @@ export const settingsType: SettingsSchema = {
   "club.website": { type: "url", optional: true },
   "app.custom_login_message": { type: "string", optional: true },
   "app.show_link_to_calendar": { type: "boolean", default: true },
+  "app.show_link_to_damagereport": { type: "boolean", default: false },
   "session.jwt_expiration": { type: "ms", default: "15m" },
   "session.refresh_expiration": { type: "ms", default: "1d" },
   "session.pwa_refresh_expiration": { type: "ms", default: "5d" },

src/viewmodels/admin/unit/equipment/equipment.models.ts

@@ -11,6 +11,14 @@ export interface EquipmentViewModel {
   equipmentType: EquipmentTypeViewModel;
 }
 
+export interface MinifiedEquipmentViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  type: string;
+  assigned: "equipment";
+}
+
 export interface CreateEquipmentViewModel {
   code?: string;
   name: string;

src/viewmodels/admin/unit/vehicle/vehicle.models.ts

@@ -11,6 +11,14 @@ export interface VehicleViewModel {
   vehicleType: VehicleTypeViewModel;
 }
 
+export interface MinifiedVehicleViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  type: string;
+  assigned: "vehicle";
+}
+
 export interface CreateVehicleViewModel {
   code?: string;
   name: string;

src/viewmodels/admin/unit/wearable/wearable.models.ts

@@ -14,6 +14,14 @@ export interface WearableViewModel {
   wearableType: WearableTypeViewModel;
 }
 
+export interface MinifiedWearableViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  type: string;
+  assigned: "wearable";
+}
+
 export interface CreateWearableViewModel {
   code?: string;
   name: string;

src/views/Login.vue

@@ -69,6 +69,9 @@
         <RouterLink v-if="appShow_link_to_calendar" :to="{ name: 'public-calendar' }" button primary-outline>
           zum Kalender
         </RouterLink>
+        <RouterLink v-if="appShow_link_to_damagereport" :to="{ name: 'public-damage_report' }" button primary-outline>
+          Schaden melden
+        </RouterLink>
       </div>
 
       <FormBottomBar />
@@ -100,7 +103,7 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState(useConfigurationStore, ["clubName", "appShow_link_to_calendar"]),
+    ...mapState(useConfigurationStore, ["clubName", "appShow_link_to_calendar", "appShow_link_to_damagereport"]),
   },
   mounted() {
     this.username = localStorage.getItem("username") ?? "";

src/views/public/damageReport/Report.vue

@@ -0,0 +1,114 @@
+<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,
+        description: "",
+        location: "",
+        note: "",
+        reportedBy: "",
+        image: undefined,
+      } as {
+        gear: undefined | MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel;
+        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: { description: string; location: string; note: string; reportedBy: string; image?: File }) {
+      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,
+        description: "",
+        location: "",
+        note: "",
+        reportedBy: "",
+        image: undefined,
+      };
+    },
+  },
+});
+</script>