127 lines
4.0 KiB
JavaScript
127 lines
4.0 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
const downloadForm = document.getElementById("downloadForm");
|
|
const urlInput = document.getElementById("urlInput");
|
|
const syncLikesBtn = document.getElementById("syncLikesBtn");
|
|
const tasksList = document.getElementById("tasksList");
|
|
const historyBody = document.getElementById("historyBody");
|
|
const tracksCount = document.getElementById("tracksCount");
|
|
|
|
// Load history and active tasks
|
|
fetchHistory();
|
|
fetchTasks();
|
|
setInterval(fetchTasks, 2000);
|
|
setInterval(fetchHistory, 10000);
|
|
|
|
// Form submit
|
|
downloadForm.addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
const url = urlInput.value.trim();
|
|
if (!url) return;
|
|
|
|
try {
|
|
const res = await fetch("api/download", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ url })
|
|
});
|
|
const data = await res.json();
|
|
if (data.task_id) {
|
|
urlInput.value = "";
|
|
fetchTasks();
|
|
} else {
|
|
alert(data.error || "Ошибка запуска загрузки");
|
|
}
|
|
} catch (err) {
|
|
alert("Ошибка сети: " + err);
|
|
}
|
|
});
|
|
|
|
// Sync likes button
|
|
syncLikesBtn.addEventListener("click", async () => {
|
|
if (!confirm("Запустить синхронизацию плейлиста «Мне нравится» из Яндекс Музыки?")) return;
|
|
try {
|
|
const res = await fetch("api/sync/yandex-likes", { method: "POST" });
|
|
const data = await res.json();
|
|
if (data.task_id) {
|
|
fetchTasks();
|
|
}
|
|
} catch (err) {
|
|
alert("Ошибка запуска синхронизации: " + err);
|
|
}
|
|
});
|
|
|
|
async function fetchTasks() {
|
|
try {
|
|
const res = await fetch("api/tasks");
|
|
const tasks = await res.json();
|
|
renderTasks(tasks);
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
function renderTasks(tasks) {
|
|
if (!tasks || tasks.length === 0) {
|
|
tasksList.innerHTML = `<p class="empty-state">Нет активных загрузок</p>`;
|
|
return;
|
|
}
|
|
|
|
tasksList.innerHTML = tasks.map(t => {
|
|
const percent = t.total > 0 ? Math.round((t.progress / t.total) * 100) : 0;
|
|
return `
|
|
<div class="task-item">
|
|
<div class="task-header">
|
|
<strong>${escapeHtml(t.target)}</strong>
|
|
<span class="badge ${t.status === 'completed' ? 'badge-success' : 'badge-info'}">${t.status}</span>
|
|
</div>
|
|
<div class="task-progress-bar">
|
|
<div class="task-progress-fill" style="width: ${percent}%;"></div>
|
|
</div>
|
|
<div class="task-current">
|
|
${t.progress}/${t.total} (${percent}%) • ${escapeHtml(t.current_item || '')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join("");
|
|
}
|
|
|
|
async function fetchHistory() {
|
|
try {
|
|
const res = await fetch("api/history");
|
|
const data = await res.json();
|
|
if (tracksCount) tracksCount.textContent = `Загружено: ${data.total || 0}`;
|
|
renderHistory(data.tracks || []);
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
function renderHistory(tracks) {
|
|
if (!tracks || tracks.length === 0) {
|
|
historyBody.innerHTML = `<tr><td colspan="5" class="empty-state">Пока нет загрузок</td></tr>`;
|
|
return;
|
|
}
|
|
|
|
historyBody.innerHTML = tracks.map(t => `
|
|
<tr>
|
|
<td><span class="tag-badge tag-${t.service}">${t.service}</span></td>
|
|
<td><strong>${escapeHtml(t.artist)}</strong></td>
|
|
<td>${escapeHtml(t.title)}</td>
|
|
<td>${escapeHtml(t.album || 'Singles')}</td>
|
|
<td style="color: var(--text-secondary);">${formatDate(t.downloaded_at)}</td>
|
|
</tr>
|
|
`).join("");
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
if (!str) return "";
|
|
return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
|
}
|
|
|
|
function formatDate(isoStr) {
|
|
if (!isoStr) return "";
|
|
const d = new Date(isoStr);
|
|
return d.toLocaleDateString() + " " + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
}
|
|
});
|