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.
240 lines
6.3 KiB
240 lines
6.3 KiB
<template>
|
|
<div class="white-bkg">
|
|
<header>
|
|
<div class="header__col">
|
|
<button class="btn btn--primary" @click="goBack">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-chevrons-left"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="3"
|
|
stroke="#ffffff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<polyline points="11 7 6 12 11 17" />
|
|
<polyline points="17 7 12 12 17 17" />
|
|
</svg> back
|
|
</button>
|
|
</div>
|
|
<div class="header__col">
|
|
<Logo />
|
|
</div>
|
|
<div class="header__col" />
|
|
</header>
|
|
<main class="main-with-header">
|
|
<ChosenFlights
|
|
:selected-orig="selectedOrig"
|
|
:selected-dest="selectedDest"
|
|
style="margin: 0 1rem;"
|
|
/>
|
|
<!-- <pre>
|
|
{{ schedules }}
|
|
</pre> -->
|
|
<DatePicker
|
|
:starting-date="startingDate"
|
|
:selected-dows="selectedDows"
|
|
/>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
schedules: [],
|
|
startingDate: new Date(),
|
|
selectedSchedule: {},
|
|
selectedDays: [],
|
|
selectedOrig: {},
|
|
selectedDest: {}
|
|
}
|
|
},
|
|
async fetch () {
|
|
// console.log(this.$route.params.o)
|
|
|
|
const today = new Date().toLocaleDateString('en-CA')
|
|
|
|
const scheduleFetchFilterFormula = `AND(Is_Current="Yes",Origin_IATA="${this.$route.params.o}",Destination_IATA="${this.$route.params.d}",Effective_End>"${today}")`
|
|
const scheduleFetchSort = '&sort[0][field]=Departure_TimeL&sort[0][direction]=asc'
|
|
|
|
const response = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/Schedule?filterByFormula=${scheduleFetchFilterFormula}${scheduleFetchSort}`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
Authorization: 'Bearer keyJ2ht64ZSN57AG1'
|
|
}
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
// console.log(data)
|
|
|
|
this.schedules = [...data.records]
|
|
},
|
|
computed: {
|
|
selectedDows () {
|
|
const mappedDows = this.schedules.map((schedule) => {
|
|
// console.log(schedule.fields)
|
|
return {
|
|
Flight_Number: schedule.fields.Flight_Number,
|
|
DowsList: this.daysList(schedule.fields.Frequency_Convert),
|
|
Effective_Start: schedule.fields.Effective_Start,
|
|
Effective_End: schedule.fields.Effective_End,
|
|
Departure_TimeL: schedule.fields.Departure_TimeL
|
|
}
|
|
})
|
|
return mappedDows
|
|
}
|
|
},
|
|
mounted () {
|
|
this.$segment.page('dates');
|
|
this.$segment.track('dates__mount-page', {
|
|
origin: this.$route.params.o,
|
|
destination: this.$route.params.d
|
|
});
|
|
const emailCookie = this.$cookies.get('email')
|
|
if(emailCookie){
|
|
this.$segment.identify(emailCookie, {
|
|
email: emailCookie
|
|
});
|
|
}
|
|
},
|
|
created () {
|
|
// console.log(this.$route.path)
|
|
|
|
if (this.$route && this.$route.params && this.$route.params.o) {
|
|
this.fetchSingleAirport(this.$route.params.o, true)
|
|
}
|
|
if (this.$route && this.$route.params && this.$route.params.d) {
|
|
this.fetchSingleAirport(this.$route.params.d, false)
|
|
}
|
|
},
|
|
methods: {
|
|
daysList (days) {
|
|
const list = days.split(', ').map((day) => {
|
|
const name = day.toLowerCase().slice(0, -1)
|
|
|
|
let num
|
|
switch (name) {
|
|
case 'su':
|
|
num = 0
|
|
break
|
|
|
|
case 'mo':
|
|
num = 1
|
|
break
|
|
|
|
case 'tu':
|
|
num = 2
|
|
break
|
|
|
|
case 'we':
|
|
num = 3
|
|
break
|
|
|
|
case 'th':
|
|
num = 4
|
|
break
|
|
|
|
case 'fr':
|
|
num = 5
|
|
break
|
|
|
|
case 'sa':
|
|
num = 6
|
|
break
|
|
|
|
default:
|
|
break
|
|
}
|
|
return {
|
|
name,
|
|
num
|
|
}
|
|
})
|
|
|
|
return list.sort(function (a, b) {
|
|
return a.num - b.num
|
|
})
|
|
},
|
|
goBack () {
|
|
this.$segment.track('dates__go_back',{
|
|
origin: this.$route.params.o,
|
|
destination: this.$route.params.d
|
|
})
|
|
|
|
//this.$router.go(-1)
|
|
|
|
this.$router.push({
|
|
path: '/go/' + this.$route.params.o + "/" + this.$route.params.d
|
|
})
|
|
},
|
|
book (schedule) {
|
|
if (schedule.fields.IsExpedia[0] === 'true') {
|
|
this.startingDate = new Date()
|
|
this.selectedSchedule = schedule.fields
|
|
this.selectedDays = this.daysList(schedule.fields.Frequency_Convert)
|
|
} else {
|
|
window.open(schedule.fields['BookingLink (from Carriers_Alaska)'][0])
|
|
}
|
|
},
|
|
clearSelectedSchedule () {
|
|
//console.log('clear')
|
|
this.startingDate = ''
|
|
this.selectedSchedule = {}
|
|
},
|
|
async fetchSingleAirport (iata, isOrig) {
|
|
const airportFetchFilterFormula =
|
|
isOrig
|
|
? `AND(Is_Origin=1,{IsCurrent-AsOrigin}="Yes",Airport_IATA="${iata}")`
|
|
: `AND(Is_Destination=1,{IsCurrent-AsDest}="Yes",Airport_IATA="${iata}")`
|
|
|
|
const response = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/Airports_IATA?filterByFormula=${airportFetchFilterFormula}`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
Authorization: 'Bearer keyJ2ht64ZSN57AG1'
|
|
}
|
|
})
|
|
|
|
const mapData = await response.json()
|
|
|
|
const thisAirport = {
|
|
iata: mapData.records[0].fields.Airport_IATA,
|
|
lat: mapData.records[0].fields.Latitude_Deg,
|
|
long: mapData.records[0].fields.Longitude_Deg,
|
|
icon: mapData.records[0].fields.Icon_Url,
|
|
name: mapData.records[0].fields.Airport_Name,
|
|
municipality: mapData.records[0].fields.Municipality,
|
|
type: mapData.records[0].fields.Type,
|
|
search: mapData.records[0].fields.Search_Field
|
|
}
|
|
|
|
switch (isOrig) {
|
|
case true:
|
|
this.selectedOrig = { ...thisAirport }
|
|
break
|
|
|
|
case false:
|
|
this.selectedDest = { ...thisAirport }
|
|
break
|
|
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main-with-header {
|
|
margin-top: clamp(20px + 1.75rem, 4rem + 1.75rem, 50px + 1.75rem);
|
|
}
|
|
</style>
|