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.
 
 
 
 

421 lines
9.3 KiB

<template>
<main>
<nav>
<button v-if="guests && guests.fields && guests.fields.Language" class="btn btn--header" @click="openPopup">
<span>☙</span>
{{ guests.fields.Language == "en" ? "click here" : "klik hier" }}
<span>❧</span>
</button>
</nav>
<!-- <pre>
{{ guests }}
</pre> -->
<ul class="test-links">
<li v-for="guest in allGuests" :key="guest.code">
<nuxt-link :to="'/' + guest.code">{{
guest.names.join(" & ")
}}</nuxt-link>
</li>
</ul>
<!-- <div class="names">{{ guests.Names }}</div> -->
<!-- <img
class="img--bkg"
:src="require(`@/assets/images/bkgs/${this.$route.params.code}.gif`)"
alt="wrongo-and-peanut"
/> -->
<video
class="img--bkg"
playsinline
autoplay
loop
muted
id="bgvid"
:poster="require(`@/assets/images/bkgs/poster.png`)"
>
<!-- :poster="require(`@/assets/images/bkgs/poster.png`)" -->
<!-- <source src="polina.webm" type="video/webm"> -->
<source
:src="require(`@/assets/images/bkgs/${this.$route.params.code}.mp4`)"
type="video/mp4"
/>
</video>
<!-- <video
class="img--bkg"
playsinline
autoplay
loop
poster="https://assets.codepen.io/6093409/river.mp4"
id="bgvid"
>-->
<!-- <source
:src="require(`@/assets/images/bkgs/${this.$route.params.code}.webm`)"
type="video/webm"
/>
<source
:src="require(`@/assets/images/bkgs/${this.$route.params.code}.mp4`)"
type="video/mp4"
/>
</video>-->
<div v-if="isPopupVisible" class="popup-wrapper">
<div class="popup">
<button class="x" @click="openPopup">🞪</button>
<h1>this is the header</h1>
<p>this is the paragraph</p>
<div class="buttons">
<button v-if="guests && guests.fields && guests.fields.Language" @click="sayYes" class="btn btn--popup">
<span>🞄</span>
{{ yesText(guests.fields.Language, guests.fields.Names.length) }}
<span>🞄</span>
</button>
<button v-if="guests && guests.fields && guests.fields.Language" @click="sayNo" class="btn btn--popup">
<span>🞄</span>
{{ noText(guests.fields.Language, guests.fields.Names.length) }}
<span>🞄</span>
</button>
</div>
</div>
</div>
</main>
</template>
<script>
export default {
data: () => ({
guests: {},
allGuests: [],
isPopupVisible: false
}),
async fetch () {
const res = await fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(Code='${this.$route.params.code}')`, {
method: 'GET',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
}
})
const json = await res.json()
console.log(json)
this.guests = { ...await json.records[0] }
const res2 = await fetch('https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(IsActive=1)&sort[0][field]=Code&sort[0][direction]=asc', {
method: 'GET',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
}
})
const json2 = await res2.json()
console.log(json2)
const guestData = [...await json2 && json2.records]
this.allGuests = await guestData.map((guest) => {
return {
code: guest.fields.Code,
names: guest.fields.Names
}
})
},
methods: {
openPopup () {
this.isPopupVisible = !this.isPopupVisible
},
yesText (lang, count) {
if (lang === 'en') {
return (count > 1 ? 'We' : 'I') + ' will try to make it! 🥳'
} else {
return (count > 1 ? 'Wij zijn ' : 'Ik ben') + ' er (waarschijnlijk) bij! 🥳'
}
},
noText (lang, count) {
if (lang === 'en') {
return 'Sorry, ' + (count > 1 ? 'we' : 'I') + ' definitely can\'t make it. 😞'
} else {
return 'Helaas, ' + (count > 1 ? 'wij zijn' : 'I') + ' er zeker weten niet bij. 😞'
}
},
sayYes () {
const updates =
{
fields: {
Status: 'Maybe'
}
}
fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest/${this.guests.id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
},
body: JSON.stringify(updates)
}).then((response) => {
console.log(response.status)
return response.json()
}).then(data => console.log(data))
},
sayNo () {
const updates =
{
fields: {
Status: 'No'
}
}
fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest/${this.guests.id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
},
body: JSON.stringify(updates)
}).then((response) => {
console.log(response.status)
return response.json()
}).then(data => console.log(data))
}
}
}
</script>
<style>
html {
font-size: 2vmin;
font-family: "Times New Roman", Times, serif;
color: var(--blue);
}
:root {
--b1: #648bc8;
--b2: #5b6ba6;
--blue: var(--b2);
--lightblue: #b2c6eb;
--bkg: #dfebfe;
}
@font-face {
font-family: "kingthings_petrockregular";
src: url("~assets/fonts/Kingthings_Petrock-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
body {
margin: 0;
}
main {
width: 100vw;
height: 100vh;
background: var(--bkg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-size: 3rem;
font-family: "kingthings_petrockregular", "Times New Roman", Times, serif;
}
p {
font-size: 1.5rem;
}
.img--bkg {
width: 100vw;
object-fit: cover;
height: 100vh;
}
.names {
position: fixed;
padding: 2rem;
aspect-ratio: 1;
background: var(--bkg);
color: var(--blue);
font-size: 2rem;
border-radius: 999px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.names::before {
content: "";
border: 5px dotted var(--blue);
position: absolute;
border-radius: 999px;
width: 90%;
aspect-ratio: 1;
}
.names::after {
content: "";
border: 5px dashed var(--blue);
position: absolute;
border-radius: 999px;
width: 80%;
aspect-ratio: 1;
}
.test-links {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 2;
}
nav {
position: fixed;
right: 2rem;
top: 2rem;
display: flex;
gap: 1rem;
z-index: 2;
}
.popup-wrapper {
position: fixed;
z-index: 2;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.popup-wrapper::after {
content: "";
position: absolute;
z-index: 3;
width: calc(100vw + 20px);
height: calc(100vh + 20px);
backdrop-filter: blur(10px);
pointer-events: none;
}
.popup {
background: linear-gradient(to right bottom, var(--bkg), var(--lightblue));
border-radius: 0.5rem;
position: relative;
padding: 1rem 3rem 3rem 3rem;
border: 1.5px solid var(--blue);
z-index: 4;
display: flex;
flex-direction: column;
}
.popup::before {
content: "";
position: absolute;
border-radius: 0.5rem;
border: 2px dotted var(--blue);
top: calc(0.2em);
left: 0.2em;
bottom: calc(0.2em);
right: 0.2em;
pointer-events: none;
}
.btn--header {
background: linear-gradient(to right bottom, var(--bkg), var(--lightblue));
color: var(--blue);
padding: 0.5rem 1rem;
font-size: 1.5rem;
border-radius: 0.2em 1em 0.2em 1em;
font-family: "kingthings_petrockregular", "Times New Roman", Times, serif;
font-weight: 800;
border: 1.5px solid var(--blue);
transition: all 0.3s;
cursor: pointer;
position: relative;
text-transform: capitalize;
}
.btn--header:hover {
background: linear-gradient(to right bottom, var(--bkg), var(--blue));
}
.btn--header::before {
content: "";
position: absolute;
border-radius: 0.2em 0.9em 0.2em 0.9em;
border: 2px dotted var(--blue);
top: calc(0.2em);
left: 0.2em;
bottom: calc(0.2em);
right: 0.2em;
}
.buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.btn--popup {
padding: 0.5em 1em;
font-size: 1.5rem;
border-radius: 999rem;
border: none;
color: var(--bkg);
background: linear-gradient(to right bottom, var(--b1), var(--b2));
display: flex;
align-items: center;
font-family: "kingthings_petrockregular", "Times New Roman", Times, serif;
line-height: 1;
cursor: pointer;
}
.btn--popup span:first-child {
display: inline-block;
margin-right: 0.8em;
}
.btn--popup span:last-child {
display: inline-block;
margin-left: 0.8em;
}
.x {
background: transparent;
border: 0;
color: var(--b1);
font-size: 2rem;
align-self: flex-end;
margin-right: -1.5rem;
transition: all 0.2s;
line-height: 1;
border-radius: 999px;
}
.x:hover {
color: var(--b2);
background: var(--b1);
}
ul {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
li {
display: inline-block;
list-style-type: none;
}
li a {
background: var(--bkg);
color: var(--blue);
padding: 0.25em 1em;
border-radius: 999px;
border: 0;
display: inline-block;
font-size: 0.75rem;
line-height: 1;
}
</style>