src/main/java/nl/utwente/mod4/pokemon/dao/TrainerDao.java

@@ -5,6 +5,8 @@ import com.fasterxml.jackson.databind.ObjectMapper;
 import com.fasterxml.jackson.databind.ObjectWriter;
 import jakarta.ws.rs.BadRequestException;
 import jakarta.ws.rs.NotFoundException;
+import java.time.ZoneId;
+import java.time.format.DateTimeFormatter;
 import nl.utwente.mod4.pokemon.Utils;
 import nl.utwente.mod4.pokemon.model.Trainer;
 
@@ -19,6 +21,7 @@ public enum TrainerDao {
 
     private static final String ORIGINAL_TRAINERS = Utils.getAbsolutePathToResources() + "/default-trainers-dataset.json";
     private static final String TRAINERS = Utils.getAbsolutePathToResources() + "/trainers.json";
+    private final DateTimeFormatter dateFormatter = DateTimeFormatter.ofPattern("dd/MM/yyyy");
 
     private HashMap<String, Trainer> trainers = new HashMap<>();
 
@@ -81,8 +84,9 @@ public enum TrainerDao {
         String nextId = "" + (getMaxId() + 1);
 
         newTrainer.id = nextId;
-        newTrainer.created = Instant.now().toString();
-        newTrainer.lastUpDate = Instant.now().toString();
+        Instant now = Instant.now();
+        newTrainer.created = dateFormatter.format(now.atZone(ZoneId.systemDefault()).toLocalDateTime());
+        newTrainer.lastUpDate = dateFormatter.format(now.atZone(ZoneId.systemDefault()).toLocalDateTime());
         trainers.put(nextId,newTrainer);
 
         return newTrainer;
@@ -94,7 +98,9 @@ public enum TrainerDao {
         if(trainers.get(updated.id) == null)
             throw new NotFoundException("Trainer id '" + updated.id + "' not found.");
 
-        updated.lastUpDate = Instant.now().toString();
+        Instant now = Instant.now();
+        updated.created = trainers.get(updated.id).created;
+        updated.lastUpDate = dateFormatter.format(now.atZone(ZoneId.systemDefault()).toLocalDateTime());
         trainers.put(updated.id,updated);
 
         return updated;

src/main/webapp/js/trainers.js

+
+let tableParentId = 'table';
+let detailsParentId = 'details';
+let trainers = {}
+
+let selectedTrainerID;
+
+function getRowId(resource) {
+    return `${resource.id}_row`
+}
+
+function updateDetails(trainerId) {
+    const tr = trainers?.data?.find(item => item.id === trainerId);
+    const parent = document.getElementById(detailsParentId);
+    selectedTrainerID = tr.id;
+
+    parent.innerHTML = `
+    <div class="card" id="${tr.id}_card">
+        ${tr.profileUrl ? `<img src="${tr.profileUrl}" class="card-img-top" alt="${tr.name}">` : ''}
+      <div class="card-body">
+        <h5 class="card-title">${tr.name}</h5>
+        <p class="card-text">
+            Creation Date: ${tr.created} <br>
+            Last Updated: ${tr.lastUpDate}
+        </p>
+      </div>
+    </div>
+    <div class="card" id="${tr.id}_card_update" style="padding: 20px">
+        <form id="updateCardForm">
+            <div class="form-group">
+                <label for="newTrainerInput">Update Trainer Name</label>
+                <input type="text" class="form-control" id="updateTrainerInput" placeholder="New Trainer Name">
+            </div>
+            <button type="submit" class="btn btn-primary">Update Trainer</button>
+        </form>
+    </div>
+    `
+    document.getElementById("updateCardForm").addEventListener("submit", handleTrainerUpdate);
+}
+
+function trainerToRow(trainer) {
+    return `
+    <tr id="${getRowId(trainer)}" onclick="updateDetails('${trainer?.id?.trim()}')">
+        <th scope="row">${trainer.id}</th>
+        <td>${trainer.name}</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>
+                </tr>
+            </thead>
+            <tbody>
+                ${
+        trainers.data.map(resource => `${trainerToRow(resource)}`).join("\n")
+        || "no data"
+    }
+            </tbody>
+        </table>
+    `
+}
+
+function refreshTable() {
+    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);
+        });
+}
+
+
+function handleTrainerCreate(event) {
+    event.preventDefault();
+    const trainerName = document.getElementById("trainerName").value;
+
+    const postData = JSON.stringify({name: trainerName})
+
+
+    fetch(
+        'api/trainers', {
+            method: 'POST',
+            headers: {
+                'Content-Type' : 'application/json'
+            },
+            body: postData
+        })
+        .then(response => response.json())
+        .then(data => {
+            refreshTable();
+        })
+        .catch(err => {
+            console.error('Error', err);
+        })
+}
+
+function handleTrainerUpdate(event) {
+    event.preventDefault();
+    const trainerName = document.getElementById("updateTrainerInput").value;
+    const putData = JSON.stringify({id: selectedTrainerID, name: trainerName});
+
+    fetch(
+        `api/trainers/${selectedTrainerID}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type' : 'application/json'
+            },
+            body: putData
+        })
+        .then(response => response.json())
+        .then(data => {
+            refreshTable();
+        })
+        .catch(err => {
+            console.error('Error', err);
+        })
+}
\ No newline at end of file

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>Title</title>
+    <link rel="icon" type="image/x-icon" href="/pokemon/favicon.ico">
+</head>
+<body>
+
+<script src="js/trainers.js"></script>
+
+<h1>Trainers</h1>
+
+<div class="container">
+    <div style="padding:20px" >
+        <form id="createTrainerForm">
+            <div class="form-group">
+                <label for="trainerName">Trainer Name</label>
+                <input type="text" class="form-control" id="trainerName" placeholder="Enter Trainer Name">
+            </div>
+            <button type="submit" class="btn btn-primary">Create Trainer</button>
+        </form>
+    </div>
+
+    <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>
+</div>
+
+<script>
+    const createTrainerForm = document.getElementById("createTrainerForm");
+    createTrainerForm.addEventListener("submit", handleTrainerCreate);
+    refreshTable();
+</script>
+
+</body>
+</html>
\ No newline at end of file