added my lists page

This commit is contained in:
2025-12-06 14:28:40 +01:00
parent 9832384627
commit e5ec8aa7e5
21 changed files with 2400 additions and 44 deletions

View File

@@ -6,6 +6,13 @@ const itemsPerPage = 12;
let extensionName = null;
let bookSlug = null;
// NUEVAS VARIABLES GLOBALES PARA LISTA
let currentBookData = null;
let isInList = false;
let currentListEntry = null;
const API_BASE = '/api';
function getBookUrl(id, source = 'anilist') {
return `/api/book/${id}?source=${source}`;
}
@@ -14,6 +21,222 @@ function getChaptersUrl(id, source = 'anilist') {
return `/api/book/${id}/chapters?source=${source}`;
}
// ==========================================================
// 1. FUNCIONES DE AUTENTICACIÓN Y LISTA
// ==========================================================
// Auth helpers
function getAuthToken() {
return localStorage.getItem('token');
}
function getAuthHeaders() {
const token = getAuthToken();
return {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
};
}
// Check if book is in list
async function checkIfInList() {
try {
const response = await fetch(`${API_BASE}/list`, {
headers: getAuthHeaders()
});
if (response.ok) {
const data = await response.json();
const idToSearch = extensionName ? bookSlug : bookId;
const entry = data.results?.find(item =>
item.entry_id === idToSearch &&
item.source === (extensionName || 'anilist')
);
if (entry) {
isInList = true;
currentListEntry = entry;
updateAddToListButton();
}
}
} catch (error) {
console.error('Error checking list:', error);
}
}
// Update button state
function updateAddToListButton() {
const btn = document.getElementById('add-to-list-btn');
if (!btn) return;
if (isInList) {
btn.innerHTML = `
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>
In Your Library
`;
btn.style.background = 'rgba(34, 197, 94, 0.2)';
btn.style.color = '#22c55e';
btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
btn.onclick = openAddToListModal;
} else {
btn.innerHTML = '+ Add to Library';
btn.style.background = null; // Restablecer estilos si no está en lista
btn.style.color = null;
btn.style.borderColor = null;
btn.onclick = openAddToListModal;
}
}
// Open add to list modal
function openAddToListModal() {
if (!currentBookData) return;
// Obtener el total de capítulos/volúmenes
const totalUnits = currentBookData.chapters || currentBookData.volumes || 999;
if (isInList) {
// If already in list, open edit modal with current data
document.getElementById('modal-status').value = currentListEntry.status || 'PLANNING';
document.getElementById('modal-progress').value = currentListEntry.progress || 0;
document.getElementById('modal-score').value = currentListEntry.score || '';
document.getElementById('modal-title').textContent = 'Edit Library Entry';
document.getElementById('modal-delete-btn').style.display = 'block';
} else {
// New entry defaults
document.getElementById('modal-status').value = 'PLANNING';
document.getElementById('modal-progress').value = 0;
document.getElementById('modal-score').value = '';
document.getElementById('modal-title').textContent = 'Add to Library';
document.getElementById('modal-delete-btn').style.display = 'none';
}
// Ajustar etiqueta de progreso según el formato
const progressLabel = document.getElementById('modal-progress-label');
if (progressLabel) {
const format = currentBookData.format?.toUpperCase() || 'MANGA';
if (format === 'MANGA' || format === 'ONE_SHOT' || format === 'MANHWA') {
progressLabel.textContent = 'Chapters Read';
} else {
progressLabel.textContent = 'Volumes/Parts Read';
}
}
document.getElementById('modal-progress').max = totalUnits;
document.getElementById('add-list-modal').classList.add('active');
}
// Close modal
function closeAddToListModal() {
document.getElementById('add-list-modal').classList.remove('active');
}
// Save to list
async function saveToList() {
const status = document.getElementById('modal-status').value;
const progress = parseInt(document.getElementById('modal-progress').value) || 0;
const score = parseFloat(document.getElementById('modal-score').value) || null;
if (!currentBookData) {
showNotification('Cannot save: Book data not loaded.', 'error');
return;
}
// Determinar el tipo de entrada (MANGA o NOVEL basado en el formato)
const format = currentBookData.format?.toUpperCase() || 'MANGA';
const entryType = (format === 'MANGA' || format === 'ONE_SHOT' || format === 'MANHWA') ? 'MANGA' : 'NOVEL';
const idToSave = extensionName ? bookSlug : bookId;
try {
const response = await fetch(`${API_BASE}/list/entry`, {
method: 'POST',
headers: getAuthHeaders(),
body: JSON.stringify({
entry_id: idToSave,
source: extensionName || 'anilist',
entry_type: entryType,
status: status,
progress: progress,
score: score
})
});
if (!response.ok) {
throw new Error('Failed to save entry');
}
isInList = true;
currentListEntry = { entry_id: idToSave, source: extensionName || 'anilist', entry_type: entryType, status, progress, score };
updateAddToListButton();
closeAddToListModal();
showNotification(isInList ? 'Updated successfully!' : 'Added to your library!', 'success');
} catch (error) {
console.error('Error saving to list:', error);
showNotification('Failed to save. Please try again.', 'error');
}
}
// Delete from list
async function deleteFromList() {
if (!confirm('Remove this book from your library?')) return;
const idToDelete = extensionName ? bookSlug : bookId;
try {
const response = await fetch(`${API_BASE}/list/entry/${idToDelete}`, {
method: 'DELETE',
headers: getAuthHeaders()
});
if (!response.ok) {
throw new Error('Failed to delete entry');
}
isInList = false;
currentListEntry = null;
updateAddToListButton();
closeAddToListModal();
showNotification('Removed from your library', 'success');
} catch (error) {
console.error('Error deleting from list:', error);
showNotification('Failed to remove. Please try again.', 'error');
}
}
// Show notification
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 100px;
right: 20px;
background: ${type === 'success' ? '#22c55e' : type === 'error' ? '#ef4444' : '#8b5cf6'};
color: white;
padding: 1rem 1.5rem;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
z-index: 9999;
font-weight: 600;
animation: slideInRight 0.3s ease;
`;
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = 'slideOutRight 0.3s ease';
setTimeout(() => notification.remove(), 300);
}, 3000);
}
// ==========================================================
// 2. FUNCIÓN PRINCIPAL DE CARGA (init)
// ==========================================================
async function init() {
try {
const path = window.location.pathname;
@@ -46,6 +269,8 @@ async function init() {
return;
}
currentBookData = data; // <--- GUARDAR DATOS GLOBALES
let title, description, score, year, status, format, chapters, poster, banner, genres;
if (extensionName) {
@@ -125,11 +350,18 @@ async function init() {
loadChapters(idForFetch);
await checkIfInList(); // <--- COMPROBAR ESTADO DE LA LISTA
} catch (err) {
console.error("Metadata Error:", err);
}
}
// ==========================================================
// 3. FUNCIONES DE CARGA Y RENDERIZADO DE CAPÍTULOS
// (Sin cambios, pero se incluyen para completar el script)
// ==========================================================
async function loadChapters(idForFetch) {
const tbody = document.getElementById('chapters-body');
if (!tbody) return;
@@ -291,4 +523,34 @@ function openReader(bookId, chapterId, provider) {
window.location.href = `/read/${p}/${c}/${bookId}${extension}`;
}
// ==========================================================
// 4. LISTENERS Y ARRANQUE
// ==========================================================
// Close modal on outside click
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('add-list-modal');
if (modal) {
modal.addEventListener('click', (e) => {
if (e.target.id === 'add-list-modal') {
closeAddToListModal();
}
});
}
});
// Add animations (Copied from anime.js)
const style = document.createElement('style');
style.textContent = `
@keyframes slideInRight {
from { transform: translateX(400px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(400px); opacity: 0; }
}
`;
document.head.appendChild(style);
init();