weburl change

README.md

@@ -1,12 +1,12 @@
 # ff-webpage
 
-Feuerwehr Webseite zu Strapi Contnet Management
+Feuerwehr Webseite zu Strapi Content Management
 
 ## Einleitung
 
 Dieses Repository dient zur dynamischen Erstellung von Webseiten. Es ist ein Frontend-Client, der auf die Daten des [Strapi Content Management Systems (CMS)](https://forgejo.jk-effects.cloud/Ehrenamt/ff-webpage-cms) zugreift. Die Webseite wird mit Nuxt.js erstellt und bietet eine benutzerfreundliche Oberfläche für die Anzeige von Inhalten. Die Webseite ist für Feuerwehren konzipiert und bietet eine einfache Möglichkeit, Informationen zu veröffentlichen und zu verwalten.
 
-Eine Demo dieser Seite finden Sie unter [https://ff-demo.jk-effects.cloud](https://ff-demo.jk-effects.cloud).
+Eine Demo dieser Seite finden Sie unter [https://webpage-demo.ff-admin.de](https://webpage-demo.ff-admin.de).
 
 ## Installation
 

components/ContentBuilder.vue

@@ -9,6 +9,8 @@
         <DynamicZoneFullImage v-else-if="item.__component == 'dynamic-zone.full-image'" :data="item" />
         <DynamicZoneFullText v-else-if="item.__component == 'dynamic-zone.full-text'" :data="item" />
         <DynamicZoneGallery v-else-if="item.__component == 'dynamic-zone.gallery'" :data="item" />
+        <DynamicZoneFileDownload v-else-if="item.__component == 'dynamic-zone.file-download'" :data="item" />
+        <DynamicZoneEmbedding v-else-if="item.__component == 'dynamic-zone.embedding'" :data="item" />
         <SharedList v-else-if="item.__component == 'shared.list'" :data="item" />
         <br />
       </div>

components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="sticky top-0 h-fit">
+  <header class="sticky top-0 h-fit z-50">
     <div
       primary
       class="h-24 min-h-fit w-full px-4 md:px-12 py-2.5 justify-between items-center gap-5 flex overflow-hidden"

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>
+      <h1>
-      <p v-if="data?.date" class="w-full text-[#5c5c5c]">
+        <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 && data?.date && data.date.includes('T')" 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-if="data?.date && data.date.includes('T')" 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

@@ -16,7 +16,7 @@
     </h1>
     <div class="grow shrink basis-0 flex-col justify-center items-center flex">
       <h1 class="w-full">{{ data?.title }}</h1>
-      <p v-if="numberOverwrite != undefined" class="w-full text-[#5c5c5c]">
+      <p v-if="numberOverwrite != undefined && data?.date && data.date.includes('T')" class="w-full text-[#5c5c5c]">
         {{
           new Date(data?.date ?? "").toLocaleString("de-DE", {
             day: "2-digit",
@@ -26,14 +26,16 @@
             hour: "2-digit",
           })
         }}
+        Uhr
       </p>
-      <p v-else class="w-full text-[#5c5c5c]">
+      <p v-else-if="data?.date && data.date.includes('T')" 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 }}

components/dynamicZone/Embedding.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
+    <h1 class="text-center">{{ data.title }}</h1>
+    <iframe :src="data.link" class="w-full h-[90vh]"></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneEmbedding from "../../types/component/dynamicZoneEmbedding";
+
+const props = defineProps({
+  data: Object as PropType<DynamicZoneEmbedding>,
+});
+</script>

components/dynamicZone/FileDownload.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="showComponent" class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
+    <h1 class="text-center">{{ data.title }}</h1>
+    <iframe v-if="data.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
+    <NuxtPicture
+      v-if="data.file.mime.includes('image')"
+      loading="lazy"
+      class="w-full object-cover object-center mx-auto"
+      :src="baseUrl + data?.file.url"
+      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
+    />
+    <a
+      v-if="data.enable_download"
+      :href="baseUrl + data.file.url"
+      :download="data.file.name"
+      target="_blank"
+      class="w-fit text-primary underline"
+    >
+      Datei herunterladen
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneFileDownload from "../../types/component/dynamicZoneFileDownload";
+
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
+
+const props = defineProps({
+  data: Object as PropType<DynamicZoneFileDownload>,
+});
+
+const showComponent = computed(() => {
+  if (props.data.file.mime == "application/pdf" || props.data.file.mime.includes("image")) {
+    return true;
+  } else {
+    return props.data.enable_download;
+  }
+});
+</script>

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"
@@ -33,7 +44,7 @@
     </div>
   </div>
   <div
-    v-if="data?.lookup.date_list"
+    v-if="pagination.pageCount > 1"
     class="flex flex-row w-full max-w-4xl mx-auto justify-between items-center select-none pt-4"
   >
     <p class="text-sm font-normal text-gray-500">
@@ -56,7 +67,7 @@
         v-for="page in displayedPagesNumbers"
         :key="page"
         class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 first:rounded-s-lg last:rounded-e-lg"
-        :class="[currentPage == page ? 'font-bold border-primary' : '', page != '.' ? ' cursor-pointer' : '']"
+        :class="[currentPage - 1 == page ? 'font-bold border-primary' : '', page != '.' ? ' cursor-pointer' : '']"
         @click="changeTimedPage(page)"
       >
         {{ typeof page == "number" ? page + 1 : "..." }}
@@ -64,7 +75,7 @@
       <li
         class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 first:rounded-s-lg last:rounded-e-lg"
         :class="[
-          currentPage + 1 < pagination.pageCount
+          currentPage < pagination.pageCount
             ? 'cursor-pointer hover:bg-gray-100 hover:text-gray-700'
             : 'opacity-50 pointer-events-none',
         ]"
@@ -116,7 +127,7 @@ const { data: collections } = await useAsyncData("collection", () =>
           sort: "date:desc",
           filters: {
             date: {
-              $between: [`${activeYear.value}-01-01T00:00:00.000Z`, `${activeYear.value}-12-31T23:59:59.999Z`],
+              $between: [`${activeYear.value}-01-01 00:00:00.000000`, `${activeYear.value}-12-31 23:59:59.999`],
             },
           },
           pagination: {
@@ -125,7 +136,13 @@ const { data: collections } = await useAsyncData("collection", () =>
             withCount: true,
           },
         }
-      : {}),
+      : {
+          pagination: {
+            page: 1,
+            pageSize: 10,
+            withCount: true,
+          },
+        }),
   })
 );
 collection.value = collections.value?.data;
@@ -184,19 +201,33 @@ const displayedPagesNumbers = computed(() => {
 
 function getNumber(index: number): number {
   if (props.data?.lookup.inverse_count) {
-    return pagination.value.pageCount - numberOffset.value - index + 1;
+    return pagination.value.total - numberOffset.value - index;
   } else {
     return numberOffset.value + index + 1;
   }
 }
 
+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 ?? "", {
     sort: "date:desc",
     filters: {
       date: {
-        $between: [`${activeYear.value}-01-01T00:00:00.000Z`, `${activeYear.value}-12-31T23:59:59.999Z`],
+        $between: [`${activeYear.value}-01-01 00:00:00.000000`, `${activeYear.value}-12-31 23:59:59.999`],
       },
     },
     pagination: {
@@ -205,6 +236,7 @@ async function changeTimedData(year: number) {
       withCount: true,
     },
   });
+  console.log(data);
   collection.value = data?.data;
   pagination.value = (data?.meta.pagination as unknown as {
     page: number;
@@ -223,7 +255,7 @@ async function changeTimedPage(page: number = 1) {
     sort: "date:desc",
     filters: {
       date: {
-        $between: [`${activeYear.value}-01-01T00:00:00.000Z`, `${activeYear.value}-12-31T23:59:59.999Z`],
+        $between: [`${activeYear.value}-01-01 00:00:00.000000`, `${activeYear.value}-12-31 23:59:59.999`],
       },
     },
     pagination: {

layouts/landing.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative h-[calc(100svh-6rem)] max-h-[calc(100svh-6rem)] w-full overflow-hidden">
+  <div v-if="!hide_backdrop" class="relative h-[calc(100svh-6rem)] max-h-[calc(100svh-6rem)] w-full overflow-hidden">
     <NuxtPicture
       loading="lazy"
       class="w-full h-full object-cover object-center"
@@ -7,6 +7,11 @@
       :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
     />
     <img class="absolute p-4 max-sm:w-full sm:h-40 bottom-5" :src="baseUrl + navbar.logo.url" />
+    <img
+      class="absolute h-5 w-5 left-1/2 -translate-y-1/2 bottom-5 text-gray-400 cursor-pointer"
+      src="/chevrons-down.svg"
+      @click="scroll()"
+    />
   </div>
   <Header />
   <slot />
@@ -28,5 +33,9 @@ const { data: global } = await useAsyncData("global", () => findOne<Global>("glo
 const { navbar } = global.value?.data as unknown as Global;
 
 const { data: homepage } = await useAsyncData("homepage", () => findOne<Homepage>("homepage"));
-const { backdrop } = homepage.value?.data as unknown as Homepage;
+const { backdrop, hide_backdrop } = homepage.value?.data as unknown as Homepage;
+
+function scroll() {
+  window.scrollTo({ top: window.innerHeight - 96, behavior: "smooth" });
+}
 </script>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "nuxt-app",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "nuxt-app",
-      "version": "1.0.2",
+      "version": "1.1.0",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxt/image": "^1.8.1",

package.json

@@ -21,5 +21,5 @@
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.14"
   },
-  "version": "1.0.2"
+  "version": "1.1.0"
 }

public/chevrons-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-down"><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>

types/collection/article.ts

@@ -1,4 +1,4 @@
-import type BaseImage from "../component/baseImage";
+import type BaseFile from "../component/baseFile";
 import type BaseCollection from "./baseCollection";
 
 export default interface Article extends BaseCollection {}

types/collection/baseCollection.ts

@@ -1,4 +1,4 @@
-import type BaseImage from "../component/baseImage";
+import type BaseFile from "../component/baseFile";
 import type ContentField from "../field/content";
 
 export default interface BaseCollection {
@@ -14,6 +14,6 @@ export default interface BaseCollection {
   description: string;
   date: string | undefined;
   content: ContentField | undefined;
-  image: BaseImage | undefined;
+  image: BaseFile | undefined;
-  attachment: Array<BaseImage>;
+  attachment: Array<BaseFile>;
 }

types/collection/vehicle.ts

@@ -1,4 +1,4 @@
-import type BaseImage from "../component/baseImage";
+import type BaseFile from "../component/baseFile";
 import type BaseCollection from "./baseCollection";
 
 export default interface Vehicle extends BaseCollection {

types/component/baseComponent.ts

@@ -4,7 +4,9 @@ import type DynamicZoneEmphasiseArticle from "./dynamicZoneEmphasiseArticle";
 import type DynamicZoneFullImage from "./dynamicZoneFullImage";
 import type DynamicZoneFullText from "./dynamicZoneFullText";
 import type DynamicZoneGallery from "./dynamicZoneGallery";
+import type DynamicZoneFileDownload from "./dynamicZoneFileDownload";
 import type SharedList from "./sharedList";
+import type DynamicZoneEmbedding from "./dynamicZoneEmbedding";
 
 export default interface BaseComponent {
   __component: ComponentNames;
@@ -18,7 +20,9 @@ export type ComponentNames =
   | "dynamic-zone.full-image"
   | "dynamic-zone.emphasise-article"
   | "dynamic-zone.dual-column-text"
-  | "dynamic-zone.column-image-text";
+  | "dynamic-zone.column-image-text"
+  | "dynamic-zone.file-download"
+  | "dynamic-zone.embedding";
 
 export type ComponentTypes =
   | SharedList
@@ -27,4 +31,6 @@ export type ComponentTypes =
   | DynamicZoneFullImage
   | DynamicZoneEmphasiseArticle
   | DynamicZoneDualColumnText
-  | DynamicZoneColumnImageText;
+  | DynamicZoneColumnImageText
+  | DynamicZoneFileDownload
+  | DynamicZoneEmbedding;

types/component/baseFile.ts

@@ -1,4 +1,4 @@
-export default interface BaseImage {
+export default interface BaseFile {
   id: number;
   documentId: string;
   name: string;

types/component/dynamicZoneColumnImageText.ts

@@ -1,10 +1,10 @@
 import type ContentField from "../field/content";
 import type BaseComponent from "./baseComponent";
-import type BaseImage from "./baseImage";
+import type BaseFile from "./baseFile";
 
 export default interface DynamicZoneColumnImageText extends BaseComponent {
   __component: "dynamic-zone.column-image-text";
   text: ContentField;
   image_left: boolean;
-  image: BaseImage;
+  image: BaseFile;
 }

types/component/dynamicZoneEmbedding.ts

@@ -0,0 +1,7 @@
+import type BaseComponent from "./baseComponent";
+
+export default interface DynamicZoneEmbedding extends BaseComponent {
+  __component: "dynamic-zone.embedding";
+  title: string;
+  link: string;
+}

types/component/dynamicZoneFileDownload.ts

@@ -0,0 +1,9 @@
+import type BaseComponent from "./baseComponent";
+import type BaseFile from "./baseFile";
+
+export default interface DynamicZoneFileDownload extends BaseComponent {
+  __component: "dynamic-zone.file-download";
+  enable_download: boolean;
+  title: string;
+  file: BaseFile;
+}

types/component/dynamicZoneFullImage.ts

@@ -1,7 +1,7 @@
 import type BaseComponent from "./baseComponent";
-import type BaseImage from "./baseImage";
+import type BaseFile from "./baseFile";
 
 export default interface DynamicZoneFullImage extends BaseComponent {
   __component: "dynamic-zone.full-image";
-  image: BaseImage;
+  image: BaseFile;
 }

types/component/dynamicZoneGallery.ts

@@ -1,7 +1,7 @@
 import type BaseComponent from "./baseComponent";
-import type BaseImage from "./baseImage";
+import type BaseFile from "./baseFile";
 
 export default interface DynamicZoneGallery extends BaseComponent {
   __component: "dynamic-zone.gallery";
-  images: Array<BaseImage>;
+  images: Array<BaseFile>;
 }

types/component/globalNavbar.ts

@@ -1,8 +1,8 @@
-import type BaseImage from "./baseImage";
+import type BaseFile from "./baseFile";
 import type NavbarItem from "./itemsNavbarItem";
 
 export default interface Navbar {
   id: number;
-  logo: BaseImage;
+  logo: BaseFile;
   navbar_items: NavbarItem[];
 }

types/component/sharedHero.ts

@@ -1,7 +1,7 @@
-import type BaseImage from "./baseImage";
+import type BaseFile from "./baseFile";
 
 export default interface SharedHero {
   id: number;
   title: string;
-  banner: BaseImage;
+  banner: BaseFile;
 }

types/single/homepage.ts

@@ -1,4 +1,4 @@
-import type BaseImage from "../component/baseImage";
+import type BaseFile from "../component/baseFile";
 import type { ComponentTypes } from "../component/baseComponent";
 
 export default interface Homepage {
@@ -8,6 +8,7 @@ export default interface Homepage {
   updatedAt: string;
   publishedAt: string;
   locale: string;
-  backdrop: BaseImage;
+  backdrop: BaseFile;
+  hide_backdrop: boolean;
   content: Array<ComponentTypes>;
 }