Issue #18, #19 resolved

Added pagination and sorting to the /api/pokemon endpoint

src/main/webapp/js/trainers.js

@@ -13,7 +13,7 @@ function updateDetails(trainerId) {
 
     parent.innerHTML = `
     <div class="card" id="${tr.id}_card">
-      <img src="${tr.profileUrl}" class="card-img-top" alt="${tr.name}">
+        ${tr.profileUrl ? `<img src="${tr.profileUrl}" class="card-img-top" alt="${tr.name}">` : ''}
       <div class="card-body">
         <h5 class="card-title">${tr.name}</h5>
         <p class="card-text">
@@ -52,4 +52,45 @@ function createTrainersTable() {
             </tbody>
         </table>
     `
+}
+
+function refreshTable() {
+    tableParentId = "tableDiv";
+    detailsParentId = "detailsDiv";
+
+    fetch('/pokemon/api/trainers')
+        .then(res => res.json())
+        .then(data => {
+            trainers = data;
+            createTrainersTable()
+        })
+        .catch(err => {
+            console.error(`Unable to fetch trainers: ${err.status}`);
+            console.error(err);
+        });
+}
+
+
+function handleTrainerCreate(event) {
+    event.preventDefault();
+    const trainerName = document.getElementById("trainerName").value;
+
+    const postData = JSON.stringify({name: trainerName})
+
+
+    fetch(
+        'api/trainers', {
+            method: 'POST',
+            headers: {
+                'Content-Type' : 'application/json'
+            },
+            body: postData
+        })
+        .then(response => response.json())
+        .then(data => {
+            refreshTable();
+        })
+        .catch(err => {
+            console.error('Error', err);
+        })
 }
\ No newline at end of file