From b5506cb44ccf752dcac37e356b4eee38264abd98 Mon Sep 17 00:00:00 2001
From: R40fendt <r40test311@gmail.com>
Date: Wed, 24 Dec 2025 00:26:44 +0100
Subject: [PATCH] =?UTF-8?q?Forms=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                          |   1 -
 manifest.json                       |  52 ----
 src/components/FormResults.vue      |  93 +++++++
 src/components/startseite/Forms.vue | 304 ++++++++++------------
 src/ritzenbergenlib.ts              | 374 ++++++++++++++++++++--------
 5 files changed, 493 insertions(+), 331 deletions(-)
 delete mode 100755 manifest.json
 create mode 100644 src/components/FormResults.vue

diff --git a/index.html b/index.html
index cb737b5..9a4780d 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,6 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
-    <link rel="manifest" href="./manifest.json">
     <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap" as="style"
       onload="this.onload=null;this.rel='stylesheet'">
     <noscript>
diff --git a/manifest.json b/manifest.json
deleted file mode 100755
index 9de1eaa..0000000
--- a/manifest.json
+++ /dev/null
@@ -1,52 +0,0 @@
-{
-  "name": "Amedorf & Ritzenbergen",
-  "short_name": "ritzenbergen.de",
-  "theme_color": "#FFBF00",
-  "background_color": "#FE9A2E",
-  "display": "fullScreen",
-  "orientation": "portrait",
-  "scope": "/",
-  "start_url": "https://ritzenbergen.netlify.app/",
-  "icons": [
-    {
-      "src": "images/icons/icon-72x72.png",
-      "sizes": "72x72",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/icon-96x96.png",
-      "sizes": "96x96",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/icon-128x128.png",
-      "sizes": "128x128",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/icon-144x144.png",
-      "sizes": "144x144",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/icon-152x152.png",
-      "sizes": "152x152",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/icon-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/icon-384x384.png",
-      "sizes": "384x384",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/icon-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/src/components/FormResults.vue b/src/components/FormResults.vue
new file mode 100644
index 0000000..f782fc6
--- /dev/null
+++ b/src/components/FormResults.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import RitzenbergenLib from "../ritzenbergenlib.ts";
+import { defineProps, ref } from "vue";
+
+const props = defineProps({
+	form: {
+		type: RitzenbergenLib.Formular,
+		required: true,
+	},
+});
+
+const form = props.form;
+
+let results = ref([]);
+fetch(
+	RitzenbergenLib.RitzenbergenLib.api(
+		"/formulare/get_results.php?id=" + form.id
+	)
+)
+	.then((res) => res.json())
+	.then((data) => {
+		results.value = data;
+	});
+const myfields = [];
+form.fields.forEach((field: RitzenbergenLib.Field) => {
+	if (myfields.find((el) => el.name == field.name) == undefined) {
+		myfields.push(field);
+	}
+});
+
+function prettyResult(result: any) {
+	if (result == undefined) {
+		return "";
+	}
+	if (result.value instanceof Array) {
+		let tempresult = result.value;
+		let cancel = false;
+		tempresult = tempresult.map((el) => {
+			let field = form.fields.find((f) => f.value == el);
+			if (field == undefined) {
+				cancel = true;
+				return el;
+			}
+			return field.displayvalue ?? el;
+		});
+		if (!cancel) result.value = tempresult;
+
+		return result.value.join(", ");
+	}
+	if (result.type == "radio") {
+		let field = form.fields.find((f) => f.value == result.value);
+		if (field != undefined) {
+			return field.displayvalue ?? result.value;
+		}
+	}
+	return result.value;
+}
+</script>
+
+<template>
+	<h1>Ergebnisse {{ form.name }}</h1>
+	<table>
+		<thead>
+			<tr>
+				<td v-for="(field, i) in myfields" :key="i">
+					{{ field.displayname ?? field.name }}
+				</td>
+				<td>Zeitstempel</td>
+			</tr>
+		</thead>
+		<tbody>
+			<tr v-for="(result, ri) in results" :key="ri">
+					<td v-for="(field, fi) in myfields" :key="fi" :style="field.type=='color'?{ 'backgroundColor': result.data.find((el) => el.name == field.name).value, width: '10px', height: '10px' }:{}">
+						<span v-if="field.type!='color'">{{
+						prettyResult(
+							result.data.find(
+								(el) =>
+									el.name == field.name ||
+									el.name + "[]" == field.name
+							)
+						)
+					}}</span>
+						<span v-else ></span>
+				</td>
+				<td>{{ result.timestamp }}</td>
+			</tr>
+		</tbody>
+	</table>
+</template>
+
+<style scoped>
+@import "../assets/css/bulitipp2.css";
+</style>
diff --git a/src/components/startseite/Forms.vue b/src/components/startseite/Forms.vue
index 744bd29..47229d0 100644
--- a/src/components/startseite/Forms.vue
+++ b/src/components/startseite/Forms.vue
@@ -1,183 +1,135 @@
-<script lang="ts">
-import $ from "jquery";
-import RitzenbergenLib from "../../ritzenbergenlib";
+<script lang="ts" setup>
+import RitzenbergenLib from "../../ritzenbergenlib.ts";
+import FormResults from "../FormResults.vue";
+import { ref } from "vue";
 import Modal from "../Modal.vue";
-export default {
-  data() {
-    return {
-      openedModals: [],
-      formValues: [],
-      RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
-    };
-  },
-  computed: {
-    forms() {
-      let result: any[] = [];
-      $.ajax(RitzenbergenLib.RitzenbergenLib.api("/get_forms.php"), {
-        async: false,
-        crossDomain: true,
-        success: function (data: string) {
-          result = JSON.parse(data);
-          console.log(result);
-        },
-      });
-      result.forEach((element) => {
-        this.formValues.push({
-          value1: "",
-          value2: "",
-        });
-      });
-      return result;
-    }
-  },
-  mounted(){
-    if(this.$route.path=="/anmeldeformular"){
-      const hash = this.$route.path.replace("/","");
-      console.log(this.$refs[hash])
-      this.$refs[hash].scrollIntoView();
-      this.$router.push("/");
-    }
-  },
-  components: {
-    Modal,
-  },
-  methods: {
-    process_minitext(minitext: string) {
-      let count = 0;
-      return minitext.replace("{0}", count.toString());
-      //return minitext;
-    },
-    submit(event) {
-      let value1 = this.formValues[event.target.dataset.i].value1;
-      let value2 = this.formValues[event.target.dataset.i].value2;
-      let formid = event.target.dataset.formid;
 
-      $.ajax(RitzenbergenLib.api("submit_form.php"), {
-        async: false,
-        crossDomain: true,
-        data: { formid, value1, value2 },
-      });
+const Formular = RitzenbergenLib.Formular;
+const Field = RitzenbergenLib.Field;
+const forms = ref([] as Formular[]);
+Formular.getForms().then((f) => {
+	forms.value = f;
+});
+
+function submit($event: Event) {
+	const url = new URL(
+		RitzenbergenLib.RitzenbergenLib.api("/formulare/submit.php")
+	);
+	const formData = new FormData($event.target); 
+	fetch(url.toString(), {
+		method: "POST",
+		body: formData	
+		}).then(() => {
+		forms.value = Formular.getForms().then((f) => {
+			forms.value = f;
+		});
+	});
+}
+
+const modalOpened=ref<boolean>(false);
+
+const openedForm=ref<Formular|null>(null);
+
+function openModal(form: Formular){
+	openedForm.value=form;
+	modalOpened.value=true;
+}
 
-      console.log(formid, value1, value2);
-    },
-    formresults(formid){
-      let result: any[] = [];
-      $.ajax(RitzenbergenLib.RitzenbergenLib.api("/get_ergebnisse.php"), {
-        async: false,
-        crossDomain: true,
-        success: function (data: string) {
-          result = JSON.parse(data);
-        },
-        data: {formid}
-      });
-      return result;
-    }
-  },
-};
 </script>
 <template>
-  <section ref="anmeldeformular" id="anmeldeformular">
-    <section class="form5 cid-u6k7q0BfGa">
-      <div class="container" v-for="(form, i) in forms">
-        <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.ueberschrift }}</strong>
-              </h3>
-              <br />
-              <h5 style="text-align: center">
-                <b></b> <br />
-                {{ form.inhalt }}
-              </h5>
-              <br />
+		<Modal v-show="modalOpened" @closemodal="modalOpened=false">
+		<FormResults v-if="openedForm" :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)">{{ 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
+									}}:
+								</label>
+								<input
+									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"
+								/>
+								<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>
+								<span v-if="field.type == 'range'"
+									><br />{{ field.value }}</span
+								>
+							</div>
 
-              <Modal
-                v-if="form.public"
-                @closemodal="
-                  openedModals.splice(openedModals.indexOf(form.id), 1)
-                "
-                v-show="openedModals.includes(form.id)"
-              >
-                <h1>{{ form.modalueberschrift }}</h1>
-                <table>
-                  <tbody>
-                    <tr>
-                      <td>{{ form.labelone }}</td>
-                      <td>{{ form.labeltwo }}</td>
-                      <td>Datum</td>
-                    </tr>
-                    <tr v-for="result in formresults(form.id)">
-                      <td>{{ result.value1 }}</td>
-                      <td>{{ result.value2 }}</td>
-                      <td>{{ result.timestamp }}</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </Modal>
-              <p style="text-align: center" @click="openedModals.push(form.id)">
-                {{ process_minitext(form.minitext) }}<br /><br />
-              </p>
-            </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"
-              @submit.prevent="submit"
-              :data-formid="form.id"
-              :data-i="i"
-            >
-              <div class="dragArea row">
-                <div class="col-md col-sm-12 form-group mb-3" data-for="name">
-                  <input
-                    type="text"
-                    maxlength="128"
-                    name="name"
-                    :placeholder="form.labelone"
-                    data-form-field="name"
-                    class="form-control"
-                    value=""
-                    id="name-form02-0"
-                    v-model="formValues[i].value1"
-                    required
-                  />
-                </div>
-
-                <div class="col-12 form-group mb-3" data-for="textarea">
-                  <input
-                    type="text"
-                    name="textarea"
-                    maxlength="128"
-                    :placeholder="form.labeltwo"
-                    data-form-field="textarea"
-                    class="form-control"
-                    id="textarea-form02-0"
-                    v-model="formValues[i].value2"
-                    required
-                  />
-                </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>
-              </div>
-              <input type="hidden" :value="form.id" name="id" />
-            </form>
-          </div>
-        </div>
-      </div>
-    </section>
-  </section>
+							<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>
+			</div>
+		</section>
+	</section>
 </template>
-<style></style>
+<style scoped>
+label {
+	margin-right: 10px;
+}
+</style>
diff --git a/src/ritzenbergenlib.ts b/src/ritzenbergenlib.ts
index 3b9a3cd..cc065a7 100644
--- a/src/ritzenbergenlib.ts
+++ b/src/ritzenbergenlib.ts
@@ -1,127 +1,297 @@
 import $ from "jquery";
+import { ref } from "vue";
 class User {
-  public username: string;
-  public kuerzel: string;
-  public points: number;
-  public id: number;
-  constructor (username: string, kuerzel: string, points: number, id: number) {
-    this.username = username;
-    this.kuerzel = kuerzel;
-    this.points=points;
-    this.id=id;
-  }
-  hatgetippt():boolean{
-    var hatgetippt=false;
-    $.ajax(RitzenbergenLib.api("/bulitipp/hatgetippt.php?userid="+this.id),{
-      async: false,
-      success(response): any{
-        hatgetippt=response==1;
-				console.log(response);
-      }
-    });
-    return hatgetippt;
-  }
+	public username: string;
+	public kuerzel: string;
+	public points: number;
+	public id: number;
+	constructor(username: string, kuerzel: string, points: number, id: number) {
+		this.username = username;
+		this.kuerzel = kuerzel;
+		this.points = points;
+		this.id = id;
+	}
+	hatgetippt(): boolean {
+		var hatgetippt = false;
+		$.ajax(
+			RitzenbergenLib.api("/bulitipp/hatgetippt.php?userid=" + this.id),
+			{
+				async: false,
+				success(response): any {
+					hatgetippt = response == 1;
+					console.log(response);
+				},
+			}
+		);
+		return hatgetippt;
+	}
 }
 
 class SpieltagSumme {
-  public user: User;
-  public tsPoints: number;
-  constructor (user: User, tsPoints: number) {
-    this.user = user;
-    this.tsPoints = tsPoints;
-  }
+	public user: User;
+	public tsPoints: number;
+	constructor(user: User, tsPoints: number) {
+		this.user = user;
+		this.tsPoints = tsPoints;
+	}
 }
 
 class RitzenbergenLib {
-  static get_img(mypath: string) {
-    if(mypath.startsWith("/")) return "https://bilder.ritzenbergen.de"+mypath;
-    else return "https://bilder.ritzenbergen.de/"+mypath;
-  }
-  static api(path:string){
-    if(path.startsWith("/")) return "http://192.168.188.38/Jonas/ritzenbergenapi"+path;
-    else return "http://192.168.188.38/Jonas/ritzenbergenapi/"+path;
-  }
+	static get_img(mypath: string) {
+		if (mypath.startsWith("/"))
+			return "https://bilder.ritzenbergen.de" + mypath;
+		else return "https://bilder.ritzenbergen.de/" + mypath;
+	}
+	static api(path: string) {
+		if (path.startsWith("/"))
+			return "http://192.168.188.38/Jonas/ritzenbergenapi" + path;
+		else return "http://192.168.188.38/Jonas/ritzenbergenapi/" + path;
+	}
 }
 
 class Paarung {
-  public heim: string;
-  public gast: string;
-  public id: number;
-  constructor (heim: string, gast: string, id: number) {
-    this.heim = heim;
-    this.gast = gast;
-    this.id=id;
-  }
+	public heim: string;
+	public gast: string;
+	public id: number;
+	constructor(heim: string, gast: string, id: number) {
+		this.heim = heim;
+		this.gast = gast;
+		this.id = id;
+	}
 }
 
 class Ergebnis {
-  paarung: Paarung;
-  heim: number;
-  gast: number;
-  constructor (paarung: Paarung, heim: number, gast: number) {
-    this.paarung = paarung;
-    this.heim = heim;
-    this.gast = gast;
-  }
+	paarung: Paarung;
+	heim: number;
+	gast: number;
+	constructor(paarung: Paarung, heim: number, gast: number) {
+		this.paarung = paarung;
+		this.heim = heim;
+		this.gast = gast;
+	}
 }
 
-class Tipp{
-  heim: number|null;
-  gast: number|null;
-  paarung: Paarung|null;
+class Tipp {
+	heim: number | null;
+	gast: number | null;
+	paarung: Paarung | null;
 
-  constructor (paarung: Paarung|null, heim: number|null, gast: number|null) {
-    this.heim = heim;
-    this.gast = gast;
-    this.paarung = paarung;
-  }
+	constructor(
+		paarung: Paarung | null,
+		heim: number | null,
+		gast: number | null
+	) {
+		this.heim = heim;
+		this.gast = gast;
+		this.paarung = paarung;
+	}
 }
 
 class Spiel {
-		public paarung: Paarung;
-		public result: [number, number]|null;
-		public tipp: [number, number]|null;
-		
-		constructor (paarung: Paarung, result: [number, number], tipp: [number, number]|null) {
-			this.paarung = paarung;
-			this.result = result;
-			this.tipp = tipp;
-		}
-		public calcPoints(){
-      if(this.tipp==null) return 0;
-      if(this.result[0]==this.tipp[0] && this.result[1]==this.tipp[1]) return 3;
-      let differenztipp=this.tipp[0]-this.tipp[1];
-      let differenz=this.result[0]-this.result[1];
-      if(differenztipp==differenz) return 2;
-      if(
-        (this.tipp[0]>this.tipp[1] && this.result[0]>this.result[1]) ||
-        (this.tipp[0]<this.tipp[1] && this.result[0]<this.result[1])
-      ) return 1;
-      return 0;
-    }
-		public static async fetchSpiele(spieltag: number, userid: number):Spiel[]{
-				let params=new URLSearchParams({
-          spieltag: spieltag+1,
-          user: userid
-        });
-        return fetch(RitzenbergenLib.api("/bulitipp/spieltag-user.php?")+params.toString()).then((response)=>{
-          return response.json();
-        }).then((data)=>{
-          return data.data;
-				}).then((data)=>{
-						return data.map((el)=>{
-								return new Spiel(new Paarung(el.paarung.heim, el.paarung.gast, el.paarung.id),el.result, el.tipp);
-						});
+	public paarung: Paarung;
+	public result: [number, number] | null;
+	public tipp: [number, number] | null;
+
+	constructor(
+		paarung: Paarung,
+		result: [number, number],
+		tipp: [number, number] | null
+	) {
+		this.paarung = paarung;
+		this.result = result;
+		this.tipp = tipp;
+	}
+	public calcPoints() {
+		if (this.tipp == null) return 0;
+		if (this.result[0] == this.tipp[0] && this.result[1] == this.tipp[1])
+			return 3;
+		let differenztipp = this.tipp[0] - this.tipp[1];
+		let differenz = this.result[0] - this.result[1];
+		if (differenztipp == differenz) return 2;
+		if (
+			(this.tipp[0] > this.tipp[1] && this.result[0] > this.result[1]) ||
+			(this.tipp[0] < this.tipp[1] && this.result[0] < this.result[1])
+		)
+			return 1;
+		return 0;
+	}
+	public static async fetchSpiele(spieltag: number, userid: number): Spiel[] {
+		let params = new URLSearchParams({
+			spieltag: spieltag + 1,
+			user: userid,
+		});
+		return fetch(
+			RitzenbergenLib.api("/bulitipp/spieltag-user.php?") +
+				params.toString()
+		)
+			.then((response) => {
+				return response.json();
+			})
+			.then((data) => {
+				return data.data;
+			})
+			.then((data) => {
+				return data.map((el) => {
+					return new Spiel(
+						new Paarung(
+							el.paarung.heim,
+							el.paarung.gast,
+							el.paarung.id
+						),
+						el.result,
+						el.tipp
+					);
 				});
+			});
+	}
+}
+class Formular {
+	public id: number;
+	public name: string;
+	public minitext: string;
+	public ispublic: boolean;
+	public multiple: boolean;
+	public fields=ref<Field[]>([]);
+	constructor(
+		id: number,
+		name: string,
+		minitext: string,
+		ispublic: boolean,
+		multiple: boolean
+	) {
+		this.id = id;
+		this.name = name;
+		this.minitext = minitext;
+		this.ispublic = ispublic;
+		this.multiple = multiple;
+		this.getFields().then((fields)=>this.fields.value=fields);
+	}
+	public static async getForms(): Promise<Formular[]> {
+		let forms: Formular[] = [];
+		forms = await fetch(
+			RitzenbergenLib.api("/formulare/get_formulare.php"),
+			{
+				method: "GET",
+			}
+		)
+			.then((response) => response.json())
+			.then((result) =>
+				result.map(
+					(el: any) =>
+						new Formular(
+							el.id,
+							el.name,
+							el.minitext,
+							el.public,
+							el.multiple
+						)
+				)
+			);
+
+		return forms;
+	}
+	private async getFields(): Promise<Field[]> {
+		return fetch(
+			RitzenbergenLib.api(
+				"/formulare/get_fields.php?formular=" + this.id
+			),
+			{
+				method: "GET",
+			}
+		)
+			.then((response) => response.json())
+			.then((result) =>
+				result.map(
+					(el: any) =>
+						new Field(el.formular, el.name, el.value, el.type, {
+							id: el.id,
+							displayname: el.displayname,
+							displayvalue: el.displayvalue,
+							placeholder: el.placeholder,
+							title: el.title,
+							required: el.required == 1,
+							maxlength: el.maxlength,
+							min: el.min,
+							max: el.max,
+							multiple: el.multiple == 1,
+							checked: el.checked == 1,
+						})
+				)
+			);
+	}
+}
+type FieldType =
+	| "text"
+	| "password"
+	| "number"
+	| "range"
+	| "date"
+	| "time"
+	| "checkbox"
+	| "radio"
+	| "color"
+	| "submit"
+	| "textarea";
+
+class Field {
+	id?: number;
+	formular: number;
+	name: string;
+	displayname?: string | null;
+	value: string;
+	displayvalue?: string | null;
+	placeholder?: string | null;
+	type: FieldType;
+	title?: string | null;
+	required: boolean;
+	maxlength?: number | null;
+	min?: number | null;
+	max?: number | null;
+	checked?: boolean | null;
+	constructor(
+		formular: number,
+		name: string,
+		value: string,
+		type: FieldType,
+		options?: {
+			id?: number;
+			displayname?: string | null;
+			displayvalue?: string | null;
+			placeholder?: string | null;
+			title?: string | null;
+			required?: boolean;
+			maxlength?: number | null;
+			min?: number | null;
+			max?: number | null;
+			multiple?: boolean | null;
+			checked?: boolean | null;
 		}
+	) {
+		this.id = options?.id;
+		this.formular = formular;
+		this.name = name;
+		this.displayname = options?.displayname ?? null;
+		this.value = value;
+		this.displayvalue = options?.displayvalue ?? null;
+		this.placeholder = options?.placeholder ?? null;
+		this.type = type;
+		this.title = options?.title ?? null;
+		this.required = options?.required ?? false;
+		this.maxlength = options?.maxlength ?? null;
+		this.min = options?.min ?? null;
+		this.max = options?.max ?? null;
+		this.checked = options?.checked ?? null;
+	}
 }
 
 export default {
-  RitzenbergenLib,
-  User,
-  SpieltagSumme,
-  Paarung,
-  Ergebnis,
-  Tipp,
-	Spiel
-}
+	RitzenbergenLib,
+	User,
+	SpieltagSumme,
+	Paarung,
+	Ergebnis,
+	Tipp,
+	Spiel,
+	Formular,
+	Field,
+};