Update trainer

src/main/webapp/js/requests.js

 
 let pokemonTypes = {};
+let pokemonTrainers = {};
 let tableParentId = 'table';
 let detailsParentId = 'details';
 
@@ -60,4 +61,54 @@ function createPokemonTypesTable() {
             </tbody>
         </table>
     `
+}
+
+function createPokemonTrainersTable() {
+    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>
+                </tr>
+            </thead>
+            <tbody>
+                ${
+        pokemonTrainers.data.map(resource => `${pokemonTrainerToRow(resource)}`).join("\n")
+        || "no data"
+    }
+            </tbody>
+        </table>
+    `
+}
+
+function pokemonTrainerToRow(pokemonTrainer) {
+    return `
+    <tr id="${getRowId(pokemonTrainer)}" onclick="updateDetailsTrainers('${pokemonTrainer?.id?.trim()}')">
+        <th scope="row">${pokemonTrainer.id}</th>
+        <td>${pokemonTrainer.name}</td>
+        <td>#${pokemonTrainer.created}</td>
+    </tr>
+    `
+}
+
+function updateDetailsTrainers(trainerId) {
+    const trainer = pokemonTrainers?.data?.find(item => item.id === trainerId);
+    const parent = document.getElementById(detailsParentId);
+
+    parent.innerHTML = `
+    <div class="card" id="${trainer.id}_card">
+      <img src="${trainer.profileUrl}" class="card-img-top" alt="${trainer.name}">
+      <div class="card-body">
+        <h5 class="card-title">${trainer.name}</h5>
+        <p class="card-text">
+            ID: ${trainer.id} </br>
+            Created: ${trainer.created} </br>
+            Last Update: ${trainer.lastUpDate}
+        </p>
+      </div>
+    </div>
+    `
 }
\ No newline at end of file