let pokemonTypes = {}; let tableParentId = 'table'; let detailsParentId = 'details'; function getRowId(resource) { return `${resource.id}_row` } function updateDetails(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}"> <div class="card-body"> <h5 class="card-title">${pt.name} #${pt.pokedexNumber}</h5> <p class="card-text"> Japanese name: ${pt.japaneseName} </br> Abilities: ${pt.abilities?.join(", ") || "none"} </br> Type: ${pt.primaryType}${pt.secondaryType ? " , " + pt.secondaryType : ""} </p> </div> </div> ` } function pokemonTypeToRow(pokemonType) { 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> ` } function createPokemonTypesTable() { 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">Pokedex Number</th> <th scope="col">Primary Type</th> <th scope="col">Secondary Type</th> </tr> </thead> <tbody> ${ pokemonTypes.data.map(resource => `${pokemonTypeToRow(resource)}`).join("\n") || "no data" } </tbody> </table> ` } 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); }); }