Display Month between Date lists

components/base/ListImageItem.vue

@@ -11,8 +11,13 @@
       :imgAttrs="{ class: 'w-full h-56 object-cover object-center' }"
     />
     <div class="w-full h-44 relative bg-white px-2 py-5 flex flex-col justify-start items-start gap-2 overflow-y-auto">
-      <h1>{{ data?.title }}</h1>
-      <p v-if="data?.date" class="w-full text-[#5c5c5c]">
+      <h1>
+        <span v-if="numberOverwrite != undefined" class="w-24 text-center text-black text-4xl my-auto">
+          {{ numberOverwrite }}.
+        </span>
+        {{ data?.title }}
+      </h1>
+      <p v-if="numberOverwrite != undefined" class="w-full text-[#5c5c5c]">
         {{
           new Date(data?.date ?? "").toLocaleString("de-DE", {
             day: "2-digit",
@@ -22,6 +27,16 @@
             hour: "2-digit",
           })
         }}
+        Uhr
+      </p>
+      <p v-else class="w-full text-[#5c5c5c]">
+        {{
+          new Date(data?.date ?? "").toLocaleString("de-DE", {
+            minute: "2-digit",
+            hour: "2-digit",
+          })
+        }}
+        Uhr
       </p>
       <p class="w-full text-[#5c5c5c]">
         {{ data?.description }}
@@ -39,6 +54,7 @@ const baseUrl = runtimeConfig.public.strapi.url;
 
 defineProps({
   data: Object as PropType<BaseCollection>,
+  numberOverwrite: { type: Number, default: undefined },
   allowNavigation: { type: Boolean, default: false },
   urlOverwrite: { type: String, default: undefined },
 });

components/base/ListItem.vue

@@ -26,6 +26,7 @@
             hour: "2-digit",
           })
         }}
+        Uhr
       </p>
       <p v-else class="w-full text-[#5c5c5c]">
         {{
@@ -34,6 +35,7 @@
             hour: "2-digit",
           })
         }}
+        Uhr
       </p>
       <p class="w-full text-[#5c5c5c]">
         {{ data?.description }}

components/shared/List.vue

@@ -23,7 +23,18 @@
     :class="data?.lookup.image_item ? 'flex-row flex-wrap justify-center' : ' flex-col'"
   >
     <div v-for="(item, index) in collection" :key="item.slug" class="contents">
-      <BaseListImageItem v-if="data?.lookup.image_item" :data="item" :allow-navigation="data.enable_detail" />
+      <p
+        v-if="data?.lookup.date_list && data?.lookup.numbered_item == false && getDate(index) != ''"
+        class="w-full text-center"
+      >
+        {{ getDate(index) }}
+      </p>
+      <BaseListImageItem
+        v-if="data?.lookup.image_item"
+        :data="item"
+        :number-overwrite="data.lookup.numbered_item ? getNumber(index) : undefined"
+        :allow-navigation="data.enable_detail"
+      />
       <BaseListItem
         v-else-if="data?.lookup"
         :data="item"
@@ -190,6 +201,20 @@ function getNumber(index: number): number {
   }
 }
 
+function getDate(index: number): string {
+  let thisElement = collection.value?.[index];
+  let beforeElement = collection.value?.[index - 1];
+
+  if (thisElement && beforeElement) {
+    let thisElementDate = new Date(thisElement.date ?? "").toLocaleDateString("de", { month: "long" });
+    let beforeElementDate = new Date(beforeElement.date ?? "").toLocaleDateString("de", { month: "long" });
+    if (thisElementDate == beforeElementDate) return "";
+    else return thisElementDate;
+  } else if (thisElement) {
+    return new Date(thisElement.date ?? "").toLocaleDateString("de", { month: "long" });
+  } else return "";
+}
+
 async function changeTimedData(year: number) {
   activeYear.value = year;
   const data = await find<BaseCollection>(props.data?.lookup.collection ?? "", {