Lukas
f73cc530c3
- Update Font Awesome from 6.0.0 to 6.6.0 - Replace suggestion links with buttons for better click handling - Add debug logging for troubleshooting suggestion clicks - Use 'link' field as primary provider key source
984 lines
36 KiB
HTML
984 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AniWorld Manager - Resolve Series</title>
|
|
<link rel="stylesheet" href="/static/css/styles.css?v={{ static_version('css/styles.css') }}">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
.unresolved-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.unresolved-card {
|
|
background: var(--color-surface);
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
width: 100%;
|
|
max-width: 700px;
|
|
border: 1px solid var(--color-border);
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.unresolved-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.unresolved-header .icon {
|
|
font-size: 3rem;
|
|
color: var(--color-warning);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.unresolved-header h1 {
|
|
margin: 0;
|
|
color: var(--color-text);
|
|
font-size: 1.8rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.unresolved-header p {
|
|
margin: 1rem 0 0 0;
|
|
color: var(--color-text-secondary);
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.folder-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.folder-item {
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--border-radius-lg);
|
|
padding: 1.25rem;
|
|
transition: all var(--transition-duration) var(--transition-easing);
|
|
}
|
|
|
|
.folder-item.resolving {
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.folder-item.resolved {
|
|
animation: fadeSlideOut 0.4s ease forwards;
|
|
}
|
|
|
|
@keyframes fadeSlideOut {
|
|
0% { opacity: 1; transform: translateY(0); max-height: 500px; }
|
|
100% { opacity: 0; transform: translateY(-10px); max-height: 0; padding: 0; margin: 0; border: 0; }
|
|
}
|
|
|
|
.folder-item-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.folder-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.folder-year {
|
|
color: var(--color-text-secondary);
|
|
font-weight: normal;
|
|
}
|
|
|
|
.folder-attempts {
|
|
font-size: 0.8rem;
|
|
color: var(--color-text-tertiary);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.folder-delete-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--color-text-tertiary);
|
|
cursor: pointer;
|
|
padding: 0.25rem;
|
|
border-radius: var(--border-radius-sm);
|
|
transition: color var(--transition-duration);
|
|
}
|
|
|
|
.folder-delete-btn:hover {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.folder-input-row {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.folder-input {
|
|
flex: 1;
|
|
padding: 0.75rem 1rem;
|
|
border: 2px solid var(--color-border);
|
|
border-radius: var(--border-radius-md);
|
|
font-size: 0.95rem;
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
transition: border-color var(--transition-duration);
|
|
}
|
|
|
|
.folder-input:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.folder-input::placeholder {
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
.resolve-btn {
|
|
padding: 0.75rem 1.5rem;
|
|
background: var(--color-accent);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--border-radius-md);
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all var(--transition-duration);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.resolve-btn:hover:not(:disabled) {
|
|
background: var(--color-accent-hover);
|
|
}
|
|
|
|
.resolve-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.folder-suggestions {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.suggestions-label {
|
|
font-size: 0.85rem;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.suggestion-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.suggestion-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.9rem;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.suggestion-item i {
|
|
color: var(--color-accent);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.suggestion-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--color-accent);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
text-align: left;
|
|
}
|
|
|
|
.suggestion-btn:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.suggestion-btn .key-label {
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.8rem;
|
|
margin-left: 0.3rem;
|
|
}
|
|
|
|
.no-suggestions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.85rem;
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
.search-again-btn {
|
|
background: none;
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-text-secondary);
|
|
padding: 0.4rem 0.8rem;
|
|
border-radius: var(--border-radius-md);
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
transition: all var(--transition-duration);
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.search-again-btn:hover {
|
|
background: var(--color-surface-hover);
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.search-again-btn.searching {
|
|
pointer-events: none;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.search-again-row {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-top: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-again-input {
|
|
flex: 1;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--border-radius-md);
|
|
font-size: 0.85rem;
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.search-again-input:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.search-again-row .search-again-btn {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.search-again-btn.searching {
|
|
pointer-events: none;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.search-again-row {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-top: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-again-input {
|
|
flex: 1;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--border-radius-md);
|
|
font-size: 0.85rem;
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.search-again-input:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.search-again-row .search-again-btn {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Empty state */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 3rem 2rem;
|
|
}
|
|
|
|
.empty-state .icon {
|
|
font-size: 4rem;
|
|
color: var(--color-success);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.empty-state h2 {
|
|
color: var(--color-success);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.empty-state p {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Loading state */
|
|
.loading-state {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.spinner {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border: 3px solid var(--color-border);
|
|
border-top-color: var(--color-accent);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto 1rem;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Error state */
|
|
.folder-error {
|
|
color: var(--color-error);
|
|
font-size: 0.85rem;
|
|
margin-top: 0.5rem;
|
|
display: none;
|
|
}
|
|
|
|
.folder-error.visible {
|
|
display: block;
|
|
}
|
|
|
|
/* Toast container */
|
|
.toast-container {
|
|
position: fixed;
|
|
top: var(--spacing-xl);
|
|
right: var(--spacing-xl);
|
|
z-index: 1100;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.toast {
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--border-radius-lg);
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
box-shadow: var(--shadow-elevated);
|
|
min-width: 280px;
|
|
animation: slideIn 0.2s ease;
|
|
}
|
|
|
|
.toast.success { border-left: 4px solid var(--color-success); }
|
|
.toast.error { border-left: 4px solid var(--color-error); }
|
|
.toast.warning { border-left: 4px solid var(--color-warning); }
|
|
|
|
@keyframes slideIn {
|
|
from { transform: translateX(100%); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
|
|
.theme-toggle {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
padding: 0.5rem;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.skip-link {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 1.5rem;
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.9rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.skip-link:hover {
|
|
color: var(--color-text-primary);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.done-btn {
|
|
background: var(--color-success);
|
|
color: white;
|
|
border: none;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: var(--border-radius-md);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all var(--transition-duration);
|
|
display: none;
|
|
}
|
|
|
|
.done-btn:hover:not(:disabled) {
|
|
background: #27ae60;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.done-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.folder-input-row {
|
|
flex-direction: column;
|
|
}
|
|
.resolve-btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="unresolved-container">
|
|
<button class="theme-toggle" id="theme-toggle" title="Toggle theme">
|
|
<i class="fas fa-moon"></i>
|
|
</button>
|
|
|
|
<div class="unresolved-card">
|
|
<div class="unresolved-header">
|
|
<div class="icon">
|
|
<i class="fas fa-folder-question"></i>
|
|
</div>
|
|
<h1>Resolve Unresolved Series</h1>
|
|
<p>Some series couldn't be found automatically. Enter the provider key for each folder to complete setup.</p>
|
|
<div class="header-actions">
|
|
<button class="done-btn" id="done-btn" onclick="handleDone()">
|
|
<i class="fas fa-check"></i> Done
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="loading-state" class="loading-state">
|
|
<div class="spinner"></div>
|
|
<p>Loading unresolved folders...</p>
|
|
</div>
|
|
|
|
<div id="empty-state" class="empty-state" style="display: none;">
|
|
<div class="icon">
|
|
<i class="fas fa-check-circle"></i>
|
|
</div>
|
|
<h2>All Series Configured!</h2>
|
|
<p>Redirecting to your anime library...</p>
|
|
</div>
|
|
|
|
<div id="folder-list" class="folder-list" style="display: none;"></div>
|
|
|
|
<a href="/" id="skip-link" class="skip-link" style="display: none;">
|
|
Skip and go to main app
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast-container" class="toast-container"></div>
|
|
|
|
<script>
|
|
// Theme toggle
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const htmlElement = document.documentElement;
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
htmlElement.setAttribute('data-theme', savedTheme);
|
|
updateThemeIcon(savedTheme);
|
|
|
|
themeToggle.addEventListener('click', () => {
|
|
const currentTheme = htmlElement.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
htmlElement.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
updateThemeIcon(newTheme);
|
|
});
|
|
|
|
function updateThemeIcon(theme) {
|
|
const icon = themeToggle.querySelector('i');
|
|
icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
|
|
}
|
|
|
|
// Toast notification
|
|
function showToast(message, type = 'info') {
|
|
const container = document.getElementById('toast-container');
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast ${type}`;
|
|
toast.textContent = message;
|
|
container.appendChild(toast);
|
|
setTimeout(() => {
|
|
toast.style.animation = 'slideIn 0.2s ease reverse';
|
|
setTimeout(() => toast.remove(), 200);
|
|
}, 3000);
|
|
}
|
|
|
|
// API client helpers
|
|
async function fetchUnresolved() {
|
|
// Note: /api/setup/unresolved does not require auth
|
|
// It's accessible during the initial setup flow
|
|
const token = localStorage.getItem('auth_token');
|
|
const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
|
|
const res = await fetch('/api/setup/unresolved', { headers });
|
|
if (res.status === 401) {
|
|
// Redirect to login only if we had a token but it expired
|
|
localStorage.removeItem('auth_token');
|
|
window.location.href = '/login';
|
|
return null;
|
|
}
|
|
return res.json();
|
|
}
|
|
|
|
async function resolveFolder(folderName, providerKey) {
|
|
const token = localStorage.getItem('auth_token');
|
|
const encodedName = encodeURIComponent(folderName);
|
|
const res = await fetch(`/api/setup/unresolved/${encodedName}/resolve`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ provider_key: providerKey })
|
|
});
|
|
return res.json();
|
|
}
|
|
|
|
async function reSearchFolder(folderName, customQuery) {
|
|
const token = localStorage.getItem('auth_token');
|
|
const encodedName = encodeURIComponent(folderName);
|
|
const body = customQuery ? JSON.stringify({ query: customQuery }) : '{}';
|
|
const res = await fetch(`/api/setup/unresolved/${encodedName}/search`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: body
|
|
});
|
|
return res.json();
|
|
}
|
|
|
|
async function deleteFolder(folderName) {
|
|
const token = localStorage.getItem('auth_token');
|
|
const encodedName = encodeURIComponent(folderName);
|
|
const res = await fetch(`/api/setup/unresolved/${encodedName}`, {
|
|
method: 'DELETE',
|
|
headers: { 'Authorization': `Bearer ${token}` }
|
|
});
|
|
return res.json();
|
|
}
|
|
|
|
// Render functions
|
|
function renderFolderItem(folder) {
|
|
const suggestionsHtml = folder.search_suggestions && folder.search_suggestions.length > 0
|
|
? folder.search_suggestions.map(s => {
|
|
console.log('[DEBUG] Rendering suggestion:', s);
|
|
return `
|
|
<div class="suggestion-item">
|
|
<i class="fas fa-hand-pointer"></i>
|
|
<button class="suggestion-btn" data-provider-key="${s.link || s.provider_key || s.key || ''}" data-folder="${folder.folder_name}">
|
|
${s.name || s.title} <span class="key-label">(${s.link || ''})</span>
|
|
</button>
|
|
</div>
|
|
`;
|
|
}).join('')
|
|
: '<div class="no-suggestions"><i class="fas fa-info-circle"></i> No suggestions found</div>';
|
|
|
|
// Always show search row so user can search multiple times
|
|
const searchAgainBtn = `<div class="search-again-row">
|
|
<input type="text" class="search-again-input"
|
|
placeholder="Custom search..."
|
|
value="${folder.title || ''}"
|
|
data-folder="${folder.folder_name}">
|
|
<button class="search-again-btn" data-folder="${folder.folder_name}">
|
|
<i class="fas fa-search"></i> Search Again
|
|
</button>
|
|
</div>`;
|
|
|
|
return `
|
|
<div class="folder-item" data-folder="${folder.folder_name}">
|
|
<div class="folder-item-header">
|
|
<div>
|
|
<div class="folder-title">${folder.title}${folder.year ? ` <span class="folder-year">(${folder.year})</span>` : ''}</div>
|
|
<div class="folder-attempts">${folder.search_attempts} search attempt${folder.search_attempts !== 1 ? 's' : ''}</div>
|
|
</div>
|
|
<button class="folder-delete-btn" data-folder="${folder.folder_name}" title="Remove without adding">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="folder-input-row">
|
|
<input type="text" class="folder-input"
|
|
placeholder="Enter provider key (e.g., ooku-the-inner-chambers)"
|
|
data-folder="${folder.folder_name}">
|
|
<button class="resolve-btn" data-folder="${folder.folder_name}" disabled>
|
|
Resolve
|
|
</button>
|
|
</div>
|
|
<div class="folder-error" data-folder="${folder.folder_name}"></div>
|
|
<div class="folder-suggestions">
|
|
<div class="suggestions-label">Suggestions:</div>
|
|
<div class="suggestion-list">
|
|
${suggestionsHtml}
|
|
</div>
|
|
${searchAgainBtn}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderFolders(folders) {
|
|
const listEl = document.getElementById('folder-list');
|
|
const loadingEl = document.getElementById('loading-state');
|
|
const emptyEl = document.getElementById('empty-state');
|
|
|
|
loadingEl.style.display = 'none';
|
|
|
|
if (folders.length === 0) {
|
|
listEl.style.display = 'none';
|
|
emptyEl.style.display = 'block';
|
|
document.getElementById('skip-link').style.display = 'block';
|
|
// No unresolved folders - redirect to NFO scan phase
|
|
setTimeout(() => {
|
|
sessionStorage.setItem('setup_phase', 'nfo');
|
|
window.location.href = '/loading?phase=nfo';
|
|
}, 2000);
|
|
} else {
|
|
listEl.style.display = 'flex';
|
|
emptyEl.style.display = 'none';
|
|
listEl.innerHTML = folders.map(renderFolderItem).join('');
|
|
attachFolderEvents();
|
|
}
|
|
}
|
|
|
|
function attachSuggestionLinkEvents() {
|
|
document.querySelectorAll('.suggestion-btn').forEach(link => {
|
|
link.addEventListener('click', async (e) => {
|
|
e.preventDefault();
|
|
// Use 'link' from closure, not e.target, to handle clicks on child elements
|
|
const providerKey = link.dataset.providerKey;
|
|
const folder = link.dataset.folder;
|
|
|
|
console.log('[DEBUG] Suggestion clicked:', { providerKey, folder, link });
|
|
console.log('[DEBUG] Full dataset:', link.dataset);
|
|
console.log('[DEBUG] Suggestion object keys:', link.dataset);
|
|
|
|
if (!providerKey) {
|
|
showToast('No provider key available for this suggestion', 'error');
|
|
return;
|
|
}
|
|
|
|
const input = document.querySelector(`.folder-input[data-folder="${folder}"]`);
|
|
const resolveBtn = document.querySelector(`.resolve-btn[data-folder="${folder}"]`);
|
|
const item = document.querySelector(`.folder-item[data-folder="${folder}"]`);
|
|
const errEl = document.querySelector(`.folder-error[data-folder="${folder}"]`);
|
|
|
|
if (!input || !resolveBtn || !item) return;
|
|
|
|
input.value = providerKey;
|
|
resolveBtn.disabled = false;
|
|
|
|
item.classList.add('resolving');
|
|
resolveBtn.disabled = true;
|
|
resolveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
|
|
|
try {
|
|
const result = await resolveFolder(folder, providerKey);
|
|
|
|
if (result.status === 'success') {
|
|
showToast(`Added: ${result.message.replace('Successfully resolved and added series: ', '')}`, 'success');
|
|
item.classList.add('resolved');
|
|
setTimeout(() => {
|
|
item.remove();
|
|
checkEmptyList();
|
|
}, 400);
|
|
} else {
|
|
errEl.textContent = result.detail || result.message || 'Failed to resolve';
|
|
errEl.classList.add('visible');
|
|
resolveBtn.disabled = false;
|
|
resolveBtn.innerHTML = 'Resolve';
|
|
}
|
|
} catch (err) {
|
|
errEl.textContent = 'Server error. Please try again.';
|
|
errEl.classList.add('visible');
|
|
resolveBtn.disabled = false;
|
|
resolveBtn.innerHTML = 'Resolve';
|
|
} finally {
|
|
item.classList.remove('resolving');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function attachFolderEvents() {
|
|
// Input enable/disable resolve button
|
|
document.querySelectorAll('.folder-input').forEach(input => {
|
|
input.addEventListener('input', (e) => {
|
|
const folder = e.target.dataset.folder;
|
|
const btn = document.querySelector(`.resolve-btn[data-folder="${folder}"]`);
|
|
btn.disabled = !e.target.value.trim();
|
|
// Clear error
|
|
const errEl = document.querySelector(`.folder-error[data-folder="${folder}"]`);
|
|
errEl.classList.remove('visible');
|
|
errEl.textContent = '';
|
|
});
|
|
|
|
// Enter key triggers resolve
|
|
input.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') {
|
|
const folder = e.target.dataset.folder;
|
|
const btn = document.querySelector(`.resolve-btn[data-folder="${folder}"]`);
|
|
if (!btn.disabled) btn.click();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Resolve button
|
|
document.querySelectorAll('.resolve-btn').forEach(btn => {
|
|
btn.addEventListener('click', async (e) => {
|
|
const folder = e.target.dataset.folder;
|
|
const input = document.querySelector(`.folder-input[data-folder="${folder}"]`);
|
|
const item = document.querySelector(`.folder-item[data-folder="${folder}"]`);
|
|
const errEl = document.querySelector(`.folder-error[data-folder="${folder}"]`);
|
|
|
|
const providerKey = input.value.trim();
|
|
if (!providerKey) return;
|
|
|
|
item.classList.add('resolving');
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
|
|
|
try {
|
|
const result = await resolveFolder(folder, providerKey);
|
|
|
|
if (result.status === 'success') {
|
|
showToast(`Added: ${result.message.replace('Successfully resolved and added series: ', '')}`, 'success');
|
|
item.classList.add('resolved');
|
|
setTimeout(() => {
|
|
item.remove();
|
|
checkEmptyList();
|
|
}, 400);
|
|
} else {
|
|
errEl.textContent = result.detail || result.message || 'Failed to resolve';
|
|
errEl.classList.add('visible');
|
|
btn.disabled = false;
|
|
btn.innerHTML = 'Resolve';
|
|
}
|
|
} catch (err) {
|
|
errEl.textContent = 'Server error. Please try again.';
|
|
errEl.classList.add('visible');
|
|
btn.disabled = false;
|
|
btn.innerHTML = 'Resolve';
|
|
} finally {
|
|
item.classList.remove('resolving');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Delete button
|
|
document.querySelectorAll('.folder-delete-btn').forEach(btn => {
|
|
btn.addEventListener('click', async (e) => {
|
|
const folder = e.currentTarget.dataset.folder;
|
|
const item = document.querySelector(`.folder-item[data-folder="${folder}"]`);
|
|
|
|
if (!confirm('Remove this unresolved folder? You can add the series manually later.')) return;
|
|
|
|
try {
|
|
await deleteFolder(folder);
|
|
item.classList.add('resolved');
|
|
setTimeout(() => {
|
|
item.remove();
|
|
checkEmptyList();
|
|
}, 400);
|
|
} catch (err) {
|
|
showToast('Failed to remove folder', 'error');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Search again button
|
|
document.querySelectorAll('.search-again-btn').forEach(btn => {
|
|
btn.addEventListener('click', async (e) => {
|
|
const folder = e.target.dataset.folder || e.target.closest('button').dataset.folder;
|
|
const item = document.querySelector(`.folder-item[data-folder="${folder}"]`);
|
|
const searchInput = item.querySelector('.search-again-input');
|
|
const customQuery = searchInput ? searchInput.value.trim() : null;
|
|
|
|
btn.classList.add('searching');
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Searching...';
|
|
|
|
try {
|
|
const result = await reSearchFolder(folder, customQuery);
|
|
// Update suggestions in place
|
|
const suggestionsEl = item.querySelector('.suggestion-list');
|
|
if (result.search_suggestions && result.search_suggestions.length > 0) {
|
|
suggestionsEl.innerHTML = result.search_suggestions.map(s => `
|
|
<div class="suggestion-item">
|
|
<i class="fas fa-hand-pointer"></i>
|
|
<button class="suggestion-btn" data-provider-key="${s.link || s.provider_key || s.key || ''}" data-folder="${folder}">
|
|
${s.name || s.title} <span class="key-label">(${s.link || ''})</span>
|
|
</button>
|
|
</div>
|
|
`).join('');
|
|
} else {
|
|
suggestionsEl.innerHTML = '<div class="no-suggestions"><i class="fas fa-info-circle"></i> No suggestions found</div>';
|
|
}
|
|
// Keep search row visible for additional searches
|
|
btn.classList.remove('searching');
|
|
btn.innerHTML = '<i class="fas fa-search"></i> Search Again';
|
|
attachSuggestionLinkEvents();
|
|
} catch (err) {
|
|
showToast('Search failed', 'error');
|
|
btn.classList.remove('searching');
|
|
btn.innerHTML = '<i class="fas fa-search"></i> Search Again';
|
|
} finally {
|
|
btn.classList.remove('searching');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Suggestion link click - populate input and resolve
|
|
attachSuggestionLinkEvents();
|
|
}
|
|
|
|
function checkEmptyList() {
|
|
const listEl = document.getElementById('folder-list');
|
|
const emptyEl = document.getElementById('empty-state');
|
|
const skipLink = document.getElementById('skip-link');
|
|
const doneBtn = document.getElementById('done-btn');
|
|
|
|
if (listEl.children.length === 0) {
|
|
listEl.style.display = 'none';
|
|
emptyEl.style.display = 'block';
|
|
skipLink.style.display = 'block';
|
|
showToast('All series configured!', 'success');
|
|
// All folders resolved - redirect to NFO scan phase
|
|
setTimeout(() => {
|
|
sessionStorage.setItem('setup_phase', 'nfo');
|
|
window.location.href = '/loading?phase=nfo';
|
|
}, 2000);
|
|
}
|
|
}
|
|
|
|
async function completeUnresolved() {
|
|
const token = localStorage.getItem('auth_token');
|
|
const res = await fetch('/api/setup/unresolved/done', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
return res.json();
|
|
}
|
|
|
|
async function handleDone() {
|
|
const doneBtn = document.getElementById('done-btn');
|
|
doneBtn.disabled = true;
|
|
doneBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
|
|
|
|
try {
|
|
const result = await completeUnresolved();
|
|
if (result.status === 'success') {
|
|
showToast(result.message, 'success');
|
|
// Clear unresolved state and set NFO phase before redirecting
|
|
clearSetupPhase();
|
|
setTimeout(() => {
|
|
sessionStorage.setItem('setup_phase', 'nfo');
|
|
window.location.href = '/loading?phase=nfo';
|
|
}, 1000);
|
|
} else {
|
|
showToast(result.message || 'Failed to complete', 'error');
|
|
doneBtn.disabled = false;
|
|
doneBtn.innerHTML = '<i class="fas fa-check"></i> Done';
|
|
}
|
|
} catch (err) {
|
|
showToast('Server error. Please try again.', 'error');
|
|
doneBtn.disabled = false;
|
|
doneBtn.innerHTML = '<i class="fas fa-check"></i> Done';
|
|
}
|
|
}
|
|
|
|
// Show Done button when there are folders
|
|
function showDoneButton() {
|
|
const doneBtn = document.getElementById('done-btn');
|
|
doneBtn.style.display = 'inline-flex';
|
|
}
|
|
|
|
// State management for setup flow
|
|
function setSetupPhase(phase) {
|
|
sessionStorage.setItem('setup_phase', phase);
|
|
}
|
|
|
|
function clearSetupPhase() {
|
|
sessionStorage.removeItem('setup_phase');
|
|
}
|
|
|
|
function validateStateAndRedirect() {
|
|
const storedPhase = sessionStorage.getItem('setup_phase');
|
|
// If we have a stored phase that isn't 'unresolved', redirect appropriately
|
|
if (storedPhase && storedPhase !== 'unresolved') {
|
|
if (storedPhase === 'initial') {
|
|
window.location.href = '/loading?phase=initial';
|
|
return false;
|
|
} else if (storedPhase === 'nfo') {
|
|
window.location.href = '/loading?phase=nfo';
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
// Init
|
|
(async function init() {
|
|
// Validate state and redirect if there's a mismatch
|
|
if (!validateStateAndRedirect()) {
|
|
return; // Redirect in progress
|
|
}
|
|
|
|
// Set the unresolved phase state
|
|
setSetupPhase('unresolved');
|
|
|
|
const folders = await fetchUnresolved();
|
|
if (folders !== null) {
|
|
renderFolders(folders);
|
|
if (folders.length > 0) {
|
|
showDoneButton();
|
|
}
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |