flylocal-web/pages/flights.vue

<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"
        :departure="formattedDate($route.params.departure)"
        :departure-time="
          selectedSchedule &&
          selectedSchedule.fields &&
          selectedSchedule.fields.Departure_TimeL
        "
        style="margin: 0 1rem;"
      />
      <div class="schedule-wrapper">
        <ul class="schedule-grid">
          <li
            v-for="schedule in schedules"
            :key="schedule.fields.Record_ID"
            :class="[
              'grid__row',
              { grid__row: selectedSchedule.id == schedule.id },
            ]"
          >
            <div class="row__check">
              <label class="radio radio--sched" :for="schedule.id">
                <input :id="schedule.id" type="radio" name="schedules" />
                <span @click="selectSchedule(schedule)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-check"
                    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" />
                    <path d="M5 12l5 5l10 -10" />
                  </svg>
                </span>
              </label>
            </div>
            <div class="row__dep">
              <label class="text--muni">
                {{ selectedOrig.municipality }}
              </label>
              <h1 class="text--time">
                {{ schedule.fields.Departure_TimeL }}
              </h1>
            </div>
            <div class="row__trip">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-arrow-right-circle"
                width="100"
                height="100"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="#007fff"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M18 15l3 -3l-3 -3" />
                <circle cx="5" cy="12" r="2" />
                <path d="M7 12h14" />
              </svg>
            </div>
            <div class="row__arr">
              <label class="text--muni">
                {{ selectedDest.municipality }}
              </label>
              <h1 class="text--time">
                {{ schedule.fields.Arrival_TimeL }}
              </h1>
            </div>
            <div class="row__info">
              <h2 class="text--carrier">
                {{ schedule.fields.Carrier_Name }}
              </h2>
              <span
                v-if="schedule.fields.Flight_Number"
                class="text--flight-num"
              >
                Flight No. {{ schedule.fields.Flight_Number }}
              </span>
              <span class="text--dow">
                {{ schedule.fields.Frequency_Convert }}
              </span>
              <span class="badge--avail">
                Available until
                <strong>{{
                  formattedDate(schedule.fields.Effective_End)
                }}</strong>
              </span>
            </div>
          </li>
        </ul>
      </div>
      <div
        :class="[
          'flyout-container',
          { 'flyout-container--hide': !selectedSchedule.id },
          { 'flyout-container--show': selectedSchedule.id },
        ]"
      >
        <div class="flyout">
          <button
            v-if="
              selectedSchedule &&
              selectedSchedule.fields &&
              selectedSchedule.fields.IsExpedia &&
              selectedSchedule.fields.IsExpedia[0] !== 'true' &&
              selectedSchedule.fields.Carrier_Name !==
                'Copper Valley Air Service'
            "
            class="btn btn--primary"
            @click="goToCarrier"
          >
            see flights
          </button>
          <div
            v-if="
              selectedSchedule &&
                selectedSchedule.fields &&
                selectedSchedule.fields.IsExpedia &&
                (selectedSchedule.fields.IsExpedia[0] === 'true' ||
                selectedSchedule.fields.Carrier_Name ===
                'Copper Valley Air Service')
            "
            class="form-row"
          >
            <label for="">How Many Adults?</label>
            <v-select
              v-model="numAdult"
              :options="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            />
          </div>
          <div
            v-if="
              selectedSchedule &&
                selectedSchedule.fields &&
                selectedSchedule.fields.IsExpedia &&
                (selectedSchedule.fields.IsExpedia[0] === 'true' ||
                selectedSchedule.fields.Carrier_Name ===
                'Copper Valley Air Service')
            "
            class="form-row"
          >
            <label for="">How Many Children?</label>
            <v-select
              v-model="numChild"
              :options="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            />
          </div>
          <div
            v-if="
              selectedSchedule &&
              selectedSchedule.fields &&
              selectedSchedule.fields.Carrier_Name ===
              'Copper Valley Air Service'
            "
            class="alert--flights"
          >
            <h3>
              You'll be flying with<br>
              <strong>Copper Valley Air Service</strong>,<br>a great local
              airline!
            </h3>
            <p>
              Copper Valley is a small, family run airline that not only
              provides bi-weekly air-taxi flights, but also mail delivery,
              sight-seeing, and adventure flights to remote areas of Alaska.
            </p>
            <p>
              To book with Copper Valley, enter your contact info below and they
              will contact you directly to finish your booking.
            </p>
          </div>
          <div
            v-if="
              selectedSchedule &&
              selectedSchedule.fields &&
              selectedSchedule.fields.Carrier_Name ===
              'Copper Valley Air Service'
            "
            class="form-row form-row--two-columns"
          >
            <input
              type="text"
              name="firstName"
              placeholder="first name"
              v-model="firstName"
            />
            <input
              type="text"
              name="lastName"
              placeholder="last name"
              v-model="lastName"
            />
          </div>
          <div
            v-if="
              selectedSchedule &&
              selectedSchedule.fields &&
              selectedSchedule.fields.Carrier_Name ===
              'Copper Valley Air Service'
            "
            class="form-row"
          >
            <input
              type="email"
              name="firstName"
              placeholder="email address"
              v-model="email"
            />
          </div>
          <div
            v-if="
              selectedSchedule &&
              selectedSchedule.fields &&
              selectedSchedule.fields.Carrier_Name ===
              'Copper Valley Air Service'
            "
            class="form-row"
          >
            <input
              type="tel"
              name="firstName"
              placeholder="phone number"
              v-model="phone"
            />
          </div>
          <button
            v-if="
              selectedSchedule &&
              selectedSchedule.fields &&
              selectedSchedule.fields.IsExpedia &&
              selectedSchedule.fields.IsExpedia[0] === 'true'
            "
            class="btn btn--primary"
            @click="book"
          >
            book now!
          </button>
          <button
            v-if="
              selectedSchedule &&
              selectedSchedule.fields &&
              selectedSchedule.fields.Carrier_Name ===
              'Copper Valley Air Service'
            "
            class="btn btn--primary"
            @click="contactCarrier"
          >
            contact carrier <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-send" width="24" height="24" viewBox="0 0 24 24" stroke-width="3" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
              <line x1="10" y1="14" x2="21" y2="3" />
              <path d="M21 3l-6.5 18a0.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a0.55 .55 0 0 1 0 -1l18 -6.5" />
            </svg>
          </button>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data () {
    return {
      schedules: [],
      startingDate: '',
      selectedSchedule: {},
      selectedDays: [],
      selectedOrig: {},
      selectedDest: {},
      numAdult: 1,
      numChild: 0,
      firstName: '',
      lastName: '',
      email: '',
      phone: ''
    }
  },
  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}",SEARCH("${new Date(this.$route.params.departure).getUTCDay()}",Frequency)>0)`
    // console.log(scheduleFetchFilterFormula)
    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]
  },
  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: {
    formattedDate (date) {
      const thisDate = new Date(date)
      const month = thisDate.toLocaleString('en-us', { month: 'short' })
      const year = ((thisDate.getUTCFullYear() !== new Date().getUTCFullYear()) ? ', ' + thisDate.getUTCFullYear() : '')
      return month + ' ' + thisDate.getUTCDate() + year
    },
    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('flights__go_back', {
        origin: this.$route.params.o,
        destination: this.$route.params.d,
        departureDate: this.$route.params.departure,
      })
      this.$router.go(-1)
    },
    // book2 (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])
    //   }
    // },
    book () {
      this.$segment.track('flights__book', {
        origin: this.selectedSchedule.fields.Origin_IATA[0],
        destination: this.selectedSchedule.fields.Destination_IATA[0],
        departureDate: this.$route.params.departure,
        departureTime: this.selectedSchedule.fields.Departure_TimeL,
        arrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
        numAdult: this.numAdult,
        numChild: this.numChild,
        carrier: this.selectedSchedule.fields.Carrier_Name
      })

      window.open(`https://www.anrdoezrs.net/links/100449149/type/am/https://www.expedia.com/go/flight/search/oneway/${this.$route.params.departure}/${this.$route.params.departure}?langid=1033&FromAirport=${this.selectedSchedule.fields.Origin_IATA}&FromTime=${this.selectedSchedule.fields.Departure_TimeL}&ToTime=${this.selectedSchedule.fields.Arrival_TimeL}&ToAirport=${this.selectedSchedule.fields.Destination_IATA}&Class=3&NumAdult=${this.numAdult}&NumChild=${this.numChild}`)
    },
    goToCarrier () {
      this.$segment.track('flights__open_carrier', {
        origin: this.selectedSchedule.fields.Origin_IATA[0],
        destination: this.selectedSchedule.fields.Destination_IATA[0],
        departureDate: this.$route.params.departure,
        departureTime: this.selectedSchedule.fields.Departure_TimeL,
        arrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
        numAdult: this.numAdult,
        numChild: this.numChild,
        carrier: this.selectedSchedule.fields.Carrier_Name
      })

      window.open(this.selectedSchedule.fields['BookingLink (from Carriers_Alaska)'][0])
    },
    async contactCarrier () {
      const newBooking =
      {
        fields: {
          ArrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
          Carrier: this.selectedSchedule.fields.Carrier_Name,
          DepartureTime: this.selectedSchedule.fields.Departure_TimeL,
          Destination: this.selectedSchedule.fields.Destination_IATA[0],
          Origin: this.selectedSchedule.fields.Origin_IATA[0],
          CreatedDate: new Date(),
          FirstName: this.firstName,
          LastName: this.lastName,
          Phone: this.phone,
          Email: this.email,
          DepartureDate: this.$route.params.departure,
          NumAdult: this.numAdult,
          NumChild: this.numChild,
        }
      }

      const res = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/CVAS_Booking/`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
        },
        body: JSON.stringify(newBooking)
      })

      const json = await res.json()
      //this.guests = { ...await json }
      console.log(await json)
    },
    selectSchedule (schedule) {
      this.selectedSchedule = { ...schedule }

      this.$segment.track('flights__select_schedule', {
        origin: this.selectedSchedule.fields.Origin_IATA[0],
        destination: this.selectedSchedule.fields.Destination_IATA[0],
        departureDate: this.$route.params.departure,
        departureTime: this.selectedSchedule.fields.Departure_TimeL,
        arrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
        carrier: this.selectedSchedule.fields.Carrier_Name
      })
    },
    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);
}

.schedule-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.schedule-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 2rem 2rem 2rem;
}

.grid__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1rem 1rem 4rem;
  flex-wrap: wrap;
  border-radius: 2rem;
}

.grid__row:nth-child(odd) {
  background: #eee;
}

label {
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  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;
}

.row__trip {
  display: flex;
  align-items: center;
}

.row__trip svg {
  margin-bottom: -0.5rem;
  width: 3.5rem;
  height: 3.5rem;
  margin-left: -1rem;
  margin-right: -1rem;
}

.shape--trip {
  height: 0.4rem;
  width: 2rem;
  background: #007fff;
  display: block;
  margin-top: 1rem;
  position: relative;
}

.shape--trip::before {
  height: 0.8rem;
  width: 0.8rem;
  background: #fff;
  border: 0.02rem solid #007fff;
  border-radius: 999px;
  content: "";
  position: absolute;
  top: -0.15rem;
  left: -0.5rem;
}

.shape--trip::after {
  height: 0.8rem;
  width: 0.8rem;
  background: #007fff;
  border: 0.02rem solid #007fff;
  border-radius: 999px;
  content: "";
  position: absolute;
  top: -0.15rem;
  right: -0.5rem;
}

h1 {
  font-size: 3rem;
  line-height: 0.85;
}

h2 {
  font-size: 2rem;
  line-height: 1;
}

label.text--muni {
  color: #007fff;
  line-height: 1;
  padding-left: 0.3rem;
}

span.text--flight-num {
  font-weight: 700;
  margin-right: 0.5rem;
}

span.text--dow {
  font-weight: 300;
  font-size: 0.8rem;
  color: #007fff;
}

span.badge--avail {
  border-radius: 999px;
  border: 1px solid gray;
  color: gray;
  padding: 0.2em 0.8em;
  line-height: 1;
  font-size: 0.8rem;
  display: block;
  width: fit-content;
}

.radio span {
  border-radius: 999px;
  border: 3px solid #007fff;
  background-color: white;
  height: 2rem;
  width: 2rem;
  display: flex;
  position: relative;
  transition: all 0.3s;
  align-items: center;
  justify-content: center;
}

.radio span svg {
  transition: all 0.3s;
  stroke: #eee;
}

.radio span:hover {
  background: #007fff;
}

.radio input:checked + span {
  background: #007fff;
}

.radio input:checked + span svg {
  stroke: white;
}

.radio input {
  display: none;
}

.row__info {
  min-width: fit-content;
}

.row__check {
  margin-left: -3rem;
}

.form-row {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

.form-row label {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 300;
}

.form-row input {
  background: #eee;
  border-radius: 999px;
  transition: 0.3s all;
  padding: 0.5em 0.8em;
  font-size: min(1rem, 18px);
  line-height: 1;
}

.form-row--two-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  column-gap: 1rem;
}

.form-row--two-columns input {
  width: 50%;
}

.flyout {
  background: #007fff;
  border-radius: 3rem 3rem 0 0;
  padding: 3rem;
  pointer-events: all;
  width: clamp(450px, 50vw, 400px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flyout .btn.btn--primary {
  background: white;
  color: black;
}

.flyout .btn.btn--primary:hover {
  background: #00ca00;
  color: #fff;
}

.flyout .v-select {
  font-size: 1.5rem;
}

.flyout .vs__dropdown-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flyout .vs__dropdown-menu li {
  border-radius: 999px;
  transition: 0.3 all;
}

.flyout .vs__dropdown-menu li:hover {
  border-radius: 999px;
  background-color: #007fff;
}

.flyout .vs__dropdown-toggle {
  background: #eee;
  border-radius: 1.2rem 1.2rem 1.2rem 1.2rem;
}

.flyout .vs--open .vs__dropdown-toggle {
  background: #eee;
  border-radius: 1.2rem 1.2rem 0 0;
}

.flyout p {
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 400;
  color: #fff;
  margin-bottom: 1rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.flyout p:last-child {
  margin-bottom: 0;
}

.flyout h3 {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 200;
  margin-bottom: 1rem;
  color: #fff;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.flyout h3 strong {
  font-weight: 600;
}
</style>