alvin/pokedex
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/pokedex.git synced 2026-03-06 21:29:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor Pokémon data fetching logic; remove deleted filter and improve error handling in API responses

Browse Source
This commit is contained in:
vista-man
2025-03-27 00:40:18 +01:00
parent 7d9ce536fc
commit 410afb9678
2 changed files with 44 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
v2/get-pokemon.php
View File

@@ -33,7 +33,7 @@ if (isset($_GET['id'])) {
LEFT JOIN pokemon_abilities pa ON p.id = pa.pokemon_id LEFT JOIN pokemon_abilities pa ON p.id = pa.pokemon_id
LEFT JOIN abilities a ON pa.ability_id = a.id LEFT JOIN abilities a ON pa.ability_id = a.id
LEFT JOIN stats st ON p.id = st.pokemon_id LEFT JOIN stats st ON p.id = st.pokemon_id
WHERE p.id = $id AND p.deleted = 0 WHERE p.id = $id
GROUP BY p.id"; GROUP BY p.id";
logMessage("Executing query: $sql"); logMessage("Executing query: $sql");
$result = $conn->query($sql); $result = $conn->query($sql);
@@ -54,7 +54,7 @@ if (isset($_GET['id'])) {
echo json_encode(["error" => "Error fetching Pokémon data"]); echo json_encode(["error" => "Error fetching Pokémon data"]);
} }
} else { } else {
$sql = "SELECT * FROM pokemon WHERE deleted = 0"; $sql = "SELECT * FROM pokemon";
logMessage("Executing query: $sql"); logMessage("Executing query: $sql");
$result = $conn->query($sql); $result = $conn->query($sql);

151
v2/pokemon.js
View File

@@ -1,16 +1,12 @@
const MAX_POKEMON = 1050; const MAX_POKEMON = 151;
const CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours in milliseconds const CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
const listWrapper = document.querySelector(".list-wrapper"); const listWrapper = document.querySelector(".list-wrapper");
const searchInput = document.querySelector("#search-input"); const searchInput = document.querySelector("#search-input");
const numberAscFilter = document.querySelector("#number-asc"); const numberFilter = document.querySelector("#number");
const numberDescFilter = document.querySelector("#number-desc"); const nameFilter = document.querySelector("#name");
const nameAscFilter = document.querySelector("#name-asc");
const nameDescFilter = document.querySelector("#name-desc");
const notFoundMessage = document.querySelector("#not-found-message"); const notFoundMessage = document.querySelector("#not-found-message");
const competitorsWrapper = document.querySelector("#competitors-wrapper");
let allPokemons = []; let allPokemons = [];
let filteredPokemons = [];
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const cachedData = localStorage.getItem("pokemons"); const cachedData = localStorage.getItem("pokemons");
@@ -19,9 +15,7 @@ document.addEventListener("DOMContentLoaded", () => {
if (cachedData && cacheTimestamp && (Date.now() - cacheTimestamp) < CACHE_DURATION) { if (cachedData && cacheTimestamp && (Date.now() - cacheTimestamp) < CACHE_DURATION) {
allPokemons = JSON.parse(cachedData); allPokemons = JSON.parse(cachedData);
console.log("Loaded Pokémon data from cache:", allPokemons); console.log("Loaded Pokémon data from cache:", allPokemons);
filteredPokemons = allPokemons.filter(pokemon => !pokemon.deleted); displayPokemons(allPokemons);
displayPokemons(filteredPokemons);
fetchCompetitors();
} else { } else {
fetchPokemons(); fetchPokemons();
} }
@@ -30,24 +24,22 @@ document.addEventListener("DOMContentLoaded", () => {
function fetchPokemons() { function fetchPokemons() {
console.log("Fetching Pokémon data from server..."); console.log("Fetching Pokémon data from server...");
fetch(`./get-pokemon.php`) fetch(`./get-pokemon.php`)
.then((response) => response.text()) .then((response) => {
.then((text) => { if (!response.ok) {
console.log("Server response:", text); throw new Error(`Network response was not ok: ${response.statusText}`);
try { }
const data = JSON.parse(text); return response.json();
if (Array.isArray(data)) { })
allPokemons = data; .then((data) => {
localStorage.setItem("pokemons", JSON.stringify(allPokemons)); console.log("Server response:", data);
localStorage.setItem("pokemons_timestamp", Date.now().toString()); if (Array.isArray(data)) {
console.log("Fetched and cached Pokémon data:", allPokemons); allPokemons = data;
filteredPokemons = allPokemons.filter(pokemon => !pokemon.deleted); localStorage.setItem("pokemons", JSON.stringify(allPokemons));
displayPokemons(filteredPokemons); localStorage.setItem("pokemons_timestamp", Date.now().toString());
fetchCompetitors(); console.log("Fetched and cached Pokémon data:", allPokemons);
} else { displayPokemons(allPokemons);
console.error("Unexpected response format:", data); } else {
} console.error("Unexpected response format:", data);
} catch (error) {
console.error("Error parsing JSON:", error);
} }
}) })
.catch((error) => { .catch((error) => {
@@ -59,12 +51,11 @@ async function fetchPokemonDataBeforeRedirect(id) {
try { try {
console.log(`Fetching data for Pokémon ID ${id} before redirect...`); console.log(`Fetching data for Pokémon ID ${id} before redirect...`);
const response = await fetch(`./get-pokemon.php?id=${id}`); const response = await fetch(`./get-pokemon.php?id=${id}`);
const text = await response.text(); if (!response.ok) {
console.log(`Response for Pokémon ID ${id}:`, text); throw new Error(`Network response was not ok: ${response.statusText}`);
if (!text) {
throw new Error("Empty response from server");
} }
const pokemon = JSON.parse(text); const pokemon = await response.json();
console.log(`Response for Pokémon ID ${id}:`, pokemon);
if (pokemon.error) { if (pokemon.error) {
throw new Error(pokemon.error); throw new Error(pokemon.error);
@@ -123,7 +114,7 @@ function lazyLoadImages() {
let observer = new IntersectionObserver((entries, self) => { let observer = new IntersectionObserver((entries, self) => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
preloadLowResImage(entry.target); preloadImage(entry.target);
self.unobserve(entry.target); self.unobserve(entry.target);
} }
}); });
@@ -134,21 +125,14 @@ function lazyLoadImages() {
}); });
} }
function preloadLowResImage(img) { function preloadImage(img) {
const srcLow = img.getAttribute('data-src-low'); const srcLow = img.getAttribute('data-src-low');
if (!srcLow) { const src = img.getAttribute('data-src');
if (!srcLow || !src) {
return; return;
} }
console.log("Preloading low-resolution image:", srcLow); console.log("Preloading low-resolution image:", srcLow);
img.src = srcLow; img.src = srcLow;
preloadHighResImage(img);
}
function preloadHighResImage(img) {
const src = img.getAttribute('data-src');
if (!src) {
return;
}
const highResImg = new Image(); const highResImg = new Image();
highResImg.src = src; highResImg.src = src;
highResImg.onload = () => { highResImg.onload = () => {
@@ -160,20 +144,24 @@ function preloadHighResImage(img) {
} }
searchInput.addEventListener("keyup", handleSearch); searchInput.addEventListener("keyup", handleSearch);
numberAscFilter.addEventListener("change", handleSort);
numberDescFilter.addEventListener("change", handleSort);
nameAscFilter.addEventListener("change", handleSort);
nameDescFilter.addEventListener("change", handleSort);
function handleSearch() { function handleSearch() {
const searchTerm = searchInput.value.toLowerCase(); const searchTerm = searchInput.value.toLowerCase();
console.log("Handling search with term:", searchTerm); console.log("Handling search with term:", searchTerm);
let filteredPokemons;
filteredPokemons = allPokemons.filter((pokemon) => { if (numberFilter.checked) {
const pokemonID = pokemon.id.toString(); filteredPokemons = allPokemons.filter((pokemon) => {
const pokemonName = pokemon.name.toLowerCase(); const pokemonID = pokemon.id.toString();
return (pokemonID.startsWith(searchTerm) || pokemonName.startsWith(searchTerm)) && !pokemon.deleted; return pokemonID.startsWith(searchTerm);
}); });
} else if (nameFilter.checked) {
filteredPokemons = allPokemons.filter((pokemon) =>
pokemon.name.toLowerCase().startsWith(searchTerm)
);
} else {
filteredPokemons = allPokemons;
}
displayPokemons(filteredPokemons); displayPokemons(filteredPokemons);
@@ -184,67 +172,12 @@ function handleSearch() {
} }
} }
function handleSort() {
if (numberAscFilter.checked) {
filteredPokemons.sort((a, b) => a.id - b.id);
} else if (numberDescFilter.checked) {
filteredPokemons.sort((a, b) => b.id - a.id);
} else if (nameAscFilter.checked) {
filteredPokemons.sort((a, b) => a.name.localeCompare(b.name));
} else if (nameDescFilter.checked) {
filteredPokemons.sort((a, b) => b.name.localeCompare(a.name));
}
displayPokemons(filteredPokemons);
}
const closeButton = document.querySelector(".search-close-icon"); const closeButton = document.querySelector(".search-close-icon");
closeButton.addEventListener("click", clearSearch); closeButton.addEventListener("click", clearSearch);
function clearSearch() { function clearSearch() {
console.log("Clearing search input and displaying all Pokémon..."); console.log("Clearing search input and displaying all Pokémon...");
searchInput.value = ""; searchInput.value = "";
filteredPokemons = allPokemons.filter(pokemon => !pokemon.deleted); displayPokemons(allPokemons);
displayPokemons(filteredPokemons);
notFoundMessage.style.display = "none"; notFoundMessage.style.display = "none";
} }
function fetchCompetitors() {
console.log("Fetching competitors data from server...");
fetch(`./get-competitors.php`)
.then((response) => response.text())
.then((text) => {
console.log("Competitors data:", text);
try {
const data = JSON.parse(text);
displayCompetitors(data);
} catch (error) {
console.error("Error parsing JSON:", error);
}
})
.catch((error) => {
console.error("Error fetching competitors data:", error);
});
}
function displayCompetitors(competitors) {
competitorsWrapper.innerHTML = "";
competitors.forEach((competitor) => {
const listItem = document.createElement("div");
listItem.className = "list-item";
listItem.innerHTML = `
<div class="number-wrap">
<p class="caption-fonts">#${competitor.id}</p>
</div>
<div class="name-wrap">
<p class="body3-fonts">${competitor.name}</p>
</div>
<div class="pokemon-count">
<p class="body3-fonts">Pokémon: ${competitor.pokemon_count}</p>
</div>
`;
competitorsWrapper.appendChild(listItem);
});
}