src/main/webapp/js/requests.js

@@ -18,7 +18,6 @@ function updateDetails(pokemonTypeId) {
         <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 : ""}
         </p>
@@ -60,4 +59,127 @@ function createPokemonTypesTable() {
             </tbody>
         </table>
     `
-}
\ No newline at end of file
+}
+
+function updatePokemonTypesTable() {
+    fetch('/pokemon/api/pokemonTypes')
+        .then(res => res.json())
+        .then(data => {
+            pokemonTypes = data;
+        })
+        .catch(err => {
+            console.error(`Unable to fetch Pokemon types ${err.status}`);
+            console.error(err);
+        });
+}
+
+function createPokemonType() {
+    let time = new Date();
+    const name = document.getElementById('pokemonName').value;
+    const imgUrl = document.getElementById('imgUrl').value;
+    // const japaneseName = document.getElementById('japaneseName').value;
+    const pokedexNumber = document.getElementById('pokedexNumber').value;
+    // const abilities = document.getElementById('abilities').value;
+    // const baseAttack = document.getElementById('baseAttack').value;
+    // const captureRate = document.getElementById('captureRate').value;
+    // const classification = document.getElementById('classification').value;
+    // const baseDefense = document.getElementById('baseDefense').value;
+    // const baseHeight = document.getElementById('baseHeight').value;
+    // const baseHp = document.getElementById('baseHp').value;
+    // const baseSpAttack = document.getElementById('baseSpAttack').value;
+    // const baseSpDefense = document.getElementById('baseSpDefense').value;
+    // const baseSpeed = document.getElementById('baseSpeed').value;
+    const primaryType = document.getElementById('primaryType').value;
+    const secondaryType = document.getElementById('secondaryType').value;
+    // const baseWeight = document.getElementById('baseWeight').value;
+    // const generation = document.getElementById('generation').value;
+    // const isLegendary = document.getElementById('isLegendary').value;
+    const data = {
+        id: 0,
+        created: time,
+        lastUpDate: time,
+        imgUrl: imgUrl,
+        name: name,
+        japaneseName: 0,
+        pokedexNumber: pokedexNumber,
+        abilities: null,
+        baseAttack: 0,
+        captureRate: 0,
+        classification: 0,
+        baseDefense: 0,
+        baseHeight: 0,
+        baseHp: 0,
+        baseSpAttack: 0,
+        baseSpDefense: 0,
+        baseSpeed: 0,
+        primaryType: primaryType,
+        secondaryType: secondaryType,
+        baseWeight: 0,
+        generation: 0,
+        isLegendary: 0
+    }
+    fetch('/pokemon/api/pokemonTypes', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+    }).then(response => updatePokemonTypesTable())
+}
+
+function deletePokemonType() {
+    let idPokemon = document.getElementById("pokemonId").value;
+    fetch(`/pokemon/api/pokemonTypes/${idPokemon}`, {
+        method: 'DELETE'
+    })
+        .then(response => {
+            if (response.ok) {
+                // Trainer deleted successfully, update UI
+                updatePokemonTypesTable(); // Reload trainer table
+                updateDetails(''); // Clear details panel
+            } else {
+                console.error('Failed to delete Pokemon type:', response.status);
+            }
+        })
+        .catch(error => {
+            console.error('Error deleting Pokemon type:', error);
+        });
+}
+
+function updatePokemonType() {
+    let idPokemon = document.getElementById("idUpdate").value;
+    let nameUpdate = document.getElementById("nameUpdate").value;
+    let imgUrlUpdate = document.getElementById("url").value;
+    let pokedexNumberUpdate = document.getElementById("pokedex").value;
+    let primaryTypeUpdate = document.getElementById("primary").value;
+    let secondaryTypeUpdate = document.getElementById("secondary").value;
+
+    const data = {
+        id: idPokemon,
+        name: nameUpdate,
+        imgUrl: imgUrlUpdate,
+        pokedexNumber: pokedexNumberUpdate,
+        primaryType: primaryTypeUpdate,
+        secondaryType: secondaryTypeUpdate
+        // Add other fields as needed
+    };
+
+    fetch(`/pokemon/api/pokemonTypes/${idPokemon}`, {
+        method: 'PUT',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+    }).then(response => {
+        if(response.ok) {
+            updatePokemonTypesTable();
+            updateDetails(idPokemon);
+        } else {
+            console.error('Failed to update Pokemon type:', response.status);
+        }
+    }).catch(error => {
+        console.error('Error updating Pokemon type:', error);
+    });
+}
+
+

src/main/webapp/js/trainers.js

+
+let trainers = {};
+let tableParentId = 'table';
+let detailsParentId = 'details';
+
+function getRowId(resource) {
+    return `${resource.id}_row`
+}
+
+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(trainerId) {
+    const pt = trainers?.data?.find(item => item.id === trainerId);
+    const parent = document.getElementById(detailsParentId);
+
+    parent.innerHTML = `
+    <div class="card" id="${pt.id}_card">
+      <img src="${pt.profileUrl}" class="card-img-top">
+      <div class="card-body">
+        <h5 class="card-title">${pt.name}</h5>
+        <p class="card-text">
+            Name: ${pt.name} </br>
+            Create: ${pt.created} </br>
+            Last updated: ${pt.lastUpDate} </br>
+        </p>
+      </div>
+    </div>
+    `
+}
+
+function trainersToRow(trainers) {
+    return `
+    <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>
+    </tr>
+    `
+}
+
+function createTrainersTable() {
+    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">Last updated</th>
+                </tr>
+            </thead>
+            <tbody>
+                ${
+        trainers.data.map(resource => `${trainersToRow(resource)}`).join("\n")
+        || "no data"
+    }
+            </tbody>
+        </table>
+    `
+}
+
+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
+    }
+    fetch('/pokemon/api/trainers', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+    }).then(response => updateTrainerTable())
+}
+
+function deleteTrainer() {
+    let trainerId = document.getElementById("idTrainer").value;
+    fetch(`/pokemon/api/trainers/${trainerId}`, {
+        method: 'DELETE'
+    })
+        .then(response => {
+            if (response.ok) {
+                // Trainer deleted successfully, update UI
+                updateTrainerTable(); // Reload trainer table
+                updateDetails(''); // Clear details panel
+            } else {
+                console.error('Failed to delete trainer:', response.status);
+            }
+        })
+        .catch(error => {
+            console.error('Error deleting trainer:', error);
+        });
+}
+
+
+
+
+

src/main/webapp/pokemonTypes.html

@@ -33,6 +33,139 @@
 
     <h1>Pokemon Types</h1>
 
+    <br>
+
+    <h4>Create a Pokemon type</h4>
+
+    <form id="createPokemonTypeForm" onsubmit="createPokemonType()">
+    <div class = "form-group">
+            <label for = "pokemonName">Name</label>
+            <input type = "text" class = "form-control" id = "pokemonName" required>
+        </div>
+        <div class = "form-group">
+            <label for = "imgUrl">Img Url</label>
+            <input type = "text" class = "form-control" id = "imgUrl" required>
+        </div>
+<!--        <div class = "form-group">-->
+<!--            <label for = "japaneseName">Japanese name</label>-->
+<!--            <input type = "text" class = "form-control" id = "japaneseName" required>-->
+<!--        </div>-->
+        <div class = "form-group">
+            <label for = "pokedexNumber"> Poke dex number</label>
+            <input type = "text" class = "form-control" id = "pokedexNumber" required>
+        </div>
+<!--        <div class = "form-group">-->
+<!--            <label for = "abilities">Abilities</label>-->
+<!--            <input type = "text" class = "form-control" id = "abilities" required>-->
+<!--        </div>-->
+<!--        <div class = "form-group">-->
+<!--            <label for = "baseAttack">Base attack</label>-->
+<!--            <input type = "text" class = "form-control" id = "baseAttack" required>-->
+<!--        </div>-->
+<!--        <div class = "form-group">-->
+<!--            <label for = "captureRate">Capture rate</label>-->
+<!--            <input type = "text" class = "form-control" id = "captureRate" required>-->
+<!--        </div>-->
+<!--        <div class = "form-group">-->
+<!--            <label for = "classification">Classification</label>-->
+<!--            <input type = "text" class = "form-control" id = "classification" required>-->
+<!--        </div>-->
+<!--        <div class = "form-group">-->
+<!--            <label for = "baseDefense">Base defense</label>-->
+<!--            <input type = "text" class = "form-control" id = "baseDefense" required>-->
+<!--        </div>-->
+<!--        <div class = "form-group">-->
+<!--            <label for = "baseHeight">Base height</label>-->
+<!--            <input type = "text" class = "form-control" id = "baseHeight" required>-->
+<!--        </div>-->
+<!--        <div class = "form-group">-->
+<!--            <label for = "baseHp">Base HP</label>-->
+<!--            <input type = "text" class = "form-control" id = "baseHp" required>-->
+<!--        </div>-->
+<!--        <div class = "form-group">-->
+<!--            <label for = "baseSpAttack">Base Sp Attack</label>-->
+<!--            <input type = "text" class = "form-control" id = "baseSpAttack" required>-->
+<!--        </div>-->
+<!--        <div class = "form-group">-->
+<!--            <label for = "baseSpDefense">Base Sp Defense</label>-->
+<!--            <input type = "text" class = "form-control" id = "baseSpDefense" required>-->
+<!--        </div>-->
+<!--        <div class = "form-group">-->
+<!--            <label for = "baseSpeed">Base speed</label>-->
+<!--            <input type = "text" class = "form-control" id = "baseSpeed" required>-->
+<!--        </div>-->
+        <div class = "form-group">
+            <label for = "primaryType">Primary type</label>
+            <input type = "text" class = "form-control" id = "primaryType" required>
+        </div>
+        <div class = "form-group">
+            <label for = "secondaryType">Secondary type</label>
+            <input type = "text" class = "form-control" id = "secondaryType" required>
+        </div>
+<!--        <div class = "form-group">-->
+<!--            <label for = "baseWeight">Base weight</label>-->
+<!--            <input type = "text" class = "form-control" id = "baseWeight" required>-->
+<!--        </div>-->
+<!--        <div class = "form-group">-->
+<!--            <label for = "generation">Generation</label>-->
+<!--            <input type = "text" class = "form-control" id = "generation" required>-->
+<!--        </div>-->
+<!--        <div class = "form-group">-->
+<!--            <label for = "isLegendary">Is Legendary?</label>-->
+<!--            <input type = "text" class = "form-control" id = "isLegendary" required>-->
+<!--        </div>-->
+        <button type = "submit" class = "btn btn-primary">Create Pokemon Type</button>
+    </form>
+
+    <br>
+    <br>
+
+    <h4>Delete a Pokemon type</h4>
+
+    <form id = "deletePokemonTypeForm" onsubmit = "deletePokemonType()">
+        <div class = "form-group">
+            <label for = "pokemonId">Pokemon ID</label>
+            <input type = "text" class = "form-control" id = "pokemonId">
+        </div>
+        <button type = "submit" class = "btn btn-primary">Delete Pokemon type</button>
+    </form>
+
+    <br>
+    <br>
+
+    <h4>Update Pokemon type</h4>
+
+    <form id = "updatePokemonType" onsubmit = "updatePokemonType()">
+        <div class = "form-group">
+            <label for = "idUpdate">Pokemon ID</label>
+            <input type = "text" class = "form-control" id = "idUpdate">
+        </div>
+        <div class = "form-group">
+            <label for = "nameUpdate">Name</label>
+            <input type = "text" class = "form-control" id = "nameUpdate">
+        </div>
+        <div class = "form-group">
+            <label for = "url">Url</label>
+            <input type = "text" class = "form-control" id = "url">
+        </div>
+        <div class = "form-group">
+            <label for = "pokedex">Pokedex Number</label>
+            <input type = "text" class = "form-control" id = "pokedex">
+        </div>
+        <div class = "form-group">
+            <label for = "primary">Primary type</label>
+            <input type = "text" class = "form-control" id = "primary">
+        </div>
+        <div class = "form-group">
+            <label for = "secondary">Secondary type</label>
+            <input type = "text" class = "form-control" id = "secondary">
+        </div>
+        <button type = "submit" class = "btn btn-primary">Update Pokemon type</button>
+    </form>
+
+    <br>
+    <br>
+
     <div class="container">
         <div class="row">
             <div id="tableDiv" class="col-8">No data</div>
@@ -40,5 +173,6 @@
         </div>
     </div>
 
+
 </body>
 </html>
\ No newline at end of file

src/main/webapp/trainers.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
+          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
+
+    <title>Title</title>
+    <link rel="icon" type="image/x-icon" href="/pokemon/favicon.ico">
+</head>
+<body>
+
+<script src="js/trainers.js"></script>
+<script>
+    tableParentId = "tableDiv";
+    detailsParentId = "detailsDiv";
+
+    fetch('/pokemon/api/trainers')
+        .then(res => res.json())
+        .then(data => {
+            trainers = data;
+            createTrainersTable();
+        })
+        .catch(err => {
+            console.error(`Unable to fetch Pokemon Types: ${err.status}`);
+            console.error(err);
+        });
+</script>
+
+<h1>Trainers</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>
+
+<form id="createTrainerForm" onsubmit = "createTrainer();">
+    <div class = "form-group">
+        <label for = "trainerName">Name</label>
+        <input type = "text" class = "form-control" id = "trainerName" required>
+    </div>
+    <div class = "form-group">
+        <label for = "profileUrl">Profile Url</label>
+        <input type = "text" class = "form-control" id = "profileUrl" required>
+    </div>
+    <button type = "submit" class = "btn btn-primary">Create Trainer</button>
+</form>
+
+<br>
+<br>
+
+<form id="deleteTrainerForm" onsubmit = "deleteTrainer();">
+    <div class = "form-group">
+        <label for = "idTrainer">ID</label>
+        <input type = "text" class = "form-control" id = "idTrainer" required>
+    </div>
+    <button type = "submit" class = "btn btn-primary">Delete Trainer</button>
+</form>
+
+
+</body>
+</html>
+