From 16dd39367dde8c3a09dbc3ad9fdf6fda4931c50d Mon Sep 17 00:00:00 2001
From: Ilgaz Er <er.ilgaz@gmail.com>
Date: Sun, 12 Jan 2025 15:35:36 +0100
Subject: [PATCH 1/3] Revert "Prepare for bar bookings EOL"

This reverts commit b33a09c3
---
 dwhdelft.nl/components/layout/Header.vue      |   4 +
 .../components/pages/book/BookForm.vue        | 266 ++++++++++++++++++
 dwhdelft.nl/pages/book.vue                    |  56 ++++
 outsite.nl/components/layout/Header.vue       |   4 +
 outsite.nl/components/pages/home/MoreDWH.vue  |   4 +-
 shared/public/_redirects                      |  11 +-
 6 files changed, 337 insertions(+), 8 deletions(-)
 create mode 100644 dwhdelft.nl/components/pages/book/BookForm.vue
 create mode 100644 dwhdelft.nl/pages/book.vue

diff --git a/dwhdelft.nl/components/layout/Header.vue b/dwhdelft.nl/components/layout/Header.vue
index 8bc6bc5f..b3c8ba77 100644
--- a/dwhdelft.nl/components/layout/Header.vue
+++ b/dwhdelft.nl/components/layout/Header.vue
@@ -9,6 +9,8 @@ en:
       url: mixup
     - title: Jong&Out
       url: jongenout
+    - title: EatingOUT
+      url: book
     - title: Education
       url: education
     - title: Andersblad
@@ -25,6 +27,8 @@ nl:
       url: mixup
     - title: Jong&Out
       url: jongenout
+    - title: EatingOUT
+      url: book
     - title: Voorlichting
       url: education
     - title: Andersblad
diff --git a/dwhdelft.nl/components/pages/book/BookForm.vue b/dwhdelft.nl/components/pages/book/BookForm.vue
new file mode 100644
index 00000000..85559b0e
--- /dev/null
+++ b/dwhdelft.nl/components/pages/book/BookForm.vue
@@ -0,0 +1,266 @@
+<i18n lang="yaml">
+en:
+  title: Reservation
+  event: Event
+  fully_booked: Fully booked
+  no_events: There are no events scheduled at the moment. Please come back later.
+  thank_you:
+    Thank you for making a reservation! You will receive an e-mail with your proof of reservation. If you need to
+    cancel, you can do so via the e-mail you will receive.
+  another_booking: Make another booking
+  disclaimer:
+    By submitting this form you allow DWH to save your information and to process it. Your information will only be
+    used to check reservations and for the possibility to get in touch with you. If you have more questions, please
+    contact us via the information below.
+  oops: Oops.
+nl:
+  title: Reserveren
+  event: Evenement
+  fully_booked: Niet meer beschikbaar
+  no_events: Er zijn op dit moment geen evenementen gepland. Kom later terug.
+  thank_you:
+    Bedankt voor het reserveren! Je ontvangt een e-mail met je reserveringsbewijs. Lukt het je uiteindelijk toch
+    niet om aanwezig te zijn? Via de mail die je ontvangt kun je je reservering annuleren.
+  another_booking: Maak nog een reservering
+  disclaimer: Bij het verzenden van dit formulier geef je DWH toestemming om je gegevens op te slaan en te verwerken. Je
+    gegevens worden alleen gebruikt voor het controleren van reserveringen en voor de mogelijkheid om contact
+    met je op te nemen. Neem voor vragen contact op via onderstaande contactgegevens.
+  oops: Oeps.
+</i18n>
+
+<script setup>
+import { IconTime } from '@iconify-prerendered/vue-zondicons'
+
+const { t } = useT()
+
+const apiUrl = 'https://reserveer.dwhdelft.nl/api'
+
+const DINNER_TEAMS = [
+  { emoji: '🍝', name: 'Kitchen Helpers', description: 'You help the chef prepare the food' },
+  { emoji: '⏰', name: 'In a hurry', description: 'You will help out another time' },
+  { emoji: '🧽 ', name: 'Washing up', description: 'You clean the dishes afterwards' },
+  { emoji: '👩‍🍳', name: 'Cookies', description: 'You are the main chef' },
+  { emoji: '🍻', name: 'Bartender', description: 'You serve the drinks' },
+]
+const DINNER_RESTRICTIONS = ['Meat', 'Fish', 'Seafood', 'Cheese', 'Nuts', 'Dairy']
+
+const state = ref('start')
+const form = ref({
+  name: '',
+  email: '',
+  ggd_consent: false,
+  phone_number: '',
+  event_id: undefined,
+  twoseat: false,
+  custom_fields: {},
+})
+const dinnerForm = ref({
+  team: DINNER_TEAMS[0],
+  diet: [],
+  otherDiet: '',
+})
+
+const events = ref([])
+const fetchEvents = async () => {
+  const response = await fetch(`${apiUrl}/events`, { method: 'GET' })
+  const { data } = await response.json()
+  events.value = data
+}
+onMounted(() => fetchEvents())
+
+const selectedEvent = ref({})
+const selectEvent = (event) => {
+  if (event.available_seats === 0) {
+    return
+  }
+  form.value.event_id = event.id
+  selectedEvent.value = event
+}
+
+const toggleRestriction = (restriction) => {
+  const index = dinnerForm.value.diet.indexOf(restriction)
+  if (index >= 0) {
+    dinnerForm.value.diet.splice(index, 1)
+  } else {
+    dinnerForm.value.diet.push(restriction)
+  }
+}
+
+const errors = ref([])
+const submit = async () => {
+  errors.value = []
+
+  if (form.value.event_id === undefined) {
+    errors.value.push('You have to select one of the timeslots.')
+    return
+  }
+
+  if (selectedEvent.value.event_type_id === 'dinner') {
+    form.value.custom_fields = {
+      team: dinnerForm.value.team.name,
+      diet: [...dinnerForm.value.diet, ...(dinnerForm.value.otherDiet.length > 0 ? [dinnerForm.value.otherDiet] : [])],
+    }
+  }
+
+  state.value = 'loading'
+
+  const response = await fetch(`${apiUrl}/bookings`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+    body: JSON.stringify(form.value),
+  })
+
+  const result = await response.json()
+
+  rootElement.value.scrollIntoView({ behavior: 'smooth' })
+
+  if (response.ok) {
+    state.value = 'finished'
+  } else {
+    state.value = 'start'
+    if (result.errors) {
+      errors.value = Object.values(result.errors).flat()
+    } else {
+      alert('An error occurred. If this keeps happening, please send us an email.')
+    }
+  }
+}
+
+const formatTime = (time) => {
+  const date = new Date(time)
+  return date.toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })
+}
+
+const formatDate = (time) => {
+  const date = new Date(time)
+  return date.toLocaleDateString('nl-NL', { weekday: 'long', day: 'numeric', month: 'long' })
+}
+
+const rootElement = ref(null)
+</script>
+
+<template>
+  <div ref="rootElement" class="bg-white p-8 rounded-lg shadow-xl">
+    <ElementsIconCircle class="p-5 mb-8 inline-block">
+      <IconTime class="w-6 h-6" />
+    </ElementsIconCircle>
+
+    <h2 class="text-xl font-bold mb-4 text-brand-450 uppercase tracking-wider" v-text="t('title')" />
+
+    <ElementsFormSuccessMessage
+      v-if="state === 'finished'"
+      class="!bg-brand-100 mb-6"
+      :title="$t('forms.success.heading')"
+      :subtitle="t('thank_you')"
+    />
+
+    <form v-show="state == 'start' || state == 'loading'" @submit.prevent="submit">
+      <div v-for="error in errors" :key="error" class="bg-red-200 border-1 border-red-400 rounded p-2 mb-4">
+        <strong>{{ t('oops') }}</strong>
+        {{ error }}
+      </div>
+
+      <ElementsFormElement name="name" required>
+        <ElementsFormTextInput v-model="form.name" gray />
+      </ElementsFormElement>
+
+      <ElementsFormElement name="email" required>
+        <ElementsFormTextInput v-model="form.email" type="email" gray />
+      </ElementsFormElement>
+
+      <ElementsFormElement :label="t('event')" name="event_id" required>
+        <div class="flex flex-wrap">
+          <div v-if="events.length === 0" class="bg-brand-100 rounded-lg w-full p-4">
+            {{ t('no_events') }}
+          </div>
+          <div v-for="event in events" :key="event.id" class="w-full">
+            <div
+              :class="[
+                form.event_id == event.id ? 'border-2 border-brand-450' : '',
+                event.available_seats == 0 ? 'text-gray-400' : 'cursor-pointer',
+              ]"
+              class="bg-brand-100 rounded-md mt-2 mr-2 shadow overflow-hidden"
+              @click="selectEvent(event)"
+            >
+              <div
+                :class="event.available_seats <= 0 ? 'bg-brand-200 text-brand-300' : 'text-white bg-brand-450'"
+                class="px-3 py-1 font-bold"
+                v-text="event.name"
+              />
+              <div class="px-3 py-2">
+                <div class="capitalize mb-1 font-sembold" v-text="formatDate(event.start)" />
+                <div class="md:flex space-y-2 md:space-y-0 md:space-x-2">
+                  <div class="bg-white px-2 py-1 rounded inline-flex items-center">
+                    <IconTime class="w-4 h-4 mr-2" />
+                    {{ formatTime(event.start) }} - {{ formatTime(event.end) }}
+                  </div>
+                  <div v-if="event.available_seats <= 0" class="bg-brand-450 text-white px-2 py-1 rounded">
+                    {{ t('fully_booked') }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ElementsFormElement>
+
+      <ElementsFormElement v-if="selectedEvent.event_type_id === 'dinner'" label="Team" name="team" required>
+        <div class="md:flex flex-wrap -mx-1">
+          <div v-for="team in DINNER_TEAMS" :key="team.name" class="md:w-1/2 p-1">
+            <div
+              :class="[
+                team.name === dinnerForm.team.name ? 'bg-brand-400 text-white' : 'bg-brand-100 hover:bg-brand-200',
+                'rounded px-3 py-2 tracking-wider flex items-center cursor-pointer shadow',
+              ]"
+              @click="dinnerForm.team = team"
+            >
+              <span class="mr-3">{{ team.emoji }}</span>
+              {{ team.name }}
+            </div>
+          </div>
+        </div>
+        <p class="mt-4 px-3 py-3 rounded shadow text-gray-500">
+          <span class="mr-3">{{ dinnerForm.team.emoji }}</span>
+          {{ dinnerForm.team.description }}
+        </p>
+      </ElementsFormElement>
+
+      <ElementsFormElement v-if="selectedEvent.event_type_id === 'dinner'" label="I don't eat..." name="diet">
+        <div class="space-y-2">
+          <div class="grid grid-cols-3 gap-2">
+            <div
+              v-for="restriction in DINNER_RESTRICTIONS"
+              :key="restriction"
+              :class="[
+                dinnerForm.diet.includes(restriction) ? 'bg-brand-400 text-white' : 'bg-brand-100 hover:bg-brand-200',
+                'rounded px-3 py-1 tracking-wider text-center cursor-pointer shadow',
+              ]"
+              @click="toggleRestriction(restriction)"
+              v-text="restriction"
+            />
+          </div>
+          <div
+            :class="[
+              dinnerForm.otherDiet.length > 0 ? 'bg-brand-400 text-white' : 'bg-brand-100 hover:bg-brand-200',
+              'rounded px-1 py-2 tracking-wider flex-1 flex items-center cursor-pointer h-full shadow',
+            ]"
+          >
+            <div class="px-2">Other:</div>
+            <ElementsFormTextInput
+              v-model="dinnerForm.otherDiet"
+              type="text"
+              class="mr-2 inline text-black"
+              placeholder="Other Restrictions"
+            />
+          </div>
+        </div>
+      </ElementsFormElement>
+
+      <p class="text-sm mb-4" v-text="t('disclaimer')" />
+
+      <ElementsPrimaryButton :disabled="state === 'loading'" type="submit">
+        {{ state === 'loading' ? t('forms.buttons.loading') : t('forms.buttons.submit') }}
+      </ElementsPrimaryButton>
+    </form>
+  </div>
+</template>
diff --git a/dwhdelft.nl/pages/book.vue b/dwhdelft.nl/pages/book.vue
new file mode 100644
index 00000000..0f003225
--- /dev/null
+++ b/dwhdelft.nl/pages/book.vue
@@ -0,0 +1,56 @@
+<i18n lang="yaml">
+en:
+  title: Reservations
+  intro:
+    title: Welcome!
+    body: |
+      For some of our activities, we kindly ask you to make a reservation.
+      On this page, you can book a spot at one of our events.
+      We will confirm your reservation by email.
+      In case you're not able to join the event, please cancel the reservation through the cancelation link in the confirmation email.
+  title_label: Events
+  canceled: Your reservation is cancelled. If you want, you can make a new reservation down below.
+nl:
+  title: Reserveren
+  intro:
+    title: Welkom!
+    body: |
+      Voor sommige van onze activiteiten vragen we je vooraf te reserveren.
+      Op deze pagina kun je je reservering maken.
+      Je krijgt per e-mail een bevestiging van je reservering.
+      Mocht je onverhoopt toch niet kunnen komen, dan vragen we je je vriendelijk je reservering weer te annuleren via de link in de bevestigingsmail.
+  title_label: Events
+  canceled: Je reservering is geannuleerd. Indien gewenst kun je hieronder een nieuwe reservering plaatsen.
+</i18n>
+
+<script setup>
+import { IconInformationOutline } from '@iconify-prerendered/vue-zondicons'
+
+const { t } = useT()
+
+const route = useRoute()
+</script>
+
+<template>
+  <LayoutSmallHeader bg="bg-brand-450">{{ t('title') }}</LayoutSmallHeader>
+
+  <section class="bg-brand-450 relative">
+    <ElementsContainer class="lg:flex py-8">
+      <div class="flex-1 lg:pr-16">
+        <div v-if="route.query.canceled" class="bg-brand-100 rounded p-4 text-lg flex items-center mb-6 space-x-4">
+          <ElementsIconCircle class="p-5">
+            <IconInformationOutline class="w-6 h-6" />
+          </ElementsIconCircle>
+          <h4 class="text-xl leading-tight" v-text="t('canceled')" />
+        </div>
+
+        <h1 class="text-6xl text-white font-bold mb-6" v-text="t('intro.title')" />
+        <p class="text-lg leading-normal text-white" v-text="t('intro.body')" />
+      </div>
+
+      <div class="lg:w-1/2">
+        <PagesBookForm class="lg:-mt-72" />
+      </div>
+    </ElementsContainer>
+  </section>
+</template>
diff --git a/outsite.nl/components/layout/Header.vue b/outsite.nl/components/layout/Header.vue
index 2f653bd9..8455c125 100644
--- a/outsite.nl/components/layout/Header.vue
+++ b/outsite.nl/components/layout/Header.vue
@@ -9,6 +9,8 @@ en:
       url: committees
     - title: Testimonials
       url: testimonials
+    - title: EatingOUT
+      url: 'https://dwhdelft.nl/book'
     - title: Contact
       url: '#contact'
   goto: Go to
@@ -22,6 +24,8 @@ nl:
       url: committees
     - title: Ervaringen
       url: testimonials
+    - title: EatingOUT
+      url: 'https://dwhdelft.nl/book'
     - title: Contact
       url: '#contact'
   goto: Ga naar
diff --git a/outsite.nl/components/pages/home/MoreDWH.vue b/outsite.nl/components/pages/home/MoreDWH.vue
index a85e57e2..7b9cf19a 100644
--- a/outsite.nl/components/pages/home/MoreDWH.vue
+++ b/outsite.nl/components/pages/home/MoreDWH.vue
@@ -29,7 +29,7 @@ en:
       description: |
         On Mondays we gather around the dinner table to enjoy a delicious meal cooked by one of our
         members, sometimes with an activity afterwards.
-      link: https://dwhdelft.nl/eatingout
+      link: https://dwhdelft.nl/book
       image: eatingout
 nl:
   description: |
@@ -61,7 +61,7 @@ nl:
       description: |
         Elke maandagavond zitten we gezellig rond de eettafel om van een maaltijd te genieten, bereid door
         één van onze leden, met soms een activiteit achteraf.
-      link: https://dwhdelft.nl/eatingout
+      link: https://dwhdelft.nl/book
       image: eatingout
 </i18n>
 
diff --git a/shared/public/_redirects b/shared/public/_redirects
index d4cad37f..4856e837 100644
--- a/shared/public/_redirects
+++ b/shared/public/_redirects
@@ -8,7 +8,6 @@
 /bar-responsible https://docs.google.com/document/d/1v8OMaRUi7ar5eoaUxxJlJ2sVizO54yP01tsn7NhN0v8/edit?usp=sharing
 /beautysignup https://forms.gle/9buQFZCjkCzEAjDG6
 /bingo https://bingo.outsite.nl
-/book https://dwhdelft.nl
 /cah http://vm.sharwinbobde.com:8080/cah/
 /cantus https://forms.gle/1movAQRkCbfm32QS7
 /chatgroepen https://dwhdelft.nl/chatgroups
@@ -21,7 +20,7 @@
 /discord https://discord.gg/RDwtnRK
 /dragdinnershow https://www.ticketkantoor.nl/shop/dragdinnershow
 /drive-common https://drive.google.com/drive/folders/1AerXTvkRZu1J7Brt-eookXvbOHJQuT4V
-/eatingout https://docs.google.com/forms/d/e/1FAIpQLScc8iucZVSq2_jAG2SrW5Ib8XuZQ_uaipcMzoqeXNOBiRKyxQ/viewform
+/eatingout https://dwhdelft.nl/book
 /events.ics https://calendar.google.com/calendar/ical/dwhdelft.nl_st9n90454d4r9ps5alm2vdjobo%40group.calendar.google.com/public/basic.ics
 /eventsgooglecalendar https://calendar.google.com/calendar/u/1?cid=ZHdoZGVsZnQubmxfc3Q5bjkwNDU0ZDRyOXBzNWFsbTJ2ZGpvYm9AZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ
 /fake-alv https://youtu.be/vTVfhlkrnxE
@@ -62,8 +61,8 @@
 /pride-boat https://forms.gle/aigF33BHLVXbnUJR8
 /protocol https://docs.google.com/document/d/1wKbk5_DnEJnF2DNBinUyBWCICEogRnUs_VWS60juqNg/
 /register https://docs.google.com/forms/d/e/1FAIpQLScP0Pu7Ja7_maNPiGI9Fqc2z_PbKt6faoXl6TwleYJ4eShHjA/viewform
-/reserveer https://dwhdelft.nl
-/reserveren https://dwhdelft.nl
+/reserveer https://dwhdelft.nl/book
+/reserveren https://dwhdelft.nl/book
 /reunieaanmeldingen https://docs.google.com/spreadsheets/d/1Cuini2RdfwHp3sQSzqTaPMP2mrW4WMIsKIeFowuCkpE/edit?usp=sharing
 /review https://docs.google.com/forms/d/e/1FAIpQLSeOvE7kHgjnLIuSOwW5DpcIqtRah9alPnZQXanhvZ34Fu9HNg/viewform
 /sewing-workshop https://docs.google.com/forms/d/e/1FAIpQLSfw5OA_SnoW75pF1SKS68oaoMYNTsSb0wVC2ori2nWvSYPs9Q/viewform?embedded=true
@@ -73,7 +72,7 @@
 /song https://www.youtube.com/watch?v=DjZtKkhZtOE
 /sponsorkliks https://www.sponsorkliks.com/partners.php?club=4338
 /sportsparty https://www.facebook.com/events/287302566914776
-/studieplekken /
+/studieplekken /book
 /survey https://forms.gle/XjVmWY7LyApGgdPC9
 /table https://reserveer.dwhdelft.nl/visitor
 /tafel https://reserveer.dwhdelft.nl/visitor
@@ -84,7 +83,7 @@
 /vertrouwenspersonen https://dwhdelft.nl/lets-talk
 /volunqueers https://docs.google.com/spreadsheets/d/1FTK74hMFVRL2j1opFAi-RCeZTooJrNfnG3dzCQFddOU/edit#gid=0
 /vrijwilligersprijs /vrijwilligersprijzen
-/weekvandeontmoetingdiner /
+/weekvandeontmoetingdiner /book
 /welcome https://reserveer.dwhdelft.nl/visitor/welcome
 /welkom https://reserveer.dwhdelft.nl/visitor/welcome
 /whatsapp https://wa.me/0031637560270

From d6c4f28a6948d4e68c3b17a33f61984af7113273 Mon Sep 17 00:00:00 2001
From: Ilgaz Er <er.ilgaz@gmail.com>
Date: Sun, 12 Jan 2025 17:20:10 +0100
Subject: [PATCH 2/3] add new booking system

---
 .../components/pages/book/BookForm.vue        | 266 ------------------
 dwhdelft.nl/pages/book.vue                    |  22 +-
 2 files changed, 16 insertions(+), 272 deletions(-)
 delete mode 100644 dwhdelft.nl/components/pages/book/BookForm.vue

diff --git a/dwhdelft.nl/components/pages/book/BookForm.vue b/dwhdelft.nl/components/pages/book/BookForm.vue
deleted file mode 100644
index 85559b0e..00000000
--- a/dwhdelft.nl/components/pages/book/BookForm.vue
+++ /dev/null
@@ -1,266 +0,0 @@
-<i18n lang="yaml">
-en:
-  title: Reservation
-  event: Event
-  fully_booked: Fully booked
-  no_events: There are no events scheduled at the moment. Please come back later.
-  thank_you:
-    Thank you for making a reservation! You will receive an e-mail with your proof of reservation. If you need to
-    cancel, you can do so via the e-mail you will receive.
-  another_booking: Make another booking
-  disclaimer:
-    By submitting this form you allow DWH to save your information and to process it. Your information will only be
-    used to check reservations and for the possibility to get in touch with you. If you have more questions, please
-    contact us via the information below.
-  oops: Oops.
-nl:
-  title: Reserveren
-  event: Evenement
-  fully_booked: Niet meer beschikbaar
-  no_events: Er zijn op dit moment geen evenementen gepland. Kom later terug.
-  thank_you:
-    Bedankt voor het reserveren! Je ontvangt een e-mail met je reserveringsbewijs. Lukt het je uiteindelijk toch
-    niet om aanwezig te zijn? Via de mail die je ontvangt kun je je reservering annuleren.
-  another_booking: Maak nog een reservering
-  disclaimer: Bij het verzenden van dit formulier geef je DWH toestemming om je gegevens op te slaan en te verwerken. Je
-    gegevens worden alleen gebruikt voor het controleren van reserveringen en voor de mogelijkheid om contact
-    met je op te nemen. Neem voor vragen contact op via onderstaande contactgegevens.
-  oops: Oeps.
-</i18n>
-
-<script setup>
-import { IconTime } from '@iconify-prerendered/vue-zondicons'
-
-const { t } = useT()
-
-const apiUrl = 'https://reserveer.dwhdelft.nl/api'
-
-const DINNER_TEAMS = [
-  { emoji: '🍝', name: 'Kitchen Helpers', description: 'You help the chef prepare the food' },
-  { emoji: '⏰', name: 'In a hurry', description: 'You will help out another time' },
-  { emoji: '🧽 ', name: 'Washing up', description: 'You clean the dishes afterwards' },
-  { emoji: '👩‍🍳', name: 'Cookies', description: 'You are the main chef' },
-  { emoji: '🍻', name: 'Bartender', description: 'You serve the drinks' },
-]
-const DINNER_RESTRICTIONS = ['Meat', 'Fish', 'Seafood', 'Cheese', 'Nuts', 'Dairy']
-
-const state = ref('start')
-const form = ref({
-  name: '',
-  email: '',
-  ggd_consent: false,
-  phone_number: '',
-  event_id: undefined,
-  twoseat: false,
-  custom_fields: {},
-})
-const dinnerForm = ref({
-  team: DINNER_TEAMS[0],
-  diet: [],
-  otherDiet: '',
-})
-
-const events = ref([])
-const fetchEvents = async () => {
-  const response = await fetch(`${apiUrl}/events`, { method: 'GET' })
-  const { data } = await response.json()
-  events.value = data
-}
-onMounted(() => fetchEvents())
-
-const selectedEvent = ref({})
-const selectEvent = (event) => {
-  if (event.available_seats === 0) {
-    return
-  }
-  form.value.event_id = event.id
-  selectedEvent.value = event
-}
-
-const toggleRestriction = (restriction) => {
-  const index = dinnerForm.value.diet.indexOf(restriction)
-  if (index >= 0) {
-    dinnerForm.value.diet.splice(index, 1)
-  } else {
-    dinnerForm.value.diet.push(restriction)
-  }
-}
-
-const errors = ref([])
-const submit = async () => {
-  errors.value = []
-
-  if (form.value.event_id === undefined) {
-    errors.value.push('You have to select one of the timeslots.')
-    return
-  }
-
-  if (selectedEvent.value.event_type_id === 'dinner') {
-    form.value.custom_fields = {
-      team: dinnerForm.value.team.name,
-      diet: [...dinnerForm.value.diet, ...(dinnerForm.value.otherDiet.length > 0 ? [dinnerForm.value.otherDiet] : [])],
-    }
-  }
-
-  state.value = 'loading'
-
-  const response = await fetch(`${apiUrl}/bookings`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
-    body: JSON.stringify(form.value),
-  })
-
-  const result = await response.json()
-
-  rootElement.value.scrollIntoView({ behavior: 'smooth' })
-
-  if (response.ok) {
-    state.value = 'finished'
-  } else {
-    state.value = 'start'
-    if (result.errors) {
-      errors.value = Object.values(result.errors).flat()
-    } else {
-      alert('An error occurred. If this keeps happening, please send us an email.')
-    }
-  }
-}
-
-const formatTime = (time) => {
-  const date = new Date(time)
-  return date.toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })
-}
-
-const formatDate = (time) => {
-  const date = new Date(time)
-  return date.toLocaleDateString('nl-NL', { weekday: 'long', day: 'numeric', month: 'long' })
-}
-
-const rootElement = ref(null)
-</script>
-
-<template>
-  <div ref="rootElement" class="bg-white p-8 rounded-lg shadow-xl">
-    <ElementsIconCircle class="p-5 mb-8 inline-block">
-      <IconTime class="w-6 h-6" />
-    </ElementsIconCircle>
-
-    <h2 class="text-xl font-bold mb-4 text-brand-450 uppercase tracking-wider" v-text="t('title')" />
-
-    <ElementsFormSuccessMessage
-      v-if="state === 'finished'"
-      class="!bg-brand-100 mb-6"
-      :title="$t('forms.success.heading')"
-      :subtitle="t('thank_you')"
-    />
-
-    <form v-show="state == 'start' || state == 'loading'" @submit.prevent="submit">
-      <div v-for="error in errors" :key="error" class="bg-red-200 border-1 border-red-400 rounded p-2 mb-4">
-        <strong>{{ t('oops') }}</strong>
-        {{ error }}
-      </div>
-
-      <ElementsFormElement name="name" required>
-        <ElementsFormTextInput v-model="form.name" gray />
-      </ElementsFormElement>
-
-      <ElementsFormElement name="email" required>
-        <ElementsFormTextInput v-model="form.email" type="email" gray />
-      </ElementsFormElement>
-
-      <ElementsFormElement :label="t('event')" name="event_id" required>
-        <div class="flex flex-wrap">
-          <div v-if="events.length === 0" class="bg-brand-100 rounded-lg w-full p-4">
-            {{ t('no_events') }}
-          </div>
-          <div v-for="event in events" :key="event.id" class="w-full">
-            <div
-              :class="[
-                form.event_id == event.id ? 'border-2 border-brand-450' : '',
-                event.available_seats == 0 ? 'text-gray-400' : 'cursor-pointer',
-              ]"
-              class="bg-brand-100 rounded-md mt-2 mr-2 shadow overflow-hidden"
-              @click="selectEvent(event)"
-            >
-              <div
-                :class="event.available_seats <= 0 ? 'bg-brand-200 text-brand-300' : 'text-white bg-brand-450'"
-                class="px-3 py-1 font-bold"
-                v-text="event.name"
-              />
-              <div class="px-3 py-2">
-                <div class="capitalize mb-1 font-sembold" v-text="formatDate(event.start)" />
-                <div class="md:flex space-y-2 md:space-y-0 md:space-x-2">
-                  <div class="bg-white px-2 py-1 rounded inline-flex items-center">
-                    <IconTime class="w-4 h-4 mr-2" />
-                    {{ formatTime(event.start) }} - {{ formatTime(event.end) }}
-                  </div>
-                  <div v-if="event.available_seats <= 0" class="bg-brand-450 text-white px-2 py-1 rounded">
-                    {{ t('fully_booked') }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </ElementsFormElement>
-
-      <ElementsFormElement v-if="selectedEvent.event_type_id === 'dinner'" label="Team" name="team" required>
-        <div class="md:flex flex-wrap -mx-1">
-          <div v-for="team in DINNER_TEAMS" :key="team.name" class="md:w-1/2 p-1">
-            <div
-              :class="[
-                team.name === dinnerForm.team.name ? 'bg-brand-400 text-white' : 'bg-brand-100 hover:bg-brand-200',
-                'rounded px-3 py-2 tracking-wider flex items-center cursor-pointer shadow',
-              ]"
-              @click="dinnerForm.team = team"
-            >
-              <span class="mr-3">{{ team.emoji }}</span>
-              {{ team.name }}
-            </div>
-          </div>
-        </div>
-        <p class="mt-4 px-3 py-3 rounded shadow text-gray-500">
-          <span class="mr-3">{{ dinnerForm.team.emoji }}</span>
-          {{ dinnerForm.team.description }}
-        </p>
-      </ElementsFormElement>
-
-      <ElementsFormElement v-if="selectedEvent.event_type_id === 'dinner'" label="I don't eat..." name="diet">
-        <div class="space-y-2">
-          <div class="grid grid-cols-3 gap-2">
-            <div
-              v-for="restriction in DINNER_RESTRICTIONS"
-              :key="restriction"
-              :class="[
-                dinnerForm.diet.includes(restriction) ? 'bg-brand-400 text-white' : 'bg-brand-100 hover:bg-brand-200',
-                'rounded px-3 py-1 tracking-wider text-center cursor-pointer shadow',
-              ]"
-              @click="toggleRestriction(restriction)"
-              v-text="restriction"
-            />
-          </div>
-          <div
-            :class="[
-              dinnerForm.otherDiet.length > 0 ? 'bg-brand-400 text-white' : 'bg-brand-100 hover:bg-brand-200',
-              'rounded px-1 py-2 tracking-wider flex-1 flex items-center cursor-pointer h-full shadow',
-            ]"
-          >
-            <div class="px-2">Other:</div>
-            <ElementsFormTextInput
-              v-model="dinnerForm.otherDiet"
-              type="text"
-              class="mr-2 inline text-black"
-              placeholder="Other Restrictions"
-            />
-          </div>
-        </div>
-      </ElementsFormElement>
-
-      <p class="text-sm mb-4" v-text="t('disclaimer')" />
-
-      <ElementsPrimaryButton :disabled="state === 'loading'" type="submit">
-        {{ state === 'loading' ? t('forms.buttons.loading') : t('forms.buttons.submit') }}
-      </ElementsPrimaryButton>
-    </form>
-  </div>
-</template>
diff --git a/dwhdelft.nl/pages/book.vue b/dwhdelft.nl/pages/book.vue
index 0f003225..ddbe2e7f 100644
--- a/dwhdelft.nl/pages/book.vue
+++ b/dwhdelft.nl/pages/book.vue
@@ -29,27 +29,37 @@ import { IconInformationOutline } from '@iconify-prerendered/vue-zondicons'
 const { t } = useT()
 
 const route = useRoute()
+
+onMounted(() => {
+  window.addEventListener('message', (event) => {
+    if (event.data.source === 'size_alert') {
+      const asd = document.querySelector('iframe')
+      asd.height = event.data.height
+      asd.width = event.data.width
+    }
+  })
+})
 </script>
 
 <template>
   <LayoutSmallHeader bg="bg-brand-450">{{ t('title') }}</LayoutSmallHeader>
 
-  <section class="bg-brand-450 relative">
-    <ElementsContainer class="lg:flex py-8">
+  <section class="relative bg-brand-450">
+    <ElementsContainer class="py-8 lg:flex">
       <div class="flex-1 lg:pr-16">
-        <div v-if="route.query.canceled" class="bg-brand-100 rounded p-4 text-lg flex items-center mb-6 space-x-4">
+        <div v-if="route.query.canceled" class="mb-6 flex items-center space-x-4 rounded bg-brand-100 p-4 text-lg">
           <ElementsIconCircle class="p-5">
-            <IconInformationOutline class="w-6 h-6" />
+            <IconInformationOutline class="size-6" />
           </ElementsIconCircle>
           <h4 class="text-xl leading-tight" v-text="t('canceled')" />
         </div>
 
-        <h1 class="text-6xl text-white font-bold mb-6" v-text="t('intro.title')" />
+        <h1 class="mb-6 text-6xl font-bold text-white" v-text="t('intro.title')" />
         <p class="text-lg leading-normal text-white" v-text="t('intro.body')" />
       </div>
 
       <div class="lg:w-1/2">
-        <PagesBookForm class="lg:-mt-72" />
+        <iframe class="w-full lg:-mt-72" src="http://localhost:5173" />
       </div>
     </ElementsContainer>
   </section>

From afdd09dba512c19ca2883f77b3d9e39c63078cb2 Mon Sep 17 00:00:00 2001
From: Ilgaz Er <er.ilgaz@gmail.com>
Date: Sun, 12 Jan 2025 17:24:21 +0100
Subject: [PATCH 3/3] fix url

---
 dwhdelft.nl/pages/book.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dwhdelft.nl/pages/book.vue b/dwhdelft.nl/pages/book.vue
index ddbe2e7f..b248f397 100644
--- a/dwhdelft.nl/pages/book.vue
+++ b/dwhdelft.nl/pages/book.vue
@@ -59,7 +59,7 @@ onMounted(() => {
       </div>
 
       <div class="lg:w-1/2">
-        <iframe class="w-full lg:-mt-72" src="http://localhost:5173" />
+        <iframe class="w-full lg:-mt-72" src="https://dwh-bookings.web.app/" />
       </div>
     </ElementsContainer>
   </section>