feat: support for day time monitoring data, combined report generation now compaitible with mixed day and night types.
This commit is contained in:
@@ -74,105 +74,134 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time Filter Card -->
|
||||
<!-- Sessions Card -->
|
||||
<div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Time Filter</h2>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Applied to all locations. Leave blank to include all data.</p>
|
||||
|
||||
<!-- Preset Buttons -->
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<button type="button" onclick="setTimePreset('night')" data-preset="night"
|
||||
class="preset-btn px-3 py-1.5 text-sm rounded-md bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
|
||||
Night 7PM – 7AM
|
||||
</button>
|
||||
<button type="button" onclick="setTimePreset('day')" data-preset="day"
|
||||
class="preset-btn px-3 py-1.5 text-sm rounded-md bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
|
||||
Day 7AM – 7PM
|
||||
</button>
|
||||
<button type="button" onclick="setTimePreset('all')" data-preset="all"
|
||||
class="preset-btn px-3 py-1.5 text-sm rounded-md bg-emerald-600 text-white hover:bg-emerald-700 transition-colors">
|
||||
All Day
|
||||
</button>
|
||||
<button type="button" onclick="setTimePreset('custom')" data-preset="custom"
|
||||
class="preset-btn px-3 py-1.5 text-sm rounded-md bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
|
||||
Custom
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Time Inputs -->
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<label for="start-time" class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Start Time</label>
|
||||
<input type="time" id="start-time" value=""
|
||||
onchange="updatePresetButtons()"
|
||||
class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="end-time" class="block text-xs text-gray-500 dark:text-gray-400 mb-1">End Time</label>
|
||||
<input type="time" id="end-time" value=""
|
||||
onchange="updatePresetButtons()"
|
||||
class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date Range -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Date Range <span class="text-gray-400 font-normal">(optional)</span>
|
||||
</label>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="start-date" class="block text-xs text-gray-500 dark:text-gray-400 mb-1">From</label>
|
||||
<input type="date" id="start-date" value=""
|
||||
class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="end-date" class="block text-xs text-gray-500 dark:text-gray-400 mb-1">To</label>
|
||||
<input type="date" id="end-date" value=""
|
||||
class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Locations Card -->
|
||||
<div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Locations to Include</h2>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
<span id="selected-count">{{ locations|length }}</span> of {{ locations|length }} selected
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Monitoring Sessions</h2>
|
||||
<div class="flex gap-3 text-sm">
|
||||
<button type="button" onclick="selectAll()" class="text-emerald-600 dark:text-emerald-400 hover:underline">Select All</button>
|
||||
<button type="button" onclick="deselectAll()" class="text-gray-500 dark:text-gray-400 hover:underline">Deselect All</button>
|
||||
<button type="button" onclick="selectAllSessions()" class="text-emerald-600 dark:text-emerald-400 hover:underline">Select All</button>
|
||||
<button type="button" onclick="deselectAllSessions()" class="text-gray-500 dark:text-gray-400 hover:underline">Deselect All</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||
<span id="selected-count">0</span> session(s) selected — each selected session becomes one sheet in the ZIP.
|
||||
Change the period type per session to control how stats are bucketed (Day vs Night).
|
||||
</p>
|
||||
|
||||
{% if locations %}
|
||||
<div class="divide-y divide-gray-100 dark:divide-gray-700">
|
||||
{% for loc in locations %}
|
||||
<label class="flex items-center gap-3 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-slate-700/50 px-2 rounded-md transition-colors">
|
||||
<input type="checkbox" name="location" value="{{ loc.name }}" checked
|
||||
onchange="updateSelectedCount()"
|
||||
class="h-4 w-4 text-emerald-600 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500">
|
||||
<span class="flex-1 text-sm text-gray-900 dark:text-white font-medium">{{ loc.name }}</span>
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500">{{ loc.file_count }} file{{ 's' if loc.file_count != 1 else '' }}</span>
|
||||
</label>
|
||||
{% set loc_name = loc.name %}
|
||||
{% set sessions = loc.sessions %}
|
||||
<div class="border border-gray-200 dark:border-gray-700 rounded-lg mb-3 overflow-hidden">
|
||||
<!-- Location header / toggle -->
|
||||
<button type="button"
|
||||
onclick="toggleLocation('loc-{{ loop.index }}')"
|
||||
class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-slate-700/50 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors text-left">
|
||||
<div class="flex items-center gap-3">
|
||||
<svg id="chevron-loc-{{ loop.index }}" class="w-4 h-4 text-gray-400 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
<span class="font-medium text-gray-900 dark:text-white text-sm">{{ loc_name }}</span>
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500">{{ sessions|length }} session{{ 's' if sessions|length != 1 else '' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-xs" onclick="event.stopPropagation()">
|
||||
<button type="button" onclick="selectLocation('loc-{{ loop.index }}')"
|
||||
class="text-emerald-600 dark:text-emerald-400 hover:underline">All</button>
|
||||
<button type="button" onclick="deselectLocation('loc-{{ loop.index }}')"
|
||||
class="text-gray-400 hover:underline">None</button>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<!-- Session rows -->
|
||||
<div id="loc-{{ loop.index }}" class="divide-y divide-gray-100 dark:divide-gray-700/50">
|
||||
{% for s in sessions %}
|
||||
{% set pt_colors = {
|
||||
'weekday_day': 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
|
||||
'weekday_night': 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300',
|
||||
'weekend_day': 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
|
||||
'weekend_night': 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
|
||||
} %}
|
||||
{% set pt_labels = {
|
||||
'weekday_day': 'Weekday Day',
|
||||
'weekday_night': 'Weekday Night',
|
||||
'weekend_day': 'Weekend Day',
|
||||
'weekend_night': 'Weekend Night',
|
||||
} %}
|
||||
<div class="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-slate-700/30 transition-colors">
|
||||
<!-- Checkbox -->
|
||||
<input type="checkbox"
|
||||
class="session-cb loc-{{ loop.index }}-cb h-4 w-4 text-emerald-600 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500 shrink-0"
|
||||
value="{{ s.session_id }}"
|
||||
checked
|
||||
onchange="updateSelectionStats()">
|
||||
|
||||
<!-- Date/day info -->
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ s.day_of_week }} {{ s.date_display }}
|
||||
</span>
|
||||
{% if s.session_label %}
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500 truncate">{{ s.session_label }}</span>
|
||||
{% endif %}
|
||||
{% if s.status == 'recording' %}
|
||||
<span class="px-1.5 py-0.5 text-xs bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300 rounded-full flex items-center gap-1">
|
||||
<span class="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse"></span>Recording
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mt-0.5 text-xs text-gray-400 dark:text-gray-500">
|
||||
{% if s.started_at %}
|
||||
<span>{{ s.started_at }}</span>
|
||||
{% endif %}
|
||||
{% if s.duration_h is not none %}
|
||||
<span>{{ s.duration_h }}h {{ s.duration_m }}m</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Period type dropdown -->
|
||||
<div class="relative shrink-0" id="wiz-period-wrap-{{ s.session_id }}">
|
||||
<button type="button"
|
||||
onclick="toggleWizPeriodMenu('{{ s.session_id }}')"
|
||||
id="wiz-period-badge-{{ s.session_id }}"
|
||||
class="px-2 py-0.5 text-xs font-medium rounded-full flex items-center gap-1 transition-colors {{ pt_colors.get(s.period_type, 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400') }}"
|
||||
title="Click to change period type">
|
||||
<span id="wiz-period-label-{{ s.session_id }}">{{ pt_labels.get(s.period_type, 'Set period') }}</span>
|
||||
<svg class="w-3 h-3 opacity-60 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div id="wiz-period-menu-{{ s.session_id }}"
|
||||
class="hidden absolute right-0 top-full mt-1 z-20 bg-white dark:bg-slate-700 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg min-w-[160px] py-1">
|
||||
{% for pt, pt_label in [('weekday_day','Weekday Day'),('weekday_night','Weekday Night'),('weekend_day','Weekend Day'),('weekend_night','Weekend Night')] %}
|
||||
<button type="button"
|
||||
onclick="setWizPeriodType('{{ s.session_id }}', '{{ pt }}')"
|
||||
class="w-full text-left px-3 py-1.5 text-xs hover:bg-gray-100 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-300 {% if s.period_type == pt %}font-bold{% endif %}">
|
||||
{{ pt_label }}
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
<p>No Leq measurement files found in this project.</p>
|
||||
<p class="text-sm mt-1">Upload RND files with '_Leq_' in the filename to generate reports.</p>
|
||||
<div class="text-center py-10 text-gray-500 dark:text-gray-400">
|
||||
<svg class="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"></path>
|
||||
</svg>
|
||||
<p>No monitoring sessions found.</p>
|
||||
<p class="text-sm mt-1">Upload data files to create sessions first.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Footer Buttons -->
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-3 pb-6">
|
||||
<a href="/api/projects/{{ project_id }}"
|
||||
<a href="/projects/{{ project_id }}"
|
||||
class="w-full sm:w-auto px-6 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors text-center text-sm font-medium">
|
||||
Cancel
|
||||
</a>
|
||||
@@ -191,180 +220,173 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let reportTemplates = [];
|
||||
const PROJECT_ID = '{{ project_id }}';
|
||||
|
||||
// ---- Template management (same as rnd_viewer.html) ----
|
||||
const PERIOD_COLORS = {
|
||||
weekday_day: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
|
||||
weekday_night: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300',
|
||||
weekend_day: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
|
||||
weekend_night: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
|
||||
};
|
||||
const PERIOD_LABELS = {
|
||||
weekday_day: 'Weekday Day',
|
||||
weekday_night: 'Weekday Night',
|
||||
weekend_day: 'Weekend Day',
|
||||
weekend_night: 'Weekend Night',
|
||||
};
|
||||
const ALL_PERIOD_BADGE_CLASSES = [
|
||||
'bg-gray-100','text-gray-500','dark:bg-gray-700','dark:text-gray-400',
|
||||
...new Set(Object.values(PERIOD_COLORS).flatMap(s => s.split(' ')))
|
||||
];
|
||||
|
||||
// ── Location accordion ────────────────────────────────────────────
|
||||
|
||||
function toggleLocation(locId) {
|
||||
const body = document.getElementById(locId);
|
||||
const chevron = document.getElementById('chevron-' + locId);
|
||||
body.classList.toggle('hidden');
|
||||
chevron.style.transform = body.classList.contains('hidden') ? 'rotate(-90deg)' : '';
|
||||
}
|
||||
|
||||
function selectLocation(locId) {
|
||||
document.querySelectorAll('.' + locId + '-cb').forEach(cb => cb.checked = true);
|
||||
updateSelectionStats();
|
||||
}
|
||||
|
||||
function deselectLocation(locId) {
|
||||
document.querySelectorAll('.' + locId + '-cb').forEach(cb => cb.checked = false);
|
||||
updateSelectionStats();
|
||||
}
|
||||
|
||||
function selectAllSessions() {
|
||||
document.querySelectorAll('.session-cb').forEach(cb => cb.checked = true);
|
||||
updateSelectionStats();
|
||||
}
|
||||
|
||||
function deselectAllSessions() {
|
||||
document.querySelectorAll('.session-cb').forEach(cb => cb.checked = false);
|
||||
updateSelectionStats();
|
||||
}
|
||||
|
||||
function updateSelectionStats() {
|
||||
const count = document.querySelectorAll('.session-cb:checked').length;
|
||||
document.getElementById('selected-count').textContent = count;
|
||||
document.getElementById('preview-btn').disabled = count === 0;
|
||||
}
|
||||
|
||||
// ── Period type dropdown (wizard) ─────────────────────────────────
|
||||
|
||||
function toggleWizPeriodMenu(sessionId) {
|
||||
const menu = document.getElementById('wiz-period-menu-' + sessionId);
|
||||
document.querySelectorAll('[id^="wiz-period-menu-"]').forEach(m => {
|
||||
if (m.id !== 'wiz-period-menu-' + sessionId) m.classList.add('hidden');
|
||||
});
|
||||
menu.classList.toggle('hidden');
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('[id^="wiz-period-wrap-"]')) {
|
||||
document.querySelectorAll('[id^="wiz-period-menu-"]').forEach(m => m.classList.add('hidden'));
|
||||
}
|
||||
});
|
||||
|
||||
async function setWizPeriodType(sessionId, periodType) {
|
||||
document.getElementById('wiz-period-menu-' + sessionId).classList.add('hidden');
|
||||
const badge = document.getElementById('wiz-period-badge-' + sessionId);
|
||||
badge.disabled = true;
|
||||
try {
|
||||
const resp = await fetch(`/api/projects/${PROJECT_ID}/sessions/${sessionId}`, {
|
||||
method: 'PATCH',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({period_type: periodType}),
|
||||
});
|
||||
if (!resp.ok) throw new Error(await resp.text());
|
||||
ALL_PERIOD_BADGE_CLASSES.forEach(c => badge.classList.remove(c));
|
||||
const colorStr = PERIOD_COLORS[periodType] || 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400';
|
||||
badge.classList.add(...colorStr.split(' ').filter(Boolean));
|
||||
document.getElementById('wiz-period-label-' + sessionId).textContent = PERIOD_LABELS[periodType] || periodType;
|
||||
} catch(err) {
|
||||
alert('Failed to update period type: ' + err.message);
|
||||
} finally {
|
||||
badge.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Template management ───────────────────────────────────────────
|
||||
|
||||
let reportTemplates = [];
|
||||
|
||||
async function loadTemplates() {
|
||||
try {
|
||||
const response = await fetch('/api/report-templates?project_id={{ project_id }}');
|
||||
if (response.ok) {
|
||||
reportTemplates = await response.json();
|
||||
const resp = await fetch('/api/report-templates?project_id=' + PROJECT_ID);
|
||||
if (resp.ok) {
|
||||
reportTemplates = await resp.json();
|
||||
populateTemplateDropdown();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading templates:', error);
|
||||
}
|
||||
} catch(e) { console.error('Error loading templates:', e); }
|
||||
}
|
||||
|
||||
function populateTemplateDropdown() {
|
||||
const select = document.getElementById('template-select');
|
||||
if (!select) return;
|
||||
select.innerHTML = '<option value="">-- Select a template --</option>';
|
||||
reportTemplates.forEach(template => {
|
||||
const option = document.createElement('option');
|
||||
option.value = template.id;
|
||||
option.textContent = template.name;
|
||||
option.dataset.config = JSON.stringify(template);
|
||||
select.appendChild(option);
|
||||
reportTemplates.forEach(t => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = t.id;
|
||||
opt.textContent = t.name;
|
||||
opt.dataset.config = JSON.stringify(t);
|
||||
select.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
function applyTemplate() {
|
||||
const select = document.getElementById('template-select');
|
||||
const selectedOption = select.options[select.selectedIndex];
|
||||
if (!selectedOption.value) return;
|
||||
const template = JSON.parse(selectedOption.dataset.config);
|
||||
if (template.report_title) document.getElementById('report-title').value = template.report_title;
|
||||
if (template.start_time) document.getElementById('start-time').value = template.start_time;
|
||||
if (template.end_time) document.getElementById('end-time').value = template.end_time;
|
||||
if (template.start_date) document.getElementById('start-date').value = template.start_date;
|
||||
if (template.end_date) document.getElementById('end-date').value = template.end_date;
|
||||
updatePresetButtons();
|
||||
const opt = select.options[select.selectedIndex];
|
||||
if (!opt.value) return;
|
||||
const t = JSON.parse(opt.dataset.config);
|
||||
if (t.report_title) document.getElementById('report-title').value = t.report_title;
|
||||
}
|
||||
|
||||
async function saveAsTemplate() {
|
||||
const name = prompt('Enter a name for this template:');
|
||||
if (!name) return;
|
||||
const templateData = {
|
||||
name: name,
|
||||
project_id: '{{ project_id }}',
|
||||
const data = {
|
||||
name,
|
||||
project_id: PROJECT_ID,
|
||||
report_title: document.getElementById('report-title').value || 'Background Noise Study',
|
||||
start_time: document.getElementById('start-time').value || null,
|
||||
end_time: document.getElementById('end-time').value || null,
|
||||
start_date: document.getElementById('start-date').value || null,
|
||||
end_date: document.getElementById('end-date').value || null
|
||||
};
|
||||
try {
|
||||
const response = await fetch('/api/report-templates', {
|
||||
const resp = await fetch('/api/report-templates', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(templateData)
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
if (response.ok) {
|
||||
alert('Template saved successfully!');
|
||||
loadTemplates();
|
||||
} else {
|
||||
alert('Failed to save template');
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Error saving template: ' + error.message);
|
||||
}
|
||||
if (resp.ok) { alert('Template saved!'); loadTemplates(); }
|
||||
else alert('Failed to save template');
|
||||
} catch(e) { alert('Error: ' + e.message); }
|
||||
}
|
||||
|
||||
// ---- Time preset buttons ----
|
||||
|
||||
function setTimePreset(preset) {
|
||||
const startTimeInput = document.getElementById('start-time');
|
||||
const endTimeInput = document.getElementById('end-time');
|
||||
|
||||
document.querySelectorAll('.preset-btn').forEach(btn => {
|
||||
btn.classList.remove('bg-emerald-600', 'text-white');
|
||||
btn.classList.add('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
|
||||
});
|
||||
|
||||
switch (preset) {
|
||||
case 'night':
|
||||
startTimeInput.value = '19:00';
|
||||
endTimeInput.value = '07:00';
|
||||
break;
|
||||
case 'day':
|
||||
startTimeInput.value = '07:00';
|
||||
endTimeInput.value = '19:00';
|
||||
break;
|
||||
case 'all':
|
||||
startTimeInput.value = '';
|
||||
endTimeInput.value = '';
|
||||
break;
|
||||
case 'custom':
|
||||
break;
|
||||
}
|
||||
|
||||
const activeBtn = document.querySelector(`[data-preset="${preset}"]`);
|
||||
if (activeBtn) {
|
||||
activeBtn.classList.remove('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
|
||||
activeBtn.classList.add('bg-emerald-600', 'text-white');
|
||||
}
|
||||
}
|
||||
|
||||
function updatePresetButtons() {
|
||||
const startTime = document.getElementById('start-time').value;
|
||||
const endTime = document.getElementById('end-time').value;
|
||||
|
||||
document.querySelectorAll('.preset-btn').forEach(btn => {
|
||||
btn.classList.remove('bg-emerald-600', 'text-white');
|
||||
btn.classList.add('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
|
||||
});
|
||||
|
||||
let preset = 'custom';
|
||||
if (startTime === '19:00' && endTime === '07:00') preset = 'night';
|
||||
else if (startTime === '07:00' && endTime === '19:00') preset = 'day';
|
||||
else if (!startTime && !endTime) preset = 'all';
|
||||
|
||||
const activeBtn = document.querySelector(`[data-preset="${preset}"]`);
|
||||
if (activeBtn) {
|
||||
activeBtn.classList.remove('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
|
||||
activeBtn.classList.add('bg-emerald-600', 'text-white');
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Location checkboxes ----
|
||||
|
||||
function updateSelectedCount() {
|
||||
const checked = document.querySelectorAll('input[name="location"]:checked').length;
|
||||
document.getElementById('selected-count').textContent = checked;
|
||||
document.getElementById('preview-btn').disabled = checked === 0;
|
||||
}
|
||||
|
||||
function selectAll() {
|
||||
document.querySelectorAll('input[name="location"]').forEach(cb => cb.checked = true);
|
||||
updateSelectedCount();
|
||||
}
|
||||
|
||||
function deselectAll() {
|
||||
document.querySelectorAll('input[name="location"]').forEach(cb => cb.checked = false);
|
||||
updateSelectedCount();
|
||||
}
|
||||
|
||||
function getCheckedLocations() {
|
||||
return Array.from(document.querySelectorAll('input[name="location"]:checked')).map(cb => cb.value);
|
||||
}
|
||||
|
||||
// ---- Navigate to preview ----
|
||||
// ── Navigate to preview ───────────────────────────────────────────
|
||||
|
||||
function gotoPreview() {
|
||||
const checked = getCheckedLocations();
|
||||
const checked = Array.from(document.querySelectorAll('.session-cb:checked')).map(cb => cb.value);
|
||||
if (checked.length === 0) {
|
||||
alert('Please select at least one location.');
|
||||
alert('Please select at least one session.');
|
||||
return;
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({
|
||||
report_title: document.getElementById('report-title').value || 'Background Noise Study',
|
||||
project_name: document.getElementById('report-project').value || '',
|
||||
client_name: document.getElementById('report-client').value || '',
|
||||
start_time: document.getElementById('start-time').value || '',
|
||||
end_time: document.getElementById('end-time').value || '',
|
||||
start_date: document.getElementById('start-date').value || '',
|
||||
end_date: document.getElementById('end-date').value || '',
|
||||
enabled_locations: checked.join(','),
|
||||
report_title: document.getElementById('report-title').value || 'Background Noise Study',
|
||||
project_name: document.getElementById('report-project').value || '',
|
||||
client_name: document.getElementById('report-client').value || '',
|
||||
selected_sessions: checked.join(','),
|
||||
});
|
||||
|
||||
window.location.href = `/api/projects/{{ project_id }}/combined-report-preview?${params.toString()}`;
|
||||
window.location.href = `/api/projects/${PROJECT_ID}/combined-report-preview?${params.toString()}`;
|
||||
}
|
||||
|
||||
// ---- Init ----
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// ── Init ─────────────────────────────────────────────────────────
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
updateSelectionStats();
|
||||
loadTemplates();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,79 +1,149 @@
|
||||
<!-- Monitoring Sessions List -->
|
||||
{% if sessions %}
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-3">
|
||||
{% for item in sessions %}
|
||||
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
{% set s = item.session %}
|
||||
{% set loc = item.location %}
|
||||
{% set unit = item.unit %}
|
||||
|
||||
{# Period display maps #}
|
||||
{% set period_labels = {
|
||||
'weekday_day': 'Weekday Day',
|
||||
'weekday_night': 'Weekday Night',
|
||||
'weekend_day': 'Weekend Day',
|
||||
'weekend_night': 'Weekend Night',
|
||||
} %}
|
||||
{% set period_colors = {
|
||||
'weekday_day': 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
|
||||
'weekday_night': 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300',
|
||||
'weekend_day': 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
|
||||
'weekend_night': 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
|
||||
} %}
|
||||
|
||||
<div class="border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-slate-800 hover:border-gray-300 dark:hover:border-gray-600 transition-colors"
|
||||
id="session-card-{{ s.id }}">
|
||||
<div class="flex items-start justify-between gap-3 p-4 pb-3">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<h4 class="font-semibold text-gray-900 dark:text-white">
|
||||
Session {{ item.session.id[:8] }}...
|
||||
</h4>
|
||||
{% if item.session.status == 'recording' %}
|
||||
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 rounded-full flex items-center">
|
||||
<span class="w-2 h-2 bg-red-500 rounded-full mr-1.5 animate-pulse"></span>
|
||||
Recording
|
||||
</span>
|
||||
{% elif item.session.status == 'completed' %}
|
||||
<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 rounded-full">
|
||||
Completed
|
||||
</span>
|
||||
{% elif item.session.status == 'paused' %}
|
||||
<span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 rounded-full">
|
||||
Paused
|
||||
</span>
|
||||
{% elif item.session.status == 'failed' %}
|
||||
<span class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 rounded-full">
|
||||
Failed
|
||||
|
||||
<!-- Label + badges -->
|
||||
<div class="flex flex-wrap items-center gap-2 mb-2">
|
||||
<span id="label-display-{{ s.id }}"
|
||||
class="font-semibold text-gray-900 dark:text-white text-sm cursor-pointer hover:text-seismo-orange"
|
||||
title="Click to edit label"
|
||||
onclick="startEditLabel('{{ s.id }}')">
|
||||
{{ s.session_label or ('Session ' + s.id[:8] + '…') }}
|
||||
</span>
|
||||
<input id="label-input-{{ s.id }}"
|
||||
class="hidden text-sm font-semibold bg-transparent border-b border-seismo-orange text-gray-900 dark:text-white focus:outline-none min-w-[180px]"
|
||||
value="{{ s.session_label or '' }}"
|
||||
onblur="saveLabel('{{ s.id }}')"
|
||||
onkeydown="if(event.key==='Enter'){saveLabel('{{ s.id }}');}if(event.key==='Escape'){cancelEditLabel('{{ s.id }}');}">
|
||||
|
||||
{% if s.status == 'recording' %}
|
||||
<span class="px-2 py-0.5 text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 rounded-full flex items-center gap-1">
|
||||
<span class="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse"></span>Recording
|
||||
</span>
|
||||
{% elif s.status == 'completed' %}
|
||||
<span class="px-2 py-0.5 text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 rounded-full">Completed</span>
|
||||
{% elif s.status == 'failed' %}
|
||||
<span class="px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400 rounded-full">Failed</span>
|
||||
{% endif %}
|
||||
|
||||
<!-- Period type badge (click to change) -->
|
||||
<div class="relative" id="period-wrap-{{ s.id }}">
|
||||
<button onclick="togglePeriodMenu('{{ s.id }}')"
|
||||
id="period-badge-{{ s.id }}"
|
||||
class="px-2 py-0.5 text-xs font-medium rounded-full flex items-center gap-1 transition-colors {{ period_colors.get(s.period_type, 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400') }}"
|
||||
title="Click to change period type">
|
||||
<span id="period-label-{{ s.id }}">{{ period_labels.get(s.period_type, 'Set period') }}</span>
|
||||
<svg class="w-3 h-3 opacity-60 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div id="period-menu-{{ s.id }}"
|
||||
class="hidden absolute left-0 top-full mt-1 z-20 bg-white dark:bg-slate-700 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg min-w-[160px] py-1">
|
||||
{% for pt, pt_label in [('weekday_day','Weekday Day'),('weekday_night','Weekday Night'),('weekend_day','Weekend Day'),('weekend_night','Weekend Night')] %}
|
||||
<button onclick="setPeriodType('{{ s.id }}', '{{ pt }}')"
|
||||
class="w-full text-left px-3 py-1.5 text-xs hover:bg-gray-100 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-300 {% if s.period_type == pt %}font-bold{% endif %}">
|
||||
{{ pt_label }}
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3 text-sm text-gray-600 dark:text-gray-400">
|
||||
{% if item.unit %}
|
||||
<div>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-500">Unit:</span>
|
||||
<a href="/slm/{{ item.unit.id }}?from_project={{ project_id }}" class="text-seismo-orange hover:text-seismo-navy font-medium ml-1">
|
||||
{{ item.unit.id }}
|
||||
</a>
|
||||
<!-- Info grid -->
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{% if loc %}
|
||||
<div class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5 shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<span class="font-medium text-gray-700 dark:text-gray-300">{{ loc.name }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div>
|
||||
<span class="text-xs text-gray-500">Started:</span>
|
||||
<span class="ml-1">{{ item.session.started_at|local_datetime if item.session.started_at else 'N/A' }}</span>
|
||||
</div>
|
||||
|
||||
{% if item.session.stopped_at %}
|
||||
<div>
|
||||
<span class="text-xs text-gray-500">Ended:</span>
|
||||
<span class="ml-1">{{ item.session.stopped_at|local_datetime }}</span>
|
||||
{% if s.started_at %}
|
||||
<div class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5 shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
<span>{{ s.started_at|local_datetime }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if item.session.duration_seconds %}
|
||||
<div>
|
||||
<span class="text-xs text-gray-500">Duration:</span>
|
||||
<span class="ml-1">{{ (item.session.duration_seconds // 3600) }}h {{ ((item.session.duration_seconds % 3600) // 60) }}m</span>
|
||||
{% if s.stopped_at %}
|
||||
<div class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5 shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span>Ended {{ s.stopped_at|local_datetime }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if s.duration_seconds %}
|
||||
<div class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5 shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span>{{ (s.duration_seconds // 3600) }}h {{ ((s.duration_seconds % 3600) // 60) }}m</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if unit %}
|
||||
<div class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5 shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2v-4M9 21H5a2 2 0 01-2-2v-4m0 0h18"></path>
|
||||
</svg>
|
||||
<a href="/slm/{{ unit.id }}?from_project={{ project_id }}"
|
||||
class="text-seismo-orange hover:underline font-medium">{{ unit.id }}</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if s.device_model %}
|
||||
<div class="flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5 shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
|
||||
</svg>
|
||||
<span>{{ s.device_model }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if item.session.notes %}
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
|
||||
{{ item.session.notes }}
|
||||
</p>
|
||||
{% if s.notes %}
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500 mt-2 italic">{{ s.notes }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
{% if item.session.status == 'recording' %}
|
||||
<button onclick="stopRecording('{{ item.session.id }}')"
|
||||
class="px-3 py-1 text-xs bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
|
||||
Stop
|
||||
</button>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
{% if s.status == 'recording' %}
|
||||
<button onclick="stopRecording('{{ s.id }}')"
|
||||
class="px-3 py-1 text-xs bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
|
||||
Stop
|
||||
</button>
|
||||
{% endif %}
|
||||
<button onclick="viewSession('{{ item.session.id }}')"
|
||||
<button onclick="viewSession('{{ s.id }}')"
|
||||
class="px-3 py-1 text-xs bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
|
||||
Details
|
||||
</button>
|
||||
@@ -84,24 +154,107 @@
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-12">
|
||||
<svg class="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"></path>
|
||||
</svg>
|
||||
<p class="text-gray-500 dark:text-gray-400 mb-2">No monitoring sessions yet</p>
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500">Schedule a session to get started</p>
|
||||
<p class="text-gray-500 dark:text-gray-400 mb-1">No monitoring sessions yet</p>
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500">Upload data to create sessions</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
const PERIOD_COLORS = {
|
||||
weekday_day: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
|
||||
weekday_night: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300',
|
||||
weekend_day: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
|
||||
weekend_night: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
|
||||
};
|
||||
const PERIOD_LABELS = {
|
||||
weekday_day: 'Weekday Day',
|
||||
weekday_night: 'Weekday Night',
|
||||
weekend_day: 'Weekend Day',
|
||||
weekend_night: 'Weekend Night',
|
||||
};
|
||||
const FALLBACK_COLORS = ['bg-gray-100','text-gray-500','dark:bg-gray-700','dark:text-gray-400'];
|
||||
const ALL_BADGE_COLORS = [...new Set([
|
||||
...FALLBACK_COLORS,
|
||||
...Object.values(PERIOD_COLORS).flatMap(s => s.split(' '))
|
||||
])];
|
||||
|
||||
function togglePeriodMenu(sessionId) {
|
||||
const menu = document.getElementById('period-menu-' + sessionId);
|
||||
document.querySelectorAll('[id^="period-menu-"]').forEach(m => {
|
||||
if (m.id !== 'period-menu-' + sessionId) m.classList.add('hidden');
|
||||
});
|
||||
menu.classList.toggle('hidden');
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('[id^="period-wrap-"]')) {
|
||||
document.querySelectorAll('[id^="period-menu-"]').forEach(m => m.classList.add('hidden'));
|
||||
}
|
||||
});
|
||||
|
||||
async function setPeriodType(sessionId, periodType) {
|
||||
document.getElementById('period-menu-' + sessionId).classList.add('hidden');
|
||||
const badge = document.getElementById('period-badge-' + sessionId);
|
||||
badge.disabled = true;
|
||||
try {
|
||||
const resp = await fetch(`/api/projects/{{ project_id }}/sessions/${sessionId}`, {
|
||||
method: 'PATCH',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({period_type: periodType}),
|
||||
});
|
||||
if (!resp.ok) throw new Error(await resp.text());
|
||||
ALL_BADGE_COLORS.forEach(c => badge.classList.remove(c));
|
||||
badge.classList.add(...(PERIOD_COLORS[periodType] || FALLBACK_COLORS.join(' ')).split(' ').filter(Boolean));
|
||||
document.getElementById('period-label-' + sessionId).textContent = PERIOD_LABELS[periodType] || periodType;
|
||||
} catch(err) {
|
||||
alert('Failed to update period type: ' + err.message);
|
||||
} finally {
|
||||
badge.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function startEditLabel(sessionId) {
|
||||
document.getElementById('label-display-' + sessionId).classList.add('hidden');
|
||||
const input = document.getElementById('label-input-' + sessionId);
|
||||
input.classList.remove('hidden');
|
||||
input.focus();
|
||||
input.select();
|
||||
}
|
||||
|
||||
function cancelEditLabel(sessionId) {
|
||||
document.getElementById('label-input-' + sessionId).classList.add('hidden');
|
||||
document.getElementById('label-display-' + sessionId).classList.remove('hidden');
|
||||
}
|
||||
|
||||
async function saveLabel(sessionId) {
|
||||
const display = document.getElementById('label-display-' + sessionId);
|
||||
const input = document.getElementById('label-input-' + sessionId);
|
||||
const newLabel = input.value.trim();
|
||||
try {
|
||||
const resp = await fetch(`/api/projects/{{ project_id }}/sessions/${sessionId}`, {
|
||||
method: 'PATCH',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({session_label: newLabel}),
|
||||
});
|
||||
if (!resp.ok) throw new Error(await resp.text());
|
||||
display.textContent = newLabel || ('Session ' + sessionId.slice(0, 8) + '…');
|
||||
} catch(err) {
|
||||
alert('Failed to save label: ' + err.message);
|
||||
} finally {
|
||||
input.classList.add('hidden');
|
||||
display.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function viewSession(sessionId) {
|
||||
// TODO: Implement session detail modal or page
|
||||
alert('Session details coming soon: ' + sessionId);
|
||||
}
|
||||
|
||||
function stopRecording(sessionId) {
|
||||
if (!confirm('Stop this monitoring session?')) return;
|
||||
|
||||
// TODO: Implement stop recording API call
|
||||
alert('Stop recording API coming soon for session: ' + sessionId);
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user