You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
178 lines
4.4 KiB
178 lines
4.4 KiB
<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>
|