Issue #18, #19 resolved

Added pagination and sorting to the /api/pokemon endpoint

src/main/webapp/js/trainers.js

@@ -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 => {