<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="/public/assets/js/jquery-ui.min.js"></script>
<link href="/public/assets/css/jquery-ui.min.css" rel="stylesheet">
<script type="text/javascript" src="/parse-sdk-js"></script>
<script type="text/javascript" src="/sc-common"></script>
<!-- start vue -->
<!-- prod minified vue js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.21/vue.global.prod.min.js"></script>
<script src="/public/assets/js/catch-all-minified/vue.min.js"></script>
<!-- end vue -->
<!-- library for image orientation -->
<script src="/public/assets/js/load-image-all.min.js"></script>
<!-- moment.js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.45/moment-timezone-with-data.min.js"></script>
<!-- library for charts -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<link rel="stylesheet" href="/public/assets/css/material-icons.css">
<!-- <link rel="stylesheet" href="https://kit.fontawesome.com/a59cae6e7b.css" crossorigin="anonymous"> -->
<link rel="stylesheet" href="/public/assets/css/font-awesome.css" crossorigin="anonymous">
<!-- more js -->
<script src="/public/assets/js/cookies.js"></script>
<!-- main app -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500|Cormorant+Garamond|Lato:300,400,700|Lora:400,500|Montserrat:400,500,600" rel="stylesheet">
<link rel="stylesheet" href="/public/assets/css/stylesheet.css">
<link rel="stylesheet" media="print" href="/public/assets/css/print.css">
<script src="/public/assets/js/catch-all-minified/common.min.js"></script>
<!-- Tip Tap browserified -->
<script src="/public/assets/browserified/tiptap-browserified.js"></script>
<!-- Juice browserified for inline css -->
<script src="/public/assets/browserified/juice-browserified.js"></script>
<!-- <script src="/public/assets/browserified/tiptaptest.js"></script> -->
<!-- Swiper JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<link rel="shortcut icon" href="/public/assets/images/favicons/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/public/assets/images/favicons/favicon.ico">
<link rel="apple-touch-icon" href="/public/assets/images/favicons/apple-touch-icon.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/public/assets/images/favicons/favicon.ico">
<link rel="stylesheet" href="/public/assets/css/ios.css">
<!-- weglot translations -->
<!-- google tag manager in analytics mode only (it's not white label, but it is also NOT a marketing page) -->
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag('consent', 'default', {
ad_storage: 'denied',
ad_user_data: 'denied',
ad_personalization: 'denied',
analytics_storage: 'granted',
});
</script>
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TWGR9ZMS');
</script>
<!-- End Google Tag Manager -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TWGR9ZMS"height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- userway.org accessibility snippet -->
<meta name="robots" content="noindex">
<title>Page not found</title>
<!-- fb open graph tags -->
<meta property="fb:app_id" content="314788812688609" />
<!-- Google Analytics for clubs -->
<!-- END google analytics for clubs -->
<!-- FB pixel for clubs -->
<!-- FB pixel for clubs -->
<!-- Calendly link widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<!-- Calendly link widget end -->
<!-- vue date picker -->
<!-- see: https://vue3datepicker.com/ -->
<script src="/public/assets/js/vue-date-picker-8.5.1.js"></script>
<link rel="stylesheet" href="/public/assets/css/vue-date-picker.css">
</head> <body>
<div class="globalMessageInsert flexNoWrap easeFast hideForPrinting">
<div class="global-message-icon-loading">
<div class="global-message-icon-spinner"></div>
</div>
<p>
<i class="fa-solid fa-square-check global-message-icon-good"></i>
<i class="fa-solid fa-square-xmark global-message-icon-bad"></i>
<span></span>
</p>
</div>
<!-- start standard content -->
<div
id="v-content"
class="hidden"
>
<div class="flexNoWrap flexWrapOnMobile fullView">
<div class="basis-50 flexGrowOne borderLeft hideOnMobile">
<div class="cs-login-image" style="background-image:url(https://d282wvk2qi4wzk.cloudfront.net/1679786150590_2672)"></div>
</div>
<div class="basis-50 flexGrowOne fff flexWrap align-items-center leftText">
<div class="centeredBlock hugePaddingBottom eightyThenNinety">
<div class="standardCard centeredBlock marginTop noBoxShadow noBorder leftText">
<h3 class="leftText">Page not found</h3>
<div class="standardCardBody fff noBorder">
<p class="noObjectsMSG leftText">Sorry, we can't seem to find the page you're looking for.<br><br>If you are a Wayzata Yacht Club administrator, please check to make sure this page is not in DRAFT mode in the website editor. You can also contact us at <a href="mailto:support@theclubspot.com">support@theclubspot.com</a> for assistance.
</p>
<button class="primaryButton easeSuperFast smallMarginBottom marginTop">
Return to homepage
<a href="/" class="absoluteA"></a>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- react native tab bar -->
<native-tab-bar-component></native-tab-bar-component>
</div>
<div id="v-overlays">
<template v-if="overlays.show_push_notification">
<show-push-notification></show-push-notification>
</template>
</div>
</body>
<script>
//create the app
var app_content = createApp({
data() {
return store
},
mounted() {
$('#v-content').removeClass('hidden');
},
methods: {
},
});
var app_overlays = createApp({
data() {
return store
},
mounted() {
$('#v-overlays').removeClass('hidden');
},
methods: {
},
});
</script>
<!-- native tab bar -->
<!DOCTYPE html>
<html lang="en">
<script type="text/html" id="template-bottom-sheet-overlay">
<div
class="v-overlay scrollable hugePaddingBottom active"
@touchstart.self="touched_overlay()"
@mousedown.self="touched_overlay()"
@click.self="clicked_overlay()"
>
<div
class="standardOverlayCard centeredBlock bottom-sheet"
:class="{'short': height == 'short'}"
>
<!-- generic header content -->
<div class="bottom-sheet-overlay-header">
<div
class="relative"
>
<div
class="overlay-header-handle-wrap centeredBlock"
@click.stop="toggle_height()"
>
<div class="overlay-header-handle"></div>
</div>
<i
class="overlay-x-button fa-regular fa-xmark pointer"
@click.stop="dismiss_overlay()"
></i>
</div>
<!-- header content injected here -->
<slot name="header"></slot>
</div>
<!-- body content injected here -->
<slot name="body"></slot>
<!-- footer content injected here -->
<slot name="footer"></slot>
</div>
</div>
</script>
<style>
.standardOverlayCard.bottom-sheet{
position: fixed;
bottom: 0px;
top: 50px;
left: 0px;
right: 0px;
z-index: 1001;
/*
background-color: rgba(249, 251, 251, 1);
*/
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: bottom 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding-bottom: 10px;
padding-top: 10px;
max-width: 1100px;
margin-top: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.standardOverlayCard.bottom-sheet.short{
top: 50%;
}
@media (max-height: 600px) {
.standardOverlayCard.bottom-sheet.short{
top: 150px;
}
}
.standardOverlayCard.bottom-sheet h3{
padding-top:0px;
}
.standardOverlayCard.bottom-sheet{
display: flex;
flex-direction: column;
padding-bottom:0px;
padding-top: 0px;
}
.standardOverlayCard.bottom-sheet .bottom-sheet-overlay-card-header
{
flex: 0 0 auto; /* Fixed height, doesn't grow or shrink */
}
.standardOverlayCard.bottom-sheet .standardCardFooter{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #fff;
border-top: 1px solid #e4ebf1;
z-index: 10;
}
.standardOverlayCard.bottom-sheet .standardCardBody{
flex: 1 1 auto; /* Flexible height, can grow and shrink */
padding-bottom: 90px !important;
}
.overlay-header-handle-wrap{
padding: 10px;
cursor: pointer;
max-width: 120px;
}
.overlay-header-handle{
width: 70px;
height: 3px;
border-radius: 10px;
background-color: #acb3ba;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
.overlay-x-button{
position: absolute;
right: 14px;
color: #535e6c;
font-size: 20px;
top: 14px;
}
</style>
<script>
//define the component
app_overlays.component("bottom-sheet-overlay", {
template: "#template-bottom-sheet-overlay",
data() {
return {
height: "tall"
}
},
mounted(){
const universalEditOverlay = document.getElementById('overlay_universal-edit');
if (universalEditOverlay) {
universalEditOverlay.style.zIndex = "1000000";
}
const membershipValidationOverlay = document.getElementById('overlay_verifyMembership');
if (membershipValidationOverlay) {
membershipValidationOverlay.style.zIndex = "1000000";
}
},
beforeUnmount() {
//reset the z-index
const universalEditOverlay = document.getElementById('overlay_universal-edit');
if (universalEditOverlay) {
universalEditOverlay.style.zIndex = ""; // Revert to default
}
const membershipValidationOverlay = document.getElementById('overlay_verifyMembership');
if (membershipValidationOverlay) {
membershipValidationOverlay.style.zIndex = ""; // Revert to default
}
},
methods: {
dismiss_overlay(){
this.$emit('dismiss_overlay');
},
toggle_height(){
if( this.height == "tall" ){
this.height = "short";
}else{
this.height = "tall";
}
},
clicked_overlay(){
if (should_close_overlay(this.last_touch)) {
this.dismiss_overlay();
}
},
touched_overlay(){
this.last_touch = new Date().getTime();
},
},
});
</script> <script type="text/html" id="template-show-push-notification">
<bottom-sheet-overlay
@dismiss_overlay="dismiss_overlay()"
>
<!-- header content -->
<template #header>
<div class="flexNoWrap">
<h3
class="flexGrowOne"
style="padding-bottom:0px;"
>
<p>{{ title }}</p>
<template v-if="has_date">
<p
class="card-header-subtext pointer"
>{{ date_string }}</p>
</template>
</h3>
</div>
</template>
<!-- body content -->
<template #body>
<div
class="standardCardBody fff scrollable"
>
<p class="p-1" style="margin: 0px 8px;">{{ notification.get('data').alert }}</p>
</div>
</template>
<!-- footer content -->
<template
#footer
>
<div
class="standardCardFooter flexNoWrap"
>
<div class="flexGrowOne"></div>
<button class="marketing-header-button blue easeSuperFast flexWrapLeftAlign align-items-center" @click="dismiss_overlay()" >Done</button>
</div>
</template>
</bottom-sheet-overlay>
</script>
<script>
function show_push_notification( params ){
store.components.show_push_notification.notification = params.notification;
store.overlays.show_push_notification = true;
}
//add a value to our global store, specific to this component
store.components["show_push_notification"] = {
notification: null
}
//define the component
app_overlays.component("show-push-notification", {
template: "#template-show-push-notification",
data() {
return store.components["show_push_notification"]
},
methods: {
dismiss_overlay(){
store.overlays.show_push_notification = false;
}
},
computed: {
title(){
let title = this.notification.get('data').title;
if (title && title.length > 0){
return title;
}
return "Notification";
},
has_date(){
return this.notification.createdAt !== undefined;
},
date_string(){
const createdAt = this.notification.createdAt;
if (! createdAt){
return createdAt;
}
if ( is_utc_date_today( createdAt ) ){
return format_utc_date_v2({
"utcDate": createdAt,
"formatString": "[Today at] h:mm A"
});
} else {
return format_utc_date_v2({
"utcDate": createdAt,
"formatString": "ddd M/D h:mm A"
});
}
}
}
});
</script> <script type="text/html" id="template-native-tab-bar">
<!-- first, make sure we're in the react native member app -->
<template v-if="is_react_native_member_app">
<div
v-if="show_tab_bar"
class="native-tab-bar-outer flexNoWrap"
>
<!-- tab bar (only for the member portal) -->
<template v-if="visible_tabs">
<div
v-for="tab in visible_tabs"
:key="tab.key"
class="native-tab-bar-item"
:class="{ active : tab.key == primary_view }"
@touchstart.prevent="tapped_tab_bar_item( tab )"
@click="tapped_tab_bar_item( tab )"
>
<div class="centeredText centeredBlock">
<p><i class="native-tab-bar-icon" :class="tab.icon_class"></i></p>
<p class="native-tab-bar-label">{{ tab.label }}</p>
</div>
</div>
<div
class="native-tab-bar-item"
@touchstart.prevent="tapped_more()"
@click="tapped_more()"
:class="{ 'active': more_is_active }"
>
<div class="centeredText centeredBlock">
<p><i class="fa-regular fa-grid native-tab-bar-icon"></i></p>
<p class="native-tab-bar-label">More</p>
</div>
</div>
</template>
</div>
<!-- back button (global) -->
<div v-else-if="! loading && show_back_button">
<!-- overlay -->
<div
class="native-tab-bar-back-button-overlay pointer"
@touchstart.self.prevent="back_button_expanded = false"
@click.self="back_button_expanded = false"
:class="{ 'active': back_button_expanded }"
></div>
<!-- home button -->
<div
class="native-tab-bar-floating-home-button boxShadowBottom moreBlur pointer easeFast"
@click="tapped_home()"
:class="{ 'active': back_button_expanded }"
>
<div class="centeredText centeredBlock">
<p><i class="fa-regular fa-house native-tab-bar-icon" style="font-size:20px;"></i><span v-if="back_button_expanded" style="padding-left:6px;font-size:18px;">Home</span></p>
</div>
</div>
<!-- back button -->
<div
class="native-tab-bar-floating-back-button boxShadowBottom moreBlur pointer easeFast"
@click="tapped_back()"
:class="{ 'expanded': back_button_expanded }"
>
<div class="centeredText centeredBlock">
<p><i class="fa-regular fa-chevron-left native-tab-bar-icon" style="font-size:20px;"></i><span v-if="back_button_expanded" style="padding-left:6px;font-size:18px;">Back</span></p>
</div>
</div>
<!--
<div
class="native-tab-bar-item"
@click="tapped_home()"
style="max-width:60px;"
>
<div class="centeredText centeredBlock">
<p><i class="fa-regular fa-house native-tab-bar-icon"></i></p>
<p class="native-tab-bar-label">Home</p>
</div>
</div>
-->
</div>
<!-- full menu sheet -->
<div
v-if="tabs"
class="native-tab-bar-menu-sheet"
:class="{'active': show_full_menu}"
>
<!-- overlay -->
<div
class="native-tab-bar-menu-sheet-overlay pointer"
@touchstart.self.prevent="show_full_menu = false"
@click.self="show_full_menu = false"
></div>
<!-- actual menu sheet -->
<div class="native-tab-bar-menu-sheet-inner scrollable">
<div
class="flexWrap"
style="padding-top: 10px"
>
<!-- loop through tabs-->
<div
v-for="tab in tabs"
class="quick-action-wrap noMaxWidth relative"
@click="selected_full_menu_option( tab )"
>
<div
class="quick-action-icon-wrap overflowHidden"
>
<div>
<i v-if="tab.icon_class" :class="tab.icon_class"></i>
</div>
</div>
<p class="quick-action-title">{{ tab.label }}</p>
</div>
</div>
</div>
</div>
</template>
</script>
<style>
.native-tab-bar-outer{
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
background-color: rgba(249, 251, 251, 1);
border-top: 1px solid #e4ebf1;
z-index: 1000;
transition: 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.native-tab-bar-item{
padding: 11px;
display: flex;
flex: 1 1 0; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
color: #697684;
cursor: pointer;
}
.native-tab-bar-item.active{
color: #4a56f8;
}
.native-tab-bar-label{
font-size: 12px;
padding-top: 4px;
white-space: nowrap;
}
.native-tab-bar-icon{
font-size: 22px;
}
/* ------ menu sheet (full menu) ------- */
.native-tab-bar-menu-sheet-overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(8,8,19,0.64);
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease;
z-index: 1000;
}
.native-tab-bar-menu-sheet.active .native-tab-bar-menu-sheet-overlay{
opacity: 1;
visibility: visible;
}
.native-tab-bar-menu-sheet.active .native-tab-bar-menu-sheet-inner{
bottom: 0px;
}
.native-tab-bar-menu-sheet-inner .quick-action-wrap{
padding-left: 10px;
padding-right:10px;
}
.native-tab-bar-menu-sheet-inner{
position: fixed;
bottom: -100%;
max-height: 90%;
left: 0px;
right: 0px;
z-index: 1001;
background-color: rgba(249, 251, 251, 1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: bottom 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding-bottom: 10px;
padding-top: 10px;
}
/*------ back button -------*/
.native-tab-bar-back-button-overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*
background-color: rgba(111,117,122,0.5);
*/
background-color: rgba(249, 251, 251, 0.8);
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease;
z-index: 999;
}
.native-tab-bar-back-button-overlay.active{
opacity: 1;
visibility: visible;
}
.native-tab-bar-floating-back-button{
position: fixed;
bottom: 15px;
left: 22px;
right: auto;
background-color: rgba(249, 251, 251, 1);
/* border-top: 1px solid #e4ebf1; */
z-index: 1000;
transition: 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
border-radius: 100%;
width: 50px;
height: 50px;
background-color: #fff;
line-height: 50px;
font-size: 16px;
white-space: nowrap;
min-width: 50px;
}
.native-tab-bar-floating-back-button.expanded{
border-radius: 25px;
padding-left: 16px;
padding-right: 16px;
width: auto;
}
/*------ home button -------*/
.native-tab-bar-floating-home-button.active{
border-radius: 25px;
padding-left: 16px;
padding-right: 16px;
width: auto;
visibility: visible;
opacity: 1;
animation: expand 0.15s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
background-color: #4a56f8;
color: #fff;
}
.native-tab-bar-floating-home-button{
position: fixed;
bottom: 75px;
left: 22px;
right: auto;
visibility: hidden;
opacity: 0;
background-color: rgba(249, 251, 251, 1);
/* border-top: 1px solid #e4ebf1; */
z-index: 1000;
transition: 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
border-radius: 20px;
width: auto;
height: 50px;
background-color: #fff;
line-height: 50px;
font-size: 16px;
white-space: nowrap;
/* Initial state for animation */
transform: scale(0);
animation: none;
}
/* Keyframes for the expansion effect */
@keyframes expand {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
</style>
<script>
app_content.component("native-tab-bar-component", {
template: "#template-native-tab-bar",
data() {
return {
loading: true,
last_scroll_top: 0,
slide_down: false,
ticking: false,
show_full_menu: false,
back_button_expanded: false
}
},
props: {
primary_view: String,
tabs: Array,
},
mounted(){
if( this.is_react_native_member_app ){
this.last_scroll_top = this.return_scroll_top();
window.addEventListener('scroll', this.handle_scroll);
setTimeout(() => {
this.loading = false;
}, 100);
}
},
unmounted(){
if( this.is_react_native_member_app ){
window.removeEventListener('scroll', this.handle_scroll);
}
},
methods: {
tapped_home(){
window.location.href = "/account/home";
},
tapped_more(){
this.show_full_menu = true;
},
selected_full_menu_option( option ){
this.show_full_menu = false;
this.tapped_tab_bar_item( option );
},
return_scroll_top(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
},
handle_scroll(){
if ( ! this.ticking ) {
window.requestAnimationFrame(() => {
let scrollTop = this.return_scroll_top();
let windowHeight = window.innerHeight;
let documentHeight = document.documentElement.scrollHeight;
// Prevent action if bouncing past the bottom of the page
if (scrollTop + windowHeight >= documentHeight) {
// We're at or past the bottom, so we ignore this scroll event
this.ticking = false;
return;
}
if (scrollTop > this.last_scroll_top) {
//hide tab bar
this.slide_down = true;
} else if (scrollTop < this.last_scroll_top && scrollTop >= 0) {
//show tab bar
this.slide_down = false;
}
this.last_scroll_top = scrollTop;
this.ticking = false;
});
this.ticking = true;
}
},
tapped_tab_bar_item( tab ){
updateURL( tab.key );
displayViewForUrlPath();
},
tapped_back(){
if( this.back_button_expanded ){
this.back_button_expanded = false;
window.history.back();
} else {
this.back_button_expanded = true;
}
},
},
computed: {
//we only show it when we're on one of the relevant primary views (contained in the tab bar)
//.. otherwise we should display the back button bar
tab_bar_keys(){
/*
var keys = [];
if( this.visible_tabs ){
this.visible_tabs.forEach(tab => {
keys.push( tab.key );
});
}
return keys;
*/
var keys = [];
if( this.tabs ){
this.tabs.forEach(tab => {
keys.push( tab.key );
});
}
return keys;
},
visible_tab_keys(){
var keys = [];
if( this.visible_tabs ){
this.visible_tabs.forEach(tab => {
keys.push( tab.key );
});
}
return keys;
},
more_is_active(){
//it's active if not in the visible tabs
if( this.visible_tab_keys.includes( this.primary_view ) ){
return false;
}
return true;
},
show_tab_bar(){
for (let t = 0; t < this.tab_bar_keys.length; t++) {
if( this.tab_bar_keys[t] == this.primary_view ){
return true
}
}
return false;
},
visible_tabs(){
if( this.tabs ){
return this.tabs.slice(0,4)
}
return [];
},
show_back_button(){
if( ! this.show_tab_bar && window.history.length >= 1 ){
return true;
}
return false;
},
is_react_native_member_app(){
return store.is_react_native_member_app;
}
},
})
</script></html>
<!-- club header -->
<script type="text/html" id="template-club-header">
<div
class="header ease"
:class="[
{'startOpaque': start_opaque && start_opaque != 'false' },
{'showOnMobile': mobile_only }
]"
>
<div class="innerHeader relative">
<div
class="flexNoWrap align-items-center"
style="height:68px"
>
<!-- left hand side -->
<div class="flexGrowOne">
<!-- clean data we may or may not have -->
<!-- desktop version -->
<div class="relative flexNoWrap">
<div class="smallIcon burgee left fe" style="background-image:url(https://d282wvk2qi4wzk.cloudfront.net/ce0FDZCQhN_burgee_1685800455739);border:1px solid rgba(255,255,255,0);"></div>
<h1 class="modern lessPadding hideOnMobile" style="margin-right:0px;">Wayzata Yacht Club</h1>
<a href="/" class="absoluteA"></a>
</div>
</div>
<!-- dashboard link -->
<div v-if="include_dashboard_link">
<!-- logged in user -->
<div
v-if="current_user"
class="club-header-button easeFast relative noWrap"
>
<!-- has profile picture -->
<div
class="flexNoWrap align-items-center"
v-if="current_user.get('profPicURL')"
>
<div
class="tinyIcon"
:style="{ backgroundImage: 'url(' + current_user.get('profPicURL') + ')' }"
style="margin-left:0px;border:0px;height:22px;width:22px;margin-right:8px;"
></div>
<p>Account <i class="fa-light fa-chevron-right" style="padding-left:3px;font-size:12px;"></i></p>
</div>
<!-- no profile picture -->
<p v-else>
<i
class="fa-light fa-user-circle"
style="padding-right:3px;"
></i>
Account
<i class="fa-light fa-chevron-right" style="padding-left:3px;font-size:12px;"></i>
</p>
<a class="absoluteA" href="/account" rel="nofollow"></a>
</div>
<!-- not logged in -->
<div
v-else
class="club-header-button easeFast relative"
>
<p>Account <i class="fa-light fa-chevron-right" style="padding-left:3px;font-size:12px;"></i></p>
<a class="absoluteA" href="/account" rel="nofollow"></a>
</div>
</div>
</div>
</div>
</div>
</script>
<style>
.club-header-button{
border: 1px solid #e4ebf1;
background-color: #fff;
color: rgb(106, 116, 130);;
padding-left: 15px;
padding-right: 15px;
padding-top: 8px;
padding-bottom: 8px;
line-height: 24px;
border-radius: 30px;
text-align: center;
position: absolute;
right: 30px;
top: 13px;
}
.club-header-button:hover{
color: #081333;
}
</style>
<script>
//define the component
app_content.component("club-header-component", {
template: "#template-club-header",
data() {
return {}
},
props: {
start_opaque: Boolean,
mobile_only: Boolean,
include_dashboard_link: Boolean
},
mounted(){
console.log("mounted club header")
},
methods: {
},
computed: {
current_user(){
return Parse.User.current()
}
},
});
</script>
<script>
app_content.mount('#v-content');
app_overlays.mount('#v-overlays');
</script>
</html>