diff --git a/src/App.css b/src/App.css index 6a08f905..f007bfb6 100644 --- a/src/App.css +++ b/src/App.css @@ -40,7 +40,7 @@ } .Content { - margin: 3rem; + margin: 1rem; display: flex; flex-direction: column; align-items: center; diff --git a/src/components/Dialogs/IntroDialog.tsx b/src/components/Dialogs/IntroDialog.tsx new file mode 100644 index 00000000..51f06b49 --- /dev/null +++ b/src/components/Dialogs/IntroDialog.tsx @@ -0,0 +1,217 @@ +import Dialog from '@mui/material/Dialog'; +import { useState } from 'react'; +import { DialogContent, Typography, useMediaQuery } from '@mui/material'; +import Box from '@mui/material/Box'; +import MobileStepper from '@mui/material/MobileStepper'; +import Button from '@mui/material/Button'; +import useStore from '../../store/useStore'; +import logoCircle from '../../icons/png/128x128.png'; +import wledLogo from '../../icons/png/wled.png'; + +export default function IntroDialog({ handleScan, scanning }: any) { + const intro = useStore((state) => state.intro); + const devices = useStore((state) => state.devices); + const setIntro = useStore((state) => state.setIntro); + const setTour = useStore((state) => state.setTour); + const small = useMediaQuery('(max-width: 720px)'); + const xsmall = useMediaQuery('(max-width: 600px)'); + + const handleClose = () => { + setIntro(false); + }; + // const theme = useTheme(); + const [activeStep, setActiveStep] = useState(0); + const handleNext = () => { + setActiveStep((prevActiveStep) => prevActiveStep + 1); + }; + + const getSystemConfig = useStore((state) => state.getSystemConfig); + const setSystemConfig = useStore((state) => state.setSystemConfig); + const onSystemSettingsChange = (setting: string, value: any) => { + setSystemConfig({ [setting]: value }).then(() => getSystemConfig()); + }; + + const steps = [ + { + title: 'New to LedFx?', + label_left: 'Nah, im an expert. Just let me in', + label_right: 'Yes, please show me around', + action_left: () => { + handleClose(); + }, + action_right: handleNext, + }, + { + title: 'Scan for WLEDs in network?', + icon: 'wled', + label_left: 'Nah, no WLEDs', + label_right: 'Yes, please scan my network for WLEDs', + action_left: handleClose, + action_right: handleNext, + }, + { + title: 'Import Segments from WLED?', + icon: 'wled', + label_left: 'No, only main devices', + label_right: 'Yes, import segments', + action_left: () => { + onSystemSettingsChange('create_segments', false); + handleScan(); + setTour('home'); + handleNext(); + }, + action_right: () => { + onSystemSettingsChange('create_segments', true); + handleScan(); + handleNext(); + }, + }, + { + title: + scanning && scanning > -1 + ? `Scanning...${scanning}%` + : `${devices && Object.keys(devices)?.length} WLEDs found`, + icon: 'wled', + label_left: 'Skip Introduction', + label_right: 'Start Introduction', + action_left: handleClose, + action_right: () => { + setTour('home'); + handleClose(); + }, + }, + ]; + + return ( + + + + + logo-circle +
+ + {steps[activeStep].title} + + {scanning > -1 ? ( + + {`${devices && Object.keys(devices)?.length} WLEDs found`} + + ) : ( + + {' '} + + )} +
+ + + {steps[activeStep].label_right} + + } + backButton={ + + } + /> + + + + ); +} + +// export default function IntroDialog() { +// const [open, setOpen] = useState(true); + +// // const handleClickOpen = () => { +// // setOpen(true); +// // }; + +// const handleClose = (value: string) => { +// setOpen(false); +// }; + +// return ( +//
+// {/* +// Selected: {selectedValue} +// +//
+// */} +// +//
+// ); +// } diff --git a/src/components/Tours/TourHome.tsx b/src/components/Tours/TourHome.tsx index 1ee4623a..903c6f59 100644 --- a/src/components/Tours/TourHome.tsx +++ b/src/components/Tours/TourHome.tsx @@ -95,7 +95,8 @@ const TourHome = ({ variant?: string; }) => { const theme = useTheme(); - const [isTourOpen, setIsTourOpen] = useState(false); + const tour = useStore((state) => state.tours.home); + const [isTourOpen, setIsTourOpen] = useState(tour); const setTour = useStore((state) => state.setTour); return ( diff --git a/src/icons/png/wled.png b/src/icons/png/wled.png new file mode 100644 index 00000000..6eda49ec Binary files /dev/null and b/src/icons/png/wled.png differ diff --git a/src/pages/Home/Dashboard.tsx b/src/pages/Home/Dashboard.tsx index 4781fe8a..2d40c99f 100644 --- a/src/pages/Home/Dashboard.tsx +++ b/src/pages/Home/Dashboard.tsx @@ -140,14 +140,14 @@ const Dashboard = () => { Object.keys(e).length) .reduce((a: number, b: number) => a + b, 0) : 0 } current={ - Object.values(config.user_presets).length + config.user_presets && Object.values(config.user_presets).length ? Object.values(config.user_presets) .map((e: any) => Object.keys(e).length) .reduce((a: number, b: number) => a + b, 0) @@ -176,12 +176,20 @@ const Dashboard = () => { diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index bacbee68..973a0e28 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -2,28 +2,15 @@ /* eslint-disable no-plusplus */ /* eslint-disable no-await-in-loop */ import { useEffect, useState } from 'react'; -import { - Box, - Typography, - Card, - CardHeader, - CardContent, - CardActions, - CircularProgress, - Badge, -} from '@mui/material'; + import { useSnackbar } from 'notistack'; -import logoCircle from '../../assets/ring.png'; -import TourHome from '../../components/Tours/TourHome'; + import useStore from '../../store/useStore'; -import FX from '../../components/Icons/FX'; -// import { deleteFrontendConfig } from '../../utils/helpers'; -import ButtonBar from '../../components/ButtonBar'; + import Dashboard from './Dashboard'; -import BladeIcon from '../../components/Icons/BladeIcon/BladeIcon'; import DashboardDetailed from './DashboardDetailed'; -import Popover from '../../components/Popover/Popover'; import ws from '../../utils/Websocket'; +import IntroDialog from '../../components/Dialogs/IntroDialog'; const sleep = (ms: number) => { return new Promise((resolve) => setTimeout(resolve, ms)); @@ -33,17 +20,14 @@ export default function Home() { const scanForDevices = useStore((state) => state.scanForDevices); const getDevices = useStore((state) => state.getDevices); const getVirtuals = useStore((state) => state.getVirtuals); + // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars const [scanning, setScanning] = useState(-1); const [lastFound, setLastFound] = useState([] as string[]); - const invisible = useStore((state) => state.tours.home); const features = useStore((state) => state.features); - const getSystemConfig = useStore((state) => state.getSystemConfig); - const setSystemConfig = useStore((state) => state.setSystemConfig); + const intro = useStore((state) => state.intro); + const { enqueueSnackbar } = useSnackbar(); - const onSystemSettingsChange = (setting: string, value: any) => { - setSystemConfig({ [setting]: value }).then(() => getSystemConfig()); - }; const handleScan = () => { setScanning(0); scanForDevices() @@ -52,7 +36,7 @@ export default function Home() { await sleep(1000).then(() => { getDevices(); getVirtuals(); - setScanning(sec); + setScanning(Math.round((100 / 30) * sec)); }); } }) @@ -69,6 +53,7 @@ export default function Home() { variant: 'info', }); setLastFound([...lastFound, e.detail.device_name]); + getDevices(); } } }; @@ -104,105 +89,13 @@ export default function Home() { }; }, []); - return features.dashboard ? ( + return !intro ? ( features.dashboardDetailed ? ( ) : ( ) ) : ( - <> -
-
- logo-circle - -
-
- - - - Use the Start-Tour-Button to get an introduction. Advanced users might - explore Expert-Mode in settings. - - - - - - { - onSystemSettingsChange('create_segments', true); - handleScan(); - }} - onCancel={() => { - onSystemSettingsChange('create_segments', false); - handleScan(); - }} - text="Import Segments?" - > - <> - - {scanning > -1 ? ( -
- - - - {`${Math.round((scanning / 30) * 100)}%`} - - -
- ) : ( - <>WLED-scan - )} - - - {/* */} - - - - + ); } diff --git a/src/store/ui/storeGeneral.tsx b/src/store/ui/storeGeneral.tsx index 868c0af4..467a9d85 100644 --- a/src/store/ui/storeGeneral.tsx +++ b/src/store/ui/storeGeneral.tsx @@ -126,6 +126,16 @@ const storeGeneral = (set: any) => ({ 'general/setIsLogged' ), + intro: true, + setIntro: (intro: boolean) => + set( + produce((state: IStore) => { + state.intro = intro; + }), + false, + 'general/setIsLogged' + ), + // Example animals: { bears: 1,