kekkon/pages/index.vue

<template>
  <main>
    <nav v-if="guests">
      <img class="mark" :src="require(`@/assets/images/si_mark.svg`)" alt="">
      <button
        v-if="guests && guests.fields && guests.fields.Language"
        class="btn btn--header"
        @click="openPopup"
      >
        <span style="transform: scaleX(-1);">❧</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
      v-if="!!guests"
      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
        v-if="!!guests"
        :src="require(`@/assets/images/bkgs/${this.$route.params.code}.mp4`)"
        type="video/mp4"
      />
    </video>

    <!-- :src="require(`@/assets/images/bkgs/${(guests && guests.fields && guests.fields.Code) ? guests.fields.Code + '.mp4' : 'pim.mp4'}`)" -->

    <div class="empty" v-if="!guests">
      What's the password?
    </div>

    <div v-if="isPopupVisible && this.$route.params.code" class="popup-wrapper">
      <div class="popup">
        <button class="x" @click="openPopup">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="icon icon-tabler icon-tabler-x"
            width="40"
            height="40"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="var(--lightblue)"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>
        <h1
          v-if="
            guests &&
            guests.fields &&
            guests.fields.Language &&
            guests.fields.Language === 'en'
          "
        >
          At long last, we have a date!
        </h1>
        <div
          v-if="
            guests &&
            guests.fields &&
            guests.fields.Language &&
            guests.fields.Language === 'en'
          "
        >
          <p>
            <strong>It took a while, but we eventually decided to cross our fingers and
            plan a transatlantic wedding.</strong>
          </p>
          <p>
            My fellow Americans, <br><br>The Netherlands is on the other
            side of the world, and air travel is no walk-in-the-park these days.
            Nonetheless: you're reading this because you're extremely important to
            me, and we would LOVE to share this beautiful little country with you, if only for a few days!
            <br><br>
            -S
          </p>
          <p>
            Mark your calendars: <em>August 18th, 2022</em>. Stay tuned for lots more details.
          </p>
        </div>
        <h1
          v-if="
            guests &&
            guests.fields &&
            guests.fields.Language &&
            guests.fields.Language !== 'en'
          "
        >
          Wij gaan de liefde vieren
        </h1>
        <div
          v-if="
            guests &&
            guests.fields &&
            guests.fields.Language &&
            guests.fields.Language !== 'en'
          "
        >
          <p
            v-if="
              guests &&
              guests.fields &&
              guests.fields.Names &&
              guests.fields.Names.length > 1
            "
          >
            Kunnen we met jullie proosten op onze bruiloft op 18 augustus 2022?
          </p>
          <p
            v-if="
              guests &&
              guests.fields &&
              guests.fields.Names &&
              guests.fields.Names.length === 1
            "
          >
            Kunnen we met jou proosten op onze bruiloft op 18 augustus 2022?
          </p>
        </div>
        <div class="buttons">
          <button
            v-if="guests && guests.fields && guests.fields.Language"
            @click="sayYes"
            :class="[
              'btn',
              'btn--popup',
              'btn--yes',
              { 'btn--selected': guests.fields.Status === 'Maybe' },
            ]"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="icon icon-tabler icon-tabler-check"
              width="40"
              height="40"
              viewBox="0 0 24 24"
              stroke-width="3"
              stroke="#ffffff"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M5 12l5 5l10 -10" />
            </svg>
            {{ yesText(guests.fields.Language, guests.fields.Names.length) }}
          </button>
          <button
            v-if="guests && guests.fields && guests.fields.Language"
            @click="sayNo"
            :class="[
              'btn',
              'btn--popup',
              'btn--no',
              { 'btn--selected': guests.fields.Status === 'No' },
            ]"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="icon icon-tabler icon-tabler-x"
              width="40"
              height="40"
              viewBox="0 0 24 24"
              stroke-width="3"
              stroke="#ffffff"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <line x1="18" y1="6" x2="6" y2="18" />
              <line x1="6" y1="6" x2="18" y2="18" />
            </svg>
            {{ noText(guests.fields.Language, guests.fields.Names.length) }}
          </button>
        </div>
        <small
          v-if="
            guests &&
            guests.fields &&
            guests.fields.Language &&
            guests.fields.Language === 'en'
          "> ~ official invitation to follow ~ </small>
        <small
          v-if="
            guests &&
            guests.fields &&
            guests.fields.Language &&
            guests.fields.Language !== 'en'
          "> ~ de officiële uitnodiging volgt later ~ </small>
          <img class="mark" :src="require(`@/assets/images/si_mark2.svg`)" alt="">
      </div>
    </div>
  </main>
</template>

<script>
export default {
  data: () => ({
    guests: null,
    allGuests: [],
    isPopupVisible: false,
    fetchFields: [
      'Names',
      'Language',
      'Status',
      'Code'
    ]
  }),
  async fetch () {
    if (this.$route.params.code) {
      const res = await fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(Code='${this.$route.params.code}')${this.fetchFieldsString}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
        }
      })

      const json = await res.json()

      if (await json.records[0]) {
        this.guests = { ...await json.records[0] }
        console.log(this.guests)
      }
    }

    // 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' : 'ik ben') + ' er zeker weten niet bij. 😞'
      }
    },
    async sayYes () {
      const updates =
      {
        fields: {
          Status: 'Maybe'
        }
      }

      const res = await 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)
      })

      const json = await res.json()
      this.guests = { ...await json }
    },
    async sayNo () {
      const updates =
      {
        fields: {
          Status: 'No'
        }
      }
      const res = await 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)
      })

      const json = await res.json()
      this.guests = { ...await json }
    }
  },
  computed: {
    fetchFieldsString () {
      const vm = this
      const array = vm.fetchFields.map((field) => {
        return '&fields[]=' + field
      })
      return array.join('')
    }
  }
}
</script>

<style>
html {
  font-size: max(2vmin, 12pt);
  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: 2.5rem;
  font-family: "kingthings_petrockregular", "Times New Roman", Times, serif;
  margin: 1rem 0 0 0;
  text-align: center;
}

p {
  font-size: 1rem;
}

.img--bkg {
  width: 100vw;
  object-fit: cover;
  height: 100vh;
}

.empty {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bkg);
  color: var(--blue);
  position: absolute;
}

.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;
  left: 2rem;
  right: 2rem;
  top: 2rem;
  display: flex;
  gap: 1rem;
  z-index: 2;
  justify-content: space-between;
}

.popup-wrapper {
  position: fixed;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  overflow-y: auto;
  overflow-x: hidden;
}

.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;
  max-width: 60ch;
  align-items: center;
  margin-top: 10vh;
}

small {
  font-size: 1rem;
}

.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;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.btn--header span {
  font-size: 1.5rem;
  font-family: 'Times New Roman', Times, serif;
}

.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 {
  margin: 2rem 0 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  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 {
  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;
  gap: 1rem;
  text-align: left;
}

.btn--popup svg {
  height: 2rem;
  width: 2rem;
}

.btn--popup span:first-child {
  display: inline-block;
  margin-right: 0.8em;
}

.btn--popup span:last-child {
  display: inline-block;
  margin-left: 0.8em;
}

.btn--yes:hover {
  background: green;
}

.btn--no:hover {
  background: darkred;
}

.btn--selected.btn--yes {
  background: green;
}

.btn--selected.btn--no {
  background: darkred;
}

.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: 0;
  border-radius: 999px;
}

.x:hover {
  color: var(--b2);
  background: var(--b1);
}

ul {
  display: flex;
  gap: 0.25rem;
  flex-flow: column wrap;
  height: 90vh;
}

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

.mark {
  height: 3rem;
  width: 3rem;
  opacity: 0.5;
}

.popup .mark {
  margin-top: 2rem;
  opacity: 1;
}
</style>