diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json index af924a8..636138f 100644 --- a/client/public/locales/en/common.json +++ b/client/public/locales/en/common.json @@ -237,6 +237,9 @@ "home": { "home": "Home" }, + "help": { + "help": "Help" + }, "table": { "actions": "Actions" }, @@ -246,6 +249,9 @@ "home": { "list": "Home | Spoolman" }, + "help": { + "list": "Help | Spoolman" + }, "filament": { "list": "Filaments | Spoolman", "show": "#{{id}} Show Filament | Spoolman", diff --git a/client/src/App.tsx b/client/src/App.tsx index 652f254..bc2c03e 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -10,7 +10,7 @@ import dataProvider from "./components/dataProvider"; import { useTranslation } from "react-i18next"; import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom"; import { ColorModeContextProvider } from "./contexts/color-mode"; -import { FileOutlined, HighlightOutlined, HomeOutlined, UserOutlined } from "@ant-design/icons"; +import { FileOutlined, HighlightOutlined, HomeOutlined, QuestionOutlined, UserOutlined } from "@ant-design/icons"; import { ConfigProvider } from "antd"; import React from "react"; import { Locale } from "antd/es/locale"; @@ -139,6 +139,14 @@ function App() { icon: , }, }, + { + name: "help", + list: "/help", + meta: { + canDelete: false, + icon: , + }, + }, ]} options={{ syncWithLocation: true, @@ -194,6 +202,7 @@ function App() { } /> } /> + } /> } /> diff --git a/client/src/pages/help/index.tsx b/client/src/pages/help/index.tsx new file mode 100644 index 0000000..7394435 --- /dev/null +++ b/client/src/pages/help/index.tsx @@ -0,0 +1,85 @@ +import React from "react"; +import { IResourceComponentsProps } from "@refinedev/core"; +import dayjs from "dayjs"; +import utc from "dayjs/plugin/utc"; +import { Content } from "antd/es/layout/layout"; +import { List, theme } from "antd"; +import Title from "antd/es/typography/Title"; +import { FileOutlined, HighlightOutlined, UserOutlined } from "@ant-design/icons"; +import { Link } from "react-router-dom"; + +dayjs.extend(utc); + +const { useToken } = theme; + +export const Help: React.FC = () => { + const { token } = useToken(); + // const t = useTranslate(); + + return ( + + Help +

Here are some tips to get you started.

+

Spoolman holds 3 different types of data:

+ , + }, + { + title: "Spools", + description: "Individual physical spools of a specific filament.", + icon: , + }, + { + title: "Vendors", + description: "The companies that make the filament.", + icon: , + }, + ]} + renderItem={(item) => ( + + + + )} + /> +

+ To enter a new spool into the database, you first need to create a Filament{" "} + object for it. Once that is done, you can then create a Spool object for that + individual spool. If you then purchase additional spools of the same filament, you can just create additional + Spool objects, and re-use the same Filament object. +

+

+ You can optionally also create a Vendor object for the company that makes the + filament, if you want to track that information. +

+

+ You can connect other 3D printer services to Spoolman, such as Moonraker, which can then automatically track + filament usage and update the Spool objects for you. See the{" "} + + Spoolman README + {" "} + for how to do that. +

+ + ); +}; + +export default Help; diff --git a/client/src/pages/home/index.tsx b/client/src/pages/home/index.tsx index b4c7e37..03de5e1 100644 --- a/client/src/pages/home/index.tsx +++ b/client/src/pages/home/index.tsx @@ -1,12 +1,14 @@ -import React from "react"; -import { IResourceComponentsProps } from "@refinedev/core"; +import React, { ReactNode } from "react"; +import { IResourceComponentsProps, useList, useTranslate } from "@refinedev/core"; import dayjs from "dayjs"; import utc from "dayjs/plugin/utc"; import { Content } from "antd/es/layout/layout"; -import { Collapse, List, theme } from "antd"; +import { Card, Col, Row, Statistic, theme } from "antd"; import Title from "antd/es/typography/Title"; import Logo from "../../icon.svg?react"; -import { FileOutlined, HighlightOutlined, UserOutlined } from "@ant-design/icons"; +import { FileOutlined, HighlightOutlined, PlusOutlined, UnorderedListOutlined, UserOutlined } from "@ant-design/icons"; +import { ISpool } from "../spools/model"; +import { Link } from "react-router-dom"; dayjs.extend(utc); @@ -14,14 +16,47 @@ const { useToken } = theme; export const Home: React.FC = () => { const { token } = useToken(); - // const t = useTranslate(); + const t = useTranslate(); + + const spools = useList({ + resource: "spool", + pagination: { pageSize: 1 }, + }); + const filaments = useList({ + resource: "filament", + pagination: { pageSize: 1 }, + }); + const vendors = useList({ + resource: "vendor", + pagination: { pageSize: 1 }, + }); + + const hasSpools = !spools.data || spools.data.data.length > 0; + + const ResourceStatsCard = (props: { loading: boolean; value: number; resource: string; icon: ReactNode }) => ( + + + + , + + + , + ]} + > + + + + ); return ( = () => { display: "flex", alignItems: "center", justifyContent: "center", - margin: "1em 0", - fontSize: token.fontSizeHeading1 + 8, + fontSize: token.fontSizeHeading1, }} >
@@ -52,68 +85,35 @@ export const Home: React.FC = () => {
Spoolman - Getting Started, - children: ( - <> -

Here are some tips to get you started.

-

Spoolman holds 3 different types of data:

- , - }, - { - title: "Spools", - description: "Individual physical spools of a specific filament.", - icon: , - }, - { - title: "Vendors", - description: "The companies that make the filament.", - icon: , - }, - ]} - renderItem={(item) => ( - - - - )} - /> -

- To enter a new spool into the database, you first need to create a Filament object - for it. Once that is done, you can then create a Spool object for that individual - spool. If you then purchase additional spools of the same filament, you can just create additional - Spool objects, and re-use the same Filament object. -

-

- You can optionally also create a Vendor object for the company that makes the - filament, if you want to track that information. -

-

- You can connect other 3D printer services to Spoolman, such as Moonraker, which can then automatically - track filament usage and update the Spool objects for you. See the{" "} - - Spoolman README - {" "} - for how to do that. -

- - ), - }, - ]} - bordered={false} - ghost - /> + + } + /> + } + /> + } + /> + + {!hasSpools && ( + <> +

Welcome to your Spoolman instance!

+

+ It looks like you haven't added any spools yet. See the Help page for help getting + started. +

+ + )} ); };