62 lines
4.6 KiB
JavaScript
62 lines
4.6 KiB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { useState } from 'react';
|
|
import { useSessions } from '../../hooks/useSleepSession';
|
|
import { Edit2, Check, X } from 'lucide-react';
|
|
function formatDateTime(isoString) {
|
|
const iso = isoString.endsWith('Z') ? isoString : isoString + 'Z';
|
|
const d = new Date(iso);
|
|
return d.toLocaleString('sv-SE', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false
|
|
}).replace(',', ' ');
|
|
}
|
|
function toDatetimeLocal(isoString) {
|
|
const iso = isoString.endsWith('Z') ? isoString : isoString + 'Z';
|
|
const d = new Date(iso);
|
|
const pad = (n) => n.toString().padStart(2, '0');
|
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
|
}
|
|
export function SessionList() {
|
|
const { sessions, isLoading, updateSession } = useSessions();
|
|
const [editingId, setEditingId] = useState(null);
|
|
const [editStart, setEditStart] = useState('');
|
|
const [editEnd, setEditEnd] = useState('');
|
|
if (isLoading)
|
|
return _jsx("div", { className: "text-center p-4", children: "Loading sessions..." });
|
|
if (!sessions.length)
|
|
return _jsx("div", { className: "text-center p-4 text-gray-500", children: "No sessions recorded." });
|
|
const handleSave = async (id) => {
|
|
try {
|
|
await updateSession({
|
|
sessionId: id,
|
|
payload: {
|
|
start_time: new Date(editStart).toISOString(),
|
|
end_time: editEnd ? new Date(editEnd).toISOString() : null,
|
|
}
|
|
});
|
|
setEditingId(null);
|
|
}
|
|
catch (err) {
|
|
console.error(err);
|
|
alert('Failed to update session');
|
|
}
|
|
};
|
|
const handleCancel = () => {
|
|
setEditingId(null);
|
|
};
|
|
const startEditing = (s) => {
|
|
setEditingId(s.id);
|
|
setEditStart(toDatetimeLocal(s.start_time));
|
|
setEditEnd(s.end_time ? toDatetimeLocal(s.end_time) : '');
|
|
};
|
|
return (_jsxs("div", { className: "bg-white p-4 rounded-xl shadow-sm border border-gray-200", children: [_jsx("h3", { className: "text-lg font-semibold mb-4 text-gray-800", children: "Sleep Sessions" }), _jsx("div", { className: "space-y-2", children: sessions.map((s) => (_jsx("div", { className: "border-b border-gray-100 last:border-0 pb-2", children: editingId === s.id ? (_jsxs("div", { className: "flex flex-col space-y-2 py-1", children: [_jsxs("div", { className: "grid grid-cols-1 gap-2 text-xs text-gray-500", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { children: "Start Time" }), _jsx("input", { type: "datetime-local", className: "border rounded px-1 py-0.5 text-sm text-black w-full", value: editStart, onChange: (e) => setEditStart(e.target.value) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { children: "End Time" }), _jsx("input", { type: "datetime-local", className: "border rounded px-1 py-0.5 text-sm text-black w-full", value: editEnd, onChange: (e) => setEditEnd(e.target.value) })] })] }), _jsxs("div", { className: "flex justify-end space-x-2", children: [_jsx("button", { onClick: handleCancel, className: "p-1 text-gray-500 hover:text-gray-700 transition-colors", title: "Cancel", children: _jsx(X, { size: 18 }) }), _jsx("button", { onClick: () => handleSave(s.id), className: "p-1 text-green-600 hover:text-green-700 transition-colors", title: "Save", children: _jsx(Check, { size: 18 }) })] })] })) : (_jsxs("div", { className: "flex justify-between items-center text-sm cursor-pointer hover:bg-gray-50 p-1 rounded transition-colors", onClick: () => startEditing(s), children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-gray-900 font-medium", children: formatDateTime(s.start_time) }), _jsx("span", { className: "text-gray-500 text-xs", children: s.end_time
|
|
? `${formatDateTime(s.start_time)} → ${formatDateTime(s.end_time)}`
|
|
: 'In progress' })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("span", { className: "text-blue-600 font-mono text-sm", children: s.end_time && s.start_time
|
|
? `${Math.round((new Date(s.end_time + 'Z').getTime() - new Date(s.start_time + 'Z').getTime()) / 60000)} min`
|
|
: '—' }), _jsx(Edit2, { size: 14, className: "text-gray-400" })] })] })) }, s.id))) })] }));
|
|
}
|