Rename MonthView to TimelineView
This commit is contained in:
parent
57d4c18527
commit
b758098a65
@ -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 (
|
||||
<>
|
||||
<MonthView days={days} />
|
||||
<TimelineView days={days} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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 (
|
||||
<div className="flex flex-col gap-3">
|
||||
|
||||
@ -81,33 +114,26 @@ export default async function DayView({
|
||||
<Separator />
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
{/*
|
||||
TODO Possibly refactor with Table?
|
||||
<div className={cn(
|
||||
"p-4 grid justify-between",
|
||||
)}
|
||||
style={{
|
||||
fontFamily: "inherit",
|
||||
gridTemplateColumns: "100px 1fr 200px"
|
||||
}}
|
||||
>
|
||||
<span className="text-right">
|
||||
Time
|
||||
</span>
|
||||
<span className="text-center">
|
||||
Category
|
||||
</span>
|
||||
<div className="text-right">
|
||||
Actions
|
||||
</div>
|
||||
</div> */}
|
||||
</li>
|
||||
{day.hours.map((hour, i) => (
|
||||
<li key={hour.time} id={"hour-" + i.toString()}>
|
||||
<EditableHour hour={hour} i={i} metrics={userMetrics} />
|
||||
</li>
|
||||
))}
|
||||
{/* {consecutiveHours.map((group, i) => (
|
||||
group.map((hour, j) => (
|
||||
j == 0 ? (
|
||||
<li key={hour.time} id={"hour-" + i.toString()}>
|
||||
<EditableHour hour={hour} i={i} j={j} hourGroup={group} metrics={userMetrics} />
|
||||
</li>) : (
|
||||
""
|
||||
)
|
||||
|
||||
))
|
||||
))} */}
|
||||
{
|
||||
day.hours.map((hour, i) => (
|
||||
<li key={hour.time} id={"hour-" + i.toString()}>
|
||||
<EditableHour hour={hour} i={i} j={0} hourGroup={[]} metrics={userMetrics} />
|
||||
</li>)
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
@ -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 (
|
||||
<div
|
||||
data-hourid={hour.id}
|
||||
@ -123,8 +134,16 @@ export default function EditableHour({
|
||||
}}
|
||||
>
|
||||
<span className="text-right">
|
||||
{/* {isActiveHour(hour) && "--> "} */}
|
||||
{hour.datetime}
|
||||
{hourGroup.length > 1
|
||||
? (
|
||||
<div className="flex flex-col items-center">
|
||||
<span>{hour.datetime}</span>
|
||||
<span>|</span>
|
||||
<span>{localDateTime(hourGroup[hourGroup.length - 1])}</span>
|
||||
</div>
|
||||
)
|
||||
: <div className="flex flex-col items-center">{hour.datetime}</div>
|
||||
}
|
||||
</span>
|
||||
<div className="flex justify-center">
|
||||
<EditableHourCode
|
||||
@ -158,17 +177,23 @@ export default function EditableHour({
|
||||
{hour.categoryCode != undefined ?
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{hour.measurements?.map(m =>
|
||||
Array.from({ length: m.value }).map((_, index) =>
|
||||
<div key={`${m.id}-${index}`} className="hover:cursor-no-drop" onClick={(e) => {
|
||||
decrementCount({ metricId: m.metricId, hourId: hour.id });
|
||||
}}>
|
||||
<Icon name={titleCase(m.icon)} size={24} color={hour.foreground} />
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
{
|
||||
|
||||
hour.measurements?.map(m =>
|
||||
|
||||
Array.from({ length: m.value }).map((_, index) =>
|
||||
<div key={`${m.id}-${index}`} className="hover:cursor-no-drop" onClick={(e) => {
|
||||
decrementCount({ metricId: m.metricId, hourId: hour.id });
|
||||
}}>
|
||||
<Icon name={titleCase(m.icon)} size={24} color={hour.foreground} />
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
{(hour.measurements.length > 0) ?
|
||||
(<span className="mx-2 opacity-50">|</span>)
|
||||
(<span className="mx-2 opacity-50">
|
||||
{/* {JSON.stringify(hour.measurements.length)} */}
|
||||
|
|
||||
</span>)
|
||||
: ""
|
||||
}
|
||||
|
||||
|
||||
@ -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: <Home size={18} />,
|
||||
icon: <SunMoon size={18} />,
|
||||
path: "/dashboard/day/today",
|
||||
},
|
||||
{
|
||||
name: "Month View",
|
||||
name: "Timeline View",
|
||||
icon: <Calendar size={18} />,
|
||||
path: "/dashboard/timeline/month",
|
||||
path: "/dashboard/timeline",
|
||||
},
|
||||
...searchItem,
|
||||
{
|
||||
|
||||
@ -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[];
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user