Finish Opfer Page

front/basic-tables.html

@@ -665,7 +665,7 @@
       </tbody>
     </table>
   </div>
-  <script>
+  <!---<script>
     fetch("/api/opfer/list.php")
       .then(response => response.json())
       .then(data => {
@@ -691,7 +691,8 @@
               <div class="flex items-center gap-3">
                 <div>
                   <span
-                    @click="isOpferAdd = true"
+                    @click="isOpferEdit = true"
+                    onclick="opferEdit(` + opfer.id + `)"
                     class="block font-medium text-gray-800 text-theme-sm dark:text-white/90"
                   >
                     ` + opfer.name + `
@@ -727,7 +728,53 @@
         document.getElementById("opfer_table").innerHTML = list;
       })
       .catch(error => console.error("API Error: " + error))
-  </script>
+
+      function opferEdit(id) {
+        console.log(document.getElementById("opfer_name"));
+        fetch("/api/opfer/info.php", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+          },
+          body: "id=" + id
+        })
+        .then(response => response.json())
+        .then(data => {
+          if (data.status == 500) {
+            console.error("API Error: " + data.error);
+          }
+
+          const opfer = data.opfer;
+
+          document.getElementById("opfer_id").value = id;
+          document.getElementById("opfer_name").value = opfer.name;
+          document.getElementById("opfer_mail").value = opfer.mail;
+          document.getElementById("opfer_number").value = opfer.number;
+
+
+          if (data.status == 1) {
+              const toogle_el = document.querySelector('#toggle2');
+              const toogle_data = Alpine.$data(document.getElementById("toogle2_div"));
+
+              toogle_data.switcherToggle = data.status;
+              toogle_el.checked = data.status;
+          }
+        })
+      }
+
+      function removeOpfer() {
+        const id = document.getElementById("opfer_id").value;
+
+        fetch("/api/opfer/delete.php", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+          },
+          body: "id=" + id
+        })
+        window.location.reload();
+      }
+  </script>--->
 </div>
 <!-- ====== Table Six End -->
                 </div>

front/index.html

@@ -639,7 +639,7 @@
                         </h4>
 
                         <p class="text-sm text-gray-500 dark:text-gray-400">
-                          Das neue Opfer wurde erfolgreich hinzugefügt!
+                          Die Aktion wurde erfolgreich ausgeführt
                         </p>
                       </div>
                     </div>
@@ -751,7 +751,7 @@
       </tbody>
     </table>
   </div>
-  <script>
+  <!---<script>
     fetch("/api/opfer/list.php")
       .then(response => response.json())
       .then(data => {
@@ -777,7 +777,8 @@
               <div class="flex items-center gap-3">
                 <div>
                   <span
-                    @click="isOpferAdd = true"
+                    @click="isOpferEdit = true"
+                    onclick="opferEdit(` + opfer.id + `)"
                     class="block font-medium text-gray-800 text-theme-sm dark:text-white/90"
                   >
                     ` + opfer.name + `
@@ -813,7 +814,53 @@
         document.getElementById("opfer_table").innerHTML = list;
       })
       .catch(error => console.error("API Error: " + error))
-  </script>
+
+      function opferEdit(id) {
+        console.log(document.getElementById("opfer_name"));
+        fetch("/api/opfer/info.php", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+          },
+          body: "id=" + id
+        })
+        .then(response => response.json())
+        .then(data => {
+          if (data.status == 500) {
+            console.error("API Error: " + data.error);
+          }
+
+          const opfer = data.opfer;
+
+          document.getElementById("opfer_id").value = id;
+          document.getElementById("opfer_name").value = opfer.name;
+          document.getElementById("opfer_mail").value = opfer.mail;
+          document.getElementById("opfer_number").value = opfer.number;
+
+
+          if (data.status == 1) {
+              const toogle_el = document.querySelector('#toggle2');
+              const toogle_data = Alpine.$data(document.getElementById("toogle2_div"));
+
+              toogle_data.switcherToggle = data.status;
+              toogle_el.checked = data.status;
+          }
+        })
+      }
+
+      function removeOpfer() {
+        const id = document.getElementById("opfer_id").value;
+
+        fetch("/api/opfer/delete.php", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+          },
+          body: "id=" + id
+        })
+        window.location.reload();
+      }
+  </script>--->
 </div>
 <!-- ====== Table Six End -->
                 </div>
@@ -1014,6 +1061,7 @@
               </label>
               <input
                 required
+                id="opfer_name"
                 type="text"
                 value=""
                 name="name"
@@ -1029,6 +1077,7 @@
               </label>
               <input
                 required
+                id="opfer_mail"
                 type="text"
                 name="mail"
                 value=""
@@ -1044,6 +1093,7 @@
               </label>
               <input
                 required
+                id="opfer_number"
                 name="number"
                 type="text"
                 value=""
@@ -1051,15 +1101,15 @@
               />
             </div>
 
-            <div x-data="{ switcherToggle: false }">
+            <!---<div x-data="{ switcherToggle: false }" id="toogle_div">
               <label
-                for="toggle1"
+                for="opfer_aktive"
                 class="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400"
               >
                 <div class="relative">
                   <input
                     type="checkbox"
-                    id="toggle1"
+                    id="opfer_aktive"
                     name="enabled"
                     class="sr-only"
                     @change="switcherToggle = !switcherToggle"
@@ -1074,12 +1124,39 @@
                   ></div>
                 </div>
 
+                Aktiviert
+              </label>
+            </div>--->
+            <div x-data="{ switcherToggle: false }" id="toogle2_div">
+              <label
+                for="toggle2"
+                class="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400"
+              >
+                <div class="relative">
+                  <input
+                    type="checkbox"
+                    id="toggle2"
+                    name="enabled2"
+                    class="sr-only"
+                    @change="switcherToggle = !switcherToggle"
+                  />
+                  <div
+                    class="block h-6 w-11 rounded-full"
+                    :class="switcherToggle ? 'bg-brand-500 dark:bg-brand-500' : 'bg-gray-200 dark:bg-white/10'"
+                  ></div>
+                  <div
+                    :class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
+                    class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
+                  ></div>
+                </div>
+
                 Aktiviert
               </label>
             </div>
           </div>
         </div>
       </div>
+      <input type="hidden" name="id" value="" id="opfer_id">
       <div class="flex items-center gap-3 px-2 mt-6 lg:justify-end">
         <button
           @click="isOpferEdit = false"
@@ -1088,6 +1165,14 @@
         >
           Später
         </button>
+        <button
+          onclick="removeOpfer()"
+          type="button"
+          class="flex w-full justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600 sm:w-auto"
+          style="background-color: #e70000;"
+        >
+          Löschen
+        </button>
         <button
           type="submit"
           class="flex w-full justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600 sm:w-auto"
@@ -1108,6 +1193,115 @@
             document.getElementById("alert-error").style.display = "block";
         }
       }
+
+      fetch("/api/opfer/list.php")
+      .then(response => response.json())
+      .then(data => {
+        if (data.status == 500) {
+          console.error("API Error: " + data.error);
+        }
+
+        var list = document.getElementById("opfer_table").innerHTML;
+
+        for (const opfer of data.opfer) {
+          if (opfer.enabled) {
+            var status_class = "rounded-full bg-success-50 px-2 py-0.5 text-theme-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-500";
+            var status_text = "Enabled";
+          }else{
+            var status_class = "rounded-full bg-error-50 px-2 py-0.5 text-theme-xs font-medium text-error-700 dark:bg-error-500/15 dark:text-error-500";
+            var status_text = "Disabled";
+          }
+
+          list += `
+          <tr>
+          <td class="px-5 py-4 sm:px-6">
+            <div class="flex items-center">
+              <div class="flex items-center gap-3">
+                <div>
+                  <span
+                    @click="isOpferEdit = true"
+                    onclick="opferEdit(` + opfer.id + `)"
+                    class="block font-medium text-gray-800 text-theme-sm dark:text-white/90"
+                  >
+                    ` + opfer.name + `
+                  </span>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td class="px-5 py-4 sm:px-6">
+            <div class="flex items-center">
+              <p class="text-gray-500 text-theme-sm dark:text-gray-400">
+                ` + opfer.mail + `
+              </p>
+            </div>
+          </td>
+          <td class="px-5 py-4 sm:px-6">
+            <div class="flex items-center">
+              <p
+                class="` + status_class + `"
+              >
+                ` + status_text + `
+              </p>
+            </div>
+          </td>
+          <td class="px-5 py-4 sm:px-6">
+            <div class="flex items-center">
+              <p class="text-gray-500 text-theme-sm dark:text-gray-400">` + opfer.number + `</p>
+            </div>
+          </td>
+        </tr>
+        `;
+        }
+        document.getElementById("opfer_table").innerHTML = list;
+      })
+      .catch(error => console.error("API Error: " + error))
+
+      function opferEdit(id) {
+        console.log(document.getElementById("opfer_name"));
+        fetch("/api/opfer/info.php", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+          },
+          body: "id=" + id
+        })
+        .then(response => response.json())
+        .then(data => {
+          if (data.status == 500) {
+            console.error("API Error: " + data.error);
+          }
+
+          const opfer = data.opfer;
+
+          document.getElementById("opfer_id").value = id;
+          document.getElementById("opfer_name").value = opfer.name;
+          document.getElementById("opfer_mail").value = opfer.mail;
+          document.getElementById("opfer_number").value = opfer.number;
+
+
+          if (data.status == 1) {
+              const toogle_el = document.querySelector('#toggle2');
+              const toogle_data = Alpine.$data(document.getElementById("toogle2_div"));
+
+              toogle_data.switcherToggle = data.status;
+              toogle_el.checked = data.status;
+          }
+        })
+      }
+
+      function removeOpfer() {
+        const id = document.getElementById("opfer_id").value;
+
+        fetch("/api/opfer/delete.php", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+          },
+          body: "id=" + id
+        })
+        window.location.reload();
+      }
     </script>
   <script defer src="bundle.js"></script></body>
 </html>

front/opfer.html

@@ -665,7 +665,7 @@
       </tbody>
     </table>
   </div>
-  <script>
+  <!---<script>
     fetch("/api/opfer/list.php")
       .then(response => response.json())
       .then(data => {
@@ -691,7 +691,8 @@
               <div class="flex items-center gap-3">
                 <div>
                   <span
-                    @click="isOpferAdd = true"
+                    @click="isOpferEdit = true"
+                    onclick="opferEdit(` + opfer.id + `)"
                     class="block font-medium text-gray-800 text-theme-sm dark:text-white/90"
                   >
                     ` + opfer.name + `
@@ -727,7 +728,53 @@
         document.getElementById("opfer_table").innerHTML = list;
       })
       .catch(error => console.error("API Error: " + error))
-  </script>
+
+      function opferEdit(id) {
+        console.log(document.getElementById("opfer_name"));
+        fetch("/api/opfer/info.php", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+          },
+          body: "id=" + id
+        })
+        .then(response => response.json())
+        .then(data => {
+          if (data.status == 500) {
+            console.error("API Error: " + data.error);
+          }
+
+          const opfer = data.opfer;
+
+          document.getElementById("opfer_id").value = id;
+          document.getElementById("opfer_name").value = opfer.name;
+          document.getElementById("opfer_mail").value = opfer.mail;
+          document.getElementById("opfer_number").value = opfer.number;
+
+
+          if (data.status == 1) {
+              const toogle_el = document.querySelector('#toggle2');
+              const toogle_data = Alpine.$data(document.getElementById("toogle2_div"));
+
+              toogle_data.switcherToggle = data.status;
+              toogle_el.checked = data.status;
+          }
+        })
+      }
+
+      function removeOpfer() {
+        const id = document.getElementById("opfer_id").value;
+
+        fetch("/api/opfer/delete.php", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+          },
+          body: "id=" + id
+        })
+        window.location.reload();
+      }
+  </script>--->
 </div>
 <!-- ====== Table Six End -->
                 </div>