issue 2 the (final) correct version

src/main/webapp/js/trainers.js

 
-let pokemonTypes = {};
+let trainers = {};
 let tableParentId = 'table';
 let detailsParentId = 'details';
 
@@ -7,39 +7,52 @@ function getRowId(resource) {
     return `${resource.id}_row`
 }
 
-function updateDetails(pokemonTypeId) {
-    const pt = pokemonTypes?.data?.find(item => item.id === pokemonTypeId);
-    const parent = document.getElementById(detailsParentId);
+function updateTrainerTable() {
+    fetch('/pokemon/api/trainers')
+        .then(res => res.json())
+        .then(data => {
+            trainers = data;
+        })
+        .catch(err => {
+            console.error(`Unable to fetch trainers ${err.status}`);
+            console.error(err);
+        });
+}
 
+function updateDetails() {
+    const trainerId = document.getElementById('idTrainer');
+    const pt = trainers?.data?.find(item => item.id === trainerId);
+    const parent = document.getElementById(detailsParentId);
+    let time = new Date();
     parent.innerHTML = `
     <div class="card" id="${pt.id}_card">
       <img src="${pt.imgUrl}" class="card-img-top" alt="${pt.classification}">
       <div class="card-body">
         <h5 class="card-title">${pt.name} #${pt.pokedexNumber}</h5>
         <p class="card-text">
-            Japanese name: ${pt.japaneseName} </br>
-            Classification: ${pt.classification} </br>
-            Abilities: ${pt.abilities?.join(", ") || "none"} </br>
-            Type: ${pt.primaryType}${pt.secondaryType ? " , " + pt.secondaryType : ""}
+            Name: ${pt.name} </br>
+            Create: ${pt.created} </br>
+            Last updated: ${pt.lastUpDate?.join(", ") || "none"} </br>
+            Type: ${pt.profileUrl}
         </p>
       </div>
     </div>
     `
 }
 
-function pokemonTypeToRow(pokemonType) {
+function trainersToRow(trainers) {
     return `
-    <tr id="${getRowId(pokemonType)}" onclick="updateDetails('${pokemonType?.id?.trim()}')">
-        <th scope="row">${pokemonType.id}</th>
-        <td>${pokemonType.name}</td>
-        <td>#${pokemonType.pokedexNumber}</td>
-        <td>${pokemonType.primaryType}</td>
-        <td>${pokemonType.secondaryType || '-'}</td>
+    <tr id="${getRowId(trainers)}" onclick="updateDetails('${trainers?.id?.trim()}')">
+        <th scope="row">${trainers.id}</th>
+        <td>${trainers.name}</td>
+        <td>#${trainers.created}</td>
+        <td>${trainers.lastUpDate}</td>
+        <td>${trainers.profileUrl || '-'}</td>
     </tr>
     `
 }
 
-function createPokemonTypesTable() {
+function createTrainersTable() {
     const tableParent = document.getElementById(tableParentId);
     tableParent.innerHTML = `
         <table class="table table-striped table-hover">
@@ -47,14 +60,14 @@ function createPokemonTypesTable() {
                 <tr>
                     <th scope="col">ID</th>
                     <th scope="col">Name</th>
-                    <th scope="col">Pokedex Number</th>
-                    <th scope="col">Primary Type</th>
-                    <th scope="col">Secondary Type</th>
+                    <th scope="col">Created</th>
+                    <th scope="col">Last updated</th>
+                    <th scope="col">Profile url</th>
                 </tr>
             </thead>
             <tbody>
                 ${
-        pokemonTypes.data.map(resource => `${pokemonTypeToRow(resource)}`).join("\n")
+        trainers.data.map(resource => `${trainersToRow(resource)}`).join("\n")
         || "no data"
     }
             </tbody>
@@ -63,9 +76,12 @@ function createPokemonTypesTable() {
 }
 
 function createTrainer() {
+    let time = new Date();
     const name = document.getElementById('trainerName').value;
     const profileurl = document.getElementById('profileUrl').value;
     const data = {
+        created: time,
+        lastUpDate: time,
         profileUrl: profileurl,
         name: name
     }
@@ -78,15 +94,5 @@ function createTrainer() {
     }).then(response => updateTrainerTable())
 }
 
-function updateTrainerTable() {
-    fetch('/pokemon/api/trainers')
-        .then(res => res.json())
-        .then(data => {
-            pokemonTypes = data;
-            createTrainerTable();
-        })
-        .catch(err => {
-            console.error(`Unable to fetch Pokemon Types: ${err.status}`);
-            console.error(err);
-        });
-}
\ No newline at end of file
+
+

src/main/webapp/trainers.html

@@ -22,8 +22,8 @@
     fetch('/pokemon/api/trainers')
         .then(res => res.json())
         .then(data => {
-            pokemonTypes = data;
-            createPokemonTypesTable();
+            trainers = data;
+            createTrainersTable();
         })
         .catch(err => {
             console.error(`Unable to fetch Pokemon Types: ${err.status}`);