flylocal-web/pages/go.vue

<template>
  <div :class="['page-container', { 'nav-is-showing': isPickerVisible }]">
    <header>
      <div class="header__col">
        <Logo />
        <div v-if="!selectedOrig.iata" class="logo-blurb">
          from one of {{ airports_orig.length }} airports
        </div>
        <div v-if="selectedOrig.iata && !selectedDest.iata && airports_dest.length > 1" class="logo-blurb">
          to one of {{ airports_dest.length }} beautiful destinations
        </div>
      </div>
      <div class="header__col">
        <div v-show="!isPickerVisible">
          <button class="btn btn--primary" @click="showPicker">
            tap the map or search 🔎
          </button>
        </div>
        <div v-show="isPickerVisible">
          <button class="btn btn--primary" @click="showPicker">
            hide search
          </button>
        </div>
      </div>
      <div class="header__col">
        <button
          class="btn btn--primary"
          @click="showSidebar"
        >
          ℹ
        </button>
      </div>
    </header>
    <!-- <pre style="position: fixed; z-index: 500; right: 0; top: 2rem; font-size: 0.6rem; color: gray;">
      {{ selectedOrig }}
      {{ selectedDest }}
    </pre> -->
    <main>
      <nav :class="['nav', { 'nav--show': isPickerVisible },{ 'nav--hide': !isPickerVisible }]">
        <AirportPicker
          :airports="airports_orig"
          :selected-airport="selectedOrig"
          @select-airport="makeOrigin"
          @deselect-airport="clearOrigin"
        />
        <AirportPicker
          v-show="selectedOrig.iata"
          :airports="airports_dest"
          :selected-airport="selectedDest"
          @select-airport="makeDestination"
          @deselect-airport="clearDestination"
        />
      </nav>
      <Map
        :airports-orig="airports_orig"
        :airports-dest="airports_dest"
        :selected-orig="selectedOrig"
        :selected-dest="selectedDest"
        @make-origin="makeOrigin"
        @make-destination="makeDestination"
        @clear-origin="clearOrigin"
        @clear-destination="clearDestination"
      />
      <aside
        :class="['sidebar-container',{ 'sidebar-container--hide': !isSidebarVisible },{ 'sidebar-container--show': isSidebarVisible }]"
      >
        <div class="sidebar">
          sidebar info
        </div>
      </aside>
      <div :class="['flyout-container',{ 'flyout-container--hide': !selectedOrig.iata || !selectedDest.iata },{ 'flyout-container--show': selectedOrig.iata && selectedDest.iata }]">
        <FlightsFlyout
          :selected-orig="selectedOrig"
          :selected-dest="selectedDest"
        />
      </div>
    </main>
  </div>
</template>

<script>
// import AirportPicker from '../components/AirportPicker.vue'
export default {
  // components: { AirportPicker },
  data () {
    return {
      color: 'red',
      mountains: [
        {
          slug: 'sluggy',
          title: 'titly'
        }
      ],
      isSidebarVisible: false,
      isPickerVisible: false,
      airports_orig: [],
      airports_dest: [],
      airportFetch_filterFormula: 'AND(Is_Origin=1,{IsCurrent-AsOrigin}=\'Yes\')',
      airportFetch_fields: [
        'Airport_IATA',
        'Icon_Url',
        'Latitude_Deg',
        'Longitude_Deg',
        'Municipality',
        'Airport_Name',
        'Type',
        'Search_Field'
      ],
      airportFetch_sort: '&sort[0][field]=Airport_IATA&sort[0][direction]=asc',
      selectedOrig: {
        iata: '',
        lat: '',
        long: '',
        icon: '',
        name: '',
        municipality: '',
        type: '',
        search: ''
      },
      selectedDest: {
        iata: '',
        lat: '',
        long: '',
        icon: '',
        name: '',
        municipality: '',
        type: '',
        search: ''
      },
      emptyAirport: {
        iata: '',
        lat: '',
        long: '',
        icon: '',
        name: '',
        municipality: '',
        type: '',
        search: ''
      }
    }
  },
  async fetch () {
    this.mountains = await fetch(
      'https://api.nuxtjs.dev/mountains'
    ).then(res => res.json())

    let response2 = {}
    let mapData2 = {}

    const response = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/Airports_IATA?filterByFormula=${this.airportFetch_filterFormula}${this.airportFetch_fields_string}${this.airportFetch_sort}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        Authorization: 'Bearer keyJ2ht64ZSN57AG1'
      }
    })

    if (await response.offset) {
      response2 = fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/Airports_IATA?filterByFormula=${this.airportFetch_filterFormula}&fields[]=Airport_IATA&fields[]=Icon_Url&fields[]=Latitude_Deg&fields[]=Longitude_Deg&sort[0][field]=Airport_IATA&sort[0][direction]=asc&offset=${response.offset}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          Authorization: 'Bearer keyJ2ht64ZSN57AG1'
        }
      })
      mapData2 = await response2.json()
    }

    const mapData = await response.json()

    const r1 = mapData.records
    const r2 = mapData2.records

    console.log(r2)

    // const mapDataTotal = [...r1, ...r2]

    const mapDataTotal = [...r1]

    this.airports_orig = mapDataTotal.map((record) => {
      return {
        iata: record.fields.Airport_IATA,
        lat: record.fields.Latitude_Deg,
        long: record.fields.Longitude_Deg,
        icon: record.fields.Icon_Url,
        name: record.fields.Airport_Name,
        municipality: record.fields.Municipality,
        type: record.fields.Type,
        search: record.fields.Search_Field
      }
    })
  },
  computed: {
    airportFetch_fields_string () {
      const vm = this
      const array = vm.airportFetch_fields.map((field) => {
        return '&fields[]=' + field
      })
      return array.join('')
    }
  },
  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)
    }
  },
  // watch: {
  //   history (to, from) {
  //     console.log(`routed from ${from} to ${to}`)
  //   }
  // },
  methods: {
    makeOrigin (airport) {
      // console.log(airport)

      this.selectedOrig = { ...airport }

      this.selectedDest = { ...this.emptyAirport }

      history.pushState(
        {},
        null,
        '/go/' + encodeURIComponent(airport.iata)
      )

      this.fetchDestinations(airport.iata)
    },
    makeDestination (airport) {
      this.selectedDest = { ...airport }

      history.pushState(
        {},
        null,
        '/go/' + encodeURIComponent(this.selectedOrig.iata) + '/' + encodeURIComponent(airport.iata)
      )
    },
    clearOrigin () {
      this.selectedOrig = { ...this.emptyAirport }
      this.selectedDest = { ...this.emptyAirport }
      history.pushState(
        {},
        null,
        '/go/'
      )
    },
    clearDestination () {
      this.selectedDest = { ...this.emptyAirport }
      history.pushState(
        {},
        null,
        '/go/' + encodeURIComponent(this.selectedOrig.iata)
      )
    },
    async fetchDestinations (iata) {
      const airportFetchDestfilterFormula = `AND(Is_Destination=1,{IsCurrent-AsDest}="Yes",(FIND("${iata}", Associated_Origin_Search)>0))`

      const response = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/Airports_IATA?filterByFormula=${airportFetchDestfilterFormula}${this.airportFetch_fields_string}${this.airportFetch_sort}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          Authorization: 'Bearer keyJ2ht64ZSN57AG1'
        }
      })

      const mapData = await response.json()

      // console.log('mapData.records length: ' + mapData.records.length)
      // console.log('this.airports_dest length (before): ' + this.airports_dest.length)

      this.airports_dest = mapData.records.map((record) => {
        return {
          iata: record.fields.Airport_IATA,
          lat: record.fields.Latitude_Deg,
          long: record.fields.Longitude_Deg,
          icon: record.fields.Icon_Url,
          name: record.fields.Airport_Name,
          municipality: record.fields.Municipality,
          type: record.fields.Type,
          search: record.fields.Search_Field
        }
      })

      // this.$refs.flMap.mapObject.fitBounds(this.markers.map((m) => { return [m.lat, m.lng] }))

      // console.log('this.airports_dest length (after)' + this.airports_dest.length)
    },
    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}${this.airportFetch_fields_string}`, {
        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 }
          this.fetchDestinations(thisAirport.iata)
          break

        case false:
          this.selectedDest = { ...thisAirport }
          break

        default:
          break
      }
    },
    showPicker () {
      this.isPickerVisible = !this.isPickerVisible
    },
    showSidebar () {
      this.isSidebarVisible = !this.isSidebarVisible
    }
  }
}
</script>

<style>
html,
body,
#__nuxt,
#__layout,
.page-container,
main {
  height: 100%;
}

header {
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 403;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 1rem;
}

.header__col:nth-child(2) {
  text-align: center;
}

.header__col:nth-child(3) {
  text-align: right;
}

.logo-blurb {
  position: relative;
  left: 4.5rem;
  color: white;
  top: -0.8rem;
}

main {
  display: flex;
  flex-direction: column;

  /* grid-template-rows: min-content 1fr; */
}

.nav {
  flex: 0 0 auto;

  /* position: fixed;
  top: 0;
  padding-top: 4rem;
  width: 100vw;
  z-index: 401; */
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

:root {
  --m-s: 0.1s;
  --h-s: 0.3s;
  --d: calc(var(--h-s) - var(--m-s));
}

.nav--hide {
  transition: margin-top var(--m-s) linear var(--h-s), max-height var(--h-s) linear 0s;
  margin-top: 0;
  max-height: 0;
}

.nav--show {
  margin-top: 3.5rem;
  max-height: 250px;
  transition: margin-top var(--m-s) linear 0s, max-height var(--h-s) linear var(--m-s);
}

.btn--nav-open {
  padding: 1rem;
  display: block;
}

.flyout-container {
  z-index: 401;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  width: 100vw;
  transition: all 0.3s;
  pointer-events: none;
}

.flyout-container.flyout-container--hide {
  transform: translateY(200px);
}

.flyout-container.flyout-container--show {
  transform: translateY(0);
}

.sidebar-container {
  z-index: 402;
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  justify-content: flex-start;
  height: 100vh;
  transition: all 0.3s;
  pointer-events: none;
}

.sidebar-container.sidebar-container--hide {
  transform: translateX(200px);
}

.sidebar-container.sidebar-container--show {
  transform: translateX(0);
}

.sidebar {
  background: white;
  padding: 3rem;
  border-radius: 3rem 0 0 3rem;
  pointer-events: all;
}
</style>