From b758098a65ed373a65b0e7bdd1b05afc3a0307aa Mon Sep 17 00:00:00 2001 From: Ryan Pandya Date: Sat, 7 Dec 2024 19:44:16 -0800 Subject: [PATCH] Rename MonthView to TimelineView --- .../dashboard/timeline/{[view] => }/page.tsx | 9 +- .../web/components/dashboard/days/DayView.tsx | 82 ++++++++++++------- .../dashboard/hours/EditableHour.tsx | 55 +++++++++---- .../components/dashboard/sidebar/Sidebar.tsx | 8 +- .../TimelineView.tsx} | 2 +- packages/trpc/routers/measurements.ts | 2 +- 6 files changed, 102 insertions(+), 56 deletions(-) rename apps/web/app/dashboard/timeline/{[view] => }/page.tsx (68%) rename apps/web/components/dashboard/{timelines/MonthView.tsx => timeline/TimelineView.tsx} (99%) diff --git a/apps/web/app/dashboard/timeline/[view]/page.tsx b/apps/web/app/dashboard/timeline/page.tsx similarity index 68% rename from apps/web/app/dashboard/timeline/[view]/page.tsx rename to apps/web/app/dashboard/timeline/page.tsx index c12fd90..9733b68 100644 --- a/apps/web/app/dashboard/timeline/[view]/page.tsx +++ b/apps/web/app/dashboard/timeline/page.tsx @@ -1,12 +1,7 @@ -import { ZHour } from "@lifetracker/shared/types/days"; import React from "react"; import spacetime from "spacetime"; import { api } from "@/server/api/client"; -import { EditableHourCode } from "@/components/dashboard/hours/EditableHourCode"; -import { useUpdateHour } from "@lifetracker/shared-react/hooks/days"; -import { useToast } from "@/components/ui/use-toast"; -import { getHourFromTime } from "@lifetracker/shared/utils/hours"; -import MonthView from "@/components/dashboard/timelines/MonthView"; +import TimelineView from "@/components/dashboard/timeline/TimelineView"; async function fetchDays(view: string, dateQuery: string) { const timezone = await api.users.getTimezone(); @@ -34,7 +29,7 @@ export default async function TimelinePage({ params }: { params: { view: string, return ( <> - + ); } \ No newline at end of file diff --git a/apps/web/components/dashboard/days/DayView.tsx b/apps/web/components/dashboard/days/DayView.tsx index dbd26fd..d86195f 100644 --- a/apps/web/components/dashboard/days/DayView.tsx +++ b/apps/web/components/dashboard/days/DayView.tsx @@ -25,9 +25,42 @@ export default async function DayView({ const prevDay = spacetime(day.date).subtract(1, "day").format("iso-short"); const nextDay = spacetime(day.date).add(1, "day").format("iso-short"); - const userMetrics = await api.metrics.list(); + const groupConsecutiveHours = (day: ZDay) => { + const result = []; + let currentGroup = []; + + for (const hour of day.hours) { + if (hour.categoryCode === null) { + if (currentGroup.length > 0) { + result.push(currentGroup); + currentGroup = []; + } + + result.push([hour]); + + continue; + } + + if (currentGroup.length === 0 || hour.categoryCode === currentGroup[currentGroup.length - 1].categoryCode) { + currentGroup.push(hour); + } else { + result.push(currentGroup); + currentGroup = [hour]; + } + } + + if (currentGroup.length > 0) { + result.push(currentGroup); + } + + return result; + }; + + const consecutiveHours = groupConsecutiveHours(day); + + return (
@@ -81,33 +114,26 @@ export default async function DayView({
    -
  • - {/* - TODO Possibly refactor with Table? -
    - - Time - - - Category - -
    - Actions -
    -
    */} -
    • - {day.hours.map((hour, i) => ( -
  • - -
    • - ))} + {/* {consecutiveHours.map((group, i) => ( + group.map((hour, j) => ( + j == 0 ? ( +
  • + +
    • ) : ( + "" + ) + + )) + ))} */} + { + day.hours.map((hour, i) => ( +
  • + +
    • ) + ) + + + }
diff --git a/apps/web/components/dashboard/hours/EditableHour.tsx b/apps/web/components/dashboard/hours/EditableHour.tsx index c4d119c..2945253 100644 --- a/apps/web/components/dashboard/hours/EditableHour.tsx +++ b/apps/web/components/dashboard/hours/EditableHour.tsx @@ -27,12 +27,18 @@ import { useDecrementCount } from "@lifetracker/shared-react/hooks/measurements" export default function EditableHour({ hour: initialHour, i, + j, + hourGroup, metrics, + isConsecutiveHour = false, className, }: { hour: ZHour, i: number, + j: number, + hourGroup: ZHour[], metrics: ZMetric[], + isConsecutiveHour?: boolean, className?: string; }) { const [hour, setHour] = useState(initialHour); @@ -92,8 +98,14 @@ export default function EditableHour({ const tzOffset = spacetime().offset() / 60; - const localDateTime = spacetime(hour.date).add(hour.time + tzOffset, "hour"); - hour.datetime = `${localDateTime.format('{hour} {ampm}')}`; + + + const localDateTime = (h) => { + return spacetime(h.date).add(h.time + tzOffset, "hour").format('{hour} {ampm}'); + } + hour.datetime = localDateTime(hour); + + useEffect(() => { // console.log(hour.categoryDesc); @@ -110,7 +122,6 @@ export default function EditableHour({ function reload(newHour: ZHour) { setHour(newHour); } - return (
- {/* {isActiveHour(hour) && "--> "} */} - {hour.datetime} + {hourGroup.length > 1 + ? ( +
+ {hour.datetime} + | + {localDateTime(hourGroup[hourGroup.length - 1])} +
+ ) + :
{hour.datetime}
+ }
- {hour.measurements?.map(m => - Array.from({ length: m.value }).map((_, index) => -
{ - decrementCount({ metricId: m.metricId, hourId: hour.id }); - }}> - -
- ) - )} + { + + hour.measurements?.map(m => + + Array.from({ length: m.value }).map((_, index) => +
{ + decrementCount({ metricId: m.metricId, hourId: hour.id }); + }}> + +
+ ) + )} {(hour.measurements.length > 0) ? - (|) + ( + {/* {JSON.stringify(hour.measurements.length)} */} + | + ) : "" } diff --git a/apps/web/components/dashboard/sidebar/Sidebar.tsx b/apps/web/components/dashboard/sidebar/Sidebar.tsx index ccf9429..42bfe40 100644 --- a/apps/web/components/dashboard/sidebar/Sidebar.tsx +++ b/apps/web/components/dashboard/sidebar/Sidebar.tsx @@ -3,7 +3,7 @@ import SidebarItem from "@/components/shared/sidebar/SidebarItem"; import { Separator } from "@/components/ui/separator"; import { api } from "@/server/api/client"; import { getServerAuthSession } from "@/server/auth"; -import { Archive, Calendar, CheckCheck, Gauge, Home, LineChart, Ruler, Search, Tag } from "lucide-react"; +import { Archive, Calendar, CheckCheck, Gauge, Home, LineChart, Ruler, Search, SunMoon, Tag } from "lucide-react"; import serverConfig from "@lifetracker/shared/config"; import AllLists from "./AllLists"; @@ -34,13 +34,13 @@ export default async function Sidebar() { }[] = [ { name: "Day View", - icon: , + icon: , path: "/dashboard/day/today", }, { - name: "Month View", + name: "Timeline View", icon: , - path: "/dashboard/timeline/month", + path: "/dashboard/timeline", }, ...searchItem, { diff --git a/apps/web/components/dashboard/timelines/MonthView.tsx b/apps/web/components/dashboard/timeline/TimelineView.tsx similarity index 99% rename from apps/web/components/dashboard/timelines/MonthView.tsx rename to apps/web/components/dashboard/timeline/TimelineView.tsx index cdcda22..231704e 100644 --- a/apps/web/components/dashboard/timelines/MonthView.tsx +++ b/apps/web/components/dashboard/timeline/TimelineView.tsx @@ -13,7 +13,7 @@ import EditableHour from "@/components/dashboard/hours/EditableHour"; import { useUpdateHour } from "@lifetracker/shared-react/hooks/days"; import { useState } from "react"; -export default function MonthView({ +export default function TimelineView({ days: initialDays, }: { days: ZDay[]; diff --git a/packages/trpc/routers/measurements.ts b/packages/trpc/routers/measurements.ts index 792af6d..91dab7c 100644 --- a/packages/trpc/routers/measurements.ts +++ b/packages/trpc/routers/measurements.ts @@ -21,7 +21,7 @@ export const measurementsAppRouter = router({ .where(and(eq(measurements.userId, ctx.user.id), eq(hours.id, input.hourId)) ); - + console.log(dbMeasurements.length); return dbMeasurements; }), incrementCount: authedProcedure