Forms hinzugefügt
This commit is contained in:
R40fendt
93
src/components/FormResults.vue
Normal file
93
src/components/FormResults.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user