Fix Bugs && Continue Opfer Page + API
This commit is contained in:
239
front/index.html
239
front/index.html
@@ -10,9 +10,18 @@
|
||||
<title>
|
||||
Alle Opfer | Spamhasi
|
||||
</title>
|
||||
<style>
|
||||
#alert-success {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#alert-error {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<link rel="icon" href="favicon.ico"><link href="style.css" rel="stylesheet"></head>
|
||||
<body
|
||||
x-data="{ page: 'Opfer', 'loaded': true, 'darkMode': false, 'stickyMenu': false, 'sidebarToggle': false, 'scrollTop': false, isOpferAdd: false }"
|
||||
x-data="{ page: 'Opfer', 'loaded': true, 'darkMode': false, 'stickyMenu': false, 'sidebarToggle': false, 'scrollTop': false, isOpferAdd: false, isOpferEdit: false }"
|
||||
x-init="
|
||||
darkMode = JSON.parse(localStorage.getItem('darkMode'));
|
||||
$watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))"
|
||||
@@ -599,9 +608,79 @@
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<div id="alert-container">
|
||||
<div
|
||||
class="rounded-xl border border-success-500 bg-success-50 p-4 dark:border-success-500/30 dark:bg-success-500/15"
|
||||
id="alert-success"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="-mt-0.5 text-success-500">
|
||||
<svg
|
||||
class="fill-current"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M3.70186 12.0001C3.70186 7.41711 7.41711 3.70186 12.0001 3.70186C16.5831 3.70186 20.2984 7.41711 20.2984 12.0001C20.2984 16.5831 16.5831 20.2984 12.0001 20.2984C7.41711 20.2984 3.70186 16.5831 3.70186 12.0001ZM12.0001 1.90186C6.423 1.90186 1.90186 6.423 1.90186 12.0001C1.90186 17.5772 6.423 22.0984 12.0001 22.0984C17.5772 22.0984 22.0984 17.5772 22.0984 12.0001C22.0984 6.423 17.5772 1.90186 12.0001 1.90186ZM15.6197 10.7395C15.9712 10.388 15.9712 9.81819 15.6197 9.46672C15.2683 9.11525 14.6984 9.11525 14.347 9.46672L11.1894 12.6243L9.6533 11.0883C9.30183 10.7368 8.73198 10.7368 8.38051 11.0883C8.02904 11.4397 8.02904 12.0096 8.38051 12.3611L10.553 14.5335C10.7217 14.7023 10.9507 14.7971 11.1894 14.7971C11.428 14.7971 11.657 14.7023 11.8257 14.5335L15.6197 10.7395Z"
|
||||
fill=""
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
|
||||
Erfolgreich!
|
||||
</h4>
|
||||
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Das neue Opfer wurde erfolgreich hinzugefügt!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-xl border border-error-500 bg-error-50 p-4 dark:border-error-500/30 dark:bg-error-500/15"
|
||||
id="alert-error"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="-mt-0.5 text-error-500">
|
||||
<svg
|
||||
class="fill-current"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M20.3499 12.0004C20.3499 16.612 16.6115 20.3504 11.9999 20.3504C7.38832 20.3504 3.6499 16.612 3.6499 12.0004C3.6499 7.38881 7.38833 3.65039 11.9999 3.65039C16.6115 3.65039 20.3499 7.38881 20.3499 12.0004ZM11.9999 22.1504C17.6056 22.1504 22.1499 17.6061 22.1499 12.0004C22.1499 6.3947 17.6056 1.85039 11.9999 1.85039C6.39421 1.85039 1.8499 6.3947 1.8499 12.0004C1.8499 17.6061 6.39421 22.1504 11.9999 22.1504ZM13.0008 16.4753C13.0008 15.923 12.5531 15.4753 12.0008 15.4753L11.9998 15.4753C11.4475 15.4753 10.9998 15.923 10.9998 16.4753C10.9998 17.0276 11.4475 17.4753 11.9998 17.4753L12.0008 17.4753C12.5531 17.4753 13.0008 17.0276 13.0008 16.4753ZM11.9998 6.62898C12.414 6.62898 12.7498 6.96476 12.7498 7.37898L12.7498 13.0555C12.7498 13.4697 12.414 13.8055 11.9998 13.8055C11.5856 13.8055 11.2498 13.4697 11.2498 13.0555L11.2498 7.37898C11.2498 6.96476 11.5856 6.62898 11.9998 6.62898Z"
|
||||
fill="#F04438"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
|
||||
Ups...
|
||||
</h4>
|
||||
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Es ist ein Fehler aufgetreten
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<!-- Breadcrumb End -->
|
||||
|
||||
<div class="space-y-5 sm:space-y-6">
|
||||
@@ -698,6 +777,7 @@
|
||||
<div class="flex items-center gap-3">
|
||||
<div>
|
||||
<span
|
||||
@click="isOpferAdd = true"
|
||||
class="block font-medium text-gray-800 text-theme-sm dark:text-white/90"
|
||||
>
|
||||
` + opfer.name + `
|
||||
@@ -797,6 +877,7 @@
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
value=""
|
||||
name="name"
|
||||
@@ -811,6 +892,7 @@
|
||||
Email Addresse
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
name="mail"
|
||||
value=""
|
||||
@@ -825,6 +907,8 @@
|
||||
Anzahl der Mails
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
name="number"
|
||||
type="text"
|
||||
value=""
|
||||
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
||||
@@ -866,7 +950,7 @@
|
||||
type="button"
|
||||
class="flex w-full justify-center rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] sm:w-auto"
|
||||
>
|
||||
Close
|
||||
Später
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
@@ -878,5 +962,152 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script defer src="bundle.js"></script></body>
|
||||
<div
|
||||
x-show="isOpferEdit"
|
||||
class="fixed inset-0 flex items-center justify-center p-5 overflow-y-auto z-99999"
|
||||
>
|
||||
<div
|
||||
class="modal-close-btn fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"
|
||||
></div>
|
||||
<div
|
||||
@click.outside="isOpferEdit = false"
|
||||
class="no-scrollbar relative w-full max-w-[700px] overflow-y-auto rounded-3xl bg-white p-4 dark:bg-gray-900 lg:p-11"
|
||||
>
|
||||
<!-- close btn -->
|
||||
<button
|
||||
@click="isOpferEdit = false"
|
||||
class="transition-color absolute right-5 top-5 z-999 flex h-11 w-11 items-center justify-center rounded-full bg-gray-100 text-gray-400 hover:bg-gray-200 hover:text-gray-600 dark:bg-gray-700 dark:bg-white/[0.05] dark:text-gray-400 dark:hover:bg-white/[0.07] dark:hover:text-gray-300"
|
||||
>
|
||||
<svg
|
||||
class="fill-current"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M6.04289 16.5418C5.65237 16.9323 5.65237 17.5655 6.04289 17.956C6.43342 18.3465 7.06658 18.3465 7.45711 17.956L11.9987 13.4144L16.5408 17.9565C16.9313 18.347 17.5645 18.347 17.955 17.9565C18.3455 17.566 18.3455 16.9328 17.955 16.5423L13.4129 12.0002L17.955 7.45808C18.3455 7.06756 18.3455 6.43439 17.955 6.04387C17.5645 5.65335 16.9313 5.65335 16.5408 6.04387L11.9987 10.586L7.45711 6.04439C7.06658 5.65386 6.43342 5.65386 6.04289 6.04439C5.65237 6.43491 5.65237 7.06808 6.04289 7.4586L10.5845 12.0002L6.04289 16.5418Z"
|
||||
fill=""
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="px-2 pr-14">
|
||||
<h4 class="mb-2 text-2xl font-semibold text-gray-800 dark:text-white/90">
|
||||
Ein Opfer bearbeiten
|
||||
</h4>
|
||||
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400 lg:mb-7">
|
||||
Bearbeite ein Opfer!
|
||||
</p>
|
||||
</div>
|
||||
<form class="flex flex-col" action="/api/opfer/edit.php" method="post">
|
||||
<div class="custom-scrollbar h-[450px] overflow-y-auto px-2">
|
||||
<div class="mt-7">
|
||||
<div class="grid grid-cols-1 gap-x-6 gap-y-5 lg:grid-cols-2">
|
||||
<div class="col-span-2 lg:col-span-1">
|
||||
<label
|
||||
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
value=""
|
||||
name="name"
|
||||
class="dark:bg-dark-900 h-11 w-full rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 lg:col-span-1">
|
||||
<label
|
||||
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
||||
>
|
||||
Email Addresse
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
name="mail"
|
||||
value=""
|
||||
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 lg:col-span-1">
|
||||
<label
|
||||
class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
|
||||
>
|
||||
Anzahl der Mails
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
name="number"
|
||||
type="text"
|
||||
value=""
|
||||
class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div x-data="{ switcherToggle: false }">
|
||||
<label
|
||||
for="toggle1"
|
||||
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"
|
||||
name="enabled"
|
||||
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>
|
||||
<div class="flex items-center gap-3 px-2 mt-6 lg:justify-end">
|
||||
<button
|
||||
@click="isOpferEdit = false"
|
||||
type="button"
|
||||
class="flex w-full justify-center rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] sm:w-auto"
|
||||
>
|
||||
Später
|
||||
</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"
|
||||
>
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
|
||||
if (params.has("status")) {
|
||||
if (params.get("status") == 200) {
|
||||
document.getElementById("alert-success").style.display = "block";
|
||||
}else{
|
||||
document.getElementById("alert-error").style.display = "block";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script defer src="bundle.js"></script></body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user