Add Form Support

2026-05-02 19:11:09 +02:00
15 changed files with 284 additions and 37 deletions
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +1,3 @@
-[submodule "app/ritzenbergen-dto"]
-	path = app/ritzenbergen-dto
-	url = https://git.ritzenbergen.de/R40fendt/ritzenbergen-dto
+[submodule "app/dto"]
+	path = app/dto
+	url = https://git.ritzenbergen.de/R40fendt/ritzenbergen-dto.git
--- a/app/components/MyFooter.vue
+++ b/app/components/MyFooter.vue
@@ -17,7 +17,7 @@ export default {
  <section
    class="footer3 cid-u6k7q0Blvk"
    once="footers"
-    id="footer-6-u6k7q0Blvk"
+    id="footer"
  >
    <div class="container">
      <div class="row">
@@ -41,7 +41,7 @@ export default {
                  <br />
                  
                </p>
-								<RouterLink to="/adminpanel/login">Admin Login</RouterLink>
+								<NuxtLink to="/adminpanel/login">Admin Login</NuxtLink>
              </Modal>

              <button @click="aboutVisible=true" class="text-white btn-ueber openBtn">Über</button>
--- a/app/components/Navbar.vue
+++ b/app/components/Navbar.vue
@@ -15,8 +15,8 @@ export default {
    return {
      datalinks: [
        { link: "/galerie", title: "Galerie" },
-        { link: "/umgebung", title: "Umgebung" },
-        { link: "/footer", title: "Kontakt" },
+        { link: "/#umgebung", title: "Umgebung" },
+        { link: "/#footer", title: "Kontakt" },
        { link: "/bulitipp", title: "BuLi-Tipp" },
      ],
      buttontextdata: "Über Ritzenbergen",
@@ -58,18 +58,18 @@ export default {
      <div class="container">
        <div class="navbar-brand">
          <span class="navbar-logo">
-            <span href="/">
+            <NuxtLink to="/">
              <img
                class="navbar-logo-img"
                src="../assets/RitzenbergenOrtsschild.png"
                style="height: 60px; padding-left: 5px"
              />
-            </span>
+            </NuxtLink>
          </span>
          <span class="navbar-caption-wrap">
-            <span class="navbar-caption text-black display-4" href="/"
-              >Amedorf & Ritzenbergen</span
-            >
+            <NuxtLink to="/" class="navbar-caption text-black display-4">
+              Amedorf & Ritzenbergen
+            </NuxtLink>
          </span>
        </div>
        <button
@@ -95,13 +95,13 @@ export default {
 				<div class="navbar-collapse opacityScroll" :class="{show: !isNavCollapsed, collapsing: isCollapsing, collapse: !isCollapsing}" id="navbarSupportedContent">
          <ul class="navbar-nav nav-dropdown" data-app-modern-menu="true">
            <li class="nav-item" v-for="link in datalinks">
-              <span
+              <NuxtLink
                class="nav-link link text-black display-4"
-                :href="link.link"
+                :to="link.link"
                aria-expanded="false"
              >
                {{ link.title }}
-              </span>
+              </NuxtLink>
            </li>
          </ul>
          <div class="navbar-buttons mbr-section-btn">
--- a/app/components/startseite/Forms.vue
+++ b/app/components/startseite/Forms.vue
@@ -5,8 +5,9 @@ import { ref } from "vue";
 import Modal from "../Modal.vue";
 import { Formular } from "../../dto/formular.dto";

-async function init() {
-	forms.value=await RitzenbergenLib.graphqlClient.request<{formulare: Formular[] }>(`
+const { $gql } = useNuxtApp();
+
+const forms = await $gql.request<{formulare: Formular[] }>(`
 {
 	formulare {
 		id
@@ -31,12 +32,8 @@ async function init() {
 	}
 }
 `
-	).then(data=>data.formulare);
+).then(data=>data.formulare);

-	console.log(forms.value);
-}
-
-const forms = ref([] as Formular[]);

 const props=defineProps({
 		formid: {
@@ -46,10 +43,8 @@ const props=defineProps({
 		}
 });

-init();
-
 function submit($event: Event) {
-	const url = new URL(
+	/*const url = new URL(
 		RitzenbergenLib.RitzenbergenLib.api("/formulare/submit.php")
 	);
 	const formData = new FormData(<HTMLFormElement>$event.target); 
@@ -59,7 +54,7 @@ function submit($event: Event) {
 	}).then(() => {
 		init();
 		values.value={};
-	});
+	});*/
 }

 const modalOpened=ref<boolean>(false);
@@ -107,8 +102,9 @@ const values=ref({});
 							data-form-title="Form Name"
 							:data-formid="form.id"
 							:data-i="i"
-							@submit.prevent="submit"
 						>
+
+							<!-- @submit.prevent="submit" -->
 							<div v-for="(field, j) in form.fields" :key="j">
 								<label
 									v-if="field.placeholder == null"
--- a/app/ritzenbergen-dto
+++ b/app/ritzenbergen-dto
--- a/app/pages/adminpanel/AdminPanelLogin.vue
+++ b/app/pages/adminpanel/AdminPanelLogin.vue
@@ -2,7 +2,7 @@
 		import Navbar from "../../components/Navbar.vue";
 		import { ref } from "vue";
 		import { useRouter } from 'vue-router'
-		import RitzenbergenLib from "../../ritzenbergenlib.ts";
+		import RitzenbergenLib from "../../ritzenbergenlib";
 		
 		

--- a/app/pages/bildschau.vue
+++ b/app/pages/bildschau.vue
--- a/app/pages/bildvorschau.vue
+++ b/app/pages/bildvorschau.vue
--- a/app/pages/bulitipp.vue
+++ b/app/pages/bulitipp.vue
@@ -6,10 +6,9 @@ import Uebersicht from "../components/bulitipp/Uebersicht.vue";
 import Rangliste from "../components/bulitipp/Rangliste.vue";
 import Paarungsergebnisse from "../components/bulitipp/Paarungsergebnisse.vue";
 import Tabelle from "../components/bulitipp/Tabelle.vue";
-import RitzenbergenLib from "../ritzenbergenlib.ts";
-import SpieltagSumme from "../ritzenbergenlib.ts";
+import RitzenbergenLib from "../ritzenbergenlib";
+import SpieltagSumme from "../ritzenbergenlib";
 import Loading from "../components/bulitipp/Loading.vue";
-import $ from "jquery";
 import Tippen from "../components/bulitipp/Tippen.vue";
 import TippenEinloggen from "../components/bulitipp/TippenEinloggen.vue";

--- a/app/pages/galerie.vue
+++ b/app/pages/galerie.vue
@@ -1,9 +1,8 @@
 <script lang="js">
 import Navbar from "../components/Navbar.vue";
 import Embla from "../components/Embla.vue";
-import RitzenbergenLib from "../ritzenbergenlib.ts";
+import RitzenbergenLib from "../ritzenbergenlib";
 import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
-import $ from "jquery";

 export default {
  components: {
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -50,7 +50,7 @@ async function loadImage(path: string) {
  <Willkommen/>
  
  
-  <Events style="margin-top: 120px;"/>
+  <!-- <Events style="margin-top: 120px;"/> -->

  <Forms/>
      
@@ -89,7 +89,7 @@ async function loadImage(path: string) {
  <br> -->


-  <Umgebung ref="umgebung" />
+  <Umgebung ref="umgebung" id="umgebung" />
  <MyFooter ref="footer" />

 </template>
--- a/app/plugins/graphql.ts
+++ b/app/plugins/graphql.ts
@@ -0,0 +1,16 @@
+import { GraphQLClient } from "graphql-request";
+
+export default defineNuxtPlugin(() => {
+  const config=useRuntimeConfig();
+
+  const endpoint = process.server
+  ? config.graphqlEndpoint
+  : config.public.graphqlEndpoint
+
+  const client = new GraphQLClient(endpoint);
+  return {
+    provide: {
+      gql: client
+    }
+  }
+});
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,11 +1,20 @@
+import { GraphQLClient } from "graphql-request";
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
-  modules: [],
+  ssr: false,
+  modules: ["@formkit/nuxt"],
  devServer: {
    port: 1420
  },
+  runtimeConfig: {
+    graphqlEndpoint: process.env.GRAPHQL_ENDPOINT_INTERNAL || "http://localhost:3000/graphql",
+    public: {
+      graphqlEndpoint: process.env.GRAPHQL_ENDPOINT_PUBLIC || "http://backend:3000/graphql"
+    }
+  },

  css: [
    '~/assets/mobirise/css/additional.scss',
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,8 @@
      "name": "nuxt-test",
      "hasInstallScript": true,
      "dependencies": {
+        "@formkit/nuxt": "^2.0.0",
+        "@formkit/vue": "^2.0.0",
        "@nuxtjs/tailwindcss": "^6.14.0",
        "graphql-request": "^7.4.0",
        "jarallax": "^3.0.0",
@@ -1045,6 +1047,174 @@
      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
      "license": "MIT"
    },
+    "node_modules/@formkit/core": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formkit/core/-/core-2.0.0.tgz",
+      "integrity": "sha512-y56SDriprtH44wJEPsEcsGXMZkBHzOT7gKJwX1uSmeM1aXnzMn86SEm5RIwNrDW7MVAgCjPPry/YAZxGgt2peA==",
+      "license": "MIT",
+      "dependencies": {
+        "@formkit/utils": "^2.0.0"
+      }
+    },
+    "node_modules/@formkit/dev": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formkit/dev/-/dev-2.0.0.tgz",
+      "integrity": "sha512-AFoRoFmoZjywfrRcbjyvuCSHeWS1lADn4tTuyx1nW1ZXw40G4T6ZoTW+ooiZKALpT2FpoKEnktbnQh97crozBw==",
+      "license": "MIT",
+      "dependencies": {
+        "@formkit/core": "^2.0.0",
+        "@formkit/utils": "^2.0.0"
+      }
+    },
+    "node_modules/@formkit/i18n": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formkit/i18n/-/i18n-2.0.0.tgz",
+      "integrity": "sha512-crUPI5vNyubvOJek24FAMQ2T2wVTaFrisnf9GudI3oj9+Gu73sUZZBH7cQ3Mhf3WpE0QimMEhmDknYIaxoVwXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@formkit/core": "^2.0.0",
+        "@formkit/utils": "^2.0.0",
+        "@formkit/validation": "^2.0.0"
+      }
+    },
+    "node_modules/@formkit/inputs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formkit/inputs/-/inputs-2.0.0.tgz",
+      "integrity": "sha512-RK5KRtMg3YHTCOZ0z83yzFTCb9im1n4gAq/YFUs51jzWthzOdpSSTTOpmQBYq2WhHehC4JZuCuDsVc7UasC3yw==",
+      "license": "MIT",
+      "dependencies": {
+        "@formkit/core": "^2.0.0",
+        "@formkit/utils": "^2.0.0"
+      }
+    },
+    "node_modules/@formkit/nuxt": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formkit/nuxt/-/nuxt-2.0.0.tgz",
+      "integrity": "sha512-pJVVMAjwCV+nqNsMUVcGr7K8WuhFckSubX/zVAj8eHx9s3m4soE111UTl7sKu5onujbhYFvQ6dyQKLmrFA/OLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@formkit/core": "^2.0.0",
+        "@formkit/i18n": "^2.0.0",
+        "@formkit/vue": "^2.0.0",
+        "chokidar": "^4.0.0",
+        "pathe": "^2.0.0",
+        "unplugin": "^2.0.0",
+        "unplugin-formkit": "^0.2.13"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": "^3.10.3 || ^4.0.0"
+      }
+    },
+    "node_modules/@formkit/nuxt/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@formkit/nuxt/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@formkit/nuxt/node_modules/unplugin": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.11.tgz",
+      "integrity": "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "acorn": "^8.15.0",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@formkit/observer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formkit/observer/-/observer-2.0.0.tgz",
+      "integrity": "sha512-1DSKS28XCRSzRFHN+OVBe/6tKup6Tc1VtEvy2sGXfRsNRRo6my62pAB7EhcRcp+zu2keTkWhOcLx/ncz4GBgug==",
+      "license": "MIT",
+      "dependencies": {
+        "@formkit/core": "^2.0.0",
+        "@formkit/utils": "^2.0.0"
+      }
+    },
+    "node_modules/@formkit/rules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formkit/rules/-/rules-2.0.0.tgz",
+      "integrity": "sha512-JXxG5SdSDdlI2X9u/hNzK/7kQXR8o9+9HCvivhsBOquc52YcQ1uvfwT08wRRkYhRcO0IkXLIIW4fKCWuDsEVpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@formkit/core": "^2.0.0",
+        "@formkit/utils": "^2.0.0",
+        "@formkit/validation": "^2.0.0"
+      }
+    },
+    "node_modules/@formkit/themes": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formkit/themes/-/themes-2.0.0.tgz",
+      "integrity": "sha512-Rtad6OPtOFYF8C8FdR/BrUCkIoDY55ixRMxSQ0r3On/R2ERf3ub7YmyTWUUcoIG/cgITOEFloLz+yKRlyTkFQg==",
+      "license": "MIT",
+      "dependencies": {
+        "@formkit/core": "^2.0.0"
+      }
+    },
+    "node_modules/@formkit/utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formkit/utils/-/utils-2.0.0.tgz",
+      "integrity": "sha512-9ql3QKsJvdhHY/lFVaXlML0kXTYhv/v/pKytrT3Oby5zIOuUOV/11+25rU+YkpnZePZ8AIhc0INW1iUGr4nF8w==",
+      "license": "MIT"
+    },
+    "node_modules/@formkit/validation": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formkit/validation/-/validation-2.0.0.tgz",
+      "integrity": "sha512-hAB2koAF9BPw3b2PnqQ4wyZa9QJ1X/T0r8ixBBuvgJpQFJM1YUBGM1FjuI7YmAEzrjghflriegbZK9IAFqTRcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@formkit/core": "^2.0.0",
+        "@formkit/observer": "^2.0.0",
+        "@formkit/utils": "^2.0.0"
+      }
+    },
+    "node_modules/@formkit/vue": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formkit/vue/-/vue-2.0.0.tgz",
+      "integrity": "sha512-mn0K+Gj2a6YZTCsL3rQk8F2AzOJTzWG7GwSgGJU1PmItMlzcKFkCC+kjqS4HpVCeSLRq5nUPlVsoxeSd2/pLNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@formkit/core": "^2.0.0",
+        "@formkit/dev": "^2.0.0",
+        "@formkit/i18n": "^2.0.0",
+        "@formkit/inputs": "^2.0.0",
+        "@formkit/observer": "^2.0.0",
+        "@formkit/rules": "^2.0.0",
+        "@formkit/themes": "^2.0.0",
+        "@formkit/utils": "^2.0.0",
+        "@formkit/validation": "^2.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.4.0"
+      }
+    },
    "node_modules/@graphql-typed-document-node/core": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
@@ -11477,6 +11647,49 @@
        "node": "^20.19.0 || >=22.12.0"
      }
    },
+    "node_modules/unplugin-formkit": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/unplugin-formkit/-/unplugin-formkit-0.2.13.tgz",
+      "integrity": "sha512-qNHz7/0QDO0uVD5MoUZz49CI7q8cHM24RQDwbs5NfRJ6EiyZ1gBmWq9ta3QHR2nD7xacXV+yzmfDbnwlNpkzsg==",
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^1.1.1",
+        "unplugin": "^1.4.0"
+      },
+      "peerDependenciesMeta": {
+        "esbuild": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-formkit/node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "license": "MIT"
+    },
+    "node_modules/unplugin-formkit/node_modules/unplugin": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.16.1.tgz",
+      "integrity": "sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/unplugin-utils": {
      "version": "0.3.1",
      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.1.tgz",
--- a/package.json
+++ b/package.json
@@ -10,6 +10,20 @@
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
+    "@formkit/nuxt": "^2.0.0",
+    "@formkit/vue": "^2.0.0",
+    "@formkit/themes": "^2.0.0",
+    "@tauri-apps/api": "^2",
+    "@tauri-apps/plugin-opener": "^2",
+    "bcryptjs": "^3.0.3",
+    "crypto-js": "^4.2.0",
+    "embla-carousel-vue": "^8.6.0",
+    "moment": "^2.30.1",
+    "process": "^0.11.10",
+    "sloc": "^0.3.2",
+    "striptags": "^3.2.0",
+    "vscode-langservers-extracted": "^4.10.0",
+
    "@nuxtjs/tailwindcss": "^6.14.0",
    "graphql-request": "^7.4.0",
    "jarallax": "^3.0.0",
@@ -21,6 +35,7 @@
  },
  "devDependencies": {
    "@tauri-apps/cli": "^2.10.1",
-    "sass-embedded": "^1.99.0"
+    "sass-embedded": "^1.99.0",
+    "@types/markdown-it": "^14.1.2"
  }
 }