Skip to content
Snippets Groups Projects
Commit d498a303 authored by CarimPopa's avatar CarimPopa
Browse files

New web page called "Trainers" has been created

parent a84c9078
Branches newFeature1
No related tags found
No related merge requests found
......@@ -56,6 +56,26 @@
<artifactId>jackson-databind</artifactId>
<version>2.17.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.module/jackson-module-jaxb-annotations -->
<dependency>
<groupId>com.fasterxml.jackson.module</groupId>
<artifactId>jackson-module-jaxb-annotations</artifactId>
<version>2.17.1</version>
</dependency>
<dependency>
<groupId>javax.xml.bind</groupId>
<artifactId>jaxb-api</artifactId>
<version>2.3.1</version>
</dependency>
<dependency>
<groupId>org.glassfish.jaxb</groupId>
<artifactId>jaxb-runtime</artifactId>
<version>2.3.1</version>
</dependency>
</dependencies>
<build>
......
......@@ -6,7 +6,7 @@ import java.util.List;
public class Utils {
public static String getAbsolutePathToResources() {
return Utils.class.getClassLoader().getResource("").getPath();
return "C:\\StudyMaterial\\Module4\\WebProgramming\\git\\frontEndLab\\mod-4-wp-2023-2024-pokemon-2\\src\\main\\resources";
}
public static <T extends Comparable<T>> int compare(T o1, T o2) {
......
......@@ -18,7 +18,7 @@ public enum PokemonTypeDao {
INSTANCE;
private static final String ORIGINAL_POKEMON_TYPES = Utils.getAbsolutePathToResources() + "/aggregated-and-filtered-pokemon-dataset.json";
private static final String ORIGINAL_POKEMON_TYPES = "C:\\StudyMaterial\\Module4\\WebProgramming\\git\\frontEndLab\\mod-4-wp-2023-2024-pokemon-2\\src\\main\\resources\\aggregated-and-filtered-pokemon-dataset.json";
private static final String POKEMON_TYPES = Utils.getAbsolutePathToResources() + "/pokemon-types.json";
private HashMap<String, PokemonType> pokemonTypes = new HashMap<>();
......
......@@ -17,7 +17,7 @@ public enum TrainerDao {
INSTANCE;
private static final String ORIGINAL_TRAINERS = Utils.getAbsolutePathToResources() + "/default-trainers-dataset.json";
private static final String ORIGINAL_TRAINERS = "C:\\StudyMaterial\\Module4\\WebProgramming\\git\\frontEndLab\\mod-4-wp-2023-2024-pokemon-2\\src\\main\\resources\\default-trainers-dataset.json";
private static final String TRAINERS = Utils.getAbsolutePathToResources() + "/trainers.json";
private HashMap<String, Trainer> trainers = new HashMap<>();
......
......@@ -2,6 +2,7 @@
let pokemonTypes = {};
let tableParentId = 'table';
let detailsParentId = 'details';
let trainers = {};
function getRowId(resource) {
return `${resource.id}_row`
......@@ -26,6 +27,19 @@ function updateDetails(pokemonTypeId) {
</div>
`
}
function updateDetailsOfTrainer(trainerID) {
const tr = trainers?.data?.find(item => item.id === trainerID);
const pr = document.getElementById(detailsParentID);
pr.innerHTML = `
<div class="card" id="${tr.id}_card">
<img src="${tr.profileUrl}" class = "card-img-top" alt = "${tr.name}">
<div class="card-body">
<h5 class="card-title">${tr.name}</h5>
</div>
</div>
`
}
function pokemonTypeToRow(pokemonType) {
return `
......@@ -60,4 +74,37 @@ function createPokemonTypesTable() {
</tbody>
</table>
`
}
function pokemonTrainerToRow(pokemonTrainer) {
return `
<tr id="${getRowId(pokemonTrainer)}" onclick="updateDetailsOfTrainer('${pokemonTrainer?.id?.trim()}')">
<th scope="row">${pokemonTrainer.id}</th>
<td>${pokemonTrainer.name}</td>
<td>${pokemonTrainer.lastUpDate}</td>
</tr>
`
}
function createTrainerTable() {
const tableParent = document.getElementById(tableId);
tableParent.innerHTML = `
<table class ="table table-striped table-hover">
<thread>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Last Updated</th>
</tr>
</thread>
<tbody>
${
trainers.data.map(resource => `${pokemonTrainerToRow(resource)}`).join("\n")
|| "no data"
}
</tbody>
</table>
`
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
<meta charset="UTF-8">
<title>Trainers</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
$END$
<script src="js/requests.js"></script>
<script>
let tableId = "tableDiv";
let detailsParentID = "detailsDiv";
fetch('/pokemon/api/trainers')
.then(res => res.json())
.then(data => {
trainers = data;
createTrainerTable();
})
.catch(err => {
console.error(`Unable to fetch Pokemon Trainers: ${err.status}`);
console.error(err);
});
</script>
<h1>Trainers List</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