Add jukebox_maker web app v1.0
Go web application for filling USB drives with media files. Runs in Docker on Unraid with /media, /mnt/usb, /config volumes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 4.6
@@ -0,0 +1,6 @@
|
||||
package web
|
||||
|
||||
import "embed"
|
||||
|
||||
//go:embed static templates
|
||||
var FS embed.FS
|
||||
@@ -0,0 +1,329 @@
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #f9fafb;
|
||||
--border: rgba(34, 36, 38, 0.15);
|
||||
--border-lite: rgba(34, 36, 38, 0.1);
|
||||
--ink: rgba(0, 0, 0, 0.87);
|
||||
--muted: rgba(0, 0, 0, 0.6);
|
||||
--accent: #2185d0;
|
||||
--accent-dark: #1678c2;
|
||||
--accent-bg: #dff0ff;
|
||||
--ok: #16ab39;
|
||||
--warn: #f2711c;
|
||||
--crit: #db2828;
|
||||
--header-bg: #1b1c1d;
|
||||
--radius: 4px;
|
||||
--shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
|
||||
--content-width: 960px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font: 14px/1.5 Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
/* Header */
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
padding: 14px 24px;
|
||||
background: var(--header-bg);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-nav { display: flex; gap: 4px; }
|
||||
|
||||
.header-action {
|
||||
display: inline-block;
|
||||
padding: 6px 14px;
|
||||
border-radius: var(--radius);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.header-action:hover { background: rgba(255, 255, 255, 0.15); text-decoration: none; color: #fff; }
|
||||
.header-action.active { background: rgba(255, 255, 255, 0.18); color: #fff; }
|
||||
|
||||
/* Main */
|
||||
.page-main {
|
||||
width: min(var(--content-width), calc(100vw - 48px));
|
||||
margin: 28px auto 56px;
|
||||
}
|
||||
|
||||
/* Panel */
|
||||
.panel {
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.panel > h2 {
|
||||
margin: 0;
|
||||
padding: 11px 16px;
|
||||
background: var(--surface-2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* KV table */
|
||||
.kv-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.kv-table th,
|
||||
.kv-table td {
|
||||
padding: 10px 16px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid var(--border-lite);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.kv-table th {
|
||||
width: 200px;
|
||||
background: var(--surface-2);
|
||||
border-top: 0;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.kv-table tr:first-child td { border-top: 0; }
|
||||
|
||||
/* Progress */
|
||||
.progress-bar-bg {
|
||||
background: rgba(34, 36, 38, 0.12);
|
||||
border-radius: var(--radius);
|
||||
height: 10px;
|
||||
overflow: hidden;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.progress-bar-fill {
|
||||
background: var(--accent);
|
||||
height: 100%;
|
||||
border-radius: var(--radius);
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
.progress-label { font-size: 13px; color: var(--muted); margin-top: 6px; }
|
||||
|
||||
/* Buttons */
|
||||
.button-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 18px;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.button-primary:hover:not(:disabled) { background: var(--accent-dark); }
|
||||
.button-primary:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
|
||||
.button-danger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 18px;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
background: var(--crit);
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.button-danger:hover { background: #c82020; }
|
||||
|
||||
.button-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 18px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.button-secondary:hover { background: var(--surface-2); }
|
||||
|
||||
.button-sm { padding: 5px 12px; font-size: 12px; }
|
||||
|
||||
.btn-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 14px 16px;
|
||||
border-top: 1px solid var(--border-lite);
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form-body { padding: 16px; display: flex; flex-direction: column; gap: 18px; }
|
||||
|
||||
.form-group { display: flex; flex-direction: column; gap: 5px; }
|
||||
|
||||
.form-label {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.form-hint { font-size: 12px; color: var(--muted); }
|
||||
|
||||
.form-input {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--ink);
|
||||
padding: 7px 10px;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
|
||||
.form-input[type="number"] { width: 120px; }
|
||||
|
||||
.form-select {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--ink);
|
||||
padding: 7px 28px 7px 10px;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
|
||||
|
||||
/* Checkbox list */
|
||||
.source-list { display: flex; flex-direction: column; gap: 0; }
|
||||
.source-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px 16px;
|
||||
border-bottom: 1px solid var(--border-lite);
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.source-item:last-child { border-bottom: 0; }
|
||||
.source-item:hover { background: rgba(33, 133, 208, 0.04); }
|
||||
.source-item input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
|
||||
.source-item-name { font-size: 13px; font-weight: 600; flex: 1; }
|
||||
.source-item-path { font-size: 12px; color: var(--muted); font-family: monospace; }
|
||||
|
||||
/* Status badges */
|
||||
.status-ok { color: var(--ok); font-weight: 600; }
|
||||
.status-warning { color: var(--warn); font-weight: 600; }
|
||||
.status-critical { color: var(--crit); font-weight: 600; }
|
||||
.status-unknown { color: var(--muted); }
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
border: 1px solid;
|
||||
}
|
||||
.badge-ok { color: var(--ok); background: rgba(22,171,57,0.08); border-color: rgba(22,171,57,0.3); }
|
||||
.badge-warn { color: var(--warn); background: rgba(242,113,28,0.08); border-color: rgba(242,113,28,0.3); }
|
||||
.badge-critical { color: var(--crit); background: rgba(219,40,40,0.08); border-color: rgba(219,40,40,0.3); }
|
||||
.badge-unknown { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
|
||||
|
||||
.badge::before { content: '●'; font-size: 8px; }
|
||||
|
||||
/* Alerts */
|
||||
.alert {
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 13px;
|
||||
border-left: 3px solid;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.alert-info { background: var(--accent-bg); border-color: var(--accent); color: var(--ink); }
|
||||
.alert-warn { background: rgba(242,113,28,0.08); border-color: var(--warn); color: var(--ink); }
|
||||
.alert-error { background: rgba(219,40,40,0.08); border-color: var(--crit); color: var(--crit); }
|
||||
.alert-ok { background: rgba(22,171,57,0.08); border-color: var(--ok); color: var(--ink); }
|
||||
|
||||
/* Utils */
|
||||
.hidden { display: none !important; }
|
||||
.text-muted { color: var(--muted); font-size: 13px; }
|
||||
.mono { font-family: monospace; font-size: 13px; }
|
||||
|
||||
/* Toast */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
bottom: 20px; right: 20px;
|
||||
display: flex; flex-direction: column; gap: 8px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.toast {
|
||||
background: var(--header-bg);
|
||||
color: rgba(255,255,255,0.9);
|
||||
border-radius: var(--radius);
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
max-width: 320px;
|
||||
animation: slideIn 0.15s ease;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
|
||||
}
|
||||
.toast-ok { border-left: 3px solid var(--ok); }
|
||||
.toast-error { border-left: 3px solid var(--crit); }
|
||||
|
||||
@keyframes slideIn {
|
||||
from { transform: translateX(16px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.page-header { flex-wrap: wrap; padding: 12px 16px; }
|
||||
.page-main { width: calc(100vw - 24px); margin-top: 20px; }
|
||||
.kv-table th { width: 130px; }
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
{{define "content"}}
|
||||
|
||||
<section class="panel">
|
||||
<h2>Накопитель</h2>
|
||||
<table class="kv-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Статус</th>
|
||||
<td id="diskState"><span class="badge badge-unknown">Не подключён</span></td>
|
||||
</tr>
|
||||
<tr id="rowDiskID" class="hidden">
|
||||
<th>ID диска</th>
|
||||
<td><span class="mono" id="valDiskID"></span></td>
|
||||
</tr>
|
||||
<tr id="rowTotal" class="hidden">
|
||||
<th>Всего на диске</th>
|
||||
<td id="valTotal"></td>
|
||||
</tr>
|
||||
<tr id="rowFree" class="hidden">
|
||||
<th>Свободно</th>
|
||||
<td id="valFree"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="panel hidden" id="progressPanel">
|
||||
<h2>Копирование</h2>
|
||||
<div style="padding:14px 16px">
|
||||
<div class="progress-bar-bg">
|
||||
<div class="progress-bar-fill" id="progressFill" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="progress-label" id="progressMsg">Подготовка…</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="btn-row" style="background:transparent;border:none;padding:0;margin-bottom:24px">
|
||||
<button class="button-primary" id="btnStart" onclick="startCopy()" disabled>▶ Запустить копирование</button>
|
||||
<button class="button-danger hidden" id="btnCancel" onclick="cancelCopy()">✕ Отменить</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let pollInterval = null;
|
||||
let activeTaskId = null;
|
||||
|
||||
async function refreshDisk() {
|
||||
try {
|
||||
const r = await fetch('/api/disk');
|
||||
if (!r.ok) return;
|
||||
const d = await r.json();
|
||||
|
||||
const labels = { absent: 'Не подключён', foreign: 'Незнакомый диск', known: 'Диск подключён' };
|
||||
const cls = { absent: 'badge-unknown', foreign: 'badge-warn', known: 'badge-ok' };
|
||||
document.getElementById('diskState').innerHTML =
|
||||
`<span class="badge ${cls[d.state]||'badge-unknown'}">${labels[d.state]||'—'}</span>`;
|
||||
|
||||
const known = d.state === 'known';
|
||||
['rowDiskID','rowTotal','rowFree'].forEach(id =>
|
||||
document.getElementById(id).classList.toggle('hidden', !known));
|
||||
if (known) {
|
||||
document.getElementById('valDiskID').textContent = d.disk_id;
|
||||
document.getElementById('valTotal').textContent = fmtBytes(d.total_bytes);
|
||||
document.getElementById('valFree').textContent = fmtBytes(d.free_bytes);
|
||||
}
|
||||
|
||||
const hasTask = !!d.active_task_id;
|
||||
document.getElementById('btnStart').disabled = !known || hasTask;
|
||||
document.getElementById('btnStart').classList.toggle('hidden', hasTask);
|
||||
document.getElementById('btnCancel').classList.toggle('hidden', !hasTask);
|
||||
document.getElementById('progressPanel').classList.toggle('hidden', !hasTask);
|
||||
|
||||
if (d.active_task_id && d.active_task_id !== activeTaskId) {
|
||||
activeTaskId = d.active_task_id;
|
||||
startTaskPoll(activeTaskId);
|
||||
}
|
||||
if (!d.active_task_id && activeTaskId) {
|
||||
activeTaskId = null; stopTaskPoll();
|
||||
document.getElementById('progressPanel').classList.add('hidden');
|
||||
}
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
function startTaskPoll(id) { stopTaskPoll(); pollInterval = setInterval(() => pollTask(id), 1500); }
|
||||
function stopTaskPoll() { if (pollInterval) { clearInterval(pollInterval); pollInterval = null; } }
|
||||
|
||||
async function pollTask(id) {
|
||||
try {
|
||||
const r = await fetch('/api/tasks/' + id);
|
||||
if (!r.ok) return;
|
||||
const t = await r.json();
|
||||
document.getElementById('progressFill').style.width = t.progress + '%';
|
||||
document.getElementById('progressMsg').textContent = t.message || '…';
|
||||
if (['success','failed','canceled'].includes(t.status)) {
|
||||
stopTaskPoll(); activeTaskId = null;
|
||||
document.getElementById('btnStart').disabled = false;
|
||||
document.getElementById('btnStart').classList.remove('hidden');
|
||||
document.getElementById('btnCancel').classList.add('hidden');
|
||||
document.getElementById('progressPanel').classList.add('hidden');
|
||||
if (t.status === 'success') toast(t.message || 'Готово', 'ok');
|
||||
if (t.status === 'failed') toast('Ошибка: ' + t.error, 'error');
|
||||
if (t.status === 'canceled') toast('Копирование отменено', 'error');
|
||||
refreshDisk();
|
||||
}
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
async function startCopy() {
|
||||
document.getElementById('btnStart').disabled = true;
|
||||
try {
|
||||
const r = await fetch('/api/copy/start', { method: 'POST' });
|
||||
const d = await r.json();
|
||||
if (!r.ok) {
|
||||
toast(d.error || 'Ошибка запуска', 'error');
|
||||
document.getElementById('btnStart').disabled = false;
|
||||
return;
|
||||
}
|
||||
activeTaskId = d.task_id;
|
||||
document.getElementById('btnStart').classList.add('hidden');
|
||||
document.getElementById('btnCancel').classList.remove('hidden');
|
||||
document.getElementById('progressPanel').classList.remove('hidden');
|
||||
document.getElementById('progressFill').style.width = '0%';
|
||||
document.getElementById('progressMsg').textContent = 'Подготовка…';
|
||||
startTaskPoll(activeTaskId);
|
||||
} catch(e) {
|
||||
toast('Ошибка связи', 'error');
|
||||
document.getElementById('btnStart').disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function cancelCopy() {
|
||||
try { await fetch('/api/copy/cancel', { method: 'POST' }); toast('Отмена…', 'ok'); } catch(e) {}
|
||||
}
|
||||
|
||||
refreshDisk();
|
||||
setInterval(refreshDisk, 5000);
|
||||
</script>
|
||||
{{end}}
|
||||
@@ -0,0 +1,44 @@
|
||||
{{define "layout"}}<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{.Title}} — Jukebox Maker</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="page-header">
|
||||
<h1>🎵 Jukebox Maker</h1>
|
||||
<nav class="header-nav">
|
||||
<a href="/" class="header-action {{if eq .Page "dashboard"}}active{{end}}">Dashboard</a>
|
||||
<a href="/settings" class="header-action {{if eq .Page "settings"}}active{{end}}">Настройки</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="page-main">
|
||||
{{template "content" .}}
|
||||
</main>
|
||||
|
||||
<div class="toast-container" id="toastContainer"></div>
|
||||
|
||||
<script>
|
||||
function toast(msg, type) {
|
||||
const c = document.getElementById('toastContainer');
|
||||
const t = document.createElement('div');
|
||||
t.className = 'toast toast-' + (type === 'error' ? 'error' : 'ok');
|
||||
t.textContent = msg;
|
||||
c.appendChild(t);
|
||||
setTimeout(() => t.remove(), 4000);
|
||||
}
|
||||
function fmtBytes(b) {
|
||||
if (!b) return '—';
|
||||
if (b >= 1e12) return (b/1e12).toFixed(1) + ' ТБ';
|
||||
if (b >= 1e9) return (b/1e9).toFixed(1) + ' ГБ';
|
||||
if (b >= 1e6) return (b/1e6).toFixed(1) + ' МБ';
|
||||
return (b/1e3).toFixed(0) + ' КБ';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
@@ -0,0 +1,138 @@
|
||||
{{define "content"}}
|
||||
<form id="settingsForm" onsubmit="saveSettings(event)">
|
||||
|
||||
<section class="panel">
|
||||
<h2>Источники копирования</h2>
|
||||
<div class="source-list" id="sourceList">
|
||||
<div class="text-muted" style="padding:12px 16px">Загрузка…</div>
|
||||
</div>
|
||||
<div class="btn-row">
|
||||
<button type="button" class="button-secondary button-sm" onclick="loadSources()">↻ Обновить список</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Параметры копирования</h2>
|
||||
<div class="form-body">
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="reserveGB">Оставить свободным на диске (ГБ)</label>
|
||||
<input class="form-input" type="number" id="reserveGB" min="0" max="1000" step="0.5" value="2">
|
||||
<span class="form-hint">Копирование остановится, когда свободного места останется меньше этого значения.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="fileSelectMode">Какие файлы копировать</label>
|
||||
<select class="form-select" id="fileSelectMode" style="width:auto;max-width:420px">
|
||||
<option value="new">Только новые (не копировавшиеся на этот диск)</option>
|
||||
<option value="all">Все подряд</option>
|
||||
</select>
|
||||
<span class="form-hint">«Только новые» — пропускает файлы, уже скопированные на данный диск, даже если они были удалены с него (считаются просмотренными).</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="overwriteMode">Режим записи</label>
|
||||
<select class="form-select" id="overwriteMode" style="width:auto;max-width:420px">
|
||||
<option value="skip">Пропустить существующие файлы</option>
|
||||
<option value="delete">Удалить наши данные с диска и перезаписать заново</option>
|
||||
</select>
|
||||
<span class="form-hint">«Удалить и перезаписать» — удаляет с диска всё кроме папки .jukebox, затем копирует заново.</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Автоматизация</h2>
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<label style="display:flex;align-items:center;gap:8px;cursor:pointer">
|
||||
<input type="checkbox" id="autoCopy" style="width:15px;height:15px;accent-color:var(--accent)">
|
||||
<span class="form-label" style="margin:0">Автоматическое копирование</span>
|
||||
</label>
|
||||
<span class="form-hint">При обнаружении знакомого накопителя копирование запустится автоматически.</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="display:flex;gap:8px;margin-bottom:24px">
|
||||
<button type="submit" class="button-primary">Сохранить настройки</button>
|
||||
<button type="button" class="button-secondary" onclick="loadSettings()">Сбросить</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<script>
|
||||
let allSources = [];
|
||||
let enabledSources = {};
|
||||
|
||||
async function loadSources() {
|
||||
try {
|
||||
const r = await fetch('/api/sources');
|
||||
if (!r.ok) return;
|
||||
const d = await r.json();
|
||||
allSources = d.items || [];
|
||||
renderSources();
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
function renderSources() {
|
||||
const el = document.getElementById('sourceList');
|
||||
if (!allSources.length) {
|
||||
el.innerHTML = '<div class="text-muted" style="padding:12px 16px">Папки в /media не найдены.</div>';
|
||||
return;
|
||||
}
|
||||
el.innerHTML = allSources.map(path => {
|
||||
const checked = enabledSources[path] !== false;
|
||||
return `<label class="source-item">
|
||||
<input type="checkbox" data-source="${path}" ${checked ? 'checked' : ''}>
|
||||
<span class="source-item-name">${path}</span>
|
||||
<span class="source-item-path">/media/${path}</span>
|
||||
</label>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
async function loadSettings() {
|
||||
try {
|
||||
const r = await fetch('/api/config');
|
||||
if (!r.ok) return;
|
||||
const cfg = await r.json();
|
||||
document.getElementById('reserveGB').value = cfg.reserve_free_gb ?? 2;
|
||||
document.getElementById('fileSelectMode').value = cfg.file_select_mode || 'new';
|
||||
document.getElementById('overwriteMode').value = cfg.overwrite_mode || 'skip';
|
||||
document.getElementById('autoCopy').checked = !!cfg.auto_copy;
|
||||
enabledSources = {};
|
||||
(cfg.sources || []).forEach(s => { enabledSources[s.path] = s.enabled; });
|
||||
renderSources();
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
async function saveSettings(e) {
|
||||
e.preventDefault();
|
||||
const checkboxes = document.querySelectorAll('[data-source]');
|
||||
const sources = Array.from(checkboxes).map(cb => ({ path: cb.dataset.source, enabled: cb.checked }));
|
||||
Object.keys(enabledSources).forEach(path => {
|
||||
if (!sources.find(s => s.path === path)) sources.push({ path, enabled: false });
|
||||
});
|
||||
const body = {
|
||||
reserve_free_gb: parseFloat(document.getElementById('reserveGB').value) || 2,
|
||||
file_select_mode: document.getElementById('fileSelectMode').value,
|
||||
overwrite_mode: document.getElementById('overwriteMode').value,
|
||||
auto_copy: document.getElementById('autoCopy').checked,
|
||||
sources,
|
||||
};
|
||||
try {
|
||||
const r = await fetch('/api/config', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (r.ok) { toast('Настройки сохранены', 'ok'); await loadSettings(); }
|
||||
else { const d = await r.json(); toast(d.error || 'Ошибка сохранения', 'error'); }
|
||||
} catch(e) { toast('Ошибка связи', 'error'); }
|
||||
}
|
||||
|
||||
loadSettings();
|
||||
loadSources();
|
||||
</script>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user