Skip to content
Snippets Groups Projects
Commit 390d3c02 authored by Joost080's avatar Joost080
Browse files

solution

parent 7d77e368
No related branches found
No related tags found
3 merge requests!124Assignment3,!120Assigment 2,!108solution answer 1
Hide whitespace changes
Inline Side-by-side
src/main/webapp/TrainerData.html 0 → 100644
+ 44
− 0
View file @ 390d3c02
<!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
src/main/webapp/js/requests.js
+ 74
− 7
View file @ 390d3c02
let pokemonTypes = {}; let pokemonTypes = {};
let trainers = {};
let tableParentId = 'table'; let tableParentId = 'table';
let detailsParentId = 'details'; let detailsParentId = 'details';
function getRowId(resource) { function getRowId(resource) {
return `${resource.id}_row` return `${resource.id}_row`
} }
function updateDetails(pokemonTypeId) { function updateDetailsPokemon(pokemonTypeId) {
const pt = pokemonTypes?.data?.find(item => item.id === pokemonTypeId); const pt = pokemonTypes?.data?.find(item => item.id === pokemonTypeId);
const parent = document.getElementById(detailsParentId); const parent = document.getElementById(detailsParentId);
...@@ -26,10 +28,28 @@ function updateDetails(pokemonTypeId) { ...@@ -26,10 +28,28 @@ function updateDetails(pokemonTypeId) {
</div> </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) { function pokemonTypeToRow(pokemonType) {
return ` 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> <th scope="row">${pokemonType.id}</th>
<td>${pokemonType.name}</td> <td>${pokemonType.name}</td>
<td>#${pokemonType.pokedexNumber}</td> <td>#${pokemonType.pokedexNumber}</td>
...@@ -38,7 +58,16 @@ function pokemonTypeToRow(pokemonType) { ...@@ -38,7 +58,16 @@ function pokemonTypeToRow(pokemonType) {
</tr> </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() { function createPokemonTypesTable() {
const tableParent = document.getElementById(tableParentId); const tableParent = document.getElementById(tableParentId);
tableParent.innerHTML = ` tableParent.innerHTML = `
...@@ -54,10 +83,48 @@ function createPokemonTypesTable() { ...@@ -54,10 +83,48 @@ function createPokemonTypesTable() {
</thead> </thead>
<tbody> <tbody>
${ ${
pokemonTypes.data.map(resource => `${pokemonTypeToRow(resource)}`).join("\n") pokemonTypes.data.map(resource => `${pokemonTypeToRow(resource)}`).join("\n")
|| "no data" || "no data"
} }
</tbody> </tbody>
</table> </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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment