enable public report
This commit is contained in:
parent
766114bf53
commit
6aae09cd03
16 changed files with 567 additions and 7 deletions
126
src/components/public/damageReport/CheckEntry.vue
Normal file
126
src/components/public/damageReport/CheckEntry.vue
Normal file
|
|
@ -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>
|
||||
90
src/components/public/damageReport/InputData.vue
Normal file
90
src/components/public/damageReport/InputData.vue
Normal file
|
|
@ -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>
|
||||
28
src/components/public/damageReport/Result.vue
Normal file
28
src/components/public/damageReport/Result.vue
Normal file
|
|
@ -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>
|
||||
116
src/components/public/damageReport/SelectGear.vue
Normal file
116
src/components/public/damageReport/SelectGear.vue
Normal file
|
|
@ -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>
|
||||
19
src/components/public/damageReport/Start.vue
Normal file
19
src/components/public/damageReport/Start.vue
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue