From a33e0d213b4b128acfdf244f613cad0c82ba8468 Mon Sep 17 00:00:00 2001 From: James Bithell Date: Sun, 9 Jun 2024 18:48:49 +0100 Subject: [PATCH] Tweaks to be ready for v4 --- src/components/navigation/DataInformation.tsx | 4 +- src/components/navigation/Layout.tsx | 2 - src/components/templates/TideTablePage.tsx | 10 ---- src/components/tideTables/TideTable.tsx | 6 ++- src/components/tideTables/TideTableMobile.tsx | 3 +- .../tideTables/TideTablesMonthList.tsx | 23 ++++---- .../tideTables/TidesTablesIndexList.tsx | 17 ++++++ src/pages/chart.tsx | 52 ------------------ src/pages/index.tsx | 39 +++++++++----- src/pages/tide-tables.tsx | 53 +++++++++---------- 10 files changed, 84 insertions(+), 125 deletions(-) create mode 100644 src/components/tideTables/TidesTablesIndexList.tsx delete mode 100644 src/pages/chart.tsx diff --git a/src/components/navigation/DataInformation.tsx b/src/components/navigation/DataInformation.tsx index 1054e84..2b14c46 100644 --- a/src/components/navigation/DataInformation.tsx +++ b/src/components/navigation/DataInformation.tsx @@ -1,12 +1,10 @@ import { Text } from "@mantine/core"; import React from "react"; -import { useBuildDate } from "../../hooks/use-build-date"; export function DataInformation() { - const buildYear = useBuildDate(); - console.log(buildYear); return ( <> + Tide times for Porthmadog, North Wales, United Kingdom. Times are GMT/BST. Heights shown are heights above chart datum. Low water times are not provided due to seasonal variations and river flows. diff --git a/src/components/navigation/Layout.tsx b/src/components/navigation/Layout.tsx index e5f9bd9..c1e03a2 100644 --- a/src/components/navigation/Layout.tsx +++ b/src/components/navigation/Layout.tsx @@ -8,9 +8,7 @@ import { useMatches, } from "@mantine/core"; import React from "react"; -import { Header } from "./Header"; import { Footer } from "./Footer"; -import { useDisclosure } from "@mantine/hooks"; export default function Layout({ children, diff --git a/src/components/templates/TideTablePage.tsx b/src/components/templates/TideTablePage.tsx index a1a7bd7..9ec2187 100644 --- a/src/components/templates/TideTablePage.tsx +++ b/src/components/templates/TideTablePage.tsx @@ -3,14 +3,6 @@ import { Link, type HeadFC, type PageProps } from "gatsby"; import { Box, Button, - Card, - Center, - Container, - Group, - Image, - Table, - Text, - Title, } from "@mantine/core"; import TidalData from "../../../data/tides.json"; import { SEO } from "../../components/SEO"; @@ -18,11 +10,9 @@ import Layout from "../navigation/Layout"; import { DateTime } from "luxon"; import { TidesJson_PDFObject, TidesJson_ScheduleObject } from "../../types"; import { - IconArrowBack, IconArrowLeft, IconDownload, IconFileTypePdf, - IconPdf, } from "@tabler/icons-react"; import { TideTable } from "../tideTables/TideTable"; import { TideTableMobile } from "../tideTables/TideTableMobile"; diff --git a/src/components/tideTables/TideTable.tsx b/src/components/tideTables/TideTable.tsx index 0eb3ef1..c6d4ee1 100644 --- a/src/components/tideTables/TideTable.tsx +++ b/src/components/tideTables/TideTable.tsx @@ -1,4 +1,4 @@ -import { Table, Text } from "@mantine/core"; +import { Badge, Table, Text } from "@mantine/core"; import React from "react"; import { DateTime } from "luxon"; import { TidesJson_ScheduleObject } from "../../types"; @@ -27,6 +27,10 @@ export function TideTable({ data }: { data: TidesJson_ScheduleObject[] }) { weekday: "long", day: "2-digit", })} + {DateTime.fromSQL(date.date).toJSDate().setHours(0, 0, 0, 0) == + new Date().setHours(0, 0, 0, 0) ? ( + Today + ) : null} diff --git a/src/components/tideTables/TideTableMobile.tsx b/src/components/tideTables/TideTableMobile.tsx index 1353bf8..9a9523d 100644 --- a/src/components/tideTables/TideTableMobile.tsx +++ b/src/components/tideTables/TideTableMobile.tsx @@ -2,8 +2,7 @@ import { Badge, Group, Table, Text } from "@mantine/core"; import React from "react"; import { DateTime } from "luxon"; import { TidesJson_ScheduleObject } from "../../types"; -import { IconSun, IconSunrise, IconSunset } from "@tabler/icons-react"; -import { devNull } from "os"; +import { IconSunrise, IconSunset } from "@tabler/icons-react"; export function TideTableMobile({ data, diff --git a/src/components/tideTables/TideTablesMonthList.tsx b/src/components/tideTables/TideTablesMonthList.tsx index 5ac0a24..ee120ae 100644 --- a/src/components/tideTables/TideTablesMonthList.tsx +++ b/src/components/tideTables/TideTablesMonthList.tsx @@ -1,19 +1,18 @@ -import { Badge, Card, Group, SimpleGrid, Table, Text } from "@mantine/core"; -import React from "react"; -import { DateTime } from "luxon"; -import { TidesJson_PDFObject, TidesJson_ScheduleObject } from "../../types"; +import { Card, Group, SimpleGrid, Text } from "@mantine/core"; import { - IconArrowRight, - IconSun, - IconSunrise, - IconSunset, + IconDownload } from "@tabler/icons-react"; -import { devNull } from "os"; import { Link } from "gatsby"; +import React from "react"; +import { TidesJson_PDFObject } from "../../types"; -export function TideTablesMonthList({ files }: { files: TidesJson_PDFObject[] }) { +export function TideTablesMonthList({ + files, +}: { + files: TidesJson_PDFObject[]; +}) { return ( - + {files.map((month: TidesJson_PDFObject, index: React.Key) => ( {month.name} - + diff --git a/src/components/tideTables/TidesTablesIndexList.tsx b/src/components/tideTables/TidesTablesIndexList.tsx new file mode 100644 index 0000000..4d8471d --- /dev/null +++ b/src/components/tideTables/TidesTablesIndexList.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { TidesJson_PDFObject } from "../../types"; +import TidalData from "../../../data/tides.json"; +import { TideTablesMonthList } from "./TideTablesMonthList"; + +export function TideTablesIndexList() { + const month = new Date(); + month.setHours(0, 0, 0, 0); + month.setDate(1); + const nextYear = new Date(month); + nextYear.setFullYear(month.getFullYear() + 1); + const files = TidalData.pdfs.filter((pdf: TidesJson_PDFObject) => { + let date = new Date(pdf.date); + return date < nextYear && date >= month; + }); + return ; +} diff --git a/src/pages/chart.tsx b/src/pages/chart.tsx deleted file mode 100644 index 71825a7..0000000 --- a/src/pages/chart.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import * as React from "react" -import type { HeadFC, PageProps } from "gatsby" -import { Center, Container, Image, Text } from "@mantine/core" -import Logo from "./../images/porthmadogCob.jpg"; -import Layout from "../components/navigation/Layout" -import TidalData from "../../data/tides.json"; -import { SEO } from "../components/SEO"; -import { DateTime } from "luxon"; -import { LineChart } from "@mantine/charts"; - -const Page: React.FC = () => { - const today = new Date(); - today.setHours(0, 0, 0, 0); - const nextWeek = new Date(today); - nextWeek.setDate(today.getDate() + 2); - const tides = TidalData.schedule.filter(element => { - let date = new Date(element.date); - return date >= today && date <= nextWeek - }); - - return ( - - - day.groups.map(tide => ({ - date: new Date(DateTime.fromSQL(day.date + " " + tide.time).toISO()).getTime() / 1000, - Height: Number(tide.height) - }))).flat()} - dataKey="date" - xAxisLabel="Date" - yAxisLabel="Amount" - yAxisProps={{ domain: [0, 6] }} - xAxisProps={{ tickFormatter: (date: number) => DateTime.fromMillis(date * 1000).toLocaleString(DateTime.TIME_SIMPLE), domain: [new Date().getTime(), nextWeek.getTime()] }} - unit="m" - connectNulls={false} - series={[ - { name: 'Height', color: 'indigo.6' }, - ]} - curveType="step" - gridAxis="y" - /> - - - ) -} - -export default Page - -export const Head: HeadFC = () => ( - -) \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7884b7b..4dfe86f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,26 +1,23 @@ -import * as React from "react"; -import { Link, type HeadFC, type PageProps } from "gatsby"; import { - Badge, Button, Card, Center, - Container, Group, - Image, SimpleGrid, + Stack, Text, Title, - useMatches, + useMatches } from "@mantine/core"; -import Logo from "./../images/porthmadogCob.jpg"; -import Layout from "../components/navigation/Layout"; +import { IconArrowRight, IconTable } from "@tabler/icons-react"; +import { Link, type HeadFC, type PageProps } from "gatsby"; +import { DateTime } from "luxon"; +import * as React from "react"; import TidalData from "../../data/tides.json"; import { SEO } from "../components/SEO"; -import { DateTime } from "luxon"; -import { LineChart } from "@mantine/charts"; +import Layout from "../components/navigation/Layout"; +import { TideTablesIndexList } from "../components/tideTables/TidesTablesIndexList"; import { TidesJson_ScheduleObject } from "../types"; -import { IconArrowRight, IconTable } from "@tabler/icons-react"; const Page: React.FC = () => { const daysToDisplay = useMatches({ base: 5, sm: 6, md: 8, lg: 10, xl: 10 }); @@ -37,9 +34,12 @@ const Page: React.FC = () => { return (
- - Porthmadog Tide Times - + + + Porthmadog Tide Times + + North Wales, United Kingdom +
@@ -119,6 +119,17 @@ const Page: React.FC<PageProps> = () => { </Card> </Link> </SimpleGrid> + <Group justify="space-between" mb="sm" mt="sm"> + <Title order={2} size={"h3"}> + Monthly Tide Tables + + + + + + ); }; diff --git a/src/pages/tide-tables.tsx b/src/pages/tide-tables.tsx index 117d023..08d9f73 100644 --- a/src/pages/tide-tables.tsx +++ b/src/pages/tide-tables.tsx @@ -1,23 +1,13 @@ -import * as React from "react"; +import { Accordion, Button, Text } from "@mantine/core"; +import { IconHome } from "@tabler/icons-react"; import type { HeadFC, PageProps } from "gatsby"; -import { - Accordion, - Button, - Card, - Center, - Container, - Group, - Image, - SimpleGrid, - Text, -} from "@mantine/core"; -import Layout from "../components/navigation/Layout"; -import { SEO } from "../components/SEO"; -import TidalData from "../../data/tides.json"; import { Link } from "gatsby"; -import { TidesJson_PDFObject } from "../types"; -import { IconArrowLeft, IconArrowRight, IconHome } from "@tabler/icons-react"; +import * as React from "react"; +import TidalData from "../../data/tides.json"; +import { SEO } from "../components/SEO"; +import Layout from "../components/navigation/Layout"; import { TideTablesMonthList } from "../components/tideTables/TideTablesMonthList"; +import { TidesJson_PDFObject } from "../types"; const Page: React.FC = () => { const month = new Date(); @@ -25,8 +15,8 @@ const Page: React.FC = () => { month.setDate(1); const nextYear = new Date(month); nextYear.setFullYear(month.getFullYear() + 1); - const files = TidalData.pdfs.filter((month: TidesJson_PDFObject) => { - let date = new Date(month.date); + const files = TidalData.pdfs.filter((pdf: TidesJson_PDFObject) => { + let date = new Date(pdf.date); return date < nextYear; }); const years = [ @@ -35,15 +25,16 @@ const Page: React.FC = () => { return new Date(month.date).getFullYear(); }) ), - ].map((year) => { - return { - year: year as number, - months: files.filter((month: TidesJson_PDFObject) => { - return year == new Date(month.date).getFullYear(); - }), - }; - }); - console.log(years); + ] + .map((year) => { + return { + year: year as number, + months: files.filter((month: TidesJson_PDFObject) => { + return year == new Date(month.date).getFullYear(); + }), + }; + }) + .reverse(); return ( = () => { > {years.map((year) => ( - {year.year} + + + {year.year} + +