120 lines
3.3 KiB
Vue
120 lines
3.3 KiB
Vue
<template>
|
|
<div
|
|
class="flex flex-col md:flex-row gap-2 rounded-md shadow-sm relative w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
|
|
>
|
|
<div class="flex flex-row gap-2 items-center">
|
|
<TrashIcon class="w-5 h-5 min-w-5 min-h-5 cursor-pointer" @click="$emit('remove')" />
|
|
<p
|
|
class="flex w-full md:w-32 md:min-w-32 h-full justify-center items-center rounded-md shadow-sm relative px-3 py-2 border border-gray-300 text-gray-900 sm:text-sm"
|
|
>
|
|
{{ selectedVehicle?.name }}
|
|
</p>
|
|
</div>
|
|
|
|
<ForceSelect
|
|
title="Fahrer"
|
|
:ident="vehicleId + 'driver'"
|
|
:available-forces="availableForces"
|
|
v-model="driver"
|
|
:enabled="enabled"
|
|
/>
|
|
<ForceSelect
|
|
title="Gruppenführer"
|
|
:ident="vehicleId + 'leader'"
|
|
:available-forces="availableForces"
|
|
v-model="leader"
|
|
:enabled="enabled"
|
|
/>
|
|
<DetailFormInput
|
|
:ident="vehicleId + 'mileage_start'"
|
|
title="Km-Stand Start"
|
|
v-model="mileage_start"
|
|
type="number"
|
|
:awareness="awareness"
|
|
:enabled="enabled"
|
|
/>
|
|
<DetailFormInput
|
|
:ident="vehicleId + 'mileage_end'"
|
|
title="Km-Stand Ende"
|
|
v-model="mileage_end"
|
|
type="number"
|
|
:awareness="awareness"
|
|
:enabled="enabled"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineComponent, type PropType } from "vue";
|
|
import { mapState, mapActions } from "pinia";
|
|
import * as Y from "yjs";
|
|
import { Awareness } from "@/helpers/awareness";
|
|
import { useVehicleStore } from "@/stores/admin/configuration/vehicle";
|
|
import ForceSelect from "@/components/admin/ForceSelect.vue";
|
|
import { useForceStore } from "@/stores/admin/configuration/force";
|
|
import DetailFormInput from "./DetailFormInput.vue";
|
|
import { TrashIcon } from "@heroicons/vue/24/outline";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default defineComponent({
|
|
props: {
|
|
vehicleId: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
vehicle: {
|
|
type: Object as PropType<Y.Map<string | number>>,
|
|
required: true,
|
|
},
|
|
awareness: {
|
|
type: Object as PropType<Awareness>,
|
|
required: true,
|
|
},
|
|
enabled: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
emits: ["remove"],
|
|
computed: {
|
|
...mapState(useForceStore, ["availableForces"]),
|
|
...mapState(useVehicleStore, ["availableVehicles"]),
|
|
selectedVehicle() {
|
|
return this.availableVehicles.find((av) => av.id == this.vehicleId);
|
|
},
|
|
driver: {
|
|
get() {
|
|
return this.vehicle.get("driver") as string;
|
|
},
|
|
set(val: string) {
|
|
this.vehicle.set("driver", val);
|
|
},
|
|
},
|
|
leader: {
|
|
get() {
|
|
return this.vehicle.get("leader") as string;
|
|
},
|
|
set(val: string) {
|
|
this.vehicle.set("leader", val);
|
|
},
|
|
},
|
|
mileage_start: {
|
|
get() {
|
|
return this.vehicle.get("mileage_start") as string;
|
|
},
|
|
set(val: number) {
|
|
this.vehicle.set("mileage_start", val.toString());
|
|
},
|
|
},
|
|
mileage_end: {
|
|
get() {
|
|
return this.vehicle.get("mileage_end") as string;
|
|
},
|
|
set(val: number) {
|
|
this.vehicle.set("mileage_end", val.toString());
|
|
},
|
|
},
|
|
},
|
|
});
|
|
</script>
|