added trainers fully done with id, name and image

487d7aff · chrisb-3 · 76cbd865 · 487d7aff · 487d7aff · 487d7aff
Commit 487d7aff authored 10 months ago by chrisb-3
--- a/src/main/webapp/js/requests.js
+++ b/src/main/webapp/js/requests.js

 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
--- 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";

--- a/src/main/webapp/trainersPage.html
+++ b/src/main/webapp/trainersPage.html
-<!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}`);