Add Nuxt

app/components/startseite/Forms.vue

@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+import RitzenbergenLib from "../../ritzenbergenlib";
+import FormResults from "../FormResults.vue";
+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[] }>(`
+{
+	formulare {
+		id
+		name
+		minitext
+		ispublic
+		fields {
+			id
+			name
+			displayname
+			displayvalue
+			placeholder
+			type
+			title
+			required
+			maxlength
+			min
+			max
+			checked
+			value
+		}
+	}
+}
+`
+	).then(data=>data.formulare);
+
+	console.log(forms.value);
+}
+
+const forms = ref([] as Formular[]);
+
+const props=defineProps({
+		formid: {
+				type: [Number, null],
+				required: false,
+				default: null 
+		}
+});
+
+init();
+
+function submit($event: Event) {
+	const url = new URL(
+		RitzenbergenLib.RitzenbergenLib.api("/formulare/submit.php")
+	);
+	const formData = new FormData(<HTMLFormElement>$event.target); 
+	fetch(url.toString(), {
+		method: "POST",
+		body: formData	
+	}).then(() => {
+		init();
+		values.value={};
+	});
+}
+
+const modalOpened=ref<boolean>(false);
+
+const openedForm=ref<Formular|null>(null);
+
+function openModal(form: Formular){
+	openedForm.value=form;
+	modalOpened.value=true;
+}
+
+const values=ref({});
+</script>
+<template>
+		<Modal v-if="openedForm && openedForm.ispublic" v-show="modalOpened" @closemodal="modalOpened=false">
+		<FormResults v-if="modalOpened" :form="openedForm"/>
+		</Modal>
+	<section ref="anmeldeformular" id="anmeldeformular">
+		<section class="form5 cid-u6k7q0BfGa">
+				<div class="container" v-for="(form, i) in forms" :key="i">
+				<div class="row justify-content-center">
+					<div class="col-12 content-head">
+						<div class="mbr-section-head mb-5">
+							<h3
+								class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
+							>
+								<strong>{{ form.name }}</strong>
+							</h3>
+							<br />
+							<h5 style="text-align: center">
+								<b @click="openModal(form)" class="fakelink" v-if="form.ispublic">{{ form.minitext }}
+								</b> <b v-else>{{ form.minitext }}</b> <br />
+															</h5>
+							<br />
+						</div>
+					</div>
+				</div>
+				<div class="row justify-content-center">
+					<div
+						class="col-lg-8 mx-auto mbr-form"
+						data-form-type="formoid"
+					>
+						<form
+							class="mbr-form form-with-styler"
+							data-form-title="Form Name"
+							:data-formid="form.id"
+							:data-i="i"
+							@submit.prevent="submit"
+						>
+							<div v-for="(field, j) in form.fields" :key="j">
+								<label
+									v-if="field.placeholder == null"
+									:for="'field-' + field.id"
+								>
+									{{
+										field.displayvalue ?? field.displayname ?? field.name
+									}}:
+								<span v-if="field.type == 'range'"
+									><br />{{ values[field.id] }}</span
+								>
+								</label>
+								<FormKit
+									v-if="field.type != 'textarea'"
+									:id="'field-' + field.id"
+									:type="field.type"
+									:name="field.name"
+									:placeholder="field.placeholder"
+									:required="field.required"
+									:maxlength="field.maxlength"
+									:min="field.min"
+									:max="field.max"
+									:checked="field.checked"
+									:title="field.title"
+									:value="field.value"
+									v-model="values[field.id]"
+
+								/>
+								<textarea
+									v-else
+									:id="'field-' + field.id"
+									:name="field.name"
+									:placeholder="field.placeholder"
+									:required="field.required"
+									:maxlength="field.maxlength"
+									:title="field.title"
+									:value="field.value"
+								></textarea>
+								
+							</div>
+
+							<div
+								class="col-lg-12 col-md-12 col-sm-12 align-center mbr-section-btn"
+							>
+								<button
+									type="submit"
+									class="btn btn-primary display-7 formular-submit-button"
+								>
+									Absenden
+								</button>
+							</div>
+							<input type="hidden" :value="form.id" name="internalformid" />
+						</form>
+					</div>
+				</div>
+				<br/>
+				<br/>
+				<br/>
+				<br/>
+			</div>
+		</section>
+	</section>
+</template>
+<style scoped>
+label {
+	margin-right: 10px;
+}
+.fakelink{
+		color: blue;
+		text-decoration: underline;
+		cursor: pointer;
+}
+</style>