Finish Opfer Page
This commit is contained in:
marc-go
208
front/index.html
208
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>
|
||||
|
||||
Reference in New Issue
Block a user