Zaklad pro zadavani novych letu

2023-06-06 07:35:04 +02:00
parent 9d843c62a6
commit 25bf93589e
19 changed files with 413 additions and 197 deletions
@@ -22,7 +22,7 @@ const setStep = (val) => {

 <template>
  <q-btn-group flat spread class="q-mt-xl">
-    <q-btn v-if="previousStep" label="Previous step" @click=setStep(props.previousStep) icon="chevron_left"/>
-    <q-btn v-if="nextStep" label="Next step" @click=setStep(props.nextStep) icon-right="chevron_right"/>
+    <q-btn v-if="previousStep" label="Zpět" @click=setStep(props.previousStep) icon="chevron_left"/>
+    <q-btn v-if="nextStep" label="Další krok" @click=setStep(props.nextStep) icon-right="chevron_right"/>
  </q-btn-group>
 </template>
@@ -10,19 +10,28 @@ const props = defineProps({

 <template>
  <q-list bordered separator>
-    <q-item clickable v-ripple v-for="plane of props.items" :key="plane">
-        <q-item-section avatar>
-          <q-avatar v-if="plane.photoUrl">
-            <img :src="plane.photoUrl">
-          </q-avatar>
-          <q-avatar icon="airplane" v-else></q-avatar>
-        </q-item-section>
+    <q-item
+      clickable
+      v-ripple
+      :to="{name: 'aircraftDetail', params: {id: aircraft.id }}"
+      v-for="aircraft of props.items" :key="aircraft"
+    >
+      <q-item-section avatar>
+        <q-avatar v-if="aircraft.photoUrl">
+          <img :src="aircraft.photoUrl" alt=""/>
+        </q-avatar>
+        <q-avatar color="teal" text-color="white" icon="flight" v-else/>
+      </q-item-section>
      <q-item-section>
-        <router-link :to="{name: 'aircraftDetail', params: {id: plane.id }}">
-          {{ plane.name }}
-        </router-link>
-
-        {{ plane.type }}
+        <q-item-label label>
+          {{ aircraft.name }}
+        </q-item-label>
+        <q-item-label caption>
+          {{ aircraft.model }}
+          <template v-if="aircraft.manufacturer">
+            ({{ aircraft.manufacturer }})
+          </template>
+        </q-item-label>
      </q-item-section>
    </q-item>
  </q-list>
@@ -0,0 +1,177 @@
+<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} 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: null,
+  takeoffAirportId: null,
+  landingAirportId: null,
+  takeoffDatetime: null,
+  landingDatetime: null,
+
+  // turnPoints: [],
+  copilotId: null,
+  solo: true,
+  withInstructor: false,
+  durationPic: 0,
+  // flightDurationMinutes: 0,
+  landings: 1,
+
+  name: "",
+  description: ""
+})
+const rules = {
+  aircraft: [isRequired],
+  takeoffAirport: [],
+  landingAirport: [],
+}
+
+const formSteps = ["aircraft", "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">
+    {{ formData }}
+
+    <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="copilot" icon="person_add" label="Copilot"/>
+      <q-tab name="track" icon="route" label="Route"/>
+      <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="Letadlo"
+        >
+          <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"/>-->
+
+        <DatetimePicker v-model="formData.takeoffDatetime" label="Datum a čas vzletu" />
+
+        <LocationInput label="Take-off location" :rules="rules.takeoffAirport" :locations="airports" v-model="formData.takeoffAirportId" prepend-icon="flight_takeoff"/>
+        <LocationInput label="Landing location" :rules="rules.landingAirport" :locations="airports" v-model="formData.landingAirportId" prepend-icon="flight_land"/>
+        <q-input type="datetime-local" v-model="formData.landingDatetime" label="Landing date &amp; time"/>
+        <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-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>
+
+    <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>
+  </FormWrapper>
+</template>
@@ -0,0 +1,73 @@
+<script setup>
+import {minutesToHumanReadable} from "src/composables/timeUtils";
+import {computed} from "vue";
+import {useQuasar} from "quasar";
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  }
+});
+
+
+const $q = useQuasar();
+const deleteFlight = (flightId) => {
+  $q.dialog({
+    title: 'Potvrzení',
+    message: 'Opravdu chceš smazat tento let?',
+    cancel: true,
+    persistent: true
+  }).onOk(() => {
+    // flightsStore.deleteItem(flightId);
+  })
+}
+
+
+const totalFlightTime = computed(() => {
+  return props.items.reduce((acc, flight) => acc + flight.flightDurationMinutes, 0);
+})
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-12 col-md-4 col-lg-3" v-for="flight of items" :key="flight">
+
+      <q-card class="q-my-sm q-mx-sm">
+        <q-img :src="flight.titlePhotoUrl" v-if="flight.titlePhotoUrl">
+          <div class="absolute-bottom text-center text-h6">
+            <router-link :to="{name: 'flightDetail', params:{id: flight.id}}" class="text-white">
+              {{ flight.takeoffAirport.name }} - {{ flight.landingAirport.name }}
+            </router-link>
+          </div>
+        </q-img>
+        <q-card-section>
+          <div class="text-h6" v-if="!flight.titlePhotoUrl">
+            <router-link :to="{name: 'flightDetail', params:{id: flight.id}}">
+              {{ flight.takeoffAirport.name }} - {{ flight.landingAirport.name }}
+            </router-link>
+          </div>
+          <div class="text-subtitle2">{{ minutesToHumanReadable(flight.flightDurationMinutes) }}</div>
+          <div class="text-secondary">
+            <q-icon name="today"/>
+            {{ flight.date }}
+          </div>
+          <div class="text-secondary">
+            <q-icon name="plane"/>
+            {{ flight.aircraft.name }}
+          </div>
+        </q-card-section>
+
+        <q-separator/>
+
+        <q-card-actions align="right">
+          <!--          <q-btn flat icon="visibility"></q-btn>-->
+          <!--          <q-btn flat icon="edit" :to="{name: 'flightEdit', params:{id: flight.id}}"></q-btn>-->
+          <q-btn flat icon="delete" color="red" @click="deleteFlight(flight.id)"></q-btn>
+        </q-card-actions>
+      </q-card>
+    </div>
+
+    Total: {{ minutesToHumanReadable(totalFlightTime) }}
+  </div>
+</template>
@@ -0,0 +1,3 @@
+<template>
+  Skeleton
+</template>
@@ -0,0 +1,24 @@
+<script setup>
+import {onMounted, ref, watch} from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  }
+})
+const emit = defineEmits(['update:modelValue']);
+
+let model = ref("");
+onMounted(() => {
+  model.value = props.modelValue;
+});
+
+watch(model, (newVal) => {
+  emit("update:modelValue", newVal);
+})
+</script>
+
+<template>
+          <q-input type="datetime-local" v-model="model" v-bind="$attrs"/>
+</template>