detail form vehicle data

src/components/admin/ForceSelect.vue

@@ -2,7 +2,7 @@
   <div class="w-full">
     <Combobox v-model="selected" :disabled="!enabled">
       <ComboboxLabel>{{ title }}</ComboboxLabel>
-      <div class="relative mt-1">
+      <div class="relative">
         <div
           class="rounded-md shadow-sm relative block w-full 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"
         >

src/components/admin/VehicleSelect.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="!enabled">
+      <ComboboxLabel v-if="!usePlaceholder">{{ title }}</ComboboxLabel>
+      <div class="relative">
+        <div
+          class="rounded-md shadow-sm relative block w-full 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"
+        >
+          <ComboboxInput
+            class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
+            :displayValue="(vehicle) => selectedVehicle?.name ?? ''"
+            @input="query = $event.target.value"
+            :placeholder="usePlaceholder ? title : ''"
+          />
+          <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+            <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+          </ComboboxButton>
+        </div>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          @after-leave="query = ''"
+        >
+          <ComboboxOptions
+            class="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
+          >
+            <div
+              v-if="availableVehicle.length === 0"
+              class="relative cursor-default select-none px-4 py-2 text-gray-700"
+            >
+              Keine Auswahl verfügbar
+            </div>
+
+            <div
+              v-if="filtered.length === 0 && query !== ''"
+              class="relative cursor-default select-none px-4 py-2 text-gray-700"
+            >
+              Keine Treffer
+            </div>
+
+            <ComboboxOption
+              v-for="person in filtered"
+              as="template"
+              :key="person.id"
+              :value="person.id"
+              v-slot="{ selected, active }"
+            >
+              <li
+                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                :class="{
+                  'bg-primary text-white': active,
+                  'text-gray-900': !active,
+                }"
+              >
+                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                  {{ person.name }}
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{ 'text-white': active, 'text-primary': !active }"
+                >
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+  ComboboxLabel,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import type { VehicleViewModel } from "@/viewmodels/admin/configuration/vehicle.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    title: String,
+    usePlaceholder: {
+      type: Boolean,
+      default: false,
+    },
+    enabled: {
+      type: Boolean,
+      default: true,
+    },
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    availableVehicle: {
+      type: Array as PropType<Array<VehicleViewModel>>,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      query: "" as string,
+    };
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: Array<string>) {
+        this.$emit("update:model-value", val);
+      },
+    },
+    selectedVehicle() {
+      return this.availableVehicle.find((av) => av.id == this.selected);
+    },
+    filtered() {
+      return this.query == ""
+        ? this.availableVehicle
+        : this.availableVehicle.filter((v) => {
+            const arr = this.query.toLocaleLowerCase().split(" ");
+            return arr.some((q) => v.name.toLocaleLowerCase().includes(q) || v.code?.toLocaleLowerCase().includes(q));
+          });
+    },
+  },
+});
+</script>

src/components/admin/configuration/vehicle/VehicleListItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col h-fit w-full border border-primary rounded-md">
     <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
-      <p>{{ vehicle.name }} {{ vehicle.type }} {{ vehicle.code }}</p>
+      <p>{{ vehicle.name }} {{ vehicle.type ? `(${vehicle.type})` : "" }} {{ vehicle.code }}</p>
       <div class="flex flex-row">
         <div
           v-if="can('update', 'configuration', 'vehicle') && !vehicle?.decommissioned"

src/components/admin/operation/mission/DetailFormInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="growing ? 'grow' : 'w-full'">
     <div class="flex flex-row gap-2 items-center">
-      <label :for="title">{{ title }}</label>
+      <label :for="ident || title">{{ title }}</label>
       <lottie-player
         v-if="currentEditors.length != 0"
         src="/typing_animation.json"
@@ -11,7 +11,15 @@
         v-tippy="currentEditors.map((c) => c.username).join(', ')"
       />
     </div>
-    <input :type="type" :id="title" v-model="value" :min="min" @focus="focused" @blur="blured" :disabled="!enabled" />
+    <input
+      :type="type"
+      :id="ident || title"
+      v-model="value"
+      :min="min"
+      @focus="focused"
+      @blur="blured"
+      :disabled="!enabled"
+    />
   </div>
 </template>
 
@@ -28,6 +36,10 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    ident: {
+      type: String,
+      default: "",
+    },
     title: {
       type: String,
       default: "",
@@ -69,7 +81,7 @@ export default defineComponent({
       },
     },
     currentEditors() {
-      return this.awareness.getEditorObjsByField(this.title);
+      return this.awareness.getEditorObjsByField(this.ident || this.title);
     },
   },
   mounted() {
@@ -78,7 +90,7 @@ export default defineComponent({
   methods: {
     focused() {
       this.awareness.publishMyState({
-        field: this.title,
+        field: this.ident || this.title,
       });
     },
     blured() {

src/components/admin/operation/mission/DetailFormVehicle.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <div class="flex flex-row gap-2 items-center">
+      <p>Eingesetzte Fahrzeuge</p>
+      <PlusCircleIcon v-if="enabled" class="w-5 h-5 cursor-pointer" @click="showAddForm = !showAddForm" />
+    </div>
+    <div v-if="showAddForm" class="flex flex-row gap-2 items-center">
+      <VehicleSelect
+        title="Fahrzeug wählen"
+        usePlaceholder
+        :availableVehicle="filteredAvailableVehicles"
+        @update:model-value="(v) => addVehicle(v)"
+      />
+      <XMarkIcon class="w-5 h-5 cursor-pointer" @click="showAddForm = false" />
+    </div>
+
+    <DetailFormVehicleItem
+      v-for="[key, vehicle] in vehicles"
+      :key="key"
+      :vehicleId="key"
+      :vehicle="vehicle"
+      :awareness="awareness"
+      :enabled="enabled"
+      @remove="removeVehicle(key)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import * as Y from "yjs";
+import { Awareness } from "@/helpers/awareness";
+import DetailFormVehicleItem from "./DetailFormVehicleItem.vue";
+import { PlusCircleIcon, XMarkIcon } from "@heroicons/vue/24/outline";
+import { mapState } from "pinia";
+import { useVehicleStore } from "@/stores/admin/configuration/vehicle";
+import VehicleSelect from "../../VehicleSelect.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    map: {
+      type: Object as PropType<Y.Map<Y.Map<number | string>>>,
+      required: true,
+    },
+    awareness: {
+      type: Object as PropType<Awareness>,
+      required: true,
+    },
+    enabled: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      showAddForm: false as boolean,
+    };
+  },
+  computed: {
+    ...mapState(useVehicleStore, ["availableVehicles"]),
+    vehicles() {
+      return Array.from(this.map.entries());
+    },
+    filteredAvailableVehicles() {
+      let added = Array.from(this.map.keys());
+      return this.availableVehicles.filter((av) => !added.includes(av.id));
+    },
+  },
+  methods: {
+    addVehicle(vehicleId: string) {
+      if (this.map.has(vehicleId)) return;
+      this.map.set(vehicleId, new Y.Map<string | number>());
+      this.showAddForm = false;
+    },
+    removeVehicle(vehicleId: string) {
+      this.map.delete(vehicleId);
+    },
+  },
+});
+</script>

src/components/admin/operation/mission/DetailFormVehicleItem.vue

@@ -0,0 +1,120 @@
+<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: Object as PropType<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: string) {
+        this.vehicle.set("mileage_start", val);
+      },
+    },
+    mileage_end: {
+      get() {
+        return this.vehicle.get("mileage_end") as string;
+      },
+      set(val: string) {
+        this.vehicle.set("mileage_end", val);
+      },
+    },
+  },
+});
+</script>

src/components/admin/operation/mission/MissionDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto pb-20">
     <DetailFormInput title="Einsatztitel" v-model="title" :awareness="awareness" :enabled="enabled" />
     <div class="flex flex-col sm:flex-row gap-2">
       <ForceSelect title="Einsatzleiter" :available-forces="availableForces" v-model="command" :enabled="enabled" />
@@ -64,9 +64,7 @@
       />
     </div>
     <DetailFormEditor title="Einsatzbeschreibung" :text="editor" :awareness="awareness" :enabled="enabled" />
-    <div class="flex flex-col">
+    <DetailFormVehicle :map="vehicle" :awareness="awareness" :enabled="enabled" />
-      <p>Eingesetzte Fahrzeuge</p>
-    </div>
     <div class="flex flex-col">
       <p>Eingesetztes Material</p>
     </div>
@@ -79,14 +77,13 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapState } from "pinia";
-import "@vueup/vue-quill/dist/vue-quill.snow.css";
-import ForceSelect from "@/components/admin/ForceSelect.vue";
 import { useForceStore } from "@/stores/admin/configuration/force";
 import * as Y from "yjs";
-import "@lottiefiles/lottie-player";
+import { Awareness } from "@/helpers/awareness";
 import DetailFormInput from "./DetailFormInput.vue";
 import DetailFormEditor from "./DetailFormEditor.vue";
-import { Awareness } from "@/helpers/awareness";
+import DetailFormVehicle from "./DetailFormVehicle.vue";
+import ForceSelect from "@/components/admin/ForceSelect.vue";
 </script>
 
 <script lang="ts">
@@ -201,6 +198,15 @@ export default defineComponent({
     editor() {
       return this.document.getText("editor");
     },
+    vehicle() {
+      return this.document.getMap<Y.Map<number | string>>("vehicle");
+    },
+    equipment() {
+      return this.document.getMap("equipment");
+    },
+    contact() {
+      return this.document.getMap("contact");
+    },
   },
 });
 </script>

src/stores/admin/configuration/vehicle.ts

@@ -11,6 +11,7 @@ export const useVehicleStore = defineStore("vehicle", {
   state: () => {
     return {
       vehicles: [] as Array<VehicleViewModel & { tab_pos: number }>,
+      availableVehicles: [] as Array<VehicleViewModel>,
       totalCount: 0 as number,
       loading: "loading" as "loading" | "fetched" | "failed",
     };
@@ -40,6 +41,15 @@ export const useVehicleStore = defineStore("vehicle", {
           this.loading = "failed";
         });
     },
+    getAvailableVehicles() {
+      this.availableVehicles = [];
+      http
+        .get(`/admin/vehicle?available=true`)
+        .then((res) => {
+          this.availableVehicles = res.data.vehicles;
+        })
+        .catch((err) => {});
+    },
     async getAllVehicles(): Promise<AxiosResponse<any, any>> {
       return await http.get(`/admin/vehicle?noLimit=true`).then((res) => {
         return { ...res, data: res.data.vehicles };

src/views/admin/configuration/vehicle/Vehicle.vue

@@ -40,7 +40,6 @@ import { useModalStore } from "@/stores/modal";
 import Pagination from "@/components/Pagination.vue";
 import type { VehicleViewModel } from "@/viewmodels/admin/configuration/vehicle.models";
 import { useAbilityStore } from "@/stores/ability";
-import { DocumentTextIcon, PencilIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">

src/views/admin/operation/mission/MissionOverview.vue

@@ -76,6 +76,8 @@ import type { ForceViewModel } from "@/viewmodels/admin/configuration/force.mode
 import { useMissionDetailStore } from "@/stores/admin/operation/missionDetail";
 import { UsersIcon } from "@heroicons/vue/24/outline";
 import { useAbilityStore } from "@/stores/ability";
+import { useVehicleStore } from "@/stores/admin/configuration/vehicle";
+import { useEquipmentStore } from "@/stores/admin/configuration/equipment";
 </script>
 
 <script lang="ts">
@@ -91,7 +93,7 @@ export default defineComponent({
       tabs: [
         { hash: "#edit", title: "Einträge" },
         { hash: "#presence", title: "Anwesenheit" },
-        { hash: "#protocol", title: "Protokoll" },
+        // { hash: "#protocol", title: "Protokoll" },
       ],
       forces: [] as Array<ForceViewModel>,
     };
@@ -122,6 +124,8 @@ export default defineComponent({
     this.connectClient();
     this.initialize(this.id);
     this.getAvailableForces();
+    this.getAvailableEquipments();
+    this.getAvailableVehicles();
     window.addEventListener("beforeunload", () => {
       localStorage.removeItem("yjsDoc_timestamp");
     });
@@ -133,6 +137,8 @@ export default defineComponent({
     ...mapActions(useConnectionStore, ["connectClient"]),
     ...mapActions(useMissionDetailStore, ["initialize", "setupSocketHandlers", "cleanup"]),
     ...mapActions(useForceStore, ["getAvailableForces"]),
+    ...mapActions(useVehicleStore, ["getAvailableVehicles"]),
+    ...mapActions(useEquipmentStore, ["getAvailableEquipments"]),
     manageHash() {
       if (!this.$route.hash || !this.tabs.map((t) => t.hash).includes(this.$route.hash)) {
         this.$router.replace({ hash: this.tabs[0].hash });