diff --git a/package.json b/package.json index a2ca2283..e988c6c1 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "eslint-config-react-app": "7.0.1", "immer": "9.0.16", "is-electron": "^2.2.1", - "notistack": "^2.0.8", + "notistack": "^3.0.1", "oauth-pkce": "0.0.6", "prop-types": "^15.8.1", "react": "^18.1.0", @@ -213,4 +213,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/App.tsx b/src/App.tsx index e8757e33..92fc305d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -114,7 +114,7 @@ export default function App() { return ( - + state.graphs); const rows = virtuals[virtId].is_device ? devices[virtuals[virtId].is_device]?.config?.rows || virtuals[virtId].config.rows || 1 : virtuals[virtId].config.rows || 1; - console.log(rows, pixels[0]?.length) - useEffect(() => { const handleWebsockets = (e: any) => { if (e.detail.id === virtId) { diff --git a/src/pages/Devices/Devices.tsx b/src/pages/Devices/Devices.tsx index 229ef174..ea64e4c4 100644 --- a/src/pages/Devices/Devices.tsx +++ b/src/pages/Devices/Devices.tsx @@ -43,6 +43,7 @@ const Devices = () => { useEffect(() => { const handleWebsockets = (e: any) => { + console.log(e); if (e.detail === 'devices_updated') { getDevices(); } diff --git a/src/pages/Home/Dashboard.tsx b/src/pages/Home/Dashboard.tsx index ca00b933..4781fe8a 100644 --- a/src/pages/Home/Dashboard.tsx +++ b/src/pages/Home/Dashboard.tsx @@ -113,12 +113,6 @@ const Dashboard = () => { getScenes(); }, []); - // console.log( - // Object.values(config.ledfx_presets) - // .map((e: any) => Object.keys(e).length) - // .reduce((a: number, b: number) => a + b) - // ); - console.log(config); return (
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 90517d56..bacbee68 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -1,7 +1,7 @@ /* eslint-disable no-promise-executor-return */ /* eslint-disable no-plusplus */ /* eslint-disable no-await-in-loop */ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { Box, Typography, @@ -12,6 +12,7 @@ import { 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'; @@ -22,6 +23,7 @@ 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'; const sleep = (ms: number) => { return new Promise((resolve) => setTimeout(resolve, ms)); @@ -32,10 +34,12 @@ export default function Home() { const getDevices = useStore((state) => state.getDevices); const getVirtuals = useStore((state) => state.getVirtuals); 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 { enqueueSnackbar } = useSnackbar(); const onSystemSettingsChange = (setting: string, value: any) => { setSystemConfig({ [setting]: value }).then(() => getSystemConfig()); @@ -56,6 +60,50 @@ export default function Home() { setScanning(-1); }); }; + + useEffect(() => { + const handleWebsockets = (e: any) => { + if (e.detail.id === 'device_created') { + if (lastFound.indexOf(e.detail.device_name) === -1) { + enqueueSnackbar(`New Device added: ${e.detail.device_name}`, { + variant: 'info', + }); + setLastFound([...lastFound, e.detail.device_name]); + } + } + }; + document.addEventListener('YZ_device_created', handleWebsockets); + return () => { + document.removeEventListener('YZ_device_created', handleWebsockets); + }; + }, []); + + useEffect(() => { + const handleWebsockets = () => { + const req = { + event_type: 'device_created', + id: 1337, + type: 'subscribe_event', + }; + // console.log("Send"); + (ws as any).send(JSON.stringify(++req.id && req)); + }; + document.addEventListener('subs_device_created', handleWebsockets); + return () => { + const removeGetWs = async () => { + const request = { + id: 1337, + type: 'unsubscribe_event', + event_type: 'device_created', + }; + (ws as any).send(JSON.stringify(++request.id && request)); + }; + // console.log("Clean Up"); + removeGetWs(); + document.removeEventListener('subs_device_created', handleWebsockets); + }; + }, []); + return features.dashboard ? ( features.dashboardDetailed ? ( diff --git a/src/utils/Websocket.ts b/src/utils/Websocket.ts index b907f5fe..a8d77b03 100644 --- a/src/utils/Websocket.ts +++ b/src/utils/Websocket.ts @@ -46,6 +46,13 @@ function createSocket() { }; // console.log("Send"); (ws as any).send(JSON.stringify(++req.id && req)); + const requ = { + event_type: 'device_created', + id: 1, + type: 'subscribe_event', + }; + // console.log("Send"); + (ws as any).send(JSON.stringify(++requ.id && requ)); }, onmessage: (event) => { if (JSON.parse(event.data).event_type === 'visualisation_update') { @@ -65,6 +72,16 @@ function createSocket() { }) ); } + if (JSON.parse(event.data).event_type === 'device_created') { + document.dispatchEvent( + new CustomEvent('YZ_device_created', { + detail: { + id: 'device_created', + device_name: JSON.parse(event.data).device_name, + }, + }) + ); + } if (JSON.parse(event.data).event_type === 'graph_update') { document.dispatchEvent( new CustomEvent('YZoldDev', { diff --git a/yarn.lock b/yarn.lock index 3a3c221e..31d04af0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8751,6 +8751,11 @@ globrex@^0.1.2: resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098" integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg== +goober@^2.0.33: + version "2.1.12" + resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.12.tgz#6c1645314ac9a68fe76408e1f502c63df8a39042" + integrity sha512-yXHAvO08FU1JgTXX6Zn6sYCUFfB/OJSX8HHjDSgerZHZmFKAb08cykp5LBw5QnmyMcZyPRMqkdyHUSSzge788Q== + got@^9.6.0: version "9.6.0" resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85" @@ -11663,13 +11668,13 @@ normalize-url@^6.0.1: resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a" integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A== -notistack@^2.0.8: - version "2.0.8" - resolved "https://registry.yarnpkg.com/notistack/-/notistack-2.0.8.tgz#78cdf34c64e311bf1d1d71c2123396bcdea5e95b" - integrity sha512-/IY14wkFp5qjPgKNvAdfL5Jp6q90+MjgKTPh4c81r/lW70KeuX6b9pE/4f8L4FG31cNudbN9siiFS5ql1aSLRw== +notistack@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/notistack/-/notistack-3.0.1.tgz#daf59888ab7e2c30a1fa8f71f9cba2978773236e" + integrity sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA== dependencies: clsx "^1.1.0" - hoist-non-react-statics "^3.3.0" + goober "^2.0.33" npm-conf@^1.1.3: version "1.1.3"