diff --git a/src/main/webapp/js/requests.js b/src/main/webapp/js/requests.js
index 9f11ad9018d236b068862c4a5a9f46ee1ddd377b..a6a775d5c638aeaf75168faaf80a2b860fed085c 100644
--- a/src/main/webapp/js/requests.js
+++ b/src/main/webapp/js/requests.js
@@ -1,5 +1,6 @@
let pokemonTypes = {};
+let trainers= {};
let tableParentId = 'table';
let detailsParentId = 'details';
@@ -26,6 +27,22 @@ function updateDetails(pokemonTypeId) {
</div>
`
}
+function updateDetailsTrainer(trainerId) {
+ console.log(trainerId)
+ const pt = trainers?.data?.find(item => item.id === trainerId);
+ const parent = document.getElementById(detailsParentId);
+ parent.innerHTML = `
+ <div class="card" id="${pt.id}_card">
+ <img src="${pt.profileUrl}" class="card-img-top">
+ <div class="card-body">
+ <p class="card-text">
+ Name: ${pt.name} </br>
+ Aditional Infor: bla bla bla
+ </p>
+ </div>
+ </div>
+ `
+}
function pokemonTypeToRow(pokemonType) {
return `
@@ -38,6 +55,16 @@ function pokemonTypeToRow(pokemonType) {
</tr>
`
}
+function trainerToRow(trainerT) {
+ return `
+ <tr id="${getRowId(trainerT)}" onclick="updateDetailsTrainer('${trainerT?.id?.trim()}')">
+ <th scope="row">${trainerT.id}</th>
+ <td>${trainerT.name}</td>
+ <td>#${trainerT.lastUpDate}</td>
+ <td>#${trainerT.profileUrl}</td>
+ </tr>
+ `
+}
function createPokemonTypesTable() {
const tableParent = document.getElementById(tableParentId);
@@ -60,4 +87,26 @@ function createPokemonTypesTable() {
</tbody>
</table>
`
+}
+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">last updated</th>
+ <th scope="col">image url</th>
+ </tr>
+ </thead>
+ <tbody>
+ ${
+ //console.log(pokemonTypes)//see data in web
+ trainers.data.map(resource => `${trainerToRow(resource)}`).join("\n")
+ || "no data"
+ }
+ </tbody>
+ </table>
+ `
}
\ No newline at end of file
diff --git a/src/main/webapp/pokemonTypes.html b/src/main/webapp/pokemonTypes.html
index e25e4f3fa6f363fef29a36df541e7efcdc82c6e7..eedd79a954ba550ab7b08bd083e7377ba3843c14 100644
--- a/src/main/webapp/pokemonTypes.html
+++ b/src/main/webapp/pokemonTypes.html
@@ -14,7 +14,7 @@
</head>
<body>
- <script src="js/requests.js"></script>
+<script src="js/requests.js"></script> <!-- imports an external JavaScript file named "requests.js" from the "js" directory relative to the current HTML file -->
<script>
tableParentId = "tableDiv";
detailsParentId = "detailsDiv";
diff --git a/src/main/webapp/trainersPage.html b/src/main/webapp/trainersPage.html
index f70dce2e45cbe282ec213b7038463d0b5d048717..c3a2aa47f9216d5302816102b86c1615754cee92 100644
--- a/src/main/webapp/trainersPage.html
+++ b/src/main/webapp/trainersPage.html
@@ -1,15 +1,15 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
+<!DOCTYPE html> <!-- html -->
+<html lang="en"> <!-- language is english -->
+<head> <!-- contains meta info -->
<meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- It tells the browser to set the width of the viewport to the width of the device, set the initial zoom level to 1, and disable the shrinking of the viewport to fit the screen. -->
<!-- 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">
+ integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <!-- import the Bootstrap CSS framework version 4.6.2 -->
<title>Title</title>
- <link rel="icon" type="image/x-icon" href="/pokemon/favicon.ico">
+ <link rel="icon" type="image/x-icon" href="/pokemon/favicon.ico"> <!--mall icon that appears next to the website's title in the browser tab or bookmark bar -->
</head>
<body>
@@ -21,8 +21,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}`);