Add totals by class

This commit is contained in:
april 2024-01-11 16:40:54 -06:00
parent fbc1df5f34
commit 91f6da1f5e

View File

@ -3,17 +3,31 @@ import { VerticalLogItem } from "@/ui/display/log-item";
import ErrorDisplay from "@/ui/error-display";
import { useApi } from "@/util/api";
import { Center, Group, Loader, Container, Stack, Title } from "@mantine/core";
import { randomId } from "@mantine/hooks";
import { useQuery } from "@tanstack/react-query";
import { useEffect, useState } from "react";
export default function Dashboard() {
const client = useApi();
const [totalsData, setTotalsData] = useState<{
by_class: object;
totals: object;
} | null>(null);
const totals = useQuery({
queryKey: ["totals"],
queryFn: async () =>
await client.get(`/flights/totals`).then((res) => res.data),
});
useEffect(() => {
if (totals.isFetched && !!totals.data) {
console.log(totals.data);
setTotalsData(totals.data);
}
}, [totals.data]);
return (
<Container>
{totals.isLoading ? (
@ -29,50 +43,90 @@ export default function Dashboard() {
<Title order={3}>Totals</Title>
<CollapsibleFieldset legend="Time" w="100%">
<Group grow>
<VerticalLogItem label="All" content={totals.data.time_total} />
<VerticalLogItem label="Solo" content={totals.data.time_solo} />
<VerticalLogItem label="PIC" content={totals.data.time_pic} />
<VerticalLogItem label="SIC" content={totals.data.time_sic} />
<VerticalLogItem
label="All"
content={totalsData?.totals?.time_total ?? 0.0}
/>
<VerticalLogItem
label="Solo"
content={totalsData?.totals?.time_solo ?? 0.0}
/>
<VerticalLogItem
label="PIC"
content={totalsData?.totals?.time_pic ?? 0.0}
/>
<VerticalLogItem
label="SIC"
content={totalsData?.totals?.time_sic ?? 0.0}
/>
<VerticalLogItem
label="Instrument"
content={totals.data.time_instrument}
content={totalsData?.totals?.time_instrument ?? 0.0}
/>
<VerticalLogItem
label="Simulator"
content={totals.data.time_sim}
content={totalsData?.totals?.time_sim ?? 0.0}
/>
</Group>
</CollapsibleFieldset>
<CollapsibleFieldset legend="By Class" w="100%">
<Group grow>
{totalsData?.by_class?.map((total: object[]) => (
<>
<VerticalLogItem
key={randomId()}
label={total.aircraft_class}
content={total.time_total ?? 0.0}
/>
</>
))}
</Group>
</CollapsibleFieldset>
<CollapsibleFieldset legend="Landings" w="100%">
<Group grow>
<VerticalLogItem label="Day" content={totals.data.landings_day} />
<VerticalLogItem
label="Day"
content={totalsData?.totals?.landings_day ?? 0}
/>
<VerticalLogItem
label="Night"
content={totals.data.landings_night}
content={totalsData?.totals?.landings_night ?? 0}
/>
</Group>
</CollapsibleFieldset>
<CollapsibleFieldset legend="Cross-Country" w="100%">
<Group grow>
<VerticalLogItem label="Hours" content={totals.data.time_xc} />
<VerticalLogItem
label="Hours"
content={totalsData?.totals?.time_xc ?? 0.0}
/>
<VerticalLogItem
label="Dual Recvd"
content={totals.data.xc_dual_recvd}
content={totalsData?.totals?.xc_dual_recvd ?? 0.0}
/>
<VerticalLogItem
label="Solo"
content={totalsData?.totals?.xc_solo ?? 0.0}
/>
<VerticalLogItem
label="PIC"
content={totalsData?.totals?.xc_pic ?? 0.0}
/>
<VerticalLogItem label="Solo" content={totals.data.xc_solo} />
<VerticalLogItem label="PIC" content={totals.data.xc_pic} />
</Group>
</CollapsibleFieldset>
<CollapsibleFieldset legend="Night" w="100%">
<Group grow>
<VerticalLogItem label="Hours" content={totals.data.time_night} />
<VerticalLogItem
label="Hours"
content={totalsData?.totals?.time_night ?? 0.0}
/>
<VerticalLogItem
label="Night Dual Received"
content={totals.data.night_dual_recvd}
content={totalsData?.totals?.night_dual_recvd ?? 0.0}
/>
<VerticalLogItem
label="Night PIC"
content={totals.data.night_pic}
content={totalsData?.totals?.night_pic ?? 0.0}
/>
</Group>
</CollapsibleFieldset>