flylocal-web/components/PickerOrigin.vue

<template>
  <div class="picker-wrap">
    <v-select :options="testlist" label="slug">
      <template #option="option">
        <span>{{ option.slug }}</span>
        <span>{{ option.title }}</span>
      </template>
    </v-select>
    <v-select :options="airports" label="iata" :filter-by="filterBy" @input="setSelectedOrigin">
      <template #no-options="{ search, searching }">
        <template v-if="searching">
          No results found for <em>{{ search }}</em>.
        </template>
        <em v-else style="opacity: 0.5;">Start typing to search for an airport.</em>
      </template>
      <template #option="option">
        <div class="picker-item">
          <div class="picker-item__section">
            <div class="picker-item__iata">
              {{ option.iata }}
            </div>
          </div>
          <div class="picker-item__section">
            <div class="picker-item__name">
              {{ option.name }}
            </div>
            <div class="picker-item__muni">
              {{ option.municipality }}
            </div>
          </div>
        </div>
      </template>
    </v-select>
  </div>
</template>

<script>
export default {
  props: {
    testlist: {
      type: [Array, Object],
      default () {
        return []
      }
    }
  },
  data () {
    return {
      mountains: [],
      airports: [],
      airportFetch_url: 'https://api.airtable.com/v0/appiQwfVZixRgRICe/Airports_IATA',
      airportFetch_filterFormula: 'AND(Is_Origin=1,{IsCurrent-AsOrigin}=\'Yes\')',
      airportFetch_fields: [
        'Airport_IATA',
        'Icon_Url',
        'Latitude_Deg',
        'Longitude_Deg',
        'Municipality',
        'Airport_Name',
        'Type',
        'Search_Field'
      ],
      airportFetch_sort: '&sort[0][field]=Airport_IATA&sort[0][direction]=asc',
      filterBy: (option, label, search) => {
        const temp = search.toLowerCase()
        return option.search.toLowerCase().includes(temp)
      },
      selectedOrigin: {},
      selectedDestination: {}
    }
  },
  async fetch () {
    let response2 = {}
    let mapData2 = {}

    const response = await fetch(`${this.airportFetch_url}?filterByFormula=${this.airportFetch_filterFormula}${this.airportFetch_fields_string}${this.airportFetch_sort}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        Authorization: 'Bearer keyJ2ht64ZSN57AG1'
      }
    })

    if (await response.offset) {
      response2 = fetch(`${this.airportFetch_url}?filterByFormula=${this.filterFormula}${this.airportFetch_fields_string}${this.airportFetch_sort}&offset=${response.offset}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          Authorization: 'Bearer keyJ2ht64ZSN57AG1'
        }
      })
      mapData2 = await response2.json()
    }

    const mapData = await response.json()

    const r1 = mapData.records
    const r2 = mapData2.records

    console.log(r2)

    // const mapDataTotal = [...r1, ...r2]

    const mapDataTotal = [...r1]

    this.airports = mapDataTotal.map((record) => {
      return {
        iata: record.fields.Airport_IATA,
        lat: record.fields.Latitude_Deg,
        long: record.fields.Longitude_Deg,
        icon: record.fields.Icon_Url,
        name: record.fields.Airport_Name,
        municipality: record.fields.Municipality,
        type: record.fields.Type,
        search: record.fields.Search_Field
      }
    })
  },
  computed: {
    airportFetch_fields_string () {
      const vm = this
      const array = vm.airportFetch_fields.map((field) => {
        return '&fields[]=' + field
      })
      return array.join('')
    }
  },
  methods: {
    setSelectedOrigin (value) {
      this.selectedOrigin = value
      this.$router.push('/go/' + value.iata)
    },
    setSelectedDestination (value) {
      this.selectedDestination = value
      this.$router.push('/go/' + this.selectedOrigin + '/' + value.iata)
    }
  }
}
</script>

<style>
html {
  color: black;
}

.picker-wrap {
  margin: 1rem;
}

.vs__search {
  font-size: 2rem !important;
}

.picker-item {
  padding: 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.picker-item__section {
  display: flex;
  flex-direction: column;
}

.picker-item__name {
  font-size: 1rem;
}

.picker-item__muni {
  color: blue;
}

.picker-item__iata {
  font-size: 3rem;
}
</style>