Compare commits
4 Commits
feature/82
...
v1.4.1
| Author | SHA1 | Date | |
|---|---|---|---|
| f94d0f7ca9 | |||
| fc5811c3b6 | |||
| 9833bc6593 | |||
| 8d1842efa7 |
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "api",
|
"name": "api",
|
||||||
"version": "1.3.1",
|
"version": "1.4.0",
|
||||||
"description": "",
|
"description": "",
|
||||||
"author": "",
|
"author": "",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
|||||||
@@ -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,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "app",
|
"name": "app",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "1.3.1",
|
"version": "1.4.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
|
|||||||
@@ -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}>
|
</Grid>
|
||||||
<Spinner />
|
|
||||||
</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(4)].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>
|
||||||
|
|||||||
@@ -6,7 +6,8 @@ import {
|
|||||||
import { ILogbookEntry } from './ILogbookEntry';
|
import { ILogbookEntry } from './ILogbookEntry';
|
||||||
|
|
||||||
const columnTotal = (info: HeaderContext<ILogbookEntry, unknown>): number => {
|
const columnTotal = (info: HeaderContext<ILogbookEntry, unknown>): number => {
|
||||||
const values: number[] = info.table.getFilteredRowModel().rows.map((row: any) => Number(row.getValue(info.column.id))).filter((value: any) => !Number.isNaN(value));
|
const blah = info.table
|
||||||
|
const values: number[] = info.table.getPaginationRowModel().rows.map((row: any) => Number(row.getValue(info.column.id))).filter((value: any) => !Number.isNaN(value));
|
||||||
let total: number = 0;
|
let total: number = 0;
|
||||||
|
|
||||||
if (values.length > 0) {
|
if (values.length > 0) {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@noahspan/flying",
|
"name": "@noahspan/flying",
|
||||||
"version": "1.3.0",
|
"version": "1.4.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "concurrently 'npm run start:azure -w api' 'wait-on tcp:0.0.0.0:7071 && npm run dev -w app'",
|
"start": "concurrently 'npm run start:azure -w api' 'wait-on tcp:0.0.0.0:7071 && npm run dev -w app'",
|
||||||
"format": "prettier --write \"**/src/**/*.ts\" \"**/test/**/*.ts\"",
|
"format": "prettier --write \"**/src/**/*.ts\" \"**/test/**/*.ts\"",
|
||||||
|
|||||||
Reference in New Issue
Block a user