New web page called "Trainers" has been created

pom.xml

@@ -56,6 +56,26 @@
             <artifactId>jackson-databind</artifactId>
             <version>2.17.0</version>
         </dependency>
+        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.module/jackson-module-jaxb-annotations -->
+        <dependency>
+            <groupId>com.fasterxml.jackson.module</groupId>
+            <artifactId>jackson-module-jaxb-annotations</artifactId>
+            <version>2.17.1</version>
+        </dependency>
+
+        <dependency>
+            <groupId>javax.xml.bind</groupId>
+            <artifactId>jaxb-api</artifactId>
+            <version>2.3.1</version>
+        </dependency>
+        <dependency>
+            <groupId>org.glassfish.jaxb</groupId>
+            <artifactId>jaxb-runtime</artifactId>
+            <version>2.3.1</version>
+        </dependency>
+
+
+
     </dependencies>
 
     <build>

src/main/java/nl/utwente/mod4/pokemon/Utils.java

@@ -6,7 +6,7 @@ import java.util.List;
 public class Utils {
 
     public static String getAbsolutePathToResources() {
-        return Utils.class.getClassLoader().getResource("").getPath();
+        return "C:\\StudyMaterial\\Module4\\WebProgramming\\git\\frontEndLab\\mod-4-wp-2023-2024-pokemon-2\\src\\main\\resources";
     }
 
     public static <T extends Comparable<T>> int compare(T o1, T o2) {

src/main/java/nl/utwente/mod4/pokemon/dao/PokemonTypeDao.java

@@ -18,7 +18,7 @@ public enum PokemonTypeDao {
 
     INSTANCE;
 
-    private static final String ORIGINAL_POKEMON_TYPES = Utils.getAbsolutePathToResources() + "/aggregated-and-filtered-pokemon-dataset.json";
+    private static final String ORIGINAL_POKEMON_TYPES = "C:\\StudyMaterial\\Module4\\WebProgramming\\git\\frontEndLab\\mod-4-wp-2023-2024-pokemon-2\\src\\main\\resources\\aggregated-and-filtered-pokemon-dataset.json";
     private static final String POKEMON_TYPES = Utils.getAbsolutePathToResources() + "/pokemon-types.json";
 
     private HashMap<String, PokemonType> pokemonTypes = new HashMap<>();

src/main/java/nl/utwente/mod4/pokemon/dao/TrainerDao.java

@@ -17,7 +17,7 @@ public enum TrainerDao {
 
     INSTANCE;
 
-    private static final String ORIGINAL_TRAINERS = Utils.getAbsolutePathToResources() + "/default-trainers-dataset.json";
+    private static final String ORIGINAL_TRAINERS = "C:\\StudyMaterial\\Module4\\WebProgramming\\git\\frontEndLab\\mod-4-wp-2023-2024-pokemon-2\\src\\main\\resources\\default-trainers-dataset.json";
     private static final String TRAINERS = Utils.getAbsolutePathToResources() + "/trainers.json";
 
     private HashMap<String, Trainer> trainers = new HashMap<>();

src/main/webapp/js/requests.js

@@ -2,6 +2,7 @@
 let pokemonTypes = {};
 let tableParentId = 'table';
 let detailsParentId = 'details';
+let trainers = {};
 
 function getRowId(resource) {
     return `${resource.id}_row`
@@ -26,6 +27,19 @@ function updateDetails(pokemonTypeId) {
     </div>
     `
 }
+function updateDetailsOfTrainer(trainerID) {
+    const tr = trainers?.data?.find(item => item.id === trainerID);
+    const pr = document.getElementById(detailsParentID);
+
+    pr.innerHTML = `
+    <div class="card" id="${tr.id}_card">
+        <img src="${tr.profileUrl}" class = "card-img-top" alt = "${tr.name}">
+        <div class="card-body">
+            <h5 class="card-title">${tr.name}</h5>
+        </div>
+    </div>
+    `
+}
 
 function pokemonTypeToRow(pokemonType) {
     return `
@@ -60,4 +74,37 @@ function createPokemonTypesTable() {
             </tbody>
         </table>
     `
+}
+
+function pokemonTrainerToRow(pokemonTrainer) {
+    return `
+    <tr id="${getRowId(pokemonTrainer)}" onclick="updateDetailsOfTrainer('${pokemonTrainer?.id?.trim()}')">
+        <th scope="row">${pokemonTrainer.id}</th>
+        <td>${pokemonTrainer.name}</td>
+        <td>${pokemonTrainer.lastUpDate}</td>
+    </tr>
+    
+    `
+}
+
+function createTrainerTable() {
+    const tableParent = document.getElementById(tableId);
+    tableParent.innerHTML = `
+        <table class ="table table-striped table-hover">
+            <thread>
+                <tr>
+                    <th scope="col">ID</th>
+                    <th scope="col">Name</th>
+                    <th scope="col">Last Updated</th>
+                </tr>
+            </thread>
+            <tbody>
+                ${
+                    trainers.data.map(resource => `${pokemonTrainerToRow(resource)}`).join("\n")    
+                    || "no data"
+                }
+            </tbody>
+        </table>
+    `
+
 }
\ No newline at end of file

src/main/webapp/trainers.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>$Title$</title>
+    <meta charset="UTF-8">
+    <title>Trainers</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
+          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
+
 </head>
 <body>
-$END$
+
+    <script src="js/requests.js"></script>
+    <script>
+
+        let tableId = "tableDiv";
+        let detailsParentID = "detailsDiv";
+        fetch('/pokemon/api/trainers')
+            .then(res => res.json())
+            .then(data => {
+                trainers = data;
+                createTrainerTable();
+            })
+            .catch(err => {
+                console.error(`Unable to fetch Pokemon Trainers: ${err.status}`);
+                console.error(err);
+            });
+    </script>
+
+    <h1>Trainers List</h1>
+    <div class="container">
+        <div class="row">
+            <div id="tableDiv" class="col-8">No data</div>
+            <div id="detailsDiv" class="col-4">No data</div>
+        </div>
+    </div>
+
 </body>
 </html>
\ No newline at end of file