chore: release v5.0.6

Implemented the hysteresis

CHANGELOG_OLD.md

@@ -1,5 +1,8 @@
 The newest change log is in README.md
 
+## 5.0.0 (2021-02-27) [Birthday edition]
+* (bluefox) added the rules engine
+
 ## 4.11.0 (2021-02-16)
 * (Apollon77) Add some additional checks for getSchedules
 * (Garfonso) make sure promisified methods reject with Error instead of string so that async errors can be catched correctly

README.md

@@ -37,6 +37,9 @@ And then call `npm run build`.
 -->
 
 ## Changelog
+### 5.0.6 (2021-03-01)
+* (bluefox) Implemented the hysteresis
+
 ### 5.0.5 (2021-02-28)
 * (bluefox) Implemented the toggle functionality
 
@@ -49,9 +52,6 @@ And then call `npm run build`.
 ### 5.0.2 (2021-02-27)
 * (bluefox) Fixed error in the rules
 
-### 5.0.0 (2021-02-27) [Birthday edition]
-* (bluefox) added the rules engine
-
 ## License
 
 The MIT License (MIT)

admin/asset-manifest.json

@@ -1,24 +1,25 @@
 {
   "files": {
-    "main.css": "/static/css/main.5d91db15.chunk.css",
-    "main.js": "/static/js/main.9211e1f2.chunk.js",
-    "main.js.map": "/static/js/main.9211e1f2.chunk.js.map",
+    "main.css": "/static/css/main.351dc948.chunk.css",
+    "main.js": "/static/js/main.ccf3901b.chunk.js",
+    "main.js.map": "/static/js/main.ccf3901b.chunk.js.map",
     "runtime-main.js": "/static/js/runtime-main.4f1bbf1b.js",
     "runtime-main.js.map": "/static/js/runtime-main.4f1bbf1b.js.map",
     "static/css/2.2ae070eb.chunk.css": "/static/css/2.2ae070eb.chunk.css",
-    "static/js/2.29a9b74c.chunk.js": "/static/js/2.29a9b74c.chunk.js",
-    "static/js/2.29a9b74c.chunk.js.map": "/static/js/2.29a9b74c.chunk.js.map",
+    "static/js/2.7541d234.chunk.js": "/static/js/2.7541d234.chunk.js",
+    "static/js/2.7541d234.chunk.js.map": "/static/js/2.7541d234.chunk.js.map",
     "index.html": "/index.html",
     "static/css/2.2ae070eb.chunk.css.map": "/static/css/2.2ae070eb.chunk.css.map",
-    "static/css/main.5d91db15.chunk.css.map": "/static/css/main.5d91db15.chunk.css.map",
-    "static/js/2.29a9b74c.chunk.js.LICENSE.txt": "/static/js/2.29a9b74c.chunk.js.LICENSE.txt",
-    "static/js/main.9211e1f2.chunk.js.LICENSE.txt": "/static/js/main.9211e1f2.chunk.js.LICENSE.txt"
+    "static/css/main.351dc948.chunk.css.map": "/static/css/main.351dc948.chunk.css.map",
+    "static/js/2.7541d234.chunk.js.LICENSE.txt": "/static/js/2.7541d234.chunk.js.LICENSE.txt",
+    "static/js/main.ccf3901b.chunk.js.LICENSE.txt": "/static/js/main.ccf3901b.chunk.js.LICENSE.txt",
+    "static/media/hysteresis.04ebd02c.png": "/static/media/hysteresis.04ebd02c.png"
   },
   "entrypoints": [
     "static/js/runtime-main.4f1bbf1b.js",
     "static/css/2.2ae070eb.chunk.css",
-    "static/js/2.29a9b74c.chunk.js",
-    "static/css/main.5d91db15.chunk.css",
-    "static/js/main.9211e1f2.chunk.js"
+    "static/js/2.7541d234.chunk.js",
+    "static/css/main.351dc948.chunk.css",
+    "static/js/main.ccf3901b.chunk.js"
   ]
 }

io-package.json

@@ -20,8 +20,20 @@
             "Apollon77 <[email protected]>",
             "AlCalzone"
         ],
-        "version": "5.0.5",
+        "version": "5.0.6",
         "news": {
+            "5.0.6": {
+                "en": "Implemented the hysteresis",
+                "de": "Implementierte die Hysterese",
+                "ru": "Реализован гистерезис",
+                "pt": "Implementou a histerese",
+                "nl": "De hysterese geïmplementeerd",
+                "fr": "Implémentation de l'hystérésis",
+                "it": "Implementata l'isteresi",
+                "es": "Implementó la histéresis",
+                "pl": "Zaimplementowano histerezę",
+                "zh-cn": "实现了磁滞"
+            },
             "5.0.5": {
                 "en": "Implemented the toggle functionality",
                 "de": "Implementierte die Umschaltfunktion",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.javascript",
-  "version": "5.0.5",
+  "version": "5.0.6",
   "description": "Rules Engine for ioBroker",
   "author": "bluefox <[email protected]>",
   "contributors": [

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js",
-  "version": "5.0.5",
+  "version": "5.0.6",
   "private": true,
   "dependencies": {
     "@iobroker/adapter-react": "^1.6.1",

src/src/Components/RulesEditor/components/Blocks/ConditionState.js

@@ -1,4 +1,13 @@
+import React from 'react';
 import GenericBlock from '../GenericBlock';
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import I18n from "@iobroker/adapter-react/i18n";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+
+import HysteresisImage from '../../../assets/hysteresis.png';
 
 const HYSTERESIS = `function __hysteresis(val, limit, state, hist, comp) {
     let cond1, cond2;
@@ -106,6 +115,8 @@ class ConditionState extends GenericBlock {
         return result;
     }
 
+    onShowHelp = () => this.setState({showHysteresisHelp: true});
+
     _setInputs(useTrigger, tagCard, oidType, oidUnit, oidStates) {
         const isAllTriggersOnState = this.isAllTriggersOnState();
 
@@ -246,7 +257,7 @@ class ConditionState extends GenericBlock {
             nameRender: 'renderText',
             defaultValue: '',
             attr: 'value',
-            frontText: tagCard === '()' ? 'limit' : (tag?.text || 'compare with'),
+            frontText: tagCard === '()' ? 'Limit' : (tag?.text || 'compare with'),
             backText: oidUnit
         };
 
@@ -316,6 +327,12 @@ class ConditionState extends GenericBlock {
 
         if (tagCard === '()') {
             inputs.splice(1, 0, {
+                nameRender: 'renderDialog',
+                icon: 'HelpOutline',
+                frontText: 'Explanation',
+                onShowDialog: this.onShowHelp,
+            });
+            inputs.splice(2, 0, {
                 nameRender: 'renderSelect',
                 attr: 'histComp',
                 defaultValue: '>',
@@ -330,7 +347,7 @@ class ConditionState extends GenericBlock {
                 ]
             });
             inputs.push({
-                frontText: 'Spreading', // translate
+                frontText: 'Δ',
                 nameRender: 'renderNumber',
                 noHelperText: true,
                 attr: 'hist',
@@ -433,6 +450,29 @@ class ConditionState extends GenericBlock {
     getData() {
         return ConditionState.getStaticData();
     }
+
+    renderSpecific() {
+        if (this.state.showHysteresisHelp) {
+            return <Dialog
+                open={true}
+                maxWidth="md"
+                onClose={() => this.setState({showHysteresisHelp: false})}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogContent>
+                    <DialogContentText id="alert-dialog-description">
+                        <img src={HysteresisImage} alt="Hysteresis"/>
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => this.setState({showHysteresisHelp: false})} color="primary" autoFocus>
+                        {I18n.t('OK')}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        }
+    }
 }
 
 export default ConditionState;

src/src/Components/RulesEditor/components/CustomButton/index.js

@@ -4,8 +4,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import cls from './style.module.scss';
+import CustomIcon from "../../helpers/Icon";
 
-const CustomButton = ({ fullWidth, size, onClick, style, className, value, square }) => {
+const CustomButton = ({ fullWidth, size, onClick, style, className, value, square, icon }) => {
     return <Button
         variant="outlined"
         color="primary"
@@ -15,7 +16,7 @@ const CustomButton = ({ fullWidth, size, onClick, style, className, value, squar
         className={clsx(cls.root, className, square ? cls.square : '')}
         margin="normal"
         size={size}
-    >{value}</Button>;
+    >{icon ? <CustomIcon className={cls.icon} src={icon} /> : value}</Button>;
 }
 
 CustomButton.defaultProps = {

src/src/Components/RulesEditor/components/CustomButton/style.module.scss

@@ -10,4 +10,8 @@
 .square{
     min-width: auto !important;
     padding: 6px 16px !important;
+}
+.icon {
+    width: 24px;
+    height: 24px;
 }

src/src/Components/RulesEditor/components/CustomInput/index.js

@@ -1,11 +1,13 @@
 import { TextField } from '@material-ui/core';
 import React, { useState } from 'react';
+import InputAdornment from '@material-ui/core/InputAdornment';
 import cls from './style.module.scss';
 // import I18n from '@iobroker/adapter-react/i18n';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import CustomIcon from '../../helpers/Icon';
 
-const CustomInput = ({ autoFocus, fullWidth, disabled, multiline, rows, autoComplete, label, error, size, variant, value, type, style, onChange, className, customValue, minWidth }) => {
+const CustomInput = ({ autoFocus, fullWidth, disabled, multiline, rows, autoComplete, label, error, size, variant, value, type, style, onChange, className, customValue, icon }) => {
     const [inputText, setInputText] = useState('');
     return <TextField
         error={!!error}
@@ -26,6 +28,10 @@ const CustomInput = ({ autoFocus, fullWidth, disabled, multiline, rows, autoComp
             !customValue && setInputText(e.target.value);
             onChange(e.target.value);
         }}
+        endAdornment={icon ?
+            <InputAdornment position="end"><CustomIcon className={cls.icon} src={icon} /></InputAdornment>
+            : null
+        }
         margin="normal"
         size={size}
     />;

src/src/Components/RulesEditor/components/CustomInput/style.module.scss

@@ -32,3 +32,7 @@
         }
     }
 }
+
+.icon {
+
+}

src/src/Components/RulesEditor/components/GenericBlock/index.js

@@ -25,7 +25,7 @@ import MaterialDynamicIcon from '../../helpers/MaterialDynamicIcon';
 import utils from '../../helpers/utils';
 import clsx from 'clsx';
 import { STEPS } from "../../helpers/Tour";
-import { getSelectIcon } from '../../helpers/getSelectIcon';
+import { getSelectIdIcon } from '../../helpers/getSelectIcon';
 
 class GenericBlock extends PureComponent {
     constructor(props, item) {
@@ -263,6 +263,22 @@ class GenericBlock extends PureComponent {
         </div>;
     }
 
+    findIcon = obj => {
+        if (!obj) {
+            return Promise.resolve(null);
+        } else
+        if (obj.common?.icon) {
+            return Promise.resolve(getSelectIdIcon(obj, '../..'));
+        } else if (obj.type === 'state' || obj.type === 'channel') {
+            const parts = obj._id.split('.');
+            parts.pop();
+            const newId = parts.join('.');
+            return this.props.socket.getObject(newId)
+                .then(obj => this.findIcon(obj))
+                .catch(() => null);
+        }
+    }
+
     renderObjectID = (input, value, onChange) => {
         const { showSelectId, settings } = this.state;
         const { className, socket } = this.props;
@@ -275,11 +291,14 @@ class GenericBlock extends PureComponent {
         if (settings[attr] && !this.state[settings[attr]]) {
             setTimeout(() => {
                 socket.getObject(value)
-                    .then(obj =>
-                        this.setState({
-                            [settings[attr]]: obj,
-                            error: checkReadOnly && obj?.common?.write === false ? I18n.t('Read only ID selected: %s', settings[attr]) : ''
-                        }));
+                    .then(obj => {
+                        this.findIcon(obj)
+                            .then(icon => this.setState({
+                                [settings[attr]]: obj,
+                                [settings[attr] + '___icon']: icon,
+                                error: checkReadOnly && this.lastObjectIdChange && Date.now() - this.lastObjectIdChange < 1000 && obj?.common?.write === false ? I18n.t('Read only ID selected: %s', settings[attr]) : ''
+                            }))
+                    });
             }, 0);
         }
         // return null
@@ -296,6 +315,7 @@ class GenericBlock extends PureComponent {
                     customValue
                 />
                 <CustomButton
+                    icon={this.state[this.state.settings[input.attr] + '___icon']}
                     square
                     style={{ marginLeft: 7 }}
                     value='...'
@@ -314,12 +334,11 @@ class GenericBlock extends PureComponent {
                 selected={value}
                 onClose={() => this.setState({ showSelectId: false })}
                 onOk={(selected, name, common) =>
-                    this.setState({ showSelectId: false }, () => {
+                    this.setState({ showSelectId: false }, () =>
                         // read type of object
                         socket.getObject(selected)
                             .then(obj => {
-                                console.log(obj)
-                                console.log(getSelectIcon(obj))
+                                this.lastObjectIdChange = Date.now();
                                 onChange({
                                     [attr]: selected,
                                     [attr + 'Role']: obj.common.role,
@@ -334,9 +353,7 @@ class GenericBlock extends PureComponent {
                                     [attr + 'Read']: obj.common.read,
                                 }, null, () =>
                                     this.props.setOnUpdate && this.props.setOnUpdate(true))
-                            }
-                            );
-                    })}
+                            }))}
             /> : null}
         </div> : null;
     }
@@ -411,6 +428,19 @@ class GenericBlock extends PureComponent {
         </div>;
     }
 
+    renderDialog = (input, value, onChange) => {
+        const { onShowDialog, frontText, backText, attr, icon } = input;
+        return <div key={attr} className={clsx(cls.displayFlex, cls.blockMarginTop)} style={{ whiteSpace: 'nowrap' }}>
+            {frontText && <div className={cls.frontText}>{frontText}</div>}
+            <MaterialDynamicIcon
+                iconName={icon}
+                className={clsx(cls.iconDialog)}
+                onClick={e => onShowDialog && onShowDialog()}
+            />
+            {backText && <div className={cls.backText}>{backText}</div>}
+        </div>;
+    }
+
     renderModalInput = (input, value, onChange) => {
         const { openModal } = this.state;
         const { className } = this.props;
@@ -561,6 +591,10 @@ class GenericBlock extends PureComponent {
         }
     }
 
+    renderSpecific() {
+        return null; // it can be overloaded
+    }
+
     render = () => {
         const { inputs, name, icon, iconTag, settings, adapter, settings: { tagCard }, helpDialog } = this.state;
         const { socket, notFound } = this.props;
@@ -604,6 +638,7 @@ class GenericBlock extends PureComponent {
             </div>}
             {this.state.error ? <DialogError title={I18n.t('Warning')} text={this.state.error} onClose={() => this.setState({ error: '' })} /> : null}
             {this.state.helpText ? <DialogMessage title={I18n.t('Instructions')} text={this.state.helpText} onClose={() => this.setState({ helpText: '' })} /> : null}
+            {this.renderSpecific()}
         </Fragment>;
     };
 }