Added an option to update the name of trainers.

src/main/webapp/js/trainers.js

@@ -3,6 +3,8 @@ let tableParentId = 'table';
 let detailsParentId = 'details';
 let trainers = {}
 
+let selectedTrainerID;
+
 function getRowId(resource) {
     return `${resource.id}_row`
 }
@@ -10,6 +12,7 @@ function getRowId(resource) {
 function updateDetails(trainerId) {
     const tr = trainers?.data?.find(item => item.id === trainerId);
     const parent = document.getElementById(detailsParentId);
+    selectedTrainerID = tr.id;
 
     parent.innerHTML = `
     <div class="card" id="${tr.id}_card">
@@ -22,7 +25,17 @@ function updateDetails(trainerId) {
         </p>
       </div>
     </div>
+    <div class="card" id="${tr.id}_card_update" style="padding: 20px">
+        <form id="updateCardForm">
+            <div class="form-group">
+                <label for="newTrainerInput">Update Trainer Name</label>
+                <input type="text" class="form-control" id="updateTrainerInput" placeholder="New Trainer Name">
+            </div>
+            <button type="submit" class="btn btn-primary">Update Trainer</button>
+        </form>
+    </div>
     `
+    document.getElementById("updateCardForm").addEventListener("submit", handleTrainerUpdate);
 }
 
 function trainerToRow(trainer) {
@@ -93,4 +106,26 @@ function handleTrainerCreate(event) {
         .catch(err => {
             console.error('Error', err);
         })
+}
+
+function handleTrainerUpdate(event) {
+    event.preventDefault();
+    const trainerName = document.getElementById("updateTrainerInput").value;
+    const putData = JSON.stringify({id: selectedTrainerID, name: trainerName});
+
+    fetch(
+        `api/trainers/${selectedTrainerID}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type' : 'application/json'
+            },
+            body: putData
+        })
+        .then(response => response.json())
+        .then(data => {
+            refreshTable();
+        })
+        .catch(err => {
+            console.error('Error', err);
+        })
 }
\ No newline at end of file

src/main/webapp/trainers.html

@@ -42,5 +42,6 @@
     createTrainerForm.addEventListener("submit", handleTrainerCreate);
     refreshTable();
 </script>
+
 </body>
 </html>
\ No newline at end of file