diff --git a/index.html b/index.html
index 9d7bb0a..b855ac0 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
- ccu-addon-mui
+ CCU3 Add-on: Modern Web UI
diff --git a/package-lock.json b/package-lock.json
index ea230d4..b1c9dd3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,9 @@
"version": "0.0.50",
"license": "MIT",
"dependencies": {
- "@emotion/react": "11.11.4",
- "@emotion/styled": "11.11.0",
- "@fontsource/roboto": "^5.0.8",
+ "@emotion/react": "11.14.0",
+ "@emotion/styled": "11.14.0",
+ "@fontsource/roboto": "^5.1.1",
"@swc/helpers": "0.5.15",
"react": "18.3.1",
"react-dom": "18.3.1",
@@ -20,7 +20,7 @@
},
"devDependencies": {
"@emotion/babel-plugin": "11.11.0",
- "@iconify/react": "^4.1.1",
+ "@iconify/react": "^5.2.0",
"@nx/eslint": "20.3.1",
"@nx/eslint-plugin": "20.3.1",
"@nx/js": "20.3.1",
@@ -47,10 +47,10 @@
"eslint-plugin-react-hooks": "5.0.0",
"jsdom": "~22.1.0",
"nx": "20.3.1",
- "prettier": "^2.6.2",
+ "prettier": "^3.4.2",
"typescript": "5.6.3",
"vite": "^5.0.0",
- "vite-plugin-pwa": "^0.17.4",
+ "vite-plugin-pwa": "^0.21.1",
"vitest": "1.3.1"
}
},
@@ -1953,6 +1953,7 @@
"version": "11.11.0",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
"integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+ "dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-module-imports": "^7.16.7",
@@ -1987,12 +1988,6 @@
"integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
"license": "MIT"
},
- "node_modules/@emotion/cache/node_modules/@emotion/weak-memoize": {
- "version": "0.4.0",
- "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
- "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
- "license": "MIT"
- },
"node_modules/@emotion/hash": {
"version": "0.9.2",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
@@ -2018,21 +2013,22 @@
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
"integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
+ "dev": true,
"license": "MIT"
},
"node_modules/@emotion/react": {
- "version": "11.11.4",
- "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
- "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
+ "version": "11.14.0",
+ "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+ "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.18.3",
- "@emotion/babel-plugin": "^11.11.0",
- "@emotion/cache": "^11.11.0",
- "@emotion/serialize": "^1.1.3",
- "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
- "@emotion/utils": "^1.2.1",
- "@emotion/weak-memoize": "^0.3.1",
+ "@emotion/babel-plugin": "^11.13.5",
+ "@emotion/cache": "^11.14.0",
+ "@emotion/serialize": "^1.3.3",
+ "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+ "@emotion/utils": "^1.4.2",
+ "@emotion/weak-memoize": "^0.4.0",
"hoist-non-react-statics": "^3.3.1"
},
"peerDependencies": {
@@ -2044,6 +2040,31 @@
}
}
},
+ "node_modules/@emotion/react/node_modules/@emotion/babel-plugin": {
+ "version": "11.13.5",
+ "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+ "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@babel/helper-module-imports": "^7.16.7",
+ "@babel/runtime": "^7.18.3",
+ "@emotion/hash": "^0.9.2",
+ "@emotion/memoize": "^0.9.0",
+ "@emotion/serialize": "^1.3.3",
+ "babel-plugin-macros": "^3.1.0",
+ "convert-source-map": "^1.5.0",
+ "escape-string-regexp": "^4.0.0",
+ "find-root": "^1.1.0",
+ "source-map": "^0.5.7",
+ "stylis": "4.2.0"
+ }
+ },
+ "node_modules/@emotion/react/node_modules/@emotion/memoize": {
+ "version": "0.9.0",
+ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+ "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+ "license": "MIT"
+ },
"node_modules/@emotion/serialize": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
@@ -2070,17 +2091,17 @@
"license": "MIT"
},
"node_modules/@emotion/styled": {
- "version": "11.11.0",
- "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
- "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
+ "version": "11.14.0",
+ "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.0.tgz",
+ "integrity": "sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.18.3",
- "@emotion/babel-plugin": "^11.11.0",
- "@emotion/is-prop-valid": "^1.2.1",
- "@emotion/serialize": "^1.1.2",
- "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
- "@emotion/utils": "^1.2.1"
+ "@emotion/babel-plugin": "^11.13.5",
+ "@emotion/is-prop-valid": "^1.3.0",
+ "@emotion/serialize": "^1.3.3",
+ "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+ "@emotion/utils": "^1.4.2"
},
"peerDependencies": {
"@emotion/react": "^11.0.0-rc.0",
@@ -2092,6 +2113,31 @@
}
}
},
+ "node_modules/@emotion/styled/node_modules/@emotion/babel-plugin": {
+ "version": "11.13.5",
+ "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+ "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@babel/helper-module-imports": "^7.16.7",
+ "@babel/runtime": "^7.18.3",
+ "@emotion/hash": "^0.9.2",
+ "@emotion/memoize": "^0.9.0",
+ "@emotion/serialize": "^1.3.3",
+ "babel-plugin-macros": "^3.1.0",
+ "convert-source-map": "^1.5.0",
+ "escape-string-regexp": "^4.0.0",
+ "find-root": "^1.1.0",
+ "source-map": "^0.5.7",
+ "stylis": "4.2.0"
+ }
+ },
+ "node_modules/@emotion/styled/node_modules/@emotion/memoize": {
+ "version": "0.9.0",
+ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+ "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+ "license": "MIT"
+ },
"node_modules/@emotion/unitless": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
@@ -2114,9 +2160,9 @@
"license": "MIT"
},
"node_modules/@emotion/weak-memoize": {
- "version": "0.3.1",
- "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
- "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==",
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+ "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
"license": "MIT"
},
"node_modules/@esbuild/aix-ppc64": {
@@ -2695,9 +2741,9 @@
"license": "BSD-3-Clause"
},
"node_modules/@iconify/react": {
- "version": "4.1.1",
- "resolved": "https://registry.npmjs.org/@iconify/react/-/react-4.1.1.tgz",
- "integrity": "sha512-jed14EjvKjee8mc0eoscGxlg7mSQRkwQG3iX3cPBCO7UlOjz0DtlvTqxqEcHUJGh+z1VJ31Yhu5B9PxfO0zbdg==",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/@iconify/react/-/react-5.2.0.tgz",
+ "integrity": "sha512-7Sdjrqq3fkkQNks9SY3adGC37NQTHsBJL2PRKlQd455PoDi9s+Es9AUTY+vGLFOYs5yO9w9yCE42pmxCwG26WA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -13726,16 +13772,16 @@
}
},
"node_modules/prettier": {
- "version": "2.8.8",
- "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
- "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+ "version": "3.4.2",
+ "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+ "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
"dev": true,
"license": "MIT",
"bin": {
- "prettier": "bin-prettier.js"
+ "prettier": "bin/prettier.cjs"
},
"engines": {
- "node": ">=10.13.0"
+ "node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
@@ -16437,17 +16483,17 @@
}
},
"node_modules/vite-plugin-pwa": {
- "version": "0.17.5",
- "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.17.5.tgz",
- "integrity": "sha512-UxRNPiJBzh4tqU/vc8G2TxmrUTzT6BqvSzhszLk62uKsf+npXdvLxGDz9C675f4BJi6MbD2tPnJhi5txlMzxbQ==",
+ "version": "0.21.1",
+ "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.21.1.tgz",
+ "integrity": "sha512-rkTbKFbd232WdiRJ9R3u+hZmf5SfQljX1b45NF6oLA6DSktEKpYllgTo1l2lkiZWMWV78pABJtFjNXfBef3/3Q==",
"dev": true,
"license": "MIT",
"dependencies": {
- "debug": "^4.3.4",
- "fast-glob": "^3.3.2",
+ "debug": "^4.3.6",
"pretty-bytes": "^6.1.1",
- "workbox-build": "^7.0.0",
- "workbox-window": "^7.0.0"
+ "tinyglobby": "^0.2.10",
+ "workbox-build": "^7.3.0",
+ "workbox-window": "^7.3.0"
},
"engines": {
"node": ">=16.0.0"
@@ -16456,9 +16502,15 @@
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
- "vite": "^3.1.0 || ^4.0.0 || ^5.0.0",
- "workbox-build": "^7.0.0",
- "workbox-window": "^7.0.0"
+ "@vite-pwa/assets-generator": "^0.2.6",
+ "vite": "^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0",
+ "workbox-build": "^7.3.0",
+ "workbox-window": "^7.3.0"
+ },
+ "peerDependenciesMeta": {
+ "@vite-pwa/assets-generator": {
+ "optional": true
+ }
}
},
"node_modules/vitest": {
diff --git a/package.json b/package.json
index af6bbd9..7f9475d 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,9 @@
},
"private": true,
"dependencies": {
- "@emotion/react": "11.11.4",
- "@emotion/styled": "11.11.0",
- "@fontsource/roboto": "^5.0.8",
+ "@emotion/react": "11.14.0",
+ "@emotion/styled": "11.14.0",
+ "@fontsource/roboto": "^5.1.1",
"@swc/helpers": "0.5.15",
"react": "18.3.1",
"react-dom": "18.3.1",
@@ -26,7 +26,7 @@
},
"devDependencies": {
"@emotion/babel-plugin": "11.11.0",
- "@iconify/react": "^4.1.1",
+ "@iconify/react": "^5.2.0",
"@nx/eslint": "20.3.1",
"@nx/eslint-plugin": "20.3.1",
"@nx/js": "20.3.1",
@@ -53,10 +53,10 @@
"eslint-plugin-react-hooks": "5.0.0",
"jsdom": "~22.1.0",
"nx": "20.3.1",
- "prettier": "^2.6.2",
+ "prettier": "^3.4.2",
"typescript": "5.6.3",
"vite": "^5.0.0",
- "vite-plugin-pwa": "^0.17.4",
+ "vite-plugin-pwa": "^0.21.1",
"vitest": "1.3.1"
}
}
diff --git a/src/components/ChannelGroup.tsx b/src/components/ChannelGroup.tsx
index 5a0c81d..18f2371 100644
--- a/src/components/ChannelGroup.tsx
+++ b/src/components/ChannelGroup.tsx
@@ -31,9 +31,14 @@ const ChannelContainer = styled.div({
display: 'flex',
flexWrap: 'wrap',
gap: '10px',
- justifyContent: 'space-around',
+ '@media (max-width: 800px)': {
+ marginLeft: '90px',
+ marginRight: '90px',
+ },
'@media (max-width: 600px)': {
justifyContent: 'center',
+ marginLeft: '0px',
+ marginRight: '0px',
},
});
diff --git a/src/controls/BlindsControl.tsx b/src/controls/BlindsControl.tsx
index 7637ca8..0965280 100644
--- a/src/controls/BlindsControl.tsx
+++ b/src/controls/BlindsControl.tsx
@@ -14,7 +14,7 @@ export const BlindsControl = ({ channel }: ControlProps) => {
const { datapoints, name, address, interfaceName } = channel;
const blindValue = Number(datapoints.LEVEL) * 100;
return (
-
+
{
return (
- {name}
+ {name}
{
diff --git a/src/main.tsx b/src/main.tsx
index 0c0392a..df6906c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -23,7 +23,6 @@ const root = ReactDOM.createRoot(
root.render(
<>
-
-
);