Add Form Support

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>

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">

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"

app/pages/adminpanel/login.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";
 		
 		
 

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";
 

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: {

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>

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
+    }
+  }
+});