mirror of
https://github.com/LD-Reborn/Berufsschule_HAM.git
synced 2025-12-20 15:01:56 +00:00
Implemented frontend Locations update buttons
This commit is contained in:
@@ -38,12 +38,20 @@
|
||||
<td>@locationTableViewModel.Seat</td>
|
||||
<td>
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-sm btn-primary">Update</button>
|
||||
<button class="btn btn-sm btn-warning btn-edit"
|
||||
data-location-id="@locationTableViewModel.LocationID"
|
||||
data-location-name="@locationTableViewModel.LocationName"
|
||||
data-room-number="@locationTableViewModel.RoomNumber"
|
||||
data-seat="@locationTableViewModel.Seat"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#editModal">
|
||||
Edit
|
||||
</button>
|
||||
<button class="btn btn-sm btn-danger btn-delete"
|
||||
data-location-id="@locationTableViewModel.LocationID"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#deleteModal">
|
||||
🗑️ Delete
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
@@ -77,6 +85,35 @@
|
||||
</div>
|
||||
|
||||
|
||||
<script defer>
|
||||
|
||||
function createToastContainer() {
|
||||
const container = document.createElement('div');
|
||||
container.id = 'toastContainer';
|
||||
container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
|
||||
document.body.appendChild(container);
|
||||
return container;
|
||||
}
|
||||
|
||||
// Simple toast helper
|
||||
function showToast(message, type) {
|
||||
const toastContainer = document.getElementById('toastContainer') || createToastContainer();
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast align-items-center text-white bg-${type} border-0`;
|
||||
toast.role = 'alert';
|
||||
toast.innerHTML = `
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">${message}</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
|
||||
</div>
|
||||
`;
|
||||
toastContainer.appendChild(toast);
|
||||
const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
|
||||
bsToast.show();
|
||||
toast.addEventListener('hidden.bs.toast', () => toast.remove());
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const deleteModal = document.getElementById('deleteModal');
|
||||
@@ -161,3 +198,115 @@
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Location Edit Modal -->
|
||||
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-warning text-dark">
|
||||
<h5 class="modal-title" id="editModalLabel">Edit Location</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<form id="editForm">
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="editLocationId" name="LocationID">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editLocationName" class="form-label">Location Name</label>
|
||||
<input type="text" class="form-control" id="editLocationName" name="LocationName" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editRoomNumber" class="form-label">Room Number</label>
|
||||
<input type="text" class="form-control" id="editRoomNumber" name="RoomNumber">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="editSeat" class="form-label">Seat</label>
|
||||
<input type="text" class="form-control" id="editSeat" name="Seat">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-warning">Save changes</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// --- EDIT MODAL ---
|
||||
const editModal = document.getElementById('editModal');
|
||||
const editForm = document.getElementById('editForm');
|
||||
|
||||
editModal.addEventListener('show.bs.modal', event => {
|
||||
const button = event.relatedTarget;
|
||||
const id = button.getAttribute('data-location-id');
|
||||
const name = button.getAttribute('data-location-name');
|
||||
const room = button.getAttribute('data-room-number');
|
||||
const seat = button.getAttribute('data-seat');
|
||||
|
||||
// Set values in the modal form
|
||||
editForm.querySelector('#editLocationId').value = id;
|
||||
editForm.querySelector('#editLocationName').value = name;
|
||||
editForm.querySelector('#editRoomNumber').value = room;
|
||||
editForm.querySelector('#editSeat').value = seat;
|
||||
});
|
||||
|
||||
editForm.addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
|
||||
const data = {
|
||||
Location: editForm.editLocationId.value,
|
||||
Description:
|
||||
{
|
||||
Location: editLocationName.value,
|
||||
RoomNumber: editForm.editRoomNumber.value,
|
||||
Seat: editForm.editSeat.value
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('/Locations/Update', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
if (result) {
|
||||
const btn = document.querySelector(`button[data-location-id="${data.Location}"]`);
|
||||
const row = btn.closest('tr');
|
||||
let slugifiedLocationID = `${data.Description.Location}-${data.Description.RoomNumber}-${data.Description.Seat}`
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9-]/g, '-')
|
||||
.replace(/-+/g, '-')
|
||||
.replace(/^-|-$/g, '');
|
||||
btn.setAttribute("data-location-id", slugifiedLocationID);
|
||||
btn.setAttribute("data-location-name", data.Description.Location);
|
||||
btn.setAttribute("data-room-number", data.Description.RoomNumber);
|
||||
btn.setAttribute("data-seat", data.Description.Seat);
|
||||
row.children[0].textContent = slugifiedLocationID;
|
||||
row.children[1].textContent = data.Description.Location;
|
||||
row.children[2].textContent = data.Description.RoomNumber;
|
||||
row.children[3].textContent = data.Description.Seat;
|
||||
|
||||
// Close modal
|
||||
bootstrap.Modal.getInstance(editModal).hide();
|
||||
|
||||
showToast('Location updated successfully', 'success');
|
||||
} else {
|
||||
showToast(`${result.reason || 'Update failed'}`, 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
showToast('Error contacting server', 'danger');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user