Add OverviewConfig to allow for additional queries, setup sem2 page
This commit is contained in:
parent
0a89712965
commit
44df8a6fc6
36
src/app/OverviewPage.tsx
Normal file
36
src/app/OverviewPage.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import {SubjectComparisonCard, SubjectOverviewCard} from "@/app/a.client";
|
||||
import {CalendarOverviewCard} from "@/app/calendarOverviewCard";
|
||||
import {OverviewConfig} from "@/app/overviewConfig";
|
||||
|
||||
export default function OverviewPage({config}: {
|
||||
config: OverviewConfig
|
||||
}) {
|
||||
const projectIds = config.subjects.map((subject) => subject.projectId);
|
||||
|
||||
return (
|
||||
<main className="m-6">
|
||||
<h1 className="text-3xl font-semibold text-slate-900 dark:text-white my-2">{config.title}</h1>
|
||||
|
||||
<div className="grid gap-5 grid-cols-1 sm:grid-cols-4">
|
||||
{config.subjects.map((subject) => (
|
||||
<SubjectOverviewCard
|
||||
key={subject.projectId}
|
||||
projectId={subject.projectId}
|
||||
title={subject.title}
|
||||
startTime={config.timePeriod.start}
|
||||
endTime={config.timePeriod.end}
|
||||
/>
|
||||
))}
|
||||
|
||||
|
||||
<CalendarOverviewCard
|
||||
startTime={config.timePeriod.start}
|
||||
endTime={config.timePeriod.end}
|
||||
projectIds={projectIds}
|
||||
/>
|
||||
|
||||
<SubjectComparisonCard projectIds={projectIds}/>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@ -8,10 +8,14 @@ import * as R from "ramda";
|
||||
|
||||
export function SubjectOverviewCard({
|
||||
projectId,
|
||||
title
|
||||
title,
|
||||
startTime = '2023-12-15T00:00:00.000Z',
|
||||
endTime = '2024-01-25T00:00:00.000Z',
|
||||
}: {
|
||||
projectId: number,
|
||||
title?: string
|
||||
startTime?: string,
|
||||
endTime?: string,
|
||||
}) {
|
||||
const {
|
||||
data: _project
|
||||
@ -37,7 +41,7 @@ export function SubjectOverviewCard({
|
||||
data,
|
||||
error,
|
||||
isLoading,
|
||||
} = useSWR<any[]>(`/api/time_entry?select=raw_json&project_id=eq.${projectId}&start=gt.2023-12-15T00:00:00.000Z`, fetcher);
|
||||
} = useSWR<any[]>(`/api/time_entry?select=raw_json&project_id=eq.${projectId}&start=gt.${startTime}&start=lt.${endTime}`, fetcher);
|
||||
const [a, setA] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@ -8,16 +8,7 @@ import * as dFns from 'date-fns';
|
||||
import CalendarHeatmap from 'react-calendar-heatmap';
|
||||
import 'react-calendar-heatmap/dist/styles.css';
|
||||
import './calendar-styles.css'
|
||||
import { Tooltip } from 'react-tooltip';
|
||||
|
||||
const initialDate = dFns.parseISO('2023-12-15T00:00:00.000Z')
|
||||
const endDate = dFns.parseISO('2024-01-25T00:00:00.000Z')
|
||||
export const projectIds = [
|
||||
195482340,
|
||||
195519024,
|
||||
195518593,
|
||||
195754611,
|
||||
];
|
||||
import {Tooltip} from 'react-tooltip';
|
||||
|
||||
const dailyGoal = 4;
|
||||
const granularity = 4;
|
||||
@ -29,17 +20,15 @@ function computeCompletionShade(value: number) {
|
||||
return linearValue;
|
||||
}
|
||||
|
||||
function useCalendarData() {
|
||||
function useCalendarData(projectIds: number[], initialDate: string, endDate: string) {
|
||||
const {
|
||||
data: timeEntries,
|
||||
error,
|
||||
isLoading,
|
||||
} = useSWR<{
|
||||
raw_json: {
|
||||
start: string,
|
||||
seconds: number,
|
||||
}
|
||||
}[]>(`/api/time_entry?select=raw_json&start=gt.${dFns.formatISO(initialDate)}&project_id=in.(${projectIds.join(',')})`, fetcher, {});
|
||||
}[]>(`/api/time_entry?select=raw_json&start=gt.${(initialDate)}&start=lt.${(endDate)}&project_id=in.(${projectIds.join(',')})`, fetcher, {});
|
||||
|
||||
const [data, setData] = useState<{
|
||||
date: Date,
|
||||
@ -60,8 +49,8 @@ function useCalendarData() {
|
||||
|
||||
// Fill in missing days, hacky
|
||||
dFns.eachDayOfInterval({
|
||||
start: initialDate,
|
||||
end: endDate,
|
||||
start: dFns.parseISO(initialDate),
|
||||
end: dFns.parseISO(endDate),
|
||||
}).forEach((date) => {
|
||||
const key = dFns.formatISO(date);
|
||||
if (summed[key] == undefined) {
|
||||
@ -79,8 +68,18 @@ function useCalendarData() {
|
||||
return data
|
||||
}
|
||||
|
||||
export function CalendarOverviewCard() {
|
||||
const data = useCalendarData();
|
||||
export function CalendarOverviewCard({
|
||||
projectIds,
|
||||
startTime,
|
||||
endTime
|
||||
}: {
|
||||
projectIds: number[],
|
||||
startTime: string,
|
||||
endTime: string,
|
||||
}) {
|
||||
const initialDate = dFns.parseISO(startTime);
|
||||
const endDate = dFns.parseISO(endTime);
|
||||
const data = useCalendarData(projectIds, startTime, endTime);
|
||||
|
||||
return <Card className="col-span-1">
|
||||
<Tooltip id="calendar-tooltip"/>
|
||||
@ -94,7 +93,7 @@ export function CalendarOverviewCard() {
|
||||
tooltipDataAttrs={(value: any) => {
|
||||
return value.date ? {
|
||||
'data-tooltip-id': `calendar-tooltip`,
|
||||
'data-tooltip-content': value.count ?`${dFns.format(value.date, 'EEE do')}: ${value.count.toFixed(2)} hours` : `${dFns.format(value.date, 'EEE do')}`
|
||||
'data-tooltip-content': value.count ? `${dFns.format(value.date, 'EEE do')}: ${value.count.toFixed(2)} hours` : `${dFns.format(value.date, 'EEE do')}`
|
||||
} : undefined
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -5,8 +5,8 @@ import './globals.css'
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create Next App',
|
||||
description: 'Generated by create next app',
|
||||
title: 'Work Tracker',
|
||||
description: 'Track time spent on different subjects',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
40
src/app/overviewConfig.ts
Normal file
40
src/app/overviewConfig.ts
Normal file
@ -0,0 +1,40 @@
|
||||
export interface OverviewConfig {
|
||||
title: string,
|
||||
|
||||
subjects: {
|
||||
title?: string,
|
||||
projectId: number,
|
||||
}[],
|
||||
|
||||
goalHours: number,
|
||||
|
||||
timePeriod: {
|
||||
start: string,
|
||||
end: string
|
||||
},
|
||||
}
|
||||
|
||||
export const semester1Revision: OverviewConfig = {
|
||||
title: 'Semester 1 Revision',
|
||||
goalHours: 4,
|
||||
subjects: [
|
||||
{
|
||||
projectId: 195482340,
|
||||
},
|
||||
{
|
||||
title: 'Measure Theory',
|
||||
projectId: 195519024,
|
||||
},
|
||||
{
|
||||
title: 'Quantum Mechanics',
|
||||
projectId: 195518593,
|
||||
},
|
||||
{
|
||||
projectId: 195754611,
|
||||
}
|
||||
],
|
||||
timePeriod: {
|
||||
start: "2023-12-15T00:00:00.000Z",
|
||||
end: "2024-01-25T00:00:00.000Z"
|
||||
}
|
||||
}
|
||||
@ -1,35 +1,6 @@
|
||||
import {SubjectComparisonCard, SubjectOverviewCard} from "@/app/a.client";
|
||||
import {CalendarOverviewCard, projectIds} from "@/app/calendarOverviewCard";
|
||||
import OverviewPage from "@/app/OverviewPage";
|
||||
import {semester1Revision} from "@/app/overviewConfig";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="m-6">
|
||||
<h1 className="text-3xl font-semibold text-slate-900 dark:text-white my-2">Revision Tracker</h1>
|
||||
|
||||
<div className="grid gap-5 grid-cols-1 sm:grid-cols-4">
|
||||
<SubjectOverviewCard
|
||||
projectId={195482340}
|
||||
/>
|
||||
|
||||
<SubjectOverviewCard
|
||||
title='Measure Theory'
|
||||
projectId={195519024}
|
||||
/>
|
||||
|
||||
<SubjectOverviewCard
|
||||
title='Quantum Mechanics'
|
||||
projectId={195518593}
|
||||
/>
|
||||
|
||||
<SubjectOverviewCard
|
||||
projectId={195754611}
|
||||
/>
|
||||
|
||||
<CalendarOverviewCard/>
|
||||
|
||||
<SubjectComparisonCard projectIds={projectIds}/>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
)
|
||||
return <OverviewPage config={semester1Revision}/>
|
||||
}
|
||||
|
||||
32
src/app/sem2/page.tsx
Normal file
32
src/app/sem2/page.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import OverviewPage from "@/app/OverviewPage";
|
||||
import {OverviewConfig} from "@/app/overviewConfig";
|
||||
|
||||
const semester2: OverviewConfig = {
|
||||
title: 'Semester 2',
|
||||
goalHours: 4,
|
||||
subjects: [
|
||||
{
|
||||
projectId: 195754611,
|
||||
},
|
||||
{
|
||||
projectId: 199383703,
|
||||
},
|
||||
{
|
||||
projectId: 199383691,
|
||||
},
|
||||
{
|
||||
projectId: 198859760,
|
||||
},
|
||||
{
|
||||
projectId: 199383698,
|
||||
},
|
||||
],
|
||||
timePeriod: {
|
||||
start: "2024-02-03T00:00:00.000Z",
|
||||
end: "2024-05-10T00:00:00.000Z"
|
||||
}
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
return <OverviewPage config={semester2}/>
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user