Jiny pristup k vytvareni letu, polofunkcni editace letu

src/components/flights/FlightForm.vue

@@ -1,213 +0,0 @@
-<script setup>
-import LocationInput from "components/inputs/LocationInput.vue";
-import TabsStepper from "components/TabsStepper.vue";
-import FormWrapper from "components/FormWrapper.vue";
-import {computed, reactive, ref, watch} from "vue";
-import {isRequired} from "src/composables/form/rules";
-import DatetimePicker from "components/inputs/DatetimePicker.vue";
-
-const props = defineProps({
-    aircrafts: {
-      type: Array,
-      required: true
-    },
-    airports: {
-      type: Array,
-      required: true
-    },
-    locations: {
-      type: Array,
-      required: true
-    }
-  }
-)
-
-const formData = reactive({
-  aircraftId: 43,
-  takeoffAirportId: 3,
-  landingAirportId: 3,
-  takeoffDatetime: new Date("2023-06-05T09:55:01"),
-  landingDatetime: new Date("2023-06-05T10:41:51"),
-
-  photos: [],
-
-  // turnPoints: [],
-  copilotId: null,
-  solo: true,
-  withInstructor: false,
-  durationPic: 0,
-  durationTotal: null,
-  landings: 1,
-
-  name: "",
-  description: ""
-})
-const rules = {
-  aircraft: [isRequired],
-  takeoffAirport: [],
-  landingAirport: [],
-}
-
-const recalculateDuration = () => {
-  const diff = formData.landingDatetime - formData.takeoffDatetime;
-
-  formData.durationTotal = diff / 1000 / 60;
-}
-
-watch(() => formData.takeoffDatetime, () => recalculateDuration())
-watch(() => formData.landingDatetime, () => recalculateDuration())
-
-const formSteps = ["basic", "copilot", "track", "photos", "notes"]
-const formStep = ref(formSteps[0]);
-const basicInfoFilled = computed(() => {
-  return (
-    formData.aircraftId && formData.takeoffAirportId && formData.landingAirportId && formData.takeoffDatetime
-    && formData.landingDatetime
-  )
-})
-</script>
-
-<template>
-
-  <FormWrapper v-model="formData">
-    <template #default>
-
-      <pre>{{ formData }}</pre>
-
-      <q-tabs
-        v-model="formStep"
-        outside-arrows
-        mobile-arrows
-        left-icon="chevron_left"
-        right-icon="chevron_right"
-        active-color="primary"
-        class="q-mb-lg"
-      >
-        <q-tab name="basic" icon="flight_takeoff" label="Základní informace"/>
-        <q-tab name="copilot" icon="person_add" label="Spolucestující"/>
-        <q-tab name="track" icon="route" label="Trasa"/>
-        <q-tab name="photos" icon="add_a_photo" label="Fotky"/>
-        <q-tab name="notes" icon="edit_note" label="Poznámky"/>
-      </q-tabs>
-
-      <q-tab-panels v-model="formStep" animated>
-
-        <q-tab-panel name="basic">
-          <div class="row">
-            <div class="col">
-              <q-select
-                v-model="formData.aircraftId"
-                option-label="name"
-                option-value="id"
-                emit-value
-                map-options
-                :rules="rules.aircraft"
-                :options="aircrafts"
-                label="Letadlo"
-              >
-                <template #prepend>
-                  <q-icon name="flight"></q-icon>
-                </template>
-              </q-select>
-            </div>
-          </div>
-
-          <template v-if="formData.aircraftId">
-            <div class="row">
-              <div class="col">
-                <h3>Vzlet</h3>
-
-                <DatetimePicker v-model="formData.takeoffDatetime" label="Datum a čas vzletu"/>
-                <LocationInput label="Letiště vzletu" :rules="rules.takeoffAirport" :locations="airports" v-model="formData.takeoffAirportId" prepend-icon="flight_takeoff"/>
-              </div>
-            </div>
-            <div class="row" v-if="!!formData.takeoffDatetime && !!formData.takeoffAirportId">
-              <div class="col">
-
-                <h3>Přistání</h3>
-
-                <LocationInput label="Letiště přistání" :rules="rules.landingAirport" :locations="airports" v-model="formData.landingAirportId" prepend-icon="flight_land"/>
-                <DatetimePicker v-model="formData.landingDatetime" label="Datum a čas přistání"/>
-
-                <div class="row">
-                  <div class="col">
-                    <q-input v-model="formData.landings" label="Počet přistání" type="number" min="1"/>
-                  </div>
-                  <div class="col">
-                    <q-input v-model="formData.durationTotal" readonly min=0 label="Délka letu (v minutách)" type="number"/>
-                  </div>
-                </div>
-
-              </div>
-            </div>
-
-            <TabsStepper v-model="formStep" next-step="track" v-if="formData.landingAirportId"/>
-          </template>
-        </q-tab-panel>
-
-         <q-tab-panel name="copilot">
-          <q-btn-toggle spread no-caps v-model="formData.solo" toggle-color="primary" :options="[{label: 'Solo flight', value: true}, {label: 'Flight with someone', value: false}]"/>
-
-          <div v-if="!formData.solo">
-            <q-input type="text" v-model="formData.secondPilot" label="Second pilot"/>
-            <q-checkbox v-model="formData.instructor" v-if="formData.secondPilot !== ''" label="Instructor"/>
-<!--            <q-input v-model="formData.picTime" label="PIC time"/>-->
-          </div>
-
-          <TabsStepper v-model="formStep" previous-step="basic" next-step="track"/>
-        </q-tab-panel>
-
-        <q-tab-panel name="track">
-          <!--        <template v-for="i in turnPointsCount" :key="`${i}-${turnPointsCount}`">-->
-          <!--          <LocationInput label="Turn point" :locations="locations" v-model="formData.turnPoints[i-1]">-->
-          <!--            <template #append v-if="i > 1">-->
-          <!--              <q-btn @click="removeTurnPoint(i - 1)">-</q-btn>-->
-          <!--            </template>-->
-          <!--          </LocationInput>-->
-          <!--        </template>-->
-          <!--        <q-btn @click="turnPointsCount++">-->
-          <!--          Add turn point-->
-          <!--        </q-btn>-->
-
-          <q-uploader
-            label="Upload GPX track"
-            url="http://localhost:4444/upload"
-            class="q-mx-sm"
-            style="width: 100%"
-            auto-upload
-            color="secondary"
-          />
-
-          <TabsStepper v-model="formStep" previous-step="copilot" next-step="photos"/>
-        </q-tab-panel>
-
-
-
-        <q-tab-panel name="photos">
-          <q-file
-            label="Upload photos"
-            multiple
-            style="width: 100%;"
-            color="secondary"
-          />
-
-          <TabsStepper v-model="formStep" previous-step="copilot" next-step="notes"/>
-        </q-tab-panel>
-
-        <q-tab-panel name="notes">
-          <q-input type="text" v-model="formData.name" label="Nazev"/>
-          <q-editor v-model="formData.description" height="60vh" label="Poznámky"/>
-
-          <TabsStepper v-model="formStep" previous-step="photos"/>
-        </q-tab-panel>
-      </q-tab-panels>
-    </template>
-    <template #saveButton>
-      <q-page-sticky expand position="bottom" :offset="[10, 10]" v-if="basicInfoFilled">
-        <div>
-          <q-btn type="submit" size="lg" class="full-width" color="primary" icon="save" label="Save flight"/>
-        </div>
-      </q-page-sticky>
-    </template>
-  </FormWrapper>
-</template>

src/components/flights/__FlightForm.vue

@@ -0,0 +1,88 @@
+<script setup>
+import LocationInput from "components/inputs/LocationInput.vue";
+import TabsStepper from "components/TabsStepper.vue";
+import FormWrapper from "components/FormWrapper.vue";
+import {computed, reactive, ref, watch} from "vue";
+import {isRequired} from "src/composables/form/rules";
+import DatetimePicker from "components/inputs/DatetimePicker.vue";
+import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
+
+
+
+
+const rules = {
+  aircraft: [isRequired],
+  takeoffAirport: [],
+  landingAirport: [],
+}
+
+
+
+const formSteps = ["basic", "copilot", "track", "photos", "notes"]
+const formStep = ref(formSteps[0]);
+const basicInfoFilled = computed(() => {
+  return (
+    formData.aircraftId && formData.takeoffAirportId && formData.landingAirportId && formData.takeoffDatetime
+    && formData.landingDatetime
+  )
+})
+</script>
+
+<template>
+
+<!--  <FormWrapper v-model="formData">-->
+<!--    <template #default>-->
+
+      <pre>{{ formData }}</pre>
+
+      <q-tab-panels v-model="formStep" animated>
+
+
+        <q-tab-panel name="track">
+          <!--        <template v-for="i in turnPointsCount" :key="`${i}-${turnPointsCount}`">-->
+          <!--          <LocationInput label="Turn point" :locations="locations" v-model="formData.turnPoints[i-1]">-->
+          <!--            <template #append v-if="i > 1">-->
+          <!--              <q-btn @click="removeTurnPoint(i - 1)">-</q-btn>-->
+          <!--            </template>-->
+          <!--          </LocationInput>-->
+          <!--        </template>-->
+          <!--        <q-btn @click="turnPointsCount++">-->
+          <!--          Add turn point-->
+          <!--        </q-btn>-->
+
+          <q-file
+            label="Upload GPX track"
+            class="q-mx-sm"
+            style="width: 100%"
+            color="secondary"
+          />
+
+          <TabsStepper v-model="formStep" previous-step="copilot" next-step="photos"/>
+        </q-tab-panel>
+
+
+        <q-tab-panel name="photos">
+          <q-file
+            label="Upload photos"
+            v-model="formData.photos"
+            multiple
+            style="width: 100%;"
+            color="secondary"
+          />
+
+          <TabsStepper v-model="formStep" previous-step="copilot" next-step="notes"/>
+        </q-tab-panel>
+
+      </q-tab-panels>
+
+
+<!--    </template>-->
+<!--    <template #saveButton>-->
+<!--      <q-page-sticky expand position="bottom" :offset="[10, 10]" v-if="basicInfoFilled">-->
+<!--        <div>-->
+<!--          <q-btn type="submit" size="lg" class="full-width" color="primary" icon="save" label="Save flight"/>-->
+<!--        </div>-->
+<!--      </q-page-sticky>-->
+<!--    </template>-->
+<!--  </FormWrapper>-->
+</template>

src/components/flights/form/FlightFormBasic.vue

@@ -0,0 +1,148 @@
+<script setup>
+import DatetimePicker from "components/inputs/DatetimePicker.vue";
+import {onMounted, reactive, ref, watch} from "vue";
+import FormWrapper from "components/FormWrapper.vue";
+import {setDefaultData} from "src/composables/form/formHandling";
+import {formatDate, parseDate} from "src/composables/datetimeUtils";
+
+const props = defineProps({
+    aircrafts: {
+      type: Array,
+      required: true
+    },
+    airports: {
+      type: Array,
+      required: true
+    },
+    locations: {
+      type: Array,
+      required: true
+    },
+    flight: {
+      type: Object,
+      required: false
+    }
+  }
+)
+const formData = reactive({
+  aircraftId: 43,
+  takeoffAirportId: null,
+  landingAirportId: null,
+  takeoffDatetime: null,
+  landingDatetime: null,
+  durationTotal: null,
+  landings: 1,
+  solo: true,
+
+  durationPic: 0,
+  withInstructor: false,
+  copilotId: null,
+  name: "",
+  description: ""
+})
+
+const recalculateDuration = (data) => {
+  const diff = data.landingDatetime - data.takeoffDatetime;
+  data.durationTotal = diff / 1000 / 60;
+}
+
+watch(() => [formData.takeoffDatetime, formData.landingDatetime], () => recalculateDuration(formData))
+
+const rules = {};
+const isMounted = ref(false);
+// tohle je blby ohack kvuli tomu, ze DatetimeInput se renderuje jeste pred mounted a do props nedostane hodnotu
+//  modelu. A neumi se s tim smirit...
+onMounted(() => {
+  if (props.flight) {
+    setDefaultData(formData, props.flight);
+  }
+  isMounted.value = true;
+});
+</script>
+
+<template>
+  <FormWrapper v-model="formData" v-if="isMounted">
+
+    {{ formData }}
+    <hr>
+    {{ flight }}
+    <hr>
+
+    <div class="row">
+      <div class="col">
+        <q-select
+          v-model="formData.aircraftId"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+          :rules="rules.aircraft"
+          :options="aircrafts"
+          label="Letadlo"
+        >
+          <template #prepend>
+            <q-icon name="flight"></q-icon>
+          </template>
+        </q-select>
+      </div>
+    </div>
+
+    <template v-if="formData.aircraftId">
+      <div class="row">
+        <div class="col">
+          <h3>Vzlet</h3>
+
+          <DatetimePicker v-model="formData.takeoffDatetime" label="Datum a čas vzletu"/>
+
+          <q-select
+            v-model="formData.takeoffAirportId"
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            clearable
+            :options="airports"
+            label="Letiště vzletu">
+            <template #prepend>
+              <q-icon name="flight_takeoff"/>
+            </template>
+          </q-select>
+
+          <q-checkbox v-model="formData.solo" label="Solo?"/>
+        </div>
+        <div class="col" data-if="!!formData.takeoffDatetime && !!formData.takeoffAirportId">
+
+          <h3>Přistání</h3>
+
+          <DatetimePicker v-model="formData.landingDatetime" label="Datum a čas přistání"/>
+
+          <q-select
+            v-model="formData.landingAirportId"
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            clearable
+            :options="airports"
+            label="Letiště přistání">
+            <template #append>
+              <q-icon name="flight_land"/>
+            </template>
+          </q-select>
+        </div>
+      </div>
+
+      <div class="row" v-if="formData.landingAirportId">
+        <div class="col">
+          <q-input v-model="formData.landings" label="Počet přistání" type="number" min="1"/>
+        </div>
+        <div class="col">
+          <q-input v-model="formData.durationTotal" readonly min=0 label="Délka letu (v minutách)" type="number"/>
+        </div>
+      </div>
+
+
+      <!--      <TabsStepper v-model="formStep" next-step="track" v-if="formData.landingAirportId"/>-->
+    </template>
+  </FormWrapper>
+</template>

src/components/flights/form/FlightFormCopilot.vue

@@ -0,0 +1,35 @@
+<script setup>
+import {reactive} from "vue";
+import FormWrapper from "components/FormWrapper.vue";
+
+const props = defineProps({
+  flight: {
+    type: Object,
+    required: false
+  },
+  copilots: {
+    type: Array,
+    required: true
+  }
+});
+
+const formData = reactive({
+  solo: true,
+  withInstructor: false,
+  copilotId: null,
+})
+</script>
+
+<template>
+    <FormWrapper v-model="formData">
+
+  <q-btn-toggle spread no-caps v-model="formData.solo" toggle-color="primary" :options="[{label: 'Solo', value: true}, {label: 'S někým', value: false}]"/>
+
+  <div v-if="!formData.solo">
+    <q-input type="text" v-model="formData.secondPilot" label="Druhý pilot"/>
+    <q-checkbox v-model="formData.withInstructor" v-if="formData.secondPilot !== ''" label="Instruktor"/>
+    <!--            <q-input v-model="formData.picTime" label="PIC time"/>-->
+  </div>
+
+    </FormWrapper>
+</template>

src/components/flights/form/FlightFormNotes.vue

@@ -0,0 +1,34 @@
+<script setup>
+import {onMounted, ref} from "vue";
+import FormWrapper from "components/FormWrapper.vue";
+import {setDefaultData} from "src/composables/form/formHandling";
+import RichTextEditor from "components/inputs/RichTextEditor.vue";
+
+const props = defineProps({
+  flight: {
+    type: Object,
+    required: false
+  },
+});
+
+const formData = ref({
+  name: "",
+  description: ""
+})
+
+const isMounted = ref(false);
+onMounted(() => {
+  if (props.flight)
+    setDefaultData(formData.value, props.flight);
+
+  isMounted.value = true;
+})
+
+</script>
+
+<template>
+  <FormWrapper v-model="formData" v-if="isMounted">
+    <q-input type="text" v-model="formData.name" label="Název"/>
+    <RichTextEditor v-model="formData.description" label="Popis letu, poznámky, ..." />
+  </FormWrapper>
+</template>

src/components/flights/form/FlightFormPhotos.vue

@@ -0,0 +1,26 @@
+<script setup>
+import {formatDate, parseDate} from "src/composables/datetimeUtils";
+import FormWrapper from "components/FormWrapper.vue";
+import {reactive} from "vue";
+
+const props = defineProps({
+    flight: {
+      type: Object,
+      required: false
+    }
+  }
+)
+const formData = reactive({});
+const testDate = "2023-06-09T22:00:00.000+02:00";
+
+</script>
+
+<template>
+    <FormWrapper v-model="formData">
+
+      <q-banner>
+      Test date: {{testDate}} => {{ parseDate(testDate) }}
+
+      </q-banner>
+    </FormWrapper>
+</template>

src/components/flights/form/FlightFormSteps.vue

@@ -0,0 +1,66 @@
+<script setup>
+import {onMounted, ref, watch} from "vue";
+
+const props = defineProps({
+  modelValue: String,
+  disabled: {
+    type: Array,
+    required: false,
+    default: () => []
+  },
+  routerEditMode: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  flightId: {
+    type: Number,
+    required: false,
+  }
+})
+
+const currentStep = ref("");
+onMounted(() => {
+  currentStep.value = props.modelValue;
+})
+
+const steps = [
+  {name: "basic", icon: "flight_takeoff", label: "Základní informace"},
+  {name: "copilot", icon: "person_add", label: "Spolucestující"},
+  {name: "track", icon: "route", label: "Trasa"},
+  {name: "photos", icon: "add_a_photo", label: "Fotky"},
+  {name: "notes", icon: "edit_note", label: "Poznámky"},
+];
+
+const emit = defineEmits(["update:modelValue"])
+watch(currentStep, (val) => emit("update:modelValue", val));
+</script>
+
+<template>
+  <q-tabs v-if="routerEditMode" active-color="primary" class="q-mb-lg">
+    <q-route-tab
+      v-for="step in steps"
+      :key="step.name"
+      :icon="step.icon"
+      :label="step.label"
+      replace
+      :to="{name: 'flightEdit', params: {id: flightId, step: step.name}}"
+      :disable="disabled.includes(step.name)"
+      exact
+    />
+  </q-tabs>
+
+  <q-tabs
+    v-else
+    v-model="currentStep"
+    outside-arrows
+    mobile-arrows
+    left-icon="chevron_left"
+    right-icon="chevron_right"
+    active-color="primary"
+    class="q-mb-lg"
+  >
+
+    <q-tab v-for="step in steps" :key="step.name" v-bind="step" :disable="disabled.includes(step.name)"/>
+  </q-tabs>
+</template>

src/components/inputs/DatetimePicker.vue

@@ -1,17 +1,18 @@
 <script setup>
 import {computed, onMounted, ref, watch} from "vue";
+import {parseDate} from "src/composables/datetimeUtils";
 
 const props = defineProps({
   modelValue: {
-    type: Date,
+    type: [String, Date]
   },
   dateMask: {
-    type: String, Boolean,
+    type: [String, Boolean],
     required: false,
     default: "YYYY-MM-DD"
   },
   timeMask: {
-    type: String, Boolean,
+    type: [String, Boolean],
     required: false,
     default: "HH:mm"
   }
@@ -19,35 +20,49 @@ const props = defineProps({
 
 let dateModel = ref("");
 let timeModel = ref("");
+
 onMounted(() => {
   let date = "";
   let time = "";
+  let emitDefaultValue = false;
 
   if (props.modelValue) {
+    let modelVal = props.modelValue;
+    if (typeof modelVal === 'string') {
+      modelVal = parseDate(props.modelValue);
+      emitDefaultValue = true;
+    }
 
-    date = props.dateMask.replace("YYYY", props.modelValue.getFullYear())
-      .replace("MM", ('0' + props.modelValue.getMonth()).slice(-2))
-      .replace("DD", ('0' + props.modelValue.getDate()).slice(-2));
+    date = props.dateMask
+      .replace("YYYY", modelVal.getFullYear().toString())
+      .replace("MM", ('0' + modelVal.getMonth()).slice(-2))
+      .replace("DD", ('0' + modelVal.getDate()).slice(-2));
 
-    time = props.timeMask.replace("HH", ('0' + props.modelValue.getHours()).slice(-2))
-      .replace("mm", ('0' + props.modelValue.getMinutes()).slice(-2))
-  }
+    time = props.timeMask
+      .replace("HH", ('0' + modelVal.getHours()).slice(-2))
+      .replace("mm", ('0' + modelVal.getMinutes()).slice(-2))
+      .replace("ss", ('0' + modelVal.getSeconds()).slice(-2))
 
-  if (time === '') {
-    time = "00:00";
+    // if (time === '') {
+    //   time = "00:00";
+    // }
   }
 
   dateModel.value = date;
   timeModel.value = time;
+
+  if (emitDefaultValue) {
+    emitModelUpdate();
+  }
 });
 
-const model = computed(() => dateModel.value + " " + timeModel.value);
 
+const model = computed(() => dateModel.value + " " + timeModel.value);
 const emit = defineEmits(['update:modelValue']);
 const emitModelUpdate = () => {
   const now = new Date();
-  const val = new Date(model.value);
-  val.setHours(val.getHours() + now.getTimezoneOffset());
+  const val = parseDate(model.value);
+  // val.setHours(val.getHours() + now.getTimezoneOffset());
   emit("update:modelValue", val);
 }
 watch([dateModel, timeModel], emitModelUpdate)

src/components/inputs/RichTextEditor.vue

@@ -0,0 +1,60 @@
+<script setup>
+import {onMounted, ref, watch} from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: false
+  },
+  height: {
+    type: String,
+    required: false,
+    default: "60vh"
+  },
+  label: {
+    type: String,
+    required: false,
+    default: ""
+  },
+  rules: {
+    type: Array,
+    required: false,
+    default: () => []
+  },
+})
+
+const emit = defineEmits(["update:modelValue"]);
+
+const content = ref("");
+onMounted(() => {
+  content.value = props.modelValue;
+})
+
+watch(content, () => emit("update:modelValue", content.value));
+
+const definitions = {
+  left: {icon: "format_align_left"},
+  center: {icon: "format_align_center"},
+  right: {icon: "format_align_right"},
+  justify: {icon: "format_align_justify"},
+  bold: {icon: 'format_bold'},
+  italic: {icon: 'format_italic'},
+  strike: {icon: 'strikethrough_s'},
+  underline: {icon: 'format_underline'},
+  unordered: {icon: 'format_list_bulleted'},
+  ordered: {icon: 'format_list_numbered'},
+  undo: {icon: 'undo'},
+  redo: {icon: 'redo'},
+}
+
+const toolbar = [
+  ["bold", "italic", "strike"],
+  ["left", "center", "justify", "right"],
+  ['unordered', 'ordered'],
+  ["undo", "redo"]
+]
+</script>
+
+<template>
+  <q-editor v-model="content" :definitions="definitions" :toolbar="toolbar" :height="height" :label="label" :rules="rules"/>
+</template>