ritzenbergen-frontend/app/pages/adminpanel/Formulare.vue

<script setup lang="ts">
import { useRoute } from "vue-router";
import { ref } from "vue";
import AdminNavbar from "../../components/admin/AdminNavbar.vue";
import RitzenbergenLib from "../../ritzenbergenlib.ts";
import InputP from "../../components/admin/InputP.vue";
import FormResults from "../../components/FormResults.vue";

const route = useRoute();

const token = ref(route.params.token);

const formulare: RitzenbergenLib.Formular[] = ref([]);
RitzenbergenLib.Formular.getForms().then(
	(result) => (formulare.value = result)
);

async function saveForm(form) {
		return fetch(RitzenbergenLib.RitzenbergenLib.api("/admin/formulare/updateForm.php"),{
				method: "POST",
				body: JSON.stringify(form),
				headers: {
						"Content-Type":"application/json",
						"Authorization":"Bearer "+token.value
				}
		}) 
}
async function deleteForm(form){
		const url=new URL(RitzenbergenLib.RitzenbergenLib.api("/admin/formulare/deleteForm.php"));
		url.searchParams.set("id",form.id);
		return fetch(url,{
				headers: {
						"Authorization":"Bearer "+token.value
				}
		})
		.then((response) => {
			if (response.ok)
				RitzenbergenLib.Formular.getForms().then(
					(result) => (formulare.value = result)
				);
				return response;
		})

}
function filterType(type: string) {
	if (type in ["radio", "checkbox"]) return "text";
	return type;
}
async function newForm() {
	return fetch(RitzenbergenLib.RitzenbergenLib.api("/admin/formulare/newForm.php"),{
		headers: {
				"Authorization":"Bearer "+token.value
		}
	})
		.then((response) => {
			if (response.ok)
				RitzenbergenLib.Formular.getForms().then(
					(result) => (formulare.value = result)
				);
				return response;
		})
		.then((response) => response.json());
}
</script>
<template>
	<AdminNavbar />
	<br />
	<br />
	<br />
	<br />
	<br />
	<h1>Formulare</h1>
	<div class="formeditor">
		<form
			@submit.prevent="saveForm(form)"
			v-for="(form, i) in formulare"
			:key="i"
		>
		<input type="text" placeholder="Name" v-model="form.name"/><br>
		<input type="text" placeholder="Minitext (Ergebnisse anzeigen-Button)" v-model="form.minitext"/><br>
		<label for="publicCheckbox">Ergebnisse veröffentlichen</label>
		<input type="checkbox" id="publicCheckbox" v-model="form.ispublic"/><br>
		<label for="multipleCheckbox">Mehrfacheinträge zulassen</label>
		<input type="checkbox" id="multipleCheckbox" v-model="form.multiple"/><br> 
			*: Muss gesetzt werden
			<table>
				<thead>
					<tr>
							<td>ID</td>
						<td>Name *</td>
						<td>Display-Name</td>
						<td>Value *</td>
						<td>Display-Value</td>
						<td>Placeholder</td>
						<td>Type *</td>
						<td>Title (Hover)</td>
						<td>Required *</td>
						<td>Max. Länge</td>
						<td>Minimum</td>
						<td>Maximum</td>
						<td>Checked (für Checkbox und Radio)</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(field, j) in form.fields" :key="j">
							<td>{{ field.id }}</td>
						<td>
							<InputP
								inputtype="text"
								:nullable="false"
								v-model="field.name"
							/>
						</td>
						<td>
							<InputP
								inputtype="text"
								:nullable="true"
								v-model="field.displayname"
							/>
						</td>
						<td>
							<InputP
								:inputtype="filterType(field.type)"
								:nullable="false"
								v-model="field.value"
							/>
						</td>
						<td>
							<InputP
								inputtype="text"
								:nullable="true"
								v-model="field.displayvalue"
							/>
						</td>
						<td>
							<InputP
								inputtype="text"
								:nullable="true"
								v-model="field.placeholder"
							/>
						</td>
						<td>
							<select v-model="field.type">
								<option value="text">Text</option>
								<option value="number">Zahl</option>
								<option value="range">Schieberegler</option>
								<option value="date">Datum</option>
								<option value="time">Zeit</option>
								<option value="checkbox">Checkbox</option>
								<option value="radio">Radio Button</option>
								<option value="color">Farbe</option>
								<option value="textarea">
									Mehrzeiliger Text
								</option>
							</select>
						</td>
						<td>
							<InputP
								inputtype="text"
								:nullable="true"
								v-model="field.title"
							/>
						</td>
						<td>
							<InputP
								inputtype="checkbox"
								:nullable="false"
								v-model="field.required"
							/>
						</td>
						<td>
							<InputP
								inputtype="number"
								:nullable="true"
								v-model="field.maxlength"
							/>
						</td>
						<td>
							<InputP
								inputtype="number"
								:nullable="true"
								v-model="field.min"
							/>
						</td>
						<td>
							<InputP
								inputtype="number"
								:nullable="true"
								v-model="field.max"
							/>
						</td>
						<td>
							<InputP
								inputtype="checkbox"
								:nullable="true"
								v-model="field.checked"
							/>
						</td>
					</tr>
					<tr>
						<td>
							<button
								@click="
									form.fields.push(
										new RitzenbergenLib.Field()
									)
								"
							>
								Neu
							</button>
						</td>
					</tr>
				</tbody>
			</table>
			<br />
			<input class="saveBtn" type="submit" value="Speichern" />
			<br />
			<input class="deleteBtn" type="button" value="Löschen (Doppelklick)" @dblclick="deleteForm(form)" />
		</form>
		<button class="newFormBtn deleteBtn" @click="newForm">Neues Formular</button>
		<br>
		<br>
	</div>
	<div class="formresults">
			<FormResults v-for="form in formulare.filter((el)=>el!=undefined)" :key="form" :form="form" :token="token"/>
	</div>
</template>
<style lang="scss" scoped>
@import "../../assets/css/bulitipp2.css";
thead tr td {
	background-color: #efefef;
}
.saveBtn {
	margin-left: 20%;
	margin-right: 20%;
}
label, p, i, h1, h2 {
		text-align: center;
}
.formresults{
		overflow: scroll;
}
input{
		max-width: 300px;
}
form {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 3px solid black;
		border-radius: 10px;
		margin: 20px;
		padding: 30px;
}
.deleteBtn {
		padding: 12px 20px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: background-color 0.3s ease;
		text-align: center;
		background-color: #cc0000;
		color: white;
}
.deleteBtn:hover{
		background-color: #aa0000;
}
.newFormBtn{
		background-color: #0000ff;
}
.newFormBtn:hover{
		background-color: #0000aa;
}
.formeditor {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
}
</style>