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

<template>
  <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" />
      <ForceSelect
        title="Bericht Ersteller"
        :available-forces="availableForces"
        v-model="secretary"
        :enabled="enabled"
      />
    </div>
    <div class="flex flex-col sm:flex-row gap-2">
      <DetailFormInput
        title="Einsatzbeginn"
        v-model="start"
        type="datetime-local"
        growing
        :awareness="awareness"
        :enabled="enabled"
      />
      <DetailFormInput
        title="Einsatzende"
        v-model="end"
        type="datetime-local"
        :min="start"
        growing
        :awareness="awareness"
        :enabled="enabled"
      />
      <div class="w-full sm:w-fit min-w-fit">
        <p>Dauer</p>
        <p
          class="rounded-md shadow-sm relative block w-full sm:w-fit px-3 py-2 border border-gray-300 text-gray-900 sm:text-sm"
        >
          <span v-if="duration.days != '00'">{{ duration.days }}d</span> {{ duration.hours }}h {{ duration.minutes }}m
        </p>
      </div>
    </div>
    <DetailFormInput title="Stichwort" v-model="mission_short" :awareness="awareness" :enabled="enabled" />
    <DetailFormInput title="Einsatzort" v-model="location" :awareness="awareness" :enabled="enabled" />
    <DetailFormInput
      title="Weitere Anwesende (andere Wehren, Polizei, Rettungsdienst)"
      v-model="others"
      :awareness="awareness"
      :enabled="enabled"
    />
    <div class="flex flex-col sm:flex-row gap-2">
      <DetailFormInput
        title="Anzahl getretteter Personen"
        type="number"
        v-model="rescued"
        min="0"
        :awareness="awareness"
        :enabled="enabled"
      />
      <DetailFormInput
        title="Anzahl geborgener Personen"
        type="number"
        v-model="recovered"
        min="0"
        :awareness="awareness"
        :enabled="enabled"
      />
    </div>
    <DetailFormEditor title="Einsatzbeschreibung" :text="editor" :awareness="awareness" :enabled="enabled" />
    <DetailFormVehicle :map="vehicle" :awareness="awareness" :enabled="enabled" />
    <div class="flex flex-col">
      <p>Eingesetztes Material</p>
    </div>
    <div class="flex flex-col">
      <p>Kontaktdaten</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { mapState } from "pinia";
import { useForceStore } from "@/stores/admin/configuration/force";
import * as Y from "yjs";
import { Awareness } from "@/helpers/awareness";
import DetailFormInput from "./DetailFormInput.vue";
import DetailFormEditor from "./DetailFormEditor.vue";
import DetailFormVehicle from "./DetailFormVehicle.vue";
import ForceSelect from "@/components/admin/ForceSelect.vue";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    document: {
      type: Object as PropType<Y.Doc>,
      required: true,
    },
    awareness: {
      type: Object as PropType<Awareness>,
      required: true,
    },
    enabled: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ...mapState(useForceStore, ["availableForces"]),
    title: {
      get() {
        return this.document.getMap("form").get("title") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("title", val);
      },
    },
    command: {
      get() {
        return this.document.getMap("form").get("command") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("command", val);
      },
    },
    secretary: {
      get() {
        return this.document.getMap("form").get("secretary") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("secretary", val);
      },
    },
    start: {
      get() {
        return this.document.getMap("form").get("start") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("start", val);
      },
    },
    end: {
      get() {
        return this.document.getMap("form").get("end") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("end", val);
      },
    },
    duration() {
      const diffInMs = new Date(this.end).getTime() - new Date(this.start).getTime();

      const durationDate = new Date(diffInMs || 0);

      return {
        days: (durationDate.getUTCDate() - 1).toString().padStart(2, "0"),
        hours: durationDate.getUTCHours().toString().padStart(2, "0"),
        minutes: durationDate.getUTCMinutes().toString().padStart(2, "0"),
      };
    },
    mission_short: {
      get() {
        return this.document.getMap("form").get("mission_short") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("mission_short", val);
      },
    },
    location: {
      get() {
        return this.document.getMap("form").get("location") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("location", val);
      },
    },
    others: {
      get() {
        return this.document.getMap("form").get("others") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("others", val);
      },
    },
    rescued: {
      get() {
        return (this.document.getMap("form").get("rescued") || "0") as string;
      },
      set(val: number) {
        this.document.getMap("form").set("rescued", val);
      },
    },
    recovered: {
      get() {
        return (this.document.getMap("form").get("recovered") || "0") as string;
      },
      set(val: number) {
        this.document.getMap("form").set("recovered", val);
      },
    },
    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>