added dates to text on guest event view

Author: Felix Ruf

config/services.yaml

@@ -47,11 +47,10 @@ parameters:
     app.secret: '%env(APP_SECRET)%'
 
     mealz.lock_toggle_participation_at: '-1 day 16:00'
-    mealz.meal.price: 3.60
+    mealz.meal.price: 4.13
     mealz.meal.search_timestamp: '2000-01-01'
     mealz.meal.new_flag_counter: 2
-    mealz.meal.combined.price: 5.60
-
+    mealz.meal.combined.price: 6.13
     # PDO Session Handler options
     # Define table and column names to store session data
     app.session.handler.pdo.options:

src/Mealz/MealBundle/DataFixtures/ORM/LoadDishVariations.php

@@ -74,7 +74,7 @@ private function getDishVariation(Dish $dish): DishVariation
         $dishVariation->setTitleDe($dish->getTitleDe() . $dummyPrefix);
         $dishVariation->setTitleEn($dish->getTitleEn() . $dummyPrefix);
         $dishVariation->setParent($dish);
-        $dishVariation->setPrice(3.60);
+        $dishVariation->setPrice(4.13);
 
         $variations = $dish->getVariations();
         $variations->add($dishVariation);

src/Mealz/MealBundle/DataFixtures/ORM/LoadDishes.php

@@ -72,7 +72,7 @@ public function getOrder(): int
     protected function addDish(string $titleEN, string $titleDE, string $descEN = null, string $descDE = null, bool $oneSize = false): void
     {
         $dish = new Dish();
-        $dish->setPrice(3.60);
+        $dish->setPrice(4.13);
         $dish->setTitleEn($titleEN);
         $dish->setTitleDe($titleDE);
         $dish->setDescriptionEn('Description - ' . $titleEN);

src/Resources/src/api/getEventInvitionData.ts

@@ -1,9 +1,10 @@
 import { IMessage } from "@/interfaces/IMessage";
 import useApi from "./api";
+import { DateTime } from "./getDashboardData";
 
 export interface EventInvitationData {
-    date: string,
-    lockDate: string,
+    date: DateTime,
+    lockDate: DateTime,
     event: string
 }
 

src/Resources/src/locales/de.json

@@ -232,8 +232,8 @@
     "description": "Als Gast in unserem Haus laden wir Sie gerne zu einem Mittagessen in der AOE Eatery ein. Für Ihre Bestellung tragen Sie sich bitte bis spätestens einen Tag vorher mit Ihren Daten ein und wählen das gewünschte Gericht aus, das dann an unsere Köche weitergeleitet wird.\n\nGuten Appetit wünscht Ihnen,\nAOE",
     "event": {
       "submit": "An Event teilnehmen",
-      "title": "Event bei AOE",
-      "description": "Hiermit laden wir Sie zu dem Event \"%EventTitle%\" bei uns ein."
+      "title": "Veranstaltung bei AOE",
+      "description": "Hiermit laden wir Sie zu der Veranstaltung \"%EventTitle%\" bei uns ein. Damit wir rechtzeitig mit Ihnen planen können tragen Sie sich bitte bis spätestens %lockDate% Uhr für das Event ein.\n\nWir freuen uns auf Sie!"
     }
   },
   "header": {

src/Resources/src/locales/en.json

@@ -231,9 +231,9 @@
     "title": "Lunch at AOE",
     "description": "As our guest, we would like to invite you to lunch in the AOE Eatery. To order a meal, register no later than one day before your visit to AOE with your personal information and choose the desired dish. Your order will be forwarded to our cooks.\n\nWe hope that you enjoy your lunch\nAOE",
     "event": {
-      "submit": "An Event teilnehmen",
-      "title": "Event bei AOE",
-      "description": "Hiermit laden wir Sie zu dem Event \"%EventTitle%\" bei uns ein."
+      "submit": "Participate",
+      "title": "Event at AOE",
+      "description": "We would like to invite you to join us at the Event \"%EventTitle%\". To ensure we can plan ahead with you, please register for the event by %lockDate% at the latest.\n\nWe look forward to having you!"
     }
   },
   "header": {

src/Resources/src/views/GuestEvent.vue

@@ -1,44 +1,54 @@
 <template>
-  <h2>
-    {{ t('guest.event.title') }}
-  </h2>
-  <p>
-    {{ t('guest.event.description').replace('%EventTitle%', invitationData?.event) }}
-  </p>
-  <div>
-    <form
-      @submit.prevent="handleSubmit()"
-    >
-      <InputLabel
-        v-model="formData.firstname"
-        :required="true"
-        :labelText="t('guest.form.firstname')"
-      />
-      <InputLabel
-        v-model="formData.lastname"
-        :required="true"
-        :labelText="t('guest.form.lastname')"
-      />
-      <InputLabel
-        v-model="formData.company"
-        :labelText="t('guest.form.company')"
-      />
-      <SubmitButton
-        :btnText="t('guest.event.submit')"
-      />
-    </form>
+  <div
+    v-if="invitationData !== null"
+    class="mx-[5%] xl:mx-auto"
+  >
+    <h2 class="text-center text-primary xl:text-left">
+      {{ `${t('guest.event.title')} | ${eventDate}` }}
+    </h2>
+    <p class="whitespace-pre-line text-[18px] leading-[24px] text-primary-1">
+      {{ t('guest.event.description').replace('%EventTitle%', invitationData?.event).replace('%lockDate%', lockDate) }}
+    </p>
+    <div>
+      <form
+        @submit.prevent="handleSubmit()"
+      >
+        <InputLabel
+          v-model="formData.firstname"
+          :required="true"
+          :labelText="t('guest.form.firstname')"
+        />
+        <InputLabel
+          v-model="formData.lastname"
+          :required="true"
+          :labelText="t('guest.form.lastname')"
+        />
+        <InputLabel
+          v-model="formData.company"
+          :labelText="t('guest.form.company')"
+        />
+        <SubmitButton
+          :btnText="t('guest.event.submit')"
+        />
+      </form>
+    </div>
   </div>
+  <LoadingSpinner
+    v-else
+    :loaded="invitationData === null"
+  />
 </template>
 
 <script setup lang="ts">
 import getEventInvitationData, { EventInvitationData } from '@/api/getEventInvitionData';
 import InputLabel from '@/components/misc/InputLabel.vue';
+import LoadingSpinner from '@/components/misc/LoadingSpinner.vue';
 import SubmitButton from '@/components/misc/SubmitButton.vue';
 import { isMessage } from '@/interfaces/IMessage';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const invitationData = ref<EventInvitationData | null>(null);
 
@@ -60,7 +70,28 @@ onMounted(async () => {
   }
 });
 
+const eventDate = computed(() => {
+  if (invitationData.value !== null) {
+    return getLocaleDateRepr(invitationData.value.date.date);
+  }
+  return 'unknown';
+});
+
+const lockDate = computed(() => {
+  if (invitationData.value !== null) {
+    return getLocaleDateRepr(invitationData.value.lockDate.date, true);
+  }
+  return 'unknown';
+});
+
 async function handleSubmit() {
   console.log('HUHU')
 }
+
+function getLocaleDateRepr(date: string, getTime = false) {
+  if (getTime === true) {
+    return new Date(date).toLocaleDateString(locale.value, { weekday: 'long', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+  }
+  return new Date(date).toLocaleDateString(locale.value, { weekday: 'long', month: 'numeric', day: 'numeric' });
+}
 </script>