app/src/components/flights/FlightBasicInfo.vue

<script setup>
import {FORMAT_DATE, FORMAT_TIME, formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
import WeatherInfo from "components/weather/WeatherInfo.vue";
import CopyLinkButton from "components/inputs/CopyLinkButton.vue";

const props = defineProps({
  flight: {
    type: Object,
    required: true
  },
  copilotDetailRoute: {
    type: Object,
    required: false,
    default: null
  },
  aircraftDetailRoute: {
    type: Object,
    required: false,
    default: null
  },
  poiDetailRoute: {
    type: Object,
    required: false,
    default: null
  },
  eventDetailRoute: {
    type: Object,
    required: false,
    default: null
  },
  loggedUser: {
    type: Object,
    required: false,
    default: null
  }
})
</script>

<template>
  <q-list bordered separator>
    <q-item>
      <q-item-section avatar>
        <q-icon name="flight"/>
      </q-item-section>
      <q-item-section>
        <router-link
          :to="{...aircraftDetailRoute, params: {id: flight.aircraft.id, callSign: flight.aircraft.callSign}}"
          v-if="flight.aircraft.isPublic"
        >
          {{ flight.aircraft.callSign }}
        </router-link>
        <template v-else>
          {{ flight.aircraft.callSign }}
        </template>
      </q-item-section>
    </q-item>

    <q-item>
      <q-item-section avatar>
        <q-icon name="event"/>
      </q-item-section>
      <q-item-section>
        {{ formatDatetime(flight.takeoffDatetime, FORMAT_DATE) }}
      </q-item-section>
    </q-item>

    <q-item>
      <q-list>
        <q-item>
          <q-item-section avatar>
            <q-icon name="flight_takeoff"/>
          </q-item-section>
          <q-item-section>
            <div>
              <template v-if="flight.takeoffAirport">
                <strong>{{ flight.takeoffAirport.icaoCode }}</strong> ({{ flight.takeoffAirport.name }}),
              </template>
              čas vzletu: {{ formatDatetime(flight.takeoffDatetime, FORMAT_TIME) }}

              <WeatherInfo class="q-mx-sm" v-if="flight.takeoffWeatherInfo" :weather="flight.takeoffWeatherInfo"/>
            </div>
          </q-item-section>
        </q-item>

        <q-item v-for="poi in flight.turnPoints" :key="poi.id">
          <q-item-section avatar>
            <q-icon name="place" v-if="poi.pointOfInterest"/>
            <q-icon name="local_airport" v-if="poi.airport"/>
          </q-item-section>
          <q-item-section>
            <template v-if="poi.pointOfInterest">
              <router-link
                :to="{name: poiDetailRoute.name, params: {...poiDetailRoute.params, slug: poi.pointOfInterest.urlSlug, id: poi.pointOfInterest.id}}"
                v-if="poi.pointOfInterest.isPublic"
              >
                {{ poi.pointOfInterest.name }}
              </router-link>
              <template v-else>{{ poi.pointOfInterest.name }}</template>
            </template>
            <span v-if="poi.airport">
              <strong>{{ poi.airport.icaoCode }}</strong> ({{ poi.airport.name }}),
              <template v-if="poi.landingDuration > 0">
                délka mezipřistání {{ minutesToHumanReadable(poi.landingDuration) }}
              </template>
              <template v-else>touch and go</template>

            </span>
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section avatar>
            <q-icon name="flight_land"/>
          </q-item-section>
          <q-item-section>
            <div>
              <template v-if="flight.landingAirport">
                <strong>{{ flight.landingAirport.icaoCode }}</strong> ({{ flight.landingAirport.name }}),
              </template>
              čas přistání: {{ formatDatetime(flight.landingDatetime, FORMAT_TIME) }}
              <WeatherInfo class="q-mx-sm" v-if="flight.landingWeatherInfo" :weather="flight.landingWeatherInfo"/>
            </div>
          </q-item-section>
        </q-item>
      </q-list>
    </q-item>

    <q-item>
      <q-item-section avatar>
        <q-icon name="schedule"/>
      </q-item-section>
      <q-item-section>
        {{ minutesToHumanReadable(flight.durationMinCalculated) }}
      </q-item-section>
    </q-item>

    <q-item v-if="flight.event && (loggedUser || flight.event.isPublic)">
      <q-item-section avatar>
        <q-icon name="event"/>
      </q-item-section>
      <q-item-section>
        <router-link :to="eventDetailRoute">
          {{ flight.event.name }}
        </router-link>
      </q-item-section>
    </q-item>

    <q-item v-if="flight.copilots?.length > 0">
      <q-list>
        <q-item v-for="copilot in flight.copilots" :key="copilot.id">
          <q-item-section avatar>
            <q-icon name="people"/>
          </q-item-section>
          <q-item-section>
            <template v-if="copilot.isPublic">
              <div>
                <router-link
                  :to="{name: copilotDetailRoute.name, params: {...copilotDetailRoute.params, copilotSlug: copilot.urlSlug, id: copilot.id}}"
                >
                  {{ copilot.name }}
                </router-link>
              </div>
            </template>
            <template v-else> {{ copilot.name }}</template>
          </q-item-section>
          <q-item-section>
            <CopyLinkButton
              v-if="loggedUser && copilot.token && copilot.isPublic"
              :route='{
                  name: "publicCopilotUploadPhoto",
                  params: {flightSlug: flight.urlSlug, username: loggedUser.publicUsername},
                  query: {token: copilot.token}
                }'
              icon="cloud_upload"
              title="Získat odkaz na nahrání fotek od kopilota"
              label=""
              round
              class="q-mx-3"
            />
          </q-item-section>
        </q-item>
      </q-list>
    </q-item>

  </q-list>
</template>