From 7b99047a00dd54b3f366b71d6ecf040a4e2f7435 Mon Sep 17 00:00:00 2001
From: mtte <code@mtte.me>
Date: Mon, 8 Dec 2025 21:32:09 +0100
Subject: [PATCH 1/3] feat: sort sponsoring items by order

---
 components/SponsoringItem.vue                  |  1 +
 components/strapi/SponsoringItemsComponent.vue | 11 +++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/SponsoringItem.vue b/components/SponsoringItem.vue
index b2a625c..ebfa907 100644
--- a/components/SponsoringItem.vue
+++ b/components/SponsoringItem.vue
@@ -34,6 +34,7 @@ export interface SponsoringItem {
     name: string;
   };
   reward: string;
+  order: number;
   image: {
     id: number;
     documentId: string;
diff --git a/components/strapi/SponsoringItemsComponent.vue b/components/strapi/SponsoringItemsComponent.vue
index c824f44..b925866 100644
--- a/components/strapi/SponsoringItemsComponent.vue
+++ b/components/strapi/SponsoringItemsComponent.vue
@@ -25,9 +25,16 @@ const {
   error,
 } = await useAsyncData(
   'sponsoring-items',
-  () => find<SponsoringItem>('sponsoring-items', { populate: '*' }),
+  () =>
+    find<SponsoringItem>('sponsoring-items', { populate: '*', sort: 'order' }),
   {
-    transform: input => input.data,
+    transform: input =>
+      (input.data as SponsoringItem[]).sort((a, b) => {
+        if (a.order === null && b.order === null) return 0;
+        if (a.order === null) return 1;
+        if (b.order === null) return -1;
+        return a.order - b.order;
+      }),
   },
 );
 </script>
-- 
GitLab


From ec42e88bd09e2445186e19cf23107819f88996f4 Mon Sep 17 00:00:00 2001
From: mtte <code@mtte.me>
Date: Mon, 8 Dec 2025 21:49:53 +0100
Subject: [PATCH 2/3] feat: custom colors for sponsoring items

---
 components/PageSection.vue    |  2 +-
 components/SponsoringItem.vue | 34 +++++++++++++++++++++++++++++-----
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/components/PageSection.vue b/components/PageSection.vue
index 436a53b..9836d18 100644
--- a/components/PageSection.vue
+++ b/components/PageSection.vue
@@ -116,7 +116,7 @@ const backgroundColor = computed(() => {
     case 'light-blue':
       return '#f5f7fa';
     case 'blue':
-      return '#003976';
+      return '#0F6B8A';
     case 'light-green':
       return '#e9f2d5';
   }
diff --git a/components/SponsoringItem.vue b/components/SponsoringItem.vue
index ebfa907..a91718f 100644
--- a/components/SponsoringItem.vue
+++ b/components/SponsoringItem.vue
@@ -1,15 +1,22 @@
 <template>
   <div
-    class="rounded-md shadow-lg overflow-hidden border-2 border-jemk-blue max-w-sm bg-jemk-light-blue w-full"
+    class="rounded-md shadow-lg overflow-hidden border-2 max-w-sm bg-jemk-light-blue w-full"
+    :style="{ 'border-color': color }"
   >
     <div class="px-6 py-4 pb-3 flex flex-col items-center">
       <span class="text-gray-600 text-base font-medium">
         {{ item.bereich.name }}
       </span>
-      <span class="font-medium text-xl text-jemk-blue mb-4">{{
-        item.name
-      }}</span>
-      <span class="font-bold text-jemk-blue text-4xl">{{ item.price }}</span>
+      <span
+        class="font-medium text-xl text-jemk-blue mb-4"
+        :style="{ color: color }"
+        >{{ item.name }}</span
+      >
+      <span
+        class="font-bold text-jemk-blue text-4xl"
+        :style="{ color: color }"
+        >{{ item.price }}</span
+      >
     </div>
     <img
       v-if="item.image"
@@ -35,6 +42,8 @@ export interface SponsoringItem {
   };
   reward: string;
   order: number;
+  color: 'default' | 'custom' | 'black' | 'orange' | 'light-green';
+  customColor: string;
   image: {
     id: number;
     documentId: string;
@@ -49,6 +58,21 @@ export interface SponsoringItem {
 }
 
 const item = defineProps<SponsoringItem>();
+
+const color = computed(() => {
+  switch (item.color) {
+    case 'custom':
+      return item.customColor;
+    case 'black':
+      return '#000000';
+    case 'orange':
+      return '#FF8000';
+    default:
+      return '#0F6B8A';
+  }
+});
+
+console.log(color.value);
 </script>
 
 <style scoped></style>
-- 
GitLab


From f862fbc27c54bf7d7c9c51affc151f5804a28964 Mon Sep 17 00:00:00 2001
From: mtte <code@mtte.me>
Date: Mon, 8 Dec 2025 22:01:47 +0100
Subject: [PATCH 3/3] feat: custom inscription for selected sponsoring items
 when requesting sponsoring

---
 components/SponsoringItem.vue       |  1 +
 components/forms/SponsoringForm.vue | 19 +++++++++++++++++++
 interfaces/sponsoringFormData.ts    |  1 +
 3 files changed, 21 insertions(+)

diff --git a/components/SponsoringItem.vue b/components/SponsoringItem.vue
index a91718f..cfc0f34 100644
--- a/components/SponsoringItem.vue
+++ b/components/SponsoringItem.vue
@@ -44,6 +44,7 @@ export interface SponsoringItem {
   order: number;
   color: 'default' | 'custom' | 'black' | 'orange' | 'light-green';
   customColor: string;
+  hasInscription: boolean;
   image: {
     id: number;
     documentId: string;
diff --git a/components/forms/SponsoringForm.vue b/components/forms/SponsoringForm.vue
index b7a2225..434d309 100644
--- a/components/forms/SponsoringForm.vue
+++ b/components/forms/SponsoringForm.vue
@@ -134,6 +134,23 @@
             }}
           </option>
         </select>
+        <div
+          v-if="
+            formData.type == 'sponsoring' &&
+            items?.filter(item => item.name === formData.item)[0]
+              ?.hasInscription
+          "
+          class="flex"
+        >
+          <input
+            id="customInscription"
+            v-model="formData.beschriftung"
+            class="p-2 rounded-sm shadow-md w-full overflow-hidden focus-visible:shadow-lg outline-none transition-all"
+            type="text"
+            name="Beschriftung"
+            placeholder="Name der Beschriftung"
+          />
+        </div>
         <div
           v-if="formData.type == 'sponsoring' && formData.item === 'freeChoice'"
           class="flex"
@@ -243,6 +260,7 @@ const formData: Ref<SponsoringFormData> = ref({
   item: '',
   amount: '',
   type: null,
+  beschriftung: null,
 });
 
 const { find } = useStrapi();
@@ -281,6 +299,7 @@ const submitForm = () => {
         formData.value.spende = '';
         formData.value.item = '';
         formData.value.amount = '';
+        formData.value.beschriftung = null;
         formData.value.type = null;
         toggleOutput();
         popUpTitle.value = 'Erfolg';
diff --git a/interfaces/sponsoringFormData.ts b/interfaces/sponsoringFormData.ts
index 0624816..4edd047 100644
--- a/interfaces/sponsoringFormData.ts
+++ b/interfaces/sponsoringFormData.ts
@@ -10,4 +10,5 @@ export interface SponsoringFormData {
   item: string;
   amount: string;
   type: string | null;
+  beschriftung: string | null;
 }
-- 
GitLab