Compare revisions

Denislav Dinev · b05c4e4b · b05c4e4b · b05c4e4b
--- a/src/main/java/nl/utwente/mod4/pokemon/Utils.java
+++ b/src/main/java/nl/utwente/mod4/pokemon/Utils.java
 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) {

--- a/src/main/webapp/js/trainers.js
+++ b/src/main/webapp/js/trainers.js
+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
--- a/src/main/webapp/trainers.html
+++ b/src/main/webapp/trainers.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>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
No results found