serversdown
ceb893a54c
Sessions could only be tagged day or night (weekday/weekend). 24/7 continuous
jobs had no fitting period type. Add "24-Hour" (full_24h) — a single full-day
period covering day + night.
UI (session_list.html):
- Full-width "24-Hour" button under the WD/WE x Day/Night grid; teal badge.
- Selecting it clears + disables the hour inputs (no window); reopening an
existing 24-Hour session opens with hours disabled. Badge current-period
kept in sync after save.
Backend (projects.py):
- full_24h added to VALID_PERIOD_TYPES and the session-label maps
("... - 24-Hour"). Operator-set only; never auto-derived.
- Combined report: include ALL rows for a 24-hour session (no day/night
window filter) and split them by hour into the three non-overlapping
buckets — Daytime 7-18:59, Evening 19-21:59, Nighttime 22:00-06:59. Empty
period columns are dropped downstream, so it shows whatever periods have data.
Scoped to the combined-report path; the older per-session single report still
uses the fixed Evening/Nighttime layout.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
468 lines
26 KiB
HTML
468 lines
26 KiB
HTML
<!-- Monitoring Sessions List -->
|
||
{% if sessions %}
|
||
<div class="space-y-3">
|
||
{% for item in sessions %}
|
||
{% set s = item.session %}
|
||
{% set loc = item.location %}
|
||
{% set unit = item.unit %}
|
||
{% set effective_range = item.effective_range %}
|
||
|
||
{# Period display maps #}
|
||
{% set period_labels = {
|
||
'weekday_day': 'Weekday Day',
|
||
'weekday_night': 'Weekday Night',
|
||
'weekend_day': 'Weekend Day',
|
||
'weekend_night': 'Weekend Night',
|
||
'full_24h': '24-Hour',
|
||
} %}
|
||
{% 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',
|
||
'full_24h': 'bg-teal-100 text-teal-800 dark:bg-teal-900/30 dark:text-teal-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">
|
||
|
||
<!-- 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 open hour editor) -->
|
||
<div class="relative" id="period-wrap-{{ s.id }}">
|
||
<button onclick="openPeriodEditor('{{ s.id }}')"
|
||
id="period-badge-{{ s.id }}"
|
||
data-current-period="{{ s.period_type or '' }}"
|
||
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 edit period type and hours">
|
||
<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>
|
||
|
||
<!-- Period editor panel -->
|
||
<div id="period-editor-{{ 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 w-64 p-3 space-y-3">
|
||
|
||
<!-- Period type selector -->
|
||
<div>
|
||
<label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Period Type</label>
|
||
<div class="grid grid-cols-2 gap-1">
|
||
{% for pt, pt_label in [('weekday_day','WD Day'),('weekday_night','WD Night'),('weekend_day','WE Day'),('weekend_night','WE Night')] %}
|
||
<button onclick="selectPeriodType('{{ s.id }}', '{{ pt }}')"
|
||
id="pt-btn-{{ s.id }}-{{ pt }}"
|
||
class="period-type-btn text-xs py-1 px-2 rounded border transition-colors
|
||
{% if s.period_type == pt %}border-seismo-orange bg-orange-50 text-seismo-orange dark:bg-orange-900/20{% else %}border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-gray-400{% endif %}">
|
||
{{ pt_label }}
|
||
</button>
|
||
{% endfor %}
|
||
<button onclick="selectPeriodType('{{ s.id }}', 'full_24h')"
|
||
id="pt-btn-{{ s.id }}-full_24h"
|
||
class="period-type-btn col-span-2 text-xs py-1 px-2 rounded border transition-colors
|
||
{% if s.period_type == 'full_24h' %}border-seismo-orange bg-orange-50 text-seismo-orange dark:bg-orange-900/20{% else %}border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-gray-400{% endif %}">
|
||
24-Hour
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hour inputs -->
|
||
<div class="grid grid-cols-2 gap-2">
|
||
<div>
|
||
<label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Start Hour (0–23)</label>
|
||
<input type="number" min="0" max="23"
|
||
id="period-start-hr-{{ s.id }}"
|
||
value="{{ s.period_start_hour if s.period_start_hour is not none else '' }}"
|
||
placeholder="e.g. 19"
|
||
class="w-full text-xs bg-gray-50 dark:bg-slate-600 border border-gray-200 dark:border-gray-500 rounded px-2 py-1 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-seismo-orange">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">End Hour (0–23)</label>
|
||
<input type="number" min="0" max="23"
|
||
id="period-end-hr-{{ s.id }}"
|
||
value="{{ s.period_end_hour if s.period_end_hour is not none else '' }}"
|
||
placeholder="e.g. 7"
|
||
class="w-full text-xs bg-gray-50 dark:bg-slate-600 border border-gray-200 dark:border-gray-500 rounded px-2 py-1 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-seismo-orange">
|
||
</div>
|
||
</div>
|
||
<p class="text-xs text-gray-400 dark:text-gray-500">Day: 7→19 · Night: 19→7 · Customize as needed</p>
|
||
|
||
<!-- Actions -->
|
||
<div class="flex gap-2 pt-1">
|
||
<button onclick="savePeriodEditor('{{ s.id }}')"
|
||
class="flex-1 text-xs py-1 bg-seismo-orange text-white rounded hover:bg-orange-600 transition-colors">
|
||
Save
|
||
</button>
|
||
<button onclick="closePeriodEditor('{{ s.id }}')"
|
||
class="text-xs py-1 px-2 border border-gray-200 dark:border-gray-600 rounded text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-600 transition-colors">
|
||
Cancel
|
||
</button>
|
||
<button onclick="clearPeriodEditor('{{ s.id }}')"
|
||
class="text-xs py-1 px-2 border border-gray-200 dark:border-gray-600 rounded text-gray-500 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-slate-600 transition-colors"
|
||
title="Clear period type and hours">
|
||
Clear
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 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 %}
|
||
|
||
{% 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 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>
|
||
|
||
<!-- Effective window (when period hours are set) -->
|
||
{% if effective_range %}
|
||
<div class="flex items-center gap-1 mt-1.5 text-xs text-indigo-600 dark:text-indigo-400">
|
||
<svg class="w-3.5 h-3.5 shrink-0" 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 id="effective-range-{{ s.id }}">Effective: {{ effective_range }}</span>
|
||
</div>
|
||
{% else %}
|
||
<div class="hidden text-xs text-indigo-600 dark:text-indigo-400 mt-1.5"
|
||
id="effective-range-{{ s.id }}"></div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<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('{{ 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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<div class="text-center py-12">
|
||
<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-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 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',
|
||
full_24h: 'bg-teal-100 text-teal-800 dark:bg-teal-900/30 dark:text-teal-300',
|
||
};
|
||
const PERIOD_LABELS = {
|
||
weekday_day: 'Weekday Day',
|
||
weekday_night: 'Weekday Night',
|
||
weekend_day: 'Weekend Day',
|
||
weekend_night: 'Weekend Night',
|
||
full_24h: '24-Hour',
|
||
};
|
||
// Default hours for each period type. full_24h has no window (the report splits
|
||
// its rows by hour), so its hour inputs are cleared + disabled in the editor.
|
||
const PERIOD_DEFAULT_HOURS = {
|
||
weekday_day: {start: 7, end: 19},
|
||
weekday_night: {start: 19, end: 7},
|
||
weekend_day: {start: 7, end: 19},
|
||
weekend_night: {start: 19, end: 7},
|
||
};
|
||
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(' '))
|
||
])];
|
||
|
||
// Track which period type is selected in the editor before saving
|
||
const _editorState = {};
|
||
|
||
// ---- Period editor ----
|
||
|
||
function openPeriodEditor(sessionId) {
|
||
// Close all other editors first
|
||
document.querySelectorAll('[id^="period-editor-"]').forEach(el => {
|
||
if (el.id !== 'period-editor-' + sessionId) el.classList.add('hidden');
|
||
});
|
||
document.getElementById('period-editor-' + sessionId).classList.toggle('hidden');
|
||
|
||
// Reflect the current period type's hour-input state on open (24-Hour
|
||
// has no window, so its hour inputs open disabled).
|
||
const cur = document.getElementById('period-badge-' + sessionId)?.dataset?.currentPeriod;
|
||
const sh = document.getElementById('period-start-hr-' + sessionId);
|
||
const eh = document.getElementById('period-end-hr-' + sessionId);
|
||
const disable = cur === 'full_24h';
|
||
[sh, eh].forEach(el => {
|
||
if (!el) return;
|
||
el.disabled = disable;
|
||
el.classList.toggle('opacity-50', disable);
|
||
el.classList.toggle('cursor-not-allowed', disable);
|
||
if (disable) el.placeholder = 'n/a';
|
||
});
|
||
}
|
||
|
||
function closePeriodEditor(sessionId) {
|
||
document.getElementById('period-editor-' + sessionId).classList.add('hidden');
|
||
delete _editorState[sessionId];
|
||
}
|
||
|
||
function selectPeriodType(sessionId, pt) {
|
||
_editorState[sessionId] = pt;
|
||
// Highlight selected button
|
||
document.querySelectorAll(`[id^="pt-btn-${sessionId}-"]`).forEach(btn => {
|
||
const isSelected = btn.id === `pt-btn-${sessionId}-${pt}`;
|
||
btn.classList.toggle('border-seismo-orange', isSelected);
|
||
btn.classList.toggle('bg-orange-50', isSelected);
|
||
btn.classList.toggle('text-seismo-orange', isSelected);
|
||
btn.classList.toggle('dark:bg-orange-900/20', isSelected);
|
||
btn.classList.toggle('border-gray-200', !isSelected);
|
||
btn.classList.toggle('dark:border-gray-600', !isSelected);
|
||
btn.classList.toggle('text-gray-600', !isSelected);
|
||
btn.classList.toggle('dark:text-gray-400', !isSelected);
|
||
});
|
||
// Hour inputs: full_24h has no window — clear + disable them. Other types
|
||
// re-enable and fill their default window if empty.
|
||
const sh = document.getElementById('period-start-hr-' + sessionId);
|
||
const eh = document.getElementById('period-end-hr-' + sessionId);
|
||
if (pt === 'full_24h') {
|
||
[sh, eh].forEach(el => {
|
||
if (!el) return;
|
||
el.value = '';
|
||
el.disabled = true;
|
||
el.classList.add('opacity-50', 'cursor-not-allowed');
|
||
el.placeholder = 'n/a';
|
||
});
|
||
} else {
|
||
const defaults = PERIOD_DEFAULT_HOURS[pt];
|
||
[sh, eh].forEach(el => {
|
||
if (!el) return;
|
||
el.disabled = false;
|
||
el.classList.remove('opacity-50', 'cursor-not-allowed');
|
||
});
|
||
if (sh) sh.placeholder = 'e.g. 19';
|
||
if (eh) eh.placeholder = 'e.g. 7';
|
||
if (defaults) {
|
||
if (sh && !sh.value) sh.value = defaults.start;
|
||
if (eh && !eh.value) eh.value = defaults.end;
|
||
}
|
||
}
|
||
}
|
||
|
||
async function savePeriodEditor(sessionId) {
|
||
const pt = _editorState[sessionId] || document.getElementById('period-badge-' + sessionId)
|
||
?.dataset?.currentPeriod || null;
|
||
const shInput = document.getElementById('period-start-hr-' + sessionId);
|
||
const ehInput = document.getElementById('period-end-hr-' + sessionId);
|
||
|
||
const payload = {};
|
||
if (pt !== undefined) payload.period_type = pt || null;
|
||
payload.period_start_hour = shInput?.value !== '' ? parseInt(shInput.value, 10) : null;
|
||
payload.period_end_hour = ehInput?.value !== '' ? parseInt(ehInput.value, 10) : null;
|
||
|
||
try {
|
||
const resp = await fetch(`/api/projects/${PROJECT_ID}/sessions/${sessionId}`, {
|
||
method: 'PATCH',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify(payload),
|
||
});
|
||
if (!resp.ok) throw new Error(await resp.text());
|
||
const result = await resp.json();
|
||
|
||
// Update badge
|
||
const badge = document.getElementById('period-badge-' + sessionId);
|
||
const label = document.getElementById('period-label-' + sessionId);
|
||
const newPt = result.period_type;
|
||
badge.dataset.currentPeriod = newPt || '';
|
||
ALL_BADGE_COLORS.forEach(c => badge.classList.remove(c));
|
||
if (newPt && PERIOD_COLORS[newPt]) {
|
||
badge.classList.add(...PERIOD_COLORS[newPt].split(' ').filter(Boolean));
|
||
if (label) label.textContent = PERIOD_LABELS[newPt];
|
||
} else {
|
||
badge.classList.add(...FALLBACK_COLORS);
|
||
if (label) label.textContent = 'Set period';
|
||
}
|
||
|
||
// Update effective range display
|
||
_updateEffectiveRange(sessionId, result.period_start_hour, result.period_end_hour);
|
||
|
||
closePeriodEditor(sessionId);
|
||
} catch (err) {
|
||
alert('Failed to save period: ' + err.message);
|
||
}
|
||
}
|
||
|
||
async function clearPeriodEditor(sessionId) {
|
||
const shInput = document.getElementById('period-start-hr-' + sessionId);
|
||
const ehInput = document.getElementById('period-end-hr-' + sessionId);
|
||
if (shInput) shInput.value = '';
|
||
if (ehInput) ehInput.value = '';
|
||
_editorState[sessionId] = null;
|
||
|
||
// Reset period type button highlights
|
||
document.querySelectorAll(`[id^="pt-btn-${sessionId}-"]`).forEach(btn => {
|
||
btn.classList.remove('border-seismo-orange','bg-orange-50','text-seismo-orange','dark:bg-orange-900/20');
|
||
btn.classList.add('border-gray-200','dark:border-gray-600','text-gray-600','dark:text-gray-400');
|
||
});
|
||
}
|
||
|
||
// ---- Effective range helper ----
|
||
|
||
function _updateEffectiveRange(sessionId, startHour, endHour) {
|
||
const el = document.getElementById('effective-range-' + sessionId);
|
||
if (!el) return;
|
||
if (startHour == null || endHour == null) {
|
||
el.textContent = '';
|
||
el.classList.add('hidden');
|
||
return;
|
||
}
|
||
function _fmt(h) {
|
||
const ampm = h < 12 ? 'AM' : 'PM';
|
||
const h12 = h % 12 || 12;
|
||
return `${h12}:00 ${ampm}`;
|
||
}
|
||
// We don't have the session start date in JS so just show the hours pattern
|
||
el.textContent = `Effective window: ${_fmt(startHour)} → ${_fmt(endHour)}`;
|
||
el.classList.remove('hidden');
|
||
}
|
||
|
||
// ---- Close editors on outside click ----
|
||
document.addEventListener('click', function(e) {
|
||
if (!e.target.closest('[id^="period-wrap-"]')) {
|
||
document.querySelectorAll('[id^="period-editor-"]').forEach(m => m.classList.add('hidden'));
|
||
}
|
||
});
|
||
|
||
// ---- Label editing ----
|
||
|
||
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');
|
||
}
|
||
}
|
||
|
||
// ---- Session details ----
|
||
|
||
function viewSession(sessionId) {
|
||
window.location.href = `/api/projects/${PROJECT_ID}/sessions/${sessionId}/detail`;
|
||
}
|
||
|
||
function stopRecording(sessionId) {
|
||
if (!confirm('Stop this monitoring session?')) return;
|
||
alert('Stop recording API coming soon for session: ' + sessionId);
|
||
}
|
||
</script>
|