feat: add edit session times functionality with modal for monitoring sessions
This commit is contained in:
@@ -56,6 +56,15 @@
|
||||
{% else %}bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300{% endif %}">
|
||||
{{ session.status or 'unknown' }}
|
||||
</span>
|
||||
<!-- Edit Session Times -->
|
||||
<button onclick="event.stopPropagation(); openEditSessionModal('{{ session.id }}', '{{ session.started_at|local_datetime if session.started_at else '' }}', '{{ session.stopped_at|local_datetime if session.stopped_at else '' }}')"
|
||||
class="px-3 py-1 text-xs bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors flex items-center gap-1"
|
||||
title="Edit session times">
|
||||
<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
||||
</svg>
|
||||
Edit
|
||||
</button>
|
||||
<!-- Download All Files in Session -->
|
||||
<button onclick="event.stopPropagation(); downloadSessionFiles('{{ session.id }}')"
|
||||
class="px-3 py-1 text-xs bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors flex items-center gap-1"
|
||||
@@ -326,4 +335,74 @@ async function deleteSession(sessionId) {
|
||||
alert(`Error deleting session: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function openEditSessionModal(sessionId, startedAt, stoppedAt) {
|
||||
document.getElementById('editSessionId').value = sessionId;
|
||||
// local_datetime filter returns "YYYY-MM-DD HH:MM" — convert to "YYYY-MM-DDTHH:MM" for datetime-local input
|
||||
document.getElementById('editStartedAt').value = startedAt ? startedAt.replace(' ', 'T') : '';
|
||||
document.getElementById('editStoppedAt').value = stoppedAt ? stoppedAt.replace(' ', 'T') : '';
|
||||
document.getElementById('editSessionModal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closeEditSessionModal() {
|
||||
document.getElementById('editSessionModal').classList.add('hidden');
|
||||
}
|
||||
|
||||
async function saveSessionTimes() {
|
||||
const sessionId = document.getElementById('editSessionId').value;
|
||||
const startedAt = document.getElementById('editStartedAt').value;
|
||||
const stoppedAt = document.getElementById('editStoppedAt').value;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/projects/{{ project_id }}/sessions/${sessionId}`, {
|
||||
method: 'PATCH',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
started_at: startedAt || null,
|
||||
stopped_at: stoppedAt || null,
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
closeEditSessionModal();
|
||||
window.location.reload();
|
||||
} else {
|
||||
const data = await response.json();
|
||||
alert(`Failed to update session: ${data.detail || 'Unknown error'}`);
|
||||
}
|
||||
} catch (error) {
|
||||
alert(`Error updating session: ${error.message}`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Edit Session Times Modal -->
|
||||
<div id="editSessionModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 w-full max-w-sm mx-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Edit Session Times</h3>
|
||||
<input type="hidden" id="editSessionId">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Start Time</label>
|
||||
<input type="datetime-local" id="editStartedAt"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Stop Time</label>
|
||||
<input type="datetime-local" id="editStoppedAt"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-3 text-xs text-gray-500 dark:text-gray-400">Times are in your local timezone. The session label and period type will be updated automatically.</p>
|
||||
<div class="flex justify-end gap-3 mt-5">
|
||||
<button onclick="closeEditSessionModal()"
|
||||
class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
<button onclick="saveSessionTimes()"
|
||||
class="px-4 py-2 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user