kekkon/pages/index.vue

<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>