Finish Opfer Page

2026-04-22 18:50:08 +02:00
parent 1f5ada7bfa
commit 8d0245c769
10 changed files with 559 additions and 28 deletions
--- a/tailadmin/src/index.html
+++ b/tailadmin/src/index.html
@@ -96,7 +96,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>
@@ -179,6 +179,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>
  </body>
 </html>
--- a/tailadmin/src/partials/profile/opfer_edit.html
+++ b/tailadmin/src/partials/profile/opfer_edit.html
@@ -90,7 +90,7 @@
              />
            </div>

-            <div x-data="{ switcherToggle: false }">
+            <!---<div x-data="{ switcherToggle: false }" id="toogle_div">
              <label
                for="opfer_aktive"
                class="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400"
@@ -113,12 +113,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"
@@ -127,6 +154,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"
--- a/tailadmin/src/partials/table/table-06.html
+++ b/tailadmin/src/partials/table/table-06.html
@@ -51,7 +51,7 @@
      </tbody>
    </table>
  </div>
-  <script>
+  <!---<script>
    fetch("/api/opfer/list.php")
      .then(response => response.json())
      .then(data => {
@@ -77,7 +77,7 @@
              <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"
                  >
@@ -116,25 +116,49 @@
      .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": "multipart/form-data"
+            "Content-Type": "application/x-www-form-urlencoded"
          },
-          body: JSON.stringify({
-            id: id
-          })
+          body: "id=" + id
        })
-        .then(respone => respone.json())
+        .then(response => response.json())
        .then(data => {
          if (data.status == 500) {
            console.error("API Error: " + data.error);
          }

-          document.getElementById("opfer_name").innerHTML = data.name;
-          document.getElementById("opfer_mail").innerHTML = data.mail;
-          document.getElementById("opfer_name").innerHTML = data.number;
+          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;
+          }
        })
      }
-  </script>
+
+      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>