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.
323 lines
7.6 KiB
323 lines
7.6 KiB
<template>
|
|
<main>
|
|
<div>
|
|
<button class="btn btn--primary" style="margin-left: 2rem; margin-top: 2rem;" @click="goBack">
|
|
👈 back
|
|
</button>
|
|
<h1 style="text-align: center; font-size: 2.5rem;">
|
|
{{ selectedOrig.municipality }} 🛩 {{ selectedDest.municipality }}
|
|
</h1>
|
|
</div>
|
|
<ul class="schedule-grid">
|
|
<li
|
|
v-for="schedule in schedules"
|
|
:key="schedule.fields.Record_ID"
|
|
class="grid__row"
|
|
>
|
|
<pre>
|
|
{{ schedule.fields.Flight_Number }}
|
|
</pre>
|
|
<div class="grid__field">
|
|
<label> Local Airline </label>
|
|
<div class="field__content">
|
|
{{ schedule.fields.Carrier_Name }}
|
|
</div>
|
|
</div>
|
|
<div class="grid__field">
|
|
<label> Days of the Week </label>
|
|
<div class="field__content">
|
|
<div class="dow-grid">
|
|
<div
|
|
v-for="day in daysList(schedule.fields.Frequency_Convert)"
|
|
:key="day.name"
|
|
:class="['dow-grid__day', 'day--' + day.name]"
|
|
>
|
|
<span> {{ day.name }} </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid__field">
|
|
<label> Departing </label>
|
|
<div class="field__content">
|
|
{{ schedule.fields.Departure_TimeL }}
|
|
</div>
|
|
</div>
|
|
<div class="grid__field">
|
|
<label> Arriving </label>
|
|
<div class="field__content">
|
|
{{ schedule.fields.Arrival_TimeL }}
|
|
</div>
|
|
</div>
|
|
<div class="grid__field">
|
|
<label> Available Until </label>
|
|
<div class="field__content">
|
|
{{ schedule.fields.Effective_End }}
|
|
</div>
|
|
</div>
|
|
<div class="grid__field">
|
|
<div class="field__content">
|
|
{{ schedule.fields.Price_USD }}
|
|
</div>
|
|
<button class="btn btn--primary" @click="book(schedule)">
|
|
{{ schedule.fields.IsExpedia[0] === 'true' ? 'book it!' : 'see flights' }}
|
|
</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
schedules: [],
|
|
startingDate: '',
|
|
selectedSchedule: {},
|
|
selectedDays: [],
|
|
selectedOrig: {},
|
|
selectedDest: {}
|
|
}
|
|
},
|
|
async fetch () {
|
|
// console.log(this.$route.params.o)
|
|
|
|
const today = new Date().toLocaleDateString('en-CA')
|
|
|
|
// function addDays (date, days) {
|
|
// const result = new Date(date)
|
|
// result.setDate(result.getDate() + days)
|
|
// return result
|
|
// }
|
|
|
|
// const tomorrow = addDays(new Date(), 1).toLocaleDateString('en-CA')
|
|
|
|
const scheduleFetchFilterFormula = `AND(Is_Current="Yes",Origin_IATA="${this.$route.params.o}",Destination_IATA="${this.$route.params.d}",Effective_End>"${today}",SEARCH("${new Date(this.$route.params.departure).getDay()}",Frequency)>0)`
|
|
// console.log(scheduleFetchFilterFormula)
|
|
const scheduleFetchSort = '&sort[0][field]=DepartureTimeFormatted&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: {
|
|
|
|
},
|
|
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.$router.go(-1)
|
|
},
|
|
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">
|
|
.schedule-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin: 2rem;
|
|
}
|
|
|
|
.grid__row {
|
|
display: grid;
|
|
grid-template-columns: 2fr 2fr 1fr 1fr 2fr 1fr;
|
|
grid-template-rows: auto;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
.grid__row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto;
|
|
}
|
|
}
|
|
|
|
.grid__row:nth-child(2n) {
|
|
background: #eee;
|
|
}
|
|
|
|
// .grid__field {
|
|
|
|
// }
|
|
|
|
label {
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
color: gray;
|
|
display: block;
|
|
}
|
|
|
|
.field__content {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.dow-grid {
|
|
width: 200px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dow-grid__day {
|
|
font-size: 0.8rem;
|
|
border: 1px solid #ccc !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 3px !important;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.day--su {
|
|
grid-column: 1 / span 1;
|
|
}
|
|
|
|
.day--mo {
|
|
grid-column: 2 / span 1;
|
|
}
|
|
|
|
.day--tu {
|
|
grid-column: 3 / span 1;
|
|
}
|
|
|
|
.day--we {
|
|
grid-column: 4 / span 1;
|
|
}
|
|
|
|
.day--th {
|
|
grid-column: 5 / span 1;
|
|
}
|
|
|
|
.day--fr {
|
|
grid-column: 6 / span 1;
|
|
}
|
|
|
|
.day--sa {
|
|
grid-column: 7 / span 1;
|
|
}
|
|
</style>
|