111 lines
3.7 KiB
Vue
111 lines
3.7 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
|
<div>
|
|
<label for="title">Einsatztitel</label>
|
|
<input type="text" id="title" v-model="title" />
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row gap-2">
|
|
<ForceSelect title="Einsatzleiter" :available-forces="availableForces" />
|
|
<ForceSelect title="Bericht Ersteller" :available-forces="availableForces" />
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row gap-2">
|
|
<div class="grow">
|
|
<label for="start">Einsatzbeginn</label>
|
|
<input type="datetime-local" id="start" />
|
|
</div>
|
|
<div class="grow">
|
|
<label for="end">Einsatzende</label>
|
|
<input type="datetime-local" id="end" />
|
|
</div>
|
|
<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"
|
|
>
|
|
00h 00m
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="mission_short">Stichwort</label>
|
|
<input type="text" id="mission_short" />
|
|
</div>
|
|
<div>
|
|
<label for="location">Einsatzort</label>
|
|
<input type="text" id="title" />
|
|
</div>
|
|
<div>
|
|
<label for="title">Weitere Anwesende (andere Wehren, Polizei, Rettungsdienst)</label>
|
|
<input type="text" id="title" />
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row gap-2">
|
|
<div class="w-full">
|
|
<label for="rescued">Anzahl getretteter Personen</label>
|
|
<input type="number" id="rescued" value="0" />
|
|
</div>
|
|
<div class="w-full">
|
|
<label for="recovered">Anzahl geborgener Personen</label>
|
|
<input type="number" id="recovered" value="0" />
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<label for="summary">Einsatzbeschreibung</label>
|
|
<QuillEditor
|
|
id="summary"
|
|
theme="snow"
|
|
style="height: 250px; max-height: 250px; min-height: 250px"
|
|
contentType="html"
|
|
:options="{ modules: moduleOptions }"
|
|
:enable="can('create', 'operation', 'mission')"
|
|
:style="!can('create', 'operation', 'mission') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
|
|
@ready="initEditor"
|
|
/>
|
|
<!--v-model:content=""-->
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<p>Eingesetzte Fahrzeuge</p>
|
|
</div>
|
|
<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 } from "vue";
|
|
import { mapActions, mapState, mapWritableState } from "pinia";
|
|
import { useAbilityStore } from "@/stores/ability";
|
|
import { Quill, QuillEditor } from "@vueup/vue-quill";
|
|
import type QuillCursors from "quill-cursors";
|
|
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
|
import { QuillBinding } from "y-quill";
|
|
import { moduleOptions } from "@/helpers/quillConfig";
|
|
import ForceSelect from "@/components/admin/ForceSelect.vue";
|
|
import { useForceStore } from "@/stores/admin/configuration/force";
|
|
import { useMissionDetailStore } from "@/stores/admin/operation/missionDetail";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default defineComponent({
|
|
data() {
|
|
return {
|
|
binding: undefined as undefined | QuillBinding,
|
|
cursors: undefined as undefined | QuillCursors,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(useAbilityStore, ["can"]),
|
|
...mapState(useForceStore, ["availableForces"]),
|
|
...mapWritableState(useMissionDetailStore, ["editor", "title"]),
|
|
},
|
|
methods: {
|
|
initEditor(quill: Quill) {
|
|
this.binding = new QuillBinding(this.editor, quill);
|
|
this.cursors = quill.getModule("cursors") as QuillCursors;
|
|
},
|
|
},
|
|
});
|
|
</script>
|