kekkon/pages/index.vue

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