diff --git a/src/main/webapp/js/trainers.js b/src/main/webapp/js/trainers.js index 357ca1944e86a66b45f9ae65930ae476ec8e34a7..7eb1f323583c135b9638aef1ff65049b947cca32 100644 --- a/src/main/webapp/js/trainers.js +++ b/src/main/webapp/js/trainers.js @@ -1,5 +1,5 @@ -let pokemonTypes = {}; +let trainers = {}; let tableParentId = 'table'; let detailsParentId = 'details'; @@ -7,39 +7,52 @@ function getRowId(resource) { return `${resource.id}_row` } -function updateDetails(pokemonTypeId) { - const pt = pokemonTypes?.data?.find(item => item.id === pokemonTypeId); - const parent = document.getElementById(detailsParentId); +function updateTrainerTable() { + fetch('/pokemon/api/trainers') + .then(res => res.json()) + .then(data => { + trainers = data; + }) + .catch(err => { + console.error(`Unable to fetch trainers ${err.status}`); + console.error(err); + }); +} +function updateDetails() { + const trainerId = document.getElementById('idTrainer'); + const pt = trainers?.data?.find(item => item.id === trainerId); + const parent = document.getElementById(detailsParentId); + let time = new Date(); parent.innerHTML = ` <div class="card" id="${pt.id}_card"> <img src="${pt.imgUrl}" class="card-img-top" alt="${pt.classification}"> <div class="card-body"> <h5 class="card-title">${pt.name} #${pt.pokedexNumber}</h5> <p class="card-text"> - Japanese name: ${pt.japaneseName} </br> - Classification: ${pt.classification} </br> - Abilities: ${pt.abilities?.join(", ") || "none"} </br> - Type: ${pt.primaryType}${pt.secondaryType ? " , " + pt.secondaryType : ""} + Name: ${pt.name} </br> + Create: ${pt.created} </br> + Last updated: ${pt.lastUpDate?.join(", ") || "none"} </br> + Type: ${pt.profileUrl} </p> </div> </div> ` } -function pokemonTypeToRow(pokemonType) { +function trainersToRow(trainers) { return ` - <tr id="${getRowId(pokemonType)}" onclick="updateDetails('${pokemonType?.id?.trim()}')"> - <th scope="row">${pokemonType.id}</th> - <td>${pokemonType.name}</td> - <td>#${pokemonType.pokedexNumber}</td> - <td>${pokemonType.primaryType}</td> - <td>${pokemonType.secondaryType || '-'}</td> + <tr id="${getRowId(trainers)}" onclick="updateDetails('${trainers?.id?.trim()}')"> + <th scope="row">${trainers.id}</th> + <td>${trainers.name}</td> + <td>#${trainers.created}</td> + <td>${trainers.lastUpDate}</td> + <td>${trainers.profileUrl || '-'}</td> </tr> ` } -function createPokemonTypesTable() { +function createTrainersTable() { const tableParent = document.getElementById(tableParentId); tableParent.innerHTML = ` <table class="table table-striped table-hover"> @@ -47,14 +60,14 @@ function createPokemonTypesTable() { <tr> <th scope="col">ID</th> <th scope="col">Name</th> - <th scope="col">Pokedex Number</th> - <th scope="col">Primary Type</th> - <th scope="col">Secondary Type</th> + <th scope="col">Created</th> + <th scope="col">Last updated</th> + <th scope="col">Profile url</th> </tr> </thead> <tbody> ${ - pokemonTypes.data.map(resource => `${pokemonTypeToRow(resource)}`).join("\n") + trainers.data.map(resource => `${trainersToRow(resource)}`).join("\n") || "no data" } </tbody> @@ -63,9 +76,12 @@ function createPokemonTypesTable() { } function createTrainer() { + let time = new Date(); const name = document.getElementById('trainerName').value; const profileurl = document.getElementById('profileUrl').value; const data = { + created: time, + lastUpDate: time, profileUrl: profileurl, name: name } @@ -78,15 +94,5 @@ function createTrainer() { }).then(response => updateTrainerTable()) } -function updateTrainerTable() { - fetch('/pokemon/api/trainers') - .then(res => res.json()) - .then(data => { - pokemonTypes = data; - createTrainerTable(); - }) - .catch(err => { - console.error(`Unable to fetch Pokemon Types: ${err.status}`); - console.error(err); - }); -} \ No newline at end of file + + diff --git a/src/main/webapp/trainers.html b/src/main/webapp/trainers.html index ad18d6ec24b328fc9b8018511719a5b8ea1fca6f..4c6d9983aeaab5cb369c9afcb8f0ddac0775d8e3 100644 --- a/src/main/webapp/trainers.html +++ b/src/main/webapp/trainers.html @@ -22,8 +22,8 @@ fetch('/pokemon/api/trainers') .then(res => res.json()) .then(data => { - pokemonTypes = data; - createPokemonTypesTable(); + trainers = data; + createTrainersTable(); }) .catch(err => { console.error(`Unable to fetch Pokemon Types: ${err.status}`);