ex 1

src/main/webapp/js/requests.js

@@ -60,4 +60,93 @@ function createPokemonTypesTable() {
             </tbody>
         </table>
     `
-}
\ No newline at end of file
+}
+
+// ----------------------------- Trainers ---------------------------------------------
+
+function updateTrainerDetails(trainerId) {
+    const tt = trainerTypes?.data?.find(item => item.id === trainerId);
+    const parent = document.getElementById(detailsParentId);
+
+    parent.innerHTML = `
+    <div class="card" id="${tt.id}_card">
+      <img src="${tt.profileUrl}" class="card-img-top" alt="${tt.name}">
+      <div class="card-body">
+        <h5 class="card-title">${tt.name} </h5>
+        <p class="card-text">
+            Created: ${tt.created} </br>
+            Last Update: ${tt.lastUpdate} </br>
+        </p>
+      </div>
+    </div>
+    `
+}
+
+function trainerToRow(trainer) {
+    return `
+    <tr id="${getRowId(trainer)}" onclick="updateTrainerDetails('${trainer?.id?.trim()}')">
+        <th scope="row">${trainer.id}</th>
+        <td>${trainer.name}</td>
+        <td>${trainer.created}</td>
+        <td>${trainer.lastUpdate}</td>
+    </tr>
+    `
+}
+
+function createTrainersTable() {
+    const tableParent = document.getElementById(tableParentId);
+    tableParent.innerHTML = `
+        <table class="table table-striped table-hover">
+            <thead>
+                <tr>
+                    <th scope="col">ID</th>
+                    <th scope="col">Name</th>
+                    <th scope="col">Created</th>
+                    <th scope="col">Last Updated</th>
+                </tr>
+            </thead>
+            <tbody>
+                ${
+        trainerTypes.data.map(trainer => `${trainerToRow(trainer)}`).join("\n")
+        || "no data"
+    }
+            </tbody>
+        </table>
+    `
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const form = document.getElementById('addTrainerForm');
+    form.addEventListener('submit', function (event) {
+        // prevent submitting through HTML form action
+        event.preventDefault();
+
+        const trainerName = document.getElementById('trainerName').value;
+        const trainerData = {
+            name: trainerName
+        };
+
+        // Fetch API to send data to server
+        fetch('/pokemon/api/trainers/', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(trainerData)
+        })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response not ok' + response.statusText);
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log('Success: ', data);
+                alert('Trainer added successfully!')
+            })
+            .catch(error => {
+                console.error('Error: ', error);
+                alert('Failed to add trainer: ' + error.message);
+            });
+    });
+})