Skip to content
Snippets Groups Projects

Issue #18, #19 resolved

1 file
+ 38
1
Compare changes
  • Side-by-side
  • Inline
@@ -4,15 +4,23 @@ let detailsParentId = 'details';
let trainers = {}
let selectedTrainerID;
let selectedDetails = false;
function getRowId(resource) {
return `${resource.id}_row`
}
function clearTrainerDetails() {
console.log("Clearing details for element: " + detailsParentId);
const parent = document.getElementById(detailsParentId);
parent.innerHTML = '';
}
function updateDetails(trainerId) {
const tr = trainers?.data?.find(item => item.id === trainerId);
const parent = document.getElementById(detailsParentId);
selectedTrainerID = tr.id;
selectedDetails = true;
parent.innerHTML = `
<div class="card" id="${tr.id}_card">
@@ -33,9 +41,13 @@ function updateDetails(trainerId) {
</div>
<button type="submit" class="btn btn-primary">Update Trainer</button>
</form>
<div style="padding-top: 10px">
<button id="deleteTrainerButton" type="button" class="btn btn-danger">Delete Trainer</button>
</div>
</div>
`
document.getElementById("updateCardForm").addEventListener("submit", handleTrainerUpdate);
document.getElementById("deleteTrainerButton").addEventListener("click", handleDeleteTrainer)
}
function trainerToRow(trainer) {
@@ -75,7 +87,12 @@ function refreshTable() {
.then(res => res.json())
.then(data => {
trainers = data;
createTrainersTable()
createTrainersTable();
clearTrainerDetails();
if (selectedDetails) {
updateDetails(selectedTrainerID);
}
})
.catch(err => {
console.error(`Unable to fetch trainers: ${err.status}`);
@@ -123,6 +140,26 @@ function handleTrainerUpdate(event) {
})
.then(response => response.json())
.then(data => {
// clearTrainerDetails();
refreshTable();
// updateDetails(selectedTrainerID);
})
.catch(err => {
console.error('Error', err);
})
}
function handleDeleteTrainer(event) {
event.preventDefault();
fetch(
`api/trainers/${selectedTrainerID}`, {
method: 'DELETE'
})
.then(response => {
selectedDetails = false;
selectedTrainerID = null;
refreshTable();
})
.catch(err => {
Loading