102 lines
3.2 KiB
Vue
102 lines
3.2 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" />
|
|
</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="title">Einsatzbeginn</label>
|
|
<input type="datetime-local" id="title" />
|
|
</div>
|
|
<div class="grow">
|
|
<label for="title">Einsatzende</label>
|
|
<input type="datetime-local" id="title" />
|
|
</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="title">Stichwort</label>
|
|
<input type="text" id="title" />
|
|
</div>
|
|
<div>
|
|
<label for="title">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="title">Anzahl getretteter Personen</label>
|
|
<input type="number" id="title" value="0" />
|
|
</div>
|
|
<div class="w-full">
|
|
<label for="title">Anzahl geborgener Personen</label>
|
|
<input type="number" id="title" 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"
|
|
:toolbar="toolbarOptions"
|
|
:enable="can('create', 'operation', 'mission')"
|
|
:style="!can('create', 'operation', 'mission') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
|
|
/>
|
|
<!--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>
|
|
<!-- <div class="flex flex-row gap-4">
|
|
<button primary class="!w-fit">Knopf</button>
|
|
</div> -->
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import { mapActions, mapState } from "pinia";
|
|
import { useAbilityStore } from "@/stores/ability";
|
|
import { QuillEditor } from "@vueup/vue-quill";
|
|
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
|
import { toolbarOptions } from "@/helpers/quillConfig";
|
|
import ForceSelect from "@/components/admin/ForceSelect.vue";
|
|
import { useForceStore } from "@/stores/admin/configuration/force";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default defineComponent({
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
...mapState(useAbilityStore, ["can"]),
|
|
...mapState(useForceStore, ["availableForces"]),
|
|
},
|
|
mounted() {},
|
|
methods: {},
|
|
});
|
|
</script>
|