From d1a5690c817848f15346d9000f2696bc204a0d41 Mon Sep 17 00:00:00 2001 From: Donkie Date: Tue, 14 Nov 2023 18:58:39 +0100 Subject: [PATCH] Added beginnings of a home page --- client/public/locales/en/common.json | 10 ++- client/public/locales/sv/common.json | 6 ++ client/src/App.tsx | 85 +++++++++++++------ client/src/pages/home/index.tsx | 121 +++++++++++++++++++++++++++ 4 files changed, 193 insertions(+), 29 deletions(-) create mode 100644 client/src/pages/home/index.tsx diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json index 99e2245..af924a8 100644 --- a/client/public/locales/en/common.json +++ b/client/public/locales/en/common.json @@ -9,7 +9,7 @@ "buttons": { "create": "Create", "save": "Save", - "saveAndAdd": "Save and Add", + "saveAndAdd": "Save and Add", "logout": "Log out", "delete": "Delete", "edit": "Edit", @@ -192,7 +192,7 @@ "settings_extruder_temp": "Extruder Temp", "settings_bed_temp": "Bed Temp", "color_hex": "Color", - "spools": "Show Spools" + "spools": "Show Spools" }, "fields_help": { "name": "Filament name, to distinguish this filament type among others from the same vendor. Should contain the color for example.", @@ -234,12 +234,18 @@ "vendor_updated": "This vendor has been updated by someone/something else since you opened this page. Saving will overwrite those changes!" } }, + "home": { + "home": "Home" + }, "table": { "actions": "Actions" }, "documentTitle": { "default": "Spoolman", "suffix": " | Spoolman", + "home": { + "list": "Home | Spoolman" + }, "filament": { "list": "Filaments | Spoolman", "show": "#{{id}} Show Filament | Spoolman", diff --git a/client/public/locales/sv/common.json b/client/public/locales/sv/common.json index 1a9fc08..0e11f14 100644 --- a/client/public/locales/sv/common.json +++ b/client/public/locales/sv/common.json @@ -234,12 +234,18 @@ "vendor_updated": "Den här leverantören har uppdaterats av något eller någon sedan du öppnade den här sidan. Om du sparar så skriver du över ändringarna!" } }, + "home": { + "home": "Hem" + }, "table": { "actions": "Åtgärder" }, "documentTitle": { "default": "Spoolman", "suffix": " | Spoolman", + "home": { + "list": "Hem | Spoolman" + }, "filament": { "list": "Filament | Spoolman", "show": "#{{id}} Visa filament | Spoolman", diff --git a/client/src/App.tsx b/client/src/App.tsx index 634bed4..652f254 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -5,16 +5,12 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { ErrorComponent } from "@refinedev/antd"; import "@refinedev/antd/dist/reset.css"; -import routerBindings, { - DocumentTitleHandler, - NavigateToResource, - UnsavedChangesNotifier, -} from "@refinedev/react-router-v6"; +import routerBindings, { DocumentTitleHandler, UnsavedChangesNotifier } from "@refinedev/react-router-v6"; 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, UserOutlined } from "@ant-design/icons"; +import { FileOutlined, HighlightOutlined, HomeOutlined, UserOutlined } from "@ant-design/icons"; import { ConfigProvider } from "antd"; import React from "react"; import { Locale } from "antd/es/locale"; @@ -24,15 +20,27 @@ import SpoolmanNotificationProvider from "./components/notificationProvider"; import { SpoolmanLayout } from "./components/layout"; import liveProvider from "./components/liveProvider"; -interface PageProps { +interface ResourcePageProps { resource: "spools" | "filaments" | "vendors"; page: "list" | "create" | "edit" | "show"; mode?: "create" | "clone"; } -const LoadablePage = loadable((props: PageProps) => import(`./pages/${props.resource}/${props.page}.tsx`), { +const LoadableResourcePage = loadable( + (props: ResourcePageProps) => import(`./pages/${props.resource}/${props.page}.tsx`), + { + fallback:
Page is Loading...
, + cacheKey: (props: ResourcePageProps) => `${props.resource}-${props.page}-${props.mode ?? ""}`, + } +); + +interface LoadablePageProps { + name: string; +} + +const LoadablePage = loadable((props: LoadablePageProps) => import(`./pages/${props.name}/index.tsx`), { fallback:
Page is Loading...
, - cacheKey: (props: PageProps) => `${props.resource}-${props.page}-${props.mode ?? ""}`, + cacheKey: (props: LoadablePageProps) => `page-${props.name}`, }); function App() { @@ -87,6 +95,14 @@ function App() { routerProvider={routerBindings} liveProvider={liveProvider(import.meta.env.VITE_APIURL)} resources={[ + { + name: "home", + list: "/", + meta: { + canDelete: false, + icon: , + }, + }, { name: "spool", list: "/spool", @@ -138,30 +154,45 @@ function App() { } > - } /> + } /> - } /> - } /> - } /> - } /> - } /> - - - } /> - } /> + } /> + } + /> } + element={} /> - } /> - } /> + } /> + } /> + + + } /> + } + /> + } + /> + } /> + } /> - } /> - } /> - } /> - } /> - } /> + } /> + } + /> + } + /> + } /> + } /> } /> diff --git a/client/src/pages/home/index.tsx b/client/src/pages/home/index.tsx new file mode 100644 index 0000000..b4c7e37 --- /dev/null +++ b/client/src/pages/home/index.tsx @@ -0,0 +1,121 @@ +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 { Collapse, List, theme } from "antd"; +import Title from "antd/es/typography/Title"; +import Logo from "../../icon.svg?react"; +import { FileOutlined, HighlightOutlined, UserOutlined } from "@ant-design/icons"; + +dayjs.extend(utc); + +const { useToken } = theme; + +export const Home: React.FC = () => { + const { token } = useToken(); + // const t = useTranslate(); + + return ( + + + <div + style={{ + display: "inline-block", + height: "1.5em", + float: "left", + marginRight: "0.5em", + }} + > + <Logo /> + </div> + 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 + /> + + ); +}; + +export default Home;