added my lists page
This commit is contained in:
@@ -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();
|
||||
Reference in New Issue
Block a user