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.
1040 lines
27 KiB
1040 lines
27 KiB
<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"
|
|
:class="[{ 'input--error': firstNameTouched && !firstName }]"
|
|
@focus="firstNameTouched = true"
|
|
/>
|
|
<input
|
|
type="text"
|
|
name="lastName"
|
|
placeholder="last name"
|
|
v-model="lastName"
|
|
:class="[{ 'input--error': lastNameTouched && !lastName }]"
|
|
@focus="lastNameTouched = true"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
selectedSchedule &&
|
|
selectedSchedule.fields &&
|
|
selectedSchedule.fields.Carrier_Name ===
|
|
'Copper Valley Air Service'
|
|
"
|
|
class="form-row"
|
|
>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
placeholder="email address"
|
|
v-model="email"
|
|
required
|
|
@input="validateEmail"
|
|
:class="[{ 'input--error': emailError }]"
|
|
/>
|
|
<span class="alert--error">
|
|
{{ emailError }}
|
|
</span>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
selectedSchedule &&
|
|
selectedSchedule.fields &&
|
|
selectedSchedule.fields.Carrier_Name ===
|
|
'Copper Valley Air Service'
|
|
"
|
|
class="form-row"
|
|
>
|
|
<VuePhoneNumberInput
|
|
v-model="phone"
|
|
required
|
|
@update="validatePhone"
|
|
show-code-on-list
|
|
@phone-number-focused="phoneTouched = true"
|
|
/>
|
|
<!-- <input
|
|
type="tel"
|
|
name="tel"
|
|
placeholder="phone number"
|
|
v-model="phone"
|
|
required
|
|
@blur="validatePhone"
|
|
/> -->
|
|
<span v-if="phoneTouched" class="alert--error">
|
|
{{ phoneError }}
|
|
</span>
|
|
</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'
|
|
"
|
|
: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" />
|
|
<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 v-if="mailSent" class="alert--sent">
|
|
Thanks! You will be contacted shortly.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
schedules: [],
|
|
startingDate: "",
|
|
selectedSchedule: {},
|
|
selectedDays: [],
|
|
selectedOrig: {},
|
|
selectedDest: {},
|
|
numAdult: 1,
|
|
numChild: 0,
|
|
firstName: "",
|
|
lastName: "",
|
|
email: "",
|
|
phone: "",
|
|
firstNameTouched: false,
|
|
lastNameTouched: false,
|
|
emailTouched: false,
|
|
phoneTouched: false,
|
|
emailError: "",
|
|
phoneError: "",
|
|
mailSent: false,
|
|
};
|
|
},
|
|
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];
|
|
|
|
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() {
|
|
console.log("asdf");
|
|
//this.$segment.page('flights');
|
|
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) {
|
|
this.$segment.identify(emailCookie, {
|
|
email: emailCookie,
|
|
});
|
|
}
|
|
},
|
|
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)
|
|
this.$router.push({
|
|
path: "/dates/" + this.$route.params.o + "/" + this.$route.params.d,
|
|
});
|
|
},
|
|
// 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 }
|
|
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 };
|
|
|
|
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;
|
|
}
|
|
},
|
|
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 = "";
|
|
}
|
|
} else {
|
|
this.emailError = "your email isn't valid";
|
|
}
|
|
},
|
|
validatePhone(data) {
|
|
this.phoneIsValid = data.isValid;
|
|
if (data.isValid) {
|
|
this.phoneError = "";
|
|
} else {
|
|
this.phoneError = "your phone number isn't valid";
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</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: 0.5rem 3rem 3rem 3rem;
|
|
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%;
|
|
}
|
|
|
|
.form-row input:focus {
|
|
border: 0;
|
|
}
|
|
|
|
.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 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;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.2;
|
|
background-color: #ddd;
|
|
color: #222;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.form-row input.input--error {
|
|
--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-size: 56.57px 56.57px;
|
|
}
|
|
|
|
.alert--error {
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
margin-top: 0.15rem;
|
|
}
|
|
|
|
.alert--sent {
|
|
text-align: center;
|
|
background-color: #00ca00;
|
|
margin: 0 -3rem -3rem -3rem;
|
|
text-transform: uppercase;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.1rem;
|
|
padding: 1rem;
|
|
}
|
|
</style>
|