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/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: {

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');
         }