requests.js

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