@ -1,43 +1,91 @@
< template >
< template >
< div >
< div >
< button class = "btn btn--primary sidebar-button" @click ="showSidebar" >
< svg
v - if = "!isSidebarVisible"
xmlns = "http://www.w3.org/2000/svg"
class = "icon icon-tabler icon-tabler-menu"
width = "24"
height = "24"
viewBox = "0 0 24 24"
stroke - width = "3"
stroke = "#ffffff"
fill = "none"
stroke - linecap = "round"
stroke - linejoin = "round"
< div class = "sidebar-buttons" >
<!-- { { $cookies . get ( 'email' ) } }
{ { userEmail } } -- >
< button
class = "btn btn--primary"
v - if = "isSidebarVisible && userEmail"
@ click = "logout"
>
>
< path stroke = "none" d = "M0 0h24v24H0z" fill = "none" / >
< line x1 = "4" y1 = "8" x2 = "20" y2 = "8" / >
< line x1 = "4" y1 = "16" x2 = "20" y2 = "16" / >
< / svg >
< svg
v - if = "isSidebarVisible"
xmlns = "http://www.w3.org/2000/svg"
class = "icon icon-tabler icon-tabler-arrow-bar-to-right"
width = "24"
height = "24"
viewBox = "0 0 24 24"
stroke - width = "3"
stroke = "#ffffff"
fill = "none"
stroke - linecap = "round"
stroke - linejoin = "round"
< svg xmlns = "http://www.w3.org/2000/svg" class = "icon icon-tabler icon-tabler-logout" width = "24" height = "24" viewBox = "0 0 24 24" stroke -width = " 1.5 " stroke = "#ffffff" fill = "none" stroke -linecap = " round " stroke -linejoin = " round " >
< path stroke = "none" d = "M0 0h24v24H0z" fill = "none" / >
< path d = "M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" / >
< path d = "M7 12h14l-3 -3m0 6l3 -3" / >
< / svg >
logout
< / button >
< a
: href = "$BASE_URL() + '/login'"
class = "btn btn--primary"
v - if = "isSidebarVisible && !userEmail"
>
>
< path stroke = "none" d = "M0 0h24v24H0z" fill = "none" / >
< line x1 = "14" y1 = "12" x2 = "4" y2 = "12" / >
< line x1 = "14" y1 = "12" x2 = "10" y2 = "16" / >
< line x1 = "14" y1 = "12" x2 = "10" y2 = "8" / >
< line x1 = "20" y1 = "4" x2 = "20" y2 = "20" / >
< / svg >
< / button >
< svg xmlns = "http://www.w3.org/2000/svg" class = "icon icon-tabler icon-tabler-login" width = "24" height = "24" viewBox = "0 0 24 24" stroke -width = " 1.5 " stroke = "#ffffff" fill = "none" stroke -linecap = " round " stroke -linejoin = " round " >
< path stroke = "none" d = "M0 0h24v24H0z" fill = "none" / >
< path d = "M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" / >
< path d = "M20 12h-13l3 -3m0 6l-3 -3" / >
< / svg >
login
< / a >
< button class = "btn btn--primary" @click ="showSidebar" >
< svg
v - if = "!isSidebarVisible"
xmlns = "http://www.w3.org/2000/svg"
class = "icon icon-tabler icon-tabler-user-circle"
width = "24"
height = "24"
viewBox = "0 0 24 24"
stroke - width = "1.5"
stroke = "#ffffff"
fill = "none"
stroke - linecap = "round"
stroke - linejoin = "round"
>
< path stroke = "none" d = "M0 0h24v24H0z" fill = "none" / >
< circle cx = "12" cy = "12" r = "9" / >
< circle cx = "12" cy = "10" r = "3" / >
< path
d = "M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"
/ >
< / svg >
< svg
v - if = "!isSidebarVisible"
xmlns = "http://www.w3.org/2000/svg"
class = "icon icon-tabler icon-tabler-menu"
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" / >
< line x1 = "4" y1 = "8" x2 = "20" y2 = "8" / >
< line x1 = "4" y1 = "16" x2 = "20" y2 = "16" / >
< / svg >
< svg
v - if = "isSidebarVisible"
xmlns = "http://www.w3.org/2000/svg"
class = "icon icon-tabler icon-tabler-arrow-bar-to-right"
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" / >
< line x1 = "14" y1 = "12" x2 = "4" y2 = "12" / >
< line x1 = "14" y1 = "12" x2 = "10" y2 = "16" / >
< line x1 = "14" y1 = "12" x2 = "10" y2 = "8" / >
< line x1 = "20" y1 = "4" x2 = "20" y2 = "20" / >
< / svg >
< / button >
< / div >
< aside
< aside
: class = " [
: class = " [
'sidebar-container' ,
'sidebar-container' ,
@ -47,61 +95,68 @@
>
>
< div class = "sidebar" >
< div class = "sidebar" >
< div class = "sidebar-content" >
< div class = "sidebar-content" >
< h1 class = "h1--about" >
What is < br > FlyLocal Alaska ?
< / h1 >
< iframe id = "lbry-iframe" src = "https://odysee.com/$/embed/What-is-FlyLocal-%28fall%2C2021%2Cdesktop%29/4b6d3c94ef05cd3609a22df6b2b0d45c174957a8?r=29V3nQLvAKT88DXBMViaBRypn3iWW5WM" allowfullscreen > < / iframe >
< iframe v -if = " false " id = "lbry-iframe-mobile" src = "https://odysee.com/$/embed/What-is-FlyLocal-%28fall%2C2021%2Cmobile%29/9af5d6ac694a83b95a5763dc74b87f76e6503b0e?r=Ct8Uk1dFJb5UoQzJN7ASdkypiqzkqqez" allowfullscreen > < / iframe >
< h1 class = "h1--about" > What is < br / > FlyLocal Alaska ? < / h1 >
< iframe
id = "lbry-iframe"
src = "https://odysee.com/$/embed/What-is-FlyLocal-%28fall%2C2021%2Cdesktop%29/4b6d3c94ef05cd3609a22df6b2b0d45c174957a8?r=29V3nQLvAKT88DXBMViaBRypn3iWW5WM"
allowfullscreen
> < / iframe >
< iframe
v - if = "false"
id = "lbry-iframe-mobile"
src = "https://odysee.com/$/embed/What-is-FlyLocal-%28fall%2C2021%2Cmobile%29/9af5d6ac694a83b95a5763dc74b87f76e6503b0e?r=Ct8Uk1dFJb5UoQzJN7ASdkypiqzkqqez"
allowfullscreen
> < / iframe >
< div class = "img-divider" >
< div class = "img-divider" >
< img
< img
class = "img--about"
class = "img--about"
src = "https://openmoji.org/data/black/svg/1F3D4.svg"
src = "https://openmoji.org/data/black/svg/1F3D4.svg"
alt = ""
alt = ""
srcset = ""
srcset = ""
>
/ >
< img
< img
class = "img--about"
class = "img--about"
src = "https://openmoji.org/data/black/svg/1F4C5.svg"
src = "https://openmoji.org/data/black/svg/1F4C5.svg"
alt = ""
alt = ""
srcset = ""
srcset = ""
>
/ >
< img
< img
class = "img--about"
class = "img--about"
src = "https://openmoji.org/data/black/svg/1F601.svg"
src = "https://openmoji.org/data/black/svg/1F601.svg"
alt = ""
alt = ""
srcset = ""
srcset = ""
>
/ >
< / div >
< / div >
< p class = "text--about" >
< p class = "text--about" >
< strong > FlyLocal - Alaska < / strong > is an easy way to view the
< strong > FlyLocal - Alaska < / strong > is an easy way to view the
schedules for your favorite Alaskan airlines - all in one place .
schedules for your favorite Alaskan airlines - all in one place .
< / p >
< / p >
< h1 class = "h1--about" >
Why FlyLocal < br > in Alaska ?
< / h1 >
< h1 class = "h1--about" > Why FlyLocal < br / > in Alaska ? < / h1 >
< div class = "img-divider" >
< div class = "img-divider" >
< img
< img
class = "img--about"
class = "img--about"
src = "https://openmoji.org/data/black/svg/1F6AB.svg"
src = "https://openmoji.org/data/black/svg/1F6AB.svg"
alt = ""
alt = ""
srcset = ""
srcset = ""
>
/ >
< img
< img
class = "img--about"
class = "img--about"
src = "https://openmoji.org/data/black/svg/1F697.svg"
src = "https://openmoji.org/data/black/svg/1F697.svg"
alt = ""
alt = ""
srcset = ""
srcset = ""
>
/ >
< img
< img
class = "img--about"
class = "img--about"
src = "https://openmoji.org/data/black/svg/1F6E3.svg"
src = "https://openmoji.org/data/black/svg/1F6E3.svg"
alt = ""
alt = ""
srcset = ""
srcset = ""
>
/ >
< / div >
< / div >
< p class = "text--about" >
< p class = "text--about" >
< strong > 80 % of Alaskan communities are not connected to the road
system . < / strong >
< strong
> 80 % of Alaskan communities are not connected to the road
system . < / s t r o n g
>
Therefore , they rely heavily on local airlines for transportation .
Therefore , they rely heavily on local airlines for transportation .
< / p >
< / p >
< div class = "img-divider" >
< div class = "img-divider" >
@ -110,19 +165,19 @@
src = "https://openmoji.org/data/black/svg/1F6A3.svg"
src = "https://openmoji.org/data/black/svg/1F6A3.svg"
alt = ""
alt = ""
srcset = ""
srcset = ""
>
/ >
< img
< img
class = "img--about"
class = "img--about"
src = "https://openmoji.org/data/black/svg/1F3D5.svg"
src = "https://openmoji.org/data/black/svg/1F3D5.svg"
alt = ""
alt = ""
srcset = ""
srcset = ""
>
/ >
< img
< img
class = "img--about"
class = "img--about"
src = "https://openmoji.org/data/black/svg/1F43B.svg"
src = "https://openmoji.org/data/black/svg/1F43B.svg"
alt = ""
alt = ""
srcset = ""
srcset = ""
>
/ >
< / div >
< / div >
< p class = "text--about" >
< p class = "text--about" >
< strong > See new places . < / strong > There are ~ 400 public airports in
< strong > See new places . < / strong > There are ~ 400 public airports in
@ -134,28 +189,26 @@
src = "https://openmoji.org/data/black/svg/1F6E9.svg"
src = "https://openmoji.org/data/black/svg/1F6E9.svg"
alt = ""
alt = ""
srcset = ""
srcset = ""
>
/ >
< img
< img
class = "img--about"
class = "img--about"
src = "https://openmoji.org/data/black/svg/1F681.svg"
src = "https://openmoji.org/data/black/svg/1F681.svg"
alt = ""
alt = ""
srcset = ""
srcset = ""
>
/ >
< img
< img
class = "img--about"
class = "img--about"
src = "https://openmoji.org/data/black/svg/1F6F8.svg"
src = "https://openmoji.org/data/black/svg/1F6F8.svg"
alt = ""
alt = ""
srcset = ""
srcset = ""
>
/ >
< / div >
< / div >
< p class = "text--about" >
< p class = "text--about" >
Enjoy a completely < strong > unique flying experience < / strong > . Have
Enjoy a completely < strong > unique flying experience < / strong > . Have
you ever landed on a lake in a seaplane ? Now is your chance to check
you ever landed on a lake in a seaplane ? Now is your chance to check
it off the bucket - list .
it off the bucket - list .
< / p >
< / p >
< h1 class = "h1--about" >
Up - to - date < br > Travel Info
< / h1 >
< h1 class = "h1--about" > Up - to - date < br / > Travel Info < / h1 >
< ul class = "about-carriers list-lrg" >
< ul class = "about-carriers list-lrg" >
< li @click ="clickedLink('alaska-travel-info')" >
< li @click ="clickedLink('alaska-travel-info')" >
< a href = "https://covid19.alaska.gov/travelers/" target = "_blank" >
< a href = "https://covid19.alaska.gov/travelers/" target = "_blank" >
@ -164,28 +217,32 @@
: src = "require(`@/assets/images/orgs/alaska-travel-info.png`)"
: src = "require(`@/assets/images/orgs/alaska-travel-info.png`)"
alt = "Alaska Travel Info"
alt = "Alaska Travel Info"
title = "Alaska Travel Info"
title = "Alaska Travel Info"
>
/ >
< / a >
< / a >
< / li >
< / li >
< / ul >
< / ul >
< h1 class = "h1--about" >
< h1 class = "h1--about" >
Explore Alaska < br > on these great local airlines
Explore Alaska < br / > on these great local airlines
< / h1 >
< / h1 >
< ul class = "about-carriers" >
< ul class = "about-carriers" >
< li v-for ="carrier in carriers" :key="carrier.id" @click="clickedCarrier(carrier.fields.Slug)" >
< li
v - for = "carrier in carriers"
: key = "carrier.id"
@ click = "clickedCarrier(carrier.fields.Slug)"
>
< a :href ="carrier.fields.BookingLink" target = "_blank" >
< a :href ="carrier.fields.BookingLink" target = "_blank" >
< img
< img
class = "img--carrier-logo"
class = "img--carrier-logo"
: src = "require(`@/assets/images/carriers/${carrier.fields.Slug}.png`)"
: src = "
require ( ` @/assets/images/carriers/ ${ carrier . fields . Slug } .png ` )
"
: alt = "carrier.fields.Name"
: alt = "carrier.fields.Name"
: title = "carrier.fields.Name"
: title = "carrier.fields.Name"
>
/ >
< / a >
< / a >
< / li >
< / li >
< / ul >
< / ul >
< h1 class = "h1--about" >
Proud Member of
< / h1 >
< h1 class = "h1--about" > Proud Member of < / h1 >
< ul class = "about-carriers list-med" >
< ul class = "about-carriers list-med" >
< li @click ="clickedLink('aaca')" >
< li @click ="clickedLink('aaca')" >
< a href = "https://alaskaaircarriers.org" target = "_blank" >
< a href = "https://alaskaaircarriers.org" target = "_blank" >
@ -194,7 +251,7 @@
: src = "require(`@/assets/images/orgs/aaca.png`)"
: src = "require(`@/assets/images/orgs/aaca.png`)"
alt = "Alaska Air Carriers Association"
alt = "Alaska Air Carriers Association"
title = "Alaska Air Carriers Association"
title = "Alaska Air Carriers Association"
>
/ >
< / a >
< / a >
< / li >
< / li >
< li @click ="clickedLink('alaska-tia')" >
< li @click ="clickedLink('alaska-tia')" >
@ -204,38 +261,46 @@
: src = "require(`@/assets/images/orgs/alaska-tia.png`)"
: src = "require(`@/assets/images/orgs/alaska-tia.png`)"
alt = "Alaska Travel Industry Association"
alt = "Alaska Travel Industry Association"
title = "Alaska Travel Industry Association"
title = "Alaska Travel Industry Association"
>
/ >
< / a >
< / a >
< / li >
< / li >
< / ul >
< / ul >
< h1 class = "h1--about" >
Featured on
< / h1 >
< h1 class = "h1--about" > Featured on < / h1 >
< ul class = "about-carriers list-med" >
< ul class = "about-carriers list-med" >
< li @click ="clickedLink('1-million-cups')" >
< li @click ="clickedLink('1-million-cups')" >
< a href = "https://www.1millioncups.com/anchorage/presentations/flylocal-alaska-35304" target = "_blank" >
< a
href = "https://www.1millioncups.com/anchorage/presentations/flylocal-alaska-35304"
target = "_blank"
>
< img
< img
class = "img--carrier-logo"
class = "img--carrier-logo"
: src = "require(`@/assets/images/orgs/1-million-cups.png`)"
: src = "require(`@/assets/images/orgs/1-million-cups.png`)"
alt = "1 Million Cups"
alt = "1 Million Cups"
title = "1 Million Cups"
title = "1 Million Cups"
>
/ >
< / a >
< / a >
< / li >
< / li >
< li @click ="clickedLink('travel-alaska')" >
< li @click ="clickedLink('travel-alaska')" >
< a href = "https://www.travelalaska.com/offers/FlyLocal/Plane-Statewide.aspx" target = "_blank" >
< a
href = "https://www.travelalaska.com/offers/FlyLocal/Plane-Statewide.aspx"
target = "_blank"
>
< img
< img
class = "img--carrier-logo"
class = "img--carrier-logo"
style = "background: black; border-radius: 0.5rem; padding-left: 0.4rem;"
style = "
background : black ;
border - radius : 0.5 rem ;
padding - left : 0.4 rem ; "
: src = "require(`@/assets/images/orgs/travel-alaska.png`)"
: src = "require(`@/assets/images/orgs/travel-alaska.png`)"
alt = "Travel Alaska"
alt = "Travel Alaska"
title = "Travel Alaska"
title = "Travel Alaska"
>
/ >
< / a >
< / a >
< / li >
< / li >
< / ul >
< / ul >
< div class = "company-footer" >
< div class = "company-footer" >
⎨ & nbsp ; FlyLocal v5 .0 .3 .0 & nbsp ; & nbsp ; 𐄙 & nbsp ; & nbsp ; © 2021 FlyLocal , Inc & nbsp ; ⎬
⎨ & nbsp ; FlyLocal v5 .0 .4 .0 & nbsp ; & nbsp ; 𐄙 & nbsp ; & nbsp ; © 2021 FlyLocal ,
Inc & nbsp ; ⎬
< / div >
< / div >
< / div >
< / div >
< ul class = "contact" >
< ul class = "contact" >
@ -365,57 +430,69 @@
export default {
export default {
data : ( ) => ( {
data : ( ) => ( {
isSidebarVisible : false ,
isSidebarVisible : false ,
carriers : [ ]
carriers : [ ] ,
userEmail : ''
} ) ,
} ) ,
async fetch ( ) {
const filterFormula = 'AND(IsActive=1,FIND("Alaska",Region)>0)'
const sortFormula = '&sort[0][field]=Name&sort[0][direction]=asc'
async fetch ( ) {
this . userEmail = this . $cookies . get ( 'email' ) ;
const filterFormula = 'AND(IsActive=1,FIND("Alaska",Region)>0)' ;
const sortFormula = "&sort[0][field]=Name&sort[0][direction]=asc" ;
let offset
let data = [ ]
let offset ;
let data = [ ] ;
while ( true ) {
while ( true ) {
const offsetParam = offset ? ` &offset= ${ offset } ` : ''
const res = await fetch ( ` https://api.airtable.com/v0/appiQwfVZixRgRICe/Carriers_Alaska?filterByFormula= ${ filterFormula } ${ sortFormula } ${ offsetParam } ` , {
method : 'GET' ,
headers : {
'Content-Type' : 'application/x-www-form-urlencoded' ,
Authorization : 'Bearer keyJ2ht64ZSN57AG1'
const offsetParam = offset ? ` &offset= ${ offset } ` : "" ;
const res = await fetch (
` https://api.airtable.com/v0/appiQwfVZixRgRICe/Carriers_Alaska?filterByFormula= ${ filterFormula } ${ sortFormula } ${ offsetParam } ` ,
{
method : "GET" ,
headers : {
"Content-Type" : "application/x-www-form-urlencoded" ,
Authorization : "Bearer keyJ2ht64ZSN57AG1" ,
} ,
}
}
} )
) ;
const json = await res . json ( )
offset = await json . offset
data = [ ... data , ... await json . records ]
const json = await res . json ( ) ;
offset = await json . offset ;
data = [ ... data , ... ( await json . records ) ] ;
/ / a w a i t c o n s o l e . l o g ( d a t a . l e n g t h )
/ / a w a i t c o n s o l e . l o g ( d a t a . l e n g t h )
if ( await ! offset ) { break } / / W e r e d o n e l e t ' s s t o p t h i s t h i n g
if ( await ! offset ) {
break ;
} / / W e r e d o n e l e t ' s s t o p t h i s t h i n g
}
}
this . carriers = [ ... data ]
this . carriers = [ ... data ] ;
} ,
} ,
methods : {
methods : {
showSidebar ( ) {
this . isSidebarVisible = ! this . isSidebarVisible
showSidebar ( ) {
this . isSidebarVisible = ! this . isSidebarVisible ;
if ( this . isSidebarVisible ) {
this . $segment . track ( 'sidebar__show_sidebar' )
if ( this . isSidebarVisible ) {
this . $segment . track ( "sidebar__show_sidebar" ) ;
} else {
} else {
this . $segment . track ( 'sidebar__hide_sidebar' )
this . $segment . track ( "sidebar__hide_sidebar" ) ;
}
}
} ,
} ,
clickedCarrier ( slug ) {
this . $segment . track ( 'sidebar__open_carrier' , {
carrier : slug
clickedCarrier ( slug ) {
this . $segment . track ( "sidebar__open_carrier" , {
carrier : slug ,
} ) ;
} ,
clickedLink ( slug ) {
this . $segment . track ( "sidebar__open_link" , {
carrier : slug ,
} ) ;
} ) ;
} ,
} ,
clickedLink ( slug ) {
this . $segment . track ( 'sidebar__open_link' , {
carrier : slug
} ) ;
logout ( ) {
this . $cookies . remove ( 'email' ) ;
this . userEmail = '' ;
}
}
}
}
} ,
} ;
< / script >
< / script >
< style >
< style >
@ -556,11 +633,14 @@ h1.h1--about {
transform : scale ( 1.05 ) ;
transform : scale ( 1.05 ) ;
}
}
. sidebar - button {
. sidebar - buttons {
position : fixed ;
position : fixed ;
top : 1 rem ;
top : 1 rem ;
right : 1 rem ;
right : 1 rem ;
z - index : 1003 ;
z - index : 1003 ;
display : flex ;
align - content : flex - end ;
gap : 1 rem ;
}
}
. sidebar - blockui {
. sidebar - blockui {
@ -626,5 +706,4 @@ ul.contact li.contact-item a:hover svg {
text - transform : uppercase ;
text - transform : uppercase ;
color : gray ;
color : gray ;
}
}
< / style >
< / style >