flylocal-web/pages/flights.vue

<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>