diff --git a/src/main/webapp/TrainerData.html b/src/main/webapp/TrainerData.html index 666dcc7453d22b3d9c56dbc97c9b93fe3107a701..661b32779d72baed45e99b62e611886c778fc245 100644 --- a/src/main/webapp/TrainerData.html +++ b/src/main/webapp/TrainerData.html @@ -37,11 +37,23 @@ <div class="row"> <div id="tableDiv" class="col-8">No data</div> <div id="detailsDiv" class="col-4">No data</div> + <form id="changeForm"> + <label for="currentName">Current name:</label><br> + <input type="text" id="currentName" name="currentName" value=""><br> + <label for="changedName">new name:</label><br> + <input type="text" id="changedName" name="changedName" value=""><br> + <label for="Link">Profile picture:</label><br> + <input type="text" id="changeLink" name="Link" value=""><br> + <input type="submit" value="Submit" onclick="submitChange()"> + </form> </div> </div> + <form id="Form"> <label for="name">name:</label><br> <input type="text" id="name" name="name" value=""><br> + <label for="link">Profile picture:</label><br> + <input type="text" id="link" name="link" value=""><br> <input type="submit" value="Submit" onclick="submitForm()"> </form> diff --git a/src/main/webapp/js/requests.js b/src/main/webapp/js/requests.js index f826e7514cf886bf667bbb33c05bee854d930045..90e8eef35ec3f566cdbc107cc0bff9ecc3cb3b2b 100644 --- a/src/main/webapp/js/requests.js +++ b/src/main/webapp/js/requests.js @@ -12,7 +12,6 @@ function getRowId(resource) { function updateDetailsPokemon(pokemonTypeId) { const pt = pokemonTypes?.data?.find(item => item.id === pokemonTypeId); const parent = document.getElementById(detailsParentId); - parent.innerHTML = ` <div class="card" id="${pt.id}_card"> <img src="${pt.imgUrl}" class="card-img-top" alt="${pt.classification}"> @@ -29,15 +28,16 @@ function updateDetailsPokemon(pokemonTypeId) { ` } function updateDetailsTrainer(TrainerID) { + document.getElementById("changeForm").style.display="block"; 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"> + form createdDate: ${tr.created} </br> LastUpDate: ${tr.lastUpDate} </br> profileURL: ${tr.profileUrl} </br> @@ -91,6 +91,7 @@ function createPokemonTypesTable() { ` } function createTrainerTable() { + document.getElementById("changeForm").style.display="none"; const tableParent = document.getElementById(tableParentId); tableParent.innerHTML = ` <table class="table table-striped table-hover"> @@ -111,12 +112,13 @@ function createPokemonTypesTable() { </tbody> </table> ` - } + function submitForm() { let name = document.getElementById("name").value; + let link = document.getElementById("link").value; let trainer = {name: name, - created : new Date().toISOString(), id: Math.random *100, lastUpDate: new Date().toISOString(), profileUrl: "https://www.google.com"}; + created : new Date().toISOString(), id: Math.random *100, lastUpDate: new Date().toISOString(), profileUrl: link}; fetch('/pokemon/api/trainers', { method: 'POST', headers: { @@ -134,6 +136,40 @@ function submitForm() { console.error(`unable to create trainer: ${err.status}`); console.error(err); }); +} +function submitChange() { + let oldName = document.getElementById("currentName").value; + let newName = document.getElementById("changedName").value; + let link = document.getElementById("changeLink").value; + + let oldTrainer = trainers.data.find(item => item.name === oldName); + if (!oldTrainer) { + console.error("Trainer not found"); + return; + } + let updatedTrainer = {name: newName, + created : oldTrainer.created, id: oldTrainer.id, lastUpDate: new Date().toISOString(), profileUrl: link}; + fetch(`/pokemon/api/trainers/${oldTrainer.id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(updatedTrainer) + }) + .then(res => res.json()) + .then(data => { + console.log(data); + const index = trainers.data.findIndex(item => item.id === oldTrainer.id); + if (index !== -1) { + trainers.data[index] = data; + } + createTrainerTable(); + }) + .catch(err => { + console.error(`unable to create trainer: ${err.status}`); + console.error(err); + }); } +