added my lists page
This commit is contained in:
@@ -18,6 +18,7 @@ const extensionsRoutes = require('./dist/api/extensions/extensions.routes');
|
||||
const galleryRoutes = require('./dist/api/gallery/gallery.routes');
|
||||
const rpcRoutes = require('./dist/api/rpc/rpc.routes');
|
||||
const userRoutes = require('./dist/api/user/user.routes');
|
||||
const listRoutes = require('./dist/api/list/list.routes');
|
||||
const anilistRoute = require('./dist/api/anilist');
|
||||
|
||||
|
||||
@@ -60,6 +61,7 @@ fastify.register(galleryRoutes, { prefix: '/api' });
|
||||
fastify.register(rpcRoutes, { prefix: '/api' });
|
||||
fastify.register(userRoutes, { prefix: '/api' });
|
||||
fastify.register(anilistRoute, { prefix: '/api' });
|
||||
fastify.register(listRoutes, { prefix: '/api' });
|
||||
|
||||
function startCppScraper() {
|
||||
const exePath = path.join(
|
||||
|
||||
112
src/api/list/list.controller.ts
Normal file
112
src/api/list/list.controller.ts
Normal file
@@ -0,0 +1,112 @@
|
||||
// list.controller.ts
|
||||
|
||||
import { FastifyReply, FastifyRequest } from 'fastify';
|
||||
import * as listService from './list.service';
|
||||
|
||||
// Tipos de solicitud asumidos:
|
||||
// - UserRequest: Request con el objeto 'user' adjunto por el hook de autenticación.
|
||||
interface UserRequest extends FastifyRequest {
|
||||
user?: { id: number };
|
||||
}
|
||||
|
||||
interface UpsertEntryBody {
|
||||
entry_type: any;
|
||||
entry_id: number;
|
||||
external_id?: string | null;
|
||||
source: string;
|
||||
status: string;
|
||||
progress: number;
|
||||
score: number;
|
||||
}
|
||||
|
||||
interface DeleteEntryParams {
|
||||
entryId: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* GET /list
|
||||
* Obtiene toda la lista del usuario autenticado.
|
||||
*/
|
||||
export async function getList(req: UserRequest, reply: FastifyReply) {
|
||||
const userId = req.user?.id;
|
||||
if (!userId) {
|
||||
return reply.code(401).send({ error: "Unauthorized" });
|
||||
}
|
||||
|
||||
try {
|
||||
const results = await listService.getUserList(userId);
|
||||
return { results };
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return reply.code(500).send({ error: "Failed to retrieve list" });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* POST /list/entry
|
||||
* Crea o actualiza una entrada de lista (upsert).
|
||||
*/
|
||||
export async function upsertEntry(req: UserRequest, reply: FastifyReply) {
|
||||
const userId = req.user?.id;
|
||||
const body = req.body as UpsertEntryBody;
|
||||
|
||||
if (!userId) {
|
||||
return reply.code(401).send({ error: "Unauthorized" });
|
||||
}
|
||||
|
||||
// <--- NUEVO: Validación de entry_type
|
||||
if (!body.entry_id || !body.source || !body.status || !body.entry_type) {
|
||||
return reply.code(400).send({ error: "Missing required fields (entry_id, source, status, entry_type)." });
|
||||
}
|
||||
|
||||
try {
|
||||
const entryData = {
|
||||
user_id: userId,
|
||||
entry_id: body.entry_id,
|
||||
external_id: body.external_id,
|
||||
source: body.source,
|
||||
entry_type: body.entry_type, // <--- NUEVO: Pasar entry_type
|
||||
status: body.status,
|
||||
progress: body.progress || 0,
|
||||
score: body.score || null
|
||||
};
|
||||
|
||||
const result = await listService.upsertListEntry(entryData);
|
||||
|
||||
return { success: true, changes: result.changes };
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return reply.code(500).send({ error: "Failed to save list entry" });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* DELETE /list/entry/:entryId
|
||||
* Elimina una entrada de lista.
|
||||
*/
|
||||
export async function deleteEntry(req: UserRequest, reply: FastifyReply) {
|
||||
const userId = req.user?.id;
|
||||
const { entryId } = req.params as DeleteEntryParams;
|
||||
|
||||
if (!userId) {
|
||||
return reply.code(401).send({ error: "Unauthorized" });
|
||||
}
|
||||
|
||||
const numericEntryId = parseInt(entryId, 10);
|
||||
if (isNaN(numericEntryId)) {
|
||||
return reply.code(400).send({ error: "Invalid entry ID." });
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await listService.deleteListEntry(userId, numericEntryId);
|
||||
|
||||
if (result.success) {
|
||||
return { success: true, message: "Entry deleted successfully." };
|
||||
} else {
|
||||
return reply.code(404).send({ error: "Entry not found or unauthorized to delete." });
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return reply.code(500).send({ error: "Failed to delete list entry" });
|
||||
}
|
||||
}
|
||||
10
src/api/list/list.routes.ts
Normal file
10
src/api/list/list.routes.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { FastifyInstance } from 'fastify';
|
||||
import * as controller from './list.controller';
|
||||
|
||||
async function listRoutes(fastify: FastifyInstance) {
|
||||
fastify.get('/list', controller.getList);
|
||||
fastify.post('/list/entry', controller.upsertEntry);
|
||||
fastify.delete('/list/entry/:entryId', controller.deleteEntry);
|
||||
}
|
||||
|
||||
export default listRoutes;
|
||||
183
src/api/list/list.service.ts
Normal file
183
src/api/list/list.service.ts
Normal file
@@ -0,0 +1,183 @@
|
||||
// list.service.ts (Actualizado)
|
||||
|
||||
import {queryAll, run} from '../../shared/database';
|
||||
import {getExtension} from '../../shared/extensions';
|
||||
import * as animeService from '../anime/anime.service';
|
||||
import * as booksService from '../books/books.service';
|
||||
|
||||
// Define la interfaz de entrada de lista (sin external_id)
|
||||
interface ListEntryData {
|
||||
entry_type: any;
|
||||
user_id: number;
|
||||
entry_id: number; // ID de contenido de la fuente (AniList, MAL, o local)
|
||||
source: string; // 'anilist', 'local', etc.
|
||||
status: string; // 'COMPLETED', 'WATCHING', etc.
|
||||
progress: number;
|
||||
score: number | null;
|
||||
}
|
||||
|
||||
const USER_DB = 'userdata';
|
||||
|
||||
/**
|
||||
* Inserta o actualiza una entrada de lista.
|
||||
* Utiliza ON CONFLICT(user_id, entry_id) para el upsert.
|
||||
*/
|
||||
export async function upsertListEntry(entry: any) {
|
||||
const {
|
||||
user_id,
|
||||
entry_id,
|
||||
source,
|
||||
entry_type,
|
||||
status,
|
||||
progress,
|
||||
score
|
||||
} = entry;
|
||||
|
||||
const sql = `
|
||||
INSERT INTO ListEntry
|
||||
(user_id, entry_id, source, entry_type, status, progress, score, updated_at)
|
||||
VALUES
|
||||
(?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP)
|
||||
ON CONFLICT(user_id, entry_id) DO UPDATE SET
|
||||
source = EXCLUDED.source,
|
||||
entry_type = EXCLUDED.entry_type,
|
||||
status = EXCLUDED.status,
|
||||
progress = EXCLUDED.progress,
|
||||
score = EXCLUDED.score,
|
||||
updated_at = CURRENT_TIMESTAMP;
|
||||
`;
|
||||
|
||||
const params = [
|
||||
user_id,
|
||||
entry_id,
|
||||
source,
|
||||
entry_type,
|
||||
status,
|
||||
progress,
|
||||
score || null
|
||||
];
|
||||
|
||||
try {
|
||||
const result = await run(sql, params, USER_DB);
|
||||
return { changes: result.changes, lastID: result.lastID };
|
||||
} catch (error) {
|
||||
console.error("Error al guardar la entrada de lista:", error);
|
||||
throw new Error("Error en la base de datos al guardar la entrada.");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Recupera la lista completa de un usuario.
|
||||
*/
|
||||
export async function getUserList(userId: number): Promise<any> {
|
||||
const sql = `
|
||||
SELECT * FROM ListEntry
|
||||
WHERE user_id = ?
|
||||
ORDER BY updated_at DESC;
|
||||
`;
|
||||
|
||||
try {
|
||||
// 1. Obtener la lista base de la DB
|
||||
const dbList = await queryAll(sql, [userId], USER_DB) as ListEntryData[];
|
||||
|
||||
// 2. Crear un array de promesas para obtener los detalles de cada entrada concurrentemente
|
||||
const enrichedListPromises = dbList.map(async (entry) => {
|
||||
let contentDetails: any | null = null;
|
||||
const id = entry.entry_id;
|
||||
const source = entry.source;
|
||||
const type = entry.entry_type;
|
||||
|
||||
try {
|
||||
if (type === 'ANIME') {
|
||||
// Lógica para ANIME
|
||||
let anime: any;
|
||||
if (source === 'anilist') {
|
||||
anime = await animeService.getAnimeById(id);
|
||||
} else {
|
||||
const ext = getExtension(source);
|
||||
// Asegurar que id sea una cadena para getAnimeInfoExtension si el id es un número
|
||||
anime = await animeService.getAnimeInfoExtension(ext, id.toString());
|
||||
}
|
||||
|
||||
contentDetails = {
|
||||
title: anime?.title || 'Unknown Anime Title',
|
||||
poster: anime?.coverImage?.extraLarge || anime?.image || '',
|
||||
total_episodes: anime?.episodes || anime?.nextAiringEpisode?.episode - 1 || 0,
|
||||
};
|
||||
|
||||
} else if (type === 'MANGA' || type === 'NOVEL') {
|
||||
// Lógica para MANGA, NOVEL y otros "books"
|
||||
let book: any;
|
||||
if (source === 'anilist') {
|
||||
book = await booksService.getBookById(id);
|
||||
} else {
|
||||
const ext = getExtension(source);
|
||||
// Asegurar que id sea una cadena
|
||||
const result = await booksService.getBookInfoExtension(ext, id.toString());
|
||||
book = result || null;
|
||||
}
|
||||
|
||||
contentDetails = {
|
||||
title: book?.title || 'Unknown Book Title',
|
||||
poster: book?.coverImage?.extraLarge || book?.image || '',
|
||||
// Priorizar chapters, luego volumes * 10, sino 0
|
||||
total_chapters: book?.chapters || book?.volumes * 10 || 0,
|
||||
};
|
||||
}
|
||||
} catch (contentError) {
|
||||
console.error(`Error fetching details for entry ${id} (${source}):`, contentError);
|
||||
contentDetails = {
|
||||
title: 'Error Loading Details',
|
||||
poster: '/public/assets/placeholder.png',
|
||||
};
|
||||
}
|
||||
|
||||
// 3. Estandarizar y Combinar los datos.
|
||||
|
||||
let finalTitle = contentDetails?.title || 'Unknown Title';
|
||||
let finalPoster = contentDetails?.poster || '/public/assets/placeholder.png';
|
||||
|
||||
// Aplanamiento del título (Necesario para Anilist que devuelve un objeto)
|
||||
if (typeof finalTitle === 'object' && finalTitle !== null) {
|
||||
// Priorizar userPreferred, luego english, luego romaji, sino 'Unknown Title'
|
||||
finalTitle = finalTitle.userPreferred || finalTitle.english || finalTitle.romaji || 'Unknown Title';
|
||||
}
|
||||
|
||||
|
||||
// Retornar el objeto combinado y estandarizado
|
||||
return {
|
||||
...entry,
|
||||
// Datos estandarizados para el frontend:
|
||||
title: finalTitle,
|
||||
poster: finalPoster,
|
||||
total_episodes: contentDetails?.total_episodes, // Será undefined si es Manga/Novel
|
||||
total_chapters: contentDetails?.total_chapters, // Será undefined si es Anime
|
||||
};
|
||||
});
|
||||
|
||||
// 4. Ejecutar todas las promesas y esperar el resultado
|
||||
return await Promise.all(enrichedListPromises);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error al obtener la lista del usuario:", error);
|
||||
throw new Error("Error en la base de datos al obtener la lista.");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Elimina una entrada de lista por user_id y entry_id.
|
||||
*/
|
||||
export async function deleteListEntry(userId: number, entryId: number) {
|
||||
const sql = `
|
||||
DELETE FROM ListEntry
|
||||
WHERE user_id = ? AND entry_id = ?;
|
||||
`;
|
||||
|
||||
try {
|
||||
const result = await run(sql, [userId, entryId], USER_DB);
|
||||
return { success: result.changes > 0, changes: result.changes };
|
||||
} catch (error) {
|
||||
console.error("Error al eliminar la entrada de lista:", error);
|
||||
throw new Error("Error en la base de datos al eliminar la entrada.");
|
||||
}
|
||||
}
|
||||
@@ -64,6 +64,12 @@ export async function deleteUser(userId: number): Promise<any> {
|
||||
USER_DB_NAME
|
||||
);
|
||||
|
||||
await run(
|
||||
`DELETE FROM favorites WHERE user_id = ?`,
|
||||
[userId],
|
||||
'favorites'
|
||||
);
|
||||
|
||||
const result = await run(
|
||||
`DELETE FROM User WHERE id = ?`,
|
||||
[userId],
|
||||
@@ -73,6 +79,7 @@ export async function deleteUser(userId: number): Promise<any> {
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
export async function getAllUsers(): Promise<User[]> {
|
||||
const sql = 'SELECT id, username, profile_picture_url FROM User ORDER BY id';
|
||||
|
||||
|
||||
@@ -1,16 +1,196 @@
|
||||
const animeId = window.location.pathname.split('/').pop();
|
||||
let player;
|
||||
|
||||
let totalEpisodes = 0;
|
||||
let currentPage = 1;
|
||||
const itemsPerPage = 12;
|
||||
let extensionName;
|
||||
let currentAnimeData = null;
|
||||
let isInList = false;
|
||||
let currentListEntry = null;
|
||||
|
||||
const API_BASE = '/api';
|
||||
|
||||
var tag = document.createElement('script');
|
||||
tag.src = "https://www.youtube.com/iframe_api";
|
||||
var firstScriptTag = document.getElementsByTagName('script')[0];
|
||||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||
|
||||
let extensionName;
|
||||
// Auth helpers
|
||||
function getAuthToken() {
|
||||
return localStorage.getItem('token');
|
||||
}
|
||||
|
||||
function getAuthHeaders() {
|
||||
const token = getAuthToken();
|
||||
return {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
}
|
||||
|
||||
// Check if anime 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 entry = data.results?.find(item =>
|
||||
item.entry_id === parseInt(animeId) &&
|
||||
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 (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 List
|
||||
`;
|
||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
||||
btn.style.color = '#22c55e';
|
||||
btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
|
||||
} else {
|
||||
btn.innerHTML = '+ Add to List';
|
||||
}
|
||||
}
|
||||
|
||||
// Open add to list modal
|
||||
function openAddToListModal() {
|
||||
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 List 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 List';
|
||||
document.getElementById('modal-delete-btn').style.display = 'none';
|
||||
}
|
||||
|
||||
document.getElementById('modal-progress').max = totalEpisodes || 999;
|
||||
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;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/list/entry`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify({
|
||||
entry_id: animeId,
|
||||
source: extensionName || 'anilist',
|
||||
entry_type: 'ANIME',
|
||||
status: status,
|
||||
progress: progress,
|
||||
score: score
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to save entry');
|
||||
}
|
||||
|
||||
// Si la operación fue exitosa, actualizamos currentListEntry con el nuevo campo type
|
||||
isInList = true;
|
||||
currentListEntry = {
|
||||
entry_id: parseInt(animeId),
|
||||
source: extensionName || 'anilist',
|
||||
entry_type: 'ANIME', // <--- También se actualiza aquí
|
||||
status,
|
||||
progress,
|
||||
score
|
||||
};
|
||||
updateAddToListButton();
|
||||
closeAddToListModal();
|
||||
showNotification(isInList ? 'Updated successfully!' : 'Added to your list!', '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 anime from your list?')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/list/entry/${animeId}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to delete entry');
|
||||
}
|
||||
|
||||
isInList = false;
|
||||
currentListEntry = null;
|
||||
updateAddToListButton();
|
||||
closeAddToListModal();
|
||||
showNotification('Removed from your list', '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);
|
||||
}
|
||||
|
||||
async function loadAnime() {
|
||||
try {
|
||||
@@ -36,6 +216,8 @@ async function loadAnime() {
|
||||
return;
|
||||
}
|
||||
|
||||
currentAnimeData = data;
|
||||
|
||||
const title = data.title?.english || data.title?.romaji || data.title || "Unknown Title";
|
||||
document.title = `${title} | WaifuBoard`;
|
||||
document.getElementById('title').innerText = title;
|
||||
@@ -44,7 +226,6 @@ async function loadAnime() {
|
||||
|
||||
if (extensionName) {
|
||||
posterUrl = data.image || '';
|
||||
|
||||
} else {
|
||||
posterUrl = data.coverImage?.extraLarge || '';
|
||||
}
|
||||
@@ -181,6 +362,9 @@ async function loadAnime() {
|
||||
|
||||
renderEpisodes();
|
||||
|
||||
// Check if in list after loading anime data
|
||||
await checkIfInList();
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading anime:', err);
|
||||
document.getElementById('title').innerText = "Error loading anime";
|
||||
@@ -274,4 +458,30 @@ searchInput.addEventListener('input', (e) => {
|
||||
}
|
||||
});
|
||||
|
||||
// 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
|
||||
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);
|
||||
|
||||
loadAnime();
|
||||
@@ -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();
|
||||
428
src/scripts/list.js
Normal file
428
src/scripts/list.js
Normal file
@@ -0,0 +1,428 @@
|
||||
// API Configuration
|
||||
const API_BASE = '/api';
|
||||
let currentList = [];
|
||||
let filteredList = [];
|
||||
let currentEditingEntry = null;
|
||||
|
||||
// Get token from localStorage
|
||||
function getAuthToken() {
|
||||
return localStorage.getItem('token');
|
||||
}
|
||||
|
||||
// Create headers with auth token
|
||||
function getAuthHeaders() {
|
||||
const token = getAuthToken();
|
||||
return {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
}
|
||||
|
||||
// Initialize on page load
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
await loadList();
|
||||
setupEventListeners();
|
||||
});
|
||||
|
||||
// ==========================================================
|
||||
// FUNCIÓN: Poblar Filtro de Fuente (NUEVA LÓGICA)
|
||||
// ==========================================================
|
||||
async function populateSourceFilter() {
|
||||
const select = document.getElementById('source-filter');
|
||||
if (!select) return;
|
||||
|
||||
// Opciones base
|
||||
select.innerHTML = `
|
||||
<option value="all">All Sources</option>
|
||||
<option value="anilist">AniList</option>
|
||||
<option value="local">Local</option>
|
||||
`;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/extensions`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const extensions = data.extensions || [];
|
||||
|
||||
// Añadir cada nombre de extensión como una opción
|
||||
extensions.forEach(extName => {
|
||||
// Evitar duplicar 'anilist' o 'local'
|
||||
if (extName.toLowerCase() !== 'anilist' && extName.toLowerCase() !== 'local') {
|
||||
const option = document.createElement('option');
|
||||
option.value = extName;
|
||||
// Capitalizar el nombre
|
||||
option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
|
||||
select.appendChild(option);
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading extensions:', error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Setup all event listeners
|
||||
function setupEventListeners() {
|
||||
// View toggle
|
||||
document.querySelectorAll('.view-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
const view = btn.dataset.view;
|
||||
const container = document.getElementById('list-container');
|
||||
if (view === 'list') {
|
||||
container.classList.add('list-view');
|
||||
} else {
|
||||
container.classList.remove('list-view');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Filters
|
||||
document.getElementById('status-filter').addEventListener('change', applyFilters);
|
||||
document.getElementById('source-filter').addEventListener('change', applyFilters);
|
||||
document.getElementById('type-filter').addEventListener('change', applyFilters);
|
||||
document.getElementById('sort-filter').addEventListener('change', applyFilters);
|
||||
|
||||
// Search
|
||||
document.querySelector('.search-input').addEventListener('input', (e) => {
|
||||
const query = e.target.value.toLowerCase();
|
||||
if (query) {
|
||||
filteredList = currentList.filter(item =>
|
||||
item.title?.toLowerCase().includes(query)
|
||||
);
|
||||
} else {
|
||||
filteredList = [...currentList];
|
||||
}
|
||||
applyFilters();
|
||||
});
|
||||
}
|
||||
|
||||
// Load list from API (MODIFICADO para incluir populateSourceFilter)
|
||||
async function loadList() {
|
||||
const loadingState = document.getElementById('loading-state');
|
||||
const emptyState = document.getElementById('empty-state');
|
||||
const container = document.getElementById('list-container');
|
||||
|
||||
// Ejecutar la carga de extensiones antes de la lista principal
|
||||
await populateSourceFilter();
|
||||
|
||||
try {
|
||||
loadingState.style.display = 'flex';
|
||||
emptyState.style.display = 'none';
|
||||
container.innerHTML = '';
|
||||
|
||||
const response = await fetch(`${API_BASE}/list`, {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to load list');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
currentList = data.results || [];
|
||||
filteredList = [...currentList];
|
||||
|
||||
loadingState.style.display = 'none';
|
||||
|
||||
if (currentList.length === 0) {
|
||||
emptyState.style.display = 'flex';
|
||||
} else {
|
||||
updateStats();
|
||||
applyFilters();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading list:', error);
|
||||
loadingState.style.display = 'none';
|
||||
alert('Failed to load your list. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
// Update statistics
|
||||
function updateStats() {
|
||||
const total = currentList.length;
|
||||
const watching = currentList.filter(item => item.status === 'WATCHING').length;
|
||||
const completed = currentList.filter(item => item.status === 'COMPLETED').length;
|
||||
const planning = currentList.filter(item => item.status === 'PLANNING').length;
|
||||
|
||||
document.getElementById('total-count').textContent = total;
|
||||
document.getElementById('watching-count').textContent = watching;
|
||||
document.getElementById('completed-count').textContent = completed;
|
||||
document.getElementById('planned-count').textContent = planning;
|
||||
}
|
||||
|
||||
// Apply filters and sorting
|
||||
function applyFilters() {
|
||||
const statusFilter = document.getElementById('status-filter').value;
|
||||
const sourceFilter = document.getElementById('source-filter').value;
|
||||
const typeFilter = document.getElementById('type-filter').value;
|
||||
const sortFilter = document.getElementById('sort-filter').value;
|
||||
|
||||
// Filter
|
||||
let filtered = [...filteredList];
|
||||
|
||||
if (statusFilter !== 'all') {
|
||||
filtered = filtered.filter(item => item.status === statusFilter);
|
||||
}
|
||||
|
||||
if (sourceFilter !== 'all') {
|
||||
filtered = filtered.filter(item => item.source === sourceFilter);
|
||||
}
|
||||
|
||||
// Filtrado por tipo
|
||||
if (typeFilter !== 'all') {
|
||||
filtered = filtered.filter(item => (item.entry_type || 'ANIME') === typeFilter);
|
||||
}
|
||||
|
||||
// Sort
|
||||
switch (sortFilter) {
|
||||
case 'title':
|
||||
filtered.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
|
||||
break;
|
||||
case 'score':
|
||||
filtered.sort((a, b) => (b.score || 0) - (a.score || 0));
|
||||
break;
|
||||
case 'progress':
|
||||
filtered.sort((a, b) => (b.progress || 0) - (a.progress || 0));
|
||||
break;
|
||||
case 'updated':
|
||||
default:
|
||||
filtered.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
|
||||
break;
|
||||
}
|
||||
|
||||
renderList(filtered);
|
||||
}
|
||||
|
||||
// Render list items
|
||||
function renderList(items) {
|
||||
const container = document.getElementById('list-container');
|
||||
container.innerHTML = '';
|
||||
|
||||
if (items.length === 0) {
|
||||
container.innerHTML = '<div class="empty-state"><p>No entries match your filters</p></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
items.forEach(item => {
|
||||
const element = createListItem(item);
|
||||
container.appendChild(element);
|
||||
});
|
||||
}
|
||||
|
||||
// Create individual list item (ACTUALIZADO para MANGA/NOVEL)
|
||||
function createListItem(item) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'list-item';
|
||||
div.onclick = () => openEditModal(item);
|
||||
|
||||
const posterUrl = item.poster || '/public/assets/placeholder.png';
|
||||
const progress = item.progress || 0;
|
||||
|
||||
// Determinar total de unidades basado en el tipo
|
||||
const totalUnits = item.entry_type === 'ANIME' ?
|
||||
item.total_episodes || 0 :
|
||||
item.total_chapters || 0;
|
||||
|
||||
const progressPercent = totalUnits > 0 ? (progress / totalUnits) * 100 : 0;
|
||||
const score = item.score ? item.score.toFixed(1) : null;
|
||||
|
||||
// Determinar la etiqueta de unidad (Episodes, Chapters, Volumes, etc.)
|
||||
const entryType = (item.entry_type || 'ANIME').toUpperCase();
|
||||
let unitLabel = 'units';
|
||||
if (entryType === 'ANIME') {
|
||||
unitLabel = 'episodes';
|
||||
} else if (entryType === 'MANGA') {
|
||||
unitLabel = 'chapters';
|
||||
} else if (entryType === 'NOVEL') {
|
||||
unitLabel = 'chapters/volumes';
|
||||
}
|
||||
|
||||
// Ajustar etiquetas de estado según el tipo (Watching/Reading)
|
||||
const statusLabels = {
|
||||
'WATCHING': entryType === 'ANIME' ? 'Watching' : 'Reading',
|
||||
'COMPLETED': 'Completed',
|
||||
'PLANNING': entryType === 'ANIME' ? 'Plan to Watch' : 'Plan to Read',
|
||||
'PAUSED': 'Paused',
|
||||
'DROPPED': 'Dropped'
|
||||
};
|
||||
|
||||
div.innerHTML = `
|
||||
<img src="${posterUrl}" alt="${item.title || 'Entry'}" class="item-poster" onerror="this.src='/public/assets/placeholder.png'">
|
||||
<div class="item-content">
|
||||
<h3 class="item-title">${item.title || 'Unknown Title'}</h3>
|
||||
<div class="item-meta">
|
||||
<span class="meta-pill status-pill">${statusLabels[item.status] || item.status}</span>
|
||||
<span class="meta-pill type-pill">${entryType}</span>
|
||||
<span class="meta-pill source-pill">${item.source.toUpperCase()}</span>
|
||||
</div>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" style="width: ${progressPercent}%"></div>
|
||||
</div>
|
||||
<div class="progress-text">
|
||||
<span>${progress}${totalUnits > 0 ? ` / ${totalUnits}` : ''} ${unitLabel}</span> ${score ? `<span class="score-badge">⭐ ${score}</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return div;
|
||||
}
|
||||
|
||||
// Open edit modal (ACTUALIZADO para MANGA/NOVEL)
|
||||
function openEditModal(item) {
|
||||
currentEditingEntry = item;
|
||||
|
||||
document.getElementById('edit-status').value = item.status;
|
||||
document.getElementById('edit-progress').value = item.progress || 0;
|
||||
document.getElementById('edit-score').value = item.score || '';
|
||||
|
||||
// Ajusta el texto del campo de progreso en el modal
|
||||
const entryType = (item.entry_type || 'ANIME').toUpperCase();
|
||||
const progressLabel = document.querySelector('label[for="edit-progress"]');
|
||||
if (progressLabel) {
|
||||
if (entryType === 'MANGA') {
|
||||
progressLabel.textContent = 'Chapters Read';
|
||||
} else if (entryType === 'NOVEL') {
|
||||
progressLabel.textContent = 'Chapters/Volumes Read';
|
||||
} else {
|
||||
progressLabel.textContent = 'Episodes Watched';
|
||||
}
|
||||
}
|
||||
|
||||
// Establecer el max del progreso
|
||||
const totalUnits = item.entry_type === 'ANIME' ?
|
||||
item.total_episodes || 999 :
|
||||
item.total_chapters || 999;
|
||||
document.getElementById('edit-progress').max = totalUnits;
|
||||
|
||||
|
||||
document.getElementById('edit-modal').style.display = 'flex';
|
||||
}
|
||||
|
||||
// Close edit modal
|
||||
function closeEditModal() {
|
||||
currentEditingEntry = null;
|
||||
document.getElementById('edit-modal').style.display = 'none';
|
||||
}
|
||||
|
||||
// Save entry changes
|
||||
async function saveEntry() {
|
||||
if (!currentEditingEntry) return;
|
||||
|
||||
const status = document.getElementById('edit-status').value;
|
||||
const progress = parseInt(document.getElementById('edit-progress').value) || 0;
|
||||
const score = parseFloat(document.getElementById('edit-score').value) || null;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/list/entry`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify({
|
||||
entry_id: currentEditingEntry.entry_id,
|
||||
source: currentEditingEntry.source,
|
||||
entry_type: currentEditingEntry.entry_type || 'ANIME',
|
||||
status: status,
|
||||
progress: progress,
|
||||
score: score
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to update entry');
|
||||
}
|
||||
|
||||
closeEditModal();
|
||||
await loadList();
|
||||
showNotification('Entry updated successfully!', 'success');
|
||||
} catch (error) {
|
||||
console.error('Error updating entry:', error);
|
||||
showNotification('Failed to update entry', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Delete entry
|
||||
async function deleteEntry() {
|
||||
if (!currentEditingEntry) return;
|
||||
|
||||
if (!confirm('Are you sure you want to remove this entry from your list?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/list/entry/${currentEditingEntry.entry_id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to delete entry');
|
||||
}
|
||||
|
||||
closeEditModal();
|
||||
await loadList();
|
||||
showNotification('Entry removed from list', 'success');
|
||||
} catch (error) {
|
||||
console.error('Error deleting entry:', error);
|
||||
showNotification('Failed to remove entry', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Show notification (unchanged)
|
||||
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);
|
||||
}
|
||||
|
||||
// Add keyframe animations (unchanged)
|
||||
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);
|
||||
|
||||
// Close modal on outside click (unchanged)
|
||||
document.getElementById('edit-modal').addEventListener('click', (e) => {
|
||||
if (e.target.id === 'edit-modal') {
|
||||
closeEditModal();
|
||||
}
|
||||
});
|
||||
@@ -588,9 +588,6 @@ async function redirectToAniListLogin() {
|
||||
|
||||
const data = await res.json();
|
||||
localStorage.setItem('token', data.token);
|
||||
token = data.token;
|
||||
|
||||
localStorage.setItem('anilist_link_user', currentUserId);
|
||||
|
||||
const clientId = 32898;
|
||||
const redirectUri = encodeURIComponent(
|
||||
|
||||
@@ -51,14 +51,14 @@ async function ensureUserDataDB(dbPath) {
|
||||
CREATE TABLE IF NOT EXISTS ListEntry (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
user_id INTEGER NOT NULL,
|
||||
anime_id INTEGER NOT NULL,
|
||||
external_id INTEGER,
|
||||
entry_id INTEGER NOT NULL,
|
||||
source TEXT NOT NULL,
|
||||
entry_type TEXT NOT NULL,
|
||||
status TEXT NOT NULL,
|
||||
progress INTEGER NOT NULL DEFAULT 0,
|
||||
score INTEGER,
|
||||
updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
UNIQUE (user_id, anime_id),
|
||||
UNIQUE (user_id, entry_id),
|
||||
FOREIGN KEY (user_id) REFERENCES User(id) ON DELETE CASCADE
|
||||
);
|
||||
`;
|
||||
|
||||
@@ -13,6 +13,11 @@ async function viewsRoutes(fastify: FastifyInstance) {
|
||||
reply.type('text/html').send(stream);
|
||||
});
|
||||
|
||||
fastify.get('/my-list', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'list.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
});
|
||||
|
||||
fastify.get('/books', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'books.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
|
||||
@@ -11,7 +11,8 @@
|
||||
<link rel="stylesheet" href="/views/css/titlebar.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar"> <div class="title-left">
|
||||
<div id="titlebar">
|
||||
<div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
@@ -22,7 +23,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Synopsis Modal -->
|
||||
<div class="modal-overlay" id="desc-modal">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" onclick="closeModal()">✕</button>
|
||||
@@ -31,13 +32,48 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add to List Modal -->
|
||||
<div class="modal-overlay" id="add-list-modal">
|
||||
<div class="modal-content modal-list">
|
||||
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
|
||||
<h2 class="modal-title" id="modal-title">Add to List</h2>
|
||||
|
||||
<a href="/" class="back-btn">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<select id="modal-status" class="form-input">
|
||||
<option value="WATCHING">Watching</option>
|
||||
<option value="COMPLETED">Completed</option>
|
||||
<option value="PLANNING">Plan to Watch</option>
|
||||
<option value="PAUSED">Paused</option>
|
||||
<option value="DROPPED">Dropped</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Episodes Watched</label>
|
||||
<input type="number" id="modal-progress" class="form-input" min="0" placeholder="0">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Your Score (0-10)</label>
|
||||
<input type="number" id="modal-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="btn-modal-secondary" onclick="closeAddToListModal()">Cancel</button>
|
||||
<button class="btn-modal-danger" id="modal-delete-btn" onclick="deleteFromList()" style="display: none;">Remove</button>
|
||||
<button class="btn-modal-primary" onclick="saveToList()">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/anime" class="back-btn">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
||||
Back to Home
|
||||
</a>
|
||||
|
||||
|
||||
<div class="hero-wrapper">
|
||||
<div class="video-background">
|
||||
<div id="player"></div>
|
||||
@@ -45,10 +81,7 @@
|
||||
<div class="hero-overlay"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content-container">
|
||||
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="poster-card">
|
||||
<img id="poster" src="" alt="">
|
||||
@@ -80,14 +113,11 @@
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Main Characters</h4>
|
||||
<div class="character-list" id="char-list">
|
||||
|
||||
</div>
|
||||
<div class="character-list" id="char-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<main class="main-content">
|
||||
<div class="anime-header">
|
||||
<h1 class="anime-title" id="title">Loading...</h1>
|
||||
@@ -104,11 +134,10 @@
|
||||
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
Start Watching
|
||||
</button>
|
||||
<button class="btn-secondary">+ Add to List</button>
|
||||
<button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to List</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="description-box">
|
||||
<div id="description-preview"></div>
|
||||
<button id="read-more-btn" class="read-more-btn" style="display: none;" onclick="openModal()">
|
||||
@@ -118,7 +147,6 @@
|
||||
</div>
|
||||
|
||||
<div class="episodes-section">
|
||||
|
||||
<div class="episodes-header-row">
|
||||
<div class="section-title" style="margin:0; border:none; padding:0;">
|
||||
<h2 style="font-size: 1.8rem; border-left: 4px solid #8b5cf6; padding-left: 1rem;">Episodes</h2>
|
||||
@@ -130,7 +158,6 @@
|
||||
|
||||
<div class="episodes-grid" id="episodes-grid"></div>
|
||||
|
||||
|
||||
<div class="pagination-controls" id="pagination-controls">
|
||||
<button class="page-btn" id="prev-page" onclick="changePage(-1)">Previous</button>
|
||||
<span class="page-info" id="page-info">Page 1 of 1</span>
|
||||
@@ -138,17 +165,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
|
||||
<a
|
||||
id="downloadButton"
|
||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
||||
target="_blank"
|
||||
>
|
||||
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
@@ -156,7 +177,6 @@
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
<script src="/src/scripts/anime/anime.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -35,7 +35,7 @@
|
||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
||||
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
||||
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
|
||||
<button class="nav-button">My List</button>
|
||||
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
||||
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -23,6 +23,42 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="add-list-modal">
|
||||
<div class="modal-content modal-list">
|
||||
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
|
||||
<h2 class="modal-title" id="modal-title">Add to Library</h2>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<select id="modal-status" class="form-input">
|
||||
<option value="WATCHING">Reading</option>
|
||||
<option value="COMPLETED">Completed</option>
|
||||
<option value="PLANNING">Plan to Read</option>
|
||||
<option value="PAUSED">Paused</option>
|
||||
<option value="DROPPED">Dropped</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label id="modal-progress-label">Chapters Read</label>
|
||||
<input type="number" id="modal-progress" class="form-input" min="0" placeholder="0">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Your Score (0-10)</label>
|
||||
<input type="number" id="modal-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="btn-modal-secondary" onclick="closeAddToListModal()">Cancel</button>
|
||||
<button class="btn-modal-danger" id="modal-delete-btn" onclick="deleteFromList()" style="display: none;">Remove</button>
|
||||
<button class="btn-modal-primary" onclick="saveToList()">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<a href="/books" class="back-btn">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
||||
@@ -81,8 +117,7 @@
|
||||
<button class="btn-primary" id="read-start-btn">
|
||||
Start Reading
|
||||
</button>
|
||||
<button class="btn-secondary">+ Add to Library</button>
|
||||
</div>
|
||||
<button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to Library</button>
|
||||
</div>
|
||||
|
||||
<div class="chapters-section">
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
<button class="nav-button active">Books</button>
|
||||
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
||||
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
|
||||
<button class="nav-button">My List</button>
|
||||
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
||||
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -9,6 +9,8 @@
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 24px;
|
||||
--radius-full: 9999px;
|
||||
--danger: #ef4444;
|
||||
--success: #22c55e;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -198,9 +200,15 @@ body {
|
||||
font-size: 1rem;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.btn-secondary:hover { background: rgba(255, 255, 255, 0.2); }
|
||||
|
||||
.description-box {
|
||||
margin-top: 3rem;
|
||||
@@ -263,6 +271,7 @@ body {
|
||||
.sidebar { display: none; }
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
@@ -274,6 +283,7 @@ body {
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
padding: 2rem;
|
||||
}
|
||||
.modal-overlay.active {
|
||||
display: flex;
|
||||
@@ -296,6 +306,11 @@ body {
|
||||
.modal-overlay.active .modal-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.modal-content.modal-list {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
@@ -318,7 +333,89 @@ body {
|
||||
font-size: 1.1rem;
|
||||
color: #e4e4e7;
|
||||
}
|
||||
.modal-title { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; }
|
||||
.modal-title { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 800; }
|
||||
|
||||
.modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
background: var(--bg-base);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: var(--text-primary);
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 10px var(--accent-glow);
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn-modal-primary, .btn-modal-secondary, .btn-modal-danger {
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, opacity 0.2s;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-modal-primary {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-modal-primary:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.btn-modal-secondary {
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.btn-modal-secondary:hover {
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.btn-modal-danger {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-modal-danger:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.read-more-btn {
|
||||
background: none;
|
||||
@@ -407,3 +504,14 @@ body {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Asegura que por defecto esté oculto si quitaste el style en línea */
|
||||
#add-list-modal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Define cómo se muestra al abrirlo */
|
||||
#add-list-modal.active {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -217,3 +217,146 @@ body {
|
||||
.chapters-table th:nth-child(3), .chapters-table td:nth-child(3) { display: none; }
|
||||
.chapters-table th:nth-child(4), .chapters-table td:nth-child(4) { display: none; }
|
||||
}
|
||||
|
||||
/* ==================================== */
|
||||
/* MODAL STYLES (Add to Library Modal) */
|
||||
/* ==================================== */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 2000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
padding: 2rem;
|
||||
}
|
||||
.modal-overlay.active {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
.modal-content {
|
||||
background: #18181b;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 24px;
|
||||
padding: 2.5rem;
|
||||
max-width: 650px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.modal-overlay.active .modal-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.modal-content.modal-list {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
color: white;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.modal-close:hover { background: rgba(255, 255, 255, 0.2); }
|
||||
.modal-title { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 800; }
|
||||
|
||||
.modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
background: var(--bg-base);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: var(--text-primary);
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 10px rgba(139, 92, 246, 0.4); /* Usar el color acento */
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn-modal-primary, .btn-modal-secondary, .btn-modal-danger {
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, opacity 0.2s;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-modal-primary {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-modal-primary:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.btn-modal-secondary {
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.btn-modal-secondary:hover {
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.btn-modal-danger {
|
||||
background: #ef4444; /* Usar el color danger */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-modal-danger:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
635
views/css/list.css
Normal file
635
views/css/list.css
Normal file
@@ -0,0 +1,635 @@
|
||||
:root {
|
||||
--bg-base: #09090b;
|
||||
--bg-surface: #121215;
|
||||
--bg-surface-hover: #1e1e22;
|
||||
--accent: #8b5cf6;
|
||||
--accent-glow: rgba(139, 92, 246, 0.4);
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a1a1aa;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 24px;
|
||||
--nav-height: 80px;
|
||||
--danger: #ef4444;
|
||||
--success: #22c55e;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background-color: var(--bg-base);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
overflow-x: hidden;
|
||||
padding-top: var(--nav-height);
|
||||
}
|
||||
|
||||
/* Navbar Styles */
|
||||
.navbar {
|
||||
width: 100%;
|
||||
height: var(--nav-height);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 3rem;
|
||||
background: rgba(9, 9, 11, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
font-weight: 900;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
letter-spacing: -0.5px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.brand-icon img {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.nav-center {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
background: rgba(255,255,255,0.03);
|
||||
padding: 0.4rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
padding: 0.6rem 1.5rem;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.nav-button:hover { color: white; }
|
||||
.nav-button.active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 0.7rem 1rem 0.7rem 2.5rem;
|
||||
border-radius: 99px;
|
||||
color: white;
|
||||
font-family: inherit;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 15px var(--accent-glow);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Container */
|
||||
.container {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
.header-section {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 900;
|
||||
margin-bottom: 2rem;
|
||||
background: linear-gradient(135deg, var(--accent), #a78bfa);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
transition: transform 0.3s, border-color 0.3s;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Filters Section */
|
||||
.filters-section {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-surface);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
background: var(--bg-base);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: var(--text-primary);
|
||||
padding: 0.7rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.filter-select:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 10px var(--accent-glow);
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
background: var(--bg-base);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: var(--text-secondary);
|
||||
padding: 0.7rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.view-btn.active {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5rem 0;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid rgba(139, 92, 246, 0.1);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5rem 0;
|
||||
gap: 1.5rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-state svg {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.empty-state h2 {
|
||||
font-size: 1.8rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* List Grid View */
|
||||
.list-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.list-grid.list-view {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s, border-color 0.3s;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
transform: translateY(-8px);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.list-grid.list-view .list-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.list-grid.list-view .list-item:hover {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
.item-poster {
|
||||
width: 100%;
|
||||
aspect-ratio: 2/3;
|
||||
object-fit: cover;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.list-grid.list-view .item-poster {
|
||||
width: 120px;
|
||||
height: 180px;
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.list-grid.list-view .item-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.list-grid.list-view .item-title {
|
||||
font-size: 1.3rem;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.8rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.meta-pill {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
color: var(--accent);
|
||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.source-pill {
|
||||
background: rgba(168, 85, 247, 0.15);
|
||||
color: #a855f7;
|
||||
border: 1px solid rgba(168, 85, 247, 0.3);
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 999px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--accent), #a78bfa);
|
||||
border-radius: 999px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.score-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-weight: 700;
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: var(--radius-lg);
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
animation: modalSlideUp 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes modalSlideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: var(--danger);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 900;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.form-input {
|
||||
background: var(--bg-base);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: var(--text-primary);
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 10px var(--accent-glow);
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary, .btn-danger {
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, opacity 0.2s;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.filters-section {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.list-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.meta-pill {
|
||||
padding: 0.3rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Estilo para la píldora de tipo (opcional, para diferenciar) */
|
||||
.type-pill {
|
||||
background: rgba(255, 165, 0, 0.2); /* Naranja suave */
|
||||
color: #ffb74d;
|
||||
border: 1px solid rgba(255, 165, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Si usas la convención de colores de tu proyecto (e.g., violeta para extensión), puedes usar eso: */
|
||||
.source-pill {
|
||||
background: rgba(139, 92, 246, 0.2);
|
||||
color: #a78bfa;
|
||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
/* Ejemplo de color para la píldora de estado si no lo tienes */
|
||||
.status-pill {
|
||||
background: rgba(34, 197, 94, 0.2); /* Verde de ejemplo */
|
||||
color: #4ade80;
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
}
|
||||
199
views/list.html
Normal file
199
views/list.html
Normal file
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<title>My Lists - WaifuBoard</title>
|
||||
<link rel="stylesheet" href="/views/css/list.css">
|
||||
<link rel="stylesheet" href="/views/css/updateNotifier.css">
|
||||
<link rel="stylesheet" href="/views/css/titlebar.css">
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar"> <div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">—</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navbar" id="navbar">
|
||||
<a href="/" class="nav-brand">
|
||||
<div class="brand-icon">
|
||||
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
||||
</div>
|
||||
WaifuBoard
|
||||
</a>
|
||||
|
||||
<div class="nav-center">
|
||||
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
|
||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
||||
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
||||
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
|
||||
<button class="nav-button active">My List</button>
|
||||
<button class="nav-button" onclick="window.location.href='/schedule'">Marketplace</button>
|
||||
</div>
|
||||
|
||||
<div class="search-wrapper" style="visibility: hidden;">
|
||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
|
||||
<input type="text" class="search-input" id="search-input" placeholder="Search extensions..." autocomplete="off">
|
||||
<div class="search-results" id="search-results"></div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
<h1 class="page-title">My Anime List</h1>
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<span class="stat-value" id="total-count">0</span>
|
||||
<span class="stat-label">Total Entries</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value" id="watching-count">0</span>
|
||||
<span class="stat-label">Watching</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value" id="completed-count">0</span>
|
||||
<span class="stat-label">Completed</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value" id="planned-count">0</span>
|
||||
<span class="stat-label">Plan to Watch</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filters-section">
|
||||
<div class="filter-group">
|
||||
<label>Status</label>
|
||||
<select id="status-filter" class="filter-select">
|
||||
<option value="all">All Status</option>
|
||||
<option value="WATCHING">Watching</option>
|
||||
<option value="COMPLETED">Completed</option>
|
||||
<option value="PLANNING">Plan to Watch</option>
|
||||
<option value="PAUSED">Paused</option>
|
||||
<option value="DROPPED">Dropped</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label>Source</label>
|
||||
<select id="source-filter" class="filter-select">
|
||||
<option value="all">All Sources</option>
|
||||
<option value="anilist">AniList</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label>Type</label>
|
||||
<select id="type-filter" class="filter-select">
|
||||
<option value="all">All Types</option>
|
||||
<option value="ANIME">Anime</option>
|
||||
<option value="MANGA">Manga</option>
|
||||
<option value="NOVEL">Novel</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label>Sort By</label>
|
||||
<select id="sort-filter" class="filter-select">
|
||||
<option value="updated">Last Updated</option>
|
||||
<option value="title">Title (A-Z)</option>
|
||||
<option value="score">Score (High-Low)</option>
|
||||
<option value="progress">Progress</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label>View</label>
|
||||
<div class="view-toggle">
|
||||
<button class="view-btn active" data-view="grid">
|
||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
||||
<rect x="3" y="3" width="7" height="7" rx="1"/>
|
||||
<rect x="14" y="3" width="7" height="7" rx="1"/>
|
||||
<rect x="3" y="14" width="7" height="7" rx="1"/>
|
||||
<rect x="14" y="14" width="7" height="7" rx="1"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="view-btn" data-view="list">
|
||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
||||
<rect x="3" y="5" width="18" height="2" rx="1"/>
|
||||
<rect x="3" y="11" width="18" height="2" rx="1"/>
|
||||
<rect x="3" y="17" width="18" height="2" rx="1"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="loading-state" class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>Loading your list...</p>
|
||||
</div>
|
||||
|
||||
<div id="empty-state" class="empty-state" style="display: none;">
|
||||
<svg width="120" height="120" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
||||
</svg>
|
||||
<h2>Your list is empty</h2>
|
||||
<p>Start adding anime to track your progress</p>
|
||||
<button class="btn-primary" onclick="window.location.href='/'">Browse Anime</button>
|
||||
</div>
|
||||
|
||||
<div id="list-container" class="list-grid"></div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="edit-modal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" onclick="closeEditModal()">✕</button>
|
||||
<h2 class="modal-title">Edit Entry</h2>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<select id="edit-status" class="form-input">
|
||||
<option value="WATCHING">Watching</option>
|
||||
<option value="COMPLETED">Completed</option>
|
||||
<option value="PLANNING">Plan to Watch</option>
|
||||
<option value="PAUSED">Paused</option>
|
||||
<option value="DROPPED">Dropped</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-progress">Progress</label>
|
||||
<input type="number" id="edit-progress" class="form-input" min="0">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Score (0-10)</label>
|
||||
<input type="number" id="edit-score" class="form-input" min="0" max="10" step="0.1">
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="btn-secondary" onclick="closeEditModal()">Cancel</button>
|
||||
<button class="btn-danger" onclick="deleteEntry()">Delete</button>
|
||||
<button class="btn-primary" onclick="saveEntry()">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
<script src="/src/scripts/list.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -36,7 +36,7 @@
|
||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
||||
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
||||
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
|
||||
<button class="nav-button">My List</button>
|
||||
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
||||
<button class="nav-button active">Marketplace</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
||||
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
||||
<button class="nav-button active">Schedule</button>
|
||||
<button class="nav-button">My List</button>
|
||||
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
||||
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user