diff --git a/src/main/java/nl/utwente/mod4/pokemon/Utils.java b/src/main/java/nl/utwente/mod4/pokemon/Utils.java
index 01bc8da9bc03d5faeb6250e9d935ef16eb2dec38..7116843c607543e11b682763cdcb265b30e350b5 100644
--- a/src/main/java/nl/utwente/mod4/pokemon/Utils.java
+++ b/src/main/java/nl/utwente/mod4/pokemon/Utils.java
@@ -1,12 +1,14 @@
package nl.utwente.mod4.pokemon;
+import java.nio.charset.StandardCharsets;
import java.nio.file.Path;
import java.util.List;
public class Utils {
public static String getAbsolutePathToResources() {
- return Utils.class.getClassLoader().getResource("").getPath();
+ var patgh = Utils.class.getClassLoader().getResource("").getPath();
+ return java.net.URLDecoder.decode(patgh, StandardCharsets.UTF_8);
}
public static <T extends Comparable<T>> int compare(T o1, T o2) {
diff --git a/src/main/webapp/js/trainers.js b/src/main/webapp/js/trainers.js
new file mode 100644
index 0000000000000000000000000000000000000000..f9e8b9ca568cce0291cc8671bb5c9139eb3c66b8
--- /dev/null
+++ b/src/main/webapp/js/trainers.js
@@ -0,0 +1,59 @@
+let trainers = {};
+let tableParentId = 'table';
+let detailsParentId = 'details';
+
+function getRowId(resource) {
+ return `${resource.id}_row`
+}
+
+function updateDetails(trainerId) {
+ const trainer = trainers?.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>
+ `
+}
+
+function trainerToRow(trainer) {
+ return `
+ <tr id="${getRowId(trainer)}" onclick="updateDetails('${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 Update</th>
+ </tr>
+ </thead>
+ <tbody>
+ ${
+ trainers.data.map(resource => `${trainerToRow(resource)}`).join("\n")
+ || "no data"
+ }
+ </tbody>
+ </table>
+ `
+}
\ No newline at end of file
diff --git a/src/main/webapp/trainers.html b/src/main/webapp/trainers.html
new file mode 100644
index 0000000000000000000000000000000000000000..1255d6a609b66030ea2eba33950c1f2b12595460
--- /dev/null
+++ b/src/main/webapp/trainers.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <!-- Required meta tags -->
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+ <!-- Bootstrap CSS -->
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
+ integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
+
+ <title>Trainers</title>
+ <link rel="icon" type="image/x-icon" href="/pokemon/favicon.ico">
+</head>
+<body>
+
+<script src="js/trainers.js"></script>
+<script>
+ 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);
+ });
+</script>
+
+<h1>Trainers</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