Forms werden jetzt über API geholt

src/components/startseite/Forms.vue

@@ -1,62 +1,110 @@
-<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">
+      <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">
+              <h3
-            <strong>Überschrift</strong>
+                class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
-          </h3><br>
+              >
-          <h5 style="text-align: center;"><b></b> <br>
+                <strong>{{ form.ueberschrift }}</strong>
-            Inhalt</h5><br>
+              </h3>
-          if public
+              <br />
+              <h5 style="text-align: center">
+                <b></b> <br />
+                {{ form.inhalt }}
+              </h5>
+              <br />
 
-
+              <Modal v-if="form.public" @closemodal="openedModals.splice(openedModals.indexOf(form.id), 1)" v-show="openedModals.includes(form.id)">
-            <div class="modal-container">
+                  <h1>{{ form.modalueberschrift }}</h1>
-              <div class="modal">
-
-                <div class="modal-content">
-                  <span class="closeBtn" style="cursor: pointer;">x</span>
-                  <h1>Modal-Überschrift</h1>
                   Ergebnisse
-                </div>
+              </Modal>
-
+              <p style="text-align: center" @click="openedModals.push(form.id)">{{ process_minitext(form.minitext) }}<br /><br /></p>
-              </div>
-              <br><br>
-            </div>
-            else
-            <p style="text-align: center;">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"
+            <form
-          data-form-title="Form Name" onsubmit="return false;"><input type="hidden" name="email"
+              class="mbr-form form-with-styler"
-            data-form-email="true" value="">
+              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"
+                  <input
-                data-form-field="name" class="form-control" value="" id="name-form02-0">
+                    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"
+                  <input
-                data-form-field="textarea" class="form-control" id="textarea-form02-0">
+                    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">
+                <div
-              <button type="submit" class="btn btn-primary display-7 formular-submit-button">Absenden</button>
+                  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>
@@ -64,6 +112,4 @@ export default {
     </section>
   </section>
 </template>
-<style>
+<style></style>
-
-</style>