Assignment3

src/main/webapp/js/requests.js

 
 let pokemonTypes = {};
+let trainers = {};
 let tableParentId = 'table';
 let detailsParentId = 'details';
 
+
 function getRowId(resource) {
     return `${resource.id}_row`
 }
 
-function updateDetails(pokemonTypeId) {
+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}">
@@ -26,10 +27,29 @@ function updateDetails(pokemonTypeId) {
     </div>
     `
 }
+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>
+        </p>
+      </div>
+    </div>
+    `
+}
 
 function pokemonTypeToRow(pokemonType) {
     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>
         <td>${pokemonType.name}</td>
         <td>#${pokemonType.pokedexNumber}</td>
@@ -38,7 +58,16 @@ function pokemonTypeToRow(pokemonType) {
     </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() {
     const tableParent = document.getElementById(tableParentId);
     tableParent.innerHTML = `
@@ -54,10 +83,93 @@ function createPokemonTypesTable() {
             </thead>
             <tbody>
                 ${
-                    pokemonTypes.data.map(resource => `${pokemonTypeToRow(resource)}`).join("\n")
-                    || "no data"
-                }
+        pokemonTypes.data.map(resource => `${pokemonTypeToRow(resource)}`).join("\n")
+        || "no data"
+    }
             </tbody>
         </table>
     `
-}
\ No newline at end of file
+}
+    function createTrainerTable() {
+        document.getElementById("changeForm").style.display="none";
+        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 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: link};
+    fetch('/pokemon/api/trainers', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(trainer)
+    })
+        .then(res => res.json())
+        .then(data => {
+            console.log(data);
+            trainers.push(data);
+            createTrainerTable();
+        })
+        .catch(err => {
+            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);
+        });
+
+
+}
+