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.
233 lines
4.9 KiB
233 lines
4.9 KiB
<template>
|
|
<main>
|
|
<ul class="schedule-grid">
|
|
<li
|
|
v-for="schedule in schedules"
|
|
:key="schedule.fields.Record_ID"
|
|
class="grid__row"
|
|
>
|
|
<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>
|
|
<div v-if="startingDate">
|
|
<DatePicker
|
|
:starting-date="startingDate"
|
|
:selected-schedule="selectedSchedule"
|
|
:selected-days="selectedDays"
|
|
/>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
schedules: [],
|
|
startingDate: '',
|
|
selectedSchedule: {},
|
|
selectedDays: []
|
|
}
|
|
},
|
|
async fetch () {
|
|
// console.log(this.$route.params.o)
|
|
const scheduleFetchFilterFormula = `AND(Is_Current="Yes",AND(Origin_IATA="${this.$route.params.o}",Destination_IATA="${this.$route.params.d}"))`
|
|
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: {
|
|
|
|
},
|
|
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
|
|
})
|
|
},
|
|
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])
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.schedule-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.grid__row {
|
|
display: grid;
|
|
grid-template-columns: 2fr 2fr 1fr 1fr 2fr 1fr;
|
|
grid-template-rows: auto;
|
|
gap: 1rem;
|
|
}
|
|
|
|
// .grid__field {
|
|
|
|
// }
|
|
|
|
label {
|
|
font-size: 0.5rem;
|
|
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>
|