Skip to content
Snippets Groups Projects
Commit b05c4e4b authored by Denislav Dinev's avatar Denislav Dinev
Browse files

Issue 1 solved

parent 7d77e368
No related branches found
No related tags found
No related merge requests found
Pipeline #96700 failed
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) {
......
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
<!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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment