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.
401 lines
9.2 KiB
401 lines
9.2 KiB
<template>
|
|
<main>
|
|
<!-- <nav>
|
|
<button class="btn btn--header" @click="openPopup">
|
|
<span>☙</span>
|
|
{{ mappedGuests.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">x</button>
|
|
<h1>this is the header</h1>
|
|
<p>this is the paragraph</p>
|
|
<!-- <pre>
|
|
{{ mappedGuests.Names.length }}
|
|
</pre> -->
|
|
<div class="buttons">
|
|
<button @click="sayYes" class="btn btn--popup">
|
|
<span>🞄</span>
|
|
{{ yesText(mappedGuests.Language, mappedGuests.Names.length) }}
|
|
<span>🞄</span>
|
|
</button>
|
|
<button @click="sayNo" class="btn btn--popup">
|
|
<span>🞄</span>
|
|
{{ noText(mappedGuests.Language, mappedGuests.Names.length) }}
|
|
<span>🞄</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: () => ({
|
|
guests: {},
|
|
allGuests: [],
|
|
isPopupVisible: false
|
|
}),
|
|
computed: {
|
|
mappedGuests () {
|
|
return this.guests && this.guests.records && this.guests.records[0] && this.guests.records[0].fields
|
|
}
|
|
},
|
|
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 }
|
|
|
|
const res2 = await fetch('https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(IsActive=1)', {
|
|
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 () {
|
|
this.guests = { ...this.guests, records: { ...this.guests.records[0], fields: { ...this.guests.records[0].fields, Status: 'maybe' } } }
|
|
|
|
fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(Code='${this.$route.params.code}')`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
|
|
},
|
|
body: this.guests
|
|
}).then((response) => {
|
|
console.log(response.status)
|
|
return response.json()
|
|
}).then(data => console.log(data))
|
|
},
|
|
sayNo () {
|
|
this.guests = { ...this.guests, records: { ...this.guests.records[0], fields: { ...this.guests.records[0].fields, Status: 'nah' } } }
|
|
|
|
fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(Code='${this.$route.params.code}')`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
|
|
},
|
|
body: this.guests
|
|
}).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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
li {
|
|
display: inline-block;
|
|
list-style-type: none;
|
|
}
|
|
|
|
li a {
|
|
background: var(--bkg);
|
|
color: var(--blue);
|
|
padding: 0.5em 1em;
|
|
border-radius: 999px;
|
|
border: 0;
|
|
display: inline-block;
|
|
font-size: 0.75rem;
|
|
}
|
|
</style>
|