Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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>
`
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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);
});
}