spencer
/
flylocal-web
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

v5.0.4.2 - saving user to airtable on login

master
Spencer Flagg 3 years ago
parent
4f4b5435e2
commit
ca1536c808
1 changed files with 258 additions and 195 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +258
    -195
      pages/flights.vue

+ 258
- 195
pages/flights.vue View File

@ -154,11 +154,11 @@
<div
v-if="
selectedSchedule &&
selectedSchedule.fields &&
selectedSchedule.fields.IsExpedia &&
(selectedSchedule.fields.IsExpedia[0] === 'true' ||
selectedSchedule.fields &&
selectedSchedule.fields.IsExpedia &&
(selectedSchedule.fields.IsExpedia[0] === 'true' ||
selectedSchedule.fields.Carrier_Name ===
'Copper Valley Air Service')
'Copper Valley Air Service')
"
class="form-row"
>
@ -171,11 +171,11 @@
<div
v-if="
selectedSchedule &&
selectedSchedule.fields &&
selectedSchedule.fields.IsExpedia &&
(selectedSchedule.fields.IsExpedia[0] === 'true' ||
selectedSchedule.fields &&
selectedSchedule.fields.IsExpedia &&
(selectedSchedule.fields.IsExpedia[0] === 'true' ||
selectedSchedule.fields.Carrier_Name ===
'Copper Valley Air Service')
'Copper Valley Air Service')
"
class="form-row"
>
@ -190,13 +190,13 @@
selectedSchedule &&
selectedSchedule.fields &&
selectedSchedule.fields.Carrier_Name ===
'Copper Valley Air Service'
'Copper Valley Air Service'
"
class="alert--flights"
>
<h3>
You'll be flying with<br>
<strong>Copper Valley Air Service</strong>,<br>a great local
You'll be flying with<br />
<strong>Copper Valley Air Service</strong>,<br />a great local
airline!
</h3>
<!-- <p>
@ -214,7 +214,7 @@
selectedSchedule &&
selectedSchedule.fields &&
selectedSchedule.fields.Carrier_Name ===
'Copper Valley Air Service'
'Copper Valley Air Service'
"
class="form-row form-row--two-columns"
>
@ -223,7 +223,7 @@
name="firstName"
placeholder="first name"
v-model="firstName"
:class="[{'input--error': firstNameTouched && !firstName}]"
:class="[{ 'input--error': firstNameTouched && !firstName }]"
@focus="firstNameTouched = true"
/>
<input
@ -231,7 +231,7 @@
name="lastName"
placeholder="last name"
v-model="lastName"
:class="[{'input--error': lastNameTouched && !lastName}]"
:class="[{ 'input--error': lastNameTouched && !lastName }]"
@focus="lastNameTouched = true"
/>
</div>
@ -240,7 +240,7 @@
selectedSchedule &&
selectedSchedule.fields &&
selectedSchedule.fields.Carrier_Name ===
'Copper Valley Air Service'
'Copper Valley Air Service'
"
class="form-row"
>
@ -251,7 +251,7 @@
v-model="email"
required
@input="validateEmail"
:class="[{'input--error': emailError}]"
:class="[{ 'input--error': emailError }]"
/>
<span class="alert--error">
{{ emailError }}
@ -262,16 +262,17 @@
selectedSchedule &&
selectedSchedule.fields &&
selectedSchedule.fields.Carrier_Name ===
'Copper Valley Air Service'
'Copper Valley Air Service'
"
class="form-row"
>
<VuePhoneNumberInput
v-model="phone"
<VuePhoneNumberInput
v-model="phone"
required
@update="validatePhone"
show-code-on-list
@phone-number-focused="phoneTouched = true" />
@phone-number-focused="phoneTouched = true"
/>
<!-- <input
type="tel"
name="tel"
@ -301,16 +302,32 @@
selectedSchedule &&
selectedSchedule.fields &&
selectedSchedule.fields.Carrier_Name ===
'Copper Valley Air Service'
'Copper Valley Air Service'
"
:disabled="
(emailError + phoneError).length > 0 || !firstName || !lastName
"
:disabled="(emailError + phoneError).length > 0 || !firstName || !lastName"
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"/>
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" />
<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 v-if="mailSent" class="alert--sent">
@ -324,158 +341,181 @@
<script>
export default {
data () {
data() {
return {
schedules: [],
startingDate: '',
startingDate: "",
selectedSchedule: {},
selectedDays: [],
selectedOrig: {},
selectedDest: {},
numAdult: 1,
numChild: 0,
firstName: '',
lastName: '',
email: '',
phone: '',
firstName: "",
lastName: "",
email: "",
phone: "",
firstNameTouched: false,
lastNameTouched: false,
emailTouched: false,
phoneTouched: false,
emailError: '',
phoneError: '',
mailSent: false
}
emailError: "",
phoneError: "",
mailSent: false,
};
},
async fetch () {
async fetch() {
// console.log(this.$route.params.o)
const today = new Date().toLocaleDateString('en-CA')
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)`
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 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 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()
const data = await response.json();
// console.log(data)
this.schedules = [...data.records]
this.schedules = [...data.records];
const emailCookie = this.$cookies.get("email");
if (emailCookie) {
const newUser = {
fields: {
Email: emailCookie,
Date: new Date(),
Type: "portier-login",
Site: "https://iflylocal.com/",
},
};
const res = await fetch(
`https://api.airtable.com/v0/appiQwfVZixRgRICe/User/`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer keyJ2ht64ZSN57AG1",
},
body: JSON.stringify(newUser),
}
);
await res.json()
}
},
mounted () {
mounted() {
console.log("asdf");
//this.$segment.page('flights');
this.$segment.track('flights__mount-page', {
this.$segment.track("flights__mount-page", {
origin: this.$route.params.o,
destination: this.$route.params.d,
departureDate: this.$route.params.departure,
});
const emailCookie = this.$cookies.get('email')
if(emailCookie){
const emailCookie = this.$cookies.get("email");
if (emailCookie) {
this.$segment.identify(emailCookie, {
email: emailCookie
email: emailCookie,
});
const newUser =
{
fields: {
Email: emailCookie,
CreatedDate: new Date(),
Type: 'portier-login',
Site: 'https://iflylocal.com/'
}
}
const res = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/User/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer keyJ2ht64ZSN57AG1'
},
body: JSON.stringify(newUser)
})
}
},
created () {
created() {
// console.log(this.$route.path)
if (this.$route && this.$route.params && this.$route.params.o) {
this.fetchSingleAirport(this.$route.params.o, true)
this.fetchSingleAirport(this.$route.params.o, true);
}
if (this.$route && this.$route.params && this.$route.params.d) {
this.fetchSingleAirport(this.$route.params.d, false)
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
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)
daysList(days) {
const list = days.split(", ").map((day) => {
const name = day.toLowerCase().slice(0, -1);
let num
let num;
switch (name) {
case 'su':
num = 0
break
case "su":
num = 0;
break;
case 'mo':
num = 1
break
case "mo":
num = 1;
break;
case 'tu':
num = 2
break
case "tu":
num = 2;
break;
case 'we':
num = 3
break
case "we":
num = 3;
break;
case 'th':
num = 4
break
case "th":
num = 4;
break;
case 'fr':
num = 5
break
case "fr":
num = 5;
break;
case 'sa':
num = 6
break
case "sa":
num = 6;
break;
default:
break
break;
}
return {
name,
num
}
})
num,
};
});
return list.sort(function (a, b) {
return a.num - b.num
})
return a.num - b.num;
});
},
goBack () {
this.$segment.track('flights__go_back', {
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)
this.$router.push({
path: '/dates/' + this.$route.params.o + "/" + this.$route.params.d
})
path: "/dates/" + this.$route.params.o + "/" + this.$route.params.d,
});
},
// book2 (schedule) {
// if (schedule.fields.IsExpedia[0] === 'true') {
@ -486,8 +526,8 @@ export default {
// window.open(schedule.fields['BookingLink (from Carriers_Alaska)'][0])
// }
// },
book () {
this.$segment.track('flights__book', {
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,
@ -495,13 +535,15 @@ export default {
arrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
numAdult: this.numAdult,
numChild: this.numChild,
carrier: this.selectedSchedule.fields.Carrier_Name
})
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}`)
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', {
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,
@ -509,14 +551,15 @@ export default {
arrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
numAdult: this.numAdult,
numChild: this.numChild,
carrier: this.selectedSchedule.fields.Carrier_Name
})
carrier: this.selectedSchedule.fields.Carrier_Name,
});
window.open(this.selectedSchedule.fields['BookingLink (from Carriers_Alaska)'][0])
window.open(
this.selectedSchedule.fields["BookingLink (from Carriers_Alaska)"][0]
);
},
async contactCarrier () {
const newBooking =
{
async contactCarrier() {
const newBooking = {
fields: {
ArrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
Carrier: this.selectedSchedule.fields.Carrier_Name,
@ -531,64 +574,69 @@ export default {
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 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()
const json = await res.json();
//this.guests = { ...await json }
if(await json) {
this.mailSent = true
this.firstName = ''
this.lastName = ''
this.email = ''
this.phone = ''
this.firstNameTouched = false
this.lastNameTouched = false
this.emailTouched = false
this.phoneTouched = false
if (await json) {
this.mailSent = true;
this.firstName = "";
this.lastName = "";
this.email = "";
this.phone = "";
this.firstNameTouched = false;
this.lastNameTouched = false;
this.emailTouched = false;
this.phoneTouched = false;
}
},
selectSchedule (schedule) {
this.selectedSchedule = { ...schedule }
selectSchedule(schedule) {
this.selectedSchedule = { ...schedule };
this.$segment.track('flights__select_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
})
carrier: this.selectedSchedule.fields.Carrier_Name,
});
},
clearSelectedSchedule () {
clearSelectedSchedule() {
// console.log('clear')
this.startingDate = ''
this.selectedSchedule = {}
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 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 mapData = await response.json();
const thisAirport = {
iata: mapData.records[0].fields.Airport_IATA,
@ -598,49 +646,53 @@ export default {
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
}
search: mapData.records[0].fields.Search_Field,
};
switch (isOrig) {
case true:
this.selectedOrig = { ...thisAirport }
break
this.selectedOrig = { ...thisAirport };
break;
case false:
this.selectedDest = { ...thisAirport }
break
this.selectedDest = { ...thisAirport };
break;
default:
break
break;
}
},
validateEmail() {
if (/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(this.email)) {
const emailArray = this.email.split('@')
const name = emailArray[0]
const fullDomain = emailArray[1]
const domainArray = fullDomain.split('.')
const domain = domainArray.slice(-2)[0]
const tld = domainArray.slice(-1)[0]
if(tld.length < 2 || domain.length < 2) {
this.emailError = 'your email isn\'t valid';
} else {
this.emailError = '';
}
if (
/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(
this.email
)
) {
const emailArray = this.email.split("@");
const name = emailArray[0];
const fullDomain = emailArray[1];
const domainArray = fullDomain.split(".");
const domain = domainArray.slice(-2)[0];
const tld = domainArray.slice(-1)[0];
if (tld.length < 2 || domain.length < 2) {
this.emailError = "your email isn't valid";
} else {
this.emailError = "";
}
} else {
this.emailError = 'your email isn\'t valid';
this.emailError = "your email isn't valid";
}
},
validatePhone(data) {
this.phoneIsValid = data.isValid
this.phoneIsValid = data.isValid;
if (data.isValid) {
this.phoneError = '';
this.phoneError = "";
} else {
this.phoneError = 'your phone number isn\'t valid';
this.phoneError = "your phone number isn't valid";
}
}
}
}
},
},
};
</script>
<style lang="scss" scoped>
@ -954,7 +1006,18 @@ span.badge--avail {
--stripe1: #ff69b433;
--stripe2: #eee;
// box-shadow: 0 0 0 0.2rem red;
background: linear-gradient(135deg, var(--stripe1) 25%, var(--stripe2) 25%, var(--stripe2) 50%, var(--stripe1) 50%, var(--stripe1) 75%, var(--stripe2) 75%, var(--stripe2) 100%), var(--stripe2);
background:
linear-gradient(
135deg,
var(--stripe1) 25%,
var(--stripe2) 25%,
var(--stripe2) 50%,
var(--stripe1) 50%,
var(--stripe1) 75%,
var(--stripe2) 75%,
var(--stripe2) 100%
),
var(--stripe2);
background-size: 56.57px 56.57px;
}

Write Preview
Loading…
Cancel
Save