add habit tracking page with grid layout\
\ - Add HabitGrid component with a responsive calendar-style layout\\ - Support variable habit durations with period-based cell rendering\ - Add skeleton loading states for better UX during data fetching - Add CounterHabitButton component for cells with increment/decrement interactions\ - Create HabitCellContextMenu for period-based actions (reset, set values, fail) - Add HabitCreationForm for creating new habits\ - Add HabitActionMenu component for additional operations on habits (archive, delete, edit)\ - Add SetValueDialog component for editing the value of a cell
This commit is contained in:
hiperman
@@ -0,0 +1,192 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { HabitWithCompletions } from '$lib/context/habits.svelte';
|
||||||
|
import HabitGrid from './HabitGrid.svelte';
|
||||||
|
import HabitCreationForm from './HabitCreationForm.svelte';
|
||||||
|
import { setHabitService } from '$lib/context/habits.svelte';
|
||||||
|
|
||||||
|
// shadcn-svelte components
|
||||||
|
import { Button } from '$lib/components/ui/button';
|
||||||
|
import * as Card from '$lib/components/ui/card';
|
||||||
|
import { Separator } from '$lib/components/ui/separator';
|
||||||
|
import { Calendar } from '$lib/components/ui/calendar';
|
||||||
|
import * as Popover from '$lib/components/ui/popover';
|
||||||
|
import * as Dialog from '$lib/components/ui/dialog';
|
||||||
|
import { Alert, AlertDescription } from '$lib/components/ui/alert';
|
||||||
|
|
||||||
|
// Icons
|
||||||
|
import Plus from '@lucide/svelte/icons/plus';
|
||||||
|
import CalendarIcon from '@lucide/svelte/icons/calendar';
|
||||||
|
import RefreshCcw from '@lucide/svelte/icons/refresh-ccw';
|
||||||
|
import TrendingUp from '@lucide/svelte/icons/trending-up';
|
||||||
|
import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
|
||||||
|
import Eye from '@lucide/svelte/icons/eye';
|
||||||
|
import EyeOff from '@lucide/svelte/icons/eye-off';
|
||||||
|
|
||||||
|
import { today, getLocalTimeZone } from '@internationalized/date';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
|
let showCreateDialog = $state(false);
|
||||||
|
|
||||||
|
// Date selection state
|
||||||
|
let selectedDate = $state(today(getLocalTimeZone()));
|
||||||
|
let showCalendar = $state(false);
|
||||||
|
|
||||||
|
// Habit visibility toggle
|
||||||
|
let showInactiveHabits = $state(false);
|
||||||
|
|
||||||
|
// Create habit service instance - subscriptions will handle all data loading
|
||||||
|
const habitService = setHabitService('default-user');
|
||||||
|
|
||||||
|
// Simple loading state - just show skeleton briefly while subscriptions initialize
|
||||||
|
let loading = $state(true);
|
||||||
|
let error = $state<string | null>(null);
|
||||||
|
|
||||||
|
// Hide loading after a brief moment to let subscriptions initialize
|
||||||
|
onMount(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
loading = false;
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="w-full container mx-auto p-6 space-y-6">
|
||||||
|
<!-- Page Header -->
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-3xl font-bold tracking-tight text-foreground">Habits</h1>
|
||||||
|
<p class="text-muted-foreground">Track your daily habits and build better routines</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<!-- Date Selector -->
|
||||||
|
<Popover.Root bind:open={showCalendar}>
|
||||||
|
<Popover.Trigger>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
class="w-48 justify-start text-left font-normal"
|
||||||
|
>
|
||||||
|
<CalendarIcon class="mr-2 h-4 w-4" />
|
||||||
|
{selectedDate.toDate(getLocalTimeZone()).toLocaleDateString('en-US', {
|
||||||
|
weekday: 'short',
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric'
|
||||||
|
})}
|
||||||
|
</Button>
|
||||||
|
</Popover.Trigger>
|
||||||
|
<Popover.Content class="w-auto p-0" align="end">
|
||||||
|
<Calendar
|
||||||
|
type="single"
|
||||||
|
bind:value={selectedDate}
|
||||||
|
onValueChange={() => showCalendar = false}
|
||||||
|
class="rounded-md border shadow-sm"
|
||||||
|
/>
|
||||||
|
</Popover.Content>
|
||||||
|
</Popover.Root>
|
||||||
|
|
||||||
|
<!-- New Habit Button -->
|
||||||
|
<Dialog.Root bind:open={showCreateDialog}>
|
||||||
|
<Dialog.Trigger>
|
||||||
|
<Button class="gap-2">
|
||||||
|
<Plus class="h-4 w-4" />
|
||||||
|
New Habit
|
||||||
|
</Button>
|
||||||
|
</Dialog.Trigger>
|
||||||
|
<Dialog.Content class="sm:max-w-lg">
|
||||||
|
<HabitCreationForm
|
||||||
|
onHabitCreated={() => {
|
||||||
|
showCreateDialog = false;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Root>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
{#if loading}
|
||||||
|
<Card.Root class="min-h-96">
|
||||||
|
<Card.Header>
|
||||||
|
<Card.Title class="flex items-center gap-2">
|
||||||
|
<TrendingUp class="h-5 w-5" />
|
||||||
|
Habit Progress
|
||||||
|
</Card.Title>
|
||||||
|
<Card.Description>
|
||||||
|
Track your habits day by day. Click to mark as complete or update values.
|
||||||
|
</Card.Description>
|
||||||
|
</Card.Header>
|
||||||
|
<Card.Content>
|
||||||
|
<!-- Use HabitGrid component with skeleton mode -->
|
||||||
|
<HabitGrid bind:centerDate={selectedDate} skeleton={true} bind:showInactiveHabits />
|
||||||
|
</Card.Content>
|
||||||
|
</Card.Root>
|
||||||
|
{:else if error}
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<AlertTriangle class="h-4 w-4" />
|
||||||
|
<AlertDescription>
|
||||||
|
{error}
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
class="ml-3"
|
||||||
|
onclick={() => window.location.reload()}
|
||||||
|
>
|
||||||
|
<RefreshCcw class="h-4 w-4 mr-2" />
|
||||||
|
Retry
|
||||||
|
</Button>
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
{:else if habitService.habits.length === 0}
|
||||||
|
<Card.Root>
|
||||||
|
<Card.Content class="flex flex-col items-center justify-center py-16 text-center">
|
||||||
|
<div class="flex h-20 w-20 items-center justify-center rounded-full bg-muted mb-4">
|
||||||
|
<TrendingUp class="h-10 w-10 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-semibold mb-2">No habits yet</h3>
|
||||||
|
<p class="text-muted-foreground mb-6 max-w-sm">
|
||||||
|
Start building better routines by creating your first habit. Track daily activities and watch your progress grow.
|
||||||
|
</p>
|
||||||
|
<Button onclick={() => showCreateDialog = true} class="gap-2">
|
||||||
|
<Plus class="h-4 w-4" />
|
||||||
|
Create Your First Habit
|
||||||
|
</Button>
|
||||||
|
</Card.Content>
|
||||||
|
</Card.Root>
|
||||||
|
{:else}
|
||||||
|
<!-- Habit Grid -->
|
||||||
|
<Card.Root class="min-h-96">
|
||||||
|
<Card.Header>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<Card.Title class="flex items-center gap-2">
|
||||||
|
<TrendingUp class="h-5 w-5" />
|
||||||
|
Habit Progress
|
||||||
|
</Card.Title>
|
||||||
|
<Card.Description>
|
||||||
|
Track your habits day by day. Click to mark as complete or update values.
|
||||||
|
</Card.Description>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onclick={() => showInactiveHabits = !showInactiveHabits}
|
||||||
|
class="flex items-center gap-2"
|
||||||
|
>
|
||||||
|
{#if showInactiveHabits}
|
||||||
|
<EyeOff class="h-4 w-4" />
|
||||||
|
Hide Inactive
|
||||||
|
{:else}
|
||||||
|
<Eye class="h-4 w-4" />
|
||||||
|
Show Inactive
|
||||||
|
{/if}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Card.Header>
|
||||||
|
<Card.Content>
|
||||||
|
<HabitGrid bind:centerDate={selectedDate} bind:showInactiveHabits />
|
||||||
|
</Card.Content>
|
||||||
|
</Card.Root>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,200 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import Check from '@lucide/svelte/icons/check';
|
||||||
|
import { Confetti } from 'svelte-confetti';
|
||||||
|
import NumberFlow from '@number-flow/svelte';
|
||||||
|
import { browser } from '$app/environment';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import { cn } from '$lib/utils';
|
||||||
|
import { getHabitService } from '$lib/context/habits.svelte';
|
||||||
|
|
||||||
|
let {
|
||||||
|
habitId,
|
||||||
|
target = 1,
|
||||||
|
length = 1,
|
||||||
|
unit = '',
|
||||||
|
increment = 1,
|
||||||
|
count = 0,
|
||||||
|
date = new Date().toISOString().split('T')[0],
|
||||||
|
direction = 'end',
|
||||||
|
isToday = false,
|
||||||
|
isFailed = false,
|
||||||
|
isTruncatedLeft = false,
|
||||||
|
isTruncatedRight = false,
|
||||||
|
class: className = ''
|
||||||
|
}: {
|
||||||
|
update: Function;
|
||||||
|
habitId: string;
|
||||||
|
target?: number;
|
||||||
|
length?: number;
|
||||||
|
unit?: string;
|
||||||
|
increment?: number;
|
||||||
|
count?: number;
|
||||||
|
date?: string;
|
||||||
|
direction?: 'start' | 'end';
|
||||||
|
isToday?: boolean;
|
||||||
|
isFailed?: boolean;
|
||||||
|
isTruncatedLeft?: boolean;
|
||||||
|
isTruncatedRight?: boolean;
|
||||||
|
class?: string;
|
||||||
|
} = $props();
|
||||||
|
|
||||||
|
const habitService = getHabitService();
|
||||||
|
|
||||||
|
function getDisplayUnit(unit: string): { text: string; isShort: boolean } {
|
||||||
|
const trimmed = unit.trim().toLowerCase();
|
||||||
|
|
||||||
|
// If no unit, return empty
|
||||||
|
if (!trimmed) return { text: '', isShort: true };
|
||||||
|
|
||||||
|
// Common abbreviations for longer units
|
||||||
|
const abbreviations: Record<string, string> = {
|
||||||
|
'minutes': 'min',
|
||||||
|
'glasses': 'gl',
|
||||||
|
'pages': 'pg',
|
||||||
|
'exercises': 'ex',
|
||||||
|
'repetitions': 'rep',
|
||||||
|
'kilometers': 'km',
|
||||||
|
'calories': 'cal',
|
||||||
|
'pounds': 'lbs',
|
||||||
|
'kilograms': 'kg'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Use abbreviation if available
|
||||||
|
const displayText = abbreviations[trimmed] || trimmed;
|
||||||
|
|
||||||
|
// Determine layout based on length
|
||||||
|
// 1 letter: right side
|
||||||
|
// 2-3 letters: bottom
|
||||||
|
// 4+ letters: take first letter and put on right
|
||||||
|
if (displayText.length === 1) {
|
||||||
|
return { text: displayText, isShort: true };
|
||||||
|
} else if (displayText.length <= 3) {
|
||||||
|
return { text: displayText, isShort: false };
|
||||||
|
} else {
|
||||||
|
return { text: displayText.charAt(0), isShort: true };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const displayUnit = $derived(getDisplayUnit(unit));
|
||||||
|
|
||||||
|
let checked = $derived(count >= target);
|
||||||
|
let showConfetti = $state(false);
|
||||||
|
// svelte-ignore state_referenced_locally
|
||||||
|
let hideNumber = $state(count === 0);
|
||||||
|
let animatingToZero = $state(false);
|
||||||
|
|
||||||
|
// Track when we're animating to zero to delay hiding
|
||||||
|
$effect(() => {
|
||||||
|
if (count === 0 && !hideNumber) {
|
||||||
|
// We just went to 0, show animation then hide
|
||||||
|
animatingToZero = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
if (count === 0) { // Only hide if still 0
|
||||||
|
hideNumber = true;
|
||||||
|
animatingToZero = false;
|
||||||
|
}
|
||||||
|
}, 600);
|
||||||
|
} else if (count > 0) {
|
||||||
|
// Not zero anymore, show immediately
|
||||||
|
hideNumber = false;
|
||||||
|
animatingToZero = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function onClick(e: MouseEvent) {
|
||||||
|
if (target == 1) {
|
||||||
|
if (count == 0) {
|
||||||
|
count = 1;
|
||||||
|
habitService.playCompletionSound();
|
||||||
|
showConfetti = true;
|
||||||
|
setTimeout(() => showConfetti = false, 1000);
|
||||||
|
} else {
|
||||||
|
count = 0;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const oldCount = count;
|
||||||
|
if (e.shiftKey) {
|
||||||
|
// Decrement but don't go below 0 - animate to 0 if needed
|
||||||
|
const newCount = count - increment;
|
||||||
|
count = newCount < 0 ? 0 : newCount;
|
||||||
|
} else {
|
||||||
|
count = count + increment;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trigger confetti when we reach or exceed target
|
||||||
|
if (oldCount < target && count >= target) {
|
||||||
|
habitService.playCompletionSound();
|
||||||
|
showConfetti = true;
|
||||||
|
setTimeout(() => showConfetti = false, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await habitService.setCompletionValue(habitId, count, date);
|
||||||
|
} catch (error) {
|
||||||
|
// Error logging is handled in the service
|
||||||
|
console.error('Failed to update habit completion:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class={cn(
|
||||||
|
'z-10 flex h-12 w-full shrink-0 items-center justify-center shadow-sm select-none hover:cursor-pointer transition-all duration-200',
|
||||||
|
'animate-in fade-in-5 duration-300',
|
||||||
|
direction === 'end' ? 'slide-in-from-right-12' : 'slide-in-from-left-12',
|
||||||
|
checked
|
||||||
|
? 'bg-primary text-primary-foreground border border-primary hover:bg-primary/90'
|
||||||
|
: 'bg-card border border-border text-foreground hover:bg-muted/50',
|
||||||
|
isToday && !checked && 'ring-2 ring-ring bg-accent',
|
||||||
|
isFailed && !checked && 'bg-destructive/10 border-destructive/30',
|
||||||
|
// Truncation styling - missing borders and rounded corners
|
||||||
|
isTruncatedLeft ? 'border-l-0 rounded-l-none' : 'rounded-l-lg',
|
||||||
|
isTruncatedRight ? 'border-r-0 rounded-r-none' : 'rounded-r-lg',
|
||||||
|
// Default rounded corners when no truncation
|
||||||
|
!isTruncatedLeft && !isTruncatedRight && 'rounded-lg',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
style="grid-column: span {length};"
|
||||||
|
onclick={onClick}
|
||||||
|
>
|
||||||
|
{#if showConfetti}
|
||||||
|
<div class="z-0">
|
||||||
|
<Confetti
|
||||||
|
y={[-0.4, 0.4]}
|
||||||
|
x={[-0.4 * length * 0.6, 0.4 * length * 0.6]}
|
||||||
|
size={4}
|
||||||
|
colorArray={['#10b981', '#3b82f6', '#8b5cf6', '#f59e0b']}
|
||||||
|
fallDistance="0px"
|
||||||
|
duration={1000}
|
||||||
|
amount={50 * (length ** 0.7)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if target > 1}
|
||||||
|
{#if displayUnit.text && displayUnit.isShort}
|
||||||
|
<!-- Single letter unit: horizontal layout -->
|
||||||
|
<div class="flex items-baseline gap-1">
|
||||||
|
<NumberFlow value={count} class={cn("font-semibold text-lg", hideNumber && "invisible")} />
|
||||||
|
{#if count > 0}
|
||||||
|
<span class="text-[11px] opacity-75 font-medium uppercase">{displayUnit.text}</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{:else if displayUnit.text && !displayUnit.isShort}
|
||||||
|
<!-- 2-3 letter unit: vertical layout -->
|
||||||
|
<div class="flex flex-col items-center justify-center">
|
||||||
|
<NumberFlow value={count} class={cn("font-semibold text-lg leading-tight", hideNumber && "invisible")} />
|
||||||
|
{#if count > 0}
|
||||||
|
<span class="text-[11px] opacity-75 font-medium lowercase leading-none -mt-1">{displayUnit.text}</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<!-- No unit: just the number -->
|
||||||
|
<NumberFlow value={count} class={cn("font-semibold", hideNumber && "invisible")} />
|
||||||
|
{/if}
|
||||||
|
{:else if checked}
|
||||||
|
<Check class="text-primary-foreground" />
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
|
||||||
|
import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
|
||||||
|
import { EllipsisVertical, Pencil, Trash2 } from '@lucide/svelte';
|
||||||
|
import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
|
||||||
|
import * as Dialog from '$lib/components/ui/dialog/index.js';
|
||||||
|
import { Input } from '$lib/components/ui/input/index.js';
|
||||||
|
import { Label } from '$lib/components/ui/label/index.js';
|
||||||
|
import { getHabitService } from '$lib/context/habits.svelte';
|
||||||
|
|
||||||
|
const habitService = getHabitService();
|
||||||
|
|
||||||
|
let { habitId } = $props();
|
||||||
|
|
||||||
|
// Get the current habit reactively from the service
|
||||||
|
const currentHabit = $derived(habitService.habits.find(h => h.id === habitId));
|
||||||
|
|
||||||
|
let deleteHabitDialog = $state(false);
|
||||||
|
let editHabitDialog = $state(false);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<DropdownMenu.Root>
|
||||||
|
<DropdownMenu.Trigger>
|
||||||
|
<EllipsisVertical class="h-4 w-4 hover:cursor-pointer" /></DropdownMenu.Trigger
|
||||||
|
>
|
||||||
|
<DropdownMenu.Content class="w-56">
|
||||||
|
<DropdownMenu.Group>
|
||||||
|
<DropdownMenu.GroupHeading>Habit options</DropdownMenu.GroupHeading>
|
||||||
|
<DropdownMenu.Separator />
|
||||||
|
<DropdownMenu.CheckboxItem checked={currentHabit?.active || false} onclick={() => currentHabit && habitService.updateHabit(currentHabit.id, { active: !currentHabit.active })}>
|
||||||
|
Active
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.Item onclick={() => (editHabitDialog = true)}>
|
||||||
|
<Pencil class="h-4 w-4" />
|
||||||
|
Edit
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item onclick={() => (deleteHabitDialog = true)}>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<Trash2 class="h-4 w-4 text-destructive" />
|
||||||
|
<p>Delete</p>
|
||||||
|
</div>
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
</DropdownMenu.Group>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
|
||||||
|
<!-- Edit Habit Dialog -->
|
||||||
|
<Dialog.Root bind:open={editHabitDialog}>
|
||||||
|
<Dialog.Content class="sm:max-w-110">
|
||||||
|
<Dialog.Header>
|
||||||
|
<Dialog.Title>Edit profile</Dialog.Title>
|
||||||
|
<Dialog.Description>
|
||||||
|
Make changes to your profile here. Click save when you're done.
|
||||||
|
</Dialog.Description>
|
||||||
|
</Dialog.Header>
|
||||||
|
<div class="grid gap-4 py-4">
|
||||||
|
<div class="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label for="name" class="text-right">Name</Label>
|
||||||
|
<Input id="name" value="Pedro Duarte" class="col-span-3" />
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label for="username" class="text-right">Username</Label>
|
||||||
|
<Input id="username" value="@peduarte" class="col-span-3" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Dialog.Footer>
|
||||||
|
<Button type="submit">Save changes</Button>
|
||||||
|
</Dialog.Footer>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Root>
|
||||||
|
|
||||||
|
<!-- Delete Habit Dialog -->
|
||||||
|
<AlertDialog.Root bind:open={deleteHabitDialog}>
|
||||||
|
<AlertDialog.Content>
|
||||||
|
<AlertDialog.Header>
|
||||||
|
<AlertDialog.Title>Are you sure?</AlertDialog.Title>
|
||||||
|
<AlertDialog.Description>
|
||||||
|
This action cannot be undone. This will permanently delete the habit "{currentHabit?.name || 'Unknown'}"
|
||||||
|
</AlertDialog.Description>
|
||||||
|
</AlertDialog.Header>
|
||||||
|
<AlertDialog.Footer>
|
||||||
|
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
|
||||||
|
|
||||||
|
<Button onclick={() => currentHabit && habitService.deleteHabit(currentHabit.id)} variant="destructive">
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</AlertDialog.Footer>
|
||||||
|
</AlertDialog.Content>
|
||||||
|
</AlertDialog.Root>
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as ContextMenu from '$lib/components/ui/context-menu';
|
||||||
|
import { RotateCcw, SquarePen, CircleX } from '@lucide/svelte';
|
||||||
|
import SetValueDialog from './SetValueDialog.svelte';
|
||||||
|
import type { HabitWithCompletions } from '$lib/context/habits.svelte';
|
||||||
|
|
||||||
|
let {
|
||||||
|
habit,
|
||||||
|
cell,
|
||||||
|
children,
|
||||||
|
onResetPeriod,
|
||||||
|
onSetValue,
|
||||||
|
onToggleFailed
|
||||||
|
}: {
|
||||||
|
habit: HabitWithCompletions;
|
||||||
|
cell: {
|
||||||
|
value: number;
|
||||||
|
date: string;
|
||||||
|
span: number;
|
||||||
|
gridColumn: number;
|
||||||
|
isFailed: boolean;
|
||||||
|
isEmpty: boolean;
|
||||||
|
periodDates: string[];
|
||||||
|
};
|
||||||
|
children: import('svelte').Snippet;
|
||||||
|
onResetPeriod: () => Promise<void>;
|
||||||
|
onSetValue: (totalValue: number, dailyValues?: Record<string, number>) => Promise<void>;
|
||||||
|
onToggleFailed: () => Promise<void>;
|
||||||
|
} = $props();
|
||||||
|
|
||||||
|
let showSetValueDialog = $state(false);
|
||||||
|
|
||||||
|
async function handleResetPeriod() {
|
||||||
|
await onResetPeriod();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSetValue(totalValue: number, dailyValues?: Record<string, number>) {
|
||||||
|
await onSetValue(totalValue, dailyValues);
|
||||||
|
showSetValueDialog = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleToggleFailed() {
|
||||||
|
await onToggleFailed();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ContextMenu.Root>
|
||||||
|
<ContextMenu.Trigger class="w-full">
|
||||||
|
{@render children()}
|
||||||
|
</ContextMenu.Trigger>
|
||||||
|
<ContextMenu.Content class="w-48">
|
||||||
|
<ContextMenu.Item onclick={handleResetPeriod} class="gap-2">
|
||||||
|
<RotateCcw class="h-4 w-4" />
|
||||||
|
Reset period
|
||||||
|
</ContextMenu.Item>
|
||||||
|
|
||||||
|
<ContextMenu.Item onclick={() => showSetValueDialog = true} class="gap-2">
|
||||||
|
<SquarePen class="h-4 w-4" />
|
||||||
|
Set value...
|
||||||
|
</ContextMenu.Item>
|
||||||
|
|
||||||
|
<ContextMenu.Separator />
|
||||||
|
|
||||||
|
<ContextMenu.Item onclick={handleToggleFailed} class="gap-2">
|
||||||
|
<CircleX class="h-4 w-4" />
|
||||||
|
{cell.isFailed ? 'Mark as unfailed' : 'Mark as failed'}
|
||||||
|
</ContextMenu.Item>
|
||||||
|
</ContextMenu.Content>
|
||||||
|
</ContextMenu.Root>
|
||||||
|
|
||||||
|
<SetValueDialog
|
||||||
|
bind:open={showSetValueDialog}
|
||||||
|
{habit}
|
||||||
|
{cell}
|
||||||
|
onSetValue={handleSetValue}
|
||||||
|
/>
|
||||||
@@ -0,0 +1,231 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Button } from '$lib/components/ui/button';
|
||||||
|
import { Input } from '$lib/components/ui/input';
|
||||||
|
import * as Dialog from '$lib/components/ui/dialog';
|
||||||
|
import { Label } from '$lib/components/ui/label';
|
||||||
|
import { Checkbox } from '$lib/components/ui/checkbox';
|
||||||
|
import * as Collapsible from '$lib/components/ui/collapsible';
|
||||||
|
import { ChevronDown, ChevronUp } from '@lucide/svelte';
|
||||||
|
import { getHabitService } from '$lib/context/habits.svelte';
|
||||||
|
|
||||||
|
let { onHabitCreated }: { onHabitCreated?: () => Promise<void> | void } = $props();
|
||||||
|
|
||||||
|
const habitService = getHabitService();
|
||||||
|
|
||||||
|
let showAdvancedOptions = $state(false);
|
||||||
|
let isSubmitting = $state(false);
|
||||||
|
|
||||||
|
// Form fields
|
||||||
|
let name = $state('');
|
||||||
|
let target = $state(1);
|
||||||
|
let duration = $state(1);
|
||||||
|
let unit = $state('');
|
||||||
|
let increment = $state(1);
|
||||||
|
let startDate = $state(new Date().toISOString().split('T')[0]);
|
||||||
|
let active = $state(true);
|
||||||
|
|
||||||
|
|
||||||
|
async function handleSubmit() {
|
||||||
|
if (isSubmitting || !name.trim()) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
isSubmitting = true;
|
||||||
|
|
||||||
|
await habitService.createHabit({
|
||||||
|
name,
|
||||||
|
target,
|
||||||
|
duration,
|
||||||
|
increment,
|
||||||
|
unit,
|
||||||
|
startDate: (() => {
|
||||||
|
// Create date in local timezone to avoid UTC conversion issues
|
||||||
|
const [year, month, day] = startDate.split('-').map(Number);
|
||||||
|
return new Date(year, month - 1, day);
|
||||||
|
})(),
|
||||||
|
active
|
||||||
|
})
|
||||||
|
|
||||||
|
// Reset form
|
||||||
|
name = '';
|
||||||
|
target = 1;
|
||||||
|
duration = 1;
|
||||||
|
unit = '';
|
||||||
|
increment = 1;
|
||||||
|
startDate = new Date().toISOString().split('T')[0];
|
||||||
|
active = true;
|
||||||
|
showAdvancedOptions = false;
|
||||||
|
|
||||||
|
// Notify parent
|
||||||
|
onHabitCreated?.();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to create habit:', error);
|
||||||
|
} finally {
|
||||||
|
isSubmitting = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Dialog.Header>
|
||||||
|
<Dialog.Title>Create a new habit</Dialog.Title>
|
||||||
|
<Dialog.Description>
|
||||||
|
Add a new habit to track. Set your target and customize the tracking period.
|
||||||
|
</Dialog.Description>
|
||||||
|
</Dialog.Header>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<!-- Habit Name -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Label for="name" class="text-sm font-medium">
|
||||||
|
Habit Name <span class="text-destructive">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
bind:value={name}
|
||||||
|
placeholder="e.g. Drink 8 glasses of water, Exercise for 30 minutes"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
required
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
<p class="text-xs text-muted-foreground">
|
||||||
|
Give your habit a clear, specific name
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Target & Duration Row -->
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Label for="target" class="text-sm font-medium">Target</Label>
|
||||||
|
<Input
|
||||||
|
id="target"
|
||||||
|
type="number"
|
||||||
|
bind:value={target}
|
||||||
|
min="1"
|
||||||
|
max="999"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
placeholder="1"
|
||||||
|
/>
|
||||||
|
<p class="text-xs text-muted-foreground">
|
||||||
|
Daily goal to reach
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Label for="duration" class="text-sm font-medium">Period (days)</Label>
|
||||||
|
<Input
|
||||||
|
id="duration"
|
||||||
|
type="number"
|
||||||
|
bind:value={duration}
|
||||||
|
min="1"
|
||||||
|
max="30"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
placeholder="1"
|
||||||
|
/>
|
||||||
|
<p class="text-xs text-muted-foreground">
|
||||||
|
How many days per period
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Advanced Options -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<Collapsible.Root bind:open={showAdvancedOptions}>
|
||||||
|
<Collapsible.Trigger class="flex items-center gap-2 py-2 text-sm font-medium hover:text-primary transition-colors">
|
||||||
|
{#if showAdvancedOptions}
|
||||||
|
<ChevronUp class="h-4 w-4" />
|
||||||
|
{:else}
|
||||||
|
<ChevronDown class="h-4 w-4" />
|
||||||
|
{/if}
|
||||||
|
Advanced Settings
|
||||||
|
</Collapsible.Trigger>
|
||||||
|
|
||||||
|
<Collapsible.Content class="space-y-4 pt-2">
|
||||||
|
<!-- Increment & Unit Row -->
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Label for="increment" class="text-sm font-medium">Increment</Label>
|
||||||
|
<Input
|
||||||
|
id="increment"
|
||||||
|
type="number"
|
||||||
|
bind:value={increment}
|
||||||
|
min="0.1"
|
||||||
|
step="0.1"
|
||||||
|
max="100"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
placeholder="1"
|
||||||
|
/>
|
||||||
|
<p class="text-xs text-muted-foreground">
|
||||||
|
Step size for tracking
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Label for="unit" class="text-sm font-medium">Unit</Label>
|
||||||
|
<Input
|
||||||
|
id="unit"
|
||||||
|
bind:value={unit}
|
||||||
|
placeholder="e.g. glasses, minutes, pages"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
<p class="text-xs text-muted-foreground">
|
||||||
|
Unit of measurement
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Start Date & Active Row -->
|
||||||
|
<div class="grid grid-cols-2 gap-4 items-start">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Label for="startDate" class="text-sm font-medium">Start Date</Label>
|
||||||
|
<Input
|
||||||
|
id="startDate"
|
||||||
|
type="date"
|
||||||
|
bind:value={startDate}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
<p class="text-xs text-muted-foreground">
|
||||||
|
When to begin tracking
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Label class="text-sm font-medium">Status</Label>
|
||||||
|
<div class="flex items-center space-x-2 h-10">
|
||||||
|
<Checkbox
|
||||||
|
id="active"
|
||||||
|
bind:checked={active}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
/>
|
||||||
|
<Label for="active" class="text-sm font-normal cursor-pointer">
|
||||||
|
Start tracking immediately
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-muted-foreground">
|
||||||
|
Enable habit tracking
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Collapsible.Content>
|
||||||
|
</Collapsible.Root>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Dialog.Footer class="flex gap-2">
|
||||||
|
<Dialog.Close>
|
||||||
|
<Button variant="outline" disabled={isSubmitting}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</Dialog.Close>
|
||||||
|
<Button
|
||||||
|
onclick={handleSubmit}
|
||||||
|
disabled={isSubmitting || !name.trim()}
|
||||||
|
class="gap-2"
|
||||||
|
>
|
||||||
|
{#if isSubmitting}
|
||||||
|
Creating...
|
||||||
|
{:else}
|
||||||
|
Create Habit
|
||||||
|
{/if}
|
||||||
|
</Button>
|
||||||
|
</Dialog.Footer>
|
||||||
@@ -0,0 +1,366 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as DateStrip from '$lib/components/ui/date-strip/index';
|
||||||
|
import { setDateStripContext } from '$lib/components/ui/date-strip/ctx';
|
||||||
|
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
|
||||||
|
import ChevronsLeft from '@lucide/svelte/icons/chevrons-left';
|
||||||
|
import ChevronRight from '@lucide/svelte/icons/chevron-right';
|
||||||
|
import ChevronsRight from '@lucide/svelte/icons/chevrons-right';
|
||||||
|
import { today, CalendarDate, getLocalTimeZone } from '@internationalized/date';
|
||||||
|
import CounterHabitButton from './CounterHabitButton.svelte';
|
||||||
|
import type { HabitCell } from '$lib/context/habits.svelte';
|
||||||
|
import type { Habit } from '$lib/triplit/schema';
|
||||||
|
import { getHabitService } from '$lib/context/habits.svelte';
|
||||||
|
import HabitActionMenu from './HabitActionMenu.svelte';
|
||||||
|
import HabitCellContextMenu from './HabitCellContextMenu.svelte';
|
||||||
|
import { Skeleton } from '$lib/components/ui/skeleton';
|
||||||
|
|
||||||
|
let {
|
||||||
|
centerDate = $bindable(today(getLocalTimeZone())),
|
||||||
|
skeleton = false,
|
||||||
|
showInactiveHabits = $bindable(false)
|
||||||
|
}: {
|
||||||
|
centerDate?: CalendarDate;
|
||||||
|
skeleton?: boolean;
|
||||||
|
showInactiveHabits?: boolean;
|
||||||
|
} = $props();
|
||||||
|
|
||||||
|
const habitService = getHabitService();
|
||||||
|
|
||||||
|
let containerWidth = $state(0);
|
||||||
|
|
||||||
|
// Filter habits based on toggle state
|
||||||
|
const displayedHabits = $derived(
|
||||||
|
showInactiveHabits
|
||||||
|
? habitService.habits
|
||||||
|
: habitService.habits.filter(h => h.active)
|
||||||
|
);
|
||||||
|
|
||||||
|
let numCellsInRow = $derived.by(() => {
|
||||||
|
if (containerWidth === 0) return 7; // Default while measuring
|
||||||
|
// Account for habit name column (120px) and navigation columns (120px each), plus gaps
|
||||||
|
const availableWidth = containerWidth - 360 - 32; // 360px for fixed columns + 32px for padding
|
||||||
|
const cellWidth = 48; // Fixed cell width to match DateStrip items (w-12)
|
||||||
|
const gapWidth = 8; // 2 * 4px gap between columns
|
||||||
|
const cellWithGap = cellWidth + gapWidth;
|
||||||
|
const calculatedCells = Math.floor(availableWidth / cellWithGap);
|
||||||
|
return Math.max(Math.min(calculatedCells, 21), 3); // Between 3 and 21 columns
|
||||||
|
});
|
||||||
|
// Initialize grid start date to center the provided centerDate
|
||||||
|
let gridStartDate = $state(centerDate);
|
||||||
|
|
||||||
|
// Update grid start when centerDate prop changes
|
||||||
|
$effect(() => {
|
||||||
|
if (numCellsInRow > 0) {
|
||||||
|
// Calculate offset so centerDate appears in the center of the grid
|
||||||
|
const centerOffset = Math.floor(numCellsInRow / 2);
|
||||||
|
gridStartDate = centerDate.subtract({ days: centerOffset });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const displayedDates = $derived.by(() =>
|
||||||
|
Array.from({ length: numCellsInRow }, (_, i) => gridStartDate.add({ days: i }))
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
setDateStripContext({
|
||||||
|
selectedValue: () => habitService.todaysDate,
|
||||||
|
onSelect: (date) => {
|
||||||
|
const calendarDate = date instanceof CalendarDate ? date : new CalendarDate(date.year, date.month, date.day);
|
||||||
|
gridStartDate = calendarDate.add({ days: -Math.floor(numCellsInRow / 2) });
|
||||||
|
centerDate = calendarDate;
|
||||||
|
},
|
||||||
|
isDateDisabled: () => false,
|
||||||
|
direction: () => 'end'
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
async function updateCompletion(habitId: string, value: number, date: string): Promise<void> {
|
||||||
|
await habitService.setCompletionValue(habitId, value, date);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function navigate(days: number) {
|
||||||
|
const newGridStartDate = gridStartDate.add({ days });
|
||||||
|
const newDisplayedDates = Array.from({ length: numCellsInRow }, (_, i) => newGridStartDate.add({ days: i }));
|
||||||
|
const viewStart = newDisplayedDates[0];
|
||||||
|
const viewEnd = newDisplayedDates[newDisplayedDates.length - 1];
|
||||||
|
|
||||||
|
gridStartDate = newGridStartDate;
|
||||||
|
|
||||||
|
// Update the center date to sync with parent
|
||||||
|
const centerOffset = Math.floor(numCellsInRow / 2);
|
||||||
|
centerDate = newGridStartDate.add({ days: centerOffset });
|
||||||
|
|
||||||
|
// Check and load more data if needed
|
||||||
|
await habitService.checkAndLoadMoreData(viewStart, viewEnd);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleKeydown(event: KeyboardEvent) {
|
||||||
|
if (event.key === 'ArrowLeft') navigate(-1);
|
||||||
|
else if (event.key === 'ArrowRight') navigate(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createHabitCells(habit: Habit, displayedDates: CalendarDate[], numCellsInRow: number): HabitCell[] {
|
||||||
|
const duration = habit.duration || 1;
|
||||||
|
const cells: HabitCell[] = [];
|
||||||
|
const referenceDate = new CalendarDate(2000, 1, 1);
|
||||||
|
|
||||||
|
if (displayedDates.length === 0) {
|
||||||
|
return cells;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dailyCompletions = habitService.getCompletionsForHabit(habit.id);
|
||||||
|
|
||||||
|
const searchStart = displayedDates[0].subtract({ days: duration });
|
||||||
|
const searchStartTime = searchStart.toDate('UTC').getTime();
|
||||||
|
const referenceTime = referenceDate.toDate('UTC').getTime();
|
||||||
|
const daysSinceRef = Math.floor((searchStartTime - referenceTime) / (24 * 60 * 60 * 1000));
|
||||||
|
const remainder = daysSinceRef % duration;
|
||||||
|
|
||||||
|
let periodStart = remainder === 0 ? searchStart : searchStart.add({ days: duration - remainder });
|
||||||
|
|
||||||
|
while (periodStart.compare(displayedDates[displayedDates.length - 1]) <= 0) {
|
||||||
|
const periodEnd = periodStart.add({ days: duration - 1 });
|
||||||
|
|
||||||
|
if (periodEnd.compare(displayedDates[0]) >= 0) {
|
||||||
|
const visibleStart = periodStart.compare(displayedDates[0]) >= 0 ? periodStart : displayedDates[0];
|
||||||
|
const visibleEnd = periodEnd.compare(displayedDates[displayedDates.length - 1]) <= 0
|
||||||
|
? periodEnd : displayedDates[displayedDates.length - 1];
|
||||||
|
|
||||||
|
const startIndex = displayedDates.findIndex(date => date.compare(visibleStart) === 0);
|
||||||
|
|
||||||
|
if (startIndex >= 0) {
|
||||||
|
const spanDays = visibleEnd.toDate('UTC').getTime() - visibleStart.toDate('UTC').getTime();
|
||||||
|
const span = Math.min(
|
||||||
|
Math.floor(spanDays / (24 * 60 * 60 * 1000)) + 1,
|
||||||
|
numCellsInRow - startIndex
|
||||||
|
);
|
||||||
|
|
||||||
|
// Detect truncation
|
||||||
|
const isTruncatedLeft = periodStart.compare(displayedDates[0]) < 0;
|
||||||
|
const isTruncatedRight = periodEnd.compare(displayedDates[displayedDates.length - 1]) > 0;
|
||||||
|
|
||||||
|
let totalValue = 0;
|
||||||
|
let hasAnyFailed = false;
|
||||||
|
const periodDates: string[] = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < duration; i++) {
|
||||||
|
const periodDate = periodStart.add({ days: i });
|
||||||
|
const dateStr = periodDate.toDate('UTC').toISOString().split('T')[0];
|
||||||
|
periodDates.push(dateStr);
|
||||||
|
|
||||||
|
const dayCompletion = dailyCompletions.get(dateStr);
|
||||||
|
if (dayCompletion) {
|
||||||
|
totalValue += dayCompletion.value || 0;
|
||||||
|
if (dayCompletion.failed === true) {
|
||||||
|
hasAnyFailed = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const habitStartDate = habit.startDate ? new CalendarDate(
|
||||||
|
habit.startDate.getFullYear(),
|
||||||
|
habit.startDate.getMonth() + 1,
|
||||||
|
habit.startDate.getDate()
|
||||||
|
) : null;
|
||||||
|
|
||||||
|
const isManuallyFailed = hasAnyFailed;
|
||||||
|
const isPeriodInPast = periodEnd.compare(habitService.todaysDate) < 0;
|
||||||
|
const isPeriodAfterHabitStart = habitStartDate ? periodStart.compare(habitStartDate) >= 0 : true;
|
||||||
|
const isAutoFailed = !isManuallyFailed &&
|
||||||
|
totalValue < (habit.target || 1) &&
|
||||||
|
isPeriodInPast &&
|
||||||
|
isPeriodAfterHabitStart;
|
||||||
|
|
||||||
|
const cellDateStr = periodStart.toDate('UTC').toISOString().split('T')[0];
|
||||||
|
|
||||||
|
cells.push({
|
||||||
|
value: totalValue,
|
||||||
|
date: cellDateStr,
|
||||||
|
span,
|
||||||
|
gridColumn: startIndex + 2,
|
||||||
|
isFailed: isManuallyFailed || isAutoFailed,
|
||||||
|
periodDates,
|
||||||
|
isEmpty: false,
|
||||||
|
isTruncatedLeft,
|
||||||
|
isTruncatedRight
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
periodStart = periodStart.add({ days: duration });
|
||||||
|
}
|
||||||
|
|
||||||
|
const covered = new Array(numCellsInRow).fill(false);
|
||||||
|
cells.forEach(cell => {
|
||||||
|
for (let i = 0; i < cell.span; i++) {
|
||||||
|
const pos = (cell.gridColumn - 2) + i;
|
||||||
|
if (pos >= 0 && pos < numCellsInRow) covered[pos] = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
covered.forEach((isCovered, index) => {
|
||||||
|
if (!isCovered) {
|
||||||
|
cells.push({
|
||||||
|
value: 0,
|
||||||
|
date: '',
|
||||||
|
span: 1,
|
||||||
|
gridColumn: index + 2,
|
||||||
|
isEmpty: true,
|
||||||
|
isFailed: false,
|
||||||
|
periodDates: [],
|
||||||
|
isTruncatedLeft: false,
|
||||||
|
isTruncatedRight: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return cells;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:window onkeydown={handleKeydown} />
|
||||||
|
|
||||||
|
<div class="w-full" bind:clientWidth={containerWidth}>
|
||||||
|
<div class="w-full overflow-hidden">
|
||||||
|
{#if skeleton && containerWidth === 0}
|
||||||
|
<!-- Silent placeholder while measuring -->
|
||||||
|
<div class="py-16"></div>
|
||||||
|
{:else}
|
||||||
|
<div class="grid gap-2 p-4 mx-auto" style="grid-template-columns: 120px repeat({numCellsInRow}, 48px) 120px; max-width: fit-content;">
|
||||||
|
<!-- Navigation and Date Header -->
|
||||||
|
{#if skeleton}
|
||||||
|
<!-- Skeleton Header -->
|
||||||
|
<div class="flex gap-2 justify-end items-center">
|
||||||
|
<Skeleton class="h-4 w-4 rounded" />
|
||||||
|
<Skeleton class="h-4 w-4 rounded" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#each Array(numCellsInRow) as _, index (index)}
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<Skeleton class="h-8 w-10 rounded" />
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<div class="flex gap-2 justify-start items-center">
|
||||||
|
<Skeleton class="h-4 w-4 rounded" />
|
||||||
|
<Skeleton class="h-4 w-4 rounded" />
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<!-- Real Header -->
|
||||||
|
<div class="flex gap-2 justify-end items-center">
|
||||||
|
<ChevronsLeft onclick={() => navigate(-(numCellsInRow - 1))} />
|
||||||
|
<ChevronLeft onclick={() => navigate(-1)} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#each displayedDates as date (date.toString())}
|
||||||
|
<div><DateStrip.Item {date} /></div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<div class="flex gap-2 justify-start items-center">
|
||||||
|
<ChevronRight onclick={() => navigate(1)} />
|
||||||
|
<ChevronsRight onclick={() => navigate(numCellsInRow - 1)} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Habit Rows -->
|
||||||
|
{#if skeleton}
|
||||||
|
<!-- Skeleton Mode -->
|
||||||
|
{#each Array(3) as _, habitIndex (habitIndex)}
|
||||||
|
<!-- Habit Name with hover area -->
|
||||||
|
<div class="font-medium text-right pr-2 flex items-center justify-end">
|
||||||
|
<Skeleton class="h-4 w-20" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Habit Cells - each habit has consistent duration -->
|
||||||
|
{#if habitIndex === 0}
|
||||||
|
<!-- First habit: 1-day duration (daily habit) -->
|
||||||
|
{#each Array(numCellsInRow) as _, cellIndex (cellIndex)}
|
||||||
|
<div style="grid-column: {cellIndex + 2};" class="flex items-center justify-center">
|
||||||
|
<Skeleton class="h-12 w-full rounded-lg" />
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
{:else if habitIndex === 1}
|
||||||
|
<!-- Second habit: 3-day duration -->
|
||||||
|
{#each Array(Math.floor(numCellsInRow / 3)) as _, periodIndex (periodIndex)}
|
||||||
|
<div style="grid-column: {periodIndex * 3 + 2} / span 3;" class="flex items-center justify-center">
|
||||||
|
<Skeleton class="h-12 w-full rounded-lg" />
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
<!-- Partial period if needed -->
|
||||||
|
{#if numCellsInRow % 3 !== 0}
|
||||||
|
<div style="grid-column: {Math.floor(numCellsInRow / 3) * 3 + 2} / span {numCellsInRow % 3};" class="flex items-center justify-center">
|
||||||
|
<Skeleton class="h-12 w-full rounded-lg" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{:else}
|
||||||
|
<!-- Third habit: 2-day duration -->
|
||||||
|
{#each Array(Math.floor(numCellsInRow / 2)) as _, periodIndex (periodIndex)}
|
||||||
|
<div style="grid-column: {periodIndex * 2 + 2} / span 2;" class="flex items-center justify-center">
|
||||||
|
<Skeleton class="h-12 w-full rounded-lg" />
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
<!-- Partial period if needed -->
|
||||||
|
{#if numCellsInRow % 2 !== 0}
|
||||||
|
<div style="grid-column: {Math.floor(numCellsInRow / 2) * 2 + 2};" class="flex items-center justify-center">
|
||||||
|
<Skeleton class="h-12 w-full rounded-lg" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Empty column -->
|
||||||
|
<div></div>
|
||||||
|
{/each}
|
||||||
|
{:else}
|
||||||
|
<!-- Real Data Mode -->
|
||||||
|
{#each displayedHabits as habit (habit.id)}
|
||||||
|
<div class="group relative font-medium text-right pr-2 flex items-center justify-end text-foreground">
|
||||||
|
<!-- Action Menu - appears directly before name on hover -->
|
||||||
|
<div class="opacity-0 group-hover:opacity-100 transition-opacity duration-200 mr-1 flex items-center">
|
||||||
|
<HabitActionMenu habitId={habit.id}/>
|
||||||
|
</div>
|
||||||
|
<!-- Habit Name -->
|
||||||
|
<span class={habit.active ? "" : "opacity-50 line-through"}>
|
||||||
|
{habit.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#each createHabitCells(habit, displayedDates, numCellsInRow) as cell (`${habit.id}-${cell.date}-${cell.gridColumn}`)}
|
||||||
|
<div style="grid-column: {cell.gridColumn} / span {cell.span};" class="flex items-center justify-center">
|
||||||
|
{#if cell.isEmpty}
|
||||||
|
<div></div>
|
||||||
|
{:else}
|
||||||
|
<HabitCellContextMenu
|
||||||
|
habit={habitService.toHabitWithCompletions(habit)}
|
||||||
|
{cell}
|
||||||
|
onResetPeriod={async () => { await habitService.resetPeriodByDates(habit.id, cell.periodDates); }}
|
||||||
|
onSetValue={(totalValue, dailyValues) => habitService.setPeriodValue(habit.id, cell.periodDates, totalValue, dailyValues)}
|
||||||
|
onToggleFailed={() => habitService.togglePeriodFailed(habit.id, cell.periodDates, cell.isFailed)}
|
||||||
|
>
|
||||||
|
<CounterHabitButton
|
||||||
|
update={updateCompletion}
|
||||||
|
habitId={habit.id}
|
||||||
|
target={habit.target}
|
||||||
|
increment={habit.increment}
|
||||||
|
unit={habit.unit || ''}
|
||||||
|
count={cell.value}
|
||||||
|
date={cell.date}
|
||||||
|
isToday={false}
|
||||||
|
isFailed={cell.isFailed}
|
||||||
|
length={cell.span}
|
||||||
|
isTruncatedLeft={cell.isTruncatedLeft}
|
||||||
|
isTruncatedRight={cell.isTruncatedRight}
|
||||||
|
/>
|
||||||
|
</HabitCellContextMenu>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<!-- Empty column where action menu used to be -->
|
||||||
|
<div></div>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,182 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as Dialog from '$lib/components/ui/dialog';
|
||||||
|
import { Button } from '$lib/components/ui/button';
|
||||||
|
import { Input } from '$lib/components/ui/input';
|
||||||
|
import { Label } from '$lib/components/ui/label';
|
||||||
|
import * as Collapsible from '$lib/components/ui/collapsible';
|
||||||
|
import { ChevronDown, ChevronUp } from '@lucide/svelte';
|
||||||
|
import type { HabitWithCompletions } from '$lib/context/habits.svelte';
|
||||||
|
|
||||||
|
let {
|
||||||
|
open = $bindable(),
|
||||||
|
habit,
|
||||||
|
cell,
|
||||||
|
onSetValue
|
||||||
|
}: {
|
||||||
|
open: boolean;
|
||||||
|
habit: HabitWithCompletions;
|
||||||
|
cell: {
|
||||||
|
value: number;
|
||||||
|
date: string;
|
||||||
|
span: number;
|
||||||
|
gridColumn: number;
|
||||||
|
isFailed: boolean;
|
||||||
|
isEmpty: boolean;
|
||||||
|
periodDates: string[];
|
||||||
|
};
|
||||||
|
onSetValue: (totalValue: number, dailyValues?: Record<string, number>) => Promise<void>;
|
||||||
|
} = $props();
|
||||||
|
|
||||||
|
let isSubmitting = $state(false);
|
||||||
|
let showAdvanced = $state(false);
|
||||||
|
let manualInputValue = $state(0);
|
||||||
|
let editableDailyValues = $state<Record<string, number>>({});
|
||||||
|
|
||||||
|
// Derived total value - either manual input or sum of daily values
|
||||||
|
let totalValue = $derived(
|
||||||
|
showAdvanced
|
||||||
|
? Object.values(editableDailyValues).reduce((acc, val) => acc + (val || 0), 0)
|
||||||
|
: manualInputValue
|
||||||
|
);
|
||||||
|
|
||||||
|
// Reset values when dialog opens
|
||||||
|
$effect(() => {
|
||||||
|
if (open) {
|
||||||
|
manualInputValue = cell.value;
|
||||||
|
showAdvanced = false;
|
||||||
|
editableDailyValues = Object.fromEntries(cell.periodDates.map(date => [date, 0]));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update daily values when total changes (simple mode)
|
||||||
|
function updateDailyValuesFromTotal() {
|
||||||
|
if (!showAdvanced) return;
|
||||||
|
|
||||||
|
// Clear all daily values first
|
||||||
|
cell.periodDates.forEach(date => {
|
||||||
|
editableDailyValues[date] = 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add total value to the most recent date
|
||||||
|
if (cell.periodDates.length > 0 && manualInputValue > 0) {
|
||||||
|
const mostRecentDate = cell.periodDates[cell.periodDates.length - 1];
|
||||||
|
editableDailyValues[mostRecentDate] = manualInputValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function handleSubmit() {
|
||||||
|
if (isSubmitting) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
isSubmitting = true;
|
||||||
|
|
||||||
|
if (showAdvanced) {
|
||||||
|
// Use individual daily values
|
||||||
|
const cleanedDailyValues = Object.fromEntries(
|
||||||
|
Object.entries(editableDailyValues).filter(([_, value]) => value > 0)
|
||||||
|
);
|
||||||
|
await onSetValue(totalValue, cleanedDailyValues);
|
||||||
|
} else {
|
||||||
|
// Use total value only
|
||||||
|
await onSetValue(totalValue);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to set value:', error);
|
||||||
|
} finally {
|
||||||
|
isSubmitting = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(dateStr: string) {
|
||||||
|
const date = new Date(dateStr + 'T00:00:00');
|
||||||
|
return date.toLocaleDateString('en-US', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Dialog.Root bind:open>
|
||||||
|
<Dialog.Content class="sm:max-w-md">
|
||||||
|
<Dialog.Header>
|
||||||
|
<Dialog.Title>Set Completion Value</Dialog.Title>
|
||||||
|
<Dialog.Description>
|
||||||
|
Set the total value for this period ({cell.periodDates.length} day{cell.periodDates.length !== 1 ? 's' : ''})
|
||||||
|
</Dialog.Description>
|
||||||
|
</Dialog.Header>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<!-- Total Value Input -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Label for="total-value" class="text-sm font-medium">
|
||||||
|
Total for period (currently {cell.value})
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="total-value"
|
||||||
|
type="number"
|
||||||
|
bind:value={manualInputValue}
|
||||||
|
min="0"
|
||||||
|
step={habit.increment || 1}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
onchange={updateDailyValuesFromTotal}
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Advanced Section -->
|
||||||
|
{#if cell.periodDates.length > 1}
|
||||||
|
<Collapsible.Root bind:open={showAdvanced}>
|
||||||
|
<Collapsible.Trigger class="flex items-center gap-2 py-2 text-sm font-medium hover:text-primary transition-colors">
|
||||||
|
{#if showAdvanced}
|
||||||
|
<ChevronUp class="h-4 w-4" />
|
||||||
|
{:else}
|
||||||
|
<ChevronDown class="h-4 w-4" />
|
||||||
|
{/if}
|
||||||
|
Advanced (set individual days)
|
||||||
|
</Collapsible.Trigger>
|
||||||
|
|
||||||
|
<Collapsible.Content class="space-y-3 pt-2">
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
{#each cell.periodDates as date (date)}
|
||||||
|
<div class="space-y-1">
|
||||||
|
<Label for="day-{date}" class="text-xs text-muted-foreground">
|
||||||
|
{formatDate(date)}
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="day-{date}"
|
||||||
|
type="number"
|
||||||
|
bind:value={editableDailyValues[date]}
|
||||||
|
min="0"
|
||||||
|
step={habit.increment || 1}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
class="h-8 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-xs text-muted-foreground">
|
||||||
|
Individual day values will override the total above
|
||||||
|
</p>
|
||||||
|
</Collapsible.Content>
|
||||||
|
</Collapsible.Root>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Dialog.Footer class="flex gap-2">
|
||||||
|
<Dialog.Close>
|
||||||
|
<Button variant="outline" disabled={isSubmitting}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</Dialog.Close>
|
||||||
|
<Button onclick={handleSubmit} disabled={isSubmitting}>
|
||||||
|
{#if isSubmitting}
|
||||||
|
Applying...
|
||||||
|
{:else}
|
||||||
|
Apply
|
||||||
|
{/if}
|
||||||
|
</Button>
|
||||||
|
</Dialog.Footer>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Root>
|
||||||
Reference in New Issue
Block a user