INIT commit

2023-05-31 20:44:10 +02:00
commit a3e8917db5
73 changed files with 5405 additions and 0 deletions
@@ -0,0 +1,196 @@
+<script setup>
+import {computed, onMounted, reactive, ref, watch} from "vue";
+import LocationInput from "components/inputs/LocationInput.vue";
+import {useAircraftsStore} from "stores/Aircrafts";
+import {useFlightsStore} from "stores/Flights";
+import {useRouter} from "vue-router";
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import {storeToRefs} from "pinia";
+import {isRequired} from "src/composables/form/rules";
+import {useMeta} from "quasar";
+import TabsStepper from "components/TabsStepper.vue";
+
+const aircraftsStore = useAircraftsStore();
+const poiStore = usePointsOfInterestStore();
+const flightsStore = useFlightsStore();
+
+useMeta({title: "New flight"});
+onMounted(() => {
+  aircraftsStore.fetch();
+  poiStore.fetch();
+  flightsStore.fetch();
+});
+
+
+const rules = {
+  aircraft: [isRequired],
+  takeOffLocation: [isRequired],
+  LandingLocation: [isRequired],
+}
+
+const aircrafts = storeToRefs(aircraftsStore).items;
+const locations = storeToRefs(poiStore).items;
+
+const turnPointsCount = ref(1);
+const formData = reactive({
+  aircraftId: null,
+  takeOffLocation: null,
+  landingLocation: null,
+  turnPoints: [],
+  solo: true,
+  secondPilot: "",
+  instructor: false,
+  picTime: 0,
+  date: new Date(),
+  takeOffTime: "",
+  landingTime: "",
+  flightDurationMinutes: 0,
+  landings: 1,
+  note: ""
+})
+const formSteps = ["aircraft", "basic", "track", "copilot", "photos", "notes"]
+const formStep = ref(formSteps[0]);
+
+// watch(() => formData.takeOffLocation, (newVal) => {
+//   if (!formData.landingLocation) {
+//     formData.landingLocation = locations.value.find(l => l.id === newVal);
+//   }
+// })
+
+const router = useRouter();
+const saveForm = () => {
+  flightsStore.create(this.formData).then(() => {
+    router.push({name: "myFlights"});
+  });
+}
+
+const basicInfoFilled = computed(() => {
+  return formData.aircraftId && formData.takeOffLocation && formData.landingLocation && formData.date && formData.flightDurationMinutes > 0
+})
+
+const removeTurnPoint = (idx) => {
+  formData.turnPoints.splice(idx, 1);
+  turnPointsCount.value--;
+}
+</script>
+
+<template>
+
+  <q-breadcrumbs>
+    <q-breadcrumbs-el :to="{name: 'myFlights'}">My Flights</q-breadcrumbs-el>
+    <q-breadcrumbs-el>Add new</q-breadcrumbs-el>
+  </q-breadcrumbs>
+
+  <!--  {{ formData }}-->
+
+  <q-form @submit.prevent="saveForm" class="q-my-lg">
+    <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="aircraft" icon="flight" label="Aircraft"/>
+      <q-tab name="basic" icon="flight_takeoff" label="Basic"/>
+      <q-tab name="track" icon="route" label="Route"/>
+      <q-tab name="copilot" icon="person_add" label="Copilot"/>
+      <q-tab name="photos" icon="add_a_photo" label="Photos"/>
+      <q-tab name="notes" icon="edit_note" label="Notes"/>
+    </q-tabs>
+
+    <q-tab-panels v-model="formStep" animated>
+      <q-tab-panel name="aircraft">
+        <q-select
+          v-model="formData.aircraftId"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+          :rules="rules.aircraft"
+          :options="aircrafts"
+          label="Aircraft"
+        >
+          <template #prepend>
+            <q-icon name="flight"></q-icon>
+          </template>
+        </q-select>
+
+        <TabsStepper v-model="formStep" next-step="basic"/>
+      </q-tab-panel>
+      <q-tab-panel name="basic">
+        <q-input type="date" v-model="formData.date" label="Date"/>
+        <q-input type="time" v-model="formData.time" label="Take-off time"/>
+        <LocationInput label="Take-off location" :rules="rules.takeOffLocation" :locations="locations" v-model="formData.takeOffLocation" prepend-icon="flight_takeoff"/>
+        <LocationInput label="Landing location" :rules="rules.landingLocation" :locations="locations" v-model="formData.landingLocation" prepend-icon="flight_land"/>
+        <q-input v-model="formData.landings" label="Landings" type="number" min="1"/>
+        <q-input v-model="formData.flightDurationMinutes" min=0 label="Flight duration (minutes)" type="number"/>
+
+        <TabsStepper v-model="formStep" previous-step="aircraft" 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="basic" next-step="copilot"/>
+      </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="track" next-step="photos"/>
+      </q-tab-panel>
+
+      <q-tab-panel name="photos">
+        <q-uploader
+          label="Upload photos"
+          url="http://localhost:4444/upload"
+          multiple
+          auto-upload
+          style="width: 100%;"
+          color="secondary"
+        />
+
+        <TabsStepper v-model="formStep" previous-step="copilot" next-step="notes"/>
+      </q-tab-panel>
+
+      <q-tab-panel name="notes">
+        <q-editor v-model="formData.note" height="60vh" label="Notes"/>
+
+        <TabsStepper v-model="formStep" previous-step="photos"/>
+      </q-tab-panel>
+    </q-tab-panels>
+
+    <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>
+  </q-form>
+</template>