Formulare im Admin Panel, Event Formular-Fremdschlüssel-Spalte hinzugefügt

README.md

@@ -10,3 +10,5 @@ Bei der Migration beachten:
 - Neue Formulartabelle
 - .env.production anpassen 
 - Salt ändern (secret.php in der API)
+- Event-Tabelle updaten (neue Formular-Spalte)
+- Admin-Tabellen hinzufügen

src/components/FormResults.vue

@@ -1,31 +1,54 @@
 <script lang="ts" setup>
 import RitzenbergenLib from "../ritzenbergenlib.ts";
-import { defineProps, ref } from "vue";
+import { defineProps, ref, watchEffect } from "vue";
 
 const props = defineProps({
 	form: {
 		type: RitzenbergenLib.Formular,
 		required: true,
 	},
+	token: {
+		type: String,
+		required: false,
+		default: ""
+	}
 });
 
-const form = props.form;
+const form = ref(props.form);
 
-let results = ref([]);
+
-fetch(
+const results = ref([]);
-	RitzenbergenLib.RitzenbergenLib.api(
+const myfields = ref([]);
-		"/formulare/get_results.php?id=" + form.id
+watchEffect(() => {
+	fetch(
+		RitzenbergenLib.RitzenbergenLib.api(
+			"/formulare/get_results.php?id=" + form.value.id
+		)
 	)
-)
+		.then((res) => res.json())
-	.then((res) => res.json())
+		.then((data) => {
-	.then((data) => {
+			if(data.error){
-		results.value = data;
+				// Admin Rechte nötig
+				fetch(RitzenbergenLib.RitzenbergenLib.api("/admin/formulare/ergebnisse.php?formular="+form.value.id),{
+						headers: {
+								"Authorization":props.token
+						}
+				})
+				.then((res)=>res.json())
+				.then((data)=>{
+						results.value=data;
+				})
+			} else {
+				results.value = data;
+			}
+		});
+
+	myfields.value = [];
+	form.value.fields.forEach((field: RitzenbergenLib.Field) => {
+		if (myfields.value.find((el) => el.name == field.name) == undefined) {
+			myfields.value.push(field);
+		}
 	});
-const myfields = [];
-form.fields.forEach((field: RitzenbergenLib.Field) => {
-	if (myfields.find((el) => el.name == field.name) == undefined) {
-		myfields.push(field);
-	}
 });
 
 function prettyResult(result: any) {
@@ -36,7 +59,7 @@ function prettyResult(result: any) {
 		let tempresult = result.value;
 		let cancel = false;
 		tempresult = tempresult.map((el) => {
-			let field = form.fields.find((f) => f.value == el);
+			let field = form.value.fields.find((f) => f.value == el);
 			if (field == undefined) {
 				cancel = true;
 				return el;
@@ -48,7 +71,7 @@ function prettyResult(result: any) {
 		return result.value.join(", ");
 	}
 	if (result.type == "radio") {
-		let field = form.fields.find((f) => f.value == result.value);
+		let field = form.value.fields.find((f) => f.value == result.value);
 		if (field != undefined) {
 			return field.displayvalue ?? result.value;
 		}
@@ -58,7 +81,9 @@ function prettyResult(result: any) {
 </script>
 
 <template>
+		
 	<h1>Ergebnisse {{ form.name }}</h1>
+	<div class="main">
 	<table>
 		<thead>
 			<tr>
@@ -70,8 +95,23 @@ function prettyResult(result: any) {
 		</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' }:{}">
+				<td
-						<span v-if="field.type!='color'">{{
+					v-if="result.data != undefined"
+					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) =>
@@ -80,17 +120,28 @@ function prettyResult(result: any) {
 							)
 						)
 					}}</span>
-						<span v-else ></span>
+					<span v-else></span>
 				</td>
 				<td>{{ result.timestamp }}</td>
 			</tr>
 		</tbody>
 	</table>
+	</div>
 </template>
 
 <style scoped>
 @import "../assets/css/bulitipp2.css";
 td {
-		min-width: 150px;
+	min-width: 150px;
+	min-height: 0;
+}
+tbody, table, .main{
+		overflow-x: scroll;
+}
+thead tr td {
+	background-color: #efefef;
+}
+h1 {
+		text-align: center;
 }
 </style>

src/components/MyFooter.vue

@@ -41,7 +41,7 @@ export default {
                   <br />
                   
                 </p>
-                <br /><br />
+								<RouterLink to="/adminpanel/login">Admin Login</RouterLink>
               </Modal>
 
               <button @click="aboutVisible=true" class="text-white btn-ueber openBtn">Über</button>

src/components/startseite/Events.vue

@@ -6,6 +6,7 @@ import Modal from "../Modal.vue";
 import $ from "jquery";
 import MarkdownRender from "vue-renderer-markdown";
 import "katex/dist/katex.min.css";
+import Forms from "./Forms.vue";
 
 export default {
 	data() {
@@ -27,7 +28,6 @@ export default {
 					result = JSON.parse(data);
 				},
 			});
-			console.log(result);
 			return result;
 			/*
       Beispiel-Event-Array:
@@ -40,7 +40,8 @@ export default {
           content: "# Test",
           link: undefined,
           foto: "erntefest/2011/pic08.jpg",
-					minitext: ""
+					minitext: "",
+					formular: 1 
         },
         {
           id: 1,
@@ -111,6 +112,7 @@ export default {
 	components: {
 		Modal,
 		MarkdownRender,
+		Forms
 	},
 };
 </script>
@@ -158,6 +160,7 @@ export default {
 							:content="event.content"
 						/>
 						<div v-else v-html="event.content"></div>
+						<Forms v-if="event.formular" :formid="event.formular"/>
 					</Modal>
 
 					<div class="item-wrapper">

src/components/startseite/Forms.vue

@@ -1,12 +1,23 @@
 <script lang="ts" setup>
 import RitzenbergenLib from "../../ritzenbergenlib.ts";
 import FormResults from "../FormResults.vue";
-import { ref } from "vue";
+import { ref, defineProps } from "vue";
 import Modal from "../Modal.vue";
 
 const Formular = RitzenbergenLib.Formular;
 const Field = RitzenbergenLib.Field;
 const forms = ref([] as Formular[]);
+
+const props=defineProps({
+		formid: {
+				type: [Number, null],
+				required: false,
+				default: null 
+		}
+});
+
+
+
 Formular.getForms().then((f) => {
 	forms.value = f;
 });
@@ -23,6 +34,8 @@ function submit($event: Event) {
 		forms.value = Formular.getForms().then((f) => {
 			forms.value = f;
 		});
+
+values.value={};
 	});
 }
 
@@ -38,12 +51,12 @@ function openModal(form: Formular){
 const values=ref({});
 </script>
 <template>
-		<Modal v-show="modalOpened" @closemodal="modalOpened=false">
+		<Modal v-if="openedForm && openedForm.ispublic" v-show="modalOpened" @closemodal="modalOpened=false">
-		<FormResults v-if="openedForm" :form="openedForm"/>
+		<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="container" v-for="(form, i) in forms.filter((form)=>form.id==props.formid||props.id==null)" :key="form">
 				<div class="row justify-content-center">
 					<div class="col-12 content-head">
 						<div class="mbr-section-head mb-5">
@@ -54,8 +67,8 @@ const values=ref({});
 							</h3>
 							<br />
 							<h5 style="text-align: center">
-								<b @click="openModal(form)" class="fakelink">{{ form.minitext }}
+								<b @click="openModal(form)" class="fakelink" v-if="form.ispublic">{{ form.minitext }}
-</b> <br />
+								</b> <b v-else>{{ form.minitext }}</b> <br />
 															</h5>
 							<br />
 						</div>
@@ -73,7 +86,7 @@ const values=ref({});
 							:data-i="i"
 							@submit.prevent="submit"
 						>
-							<div v-for="(field, j) in form.fields" :key="j">
+							<div v-for="(field, j) in form.fields" :key="field">
 								<label
 									v-if="field.placeholder == null"
 									:for="'field-' + field.id"
@@ -82,7 +95,7 @@ const values=ref({});
 										field.displayvalue ?? field.displayname ?? field.name
 									}}:
 								<span v-if="field.type == 'range'"
-									><br />{{ values[field.name] }}</span
+									><br />{{ values[field.id] }}</span
 								>
 								</label>
 								<FormKit
@@ -98,7 +111,7 @@ const values=ref({});
 									:checked="field.checked"
 									:title="field.title"
 									:value="field.value"
-									v-model="values[field.name]"
+									v-model="values[field.id]"
 
 								/>
 								<textarea
@@ -128,6 +141,10 @@ const values=ref({});
 						</form>
 					</div>
 				</div>
+				<br/>
+				<br/>
+				<br/>
+				<br/>
 			</div>
 		</section>
 	</section>

src/views/adminpanel/Events.vue

@@ -1,12 +1,26 @@
 <script lang="ts" setup>
-		import AdminNavbar from "../../components/admin/AdminNavbar.vue";
+import AdminNavbar from "../../components/admin/AdminNavbar.vue";
+import { useRoute } from "vue-router";
+import { ref } from "vue";
+
+const route = useRoute();
+
+const token = ref(route.params.token);
+
+
 
 </script>
 <template>
-		<AdminNavbar/>
+	<AdminNavbar />
-		<h1>Events</h1>
+	<br />
-
+	<br />
+	<br />
+	<br />
+	<br />
+	<h1>Events</h1>
 </template>
 <style scoped lang="scss">
-
+h1{
+		text-align: center;
+}
 </style>

src/views/adminpanel/Formulare.vue

@@ -4,6 +4,7 @@ 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();
 
@@ -24,6 +25,23 @@ async function saveForm(form) {
 				}
 		}) 
 }
+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;
@@ -49,8 +67,10 @@ async function newForm() {
 	<br />
 	<br />
 	<br />
+	<br />
+	<br />
 	<h1>Formulare</h1>
-	<div>
+	<div class="formeditor">
 		<form
 			@submit.prevent="saveForm(form)"
 			v-for="(form, i) in formulare"
@@ -195,9 +215,14 @@ async function newForm() {
 			<br />
 			<input class="saveBtn" type="submit" value="Speichern" />
 			<br />
-			<br />
+			<input class="deleteBtn" type="button" value="Löschen (Doppelklick)" @dblclick="deleteForm(form)" />
 		</form>
-		<button class="saveBtn" @click="newForm">Neues Formular</button>
+		<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>
@@ -209,7 +234,47 @@ thead tr td {
 	margin-left: 20%;
 	margin-right: 20%;
 }
-label, p, i {
+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>