116 lines
3.7 KiB
Vue
116 lines
3.7 KiB
Vue
<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>
|