Startseite fertig gemacht

src/components/Footer.vue

@@ -33,14 +33,12 @@ export default {
                   <br />
                   Bei dieser Seite handelt es sich um eine private Homepage der
                   Dorfgemeinschaft Amedorf & Ritzenbergen.
-                  <br /><br />
+                  <br /><br />y<
                   © Front-End und Web Design: Mathis Kuhlenkamp <br />
                   © Back-End und Datenbanken: Tom Kuhlenkamp, Jonas Kuhlenkamp
                   <br />
                   <br />
-                  <a href="./assets/AdminPanel/LoginFormular/loginform.html"
+                  
-                    >Administrations Login</a
-                  >
                 </p>
                 <br /><br />
               </Modal>

src/components/startseite/Forms.vue

@@ -5,8 +5,10 @@ import Modal from "../Modal.vue";
 export default {
   data() {
     return {
-      openedModals: []
+      openedModals: [],
-    }
+      formValues: [],
+      RitzenbergenLib,
+    };
   },
   computed: {
     forms() {
@@ -19,25 +21,56 @@ export default {
           console.log(result);
         },
       });
+      result.forEach((element) => {
+        this.formValues.push({
+          value1: "",
+          value2: "",
+        });
+      });
       return result;
     }
   },
   components: {
-    Modal
+    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 },
+      });
+
+      console.log(formid, value1, value2);
+    },
+    formresults(formid){
+      let result: any[] = [];
+      $.ajax(RitzenbergenLib.api("/get_ergebnisse.php"), {
+        async: false,
+        crossDomain: true,
+        success: function (data: string) {
+          result = JSON.parse(data);
+        },
+        data: {formid}
+      });
+      return result;
     }
-  }
+  },
 };
 </script>
 <template>
   <section id="anmeldeformular">
     <section class="form5 cid-u6k7q0BfGa">
-      <div class="container" v-for="form in forms">
+      <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">
@@ -53,11 +86,32 @@ export default {
               </h5>
               <br />
 
-              <Modal v-if="form.public" @closemodal="openedModals.splice(openedModals.indexOf(form.id), 1)" v-show="openedModals.includes(form.id)">
+              <Modal
+                v-if="form.public"
+                @closemodal="
+                  openedModals.splice(openedModals.indexOf(form.id), 1)
+                "
+                v-show="openedModals.includes(form.id)"
+              >
                 <h1>{{ form.modalueberschrift }}</h1>
-                  Ergebnisse
+                <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>
+              <p style="text-align: center" @click="openedModals.push(form.id)">
+                {{ process_minitext(form.minitext) }}<br /><br />
+              </p>
             </div>
           </div>
         </div>
@@ -66,7 +120,9 @@ export default {
             <form
               class="mbr-form form-with-styler"
               data-form-title="Form Name"
-              @submit.prevent
+              @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">
@@ -79,6 +135,8 @@ export default {
                     class="form-control"
                     value=""
                     id="name-form02-0"
+                    v-model="formValues[i].value1"
+                    required
                   />
                 </div>
 
@@ -91,6 +149,8 @@ export default {
                     data-form-field="textarea"
                     class="form-control"
                     id="textarea-form02-0"
+                    v-model="formValues[i].value2"
+                    required
                   />
                 </div>
                 <div