solution to exercise 3

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>
 

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);
+        });
 
 
 }
+