R40fendt/ritzenbergen-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Forms werden jetzt über API geholt

Browse Source
This commit is contained in:
R40fendt
2025-04-16 22:33:40 +02:00
parent c55aea0785
commit 42bb533638
1 changed files with 106 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/components/startseite/Forms.vue
View File

@@ -1,69 +1,115 @@
<script>
<script lang="ts">
import $ from "jquery";
import RitzenbergenLib from "../../ritzenbergenlib";
import Modal from "../Modal.vue";
export default {
data(){
return {
openedModals: []
}
},
computed: {
forms(){
let result:any[]=[];
$.ajax(RitzenbergenLib.api("/get_forms.php"),{
async: false,
crossDomain: true,
success: function(data:string){
result=JSON.parse(data);
console.log(result);
},
});
return result;
}
},
components: {
Modal
},
methods:{
process_minitext(minitext:string){
let count=0;
return minitext.replace("{0}",count.toString());
//return minitext;
}
}
};
</script>
<template>
<section id="anmeldeformular">
<section class="form5 cid-u6k7q0BfGa">
<div class="container">
<section id="anmeldeformular">
<section class="form5 cid-u6k7q0BfGa">
<div class="container" v-for="form 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>Überschrift</strong>
</h3><br>
<h5 style="text-align: center;"><b></b> <br>
Inhalt</h5><br>
if public
<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 />
<div class="modal-container">
<div class="modal">
<div class="modal-content">
<span class="closeBtn" style="cursor: pointer;">x</span>
<h1>Modal-Überschrift</h1>
<Modal v-if="form.public" @closemodal="openedModals.splice(openedModals.indexOf(form.id), 1)" v-show="openedModals.includes(form.id)">
<h1>{{ form.modalueberschrift }}</h1>
Ergebnisse
</div>
</div>
<br><br>
</div>
else
<p style="text-align: center;">Minitext<br><br>
</p>
</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 action="formularergebnisse-eintragen.php" method="POST" class="mbr-form form-with-styler"
data-form-title="Form Name" onsubmit="return false;"><input type="hidden" name="email"
data-form-email="true" value="">
<form
class="mbr-form form-with-styler"
data-form-title="Form Name"
@submit.prevent
>
<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="Label1"
data-form-field="name" class="form-control" value="" id="name-form02-0">
<input
type="text"
maxlength="128"
name="name"
:placeholder="form.labelone"
data-form-field="name"
class="form-control"
value=""
id="name-form02-0"
/>
</div>
<div class="col-12 form-group mb-3" data-for="textarea">
<input type="text" name="textarea" maxlength="128" placeholder="Label2"
data-form-field="textarea" class="form-control" id="textarea-form02-0">
<input
type="text"
name="textarea"
maxlength="128"
:placeholder="form.labeltwo"
data-form-field="textarea"
class="form-control"
id="textarea-form02-0"
/>
</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
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="<?php echo $id; ?>" name="id">
<input type="hidden" :value="form.id" name="id" />
</form>
</div>
</div>
</div>
</section>
</section>
</section>
</section>
</template>
<style>
</style>
<style></style>