solution

390d3c02 · Joost080 · 7d77e368 · 390d3c02 · 390d3c02
Commit 390d3c02 authored 10 months ago by Joost080
--- a/src/main/webapp/TrainerData.html
+++ b/src/main/webapp/TrainerData.html
+<!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
--- a/src/main/webapp/js/requests.js
+++ b/src/main/webapp/js/requests.js

 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