diff --git a/src/main/webapp/TrainerData.html b/src/main/webapp/TrainerData.html
new file mode 100644
index 0000000000000000000000000000000000000000..b545c22165bfb69fafe080ba5e92ff0730c632b2
--- /dev/null
+++ b/src/main/webapp/TrainerData.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>Title</title>
+ <link rel="icon" type="image/x-icon" href="/pokemon/favicon.ico">
+</head>
+<body>
+
+ <script src="js/requests.js"></script>
+ <script>
+ tableParentId = "tableDiv";
+ detailsParentId = "detailsDiv";
+
+ fetch('/pokemon/api/trainers')
+ .then(res => res.json())
+ .then(data => {
+ trainers = data;
+ createTrainerTable();
+ })
+ .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
diff --git a/src/main/webapp/js/requests.js b/src/main/webapp/js/requests.js
index 9f11ad9018d236b068862c4a5a9f46ee1ddd377b..8bba0e7c3ec49c5dbee46bc748f504dfb48f243b 100644
--- a/src/main/webapp/js/requests.js
+++ b/src/main/webapp/js/requests.js
@@ -1,13 +1,15 @@
let pokemonTypes = {};
+let trainers = {};
let tableParentId = 'table';
let detailsParentId = 'details';
+
function getRowId(resource) {
return `${resource.id}_row`
}
-function updateDetails(pokemonTypeId) {
+function updateDetailsPokemon(pokemonTypeId) {
const pt = pokemonTypes?.data?.find(item => item.id === pokemonTypeId);
const parent = document.getElementById(detailsParentId);
@@ -26,10 +28,28 @@ function updateDetails(pokemonTypeId) {
</div>
`
}
+function updateDetailsTrainer(TrainerID) {
+ const tr = trainers?.data?.find(item => item.id === TrainerID);
+ const parent = document.getElementById(detailsParentId);
+
+ parent.innerHTML = `
+ <div class="card" id="${tr.id}_card">
+ <img src="${tr.profileUrl}" class="card-img-top" alt="${tr.created}">
+ <div class="card-body">
+ <h5 class="card-title">${tr.name} #${tr.id}</h5>
+ <p class="card-text">
+ createdDate: ${tr.created} </br>
+ LastUpDate: ${tr.lastUpDate} </br>
+ profileURL: ${tr.profileUrl} </br>
+ </p>
+ </div>
+ </div>
+ `
+}
function pokemonTypeToRow(pokemonType) {
return `
- <tr id="${getRowId(pokemonType)}" onclick="updateDetails('${pokemonType?.id?.trim()}')">
+ <tr id="${getRowId(pokemonType)}" onclick="updateDetailsPokemon('${pokemonType?.id?.trim()}')">
<th scope="row">${pokemonType.id}</th>
<td>${pokemonType.name}</td>
<td>#${pokemonType.pokedexNumber}</td>
@@ -38,7 +58,16 @@ function pokemonTypeToRow(pokemonType) {
</tr>
`
}
-
+function TrainerToRow(trainer) {
+ return `
+ <tr id="${getRowId(trainer)}" onclick="updateDetailsTrainer('${trainer?.id?.trim()}')">
+ <th scope="row">${trainer.id}</th>
+ <td>${trainer.name}</td>
+ <td>${trainer.created}</td>
+ <td>${trainer.lastUpDate}</td>
+ </tr>
+ `
+}
function createPokemonTypesTable() {
const tableParent = document.getElementById(tableParentId);
tableParent.innerHTML = `
@@ -54,10 +83,48 @@ function createPokemonTypesTable() {
</thead>
<tbody>
${
- pokemonTypes.data.map(resource => `${pokemonTypeToRow(resource)}`).join("\n")
- || "no data"
- }
+ pokemonTypes.data.map(resource => `${pokemonTypeToRow(resource)}`).join("\n")
+ || "no data"
+ }
</tbody>
</table>
`
-}
\ No newline at end of file
+}
+ function createTrainerTable() {
+ 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">lastUpDate</th>
+ <th scope="col">profileURL</th>
+ </tr>
+ </thead>
+ <tbody>
+ ${
+ trainers.data.map(resource => `${TrainerToRow(resource)}`).join("\n")
+ || "no data"
+ }
+ </tbody>
+ </table>
+ `
+}
+// function addTrainer() {
+// // Retrieve trainer details from the form
+// var trainerName = document.getElementById("trainerName").value;
+// var trainerID = document.getElementById("trainerID").value;
+//
+// // Create a new row in the table with the trainer details
+// var newRow = "<tr><td>" + trainerName + "</td><td>" + trainerID + "</td></tr>";
+// document.getElementById("tableDiv").innerHTML += newRow;
+//
+// // Clear the form fields
+// document.getElementById("trainerName").value = "";
+// document.getElementById("trainerID").value = "";
+//
+// // Close the modal
+// $('#addTrainerModal').modal('hide');
+// }
\ No newline at end of file