394 lines
22 KiB
HTML
394 lines
22 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Combined Report Wizard - {{ project.name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="min-h-screen bg-gray-100 dark:bg-slate-900">
|
|
<!-- Header -->
|
|
<div class="bg-white dark:bg-slate-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Combined Report Wizard</h1>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ project.name }}</p>
|
|
</div>
|
|
<a href="/projects/{{ project_id }}"
|
|
class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-sm w-fit">
|
|
← Back to Project
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6">
|
|
|
|
<!-- Report Settings 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">Report Settings</h2>
|
|
|
|
<!-- Template Selection -->
|
|
<div class="flex items-end gap-2 mb-4">
|
|
<div class="flex-1">
|
|
<label for="template-select" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Load Template
|
|
</label>
|
|
<select id="template-select" onchange="applyTemplate()"
|
|
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">
|
|
<option value="">-- Select a template --</option>
|
|
</select>
|
|
</div>
|
|
<button type="button" onclick="saveAsTemplate()"
|
|
class="px-3 py-2 text-sm bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600"
|
|
title="Save current settings as template">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Report Title -->
|
|
<div class="mb-4">
|
|
<label for="report-title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Report Title
|
|
</label>
|
|
<input type="text" id="report-title" value="Background Noise Study"
|
|
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>
|
|
|
|
<!-- Project and Client -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="report-project" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Project Name
|
|
</label>
|
|
<input type="text" id="report-project" value="{{ project.name }}"
|
|
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="report-client" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Client Name
|
|
</label>
|
|
<input type="text" id="report-client" value="{{ project.client_name if project.client_name else '' }}"
|
|
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>
|
|
|
|
<!-- Sessions Card -->
|
|
<div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 overflow-hidden">
|
|
<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="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 %}
|
|
{% for loc in locations %}
|
|
{% 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 %}
|
|
{% else %}
|
|
<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="/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>
|
|
<button type="button" onclick="gotoPreview()" id="preview-btn"
|
|
{% if not locations %}disabled{% endif %}
|
|
class="w-full sm:w-auto px-6 py-2.5 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors text-sm font-medium flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
</svg>
|
|
Preview & Edit →
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const PROJECT_ID = '{{ project_id }}';
|
|
|
|
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 resp = await fetch('/api/report-templates?project_id=' + PROJECT_ID);
|
|
if (resp.ok) {
|
|
reportTemplates = await resp.json();
|
|
populateTemplateDropdown();
|
|
}
|
|
} 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(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 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 data = {
|
|
name,
|
|
project_id: PROJECT_ID,
|
|
report_title: document.getElementById('report-title').value || 'Background Noise Study',
|
|
};
|
|
try {
|
|
const resp = await fetch('/api/report-templates', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify(data),
|
|
});
|
|
if (resp.ok) { alert('Template saved!'); loadTemplates(); }
|
|
else alert('Failed to save template');
|
|
} catch(e) { alert('Error: ' + e.message); }
|
|
}
|
|
|
|
// ── Navigate to preview ───────────────────────────────────────────
|
|
|
|
function gotoPreview() {
|
|
const checked = Array.from(document.querySelectorAll('.session-cb:checked')).map(cb => cb.value);
|
|
if (checked.length === 0) {
|
|
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 || '',
|
|
selected_sessions: checked.join(','),
|
|
});
|
|
window.location.href = `/api/projects/${PROJECT_ID}/combined-report-preview?${params.toString()}`;
|
|
}
|
|
|
|
// ── Init ─────────────────────────────────────────────────────────
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateSelectionStats();
|
|
loadTemplates();
|
|
});
|
|
</script>
|
|
{% endblock %}
|