sebastas/tally-counter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: add logging functionality for counter updates for incrementing on different dates (for stats)
Build and publish Docker image / build-and-push (release) Successful in 1m9s
Details

Browse Source
This commit is contained in:
sebastas
2026-08-25 13:58:29 +02:00
parent 3df1e8d7fa
commit eb71302e1c
3 changed files with 114 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/CounterDetailModal.tsx
+71 -1
View File
@@ -15,6 +15,7 @@ interface Props {
counterId: number | null;
cache?: Map<number, HistoryData>;
onClose: () => void;
onLog?: (counter: Counter) => void;
}
function toLocalDateStr(d: Date): string {
@@ -47,12 +48,18 @@ function computeLongestStreak(sortedDates: string[]): number {
return best;
}
export default function CounterDetailModal({ counterId, cache, onClose }: Props) {
export default function CounterDetailModal({ counterId, cache, onClose, onLog }: Props) {
const [data, setData] = useState<HistoryData | null>(null);
const [loading, setLoading] = useState(false);
const [logDate, setLogDate] = useState(() => { const d = new Date(); d.setDate(d.getDate() - 1); return toLocalDateStr(d); });
const [logging, setLogging] = useState(false);
const [logError, setLogError] = useState('');
useEffect(() => {
if (!counterId) return;
const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1);
setLogDate(toLocalDateStr(yesterday));
setLogError('');
const cached = cache?.get(counterId);
if (cached) { setData(cached); setLoading(false); return; }
setData(null);
@@ -70,6 +77,33 @@ export default function CounterDetailModal({ counterId, cache, onClose }: Props)
return () => window.removeEventListener('keydown', handler);
}, [counterId, onClose]);
async function handleLog(delta: number) {
if (!counterId || !logDate) return;
setLogging(true);
setLogError('');
try {
const res = await fetch(`/api/counters/${counterId}/log`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ date: logDate, delta }),
});
if (!res.ok) {
const body = await res.json();
setLogError(body.error ?? 'Failed to log entry');
return;
}
const updated: Counter = await res.json();
cache?.delete(counterId);
const histRes = await fetch(`/api/counters/${counterId}/history`);
const d: HistoryData = await histRes.json();
cache?.set(counterId, d);
setData(d);
onLog?.(updated);
} finally {
setLogging(false);
}
}
if (!counterId) return null;
const dateSet = new Set(data?.dailyActivity.map(d => d.date) ?? []);
@@ -165,6 +199,42 @@ export default function CounterDetailModal({ counterId, cache, onClose }: Props)
</div>
</>
)}
{/* Log past entry */}
<div className="border-t border-ctp-surface1 pt-4">
<h3 className="text-sm font-bold text-ctp-text mb-3">Log past entry</h3>
<div className="flex items-center gap-2 flex-wrap">
<input
type="date"
value={logDate}
max={toLocalDateStr(new Date())}
onChange={e => setLogDate(e.target.value)}
className="rounded-lg border border-ctp-surface1 bg-ctp-surface0 text-ctp-text px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ctp-mauve"
/>
<button
onClick={() => handleLog(-1)}
disabled={logging || !logDate || (data?.dailyActivity.find(d => d.date === logDate)?.value ?? 0) <= 0}
aria-label="Log decrement"
className="w-10 h-10 flex items-center justify-center rounded-xl bg-ctp-surface1 text-ctp-red hover:bg-ctp-red/20 active:bg-ctp-red/30 disabled:opacity-40 transition-colors"
>
<svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</button>
<button
onClick={() => handleLog(1)}
disabled={logging || !logDate}
aria-label="Log increment"
className="w-10 h-10 flex items-center justify-center rounded-xl bg-ctp-surface1 text-ctp-green hover:bg-ctp-green/20 active:bg-ctp-green/30 disabled:opacity-40 transition-colors"
>
<svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</button>
{logError && <p className="text-xs text-ctp-red">{logError}</p>}
</div>
</div>
</>
)}
</div>