Compare commits
2 Commits
feature/81
...
feature/82
| Author | SHA1 | Date | |
|---|---|---|---|
| d0f15ee160 | |||
| 294766b8da |
@@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/png" href="/noahspan-logo.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + React + TS</title>
|
<title>Flying</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { Box, Container, Grid, Spinner } from "@noahspan/noahspan-components";
|
import { Box, Card, CardContent, Container, Grid, Skeleton, Spinner, Stack, theme, Typography, useMediaQuery } from "@noahspan/noahspan-components";
|
||||||
import LogbookCard from "../logbookCard/LogbookCard";
|
import LogbookCard from "../logbookCard/LogbookCard";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useLogs } from "../../hooks/logs/UseLogs";
|
import { useLogs } from "../../hooks/logs/UseLogs";
|
||||||
@@ -7,6 +7,7 @@ import { ILogbookEntry } from "../logbook/ILogbookEntry";
|
|||||||
const Flights = () => {
|
const Flights = () => {
|
||||||
const [flights, setFlights] = useState<ILogbookEntry[]>([]);
|
const [flights, setFlights] = useState<ILogbookEntry[]>([]);
|
||||||
const { logs, isLoading } = useLogs();
|
const { logs, isLoading } = useLogs();
|
||||||
|
const isMedium = useMediaQuery(theme.breakpoints.up('md'));
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const flights: ILogbookEntry[] | undefined = logs?.filter((log: ILogbookEntry) => {
|
const flights: ILogbookEntry[] | undefined = logs?.filter((log: ILogbookEntry) => {
|
||||||
@@ -24,21 +25,48 @@ const Flights = () => {
|
|||||||
<Container>
|
<Container>
|
||||||
<Box sx={{ margin: '20px' }}>
|
<Box sx={{ margin: '20px' }}>
|
||||||
<Grid container spacing={2}>
|
<Grid container spacing={2}>
|
||||||
{isLoading &&
|
<Grid size={isMedium ? 11 : 6}>
|
||||||
<>
|
<Typography variant="h4">Flights</Typography>
|
||||||
<Grid display="flex" justifyContent="center" size={12}>
|
|
||||||
<Spinner />
|
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid display="flex" justifyContent="center" size={12}>
|
|
||||||
Loading...
|
|
||||||
</Grid>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
{!isLoading &&
|
{!isLoading &&
|
||||||
<Grid size={12}>
|
<Grid size={12}>
|
||||||
<LogbookCard logs={flights} mode='flights' />
|
<LogbookCard logs={flights} mode='flights' />
|
||||||
</Grid>
|
</Grid>
|
||||||
}
|
}
|
||||||
|
{isLoading && [...Array(6)].map((_element, index) => {
|
||||||
|
return (
|
||||||
|
<Grid display='flex' justifyContent='center' size={12}>
|
||||||
|
<Card
|
||||||
|
key={index}
|
||||||
|
sx={{
|
||||||
|
width: '100%'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CardContent>
|
||||||
|
<Grid container>
|
||||||
|
<Grid size={12}>
|
||||||
|
<Skeleton height={60} width={200} />
|
||||||
|
<Skeleton height={30} width={200} />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={12}>
|
||||||
|
<Skeleton height={300} />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={12}>
|
||||||
|
{[...Array(6)].map((_element, index) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Skeleton height={20} width={300} />
|
||||||
|
<Skeleton height={40} width={300} />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
})}
|
||||||
</Grid>
|
</Grid>
|
||||||
</Box>
|
</Box>
|
||||||
</Container>
|
</Container>
|
||||||
|
|||||||
@@ -112,7 +112,7 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
|
|||||||
id: 'landingsDay',
|
id: 'landingsDay',
|
||||||
accessorKey: 'landingsDay',
|
accessorKey: 'landingsDay',
|
||||||
header: 'Day',
|
header: 'Day',
|
||||||
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
|
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
|
||||||
meta: {
|
meta: {
|
||||||
align: 'right',
|
align: 'right',
|
||||||
headerAlign: 'right'
|
headerAlign: 'right'
|
||||||
@@ -122,7 +122,7 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
|
|||||||
id: 'landingsNight',
|
id: 'landingsNight',
|
||||||
accessorKey: 'landingsNight',
|
accessorKey: 'landingsNight',
|
||||||
header: 'Night',
|
header: 'Night',
|
||||||
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
|
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
|
||||||
meta: {
|
meta: {
|
||||||
align: 'right',
|
align: 'right',
|
||||||
headerAlign: 'right'
|
headerAlign: 'right'
|
||||||
|
|||||||
Reference in New Issue
Block a user