Expert mode json

README.md

@@ -86,33 +86,39 @@ The icons may not be reused in other projects without the proper flaticon licens
 
 <!--
 	### **WORK IN PROGRESS**
--->
+-->
+### **WORK IN PROGRESS**
+
+-   (@GermanBluefox) Changed information box on the hosts tab
+-   (@GermanBluefox) Corrected some errors in JsonConfig library
+-   (@GermanBluefox) Added flag expertMode to hide JSON config controls for non-experts
+
 ### 7.4.2 (2024-11-25)
 
 -   (@GermanBluefox) Made improvement for JSONConfig components
--   (@GermanBluefox) Added clear button to text area JSON config component
-
+-   (@GermanBluefox) Added clear button to text area JSON config component
+
 ### 7.4.1 (2024-11-19)
 
--   (@GermanBluefox) Made improvement for JSONConfig components
-
+-   (@GermanBluefox) Made improvement for JSONConfig components
+
 ### 7.4.0 (2024-11-17)
 
--   (@GermanBluefox) Added new JsonConfig control: staticInfo
-
+-   (@GermanBluefox) Added new JsonConfig control: staticInfo
+
 ### 7.3.2 (2024-11-15)
 
 -   (@GermanBluefox) Some GUI packages were updated.
--   (@GermanBluefox) Improved file viewer. Added icons viewer
-
+-   (@GermanBluefox) Improved file viewer. Added icons viewer
+
 ### 7.3.1 (2024-11-14)
 
 -   (@GermanBluefox) Corrected cloud icon for admin
 -   (@GermanBluefox) Added old dialog names to adapter-react-v5 again
--   (@GermanBluefox) Corrected the password field in JSON-Config
-
+-   (@GermanBluefox) Corrected the password field in JSON-Config
+
 ## License
 
 The MIT License (MIT)
 
-Copyright (c) 2014-2024 bluefox <[email protected]>
+Copyright (c) 2014-2024 bluefox <[email protected]>

packages/adapter-react-v5/README.md

@@ -13,7 +13,7 @@ If you want to create the configuration page with ReactJS:
     - Change `name` from `src` to `ADAPTERNAME-admin` (Of course replace `ADAPTERNAME` with yours)
     - Add to devDependencies:
         ```json
-        "@iobroker/adapter-react-v5": "^7.4.1",
+        "@iobroker/adapter-react-v5": "^7.4.2",
         ```
         Versions can be higher.
         So your `src/package.json` should look like:
@@ -24,7 +24,7 @@ If you want to create the configuration page with ReactJS:
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@iobroker/adapter-react-v5": "^7.4.1",
+        "@iobroker/adapter-react-v5": "^7.4.2",
         "@iobroker/build-tools": "^1.0.0",
         "babel-eslint": "^10.1.0",
         "react-scripts": "^5.0.1"

packages/adapter-react-v5/package.json

@@ -54,16 +54,16 @@
         "@rollup/rollup-linux-x64-gnu": "*"
     },
     "dependencies": {
-        "@emotion/react": "^11.13.3",
-        "@emotion/styled": "^11.13.0",
+        "@emotion/react": "^11.13.5",
+        "@emotion/styled": "^11.13.5",
         "@iobroker/js-controller-common": "^6.0.11",
-        "@iobroker/js-controller-common-db": "^6.0.11",
-        "@iobroker/socket-client": "^3.1.2",
+        "@iobroker/js-controller-common-db": "6.0.11",
+        "@iobroker/socket-client": "^3.1.3",
         "@iobroker/types": "^6.0.11",
-        "@mui/icons-material": "^6.1.7",
-        "@mui/material": "^6.1.7",
-        "@sentry/browser": "^8.38.0",
-        "cronstrue": "^2.51.0",
+        "@mui/icons-material": "^6.1.9",
+        "@mui/material": "^6.1.9",
+        "@sentry/browser": "^8.41.0",
+        "cronstrue": "^2.52.0",
         "react-color": "^2.19.3",
         "react-colorful": "^5.6.1",
         "react-cropper": "^2.3.3",
@@ -77,12 +77,12 @@
         "@babel/preset-env": "^7.26.0",
         "@babel/preset-flow": "^7.25.9",
         "@babel/preset-react": "^7.25.9",
-        "@iobroker/eslint-config": "^0.1.7",
-        "@types/node": "^22.9.0",
+        "@iobroker/eslint-config": "^1.0.0",
+        "@types/node": "^22.10.1",
         "@types/react": "^18.3.12",
         "@types/react-color": "^3.0.12",
         "ajv": "^8.17.1",
         "ts-node": "^10.9.2",
-        "typescript": "^5.6.3"
+        "typescript": "^5.7.2"
     }
 }

packages/adapter-react-v5/src/Components/FileBrowser.tsx

@@ -134,7 +134,7 @@ const styles: Record<string, any> = {
         flex: `0 0 ${TILE_WIDTH}px`,
     },
 
-    itemTile: (theme: IobTheme) => ({
+    itemTile: (theme: IobTheme): any => ({
         position: 'relative',
         userSelect: 'none',
         cursor: 'pointer',
@@ -163,14 +163,14 @@ const styles: Record<string, any> = {
         textAlign: 'center',
         wordBreak: 'break-all',
     },
-    itemFolderIconTile: (theme: IobTheme) => ({
+    itemFolderIconTile: (theme: IobTheme): any => ({
         width: '100%',
         height: TILE_HEIGHT - 32 - 16 - 8, // name + size
         display: 'block',
         pl: 1,
         color: theme.palette.secondary.main || '#fbff7d',
     }),
-    itemFolderIconBack: (theme: IobTheme) => ({
+    itemFolderIconBack: (theme: IobTheme): React.CSSProperties => ({
         position: 'absolute',
         top: 22,
         left: 18,
@@ -198,12 +198,12 @@ const styles: Record<string, any> = {
         objectFit: 'contain',
     },
 
-    itemSelected: (theme: IobTheme) => ({
+    itemSelected: (theme: IobTheme): React.CSSProperties => ({
         background: theme.palette.primary.main,
         color: Utils.invertColor(theme.palette.primary.main, true),
     }),
 
-    itemTable: (theme: IobTheme) => ({
+    itemTable: (theme: IobTheme): any => ({
         userSelect: 'none',
         cursor: 'pointer',
         height: ROW_HEIGHT,
@@ -267,15 +267,15 @@ const styles: Record<string, any> = {
     itemFolderTemp: {
         opacity: 0.4,
     },
-    itemFolderIconTable: (theme: IobTheme) => ({
+    itemFolderIconTable: (theme: IobTheme): React.CSSProperties => ({
         marginTop: '1px',
         marginLeft: '8px',
         display: 'inline-block',
         width: 30,
         height: 30,
         color: theme.palette.secondary.main || '#fbff7d',
     }),
-    itemDownloadButtonTable: (theme: IobTheme) => ({
+    itemDownloadButtonTable: (theme: IobTheme): any => ({
         display: 'inline-block',
         width: BUTTON_WIDTH,
         height: ROW_HEIGHT,
@@ -344,7 +344,7 @@ const styles: Record<string, any> = {
         opacity: 1,
     },
 
-    uploadCenterDiv: (theme: IobTheme) => ({
+    uploadCenterDiv: (theme: IobTheme): any => ({
         m: '20px',
         border: '3px dashed grey',
         borderRadius: '30px',
@@ -383,7 +383,7 @@ const styles: Record<string, any> = {
     menuButtonRestrictActive: {
         color: '#c05000',
     },
-    pathDiv: (theme: IobTheme) => ({
+    pathDiv: (theme: IobTheme): any => ({
         display: 'flex',
         width: 'calc(100% - 16px)',
         ml: 1,
@@ -396,7 +396,7 @@ const styles: Record<string, any> = {
     pathDivInput: {
         width: '100%',
     },
-    pathDivBreadcrumbDir: (theme: IobTheme) => ({
+    pathDivBreadcrumbDir: (theme: IobTheme): any => ({
         pl: '2px',
         pr: '2px',
         cursor: 'pointer',
@@ -416,7 +416,7 @@ const styles: Record<string, any> = {
     backgroundImageColored: {
         background: 'silver',
     },
-    specialFolder: (theme: IobTheme) => ({
+    specialFolder: (theme: IobTheme): React.CSSProperties => ({
         color: theme.palette.mode === 'dark' ? '#229b0f' : '#5dd300',
     }),
     tooltip: {
@@ -936,14 +936,16 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
 
         if (newFoldersNotNull[folderId] && !force) {
             if (!_checkEmpty) {
-                return new Promise((resolve, reject) => {
+                return new Promise((resolve, reject): void => {
                     Promise.all(
                         newFoldersNotNull[folderId]
                             .filter(item => item.folder)
-                            .map(item => this.browseFolder(item.id, newFoldersNotNull, true).catch(() => undefined)),
+                            .map(item =>
+                                this.browseFolder(item.id, newFoldersNotNull, true).catch((): undefined => undefined),
+                            ),
                     )
-                        .then(() => resolve(newFoldersNotNull))
-                        .catch(error => reject(new Error(error)));
+                        .then((): void => resolve(newFoldersNotNull))
+                        .catch((error: unknown): void => reject(new Error(error as string)));
                 });
             }
 
@@ -1010,8 +1012,10 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                     return Promise.all(
                         _folders
                             .filter(item => item.folder)
-                            .map(item => this.browseFolder(item.id, newFoldersNotNull, true).catch(() => undefined)),
-                    ).then(() => newFoldersNotNull);
+                            .map(item =>
+                                this.browseFolder(item.id, newFoldersNotNull, true).catch((): undefined => undefined),
+                            ),
+                    ).then((): Folders => newFoldersNotNull);
                 }
             } catch (e: unknown) {
                 const knownError = e as Error;

packages/adapter-react-v5/src/Components/IconPicker.tsx

@@ -160,4 +160,4 @@ export function IconPicker(props: IconPickerProps): React.JSX.Element {
             </FormControl>
         </div>
     );
-};
+}

packages/adapter-react-v5/src/Components/Image.tsx

@@ -116,7 +116,7 @@ export class Image extends Component<ImageProps, ImageState> {
         src = src.substring(len.length);
         try {
             src = atob(src);
-            const svg = getElementFromSource(src) as HTMLElement;
+            const svg: HTMLElement = getElementFromSource(src);
             const inner = svg.innerHTML;
             const svgProps = serializeAttrs(svg.attributes);
 

packages/adapter-react-v5/src/Components/Logo.tsx

@@ -52,9 +52,9 @@ export class Logo extends React.Component<LogoProps> {
         const f = files[0];
 
         if (f) {
-            const r = new window.FileReader();
-            r.onload = () => {
-                const contents: string = r.result?.toString() || '';
+            const reader = new window.FileReader();
+            reader.onload = () => {
+                const contents: string = reader.result?.toString() || '';
                 try {
                     const json = JSON.parse(contents);
                     if (json.native && json.common) {
@@ -70,7 +70,7 @@ export class Logo extends React.Component<LogoProps> {
                     this.props.onError && this.props.onError(err?.toString());
                 }
             };
-            r.readAsText(f);
+            reader.readAsText(f);
         } else {
             alert('Failed to open JSON File');
         }