From d1388f124dae0046d2bee49345d0513441926f21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Beye?= Date: Sat, 27 Nov 2021 12:31:00 +0100 Subject: [PATCH] feat(ui): Add help button + modal to consumables view --- frontend/src/components/HelpDialog.module.css | 4 ++ frontend/src/components/HelpDialog.tsx | 53 +++++++++++++++++++ frontend/src/robot/Consumables.tsx | 38 +++++++++++-- frontend/src/robot/res/ConsumablesHelp.ts | 41 ++++++++++++++ 4 files changed, 133 insertions(+), 3 deletions(-) create mode 100644 frontend/src/components/HelpDialog.module.css create mode 100644 frontend/src/components/HelpDialog.tsx create mode 100644 frontend/src/robot/res/ConsumablesHelp.ts diff --git a/frontend/src/components/HelpDialog.module.css b/frontend/src/components/HelpDialog.module.css new file mode 100644 index 00000000000..ca9dba85a08 --- /dev/null +++ b/frontend/src/components/HelpDialog.module.css @@ -0,0 +1,4 @@ +.reactMarkDown { + padding: 1rem; + overflow-y: auto; +} diff --git a/frontend/src/components/HelpDialog.tsx b/frontend/src/components/HelpDialog.tsx new file mode 100644 index 00000000000..b89f0e30b5b --- /dev/null +++ b/frontend/src/components/HelpDialog.tsx @@ -0,0 +1,53 @@ +import React from "react"; +import ReactMarkdown from "react-markdown"; +import gfm from "remark-gfm"; +import rehypeRaw from "rehype-raw"; +import {Button, Dialog, DialogActions, styled} from "@mui/material"; +import style from "./HelpDialog.module.css"; + +const StyledDialog = styled(Dialog)(({ theme }) => { + return { + "& .MuiDialogContent-root": { + padding: theme.spacing(2), + }, + "& .MuiDialogActions-root": { + padding: theme.spacing(1), + }, + }; +}); + +const HelpDialog: React.FunctionComponent<{ + dialogOpen: boolean, + setDialogOpen: (newOpen: boolean) => void, + helpText: string +}> = ({ + dialogOpen, + setDialogOpen, + helpText +}): JSX.Element => { + return ( + { + setDialogOpen(false); + }} + open={dialogOpen} + > + + {helpText} + + + + + + ); +}; + +export default HelpDialog; diff --git a/frontend/src/robot/Consumables.tsx b/frontend/src/robot/Consumables.tsx index 1c49db39590..11e8ca86982 100644 --- a/frontend/src/robot/Consumables.tsx +++ b/frontend/src/robot/Consumables.tsx @@ -1,11 +1,26 @@ import React, {FunctionComponent} from "react"; -import {Refresh as RefreshIcon, Undo as UndoIcon} from "@mui/icons-material"; -import {Box, Container, Grid, IconButton, Stack, Typography, useTheme} from "@mui/material"; +import { + Refresh as RefreshIcon, + Undo as UndoIcon, + Help as HelpIcon +} from "@mui/icons-material"; + +import { + Box, + Container, + Grid, + IconButton, + Stack, + Typography, + useTheme +} from "@mui/material"; import {Capability, ConsumableId, ConsumableState, useConsumableResetMutation, useConsumableStateQuery} from "../api"; import {convertSecondsToHumans, getConsumableName} from "../utils"; import {useCapabilitiesSupported} from "../CapabilitiesProvider"; import LoadingFade from "../components/LoadingFade"; import ConfirmationDialog from "../components/ConfirmationDialog"; +import HelpDialog from "../components/HelpDialog"; +import {ConsumablesHelp} from "./res/ConsumablesHelp"; const strokeWidth = 2; const highlightFill = "#ffaa00"; @@ -199,6 +214,7 @@ const ConsumablesInternal = (): JSX.Element => { } = useConsumableStateQuery(); const [selectedConsumable, setSelectedConsumable] = React.useState(null); + const [helpDialogOpen, setHelpDialogOpen] = React.useState(false); return React.useMemo(() => { if (consumablesLoading) { @@ -257,6 +273,15 @@ const ConsumablesInternal = (): JSX.Element => { + + { + return setHelpDialogOpen(true); + }} + > + + + { + { + setHelpDialogOpen(open); + }} + helpText={ConsumablesHelp} + /> ); - }, [consumablesData, consumablesLoading, consumablesError, consumablesRefetch, selectedConsumable]); + }, [consumablesData, consumablesLoading, consumablesError, consumablesRefetch, selectedConsumable, helpDialogOpen]); }; const Consumables = (): JSX.Element => { diff --git a/frontend/src/robot/res/ConsumablesHelp.ts b/frontend/src/robot/res/ConsumablesHelp.ts new file mode 100644 index 00000000000..5891510c3dc --- /dev/null +++ b/frontend/src/robot/res/ConsumablesHelp.ts @@ -0,0 +1,41 @@ +export const ConsumablesHelp = ` +## Consumables + +Consumables are components of the robot that need periodic cleaning, replacement or other maintenance work. + +They come in two flavours which are basically the same +- operating hours left +- percent left + +At some point, they will become depleted, requiring you to do maintenance and reset them in the Valetudo UI. +This will restore them to either their manufacturer-dependent design operating hours or 100%. + +Not maintaining your consumables may lead to performance degradation.
+Still, Valetudo recommends manual inspection of the part in question. You _may_ be able to use it longer than the manufacturer recommends. + + +To figure out, which part of your robot is the consumable in question, you can hover your mouse over the remaining time/percent. +The robot part will now light up to show you where it is. + + +### Types of consumables + +There are various types of consumables that require different treatment. + +#### Brushes + +Brushes come in different types such as main or side. +At some point, they are worn out and have to be replaced. + +They often also require removal of tangled hair or similar for optimal performance so you should keep an eye on them. + +#### Filters + +Vacuum-robots usually have some kind of HEPA filter which needs periodic cleaning and replacing when it is worn out. + +#### Sensors + +Your robot has a few sensors such as cliff- or wall-distance-sensors, which are used for navigation and might get obstructed by dirt, debris, cobwebs or similar. +Cleaning them can usually be done with a soft cloth. Make sure to not scratch the sensors as they are vital to the robots operation. + +`;