finished clicks; middle of testing; not all clips finished;

pages/index.vue

@@ -1,22 +1,22 @@
 <template>
   <main>
-    <!-- <nav>
-      <button class="btn btn--header" @click="openPopup">
+    <nav>
+      <button v-if="guests && guests.fields && guests.fields.Language" class="btn btn--header" @click="openPopup">
         <span>☙</span>
-        {{ mappedGuests.Language == "en" ? "click here" : "klik hier" }}
+        {{ guests.fields.Language == "en" ? "click here" : "klik hier" }}
         <span>❧</span>
       </button>
-    </nav> -->
+    </nav>
     <!-- <pre>
       {{ guests }}
     </pre> -->
-    <!-- <ul class="test-links">
+    <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> -->
+    </ul>
     <!-- <div class="names">{{ guests.Names }}</div> -->
     <!-- <img
       class="img--bkg"
@@ -58,21 +58,18 @@
     </video>-->
     <div v-if="isPopupVisible" class="popup-wrapper">
       <div class="popup">
-        <button class="x" @click="openPopup">x</button>
+        <button class="x" @click="openPopup">🞪</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">
+          <button v-if="guests && guests.fields && guests.fields.Language" @click="sayYes" class="btn btn--popup">
             <span>🞄</span>
-            {{ yesText(mappedGuests.Language, mappedGuests.Names.length) }}
+            {{ yesText(guests.fields.Language, guests.fields.Names.length) }}
             <span>🞄</span>
           </button>
-          <button @click="sayNo" class="btn btn--popup">
+          <button v-if="guests && guests.fields && guests.fields.Language" @click="sayNo" class="btn btn--popup">
             <span>🞄</span>
-            {{ noText(mappedGuests.Language, mappedGuests.Names.length) }}
+            {{ noText(guests.fields.Language, guests.fields.Names.length) }}
             <span>🞄</span>
           </button>
         </div>
@@ -88,11 +85,6 @@ export default {
     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',
@@ -104,9 +96,9 @@ export default {
 
     const json = await res.json()
     console.log(json)
-    this.guests = { ...await json }
+    this.guests = { ...await json.records[0] }
 
-    const res2 = await fetch('https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(IsActive=1)', {
+    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',
@@ -143,30 +135,38 @@ export default {
       }
     },
     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}')`, {
+      const updates =
+      {
+        fields: {
+          Status: 'Maybe'
+        }
+      }
+      fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest/${this.guests.id}`, {
         method: 'PATCH',
         headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
+          'Content-Type': 'application/json',
           Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
         },
-        body: this.guests
+        body: JSON.stringify(updates)
       }).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}')`, {
+      const updates =
+      {
+        fields: {
+          Status: 'No'
+        }
+      }
+      fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest/${this.guests.id}`, {
         method: 'PATCH',
         headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
+          'Content-Type': 'application/json',
           Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
         },
-        body: this.guests
+        body: JSON.stringify(updates)
       }).then((response) => {
         console.log(response.status)
         return response.json()
@@ -303,6 +303,8 @@ nav {
   padding: 1rem 3rem 3rem 3rem;
   border: 1.5px solid var(--blue);
   z-index: 4;
+  display: flex;
+  flex-direction: column;
 }
 
 .popup::before {
@@ -378,10 +380,27 @@ nav {
   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.5rem;
+  gap: 0.25rem;
 }
 
 li {
@@ -392,10 +411,11 @@ li {
 li a {
   background: var(--bkg);
   color: var(--blue);
-  padding: 0.5em 1em;
+  padding: 0.25em 1em;
   border-radius: 999px;
   border: 0;
   display: inline-block;
   font-size: 0.75rem;
+  line-height: 1;
 }
 </style>