Add local web analysis dashboard
This commit is contained in:
Philip Guzman
@@ -0,0 +1 @@
|
||||
"""Static assets for the local Serato Doctor web interface."""
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,54 @@
|
||||
const form = document.querySelector('#analysis-form');
|
||||
const button = document.querySelector('#analyze-button');
|
||||
const errorBox = document.querySelector('#error-message');
|
||||
const results = document.querySelector('#dashboard');
|
||||
|
||||
function expandHome(path) {
|
||||
return path.trim();
|
||||
}
|
||||
|
||||
function render(data) {
|
||||
document.querySelectorAll('[data-field]').forEach((element) => {
|
||||
const value = data[element.dataset.field];
|
||||
element.textContent = value ?? '—';
|
||||
});
|
||||
const score = data.score;
|
||||
document.querySelector('#health-score').textContent = score == null ? '—' : `${score}%`;
|
||||
document.querySelector('#score-ring').style.setProperty('--score', score ?? 0);
|
||||
document.querySelector('#health-message').textContent = score == null
|
||||
? 'Not enough data yet'
|
||||
: score >= 95 ? 'Looking excellent' : score >= 80 ? 'A few things need attention' : 'Review recommended';
|
||||
document.querySelector('#score-basis').textContent = data.score_basis;
|
||||
document.querySelector('#analysis-time').textContent = `Completed ${new Date().toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'})}`;
|
||||
results.hidden = false;
|
||||
results.scrollIntoView({behavior: 'smooth', block: 'start'});
|
||||
}
|
||||
|
||||
form.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
errorBox.hidden = true;
|
||||
button.disabled = true;
|
||||
button.querySelector('span').textContent = 'Analyzing safely…';
|
||||
const roots = document.querySelector('#reference-roots').value
|
||||
.split('\n').map((value) => value.trim()).filter(Boolean);
|
||||
try {
|
||||
const response = await fetch('/api/analyze', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
serato: expandHome(document.querySelector('#serato-path').value),
|
||||
music: expandHome(document.querySelector('#music-path').value),
|
||||
reference_roots: roots,
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
if (!response.ok) throw new Error(data.error || 'Analysis failed');
|
||||
render(data);
|
||||
} catch (error) {
|
||||
errorBox.textContent = error.message;
|
||||
errorBox.hidden = false;
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
button.querySelector('span').textContent = 'Analyze library';
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,87 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="dark">
|
||||
<title>Serato Doctor</title>
|
||||
<link rel="stylesheet" href="/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="ambient ambient-one"></div>
|
||||
<div class="ambient ambient-two"></div>
|
||||
<div class="shell">
|
||||
<aside class="sidebar">
|
||||
<a class="brand" href="/" aria-label="Serato Doctor home">
|
||||
<span class="brand-mark">SD</span>
|
||||
<span><strong>Serato</strong><small>Doctor</small></span>
|
||||
</a>
|
||||
<nav aria-label="Primary navigation">
|
||||
<a class="nav-item active" href="#dashboard"><span>⌁</span> Dashboard</a>
|
||||
<a class="nav-item" href="#scan"><span>◎</span> New analysis</a>
|
||||
<a class="nav-item" href="#diagnostics"><span>◇</span> Diagnostics</a>
|
||||
</nav>
|
||||
<div class="safety-card">
|
||||
<span class="safety-icon">✓</span>
|
||||
<div><strong>Read-only mode</strong><p>Your library will not be modified.</p></div>
|
||||
</div>
|
||||
<div class="sidebar-foot">Local interface · v0.1</div>
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
<header class="topbar">
|
||||
<div><p class="eyebrow">Library intelligence</p><h1>Good evening.</h1></div>
|
||||
<div class="status-pill"><span></span> Local & private</div>
|
||||
</header>
|
||||
|
||||
<section id="scan" class="scan-panel panel">
|
||||
<div class="panel-copy">
|
||||
<p class="eyebrow">Start here</p>
|
||||
<h2>Analyze your library</h2>
|
||||
<p>Point Serato Doctor at your Serato and music folders. We inspect references, duplicates, smart crates, and symlinks without changing a thing.</p>
|
||||
</div>
|
||||
<form id="analysis-form">
|
||||
<label>Serato folder
|
||||
<input id="serato-path" name="serato" value="~/Music/_Serato_" required>
|
||||
</label>
|
||||
<label>Music folder
|
||||
<input id="music-path" name="music" value="~/Music/Jukebox" required>
|
||||
</label>
|
||||
<label class="wide">Historical reference roots <span>optional · one per line</span>
|
||||
<textarea id="reference-roots" rows="2" placeholder="/Users/old-user/OneDrive/Jukebox"></textarea>
|
||||
</label>
|
||||
<button id="analyze-button" type="submit"><span>Analyze library</span><b>→</b></button>
|
||||
</form>
|
||||
<div id="error-message" class="error" role="alert" hidden></div>
|
||||
</section>
|
||||
|
||||
<section id="dashboard" class="results" aria-live="polite" hidden>
|
||||
<div class="section-heading"><div><p class="eyebrow">Latest analysis</p><h2>Library health</h2></div><span id="analysis-time"></span></div>
|
||||
<div class="hero-grid">
|
||||
<article class="score-card panel">
|
||||
<div class="score-ring" id="score-ring"><div><strong id="health-score">—</strong><span>health</span></div></div>
|
||||
<div><p class="score-label">Reference integrity</p><h3 id="health-message">Ready to analyze</h3><p id="score-basis">We only score evidence we can defend.</p></div>
|
||||
</article>
|
||||
<div class="metrics-grid">
|
||||
<article class="metric panel"><span>Tracks</span><strong data-field="disk_tracks">—</strong><small>audio files found</small></article>
|
||||
<article class="metric panel warning"><span>Broken references</span><strong data-field="missing_references">—</strong><small>static crate entries</small></article>
|
||||
<article class="metric panel"><span>Unused tracks</span><strong data-field="unused_tracks">—</strong><small>not referenced by crates</small></article>
|
||||
<article class="metric panel"><span>Suggested matches</span><strong data-field="suggested_matches">—</strong><small>explainable candidates</small></article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="diagnostics" class="diagnostics panel">
|
||||
<div class="section-heading"><div><p class="eyebrow">Full picture</p><h2>Diagnostics</h2></div><span class="read-only-tag">No changes made</span></div>
|
||||
<div class="diagnostic-list">
|
||||
<div><span class="diag-icon violet">◇</span><p><strong>Crates</strong><small><b data-field="static_crates">—</b> static · <b data-field="smart_crates">—</b> smart · <b data-field="dynamic_references_excluded">—</b> dynamic references excluded</small></p></div>
|
||||
<div><span class="diag-icon amber">≋</span><p><strong>Duplicate filenames</strong><small><b data-field="duplicate_filename_groups">—</b> exact groups · <b data-field="duplicate_files">—</b> extra files</small></p></div>
|
||||
<div><span class="diag-icon blue">⌁</span><p><strong>Cloud conflicts</strong><small><b data-field="suspected_cloud_conflict_groups">—</b> suspected groups · <b data-field="suspected_cloud_conflict_files">—</b> extra files</small></p></div>
|
||||
<div><span class="diag-icon red">↗</span><p><strong>Broken symlinks</strong><small><b data-field="broken_symlinks">—</b> unresolved links</small></p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<script src="/app.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user