295 lines
12 KiB
HTML
295 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Brightwheel Exporter Dashboard</title>
|
|
<link rel="stylesheet" href="dashboard.css">
|
|
<script src="../lib/jszip.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="app-layout">
|
|
<!-- Navigation Bar -->
|
|
<header class="top-nav">
|
|
<div class="nav-brand">
|
|
<div class="brand-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="7 10 12 15 17 10"></polyline>
|
|
<line x1="12" y1="15" x2="12" y2="3"></line>
|
|
</svg>
|
|
</div>
|
|
<div class="brand-text">
|
|
<h1>Brightwheel Exporter</h1>
|
|
<span>Memories & Reports Archiver</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="session-badge" id="sessionBadge">
|
|
<span class="session-dot" id="sessionDot"></span>
|
|
<span id="sessionStatusText">Detecting Brightwheel Session...</span>
|
|
<button id="refreshSessionBtn" class="icon-btn" title="Refresh Session">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="23 4 23 10 17 10"></polyline>
|
|
<polyline points="1 20 1 14 7 14"></polyline>
|
|
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content Grid -->
|
|
<main class="main-container">
|
|
<div class="dashboard-grid">
|
|
<!-- Left Panel: Configuration -->
|
|
<div class="config-column">
|
|
<!-- Card 1: Student Selection -->
|
|
<section class="card">
|
|
<div class="card-header">
|
|
<div class="card-title-group">
|
|
<span class="step-num">1</span>
|
|
<h2>Select Child / Student</h2>
|
|
</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="students-list" id="studentsList">
|
|
<div class="loading-placeholder">
|
|
<div class="spinner"></div>
|
|
<span>Scanning Brightwheel profile...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Manual ID Fallback Accordion -->
|
|
<details class="manual-id-details" id="manualDetails">
|
|
<summary>Enter Student UUID Manually</summary>
|
|
<div class="manual-input-row">
|
|
<input type="text" id="manualStudentId" placeholder="e.g. edda433b-2a24-4da7-bbd5-9f131b4b2565" value="edda433b-2a24-4da7-bbd5-9f131b4b2565">
|
|
<button id="setManualIdBtn" class="secondary-btn">Use ID</button>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Card 2: Date Range -->
|
|
<section class="card">
|
|
<div class="card-header">
|
|
<div class="card-title-group">
|
|
<span class="step-num">2</span>
|
|
<h2>Date Range Filter</h2>
|
|
</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="quick-dates-pills" id="quickDatePills">
|
|
<button class="pill-btn active" data-range="all">All Time</button>
|
|
<button class="pill-btn" data-range="this-year">This Year</button>
|
|
<button class="pill-btn" data-range="last-year">Last Year</button>
|
|
<button class="pill-btn" data-range="last-90">Last 90 Days</button>
|
|
<button class="pill-btn" data-range="custom">Custom</button>
|
|
</div>
|
|
|
|
<div class="date-inputs-row" id="customDateRow">
|
|
<div class="date-field">
|
|
<label for="startDate">From</label>
|
|
<input type="date" id="startDate">
|
|
</div>
|
|
<div class="date-field">
|
|
<label for="endDate">To</label>
|
|
<input type="date" id="endDate">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Card 3: Export Categories -->
|
|
<section class="card">
|
|
<div class="card-header">
|
|
<div class="card-title-group">
|
|
<span class="step-num">3</span>
|
|
<h2>Export Categories</h2>
|
|
</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="checkbox-group">
|
|
<label class="custom-checkbox">
|
|
<input type="checkbox" id="catPhotos" checked>
|
|
<span class="checkmark"></span>
|
|
<div class="checkbox-label">
|
|
<strong>Photos & Videos</strong>
|
|
<small>High resolution original media files & captions</small>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="custom-checkbox">
|
|
<input type="checkbox" id="catCare" checked>
|
|
<span class="checkmark"></span>
|
|
<div class="checkbox-label">
|
|
<strong>Daily Care Logs</strong>
|
|
<small>Meals, nap duration, potty checks, medications</small>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="custom-checkbox">
|
|
<input type="checkbox" id="catMilestones" checked>
|
|
<span class="checkmark"></span>
|
|
<div class="checkbox-label">
|
|
<strong>Learning Milestones & Observations</strong>
|
|
<small>Curriculum tags, developmental notes, kudos</small>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="custom-checkbox">
|
|
<input type="checkbox" id="catAttendance" checked>
|
|
<span class="checkmark"></span>
|
|
<div class="checkbox-label">
|
|
<strong>Attendance & Health Screening</strong>
|
|
<small>Check-in/out timestamps, temperature readings</small>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="custom-checkbox">
|
|
<input type="checkbox" id="catMessages" checked>
|
|
<span class="checkmark"></span>
|
|
<div class="checkbox-label">
|
|
<strong>Staff Messages & Announcements</strong>
|
|
<small>Communication history between school & family</small>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Card 4: Packaging Formats -->
|
|
<section class="card">
|
|
<div class="card-header">
|
|
<div class="card-title-group">
|
|
<span class="step-num">4</span>
|
|
<h2>Archive Formats</h2>
|
|
</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="checkbox-group">
|
|
<label class="custom-checkbox">
|
|
<input type="checkbox" id="fmtZip" checked>
|
|
<span class="checkmark"></span>
|
|
<div class="checkbox-label">
|
|
<strong>Folder-Organized ZIP Archive</strong>
|
|
<small>Structured by <code>/YYYY/MM/photos/</code> and <code>/videos/</code></small>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="custom-checkbox">
|
|
<input type="checkbox" id="fmtViewer" checked>
|
|
<span class="checkmark"></span>
|
|
<div class="checkbox-label">
|
|
<strong>Offline Interactive Timeline Viewer</strong>
|
|
<small>Standalone <code>index.html</code> bundled inside the archive</small>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="custom-checkbox">
|
|
<input type="checkbox" id="fmtJson" checked>
|
|
<span class="checkmark"></span>
|
|
<div class="checkbox-label">
|
|
<strong>Raw JSON Manifest (<code>manifest.json</code>)</strong>
|
|
<small>Complete structured metadata for data portability</small>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="custom-checkbox">
|
|
<input type="checkbox" id="fmtCsv" checked>
|
|
<span class="checkmark"></span>
|
|
<div class="checkbox-label">
|
|
<strong>Spreadsheet CSV (<code>activities.csv</code>)</strong>
|
|
<small>Open in Excel, Numbers, or Google Sheets</small>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Right Panel: Export Controller & Live Monitor -->
|
|
<div class="action-column">
|
|
<!-- Primary Action Box -->
|
|
<section class="card hero-action-card">
|
|
<div class="action-header">
|
|
<h3>Export Controller</h3>
|
|
<div class="speed-setting">
|
|
<label for="concurrencySelect">Pacing / Delay:</label>
|
|
<select id="concurrencySelect">
|
|
<option value="400">Gentle (400ms delay - Safest)</option>
|
|
<option value="200" selected>Standard (200ms delay)</option>
|
|
<option value="50">Fast (50ms delay)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="primary-controls">
|
|
<button id="startExportBtn" class="primary-action-btn">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="7 10 12 15 17 10"></polyline>
|
|
<line x1="12" y1="15" x2="12" y2="3"></line>
|
|
</svg>
|
|
<span>Start Complete Export</span>
|
|
</button>
|
|
|
|
<div class="secondary-controls-row" id="inProgressControls" style="display: none;">
|
|
<button id="pauseExportBtn" class="secondary-btn">Pause</button>
|
|
<button id="cancelExportBtn" class="danger-btn">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Bar Section -->
|
|
<div class="progress-section" id="progressSection">
|
|
<div class="progress-labels">
|
|
<span class="progress-status" id="progressStatusText">Ready to start</span>
|
|
<span class="progress-percentage" id="progressPercent">0%</span>
|
|
</div>
|
|
<div class="progress-bar-track">
|
|
<div class="progress-bar-fill" id="progressBarFill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Live Metrics Grid -->
|
|
<div class="metrics-grid">
|
|
<div class="metric-card">
|
|
<span class="metric-value" id="metricActivitiesCount">0</span>
|
|
<span class="metric-label">Activities Found</span>
|
|
</div>
|
|
<div class="metric-card">
|
|
<span class="metric-value" id="metricMediaCount">0 / 0</span>
|
|
<span class="metric-label">Media Files</span>
|
|
</div>
|
|
<div class="metric-card">
|
|
<span class="metric-value" id="metricSize">0.0 MB</span>
|
|
<span class="metric-label">Downloaded Data</span>
|
|
</div>
|
|
<div class="metric-card">
|
|
<span class="metric-value" id="metricRateLimit">0</span>
|
|
<span class="metric-label">Retries / Backoffs</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Live Activity Log Card -->
|
|
<section class="card log-card">
|
|
<div class="card-header log-header">
|
|
<h3>Live Activity Log</h3>
|
|
<div class="log-actions">
|
|
<button id="clearLogBtn" class="link-btn">Clear</button>
|
|
</div>
|
|
</div>
|
|
<div class="terminal-log-body" id="terminalLog">
|
|
<div class="log-line info">[System] Exporter dashboard initialized. Waiting to begin...</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="dashboard.js"></script>
|
|
</body>
|
|
</html>
|