JavaScript
\n{I18n.t('for programmers')}
\n {I18n.t('JS description')}
\n TypeScript
\n{I18n.t('for professionals')}
\n {I18n.t('TS description')}
\n Blockly
\n{I18n.t('normal')}
\n {I18n.t('Blockly description')}
\n Rules
\n{I18n.t('easy')}
\n {I18n.t('Rules description')}
\n {I18n.t('Host')}
\n - \n {js.map(item =>
{I18n.t('Instances')}
\n - \n {instances.map(item =>
\n {props.children}\n
;\n};\n\nexport const Draggable = props => {\n const { name } = props;\n const [{ opacity }, drag] = useDrag({\n type: 'script',\n item: () => ({name}),\n collect: monitor => ({opacity: monitor.isDragging() ? 0.3 : 1,}),\n });\n // About transform: https://github.com/react-dnd/react-dnd/issues/832#issuecomment-442071628\n return \n {props.children}\n
;\n};\n\nclass SideDrawer extends React.Component {\n constructor(props) {\n super(props);\n\n let expanded = window.localStorage ? window.localStorage.getItem('SideMenu.expanded') : '[]';\n try {\n expanded = JSON.parse(expanded) || [];\n } catch (e) {\n expanded = [];\n }\n\n this.inputRef = new React.createRef();\n\n this.state = {\n listItems: prepareList(props.scripts || {}),\n expanded: expanded,\n problems: [],\n reorder: false,\n themeName: this.props.themeName,\n selected: window.localStorage ? window.localStorage.getItem('SideMenu.selected') || null : null,\n creatingScript: false,\n creatingFolder: false,\n copingScript: '',\n renaming: null,\n deleting: null,\n choosingType: null,\n errorText: '',\n instances: props.instances || [],\n menuOpened: false,\n menuAnchorEl: null,\n searchMode: false,\n expertMode: this.props.expertMode,\n searchText: '',\n width: this.props.width || 300,\n typeFilter: window.localStorage ? window.localStorage.getItem('SideMenu.typeFilter') || '' : '', // blockly, js, ts\n statusFilter: window.localStorage ? window.localStorage.getItem('SideMenu.statusFilter') || '' : '',\n runningInstances: this.props.runningInstances || {},\n scriptsHash: props.scriptsHash,\n showAdapterDebug: false,\n };\n\n const newExp = this.ensureSelectedIsVisible();\n if (newExp) {\n this.state.expanded = newExp;\n }\n\n // debounce search process\n this.filterTimer = null;\n\n this.state.isAllZeroInstances = this.getIsAllZeroInstances();\n\n this.problems = null; //cache\n this.problemsTimer = null;\n this.onProblemUpdatedBound = this.onProblemUpdated.bind(this);\n }\n\n readProblems(cb, tasks) {\n if (!tasks) {\n tasks = Object.keys(this.props.scripts);\n }\n if (!tasks || !tasks.length) {\n cb && cb();\n } else {\n const id = tasks.shift();\n if (this.props.scripts[id] &&\n this.props.scripts[id].type === 'script' &&\n this.props.scripts[id].common &&\n this.props.scripts[id].common.enabled &&\n !id.match(/^script\\.js\\.global\\./) // GLOBAL_ID\n ) {\n const instance = this.props.scripts[id].common.engine.split('.').pop();\n const that = this; // sometimes lambda does not work\n const _id = `javascript.${instance}.scriptProblem.${id.substring(ROOT_ID.length + 1)}`;\n\n this.props.socket.getState(_id, (err, state) => {\n that.onProblemUpdated(_id, state);\n setTimeout(() => that.readProblems(cb, tasks), 0);\n });\n } else {\n setTimeout(() => this.readProblems(cb, tasks), 0);\n }\n }\n }\n\n componentDidMount() {\n this.readProblems(() => {\n this.props.instances.forEach(instance => {\n this.props.socket.subscribeState(`javascript.${instance}.scriptProblem.*`, this.onProblemUpdatedBound);\n });\n });\n }\n\n componentWillUnmount() {\n this.props.instances.forEach(instance => {\n this.props.socket.unsubscribeState(`javascript.${instance}.scriptProblem.*`, this.onProblemUpdatedBound);\n });\n }\n\n onProblemUpdated(id, state) {\n if (!state || !id) return;\n id = `${ROOT_ID}.${id.replace(/^javascript\\.\\d+\\.scriptProblem\\./, '')}`;\n\n if (!this.problems) {\n this.problems = JSON.parse(JSON.stringify(this.state.problems));\n }\n let changed = false;\n\n if (state.val) {\n if (this.problems.indexOf(id) === -1) {\n this.problems.push(id);\n changed = true;\n }\n } else {\n const pos = this.problems.indexOf(id);\n if (pos !== -1) {\n this.problems.splice(pos, 1);\n changed = true;\n }\n }\n\n if (changed && !this.problemsTimer) {\n this.problemsTimer = setTimeout(() => {\n this.problemsTimer = null;\n this.setState({ problems: this.problems });\n this.problems = null;\n }, 300);\n }\n }\n\n static filterListStatic(isSearchEnabled, listItems, searchMode, searchText, objects) {\n listItems = JSON.parse(JSON.stringify(listItems));\n let changed = false;\n let newState = {listItems};\n if (isSearchEnabled !== false && searchMode && searchText) {\n const text = searchText.toLowerCase();\n listItems.forEach(item => {\n const id = item.title.toLowerCase();\n item.filteredPartly = false;\n let found = id.includes(text);\n if (!found && (objects && objects[item.id] && objects[item.id].common && objects[item.id].common.source)) {\n if (objects[item.id].common.engineType === 'Blockly') {\n const pos = objects[item.id].common.source.lastIndexOf('//');\n found = objects[item.id].common.source.substring(0, pos).toLowerCase().includes(text);\n } else {\n found = objects[item.id].common.source.toLowerCase().includes(text);\n }\n }\n if (found) {\n if (item.filtered) {\n item.filtered = false;\n changed = true;\n }\n } else if (!item.filtered) {\n item.filtered = true;\n changed = true;\n }\n });\n\n if (changed) {\n // check that all parents of every non-filtered item are visible\n for (let i = listItems.length - 1; i >= 0; i--) {\n const item = listItems[i];\n if (!item.filtered || item.filteredPartly) {\n let it = item;\n do {\n if (it.parent && listItems[it.parentIndex]) {\n changed = true;\n listItems[it.parentIndex].filteredPartly = true;\n }\n it = it.parent && listItems[it.parentIndex] ? listItems[it.parentIndex] : null;\n } while(it);\n }\n }\n }\n } else {\n listItems.forEach(item => {\n if (item.filtered || item.filteredPartly) {\n item.filtered = false;\n item.filteredPartly = false;\n changed = true;\n }\n });\n if (isSearchEnabled === false) {\n newState.searchText = '';\n newState.searchMode = false;\n changed = true;\n }\n }\n\n return changed ? newState : null;\n }\n\n filterList(isSearchEnabled, cb) {\n const newState = SideDrawer.filterListStatic(\n isSearchEnabled,\n this.state.listItems,\n this.state.searchMode,\n this.state.searchText,\n this.props.scripts,\n );\n\n if (newState) {\n this.setState(newState, () => cb && cb());\n } else if (cb) {\n cb();\n }\n }\n\n static ensureSelectedIsVisibleStatic(selected, expanded, listItems) {\n expanded = JSON.parse(JSON.stringify(expanded));\n let changed = false;\n\n // ensure that the item is visible\n let el = typeof selected === 'object' ? selected : listItems.find(it => it.id === selected);\n do {\n // eslint-disable-next-line\n el = el && el.parent && listItems.find(it => it.id === el.parent);\n if (el) {\n if (expanded.indexOf(el.id) === -1) {\n expanded.push(el.id);\n changed = true;\n }\n }\n } while(el);\n return changed && expanded;\n }\n\n ensureSelectedIsVisible(selected, expanded) {\n SideDrawer.ensureSelectedIsVisibleStatic(selected || this.state.selected, expanded || this.state.expanded, this.state.listItems);\n }\n\n static getDerivedStateFromProps(props, state) {\n const newState = {};\n let changed = false;\n if (state.expertMode !== props.expertMode) {\n changed = true;\n newState.expertMode = props.expertMode;\n }\n if (state.scriptsHash !== props.scriptsHash && props.scripts) {\n const listItems = prepareList(props.scripts || {});\n\n newState.listItems = listItems;\n\n if (state.searchText) {\n const nState = SideDrawer.filterListStatic(true, listItems, state.searchMode, state.searchText, props.scripts);\n nState && Object.assign(newState, nState);\n }\n\n const isAllZeroInstances = SideDrawer.getIsAllZeroInstancesStatic(listItems, props.instances || []);\n\n const newExp = SideDrawer.ensureSelectedIsVisibleStatic(state.selected, state.expanded, state.listItems);\n\n newState.isAllZeroInstances = isAllZeroInstances;\n if (newExp) {\n newState.expanded = newExp;\n }\n changed = true;\n }\n\n if (state.width !== props.width) {\n changed = true;\n newState.width = props.width;\n }\n if (state.themeName !== props.themeName) {\n changed = true;\n newState.themeName = props.themeName;\n }\n\n if (props.selectId && state.selected !== props.selectId) {\n const item = state.listItems.find(item => item.id === props.selectId);\n\n if (!state.reorder && item) {\n const expanded = SideDrawer.ensureSelectedIsVisibleStatic(item, state.expanded, state.listItems);\n newState.selected = item.id;\n if (expanded) {\n newState.expanded = expanded;\n }\n changed = true;\n window.localStorage && window.localStorage.setItem('SideMenu.selected', item.id);\n }\n }\n\n if (changed) {\n return newState;\n } else {\n return null;\n }\n }\n\n static getIsAllZeroInstancesStatic(listItems, instances) {\n let isAllZeroInstances = !instances[0] && instances.length <= 1;\n\n if (isAllZeroInstances) {\n listItems.forEach(item => {\n if (item.type !== 'folder' && item.instance !== 0) {\n isAllZeroInstances = false;\n }\n });\n }\n return isAllZeroInstances;\n }\n\n getIsAllZeroInstances(listItems, instances) {\n listItems = listItems || this.state.listItems;\n instances = instances || this.state.instances;\n return SideDrawer.getIsAllZeroInstancesStatic(listItems || this.state.listItems, instances || this.state.instances);\n }\n\n saveExpanded(expanded) {\n window.localStorage.setItem('SideMenu.expanded', JSON.stringify(expanded || this.state.expanded));\n }\n\n showError(errorText) {\n this.setState({ errorText });\n }\n\n onToggle(id, e) {\n e && e.stopPropagation();\n if (id === ROOT_ID) {\n return;\n }\n const expanded = [...this.state.expanded];\n const newState = {expanded};\n const pos = expanded.indexOf(id);\n if (pos !== -1) {\n expanded.splice(pos, 1);\n if (this.state.selected && this.state.selected.startsWith(`${id}.`)) {\n newState.selected = id;\n window.localStorage && window.localStorage.setItem('SideMenu.selected', id);\n }\n } else {\n expanded.push(id);\n expanded.sort();\n }\n this.setState({ expanded });\n this.saveExpanded(expanded);\n }\n\n renderItemButtonsOnEnd(item, children) {\n if (this.state.reorder) {\n return null;\n }\n if (item.type !== 'folder') {\n let color = item.enabled ? COLOR_RUN : COLOR_PAUSE;\n if (item.enabled && this.state.problems.includes(item.id)) {\n color = COLOR_PROBLEM;\n }\n\n return [\n \n {this.getToolbarButtons()}\n
\n\n \n {this.renderAllItems(this.state.listItems)}\n
\n {this.getBottomButtons()}
\n ,\n\n renamingItem ? \n {lines}
\n \n
;\n } else {\n return {I18n.t('Log outputs')}
;\n }\n }\n\n render() {\n const lines = this.state.selected && this.state.lines[this.state.selected];\n return \n
;\n }\n}\n\nLog.propTypes = {\n selected: PropTypes.string,\n socket: PropTypes.object,\n onLayoutChange: PropTypes.func,\n verticalLayout: PropTypes.bool,\n};\n\nexport default withStyles(styles)(Log);\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Fab } from '@mui/material';\n\nimport { MdGTranslate as IconNoCheck } from 'react-icons/md';\n\nimport { I18n } from '@iobroker/adapter-react-v5';\n\nfunction isIdOfGlobalScript(id) {\n return /^script\\.js\\.global\\./.test(id);\n}\nlet index = 0;\nclass ScriptEditor extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: 'current',\n isDark: props.isDark || false,\n language: props.language || 'javascript',\n readOnly: props.readOnly || false,\n alive: true,\n check: false,\n searchText: this.props.searchText || '',\n typingsLoaded: false,\n };\n this.runningInstancesStr = JSON.stringify(this.props.runningInstances);\n this.monacoDiv = null; //ref\n this.editor = null;\n this.monaco = window.monaco;\n this.insert = '';\n this.originalCode = props.code || '';\n this.typings = {}; // TypeScript declarations\n this.lastSearch = '';\n }\n\n waitForMonaco(cb) {\n let monacoLoaded = this.monaco?.languages?.typescript?.typescriptDefaults?.getCompilerOptions;\n if (!monacoLoaded || !this.props.runningInstances) {\n this.monaco = window.monaco;\n monacoLoaded = this.monaco?.languages?.typescript?.typescriptDefaults?.getCompilerOptions;\n this.monacoCounter = this.monacoCounter || 0;\n this.monacoCounter++;\n if (!monacoLoaded && this.monacoCounter < 20) {\n console.log('wait for monaco loaded');\n setTimeout(() => this.waitForMonaco(cb), 200);\n return;\n }\n if (this.monacoCounter >= 20) {\n console.error('Cannot load monaco!');\n }\n } else {\n cb && cb();\n }\n }\n\n loadTypings(runningInstances) {\n if (!this.editor) {\n return;\n }\n runningInstances = runningInstances || this.props.runningInstances;\n\n const scriptAdapterInstance = runningInstances && Object.keys(runningInstances).find(id => runningInstances[id]);\n if (scriptAdapterInstance) {\n this.props.socket.sendTo(scriptAdapterInstance.replace('system.adapter.', ''), 'loadTypings', null)\n .then(result => {\n this.setState({ alive: true, check: true, typingsLoaded: true });\n this.setTypeCheck(true);\n if (result.typings) {\n this.typings = result.typings;\n this.setEditorTypings(this.state.name);\n } else {\n console.error(`failed to load typings: ${result.error}`);\n }\n });\n }\n }\n\n componentDidMount() {\n const monacoLoaded = this.monaco?.languages?.typescript?.typescriptDefaults?.getCompilerOptions;\n if (!monacoLoaded || !this.props.runningInstances) {\n this.monaco = window.monaco;\n if (!monacoLoaded) {\n console.log('wait for monaco loaded...');\n this.waitForMonaco(() => this.componentDidMount());\n\n return;\n }\n }\n if (!this.editor && monacoLoaded) {\n console.log('Init editor');\n this.props.onRegisterSelect && this.props.onRegisterSelect(() => this.editor.getModel().getValueInRange(this.editor.getSelection()));\n // For some reason, we have to get the original compiler options\n // and assign new properties one by one\n const compilerOptions = this.monaco.languages.typescript.typescriptDefaults['getCompilerOptions']();\n compilerOptions.target = this.monaco.languages.typescript.ScriptTarget.ES2015;\n compilerOptions.allowJs = true;\n compilerOptions.checkJs = this.props.checkJs !== false;\n compilerOptions.noLib = true;\n compilerOptions.lib = [];\n compilerOptions.useUnknownInCatchVariables = false;\n compilerOptions.moduleResolution = this.monaco.languages.typescript.ModuleResolutionKind.NodeJs;\n this.monaco.languages.typescript.typescriptDefaults.setCompilerOptions(compilerOptions);\n\n this.setTypeCheck(false);\n\n // Create the editor instances\n this.editor = this.monaco.editor.create(this.monacoDiv, {\n lineNumbers: 'on',\n scrollBeyondLastLine: false,\n automaticLayout: true,\n glyphMargin: !!this.props.breakpoints,\n });\n\n this.editor.onDidChangeModelContent(() =>\n this.onChange(this.editor.getValue()));\n\n // Load typings for the JS editor\n /** @type {string} */\n this.loadTypings();\n\n this.editor.addCommand(this.monaco.KeyMod.CtrlCmd | this.monaco.KeyCode.KEY_S, () =>\n this.onForceSave());\n\n setTimeout(() => {\n this.highlightText(this.state.searchText);\n this.location = this.props.location;\n this.breakpoints = this.props.breakpoints;\n this.showDecorators();\n });\n }\n const options = {\n selectOnLineNumbers: true,\n scrollBeyondLastLine: false,\n automaticLayout: true,\n readOnly: this.state.readOnly,\n language: this.state.language,\n isDark: this.state.isDark,\n };\n\n this.setEditorOptions(options);\n this.editor.focus();\n this.editor.setValue(this.originalCode);\n\n if (this.props.onToggleBreakpoint) {\n // add onMouseDown listener to toggle breakpoints\n this.editor.onMouseDown(e => {\n if (e.target.detail && e.target.detail.glyphMarginLeft !== undefined) {\n this.props.onToggleBreakpoint(e.target.position.lineNumber - 1);\n }\n });\n } else {\n // remove onMouseDown listener\n this.editor.onMouseDown(() => { /* nop */ });\n }\n }\n\n /**\n * Sets some options of the code editor\n * @param {object} options The editor options to change\n * @param {Partial<{readOnly: boolean, lineWrap: boolean, language: EditorLanguage, typeCheck: boolean}>} options\n */\n setEditorOptions(options) {\n if (options) {\n if (options.language) {\n this.setEditorLanguage(options.language);\n }\n if (options.readOnly !== undefined) {\n this.editor.updateOptions({ readOnly: options.readOnly });\n }\n if (options.lineWrap !== undefined) {\n this.editor.updateOptions({ wordWrap: options.lineWrap ? 'on' : 'off' });\n }\n if (options.typeCheck !== undefined) {\n this.setTypeCheck(options.typeCheck);\n }\n if (options.isDark !== undefined) {\n this.monaco.editor.setTheme(options.isDark ? 'vs-dark' : 'vs');\n }\n }\n }\n\n componentWillUnmount() {\n if (this.editor) {\n this.props.onRegisterSelect && this.props.onRegisterSelect(null);\n this.editor.dispose();\n this.editor = null;\n }\n }\n\n /** @typedef {\"javascript\" | \"typescript\"} EditorLanguage */\n\n /**\n * Sets the language of the code editor\n * @param {EditorLanguage} language\n */\n setEditorLanguage(language) {\n // we need to recreate the model when changing languages,\n // so remember its settings\n const model = this.editor.getModel();\n const code = model.getValue();\n const uri = model.uri.path;\n\n const filenameWithoutExtension =\n typeof uri === 'string' && uri.includes('.')\n ? uri.substr(0, uri.lastIndexOf('.'))\n : 'index';\n\n const extension =\n language === 'javascript' ? 'js'\n : (language === 'typescript' ? 'ts' : language);\n\n // get rid of the original model\n model.dispose();\n\n // Both JS and TS need the model to work in TypeScript as the script type\n // is inferred from the file extension\n const newLanguage = (language === 'javascript' || language === 'typescript') ? 'typescript' : language;\n\n const newModel = this.monaco.editor.createModel(\n code,\n newLanguage,\n this.monaco.Uri.from({ path: `${filenameWithoutExtension}${index++}.${extension}` }),\n );\n\n this.editor.setModel(newModel);\n }\n\n /**\n * Enables or disables the type checking in the editor\n * @param {boolean} enabled - Whether type checking is enabled or not\n */\n setTypeCheck(enabled) {\n const options = {\n noSemanticValidation: !this.state.alive || !enabled, // toggle the type checking\n noSyntaxValidation: !this.state.alive // always check the syntax\n };\n this.monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions(options);\n }\n\n /**\n * @param {string} [currentScriptName] The name of the current script\n */\n setEditorTypings(currentScriptName = '') {\n const isGlobalScript = isIdOfGlobalScript(currentScriptName);\n // The filename of the declarations this script can see if it is a global script\n const partialDeclarationsPath = `${currentScriptName}.d.ts`;\n const wantedTypings = [];\n for (const path of Object.keys(this.typings)) {\n // global scripts don't get to see all other global scripts\n // but only a part of them\n if (isGlobalScript) {\n if (path === 'global.d.ts') {\n continue;\n }\n if (path.startsWith('script.js.global') && path !== partialDeclarationsPath) {\n continue;\n }\n }\n wantedTypings.push({\n filePath: path,\n content: this.typings[path],\n });\n }\n\n // TODO BF: check https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-semantic-tokens-provider-example\n // to support 0.21.0\n\n if (this.monaco?.languages?.typescript?.typescriptDefaults?.setExtraLibs) {\n this.monaco.languages.typescript.typescriptDefaults.setExtraLibs(wantedTypings);\n } else if (this.monaco?.languages?.typescript?.typescriptDefaults?.addExtraLib) {\n const existingLibs = this.monaco.languages.typescript.typescriptDefaults.getExtraLibs();\n wantedTypings.forEach(lib => {\n if (!existingLibs[lib.filePath]) {\n this.monaco.languages.typescript.typescriptDefaults.addExtraLib(lib, lib.filePath);\n }\n });\n }\n }\n\n /**\n * Inserts some text into the given editor\n * @param {string} text The text to add\n */\n insertTextIntoEditor(text) {\n const selection = this.editor.getSelection();\n const range = new this.monaco.Range(\n selection.startLineNumber,\n selection.startColumn,\n selection.endLineNumber,\n selection.endColumn,\n );\n this.editor.executeEdits('', [{ range, text, forceMoveMarkers: true }]);\n this.editor.focus();\n }\n\n highlightText(text) {\n const range = text && this.editor.getModel().findMatches(text);\n if (range && range.length) {\n range.forEach(r => this.editor.setSelection(r.range));\n this.editor.revealLine(range[0].range.startLineNumber);\n } else if (this.editor) {\n const row = this.editor.getPosition().lineNumber;\n const col = this.editor.getPosition().column;\n this.editor.setSelection(new this.monaco.Range(row, col, row, col));\n }\n }\n\n showDecorators() {\n this.decorations = this.decorations || [];\n const decorations = [];\n if (this.location) {\n decorations.push({\n range: new this.monaco.Range(this.location.lineNumber + 1, this.location.columnNumber + 1, this.location.lineNumber + 1, 1000),\n options: {\n isWholeLine: false,\n className: this.props.isDark ? 'monacoCurrentLineDark' : 'monacoCurrentLine',\n },\n });\n decorations.push({\n range: new this.monaco.Range(this.location.lineNumber + 1, 0, this.location.lineNumber + 1, 0),\n options: {\n isWholeLine: true,\n className: this.props.isDark ? 'monacoCurrentFullLineDark' : 'monacoCurrentFullLine',\n },\n });\n }\n\n if (this.breakpoints) {\n this.breakpoints.forEach(bp => {\n decorations.push({\n range: new this.monaco.Range(bp.location.lineNumber + 1, 0, bp.location.lineNumber + 1, 100),\n options: {\n isWholeLine: true,\n glyphMarginClassName: this.props.isDark ? 'monacoBreakPointDark' : 'monacoBreakPoint',\n },\n });\n });\n }\n this.editor && (this.decorations =\n this.editor.deltaDecorations(this.decorations, decorations));\n }\n\n initNewScript(name, code) {\n this.setState({ name });\n this.originalCode = code || '';\n this.editor && this.editor.setValue(code);\n this.highlightText(this.lastSearch);\n this.showDecorators();\n // this.setEditorLanguage();\n // Update the typings because global scripts need different typings than normal scripts\n // and each global script has different typings\n this.setEditorTypings(name);\n }\n\n scrollToLineIfNeeded(lineNumber) {\n if (this.editor) {\n const ranges = this.editor.getVisibleRanges();\n if (!ranges || !ranges[0] || ranges[0].startLineNumber > lineNumber || lineNumber > ranges[0].endLineNumber) {\n this.editor.revealLineInCenter(lineNumber);\n }\n }\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const options = {};\n if (this.state.name !== nextProps.name) {\n // A different script was selected\n this.initNewScript(nextProps.name, nextProps.code);\n }\n\n // if some running instance is found and\n if (JSON.stringify(nextProps.runningInstances) !== this.runningInstancesStr) {\n this.runningInstancesStr = JSON.stringify(nextProps.runningInstances);\n if (!this.state.typingsLoaded) {\n this.loadTypings(nextProps.runningInstances);\n }\n }\n\n // if the code not yet changed, update the new code\n if (this.editor && !nextProps.changed && (nextProps.code !== this.originalCode || nextProps.code !== this.editor.getValue())) {\n this.originalCode = nextProps.code;\n this.editor.setValue(this.originalCode);\n this.showDecorators();\n this.location && this.scrollToLineIfNeeded(this.location.lineNumber + 1);\n }\n\n if (nextProps.searchText !== this.lastSearch) {\n this.lastSearch = nextProps.searchText;\n this.highlightText(this.lastSearch);\n }\n\n if (JSON.stringify(nextProps.location) !== JSON.stringify(this.location) &&\n JSON.stringify(nextProps.breakpoints) !== JSON.stringify(this.breakpoints)\n ) {\n this.location = nextProps.location;\n this.breakpoints = nextProps.breakpoints;\n this.showDecorators();\n this.editor && this.location && this.scrollToLineIfNeeded(this.location.lineNumber + 1);\n // this.editor && this.location && this.editor.setPosition(this.location.lineNumber + 1, this.location.columnNumber + 1);\n } else if (JSON.stringify(nextProps.breakpoints) !== JSON.stringify(this.breakpoints)) {\n this.breakpoints = nextProps.breakpoints;\n this.showDecorators();\n } else if (JSON.stringify(nextProps.location) !== JSON.stringify(this.location)) {\n this.location = nextProps.location;\n this.showDecorators();\n this.editor && this.location && this.scrollToLineIfNeeded(this.location.lineNumber + 1);\n // this.editor && this.location && this.editor.setPosition(this.location.lineNumber + 1, this.location.columnNumber + 1);\n }\n\n if (this.state.language !== (nextProps.language || 'javascript')) {\n this.setState({ language: nextProps.language || 'javascript' });\n options.language = nextProps.language || 'javascript';\n } else if (this.state.readOnly !== (nextProps.readOnly || false)) {\n this.setState({ readOnly: nextProps.readOnly || false });\n options.readOnly = nextProps.readOnly;\n } else if (this.state.isDark !== (nextProps.isDark || false)) {\n this.setState({ isDark: nextProps.isDark || false });\n options.isDark = nextProps.isDark;\n }\n\n this.setEditorOptions(options);\n\n if (this.insert !== nextProps.insert) {\n this.insert = nextProps.insert;\n if (this.insert) {\n console.log(`Insert text: ${this.insert}`);\n setTimeout(insert => {\n this.insertTextIntoEditor(insert);\n setTimeout(() => this.props.onInserted && this.props.onInserted(), 100);\n }, 100, this.insert);\n }\n }\n }\n\n onChange(newValue, e) {\n if (!this.props.readOnly) {\n this.props.onChange && this.props.onChange(this.editor.getValue());\n }\n }\n\n render() {\n if (!this.monaco?.languages?.typescript?.typescriptDefaults || !this.props.runningInstances) {\n setTimeout(() => {\n this.monaco = window.monaco;\n this.forceUpdate();\n }, 200);\n return null;\n }\n\n return \n this.setState({ goBottom: !this.state.goBottom })}\n color={this.state.goBottom ? 'secondary' : ''}\n size=\"medium\"> this.clearLog()}\n size=\"medium\"> this.onCopy()}\n size=\"medium\"> this.props.onLayoutChange()}\n title={I18n.t('Change layout')}\n size=\"medium\">
: null}\n this.props.onHideLog()}\n title={I18n.t('Hide logs')}\n size=\"medium\">
\n {this.renderLogList(lines)}\n this.monacoDiv = el} style={{width: '100%', height: '100%', overflow: 'hidden', position: 'relative'}}>\n {!this.state.check && \n
;\n }\n}\n\nScriptEditor.propTypes = {\n adapterName: PropTypes.string.isRequired,\n socket: PropTypes.object,\n runningInstances: PropTypes.object,\n name: PropTypes.string,\n onChange: PropTypes.func,\n onForceSave: PropTypes.func,\n onInserted: PropTypes.func,\n isDark: PropTypes.bool,\n readOnly: PropTypes.bool,\n code: PropTypes.string,\n language: PropTypes.string,\n onRegisterSelect: PropTypes.func,\n searchText: PropTypes.string,\n checkJs: PropTypes.bool,\n changed: PropTypes.bool,\n\n breakpoints: PropTypes.array,\n location: PropTypes.object,\n onToggleBreakpoint: PropTypes.func,\n};\n\nexport default ScriptEditor;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport withStyles from '@mui/styles/withStyles';\n\nimport Button from '@mui/material/Button';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogActions from '@mui/material/DialogActions';\nimport Dialog from '@mui/material/Dialog';\nimport Popper from '@mui/material/Popper';\nimport Fade from '@mui/material/Fade';\nimport Paper from '@mui/material/Paper';\n\nimport IconCopy from '@mui/icons-material/FileCopy';\nimport { FaFileExport as IconExport } from 'react-icons/fa';\nimport IconCancel from '@mui/icons-material/Cancel';\nimport { I18n, Utils } from '@iobroker/adapter-react-v5';\n\nconst styles = theme => ({\n textArea: {\n width: '100%',\n height: '100%',\n overflow: 'auto',\n },\n textAreaLight: {\n background: 'lightgray',\n },\n dialog: {\n height: '95%',\n },\n typography: {\n padding: theme.spacing(2),\n },\n overflowY: {\n overflowY: 'hidden',\n },\n});\n\nclass DialogExport extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n anchorEl: null,\n popper: '',\n };\n }\n\n handleCancel() {\n this.props.onClose();\n }\n\n onCopy(event) {\n Utils.copyToClipboard(this.props.text);\n const anchorEl = event.currentTarget;\n\n setTimeout(() => {\n this.setState({ popper: I18n.t('Copied'), anchorEl });\n setTimeout(() => this.setState({ popper: '', anchorEl: null }), 1000);\n }, 50);\n }\n\n render() {\n const classes = this.props.classes;\n const file = new Blob([this.props.text], {type: 'application/xml'});\n const fileName = this.props.scriptId.substring('scripts.js'.length) + '.xml';\n\n return {this.state.popper}
\n\n \n {I18n.t('Some files will be rejected')}\n
);\n } else if (isDragActive) {\n if (this.state.imageStatus !== 'accepted') {\n this.setState({imageStatus: 'accepted'});\n }\n\n return (\n \n \n {I18n.t('All files will be accepted')}\n
);\n } else {\n if (this.state.imageStatus !== 'wait') {\n this.setState({imageStatus: 'wait'});\n }\n return (\n \n \n {I18n.t('Drop some files here or click...')}\n \n
);\n }\n }\n }\n \n {I18n.t('function (')}\n {this.props.args}\n )\n
)}\n \n \n \n onChange(`${e.target.value.toString().padStart(2, '0')}.${date.toString().padStart(2, '0')}`)}\n value={month}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n onChange(`${month.toString().padStart(2, '0')}.${e.target.value.toString().padStart(2, '0')}`)}\n value={date}\n >\n \n {days.map(i => )}\n \n \n
;\n}\n\nCustomDate.defaultProps = {\n value: '',\n className: null,\n};\n\nCustomDate.propTypes = {\n title: PropTypes.string,\n attr: PropTypes.string,\n style: PropTypes.object,\n onChange: PropTypes.func\n};\n\nexport default CustomDate;","import { I18n } from '@iobroker/adapter-react-v5';\n\nlet lang;\nconst getName = obj => {\n lang = lang || I18n.getLanguage();\n if (typeof obj === 'object') {\n return obj[lang] || obj.en;\n } else {\n return obj;\n }\n};\n\nconst utils = {\n getName\n};\n\nexport default utils;","const STEPS = {\n selectTriggers: 0,\n addScheduleByDoubleClick: 1,\n openTagsMenu: 2,\n selectIntervalTag: 3,\n selectActions: 4,\n addActionPrintText: 5,\n showJavascript: 6,\n switchBackToRules: 7,\n saveTheScript: 8,\n};\n\nconst steps = [\n { // 0\n selector: '.blocks-triggers',\n content: 'Select triggers',\n },\n { // 1\n selector: '.block-TriggerScheduleBlock',\n content: 'Double click to add the block',\n },\n { // 2\n selector: '.tag-card',\n content: 'Open drop down menu',\n },\n { // 3\n selector: '.tag-card-interval',\n content: 'Select interval',\n },\n { // 4\n selector: '.blocks-actions',\n content: 'Select action blocks',\n },\n { // 5\n selector: '.block-ActionPrintText',\n content: 'Double click to add the block',\n },\n { // 6\n selector: '.button-js-code',\n content: 'Check the script',\n },\n { // 7\n selector: '.button-js-code',\n content: 'Switch back to rules',\n },\n { // 8\n selector: '.button-save',\n content: 'Save the script',\n }\n];\n\nexport {STEPS};\n\nexport default steps;","import React, { PureComponent, Fragment } from 'react';\nimport cls from './style.module.scss';\n\nimport { Menu, MenuItem } from '@mui/material';\nimport IconButton from '@mui/material/IconButton';\nimport IconHelp from '@mui/icons-material/HelpOutline';\n\nimport DialogSelectID from '@iobroker/adapter-react-v5/Dialogs/SelectID';\nimport DialogError from '@iobroker/adapter-react-v5/Dialogs/Error';\nimport DialogMessage from '@iobroker/adapter-react-v5/Dialogs/Message';\nimport { getSelectIdIcon } from '@iobroker/adapter-react-v5/Components/Icon';\nimport { I18n, Utils } from '@iobroker/adapter-react-v5';\n\n\nimport CustomButton from '../CustomButton';\nimport CustomCheckbox from '../CustomCheckbox';\nimport CustomInput from '../CustomInput';\nimport CustomInstance from '../CustomInstance';\nimport CustomModal from '../CustomModal';\nimport CustomSelect from '../CustomSelect';\nimport CustomSlider from '../CustomSlider';\nimport CustomSwitch from '../CustomSwitch';\nimport CustomTime from '../CustomTime';\nimport CustomDate from '../CustomDate';\n\nimport MaterialDynamicIcon from '../../helpers/MaterialDynamicIcon';\nimport utils from '../../helpers/utils';\nimport { STEPS } from '../../helpers/Tour';\n\nclass GenericBlock extends PureComponent {\n constructor(props, item) {\n super(props);\n item = item || {};\n let settings = props.settings || {\n tagCard: item.tagCardArray ? typeof item.tagCardArray[0] !== 'string' ? item.tagCardArray[0].title : item.tagCardArray[0] : '',\n };\n\n if (!settings.tagCard && item.tagCardArray) {\n settings.tagCard = typeof item.tagCardArray[0] !== 'string' ? item.tagCardArray[0].title : item.tagCardArray[0];\n }\n\n this.state = {\n inputs: item.inputs || props.inputs || [],\n name: item.name || props.name || '',\n icon: item.icon || props.icon || '',\n adapter: item.adapter || props.adapter || '',\n helpDialog: item.helpDialog || props.helpDialog || '',\n\n tagCardArray: item.tagCardArray || [],\n\n openTagMenu: false,\n openModal: false,\n iconTag: false,\n error: '',\n helpText: '',\n\n oid: {},\n instanceSelectionOptions: [],\n instanceSelectionDef: '',\n\n hideAttributes: [], // e.g. instance\n\n settings,\n debugMessage: null,\n enableSimulation: this.props.enableSimulation,\n };\n\n this.debugHideTimeout = null;\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n if (!nextProps || !nextProps.settings) {\n console.log(JSON.stringify(nextProps));\n return;\n }\n\n const settings = JSON.parse(JSON.stringify(nextProps.settings));\n if (!settings.tagCard && this.state.tagCardArray && this.state.tagCardArray.length) {\n settings.tagCard = typeof this.state.tagCardArray[0] !== 'string' ? this.state.tagCardArray[0].title : this.state.tagCardArray[0];\n }\n\n let newState = null;\n\n if (nextProps.onDebugMessage && nextProps.onDebugMessage.blockId === this.props._id) {\n newState = {};\n newState.debugMessage = JSON.parse(JSON.stringify(nextProps.onDebugMessage));\n this.debugHideTimeout && clearTimeout(this.debugHideTimeout);\n this.debugHideTimeout = setTimeout(() =>\n this.setState({ debugMessage: null }),\n nextProps.onDebugMessage.hideTimeout || 5000);\n }\n\n if (JSON.stringify(settings) !== JSON.stringify(this.state.settings)) {\n newState = newState || {};\n newState.settings = settings;\n }\n\n if (this.state.enableSimulation !== nextProps.enableSimulation) {\n newState = newState || {};\n newState.enableSimulation = nextProps.enableSimulation;\n }\n\n newState && this.setState(newState);\n }\n\n componentWillUnmount() {\n this.debugHideTimeout && clearTimeout(this.debugHideTimeout);\n this.debugHideTimeout = null;\n }\n\n // called every time, the tagCard changes or at start\n onTagChange(tagCard, cb) {\n // analyse inputs and fill the attributes with default values\n let changed = false;\n let settings = JSON.parse(JSON.stringify(this.state.settings));\n this.state.inputs.forEach(input => {\n if (input.attr && input.defaultValue !== undefined) {\n if (settings[input.attr] === undefined) {\n changed = true;\n settings[input.attr] = input.defaultValue;\n }\n }\n });\n if (changed) {\n this.setState({ settings }, () => cb && cb());\n this.props.onChange(settings);\n } else {\n cb && cb();\n }\n }\n\n // called if trigger added or removed\n onUpdate() {\n // do nothing, but blocks can overwrite it\n }\n\n // called every time if some attribute changes\n onValueChanged(value, attr) {\n // do nothing, but blocks can overwrite it\n }\n\n renderText = (input, value, onChange) => {\n const { className } = this.props;\n const { attr, frontText, backText, nameBlock, name, doNotTranslate, doNotTranslateBack } = input;\n return \n {frontText &&
\n {nameBlock && {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n {I18n.t(nameBlock)}
}\n \n
;\n }\n\n renderNameText = ({ attr, signature, doNotTranslate, defaultValue }, value) => \n {frontText &&
\n {nameBlock && {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n {I18n.t(nameBlock)}
}\n \n {frontText &&
: null;\n }\n\n renderColor = (input, value, onChange) => {\n const { className } = this.props;\n const { attr, backText, frontText, doNotTranslate, doNotTranslateBack } = input;\n return {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n {frontText &&
;\n }\n\n renderCheckbox = (input, value, onChange) => {\n const { className } = this.props;\n const { settings } = this.state;\n const { attr, backText, frontText, defaultValue, doNotTranslate, doNotTranslateBack } = input;\n return {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n {frontText &&
;\n }\n\n renderSlider = (input, value, onChange) => {\n const { className } = this.props;\n const { attr, frontText, backText, nameBlock, min, max, step, unit, doNotTranslate, doNotTranslateBack } = input;\n return {doNotTranslate ? frontText : I18n.t(frontText)}
}\n onChange(typeof settings[attr] === 'boolean' ? !settings[attr] : !defaultValue)} className={cls.backText}>{doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n
;\n }\n\n renderButton = (input, value, onClick) => {\n const { className } = this.props;\n const { attr, frontText, backText, buttonText, doNotTranslate, doNotTranslateBack } = input;\n return \n {frontText && {\n console.log(val);\n onChange(val);\n }}\n />\n {backText &&
\n {nameBlock && {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n {I18n.t(nameBlock)}
}\n \n {frontText &&
;\n }\n\n findIcon = obj => {\n if (!obj) {\n return Promise.resolve(null);\n } else\n if (obj.common?.icon) {\n return Promise.resolve(getSelectIdIcon(obj, '../..'));\n } else if (obj.type === 'state' || obj.type === 'channel') {\n const parts = obj._id.split('.');\n parts.pop();\n const newId = parts.join('.');\n return this.props.socket.getObject(newId)\n .then(obj => this.findIcon(obj))\n .catch(() => null);\n }\n }\n\n renderObjectID = (input, value, onChange) => {\n const { attr, openCheckbox, checkReadOnly } = input;\n const { settings } = this.state;\n const showSelectId = this.state[`showSelectId${attr}`];\n const { className, socket } = this.props;\n let visibility = true;\n if (openCheckbox) {\n visibility = typeof settings['offset'] === 'boolean' ? settings['offset'] : true;\n }\n\n if (settings[attr] && !this.state[settings[attr]]) {\n setTimeout(() => {\n socket.getObject(value)\n .then(obj => {\n this.findIcon(obj)\n .then(icon => this.setState({\n [settings[attr]]: obj,\n [`${settings[attr]}___icon`]: icon,\n error: checkReadOnly && this.lastObjectIdChange && Date.now() - this.lastObjectIdChange < 1000 && obj?.common?.write === false ?\n I18n.t('Read only ID selected: %s', settings[attr]) : '',\n }))\n });\n }, 0);\n }\n\n // return null\n return visibility ? {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n {\n const settings = {};\n settings[`showSelectId${attr}`] = false;\n this.setState(settings);\n }}\n onOk={(selected, name, common) => {\n const settings = {};\n settings[`showSelectId${attr}`] = false;\n this.setState(settings, () =>\n // read type of object\n socket.getObject(selected)\n .then(obj => {\n this.lastObjectIdChange = Date.now();\n onChange({\n [attr]: selected,\n [`${attr}Role`]: obj.common.role,\n [`${attr}Type`]: obj.common.type,\n [`${attr}Unit`]: obj.common.unit,\n [`${attr}States`]: obj.common.states,\n [`${attr}Min`]: obj.common.min,\n [`${attr}Max`]: obj.common.max,\n [`${attr}Step`]: obj.common.step,\n [`${attr}Def`]: obj.common.def,\n [`${attr}Write`]: obj.common.write,\n [`${attr}Read`]: obj.common.read,\n }, null, () =>\n this.props.setOnUpdate && this.props.setOnUpdate(true))\n }))}\n }\n /> : null}\n
: null;\n }\n\n renderIconTag = () => {\n return \n {input.title ? {\n const settings = {};\n settings[`showSelectId${attr}`] = true;\n this.setState(settings);\n }}\n />\n
\n {this.state[this.state.settings[input.attr]] && {I18n.t(input.title)}
: null}\n {Utils.getObjectNameFromObj(this.state[settings[attr]], I18n.getLanguage())}
}\n {showSelectId ? \n {frontText &&
;\n };\n\n renderSelect = (input, value, onChange) => {\n const { className } = this.props;\n const { name, options, frontText, backText, attr, multiple, doNotTranslate, doNotTranslate2, doNotTranslateBack } = input;\n return {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n {frontText &&
;\n };\n\n renderInstance = (input, value, onChange) => {\n const { className, socket } = this.props;\n const { name, options, frontText, backText, attr, adapter, doNotTranslate, doNotTranslateBack } = input;\n if (this.state.hideAttributes.includes(attr)) {\n return null;\n }\n return {I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n {frontText && this.setState({ hideAttributes: [...this.state.hideAttributes, attr] }, () => onChange(value))} // hide instance if only exactly one exists\n />\n {backText &&
;\n }\n\n renderDialog = (input, value, onChange) => {\n const { onShowDialog, frontText, backText, attr, icon, doNotTranslate, doNotTranslateBack } = input;\n return {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n {frontText && onShowDialog && onShowDialog()}\n />\n {backText &&
;\n }\n\n renderModalInput = (input, value, onChange) => {\n const { openModal } = this.state;\n const { className } = this.props;\n const { attr, nameBlock, frontText, backText, noTextEdit, doNotTranslate, doNotTranslateBack} = input;\n return {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n \n this.setState({ openModal: false }, () =>\n val !== null && val !== undefined && onChange(val))}\n onClose={() => this.setState({ openModal: false })}\n defaultValue={value}\n textInput\n /> : null}\n {nameBlock &&
;\n };\n\n renderDate = (input, value, onChange) => {\n const { attr, backText, frontText, doNotTranslate, doNotTranslateBack } = input\n return \n {frontText && this.setState({ openModal: true })}\n />\n {backText &&
\n {openModal ? {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n {I18n.t(nameBlock)}
}\n \n {frontText &&
;\n };\n\n static getReplacesInText(context) {\n let value = '';\n if (context.trigger?.oidType) {\n value = '.replace(/%s/g, obj.state.val).replace(/%id/g, obj.id).replace(/%name/g, obj.common && obj.common.name).replace(/%old/g, obj.oldState.val)';\n } else if (context.conditionsStates.length) {\n value = `.replace(/%s/g, ${context.conditionsStates[0].name}).replace(/%id/g, \"${context.conditionsStates[0].id}\")`;\n }\n return value;\n }\n\n /////////////////////////////\n renderTags = () => {\n let { tagCardArray, openTagMenu } = this.state;\n let { tagCard } = this.state.settings;\n let result = tagCard !== '=' && tagCard !== '<>' && tagCard !== '>=' && tagCard !== '()' && tagCard !== '.' && tagCard !== '<=' && tagCard !== '<' && tagCard !== '>' ? I18n.t(tagCard) : tagCard;\n if (tagCardArray.length >= 3) {\n result = {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n this.setState({ openTagMenu: null })}\n >\n {tagCardArray.map(el => {\n let tag = el;\n if (typeof el !== 'string') {\n tag = el.title;\n }\n return (\n {\n const settings = { ...this.state.settings, tagCard: tag };\n this.setState({ openTagMenu: null, settings }, () => {\n this.props.onChange(settings);\n this.onTagChange(tag);\n });\n (this.props.isTourOpen &&\n (this.props.tourStep === STEPS.openTagsMenu ||\n this.props.tourStep === STEPS.selectIntervalTag) &&\n tag === 'interval' &&\n setTimeout(() => this.props.setTourStep(STEPS.selectActions), 500));\n\n }}>{tag.search(/>|<|<>|<=|>=|=/) !== -1 ? tag : I18n.t(tag)}{typeof el !== 'string' && el.title2 &&
;\n }\n\n return result;\n };\n\n onChangeTag = () => {\n const { tagCardArray, settings, settings: { tagCard } } = this.state;\n let newTagCardArray = [...tagCardArray]\n if (typeof newTagCardArray[0] !== 'string') {\n newTagCardArray = newTagCardArray.map(el => el.title);\n }\n\n if (tagCard && newTagCardArray.length < 3) {\n const newSettings = { ...settings };\n const newTagCard = newTagCardArray[(newTagCardArray.indexOf(tagCard) + 1) % newTagCardArray.length]\n newSettings.tagCard = newTagCard;\n this.setState({ settings: newSettings }, () => {\n this.props.onChange(newSettings);\n this.onTagChange(newTagCard);\n });\n }\n };\n\n componentDidMount = () => {\n this.onTagChange();\n // detect changes\n };\n\n componentDidUpdate = prevProps => {\n if (this.props.acceptedBy !== 'triggers' && this.props.onUpdate) {\n setTimeout(() => this.onUpdate(), 0);\n }\n }\n\n onChangeInput = attribute => {\n return (value, attr, cb) => {\n const settings = JSON.parse(JSON.stringify(this.state.settings));\n\n if (typeof value === 'object' && (!attr || typeof attr === 'function')) {\n Object.keys(value).forEach(_attr => settings[_attr] = value[_attr]);\n } else {\n settings[attr || attribute] = value;\n }\n settings.id = this.getData().id;\n settings._id = this.props._id;\n\n this.setState({ settings }, () => {\n this.onValueChanged(value, attr || attribute);\n this.props.onChange(settings);\n cb && cb();\n });\n }\n }\n\n renderSpecific() {\n return null; // it can be overloaded\n }\n\n renderDebugInfo() {\n if (this.state.debugMessage) {\n return {\n this.setState({ openTagMenu: e.currentTarget }, () => {\n this.props.isTourOpen &&\n this.props.tourStep === STEPS.openTagsMenu &&\n setTimeout(() => this.props.setTourStep(STEPS.selectIntervalTag), 300);\n });\n }}>{result}
\n {I18n.t(el.title2)}
}\n \n );\n })}\n \n \n {this.renderDebug ? this.renderDebug(this.state.debugMessage) : I18n.t('executed')}\n
;\n } else {\n return null;\n }\n }\n\n render = () => {\n const { inputs, name, icon, iconTag, settings, adapter, settings: { tagCard }, helpDialog } = this.state;\n const { socket, notFound } = this.props;\n\n return \n \n {I18n.t(name)}\n {!!notFound ? I18n.t(`%s not found`, settings.id) : ''}\n {helpDialog ? this.setState({ helpText: I18n.t(helpDialog) })}> : null}\n \n {inputs.filter(({ nameRender }) => this[nameRender])\n .map(input => {\n const { nameRender, defaultValue, attr, options } = input;\n return this[nameRender](\n input,\n settings[attr] !== undefined ? settings[attr] : defaultValue,\n this.onChangeInput(attr),\n options || []\n );\n })}\n
\n {tagCard && \n
}\n {this.renderDebugInfo()}\n {this.state.error ? this.onChangeTag()} className={Utils.clsx(cls.tagCard, 'tag-card')}>{this.renderTags()}
\n \n {\n await onChange(textCron, attr);\n await onChange(convertCronToText(textCron, I18n.getLanguage()), 'addText');\n this.setState({ openDialog: false });\n }}\n onClose={() => this.setState({ openDialog: false })}>\n textCron = el}\n language={I18n.getLanguage()}\n />\n \n {this.renderNameText({\n defaultValue: I18n.t('every hour at 0 minutes'),\n attr: 'addText',\n signature: true,\n doNotTranslate: true,\n }, !!settings['addText'] ? settings['addText'] : I18n.t('every hour at 0 minutes'), onChange)}\n
;\n }\n\n renderWizard(input, value, onChange) {\n const { className } = this.props;\n const { attr } = input;\n let wizardText = '';\n let wizard = null;\n\n return \n this.setState({ openDialog: true })}\n />\n
\n \n {this.renderText({\n attr: attr,\n defaultValue: value\n }, !!settings[attr] ? settings[attr] : value, onChange)}\n
\n \n \n this.setState({ openDialog: false }, () =>\n onChange({\n [`${attr}Text`]: wizardText,\n [attr]: wizard,\n }))}\n onClose={() => this.setState({ openDialog: false })}>\n {\n wizardText = text;\n wizard = typeof val === 'object' ? JSON.parse(JSON.stringify(val)) : JSON.parse(val);\n wizard.valid = wizard.valid || {};\n wizard.valid.from = wizard.valid.from || Schedule.now2string();\n wizard = JSON.stringify(wizard);\n }} />\n \n
;\n }\n\n onTagChange(tagCard) {\n tagCard = tagCard || this.state.settings.tagCard;\n switch (tagCard) {\n case 'interval':\n this._setInterval();\n break;\n\n case 'cron':\n this.setState({\n inputs: [\n {\n nameRender: 'renderCron',\n attr: 'cron',\n defaultValue: '0 * * * *',\n }\n ]\n }, () => super.onTagChange());\n break;\n\n case 'wizard':\n const wizard = JSON.parse(DEFAULT_WIZARD);\n wizard.valid = wizard.valid || {};\n wizard.valid.from = wizard.valid.from || Schedule.now2string();\n\n this.setState({\n inputs: [\n {\n nameRender: 'renderWizard',\n attr: 'wizard',\n defaultValue: JSON.stringify(wizard),\n },\n ],\n }, () => super.onTagChange(null, () => {\n const wizardText = Schedule.state2text(this.state.settings.wizard || wizard);\n if (this.state.settings.wizardText !== wizardText) {\n const settings = JSON.parse(JSON.stringify(this.state.settings));\n settings.wizardText = wizardText;\n this.setState({ settings });\n this.props.onChange(settings);\n }\n }));\n break;\n\n case 'at':\n this.setState({\n inputs: [\n {\n nameRender: 'renderTime',\n prefix: 'at',\n attr: 'at',\n defaultValue: '07:30',\n },\n {\n nameRender: 'renderSelect',\n attr: 'dow',\n default: '',\n multiple: true,\n defaultValue: ['_', '1', '2', '3', '4', '5', '6', '0'],\n options: [\n { value: '_', title: 'Every day', only: true },\n { value: '1', title: 'Monday', titleShort: 'Mo' },\n { value: '2', title: 'Tuesday', titleShort: 'Tu' },\n { value: '3', title: 'Wednesday', titleShort: 'We' },\n { value: '4', title: 'Thursday', titleShort: 'Th' },\n { value: '5', title: 'Friday', titleShort: 'Fr' },\n { value: '6', title: 'Saturday', titleShort: 'Sa' },\n { value: '0', title: 'Sunday', titleShort: 'Su' },\n ]\n }\n ]\n }, () => super.onTagChange());\n break;\n\n case 'astro':\n this._setAstro();\n break;\n\n default:\n break;\n }\n }\n\n static getStaticData() {\n return {\n acceptedBy: 'triggers',\n name: 'Schedule',\n id: 'TriggerScheduleBlock',\n icon: 'AccessTime',\n tagCardArray: ['cron', 'wizard', 'interval', 'at', 'astro'],\n title: 'Triggers the rule periodically or on some specific time',\n }\n }\n\n getData() {\n return TriggerScheduleBlock.getStaticData();\n }\n}\n\nexport default TriggerScheduleBlock;\n","import React from 'react';\nimport withStyles from '@mui/styles/withStyles';\n\nimport GenericBlock from '../GenericBlock';\nimport Compile from '../../helpers/Compile';\nimport Button from '@mui/material/Button';\nimport Switch from '@mui/material/Switch';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport TextField from '@mui/material/TextField';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport Slide from '@mui/material/Slide';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Checkbox from '@mui/material/Checkbox';\n\nimport { MdCancel as IconCancel } from 'react-icons/md';\nimport { MdCheck as IconCheck } from 'react-icons/md';\n\nimport { I18n } from '@iobroker/adapter-react-v5';\n\nconst styles = theme => ({\n valueAck: {\n color: '#b02323',\n },\n valueNotAck: {\n color: '#12ac15',\n },\n});\n\nconst Transition = React.forwardRef((props, ref) =>\n \n onChange(el)}\n customValue\n />\n this.setState({ openDialog: true })}\n />\n
\n \n
\n
;\n});\n\nCurrentItem.defaultProps = {\n active: false\n};\n\nCurrentItem.propTypes = {\n name: PropTypes.oneOfType([PropTypes.string, PropTypes.object])\n};\n\nexport default CurrentItem;","export function findElement(settings, userRules, additionalParameter) {\n const { _id, acceptedBy } = settings;\n let block;\n\n if (!acceptedBy || !userRules[acceptedBy]) {\n console.warn('Cannot find ' + acceptedBy);\n return userRules;\n }\n\n switch (acceptedBy) {\n case 'actions':\n block = userRules[acceptedBy][additionalParameter].find(el => el._id === _id);\n if (!block) {\n console.warn('Cannot find ' + _id);\n } else {\n userRules[acceptedBy][additionalParameter][userRules[acceptedBy][additionalParameter].indexOf(block)] = settings;\n }\n return userRules;\n case 'conditions':\n block = userRules[acceptedBy][additionalParameter].find(el => el._id === _id);\n if (!block) {\n console.warn('Cannot find ' + _id);\n } else {\n userRules[acceptedBy][additionalParameter][userRules[acceptedBy][additionalParameter].indexOf(block)] = settings;\n }\n return userRules;\n default:\n block = userRules[acceptedBy].find(el => el._id === _id);\n if (!block) {\n console.warn('Cannot find ' + _id);\n } else {\n userRules[acceptedBy][userRules[acceptedBy].indexOf(block)] = settings;\n }\n return userRules;\n }\n}","import React from 'react';\nimport { useDragLayer } from 'react-dnd';\nimport CardMenu from '../CardMenu';\nimport CurrentItem from '../CurrentItem';\n\nconst layerStyles = {\n position: 'fixed',\n pointerEvents: 'none',\n zIndex: 100,\n left: 0,\n top: 0,\n width: '100%',\n height: '100%'\n};\n\nconst snapToGrid = (x, y) => {\n const snappedX = Math.round(x / 32) * 32\n const snappedY = Math.round(y / 32) * 32\n return [snappedX, snappedY]\n}\n\nconst getItemStyles = (initialOffset, currentOffset, isSnapToGrid) => {\n if (!initialOffset || !currentOffset) {\n return {\n display: 'none'\n };\n }\n let { x, y } = currentOffset;\n if (isSnapToGrid) {\n x -= initialOffset.x;\n y -= initialOffset.y;\n [x, y] = snapToGrid(x, y);\n x += initialOffset.x;\n y += initialOffset.y;\n }\n const transform = `translate(${x}px, ${y}px)`;\n return {\n transform,\n WebkitTransform: transform\n };\n}\n\nexport const CustomDragLayer = props => {\n const {\n itemType,\n isDragging,\n item,\n initialOffset,\n currentOffset,\n targetIds\n } = useDragLayer(monitor => ({\n item: monitor.getItem(),\n itemType: monitor.getItemType(),\n initialOffset: monitor.getInitialSourceClientOffset(),\n currentOffset: monitor.getSourceClientOffset(),\n isDragging: monitor.isDragging(),\n targetIds: monitor.getTargetIds()\n }));\n\n const renderItem = () => {\n switch (itemType) {\n case 'box':\n return targetIds.length ? {\n let newItemsSwitches = deepCopy(acceptedBy, userRules, blockValue);\n newItemsSwitches = filterElement(acceptedBy, newItemsSwitches, blockValue, _id);\n setIsDelete(true);\n setTimeout(() => {\n if (acceptedBy === 'triggers') {\n setOnUpdate(true);\n }\n setUserRules(newItemsSwitches);\n }, 300);\n }} className={cls.closeBtn} />\n
}\n \n
;\n};\n","// extracted by mini-css-extract-plugin\nexport default {\"border\":\"style_border__Zz9Km\",\"emptyBlockStyle\":\"style_emptyBlockStyle__sE5FO\",\"emptyBlock\":\"style_emptyBlock__dMBHS\",\"marginTop\":\"style_marginTop__uK9O+\",\"selectOnChange\":\"style_selectOnChange__6r-uo\",\"selectOnChangeHelp\":\"style_selectOnChangeHelp__nP0g8\",\"selectOnChangeHelpIcon\":\"style_selectOnChangeHelpIcon__r7G9x\",\"emptyBlockNone\":\"style_emptyBlockNone__DS6GG\",\"mainBlockItemRules\":\"style_mainBlockItemRules__JYCaQ\",\"nameBlockItems\":\"style_nameBlockItems__sNeEH\",\"contentBlockItem\":\"style_contentBlockItem__SQejW\",\"wrapperMargin\":\"style_wrapperMargin__v8PwE\",\"contentHeightOn\":\"style_contentHeightOn__T3ZZ-\",\"heightBlock\":\"style_heightBlock__B96p1\",\"contentHeightOff\":\"style_contentHeightOff__eaSlV\",\"cardAdd\":\"style_cardAdd__SNY3P\",\"blockCardAdd\":\"style_blockCardAdd__xHdXK\",\"addClassOverflow\":\"style_addClassOverflow__bcVva\",\"addClassHeight\":\"style_addClassHeight__GJALi\"};","import * as React from 'react';\n\nexport function useStateLocal(events, nameEvents) {\n const [state, setState] = React.useState(\n localStorage.getItem(nameEvents) ? JSON.parse(localStorage.getItem(nameEvents)) : events\n );\n\n const eventsToInstall = (newHeadCells) => {\n localStorage.setItem(nameEvents, JSON.stringify(newHeadCells));\n setState(newHeadCells);\n };\n return [state, eventsToInstall, localStorage.getItem(nameEvents) ? true : false];\n}\n","import _ from \"lodash\";\n\nconst funcSet = _.throttle(\n (setCards, userRules) => setCards(userRules)\n , 0);\n\nconst moveCard = (\n id,\n atIndex,\n cards,\n setCards,\n userRules,\n acceptedBy,\n additionally,\n hoverClientY,\n hoverMiddleY) => {\n\n const { card, index } = findCard(id, cards);\n if (index < atIndex && hoverClientY < hoverMiddleY) {\n return;\n }\n if (index > atIndex && hoverClientY > hoverMiddleY) {\n return;\n }\n if (card && index !== atIndex) {\n const copyCard = _.clone(cards);\n copyCard.splice(index, 1);\n copyCard.splice(atIndex, 0, card);\n const newTriggers = _.clone(userRules);\n switch (acceptedBy) {\n case 'actions':\n newTriggers[acceptedBy][additionally] = copyCard;\n funcSet(setCards, newTriggers);\n return;\n case 'conditions':\n newTriggers[acceptedBy][additionally] = copyCard;\n funcSet(setCards, newTriggers);\n return;\n default:\n newTriggers[acceptedBy] = copyCard;\n funcSet(setCards, newTriggers);\n return;\n }\n }\n};\nconst findCard = (id, cards) => {\n const card = cards.find((c) => c._id === id);\n return {\n card,\n index: cards.indexOf(card),\n };\n};\n\nexport { moveCard, findCard };","// extracted by mini-css-extract-plugin\nexport default {\"drag\":\"style_drag__Gq61w\",\"root\":\"style_root__nSnEB\"};","import React, { useContext, useEffect, useRef } from 'react';\n// import { I18n } from '@iobroker/adapter-react-v5';\nimport PropTypes from 'prop-types';\nimport { useDrag, useDrop } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { deepCopy } from '../../helpers/deepCopy';\nimport { filterElement } from '../../helpers/filterElement';\nimport { findCard, moveCard } from '../../helpers/cardSort';\nimport { ContextWrapperCreate } from '../ContextWrapper';\nimport cls from './style.module.scss';\n\nconst DragWrapper = ({ typeBlocks, allProperties, id, isActive, setUserRules, userRules, children, _id, blockValue }) => {\n const { setOnUpdate } = useContext(ContextWrapperCreate);\n const [{ opacity }, drag, preview] = useDrag({\n type: 'box',\n item: () => ({ ...allProperties, id, isActive, _id }),\n end: (item, monitor) => {\n let { acceptedBy } = item;\n let dropResult = monitor.getDropResult();\n let newUserRules;\n if (!dropResult) {\n if (typeof _id === 'number' && !monitor.getTargetIds().length) {\n newUserRules = deepCopy(acceptedBy, userRules, blockValue);\n newUserRules = filterElement(acceptedBy, newUserRules, blockValue, _id);\n setUserRules(newUserRules);\n }\n return null;\n }\n if (dropResult.blockValue !== blockValue) {\n let idNumber = typeof _id === 'number' ? _id : Date.now();\n newUserRules = deepCopy(acceptedBy, userRules, dropResult.blockValue);\n const newItem = { id: item.id, acceptedBy: item.acceptedBy }\n switch (acceptedBy) {\n case 'actions':\n if (blockValue) {\n newUserRules = filterElement(acceptedBy, newUserRules, blockValue, _id);\n }\n newUserRules = filterElement(acceptedBy, newUserRules, dropResult.blockValue, _id);\n newUserRules[acceptedBy][dropResult.blockValue].push({ ...newItem, _id: idNumber });\n return setUserRules(newUserRules);\n\n case 'conditions':\n if (typeof blockValue === 'number') {\n newUserRules = filterElement(acceptedBy, newUserRules, blockValue, _id);\n }\n newUserRules = filterElement(acceptedBy, newUserRules, dropResult.blockValue, _id);\n newUserRules[acceptedBy][dropResult.blockValue].push({ ...newItem, _id: idNumber });\n return setUserRules(newUserRules);\n\n default:\n setOnUpdate(true);\n newUserRules = filterElement(acceptedBy, newUserRules, dropResult.blockValue, _id);\n newUserRules[acceptedBy].push({ ...newItem, _id: idNumber });\n return setUserRules(newUserRules);\n }\n }\n },\n collect: monitor => ({\n opacity: monitor.isDragging() ? 0.4 : 1,\n isDragging: monitor.isDragging(),\n }),\n });\n const ref = useRef(null)\n const [, drop] = useDrop({\n accept: 'box',\n canDrop: () => false,\n hover({ _id: draggedId, acceptedBy }, monitor) {\n if (!ref.current) {\n return;\n }\n if (typeBlocks !== acceptedBy) {\n return\n }\n const hoverBoundingRect = ref.current?.getBoundingClientRect();\n const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n const clientOffset = monitor.getClientOffset();\n const hoverClientY = clientOffset.y - hoverBoundingRect.top;\n\n if (!!_id && draggedId !== _id) {\n switch (acceptedBy) {\n case 'actions':\n if (blockValue === 'then' || blockValue === 'else') {\n const { index: overIndexActions } = findCard(_id, userRules[acceptedBy][blockValue]);\n if (overIndexActions !== draggedId) {\n moveCard(draggedId,\n overIndexActions,\n userRules[acceptedBy][blockValue],\n setUserRules,\n userRules,\n acceptedBy,\n blockValue,\n hoverClientY,\n hoverMiddleY\n );\n }\n }\n return;\n case 'conditions':\n if (typeof blockValue === 'number') {\n const { index: overIndexConditions } = findCard(_id, userRules[acceptedBy][blockValue]);\n if (overIndexConditions !== draggedId) {\n moveCard(draggedId,\n overIndexConditions,\n userRules[acceptedBy][blockValue],\n setUserRules,\n userRules,\n acceptedBy,\n blockValue,\n hoverClientY,\n hoverMiddleY\n );\n }\n }\n return;\n default:\n const { index: overIndex } = findCard(_id, userRules[acceptedBy]);\n if (overIndex !== draggedId) {\n moveCard(draggedId,\n overIndex,\n userRules[acceptedBy],\n setUserRules,\n userRules,\n acceptedBy,\n null,\n hoverClientY,\n hoverMiddleY\n );\n }\n return;\n }\n }\n }\n });\n useEffect(() => {\n preview(getEmptyImage(), { captureDraggingState: true });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n drag(drop(ref));\n const isMobile = window.innerWidth < 600;\n return \n {renderItem()}\n
\n {children}
;\n}\n\nDragWrapper.defaultProps = {\n name: '',\n active: false,\n id: '',\n _id: null\n};\n\nDragWrapper.propTypes = {\n name: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n};\n\nexport default DragWrapper;","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\n\nimport IconOk from '@mui/icons-material/Check';\n\nimport { I18n } from '@iobroker/adapter-react-v5';\n\nconst DialogHelp = ({ onClose, open }) => \n
\n {I18n.t('On condition change')}
\n{I18n.t('help_on_change')}
\n {I18n.t('Just check')}
\n{I18n.t('help_just_check')}
\n {I18n.t('On condition change')}
\n{I18n.t('help_on_change')}
\n {I18n.t('Just check')}
\n{I18n.t('help_just_check')}
\n \n
;\n}\n\nAdditionallyContentBlockItems.defaultProps = {\n children: null,\n boolean: true,\n animation: false\n};\n\nconst ContentBlockItems = ({ size, typeBlock, name, nameAdditionally, additionally, border, userRules, setUserRules, iconName, adapter, socket, setTourStep, tourStep, isTourOpen }) => {\n const [additionallyClickItems, setAdditionallyClickItems, checkLocal] = useStateLocal(typeBlock === 'actions' ? false : [], `additionallyClickItems_${typeBlock}`);\n const [showHelp, setShowHelp] = useState(false);\n const [showConditionDialog, setShowConditionDialog] = useState(false);\n\n useEffect(() => {\n if (typeBlock === 'conditions' && additionallyClickItems.length !== userRules['conditions'].length - 1) {\n let newArray = [];\n userRules['conditions'].forEach((el, idx) => {\n if (idx > 0) {\n newArray.push({\n _id: Date.now(),\n open: true,\n });\n }\n });\n setAdditionallyClickItems([...additionallyClickItems, ...newArray]);\n }\n if (typeBlock === 'actions' && !checkLocal && userRules['actions']['else'].length) {\n setAdditionallyClickItems(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const [animation, setAnimation] = useState(false);\n\n return {itemsSwitchesRender[blockValue]?.map(el => (\n \n
\n \n \n \n {\n if (typeBlock === 'actions') {\n setAdditionallyClickItems(!additionallyClickItems);\n return null;\n }\n let newAdditionally = JSON.parse(JSON.stringify(additionallyClickItems));\n if (userRules['conditions'][index + 1].length) {\n newAdditionally[index].open = !newAdditionally[index].open\n setAdditionallyClickItems(newAdditionally);\n return null;\n }\n newAdditionally = newAdditionally.filter((el, idx) => idx !== index);\n setAdditionallyClickItems(newAdditionally);\n setAnimation(typeBlock === 'actions' ? true : index);\n setTimeout(() => {\n setAnimation(false);\n setUserRules({ ...userRules, conditions: [...userRules.conditions.filter((el, idx) => idx !== index + 1)] });\n }, 250);\n\n }}\n key={index} className={cls.blockCardAdd}>\n {booleanAdditionally() ? '-' : '+'}
\n \n {\n const _userRules = deepCopy('conditions', userRules);\n _userRules.justCheck = e.target.value;\n setUserRules(_userRules);\n }}\n >\n \n \n \n setShowHelp(true)}>\n \n
\n : null}\n \n {nameAdditionally}\n
\n \n {nameAdditionally}\n
\n }\n \n
\n ;\n}\n\nMenu.propTypes = {\n onChange: PropTypes.func,\n code: PropTypes.string\n};\n\nexport default Menu;\n","import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { I18n, Utils } from '@iobroker/adapter-react-v5';\n\nimport cls from './style.module.scss';\n\nimport { CustomDragLayer } from './components/CustomDragLayer';\nimport ContentBlockItems from './components/ContentBlockItems';\nimport { ContextWrapperCreate } from './components/ContextWrapper';\nimport Compile from './helpers/Compile';\nimport Menu from './components/Menu';\nimport './helpers/stylesVariables.scss';\n\nimport DialogExport from '../../Dialogs/Export';\nimport DialogImport from '../../Dialogs/Import';\n\nconst RulesEditor = ({ code, onChange, themeName, setTourStep, tourStep, isTourOpen, command, scriptId, changed, running }) => {\n // eslint-disable-next-line no-unused-vars\n const { blocks, socket, setOnUpdate, setOnDebugMessage, setEnableSimulation } = useContext(ContextWrapperCreate);\n const [allBlocks, setAllBlocks] = useState([]);\n const [userRules, setUserRules] = useState(Compile.code2json(code));\n const [importExport, setImportExport] = useState('');\n const [modal, setModal] = useState(false);\n //const [jsAlive, setJsAlive] = useState(false);\n //const [jsInstance, setJsInstance] = useState(false);\n\n useEffect(() => {\n let _jsInstance;\n let _jsAlive;\n const handler = (id, obj) => {\n if (id === _jsInstance + '.alive') {\n if (_jsAlive !== obj?.val) {\n _jsAlive = obj?.val;\n //setJsAlive(_jsAlive);\n _jsAlive && socket.sendTo(_jsInstance.replace(/^system\\.adapter\\./, ''), 'rulesOn', scriptId);\n }\n } else {\n if (_jsInstance !== obj?.common?.engine) {\n _jsInstance && socket.unsubscribeState(`${_jsInstance}.alive`, handler);\n _jsAlive && socket.sendTo(_jsInstance.replace(/^system\\.adapter\\./, ''), 'rulesOn', scriptId);\n _jsInstance = obj?.common?.engine;\n //setJsInstance(_jsInstance);\n _jsInstance && socket.subscribeState(`${_jsInstance}.alive`, handler);\n }\n }\n };\n\n const handlerStatus = (id, state) => {\n if (state) {\n try {\n let msg = JSON.parse(state.val);\n // if not from previous session\n if (msg.ruleId === scriptId && Date.now() - msg.ts < 1000) {\n setOnDebugMessage({blockId: msg.blockId, data: msg.data, ts: msg.ts});\n }\n } catch (e) {\n console.error('Cannot parse: ' + state.val);\n }\n }\n };\n\n socket.getObject(scriptId)\n .then(obj => {\n _jsInstance = obj?.common?.engine;\n //setJsInstance(_jsInstance);\n socket.subscribeObject(scriptId, handler);\n _jsInstance && socket.subscribeState(`${_jsInstance}.alive`, handler);\n _jsInstance && socket.subscribeState(_jsInstance.replace(/^system\\.adapter\\./, '') + '.debug.rules', handlerStatus);\n });\n\n return function cleanup() {\n _jsInstance && socket.unsubscribeObject(`${_jsInstance}.alive`, handler);\n socket.unsubscribeState(scriptId, handler);\n _jsAlive && _jsInstance && socket.sendTo(_jsInstance.replace(/^system\\.adapter\\./, ''), 'rulesOff', scriptId);\n _jsInstance && socket.unsubscribeState(_jsInstance.replace(/^system\\.adapter\\./, '') + '.debug.rules', handlerStatus);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n setEnableSimulation(!changed && running);\n }, [changed, running, setEnableSimulation]);\n\n useEffect(() => {\n if (!!command) {\n setImportExport(command);\n if (!modal) {\n setModal(true);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [command]);\n\n useEffect(() => {\n const newUserRules = Compile.code2json(code);\n if (JSON.stringify(newUserRules) !== JSON.stringify(userRules)) {\n setUserRules(newUserRules);\n setOnUpdate(true);\n }\n // eslint-disable-next-line\n }, [code]);\n\n useEffect(() => {\n document.getElementsByTagName('HTML')[0].className = themeName || 'blue';\n }, [themeName]);\n\n const onChangeBlocks = useCallback(json => {\n setUserRules(json);\n onChange(Compile.json2code(json, blocks));\n }, [blocks, onChange]);\n\n const ref = useRef({ clientWidth: 0 });\n const [addClass, setAddClass] = useState({ 835: false, 1035: false });\n useEffect(() => {\n if (ref.current) {\n if (ref.current.clientWidth <= 1035) {\n setAddClass({ 835: false, 1035: true });\n }\n if (ref.current.clientWidth <= 835) {\n setAddClass({ 1035: true, 835: true });\n }\n if (ref.current.clientWidth > 1035) {\n setAddClass({ 835: false, 1035: false });\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ref.current.clientWidth])\n\n if (!blocks) {\n return null;\n }\n\n return setHamburgerOnOff(!hamburgerOnOff)}>
\n \n {\n setFilter({ ...filter, text: value });\n setBlocksFunc(value);\n }}\n />\n
\n \n \n \n \n
\n \n \n {allBlocks.map(el => {\n const { name, id, icon, adapter } = el.getStaticData();\n return \n setHamburgerOnOff(true)}\n setTourStep={setTourStep}\n tourStep={tourStep}\n isTourOpen={isTourOpen}\n allProperties={el.getStaticData()}\n name={name}\n icon={icon}\n adapter={adapter}\n socket={socket}\n userRules={userRules}\n setUserRules={onChangeBlocks}\n isActive={false}\n id={id}\n />\n ;\n })}\n {allBlocks.length === 0 &&
\n \n \n {I18n.t('Nothing found')}...\n
}\n \n {\n setFilter({\n ...filter,\n text: ''\n });\n setBlocksFunc('');\n }}>{I18n.t('reset search')}
\n \n { setModal(false)}\n open={modal}\n text={JSON.stringify(userRules, null, 2)} /> :\n {\n setModal(false);\n if (text) {\n onChangeBlocks(JSON.parse(text));\n }\n }} />}\n {
;\n}\n\nRulesEditor.propTypes = {\n onChange: PropTypes.func,\n code: PropTypes.string,\n scriptId: PropTypes.string,\n setTourStep: PropTypes.func,\n tourStep: PropTypes.number,\n command: PropTypes.string,\n themeType: PropTypes.string,\n themeName: PropTypes.string,\n searchText: PropTypes.string,\n resizing: PropTypes.bool,\n\n};\n\nexport default RulesEditor;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport withStyles from '@mui/styles/withStyles';\nimport ScriptEditorComponent from '../ScriptEditorVanilaMonaco';\n\nconst styles = theme => ({\n editorDiv: {\n height: '100%',\n width: '100%',\n overflow: 'hidden',\n position: 'relative'\n },\n editor: {\n width: '100%',\n height: '100%',\n overflow: 'auto',\n },\n line: {\n width: '100%',\n whiteSpace: 'nowrap',\n },\n lineNumber: {\n width: 40,\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n display: 'inline-block',\n fontFamily: 'Lucida Console, Courier, monospace',\n textAlign: 'right',\n fontSize: 14,\n marginRight: 1,\n borderRight: '1px solid #555',\n cursor: 'pointer'\n },\n lineBreakpoint: {\n background: '#330000',\n color: 'white',\n },\n lineCode: {\n //whiteSpace: 'nowrap',\n display: 'inline-block',\n fontFamily: 'Lucida Console, Courier, monospace',\n fontSize: 14,\n margin: 0,\n whiteSpace: 'pre',\n },\n lineCurrentCode: {\n background: 'red',\n color: 'white',\n },\n lineCurrent: {\n background: '#880000',\n color: 'white',\n },\n});\n\nclass Editor extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n lines: (this.props.script || '').split(/\\r\\n|\\n/)\n };\n }\n\n editorDidMount(editor, monaco) {\n this.monaco = monaco;\n this.editor = editor;\n editor.focus();\n }\n\n render() {\n return \n
}\n \n this.props.onToggleBreakpoint(i)}\n />\n
;\n }\n}\n\nEditor.propTypes = {\n runningInstances: PropTypes.object,\n socket: PropTypes.object,\n sourceId: PropTypes.string,\n script: PropTypes.string,\n scriptName: PropTypes.string,\n adapterName: PropTypes.string,\n paused: PropTypes.bool,\n breakpoints: PropTypes.array,\n location: PropTypes.object,\n themeType: PropTypes.string,\n themeName: PropTypes.string,\n onToggleBreakpoint: PropTypes.func,\n};\n\nexport default withStyles(styles)(Editor);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport withStyles from '@mui/styles/withStyles';\n\nimport IconButton from '@mui/material/IconButton';\n\nimport {\n MdContentCopy as IconCopy,\n MdDeleteForever as IconDelete,\n MdVerticalAlignBottom as IconBottom,\n} from 'react-icons/md';\n\nimport { I18n, Utils } from '@iobroker/adapter-react-v5';\n\nconst TOOLBOX_WIDTH = 34;\n\nconst styles = theme => ({\n consoleLine: {\n fontSize: 14,\n color: theme.palette.mode === 'dark' ? '#EEE' : '#222',\n },\n console_log: {\n\n },\n console_warn: {\n backgroundColor: theme.palette.mode === 'dark' ? '#885900' : '#ffa500',\n },\n console_error: {\n backgroundColor: theme.palette.mode === 'dark' ? '#7a0000' : '#FF0000',\n },\n console_debug: {\n opacity: 0.6,\n },\n consoleSeverity: {\n verticalAlign: 'top',\n width: 50,\n textTransform: 'uppercase',\n },\n consoleTime: {\n whiteSpace: 'nowrap',\n verticalAlign: 'top',\n width: 170,\n },\n consoleText: {\n fontFamily: 'Lucida Console, Courier, monospace',\n paddingTop: 4,\n '&>pre': {\n margin: 0,\n },\n },\n logBox: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n },\n logBoxInner: {\n display: 'inline-block',\n color: theme.palette.mode === 'dark' ? 'white' : 'black',\n width: `calc(100% - ${TOOLBOX_WIDTH}px)`,\n height: '100%',\n //marginLeft: TOOLBOX_WIDTH,\n overflow: 'auto',\n position: 'relative',\n verticalAlign: 'top',\n },\n info: {\n background: theme.palette.mode === 'dark' ? 'darkgrey' : 'lightgrey',\n color: theme.palette.mode === 'dark' ? 'black' : 'black',\n },\n error: {\n background: '#FF0000',\n color: theme.palette.mode === 'dark' ? 'black' : 'white',\n },\n warn: {\n background: '#FF8000',\n color: theme.palette.mode === 'dark' ? 'black' : 'white',\n },\n debug: {\n background: 'gray',\n opacity: 0.8,\n color: theme.palette.mode === 'dark' ? 'black' : 'white',\n },\n silly: {\n background: 'gray',\n opacity: 0.6,\n color: theme.palette.mode === 'dark' ? 'black' : 'white',\n },\n table: {\n fontFamily: 'monospace',\n width: '100%',\n },\n toolbox: {\n //position: 'absolute',\n //top: 0,\n //left: 0,\n //marginLeft: 2,\n width: TOOLBOX_WIDTH,\n height: '100%',\n boxShadow: '2px 0px 4px -1px rgba(0, 0, 0, 0.2), 4px 0px 5px 0px rgba(0, 0, 0, 0.14), 1px 0px 10px 0px rgba(0, 0, 0, 0.12)',\n display: 'inline-block',\n verticalAlign: 'top',\n overflow: 'hidden',\n },\n trTime: {\n width: 90,\n },\n trSeverity: {\n width: 40,\n fontWeight: 'bold',\n },\n iconButtons: {\n width: 32,\n height: 32,\n padding: 4,\n },\n});\n\nfunction getTimeString(d) {\n let text;\n let i = d.getHours();\n if (i < 10) {\n i = '0' + i.toString();\n }\n text = i + ':';\n\n i = d.getMinutes();\n if (i < 10) {\n i = '0' + i.toString();\n }\n text += i + ':';\n i = d.getSeconds();\n if (i < 10) {\n i = '0' + i.toString();\n }\n text += i + '.';\n i = d.getMilliseconds();\n if (i < 10) {\n i = '00' + i.toString();\n } else if (i < 100) {\n i = '0' + i.toString();\n }\n text += i;\n return text;\n}\n\nclass Console extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n lines: {},\n goBottom: true,\n };\n this.messagesEnd = React.createRef();\n }\n generateLine(message) {\n return \n \n {lines.map((line, i) => this.generateLine(line))}
\n \n
;\n } else {\n return {I18n.t('Log outputs')}
;\n }\n }\n\n onCopy() {\n Utils.copyToClipboard(this.props.console.join('\\n'));\n }\n\n scrollToBottom() {\n this.messagesEnd && this.messagesEnd.current && this.messagesEnd.current.scrollIntoView({behavior: 'smooth'});\n }\n\n componentDidUpdate() {\n this.state.goBottom && this.scrollToBottom();\n }\n\n render() {\n const lines = this.props.console;\n return (\n \n
\n );\n }\n}\n\nConsole.propTypes = {\n theme: PropTypes.object,\n onClearAllLogs: PropTypes.func,\n console: PropTypes.array,\n};\n\nexport default withStyles(styles)(Console);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport withStyles from '@mui/styles/withStyles';\nimport SplitterLayout from 'react-splitter-layout';\nimport ReactJson from 'react-json-view';\n\nimport ListItemButton from '@mui/material/ListItemButton';\nimport ListItemText from '@mui/material/ListItemText';\nimport Input from '@mui/material/Input';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport IconButton from '@mui/material/IconButton';\nimport List from '@mui/material/List';\n\nimport { MdCheck as CheckIcon } from 'react-icons/md';\nimport { MdAdd as IconAdd } from 'react-icons/md';\nimport { MdDelete as IconDelete } from 'react-icons/md';\n\nimport { I18n, Utils } from '@iobroker/adapter-react-v5';\n\nconst styles = theme => ({\n frameRoot: {\n paddingTop: 0,\n paddingBottom: 0,\n },\n frameTextRoot: {\n margin: 0,\n },\n frameTextPrimary: {\n color: theme.palette.mode === 'dark' ? '#CCC' : '#333',\n },\n frameTextSecondary: {\n fontStyle: 'italic',\n fontSize: 12,\n opacity: 0.6,\n paddingLeft: theme.spacing(1),\n },\n\n listRoot: {\n padding: 0,\n },\n\n scopeType: {\n verticalAlign: 'top',\n textTransform: 'uppercase',\n width: 50,\n },\n scopeType_local: {\n color: '#53a944'\n },\n scopeType_closure: {\n color: '#365b80'\n },\n scopeType_user: {\n color: '#a48a15'\n },\n scopeName: {\n color: '#bc5b5b',\n width: 'calc(100% - 82px)',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n },\n scopeButton: {\n width: 32\n },\n scopeValueEditable: {\n cursor: 'pointer'\n },\n selectedFrame: {\n backgroundColor: '#777',\n color: 'white'\n },\n splitter: {\n width: '100%',\n height: 'calc(100% - 36px)',\n overflow: 'hidden',\n fontSize: 12\n },\n\n toolbarScopes: {\n width: 24,\n display: 'inline-block',\n height: '100%',\n background: theme.palette.mode === 'dark' ? '#222' : '#EEE',\n verticalAlign: 'top',\n },\n scopesAfterToolbar: {\n width: 'calc(100% - 24px)',\n display: 'inline-block',\n height: '100%',\n verticalAlign: 'top',\n },\n\n scopeNameName: {\n fontWeight: 'bold',\n display: 'inline-block',\n verticalAlign: 'top',\n },\n scopeNameEqual: {\n display: 'inline-block',\n color: theme.palette.mode === 'dark' ? '#EEE' : '#222',\n verticalAlign: 'top',\n },\n scopeNameValue: {\n verticalAlign: 'top',\n display: 'inline-block',\n color: '#3b709f',\n whiteSpace: 'nowrap',\n },\n scopeButtonDel: {\n padding: 0,\n float: 'right',\n },\n\n valueNull: {\n color: '#a44a24'\n },\n valueUndefined: {\n color: '#a44a24'\n },\n valueString: {\n color: '#1e8816'\n },\n valueNumber: {\n color: '#163c88'\n },\n valueBoolean: {\n color: '#a44a24'\n },\n valueObject: {\n color: '#721b70'\n },\n valueNone: {\n color: '#8a8a8a'\n },\n valueFunc: {\n color: '#ac4343'\n }\n});\n\nclass Stack extends React.Component {\n constructor(props) {\n super(props);\n\n this.framesSize = parseFloat(window.localStorage.getItem('App.framesSize')) || 300;\n\n this.state = {\n editValue: null,\n callFrames: this.props.callFrames,\n };\n\n this.editRef = React.createRef();\n }\n\n onExpressionNameUpdate() {\n this.props.onExpressionNameUpdate(this.state.editValue.index, this.scopeValue, () => {\n this.setState({editValue: null});\n this.scopeValue = null;\n });\n }\n\n renderExpression(item, i) {\n const name = this.state.editValue && this.state.editValue.type === 'expression' && this.state.editValue.index === i ?\n \n this.setState({goBottom: !this.state.goBottom})}\n color={this.state.goBottom ? 'secondary' : ''}\n size=\"medium\"> this.props.onClearAllLogs()}\n size=\"medium\"> this.onCopy()}\n size=\"medium\">
\n {this.renderLogList(lines)}\n {item.name}
,\n =
,\n {this.formatValue(item.value)}
\n ];\n\n return {item.name}
,\n =
,\n {item.name}
,\n =
,\n {this.formatValue(item.value)} ({item.value.type})
\n ];\n\n\n return \n
\n - \n {this.props.callFrames ? this.props.callFrames.map((frame, i) =>\n this.renderOneFrameTitle(frame, i)) : null}\n
\n
\n ;\n }\n}\n\nStack.propTypes = {\n currentScriptId: PropTypes.string,\n mainScriptId: PropTypes.string,\n scopes: PropTypes.object,\n expressions: PropTypes.array,\n callFrames: PropTypes.array,\n currentFrame: PropTypes.number,\n onChangeCurrentFrame: PropTypes.func,\n onWriteScopeValue: PropTypes.func,\n onExpressionDelete: PropTypes.func,\n onExpressionAdd: PropTypes.func,\n onExpressionNameUpdate: PropTypes.func,\n themeType: PropTypes.string,\n};\n\nexport default withStyles(styles)(Stack);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport withStyles from '@mui/styles/withStyles';\nimport SplitterLayout from 'react-splitter-layout';\n\nimport Tabs from '@mui/material/Tabs';\nimport Tab from '@mui/material/Tab';\nimport Toolbar from '@mui/material/Toolbar';\nimport LinearProgress from '@mui/material/LinearProgress';\nimport IconButton from '@mui/material/IconButton';\nimport List from '@mui/material/List';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport ListItemText from '@mui/material/ListItemText';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport Dialog from '@mui/material/Dialog';\nimport Badge from '@mui/material/Badge';\n\nimport { MdClose as IconClose, MdPlayArrow as IconRun } from 'react-icons/md';\nimport { MdPause as IconPause } from 'react-icons/md';\nimport { MdArrowForward as IconNext } from 'react-icons/md';\nimport { MdArrowDownward as IconStep } from 'react-icons/md';\nimport { MdArrowUpward as IconOut } from 'react-icons/md';\nimport { MdRefresh as IconRestart } from 'react-icons/md';\nimport { MdWarning as IconException } from 'react-icons/md';\n\nimport { I18n, Utils } from '@iobroker/adapter-react-v5';\n\nimport DialogError from '../../Dialogs/Error';\nimport Editor from './Editor';\nimport Console from './Console';\nimport Stack from './Stack';\n\nconst styles = theme => ({\n root: {\n width: '100%',\n height: `calc(100% - ${theme.toolbar.height + 38/*Theme.toolbar.height */ + 5}px)`,\n overflow: 'hidden',\n position: 'relative'\n },\n toolbar: {\n minHeight: 38,//Theme.toolbar.height,\n boxShadow: '0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)'\n },\n buttonRun: {\n color: 'green'\n },\n buttonPause: {\n color: 'orange'\n },\n buttonRestart: {\n color: 'darkgreen'\n },\n buttonStop: {\n color: 'red'\n },\n buttonNext: {\n color: 'blue'\n },\n buttonStep: {\n color: 'blue'\n },\n buttonOut: {\n color: 'blue'\n },\n buttonException: {\n\n },\n\n tabFile: {\n textTransform: 'inherit',\n color: theme.palette.mode === 'dark' ? '#DDD' : 'inherit'\n },\n tabText: {\n maxWidth: 130,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n display: 'inline-block',\n verticalAlign: 'middle',\n },\n closeButton: {\n position: 'absolute',\n top: 8,\n right: 0,\n zIndex: 10,\n padding: 8,\n cursor: 'pointer'\n },\n\n tabsRoot: {\n minHeight: 24,\n background: theme.palette.mode === 'dark' ? '#333' : '#e6e6e6',\n color: theme.palette.mode === 'dark' ? 'white' : 'inherit'\n },\n tabRoot: {\n minHeight: 24,\n },\n\n bpListItem: {\n borderTop: '1px dashed #bfbfbf44',\n },\n monospace: {\n fontFamily: 'Courier New, monospace',\n whiteSpace: 'pre',\n fontSize: 12,\n },\n arrow: {\n color: '#fffa4f',\n },\n splitter: {\n height: 'calc(100% - 52px)',\n '& .layout-pane': {\n overflow: 'hidden',\n height: '100%'\n }\n }\n});\n\nclass Debugger extends React.Component {\n constructor(props) {\n super(props);\n let breakpoints = window.localStorage.getItem('javascript.tools.bp.' + this.props.src);\n try {\n breakpoints = breakpoints ? JSON.parse(breakpoints) : [];\n } catch (e) {\n breakpoints = [];\n }\n\n let expressions = window.localStorage.getItem('javascript.tools.exps.' + this.props.src);\n try {\n expressions = expressions ? JSON.parse(expressions) : [];\n expressions = expressions.map(name => ({name}));\n } catch (e) {\n expressions = [];\n }\n\n this.toolSize = window.localStorage ? parseFloat(window.localStorage.getItem('App.toolSize')) || 150 : 150;\n\n this.state = {\n starting: true,\n selected: null,\n tabs: {},\n script: '',\n breakpoints,\n expressions,\n running: false,\n error: '',\n started: false,\n paused: true,\n location: null,\n toolsTab: window.localStorage.getItem('javascript.tools.tab') || 'console',\n stopOnException: window.localStorage.getItem('javascript.tools.stopOnException') === 'true',\n console: [],\n finished: false,\n currentFrame: 0,\n scopes: {},\n queryBreakpoints: null,\n logErrors: 0,\n logWarnings: 0,\n logs: 0,\n };\n\n this.scripts = {};\n this.mainScriptId = null;\n }\n\n componentDidMount() {\n new Promise(resolve => {\n if (this.props.debugInstance) {\n resolve(this.props.debugInstance.instance);\n } else {\n this.props.socket.getObject(this.props.src)\n .then(obj => resolve(obj?.common?.engine?.replace('system.adapter.', '')));\n }\n })\n .then(instance =>\n this.setState({ instance }, () => {\n if (this.state.instance) {\n this.props.socket.setState(`${this.state.instance}.debug.from`, { val: '{\"cmd\": \"subscribed\"}', ack: true });\n //.then(() => );\n setTimeout(() =>\n this.props.socket.subscribeState(`${this.state.instance}.debug.from`, this.fromInstance), 200);\n } else {\n this.setState({ error: 'Unknown instance' });\n }\n }));\n }\n\n componentWillUnmount() {\n if (this.state.instance) {\n this.props.socket.unsubscribeState(`${this.state.instance}.debug.from`, this.fromInstance);\n this.props.socket.sendTo(this.state.instance, 'debugStop');\n }\n }\n\n sendToInstance(cmd) {\n this.props.socket.setState(`${this.state.instance}.debug.to`, { val: JSON.stringify(cmd), ack: false });\n }\n\n reinitBreakpoints(cb) {\n if (this.state.breakpoints.length) {\n let breakpoints = JSON.parse(JSON.stringify(this.state.breakpoints));\n breakpoints = breakpoints.map(item => item.location);\n this.setState({breakpoints: []}, () => {\n this.sendToInstance({breakpoints, cmd: 'sb'});\n if (this.state.stopOnException) {\n this.sendToInstance({cmd: 'stopOnException', state: true});\n }\n\n cb && cb();\n });\n } else if (this.state.stopOnException) {\n this.sendToInstance({cmd: 'stopOnException', state: true});\n cb && cb();\n } else {\n cb && cb();\n }\n }\n\n getLocation(context) {\n if (context.callFrames) {\n const frame = context.callFrames[0];\n return frame.location;\n }\n }\n\n readCurrentScope() {\n const frame = this.state.context?.callFrames && this.state.context.callFrames[this.state.currentFrame];\n if (frame) {\n const scopes = frame.scopeChain.filter(scope => scope.type !== 'global');\n if (scopes.length) {\n this.sendToInstance({cmd: 'scope', scopes});\n } else if (this.state.scopes.global || this.state.scopes.local || this.state.scopes.closure) {\n this.setState({scopes: {}});\n }\n }\n }\n\n readExpressions(i) {\n if (this.state.expressions.length && this.state.context?.callFrames && this.state.context.callFrames[this.state.currentFrame]) {\n if (i !== undefined) {\n this.sendToInstance({\n cmd: 'expressions',\n expressions: [this.state.expressions[i]],\n callFrameId: this.state.context.callFrames[this.state.currentFrame].callFrameId\n });\n } else {\n this.sendToInstance({\n cmd: 'expressions',\n expressions: this.state.expressions,\n callFrameId: this.state.context.callFrames[this.state.currentFrame].callFrameId\n });\n }\n }\n }\n\n fromInstance = (id, state) => {\n try {\n const data = JSON.parse(state.val);\n if (data.cmd === 'subscribed') {\n this.props.socket.sendTo(this.state.instance, 'debug', this.props.debugInstance || {scriptName: this.props.src});\n } else\n if (data.cmd === 'readyToDebug') {\n this.mainScriptId = data.scriptId;\n this.scripts[data.scriptId] = data.script;\n if (data.script.startsWith('(async () => {debugger;\\n')) {\n this.scripts[data.scriptId] = `(async () => {\\n${data.script.substring('(async () => {debugger;\\n'.length)}`;\n } else if (data.script.startsWith('debugger;')) {\n this.scripts[data.scriptId] = data.script.substring('debugger;'.length);\n }\n\n const tabs = JSON.parse(JSON.stringify(this.state.tabs));\n tabs[data.scriptId] = this.props.debugInstance ? data.url: this.props.src.replace('script.js.', '');\n\n const ts = `${Date.now()}.${Math.random() * 10000}`;\n data.context?.callFrames && data.context.callFrames.forEach((item, i) => item.id = ts + i);\n\n this.setState({\n starting: false,\n finished: false,\n selected: this.mainScriptId,\n script: this.scripts[data.scriptId],\n tabs,\n currentFrame: 0,\n started: true,\n paused: true,\n location: this.getLocation(data.context),\n context: data.context,\n }, () =>\n this.reinitBreakpoints(() => {\n this.readCurrentScope();\n this.readExpressions();\n }));\n } else if (data.cmd === 'paused') {\n const ts = `${Date.now()}.${Math.random() * 10000}`;\n data.context?.callFrames && data.context.callFrames.forEach((item, i) => item.id = ts + i);\n const location = this.getLocation(data.context);\n const tabs = JSON.parse(JSON.stringify(this.state.tabs));\n const parts = data.context.callFrames[0].url.split('iobroker.javascript');\n tabs[location.scriptId] = (parts[1] || parts[0]).replace('script.js.', '');\n\n const newState = {\n tabs,\n paused: true,\n location,\n currentFrame: 0,\n context: data.context,\n scope: {id: (data.context?.callFrames && data.context.callFrames[0] && data.context.callFrames[0].id) || 0}\n };\n\n newState.script = this.scripts[location.scriptId] === undefined ? I18n.t('loading...') : this.scripts[location.scriptId];\n newState.selected = location.scriptId;\n\n this.setState(newState, () => {\n this.readCurrentScope();\n this.readExpressions();\n if (!this.scripts[location.scriptId]) {\n this.sendToInstance({cmd: 'source', scriptId: location.scriptId});\n }\n });\n } else if (data.cmd === 'script') {\n this.scripts[data.scriptId] = data.text;\n if (this.state.selected === data.scriptId) {\n this.setState({script: this.scripts[data.scriptId]});\n }\n } else if (data.cmd === 'resumed') {\n this.setState({paused: false});\n } else if (data.cmd === 'log') {\n if (this.state.toolsTab === 'console') {\n this.console = null;\n const console = [...this.state.console];\n console.push({text: data.text, severity: data.severity, ts: data.ts});\n this.setState({console});\n } else {\n if (data.severity === 'error') {\n this.setState({logErrors: this.state.logErrors + 1});\n } else if (data.severity === 'warn') {\n this.setState({logWarnings: this.state.logWarnings + 1});\n } else {\n this.setState({logs: this.state.logs + 1});\n }\n this.console = this.console || [...this.state.console];\n this.console.push({text: data.text, severity: data.severity, ts: data.ts});\n }\n } else if (data.cmd === 'error') {\n this.setState({error: data.error});\n } else if (data.cmd === 'finished' || data.cmd === 'debugStopped') {\n this.setState({\n finished: true,\n starting: false,\n started: true,\n });\n } else if (data.cmd === 'sb') {\n const breakpoints = JSON.parse(JSON.stringify(this.state.breakpoints));\n let changed = false;\n data.breakpoints.filter(bp => bp).forEach(bp => {\n const found = breakpoints.find(item =>\n item.location.scriptId === bp.location.scriptId && item.location.lineNumber === bp.location.lineNumber);\n if (!found) {\n changed = true;\n breakpoints.push(bp);\n }\n });\n changed && window.localStorage.setItem('javascript.tools.bp.' + this.props.src, JSON.stringify(breakpoints));\n changed && this.setState({breakpoints});\n } else if (data.cmd === 'cb') {\n const breakpoints = JSON.parse(JSON.stringify(this.state.breakpoints));\n let changed = false;\n\n data.breakpoints.filter(id => id !== undefined && id !== null).forEach(id => {\n const found = breakpoints.find(item => item.id === id);\n if (found) {\n const pos = breakpoints.indexOf(found);\n breakpoints.splice(pos, 1);\n changed = true;\n }\n });\n changed && window.localStorage.setItem('javascript.tools.bp.' + this.props.src, JSON.stringify(breakpoints));\n changed && this.setState({breakpoints});\n } else if (data.cmd === 'scope') {\n //const global = data.scopes.find(scope => scope.type === 'global') || null;\n const local = data.scopes.find(scope => scope.type === 'local') || null;\n const closure = data.scopes.find(scope => scope.type === 'closure') || null;\n\n console.log(JSON.stringify(closure));\n\n this.setState({scopes: {local, closure, id: `${this.state.scope.id}_${this.state.currentFrame}`}});\n } else if (data.cmd === 'setValue') {\n const scopes = JSON.parse(JSON.stringify(this.state.scopes));\n let item;\n if (data.scopeNumber === 0) {\n item = scopes.local && scopes.local.properties && scopes.local.properties.result && scopes.local.properties.result.find(item => item.name === data.variableName);\n } else {\n item = scopes.closure && scopes.closure.properties && scopes.closure.properties.result && scopes.closure.properties.result && scopes.closure.properties.result.find(item => item.name === data.variableName);\n }\n if (item) {\n item.value.value = data.newValue.value;\n this.setState({scopes});\n }\n } else if (data.cmd === 'expressions') {\n // update values\n let expressions = JSON.parse(JSON.stringify(this.state.expressions));\n let changed = false;\n data.expressions.forEach(item => {\n const expression = expressions.find(it => it.name === item.name);\n if (expression) {\n changed = true;\n expression.value = item.result;\n }\n });\n changed && this.setState({expressions});\n\n console.log('expressions: ' + JSON.stringify(data));\n } else if (data.cmd === 'getPossibleBreakpoints') {\n if (data.breakpoints?.locations?.length === 1) {\n this.sendToInstance({breakpoints: data.breakpoints.locations, cmd: 'sb'});\n } else if (!data.breakpoints?.locations?.length) {\n window.alert('cannot set');\n } else {\n this.setState({queryBreakpoints: data.breakpoints.locations});\n }\n } else {\n console.error(`Unknown command: ${JSON.stringify(data)}`);\n }\n } catch (e) {\n\n }\n }\n\n getTextAtLocation(location) {\n let line = this.state.script.split(/\\r\\n|\\n/)[location.lineNumber];\n let arrow = '';\n if (location.columnNumber >= 10) {\n line = line.substring(location.columnNumber - 10, location.columnNumber + 20);\n arrow = ''.padStart(10, ' ') + '↑';\n } else {\n line = line.substring(0, 30 - location.columnNumber);\n arrow = ''.padStart(location.columnNumber, ' ') + '↑';\n }\n return [\n \n this.props.onExpressionAdd((i, item) => {\n this.scopeValue = item.name || '';\n this.setState({\n editValue: {\n type: 'expression',\n valueType: 'string',\n index: i,\n name: item.name,\n value: item.name || ''\n }\n });\n })}> \n
\n \n {this.props.callFrames && this.props.callFrames.length && this.renderScopes(this.props.callFrames[this.props.currentFrame])}\n
\n {line}
,\n {arrow}
\n ];\n }\n\n renderQueryBreakpoints() {\n if (this.state.queryBreakpoints) {\n return ;\n } else {\n return null;\n }\n }\n\n renderError() {\n if (this.state.error) {\n return {label}
,\n id !== this.mainScriptId && \n \n {\n const newState = {toolsTab: value};\n\n // load logs from buffer\n if (this.console && value === 'console') {\n newState.console = this.console;\n this.console = null;\n newState.logs = 0;\n newState.logWarnings = 0;\n newState.logErrors = 0;\n }\n\n window.localStorage.setItem('javascript.tools.tab', value);\n\n this.setState(newState);\n }}\n scrollButtons=\"auto\"\n >\n \n
;\n }\n\n render() {\n return \n {this.state.toolsTab === 'stack' && !disabled ? this.renderFrames() : null}\n {this.state.toolsTab === 'console' && !disabled ? this.renderConsole() : null}\n
\n \n {this.state.starting ? this.toolSize = parseFloat(size)}\n onDragEnd={() => window.localStorage.setItem('App.toolSize', this.toolSize.toString())}\n //style={{width: '100%', height: 'calc(100% - 73px)', overflow: 'hidden'}}\n >\n
;\n }\n}\n\nDebugger.propTypes = {\n runningInstances: PropTypes.object,\n adapterName: PropTypes.string,\n src: PropTypes.string,\n socket: PropTypes.object.isRequired,\n className: PropTypes.string,\n style: PropTypes.object,\n themeType: PropTypes.string,\n theme: PropTypes.object,\n themeName: PropTypes.string,\n debugInstance: PropTypes.object,\n};\n\nexport default withStyles(styles)(Debugger);\n","import ChannelDetector from '@iobroker/type-detector';\nimport { I18n } from '@iobroker/adapter-react-v5';\nimport docs from './docs.md';\n\nlet allObjectsCache = null;\n\nconst allObjects = async socket => {\n if (allObjectsCache) {\n return allObjectsCache;\n }\n const states = await socket.getObjectView('', '\\u9999', 'state');\n const channels = await socket.getObjectView('', '\\u9999', 'channel');\n const devices = await socket.getObjectView('', '\\u9999', 'device');\n const folders = await socket.getObjectView('', '\\u9999', 'folder');\n const enums = await socket.getObjectView('', '\\u9999', 'enum');\n\n allObjectsCache = Object.values(states)\n .concat(Object.values(channels))\n .concat(Object.values(devices))\n .concat(Object.values(folders))\n .concat(Object.values(enums))\n // eslint-disable-next-line\n .reduce((obj, item) => (obj[item._id] = item, obj), {});\n\n return allObjectsCache;\n};\n\nconst getText = (text, lang) => {\n if (text && typeof text === 'object') {\n return text[lang] || text.en;\n }\n return text || '';\n};\n\nconst detectDevices = async socket => {\n const lang = I18n.getLanguage();\n const devicesObject = await allObjects(socket);\n const keys = Object.keys(devicesObject).sort();\n const detector = new ChannelDetector();\n\n const usedIds = [];\n const ignoreIndicators = ['UNREACH_STICKY']; // Ignore indicators by name\n const excludedTypes = ['info'];\n const enums = [];\n const rooms = [];\n const funcs = [];\n const list = [];\n\n keys.forEach(id => {\n if (devicesObject[id]?.type === 'enum') {\n enums.push(id);\n } else if (devicesObject[id]?.common?.smartName) {\n list.push(id);\n }\n });\n\n enums.forEach(id => {\n if (id.startsWith('enum.rooms.')) {\n rooms.push(id);\n } else if (id.startsWith('enum.functions.')) {\n funcs.push(id);\n }\n const members = devicesObject[id].common.members;\n\n if (members && members.length) {\n members.forEach(member => {\n // if an object really exists\n if (devicesObject[member]) {\n if (!list.includes(member)) {\n list.push(member);\n }\n }\n });\n }\n });\n\n const options = {\n objects: devicesObject,\n _keysOptional: keys,\n _usedIdsOptional: usedIds,\n ignoreIndicators,\n excludedTypes,\n };\n\n const result = [];\n\n // we are creating a list of devices, where each device has a following structure:\n // {\n // id: 'hm-rpc.0.KEQ0123456.1',\n // name: 'HM-RC-4-2',\n // role: 'light',\n // room: 'Living room',\n // 'function': 'light'\n // }\n\n list.forEach(id => {\n options.id = id;\n\n const controls = detector.detect(options);\n\n if (controls) {\n controls.forEach(control => {\n const stateId = control.states.find(state => state.id).id;\n // if not yet added\n if (result.find(st => st.id === stateId)) {\n return;\n }\n const deviceObject = {\n id: stateId,\n name: getText(devicesObject[stateId].common.name, lang),\n role: devicesObject[stateId].type,\n deviceType: control.type,\n states: control.states\n .filter(state => state.id)\n .map(state => ({\n id: state.id,\n name: state.name,\n role: state.defaultRole,\n type: devicesObject[state.id].common.type,\n unit: devicesObject[state.id].common.unit,\n read: devicesObject[state.id].common.read === undefined ? true : devicesObject[state.id].common.read,\n write: devicesObject[state.id].common.write === undefined ? true : devicesObject[state.id].common.write,\n })),\n };\n\n const parts = stateId.split('.');\n let channelId;\n let deviceId;\n if (devicesObject[stateId].type === 'channel' || devicesObject[stateId].type === 'state') {\n parts.pop();\n channelId = parts.join('.');\n if (devicesObject[channelId] && (devicesObject[channelId].type === 'channel' || devicesObject[stateId].type === 'folder')) {\n parts.pop();\n deviceId = parts.join('.');\n if (!devicesObject[deviceId] || (devicesObject[deviceId].type !== 'device' && devicesObject[stateId].type !== 'folder')) {\n deviceId = null;\n }\n } else {\n channelId = null;\n }\n }\n // try to detect room\n const room = rooms.find(roomId => {\n if (devicesObject[roomId].common.members.includes(stateId)) {\n return true;\n }\n if (channelId && devicesObject[roomId].common.members.includes(channelId)) {\n return true;\n }\n return deviceId && devicesObject[roomId].common.members.includes(deviceId);\n });\n if (room) {\n deviceObject.room = getText(devicesObject[room].common.name, lang);\n }\n\n // try to detect function\n const func = funcs.find(funcId => {\n if (devicesObject[funcId].common.members.includes(stateId)) {\n return true;\n }\n if (channelId && devicesObject[funcId].common.members.includes(channelId)) {\n return true;\n }\n return deviceId && devicesObject[funcId].common.members.includes(deviceId);\n });\n if (func) {\n deviceObject.function = getText(devicesObject[func].common.name, lang);\n }\n result.push(deviceObject);\n });\n }\n });\n\n // find names and icons for devices\n for (const k in result) {\n const deviceObj = result[k];\n if (deviceObj.type === 'state' || deviceObj.type === 'channel') {\n const idArray = deviceObj._id.split('.');\n idArray.pop();\n\n // read channel\n const parentObject = devicesObject[idArray.join('.')];\n if (parentObject && (parentObject.type === 'channel' || parentObject.type === 'device' || parentObject.type === 'folder')) {\n deviceObj.common.name = getText(parentObject.common?.name || deviceObj.common.name, lang);\n idArray.pop();\n // read device\n const grandParentObject = devicesObject[idArray.join('.')];\n if (grandParentObject?.type === 'device' && grandParentObject.common?.icon) {\n deviceObj.common.name = getText(grandParentObject.common?.name || deviceObj.common.name, lang);\n }\n } else {\n deviceObj.common.name = getText(parentObject?.common?.name || deviceObj.common.name, lang);\n }\n }\n }\n\n return result;\n};\n\nconst systemPrompt = async () => (await fetch(docs)).text();\nexport { systemPrompt, detectDevices };\n","import React, { useCallback, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport OpenAI from 'openai';\n\nimport {\n Button, CircularProgress, Dialog,\n DialogActions, DialogContent, DialogTitle,\n IconButton, TextField,\n} from '@mui/material';\n\nimport {\n Check, Close,\n QuestionMark as Question,\n FileCopy as Copy,\n} from '@mui/icons-material';\n\nimport { Utils, I18n } from '@iobroker/adapter-react-v5';\n\nimport { detectDevices, systemPrompt } from './OpenAiPrompt';\nimport ScriptEditorComponent from '../Components/ScriptEditorVanilaMonaco';\n\nconst LANGUAGES = {\n ru: 'Russian',\n en: 'English',\n de: 'German',\n es: 'Spanish',\n fr: 'French',\n it: 'Italian',\n pl: 'Polish',\n nl: 'Dutch',\n pt: 'Portuguese',\n uk: 'Ukrainian',\n 'zh-cn': 'Chinese',\n};\n\nconst ChatIcon = () => ;\n\nconst OpenAiDialog = props => {\n const [question, setQuestion] = useState(window.localStorage.getItem('openai-question') || '');\n const [answer, setAnswer] = useState('');\n const [open, setOpen] = useState(false);\n const [working, setWorking] = useState(false);\n const [error, setError] = useState(false);\n const [showKeyWarning, setShowKeyWarning] = useState(false);\n const devicesCache = useRef(null);\n const gptKeyCache = useRef(null);\n const docsCache = useRef(null);\n\n const ask = useCallback(async () => {\n let devices;\n if (!devicesCache.current) {\n devices = await detectDevices(props.socket);\n devicesCache.current = devices;\n console.log(`devices: ${JSON.stringify(devices, 2, null)}`);\n } else {\n devices = devicesCache.current;\n }\n let apiKey;\n if (!gptKeyCache.current) {\n const ids = Object.keys(props.runningInstances);\n for (let i = 0; i < ids.length; i++) {\n const config = await props.socket.getObject(ids[i]);\n apiKey = config.native.gptKey;\n if (apiKey) {\n break;\n }\n }\n gptKeyCache.current = apiKey;\n } else {\n apiKey = gptKeyCache.current;\n }\n\n let docs;\n if (!docsCache.current) {\n docs = await systemPrompt();\n docsCache.current = docs;\n } else {\n docs = docsCache.current;\n }\n if (!apiKey) {\n setShowKeyWarning(true);\n return;\n }\n\n setWorking(true);\n setError(false);\n\n try {\n const openai = new OpenAI({ apiKey, dangerouslyAllowBrowser: true });\n\n const chatCompletionPhase1 = await openai.chat.completions.create({\n model: 'gpt-3.5-turbo-16k',\n messages: [\n {\n role: 'system',\n content: `You are programmer. Here is a documentation:\\n\\n${docs}`,\n },\n { role: 'system', content: `Here is list of devices:\\n\\n${JSON.stringify(devices, null, 2)}` },\n {\n role: 'user',\n content: `Write code that do:\\n\\n${question}\nReturn only code.\nWrite comments in ${LANGUAGES[I18n.getLanguage()] || 'English'}.\nYou can call async function directly in the code without encapsulate them in async function as this code will be already executed in async function.\nDo not import any libraries as all functions are already imported.`,\n }],\n });\n const message = chatCompletionPhase1.choices[0].message;\n const m = message.content.match(/```(javascript|js|typescript)\\n?(.*)```(.*)/ms);\n let code;\n if (!m) {\n code = message.content;\n if (code.startsWith('`')) {\n code = code.substring(1);\n }\n if (code.endsWith('`')) {\n code = code.substring(0, code.length - 1);\n }\n } else {\n code = m[2];\n if (m[3]) {\n const comments = m[3].split('\\n').map(line => line.trim());\n // skip empty lines on start and end\n while (comments[0] === '') {\n comments.shift();\n }\n code = `${comments.map(line => `// ${line}`).join('\\n')}\\n${code}`;\n }\n }\n console.log(message);\n setAnswer(code);\n } catch (err) {\n if (err.response) {\n setError(err.response.data?.error?.message);\n }\n console.error(`Cannot request: ${err}, ${JSON.stringify(err?.response?.data || err, null, 2)}`);\n }\n\n setWorking(false);\n }, [question]);\n\n return <>\n \n {this.renderCode()}\n {this.renderQueryBreakpoints()}\n
\n \n {this.renderTools()}\n
\n \n {this.renderError()}\n \n {I18n.t('You have to enter OpenAI API key in the configuration of javascript adapter.')}\n
\n \n {\n if (e.key === 'Enter' && e.ctrlKey) {\n ask();\n }\n }}\n label={I18n.t('Enter your question')}\n helperText={I18n.t('Press Ctrl+Enter to get the answer')}\n value={question}\n onChange={e => {\n window.localStorage.setItem('openai-question', e.target.value);\n setQuestion(e.target.value);\n }}\n />\n
\n \n
\n \n {I18n.t('Result')}\n
\n \n {error ?\n
\n \n {error}
\n :\n {id.split('.').pop()}
,\n {text}
,\n changed ? ▣ : null,\n (!this.props.debugInstance && (!this.props.debugMode || this.state.selected !== id)) &&\n \n \n
;\n }\n }\n\n getDebugMenu() {\n if (!this.state.showDebugMenu) {\n return null;\n }\n\n return \n this.setState({ insert: '' })}\n onForceSave={() => this.onSave()}\n searchText={this.state.searchText}\n onRegisterSelect={func => this.onRegisterSelect(func)}\n readOnly={this.state.showCompiledCode}\n changed={this.state.changed[this.state.selected]}\n code={this.scripts[this.state.selected].source || ''}\n isDark={this.state.themeType === 'dark'}\n socket={this.props.socket}\n runningInstances={this.state.runningInstances}\n onChange={newValue => this.onChange({ script: newValue })}\n language={this.scripts[this.state.selected].engineType === 'TypeScript/ts' ? 'typescript' : 'javascript'}\n />\n
;\n } else {\n return null;\n }\n }\n\n getBlocklyEditor() {\n if (!this.props.debugMode &&\n this.state.instancesLoaded &&\n this.state.selected &&\n this.props.objects[this.state.selected] &&\n this.state.blockly &&\n !this.state.showCompiledCode &&\n this.state.visible\n ) {\n this.scripts[this.state.selected] = this.scripts[this.state.selected] || JSON.parse(JSON.stringify(this.props.objects[this.state.selected].common));\n\n return \n this.onChange({ script: newValue })}\n />\n
;\n } else {\n return null;\n }\n }\n\n getRulesEditor() {\n if (!this.props.debugMode &&\n this.state.instancesLoaded &&\n this.state.selected &&\n this.props.objects[this.state.selected] &&\n this.state.rules &&\n !this.state.showCompiledCode &&\n this.state.visible\n ) {\n this.scripts[this.state.selected] = this.scripts[this.state.selected] || JSON.parse(JSON.stringify(this.props.objects[this.state.selected].common));\n const isInstanceRunning = this.state.selected && this.scripts[this.state.selected] && this.scripts[this.state.selected].engine && this.state.runningInstances[this.scripts[this.state.selected].engine];\n const isScriptRunning = this.state.selected && this.scripts[this.state.selected] && this.scripts[this.state.selected].enabled;\n\n return \n this.onChange({ script: newValue })}\n />\n
;\n } else {\n return null;\n }\n }\n\n getConfirmDialog() {\n if (this.state.confirm) {\n return \n \n {I18n.t('Some files will be rejected')}\n
);\n } else if (isDragActive) {\n if (this.state.imageStatus !== 'accepted') {\n this.setState({imageStatus: 'accepted'});\n }\n\n return (\n \n \n {I18n.t('All files will be accepted')}\n
);\n } else {\n if (this.state.imageStatus !== 'wait') {\n this.setState({imageStatus: 'wait'});\n }\n return (\n \n \n {I18n.t('Drop some files here or click...')}\n \n
);\n }\n }\n }\n \n this.setState({ resizing: true })}\n onSecondaryPaneSizeChange={size => this.state.hideLog ? 0 : this.logSize = parseFloat(size)}\n onDragEnd={() => {\n this.setState({ resizing: false });\n window.localStorage.setItem('App.logSize', this.logSize.toString());\n }}\n >\n <>\n {this.renderEditor()}\n {!this.state.debugMode && this.state.hideLog && this.showLogButton()}\n \n {!this.state.debugMode && !this.state.hideLog && this.toggleLogLayout()}\n editing={this.state.editing}\n socket={this.socket}\n selected={this.state.selected}\n onHideLog={() => {\n window.localStorage.setItem('App.hideLog', 'true');\n this.setState({ hideLog: true, resizing: true });\n setTimeout(() => this.setState({ resizing: false }), 300);\n }}\n />}\n \n
,\n ];\n }\n\n render() {\n const { classes } = this.props;\n\n if (!this.state.ready) {\n // return ( {\n window.localStorage.setItem('App.menuOpened', this.state.menuOpened ? 'false' : 'true');\n this.setState({ menuOpened: !this.state.menuOpened, resizing: true });\n setTimeout(() => this.setState({ resizing: false }), 300);\n }}>\n {this.state.menuOpened ?
\n \n \n this.setState({ resizing: true })}\n onSecondaryPaneSizeChange={size => this.menuSize = parseFloat(size)}\n onDragEnd={() => {\n this.setState({ resizing: false });\n window.localStorage.setItem('App.menuSize', this.menuSize.toString());\n }}\n >\n \n
;\n }\n}\n\nApp.propTypes = {\n version: PropTypes.string,\n onThemeChange: PropTypes.func,\n};\n\nexport default withStyles(styles)(App);\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read http://bit.ly/CRA-PWA.\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit http://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See http://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n if (\n response.status === 404 ||\n response.headers.get('content-type').indexOf('javascript') === -1\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';\nimport { StylesProvider, createGenerateClassName } from '@mui/styles';\n\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\nimport pgk from '../package.json';\nimport theme from '@iobroker/adapter-react-v5/Theme';\n// import Utils from '@iobroker/adapter-react-v5/Components/Utils';\nimport { Utils } from '@iobroker/adapter-react-v5';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport { TouchBackend } from 'react-dnd-touch-backend';\n\nimport GenericBlock from './Components/RulesEditor/components/GenericBlock/index.jsx'\n\nwindow.GenericBlock = GenericBlock;\n\nwindow.adapterName = 'javascript';\nwindow.sentryDSN = 'https://504499a725eb4898930d3b9e9da95740@sentry.iobroker.net/56';\n\nlet themeName = Utils.getThemeName();\n\nconsole.log(`iobroker.${window.adapterName}@${pgk.version} using theme \"${themeName}\"`);\n\nconst generateClassName = createGenerateClassName({\n productionPrefix: 'iob',\n});\n\nfunction build() {\n const isMobile = window.innerWidth < 600;\n const container = document.getElementById('root');\n const root = createRoot(container);\n return root.render(\n {\n this.setState({ debugInstance: data, debugMode: !!data });\n }}\n key=\"sidemenu\"\n scripts={this.scripts}\n scriptsHash={this.state.scriptsHash}\n instances={this.state.instances}\n update={this.state.updateScripts}\n onRename={this.onRename.bind(this)}\n onSelect={this.onSelect.bind(this)}\n socket={this.socket}\n selectId={this.state.menuSelectId}\n onEdit={this.onEdit.bind(this)}\n expertMode={this.state.expertMode}\n themeType={this.state.themeType}\n themeName={this.state.themeName}\n onThemeChange={themeName => {\n Utils.setThemeName(themeName);\n const themeType = Utils.getThemeType(themeName);\n this.setState({ themeName, themeType }, () => this.props.onThemeChange(themeName));\n }}\n runningInstances={this.state.runningInstances}\n onExpertModeChange={this.onExpertModeChange.bind(this)}\n onDelete={this.onDelete.bind(this)}\n onAddNew={this.onAddNew.bind(this)}\n onEnableDisable={this.onEnableDisable.bind(this)}\n onExport={this.onExport.bind(this)}\n width={this.menuSize}\n onImport={() => this.setState({ importFile: true })}\n onSearch={searchText => this.setState({ searchText })}\n version={this.props.version}\n />\n
\n {this.renderMain()}\n \n JavaScript
\n{I18n.t('for programmers')}
\n {I18n.t('JS description')}
\n TypeScript
\n{I18n.t('for professionals')}
\n {I18n.t('TS description')}
\n Blockly
\n{I18n.t('normal')}
\n {I18n.t('Blockly description')}
\n Rules
\n{I18n.t('easy')}
\n {I18n.t('Rules description')}
\n {I18n.t('Host')}
\n - \n {js.map(item =>
{I18n.t('Instances')}
\n - \n {instances.map(item =>
\n {props.children}\n
;\n};\n\nexport const Draggable = props => {\n const { name } = props;\n const [{ opacity }, drag] = useDrag({\n type: 'script',\n item: () => ({name}),\n collect: monitor => ({opacity: monitor.isDragging() ? 0.3 : 1,}),\n });\n // About transform: https://github.com/react-dnd/react-dnd/issues/832#issuecomment-442071628\n return \n {props.children}\n
;\n};\n\nclass SideDrawer extends React.Component {\n constructor(props) {\n super(props);\n\n let expanded = window.localStorage ? window.localStorage.getItem('SideMenu.expanded') : '[]';\n try {\n expanded = JSON.parse(expanded) || [];\n } catch (e) {\n expanded = [];\n }\n\n this.inputRef = new React.createRef();\n\n this.state = {\n listItems: prepareList(props.scripts || {}),\n expanded: expanded,\n problems: [],\n reorder: false,\n themeName: this.props.themeName,\n selected: window.localStorage ? window.localStorage.getItem('SideMenu.selected') || null : null,\n creatingScript: false,\n creatingFolder: false,\n copingScript: '',\n renaming: null,\n deleting: null,\n choosingType: null,\n errorText: '',\n instances: props.instances || [],\n menuOpened: false,\n menuAnchorEl: null,\n searchMode: false,\n expertMode: this.props.expertMode,\n searchText: '',\n width: this.props.width || 300,\n typeFilter: window.localStorage ? window.localStorage.getItem('SideMenu.typeFilter') || '' : '', // blockly, js, ts\n statusFilter: window.localStorage ? window.localStorage.getItem('SideMenu.statusFilter') || '' : '',\n runningInstances: this.props.runningInstances || {},\n scriptsHash: props.scriptsHash,\n showAdapterDebug: false,\n };\n\n const newExp = this.ensureSelectedIsVisible();\n if (newExp) {\n this.state.expanded = newExp;\n }\n\n // debounce search process\n this.filterTimer = null;\n\n this.state.isAllZeroInstances = this.getIsAllZeroInstances();\n\n this.problems = null; //cache\n this.problemsTimer = null;\n this.onProblemUpdatedBound = this.onProblemUpdated.bind(this);\n }\n\n readProblems(cb, tasks) {\n if (!tasks) {\n tasks = Object.keys(this.props.scripts);\n }\n if (!tasks || !tasks.length) {\n cb && cb();\n } else {\n const id = tasks.shift();\n if (this.props.scripts[id] &&\n this.props.scripts[id].type === 'script' &&\n this.props.scripts[id].common &&\n this.props.scripts[id].common.enabled &&\n !id.match(/^script\\.js\\.global\\./) // GLOBAL_ID\n ) {\n const instance = this.props.scripts[id].common.engine.split('.').pop();\n const that = this; // sometimes lambda does not work\n const _id = `javascript.${instance}.scriptProblem.${id.substring(ROOT_ID.length + 1)}`;\n\n this.props.socket.getState(_id, (err, state) => {\n that.onProblemUpdated(_id, state);\n setTimeout(() => that.readProblems(cb, tasks), 0);\n });\n } else {\n setTimeout(() => this.readProblems(cb, tasks), 0);\n }\n }\n }\n\n componentDidMount() {\n this.readProblems(() => {\n this.props.instances.forEach(instance => {\n this.props.socket.subscribeState(`javascript.${instance}.scriptProblem.*`, this.onProblemUpdatedBound);\n });\n });\n }\n\n componentWillUnmount() {\n this.props.instances.forEach(instance => {\n this.props.socket.unsubscribeState(`javascript.${instance}.scriptProblem.*`, this.onProblemUpdatedBound);\n });\n }\n\n onProblemUpdated(id, state) {\n if (!state || !id) return;\n id = `${ROOT_ID}.${id.replace(/^javascript\\.\\d+\\.scriptProblem\\./, '')}`;\n\n if (!this.problems) {\n this.problems = JSON.parse(JSON.stringify(this.state.problems));\n }\n let changed = false;\n\n if (state.val) {\n if (this.problems.indexOf(id) === -1) {\n this.problems.push(id);\n changed = true;\n }\n } else {\n const pos = this.problems.indexOf(id);\n if (pos !== -1) {\n this.problems.splice(pos, 1);\n changed = true;\n }\n }\n\n if (changed && !this.problemsTimer) {\n this.problemsTimer = setTimeout(() => {\n this.problemsTimer = null;\n this.setState({ problems: this.problems });\n this.problems = null;\n }, 300);\n }\n }\n\n static filterListStatic(isSearchEnabled, listItems, searchMode, searchText, objects) {\n listItems = JSON.parse(JSON.stringify(listItems));\n let changed = false;\n let newState = {listItems};\n if (isSearchEnabled !== false && searchMode && searchText) {\n const text = searchText.toLowerCase();\n listItems.forEach(item => {\n const id = item.title.toLowerCase();\n item.filteredPartly = false;\n let found = id.includes(text);\n if (!found && (objects && objects[item.id] && objects[item.id].common && objects[item.id].common.source)) {\n if (objects[item.id].common.engineType === 'Blockly') {\n const pos = objects[item.id].common.source.lastIndexOf('//');\n found = objects[item.id].common.source.substring(0, pos).toLowerCase().includes(text);\n } else {\n found = objects[item.id].common.source.toLowerCase().includes(text);\n }\n }\n if (found) {\n if (item.filtered) {\n item.filtered = false;\n changed = true;\n }\n } else if (!item.filtered) {\n item.filtered = true;\n changed = true;\n }\n });\n\n if (changed) {\n // check that all parents of every non-filtered item are visible\n for (let i = listItems.length - 1; i >= 0; i--) {\n const item = listItems[i];\n if (!item.filtered || item.filteredPartly) {\n let it = item;\n do {\n if (it.parent && listItems[it.parentIndex]) {\n changed = true;\n listItems[it.parentIndex].filteredPartly = true;\n }\n it = it.parent && listItems[it.parentIndex] ? listItems[it.parentIndex] : null;\n } while(it);\n }\n }\n }\n } else {\n listItems.forEach(item => {\n if (item.filtered || item.filteredPartly) {\n item.filtered = false;\n item.filteredPartly = false;\n changed = true;\n }\n });\n if (isSearchEnabled === false) {\n newState.searchText = '';\n newState.searchMode = false;\n changed = true;\n }\n }\n\n return changed ? newState : null;\n }\n\n filterList(isSearchEnabled, cb) {\n const newState = SideDrawer.filterListStatic(\n isSearchEnabled,\n this.state.listItems,\n this.state.searchMode,\n this.state.searchText,\n this.props.scripts,\n );\n\n if (newState) {\n this.setState(newState, () => cb && cb());\n } else if (cb) {\n cb();\n }\n }\n\n static ensureSelectedIsVisibleStatic(selected, expanded, listItems) {\n expanded = JSON.parse(JSON.stringify(expanded));\n let changed = false;\n\n // ensure that the item is visible\n let el = typeof selected === 'object' ? selected : listItems.find(it => it.id === selected);\n do {\n // eslint-disable-next-line\n el = el && el.parent && listItems.find(it => it.id === el.parent);\n if (el) {\n if (expanded.indexOf(el.id) === -1) {\n expanded.push(el.id);\n changed = true;\n }\n }\n } while(el);\n return changed && expanded;\n }\n\n ensureSelectedIsVisible(selected, expanded) {\n SideDrawer.ensureSelectedIsVisibleStatic(selected || this.state.selected, expanded || this.state.expanded, this.state.listItems);\n }\n\n static getDerivedStateFromProps(props, state) {\n const newState = {};\n let changed = false;\n if (state.expertMode !== props.expertMode) {\n changed = true;\n newState.expertMode = props.expertMode;\n }\n if (state.scriptsHash !== props.scriptsHash && props.scripts) {\n const listItems = prepareList(props.scripts || {});\n\n newState.listItems = listItems;\n\n if (state.searchText) {\n const nState = SideDrawer.filterListStatic(true, listItems, state.searchMode, state.searchText, props.scripts);\n nState && Object.assign(newState, nState);\n }\n\n const isAllZeroInstances = SideDrawer.getIsAllZeroInstancesStatic(listItems, props.instances || []);\n\n const newExp = SideDrawer.ensureSelectedIsVisibleStatic(state.selected, state.expanded, state.listItems);\n\n newState.isAllZeroInstances = isAllZeroInstances;\n if (newExp) {\n newState.expanded = newExp;\n }\n changed = true;\n }\n\n if (state.width !== props.width) {\n changed = true;\n newState.width = props.width;\n }\n if (state.themeName !== props.themeName) {\n changed = true;\n newState.themeName = props.themeName;\n }\n\n if (props.selectId && state.selected !== props.selectId) {\n const item = state.listItems.find(item => item.id === props.selectId);\n\n if (!state.reorder && item) {\n const expanded = SideDrawer.ensureSelectedIsVisibleStatic(item, state.expanded, state.listItems);\n newState.selected = item.id;\n if (expanded) {\n newState.expanded = expanded;\n }\n changed = true;\n window.localStorage && window.localStorage.setItem('SideMenu.selected', item.id);\n }\n }\n\n if (changed) {\n return newState;\n } else {\n return null;\n }\n }\n\n static getIsAllZeroInstancesStatic(listItems, instances) {\n let isAllZeroInstances = !instances[0] && instances.length <= 1;\n\n if (isAllZeroInstances) {\n listItems.forEach(item => {\n if (item.type !== 'folder' && item.instance !== 0) {\n isAllZeroInstances = false;\n }\n });\n }\n return isAllZeroInstances;\n }\n\n getIsAllZeroInstances(listItems, instances) {\n listItems = listItems || this.state.listItems;\n instances = instances || this.state.instances;\n return SideDrawer.getIsAllZeroInstancesStatic(listItems || this.state.listItems, instances || this.state.instances);\n }\n\n saveExpanded(expanded) {\n window.localStorage.setItem('SideMenu.expanded', JSON.stringify(expanded || this.state.expanded));\n }\n\n showError(errorText) {\n this.setState({ errorText });\n }\n\n onToggle(id, e) {\n e && e.stopPropagation();\n if (id === ROOT_ID) {\n return;\n }\n const expanded = [...this.state.expanded];\n const newState = {expanded};\n const pos = expanded.indexOf(id);\n if (pos !== -1) {\n expanded.splice(pos, 1);\n if (this.state.selected && this.state.selected.startsWith(`${id}.`)) {\n newState.selected = id;\n window.localStorage && window.localStorage.setItem('SideMenu.selected', id);\n }\n } else {\n expanded.push(id);\n expanded.sort();\n }\n this.setState({ expanded });\n this.saveExpanded(expanded);\n }\n\n renderItemButtonsOnEnd(item, children) {\n if (this.state.reorder) {\n return null;\n }\n if (item.type !== 'folder') {\n let color = item.enabled ? COLOR_RUN : COLOR_PAUSE;\n if (item.enabled && this.state.problems.includes(item.id)) {\n color = COLOR_PROBLEM;\n }\n\n return [\n \n {this.getToolbarButtons()}\n
\n\n \n {this.renderAllItems(this.state.listItems)}\n
\n {this.getBottomButtons()}
\n ,\n\n renamingItem ? \n {lines}
\n \n
;\n } else {\n return {I18n.t('Log outputs')}
;\n }\n }\n\n render() {\n const lines = this.state.selected && this.state.lines[this.state.selected];\n return \n
;\n }\n}\n\nLog.propTypes = {\n selected: PropTypes.string,\n socket: PropTypes.object,\n onLayoutChange: PropTypes.func,\n verticalLayout: PropTypes.bool,\n};\n\nexport default withStyles(styles)(Log);\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Fab } from '@mui/material';\n\nimport { MdGTranslate as IconNoCheck } from 'react-icons/md';\n\nimport { I18n } from '@iobroker/adapter-react-v5';\n\nfunction isIdOfGlobalScript(id) {\n return /^script\\.js\\.global\\./.test(id);\n}\nlet index = 0;\nclass ScriptEditor extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: 'current',\n isDark: props.isDark || false,\n language: props.language || 'javascript',\n readOnly: props.readOnly || false,\n alive: true,\n check: false,\n searchText: this.props.searchText || '',\n typingsLoaded: false,\n };\n this.runningInstancesStr = JSON.stringify(this.props.runningInstances);\n this.monacoDiv = null; //ref\n this.editor = null;\n this.monaco = window.monaco;\n this.insert = '';\n this.originalCode = props.code || '';\n this.typings = {}; // TypeScript declarations\n this.lastSearch = '';\n }\n\n waitForMonaco(cb) {\n let monacoLoaded = this.monaco?.languages?.typescript?.typescriptDefaults?.getCompilerOptions;\n if (!monacoLoaded || !this.props.runningInstances) {\n this.monaco = window.monaco;\n monacoLoaded = this.monaco?.languages?.typescript?.typescriptDefaults?.getCompilerOptions;\n this.monacoCounter = this.monacoCounter || 0;\n this.monacoCounter++;\n if (!monacoLoaded && this.monacoCounter < 20) {\n console.log('wait for monaco loaded');\n setTimeout(() => this.waitForMonaco(cb), 200);\n return;\n }\n if (this.monacoCounter >= 20) {\n console.error('Cannot load monaco!');\n }\n } else {\n cb && cb();\n }\n }\n\n loadTypings(runningInstances) {\n if (!this.editor) {\n return;\n }\n runningInstances = runningInstances || this.props.runningInstances;\n\n const scriptAdapterInstance = runningInstances && Object.keys(runningInstances).find(id => runningInstances[id]);\n if (scriptAdapterInstance) {\n this.props.socket.sendTo(scriptAdapterInstance.replace('system.adapter.', ''), 'loadTypings', null)\n .then(result => {\n this.setState({ alive: true, check: true, typingsLoaded: true });\n this.setTypeCheck(true);\n if (result.typings) {\n this.typings = result.typings;\n this.setEditorTypings(this.state.name);\n } else {\n console.error(`failed to load typings: ${result.error}`);\n }\n });\n }\n }\n\n componentDidMount() {\n const monacoLoaded = this.monaco?.languages?.typescript?.typescriptDefaults?.getCompilerOptions;\n if (!monacoLoaded || !this.props.runningInstances) {\n this.monaco = window.monaco;\n if (!monacoLoaded) {\n console.log('wait for monaco loaded...');\n this.waitForMonaco(() => this.componentDidMount());\n\n return;\n }\n }\n if (!this.editor && monacoLoaded) {\n console.log('Init editor');\n this.props.onRegisterSelect && this.props.onRegisterSelect(() => this.editor.getModel().getValueInRange(this.editor.getSelection()));\n // For some reason, we have to get the original compiler options\n // and assign new properties one by one\n const compilerOptions = this.monaco.languages.typescript.typescriptDefaults['getCompilerOptions']();\n compilerOptions.target = this.monaco.languages.typescript.ScriptTarget.ES2015;\n compilerOptions.allowJs = true;\n compilerOptions.checkJs = this.props.checkJs !== false;\n compilerOptions.noLib = true;\n compilerOptions.lib = [];\n compilerOptions.useUnknownInCatchVariables = false;\n compilerOptions.moduleResolution = this.monaco.languages.typescript.ModuleResolutionKind.NodeJs;\n this.monaco.languages.typescript.typescriptDefaults.setCompilerOptions(compilerOptions);\n\n this.setTypeCheck(false);\n\n // Create the editor instances\n this.editor = this.monaco.editor.create(this.monacoDiv, {\n lineNumbers: 'on',\n scrollBeyondLastLine: false,\n automaticLayout: true,\n glyphMargin: !!this.props.breakpoints,\n });\n\n this.editor.onDidChangeModelContent(() =>\n this.onChange(this.editor.getValue()));\n\n // Load typings for the JS editor\n /** @type {string} */\n this.loadTypings();\n\n this.editor.addCommand(this.monaco.KeyMod.CtrlCmd | this.monaco.KeyCode.KEY_S, () =>\n this.onForceSave());\n\n setTimeout(() => {\n this.highlightText(this.state.searchText);\n this.location = this.props.location;\n this.breakpoints = this.props.breakpoints;\n this.showDecorators();\n });\n }\n const options = {\n selectOnLineNumbers: true,\n scrollBeyondLastLine: false,\n automaticLayout: true,\n readOnly: this.state.readOnly,\n language: this.state.language,\n isDark: this.state.isDark,\n };\n\n this.setEditorOptions(options);\n this.editor.focus();\n this.editor.setValue(this.originalCode);\n\n if (this.props.onToggleBreakpoint) {\n // add onMouseDown listener to toggle breakpoints\n this.editor.onMouseDown(e => {\n if (e.target.detail && e.target.detail.glyphMarginLeft !== undefined) {\n this.props.onToggleBreakpoint(e.target.position.lineNumber - 1);\n }\n });\n } else {\n // remove onMouseDown listener\n this.editor.onMouseDown(() => { /* nop */ });\n }\n }\n\n /**\n * Sets some options of the code editor\n * @param {object} options The editor options to change\n * @param {Partial<{readOnly: boolean, lineWrap: boolean, language: EditorLanguage, typeCheck: boolean}>} options\n */\n setEditorOptions(options) {\n if (options) {\n if (options.language) {\n this.setEditorLanguage(options.language);\n }\n if (options.readOnly !== undefined) {\n this.editor.updateOptions({ readOnly: options.readOnly });\n }\n if (options.lineWrap !== undefined) {\n this.editor.updateOptions({ wordWrap: options.lineWrap ? 'on' : 'off' });\n }\n if (options.typeCheck !== undefined) {\n this.setTypeCheck(options.typeCheck);\n }\n if (options.isDark !== undefined) {\n this.monaco.editor.setTheme(options.isDark ? 'vs-dark' : 'vs');\n }\n }\n }\n\n componentWillUnmount() {\n if (this.editor) {\n this.props.onRegisterSelect && this.props.onRegisterSelect(null);\n this.editor.dispose();\n this.editor = null;\n }\n }\n\n /** @typedef {\"javascript\" | \"typescript\"} EditorLanguage */\n\n /**\n * Sets the language of the code editor\n * @param {EditorLanguage} language\n */\n setEditorLanguage(language) {\n // we need to recreate the model when changing languages,\n // so remember its settings\n const model = this.editor.getModel();\n const code = model.getValue();\n const uri = model.uri.path;\n\n const filenameWithoutExtension =\n typeof uri === 'string' && uri.includes('.')\n ? uri.substr(0, uri.lastIndexOf('.'))\n : 'index';\n\n const extension =\n language === 'javascript' ? 'js'\n : (language === 'typescript' ? 'ts' : language);\n\n // get rid of the original model\n model.dispose();\n\n // Both JS and TS need the model to work in TypeScript as the script type\n // is inferred from the file extension\n const newLanguage = (language === 'javascript' || language === 'typescript') ? 'typescript' : language;\n\n const newModel = this.monaco.editor.createModel(\n code,\n newLanguage,\n this.monaco.Uri.from({ path: `${filenameWithoutExtension}${index++}.${extension}` }),\n );\n\n this.editor.setModel(newModel);\n }\n\n /**\n * Enables or disables the type checking in the editor\n * @param {boolean} enabled - Whether type checking is enabled or not\n */\n setTypeCheck(enabled) {\n const options = {\n noSemanticValidation: !this.state.alive || !enabled, // toggle the type checking\n noSyntaxValidation: !this.state.alive // always check the syntax\n };\n this.monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions(options);\n }\n\n /**\n * @param {string} [currentScriptName] The name of the current script\n */\n setEditorTypings(currentScriptName = '') {\n const isGlobalScript = isIdOfGlobalScript(currentScriptName);\n // The filename of the declarations this script can see if it is a global script\n const partialDeclarationsPath = `${currentScriptName}.d.ts`;\n const wantedTypings = [];\n for (const path of Object.keys(this.typings)) {\n // global scripts don't get to see all other global scripts\n // but only a part of them\n if (isGlobalScript) {\n if (path === 'global.d.ts') {\n continue;\n }\n if (path.startsWith('script.js.global') && path !== partialDeclarationsPath) {\n continue;\n }\n }\n wantedTypings.push({\n filePath: path,\n content: this.typings[path],\n });\n }\n\n // TODO BF: check https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-semantic-tokens-provider-example\n // to support 0.21.0\n\n if (this.monaco?.languages?.typescript?.typescriptDefaults?.setExtraLibs) {\n this.monaco.languages.typescript.typescriptDefaults.setExtraLibs(wantedTypings);\n } else if (this.monaco?.languages?.typescript?.typescriptDefaults?.addExtraLib) {\n const existingLibs = this.monaco.languages.typescript.typescriptDefaults.getExtraLibs();\n wantedTypings.forEach(lib => {\n if (!existingLibs[lib.filePath]) {\n this.monaco.languages.typescript.typescriptDefaults.addExtraLib(lib, lib.filePath);\n }\n });\n }\n }\n\n /**\n * Inserts some text into the given editor\n * @param {string} text The text to add\n */\n insertTextIntoEditor(text) {\n const selection = this.editor.getSelection();\n const range = new this.monaco.Range(\n selection.startLineNumber,\n selection.startColumn,\n selection.endLineNumber,\n selection.endColumn,\n );\n this.editor.executeEdits('', [{ range, text, forceMoveMarkers: true }]);\n this.editor.focus();\n }\n\n highlightText(text) {\n const range = text && this.editor.getModel().findMatches(text);\n if (range && range.length) {\n range.forEach(r => this.editor.setSelection(r.range));\n this.editor.revealLine(range[0].range.startLineNumber);\n } else if (this.editor) {\n const row = this.editor.getPosition().lineNumber;\n const col = this.editor.getPosition().column;\n this.editor.setSelection(new this.monaco.Range(row, col, row, col));\n }\n }\n\n showDecorators() {\n this.decorations = this.decorations || [];\n const decorations = [];\n if (this.location) {\n decorations.push({\n range: new this.monaco.Range(this.location.lineNumber + 1, this.location.columnNumber + 1, this.location.lineNumber + 1, 1000),\n options: {\n isWholeLine: false,\n className: this.props.isDark ? 'monacoCurrentLineDark' : 'monacoCurrentLine',\n },\n });\n decorations.push({\n range: new this.monaco.Range(this.location.lineNumber + 1, 0, this.location.lineNumber + 1, 0),\n options: {\n isWholeLine: true,\n className: this.props.isDark ? 'monacoCurrentFullLineDark' : 'monacoCurrentFullLine',\n },\n });\n }\n\n if (this.breakpoints) {\n this.breakpoints.forEach(bp => {\n decorations.push({\n range: new this.monaco.Range(bp.location.lineNumber + 1, 0, bp.location.lineNumber + 1, 100),\n options: {\n isWholeLine: true,\n glyphMarginClassName: this.props.isDark ? 'monacoBreakPointDark' : 'monacoBreakPoint',\n },\n });\n });\n }\n this.editor && (this.decorations =\n this.editor.deltaDecorations(this.decorations, decorations));\n }\n\n initNewScript(name, code) {\n this.setState({ name });\n this.originalCode = code || '';\n this.editor && this.editor.setValue(code);\n this.highlightText(this.lastSearch);\n this.showDecorators();\n // this.setEditorLanguage();\n // Update the typings because global scripts need different typings than normal scripts\n // and each global script has different typings\n this.setEditorTypings(name);\n }\n\n scrollToLineIfNeeded(lineNumber) {\n if (this.editor) {\n const ranges = this.editor.getVisibleRanges();\n if (!ranges || !ranges[0] || ranges[0].startLineNumber > lineNumber || lineNumber > ranges[0].endLineNumber) {\n this.editor.revealLineInCenter(lineNumber);\n }\n }\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const options = {};\n if (this.state.name !== nextProps.name) {\n // A different script was selected\n this.initNewScript(nextProps.name, nextProps.code);\n }\n\n // if some running instance is found and\n if (JSON.stringify(nextProps.runningInstances) !== this.runningInstancesStr) {\n this.runningInstancesStr = JSON.stringify(nextProps.runningInstances);\n if (!this.state.typingsLoaded) {\n this.loadTypings(nextProps.runningInstances);\n }\n }\n\n // if the code not yet changed, update the new code\n if (this.editor && !nextProps.changed && (nextProps.code !== this.originalCode || nextProps.code !== this.editor.getValue())) {\n this.originalCode = nextProps.code;\n this.editor.setValue(this.originalCode);\n this.showDecorators();\n this.location && this.scrollToLineIfNeeded(this.location.lineNumber + 1);\n }\n\n if (nextProps.searchText !== this.lastSearch) {\n this.lastSearch = nextProps.searchText;\n this.highlightText(this.lastSearch);\n }\n\n if (JSON.stringify(nextProps.location) !== JSON.stringify(this.location) &&\n JSON.stringify(nextProps.breakpoints) !== JSON.stringify(this.breakpoints)\n ) {\n this.location = nextProps.location;\n this.breakpoints = nextProps.breakpoints;\n this.showDecorators();\n this.editor && this.location && this.scrollToLineIfNeeded(this.location.lineNumber + 1);\n // this.editor && this.location && this.editor.setPosition(this.location.lineNumber + 1, this.location.columnNumber + 1);\n } else if (JSON.stringify(nextProps.breakpoints) !== JSON.stringify(this.breakpoints)) {\n this.breakpoints = nextProps.breakpoints;\n this.showDecorators();\n } else if (JSON.stringify(nextProps.location) !== JSON.stringify(this.location)) {\n this.location = nextProps.location;\n this.showDecorators();\n this.editor && this.location && this.scrollToLineIfNeeded(this.location.lineNumber + 1);\n // this.editor && this.location && this.editor.setPosition(this.location.lineNumber + 1, this.location.columnNumber + 1);\n }\n\n if (this.state.language !== (nextProps.language || 'javascript')) {\n this.setState({ language: nextProps.language || 'javascript' });\n options.language = nextProps.language || 'javascript';\n } else if (this.state.readOnly !== (nextProps.readOnly || false)) {\n this.setState({ readOnly: nextProps.readOnly || false });\n options.readOnly = nextProps.readOnly;\n } else if (this.state.isDark !== (nextProps.isDark || false)) {\n this.setState({ isDark: nextProps.isDark || false });\n options.isDark = nextProps.isDark;\n }\n\n this.setEditorOptions(options);\n\n if (this.insert !== nextProps.insert) {\n this.insert = nextProps.insert;\n if (this.insert) {\n console.log(`Insert text: ${this.insert}`);\n setTimeout(insert => {\n this.insertTextIntoEditor(insert);\n setTimeout(() => this.props.onInserted && this.props.onInserted(), 100);\n }, 100, this.insert);\n }\n }\n }\n\n onChange(newValue, e) {\n if (!this.props.readOnly) {\n this.props.onChange && this.props.onChange(this.editor.getValue());\n }\n }\n\n render() {\n if (!this.monaco?.languages?.typescript?.typescriptDefaults || !this.props.runningInstances) {\n setTimeout(() => {\n this.monaco = window.monaco;\n this.forceUpdate();\n }, 200);\n return null;\n }\n\n return \n this.setState({ goBottom: !this.state.goBottom })}\n color={this.state.goBottom ? 'secondary' : ''}\n size=\"medium\"> this.clearLog()}\n size=\"medium\"> this.onCopy()}\n size=\"medium\"> this.props.onLayoutChange()}\n title={I18n.t('Change layout')}\n size=\"medium\"> : null}\n this.props.onHideLog()}\n title={I18n.t('Hide logs')}\n size=\"medium\">
\n {this.renderLogList(lines)}\n this.monacoDiv = el} style={{width: '100%', height: '100%', overflow: 'hidden', position: 'relative'}}>\n {!this.state.check && \n
;\n }\n}\n\nScriptEditor.propTypes = {\n adapterName: PropTypes.string.isRequired,\n socket: PropTypes.object,\n runningInstances: PropTypes.object,\n name: PropTypes.string,\n onChange: PropTypes.func,\n onForceSave: PropTypes.func,\n onInserted: PropTypes.func,\n isDark: PropTypes.bool,\n readOnly: PropTypes.bool,\n code: PropTypes.string,\n language: PropTypes.string,\n onRegisterSelect: PropTypes.func,\n searchText: PropTypes.string,\n checkJs: PropTypes.bool,\n changed: PropTypes.bool,\n\n breakpoints: PropTypes.array,\n location: PropTypes.object,\n onToggleBreakpoint: PropTypes.func,\n};\n\nexport default ScriptEditor;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport withStyles from '@mui/styles/withStyles';\n\nimport Button from '@mui/material/Button';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogActions from '@mui/material/DialogActions';\nimport Dialog from '@mui/material/Dialog';\nimport Popper from '@mui/material/Popper';\nimport Fade from '@mui/material/Fade';\nimport Paper from '@mui/material/Paper';\n\nimport IconCopy from '@mui/icons-material/FileCopy';\nimport { FaFileExport as IconExport } from 'react-icons/fa';\nimport IconCancel from '@mui/icons-material/Cancel';\nimport { I18n, Utils } from '@iobroker/adapter-react-v5';\n\nconst styles = theme => ({\n textArea: {\n width: '100%',\n height: '100%',\n overflow: 'auto',\n },\n textAreaLight: {\n background: 'lightgray',\n },\n dialog: {\n height: '95%',\n },\n typography: {\n padding: theme.spacing(2),\n },\n overflowY: {\n overflowY: 'hidden',\n },\n});\n\nclass DialogExport extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n anchorEl: null,\n popper: '',\n };\n }\n\n handleCancel() {\n this.props.onClose();\n }\n\n onCopy(event) {\n Utils.copyToClipboard(this.props.text);\n const anchorEl = event.currentTarget;\n\n setTimeout(() => {\n this.setState({ popper: I18n.t('Copied'), anchorEl });\n setTimeout(() => this.setState({ popper: '', anchorEl: null }), 1000);\n }, 50);\n }\n\n render() {\n const classes = this.props.classes;\n const file = new Blob([this.props.text], {type: 'application/xml'});\n const fileName = this.props.scriptId.substring('scripts.js'.length) + '.xml';\n\n return {this.state.popper}
\n\n \n {I18n.t('Some files will be rejected')}\n
);\n } else if (isDragActive) {\n if (this.state.imageStatus !== 'accepted') {\n this.setState({imageStatus: 'accepted'});\n }\n\n return (\n \n \n {I18n.t('All files will be accepted')}\n
);\n } else {\n if (this.state.imageStatus !== 'wait') {\n this.setState({imageStatus: 'wait'});\n }\n return (\n \n \n {I18n.t('Drop some files here or click...')}\n \n
);\n }\n }\n }\n this.blockly = el} style={{\n //marginLeft: 180,\n width: '100%',//'calc(100% - 180px)',\n height: '100%',\n //overflow: 'hidden',\n position: 'relative'}}/>,\n\n this.renderMessageDialog(),\n this.renderErrorDialog(),\n this.renderExportDialog(),\n this.renderImportDialog(),\n ];\n } else {\n return null;\n }\n }\n}\n\nBlocklyEditor.propTypes = {\n command: PropTypes.string,\n onChange: PropTypes.func,\n searchText: PropTypes.string,\n scriptId: PropTypes.string,\n themeType: PropTypes.string,\n};\n\nexport default BlocklyEditor;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport withStyles from '@mui/styles/withStyles';\n\nimport Button from '@mui/material/Button';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogActions from '@mui/material/DialogActions';\nimport Dialog from '@mui/material/Dialog';\n\nimport IconSave from '@mui/icons-material/Save';\nimport IconCancel from '@mui/icons-material/Cancel';\n\nimport { I18n } from '@iobroker/adapter-react-v5';\n\nimport ScriptEditorComponent from '../Components/ScriptEditorVanilaMonaco';\n\nconst styles = theme => ({\n textArea: {\n width: 'calc(100% - 10px)',\n resize: 'none'\n },\n dialog: {\n height: '95%'\n },\n fullHeight: {\n height: '100%',\n overflow: 'hidden'\n },\n args: {\n color: theme.palette.mode === 'dark' ? 'white' : 'black',\n height: 30,\n width: '100%',\n fontSize: 16\n },\n argsTitle: {\n color: theme.palette.mode === 'dark' ? 'white' : 'black',\n fontWeight: 'bold'\n }\n});\n\nclass DialogScriptEditor extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n changed: false,\n source: this.props.source,\n };\n if (!this.state.source && this.props.isReturn) {\n this.state.source = '\\nreturn false';\n }\n }\n\n componentDidMount() {\n setTimeout(() => {\n try {\n window.document.getElementById('source-text-area').focus();\n } catch (e) {\n\n }\n }, 100);\n }\n\n handleCancel () {\n this.props.onClose(false);\n }\n\n handleOk () {\n if (this.props.isReturn && !this.state.source.includes('return ')) {\n\n } else {\n this.props.onClose(this.state.source);\n }\n }\n\n onChange(value) {\n this.setState({changed: true, source: value});\n }\n\n render() {\n const classes = this.props.classes;\n\n return false}\n maxWidth=\"lg\"\n classes={{ paper: classes.dialog }}\n fullWidth\n open={!0}\n aria-labelledby=\"source-dialog-title\"\n >\n {I18n.t('Function editor')} \n \n {this.props.args && ( this.onChange(newValue)}\n language={'javascript'}\n />\n \n \n \n \n \n ;\n }\n}\n\nDialogScriptEditor.propTypes = {\n classes: PropTypes.object.isRequired,\n adapterName: PropTypes.string.isRequired,\n runningInstances: PropTypes.object.isRequired,\n onClose: PropTypes.func,\n source: PropTypes.string,\n args: PropTypes.string,\n isReturn: PropTypes.bool,\n themeType: PropTypes.string,\n socket: PropTypes.object\n};\n\nexport default withStyles(styles)(DialogScriptEditor);\n","// extracted by mini-css-extract-plugin\nexport default {\"wrapperRules\":\"style_wrapperRules__Js-Pp\",\"rootWrapper\":\"style_rootWrapper__0Dpqp\",\"addClass\":\"style_addClass__ry424\"};","// extracted by mini-css-extract-plugin\nexport default {\"switchesItem\":\"style_switchesItem__RBQz7\",\"switchesItemActive\":\"style_switchesItemActive__FU8S9\",\"iconTheme\":\"style_iconTheme__inJLE\"};","import { useState, useEffect } from 'react';\nimport * as Icons from '@mui/icons-material/';\n\nconst ICON_CACHE = {};\n\nconst MaterialDynamicIcon = ({ iconName, className, adapter, socket, onClick }) => {\n let [url, setUrl] = useState('');\n\n useEffect(() => {\n if (adapter && socket) {\n ICON_CACHE[adapter] = ICON_CACHE[adapter] || socket.getObject(`system.adapter.${adapter}`);\n ICON_CACHE[adapter].then(obj =>\n obj?.common?.icon && setUrl(`../../adapter/${adapter}/${obj.common.icon}`));\n }\n }, [adapter, socket]);\n\n if (adapter) {\n return ![]()
onClick && onClick(e)} src={url || ''} className={className} alt=\"\" />;\n } else {\n const Element = Icons[iconName || 'Help'];\n return onClick && onClick(e)}\n />;\n }\n}\n\nMaterialDynamicIcon.defaultProps = {\n className: null,\n iconName: 'Help'\n};\n\nexport default MaterialDynamicIcon;","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { I18n, Utils } from '@iobroker/adapter-react-v5';\n\nimport cls from './style.module.scss';\nimport MaterialDynamicIcon from '../../helpers/MaterialDynamicIcon';\n\nconst CardMenu = ({ name, id, active, icon, adapter, socket, onDoubleClick, title, onTouchMove }) => \n
;\n\nCardMenu.defaultProps = {\n name: '',\n active: false,\n id: '',\n onDoubleClick: () => { }\n};\n\nCardMenu.propTypes = {\n name: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n active: PropTypes.bool\n};\n\nexport default CardMenu;","// extracted by mini-css-extract-plugin\nexport default {\"cardStyle\":\"style_cardStyle__5c+lG\",\"cardStyleActive\":\"style_cardStyleActive__n6Nq8\",\"controlMenu\":\"style_controlMenu__J0sIm\",\"closeBtn\":\"style_closeBtn__TzVMw\",\"isDelete\":\"style_isDelete__0Sa6U\",\"drag_mobile\":\"style_drag_mobile__RVp7B\"};","export function deepCopy(name, userRules, additionalParameter) {\n let newItemsSwitches;\n switch (name) {\n case 'actions':\n newItemsSwitches = {\n ...userRules,\n [name]: {\n ...userRules[name],\n [additionalParameter]: [...userRules[name][additionalParameter]]\n }\n };\n return newItemsSwitches;\n\n default:\n newItemsSwitches = {\n ...userRules,\n [name]: [...userRules[name]]\n };\n return newItemsSwitches;\n }\n}","export function filterElement(name, userRules, additionalParameter, _id) {\n switch (name) {\n case 'actions':\n userRules[name][additionalParameter] = userRules[name][additionalParameter].filter(el => el._id !== _id);\n return userRules;\n case 'conditions':\n userRules[name][additionalParameter] = userRules[name][additionalParameter].filter(el => el._id !== _id);\n return userRules;\n default:\n userRules[name] = userRules[name].filter(el => el._id !== _id);\n return userRules;\n }\n}","// extracted by mini-css-extract-plugin\nexport default {\"cardStyle\":\"style_cardStyle__A9pAJ\",\"nameCard\":\"style_nameCard__m2nJe\",\"cardStyleActive\":\"style_cardStyleActive__sMSgj\",\"iconThemCard\":\"style_iconThemCard__wx6Kq\",\"iconThemCardSelectable\":\"style_iconThemCardSelectable__H9okn\",\"iconHelp\":\"style_iconHelp__iIi1g\",\"inputCard\":\"style_inputCard__qf8Q+\",\"blockName\":\"style_blockName__CqwBy\",\"controlMenu\":\"style_controlMenu__8kQnd\",\"closeBtn\":\"style_closeBtn__LcbOd\",\"controlMenuTop\":\"style_controlMenuTop__AkzEp\",\"debugInfo\":\"style_debugInfo__wPdyv\",\"fadeIn\":\"style_fadeIn__zKsCh\",\"tagCard\":\"style_tagCard__CEY-X\",\"displayFlex\":\"style_displayFlex__5sr+i\",\"blockMarginTop\":\"style_blockMarginTop__Qn7Lh\",\"nameBlock\":\"style_nameBlock__MZ53S\",\"frontText\":\"style_frontText__3cVcg\",\"backText\":\"style_backText__sF8Y-\",\"iconTag\":\"style_iconTag__2cpM6\",\"displayItalic\":\"style_displayItalic__9KtQw\"};","// extracted by mini-css-extract-plugin\nexport default {\"root\":\"style_root__h6PjP\",\"square\":\"style_square__ahzCN\",\"icon\":\"style_icon__jwNl0\"};","import { Button } from '@mui/material';\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Utils, Icon as CustomIcon } from '@iobroker/adapter-react-v5';\n\nimport cls from './style.module.scss';\n\nconst CustomButton = ({ fullWidth, size, onClick, style, className, value, square, icon }) => {\n return \n {I18n.t('function (')}\n {this.props.args}\n )\n
)}\n \n \n \n onChange(`${e.target.value.toString().padStart(2, '0')}.${date.toString().padStart(2, '0')}`)}\n value={month}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n onChange(`${month.toString().padStart(2, '0')}.${e.target.value.toString().padStart(2, '0')}`)}\n value={date}\n >\n \n {days.map(i => )}\n \n \n
;\n}\n\nCustomDate.defaultProps = {\n value: '',\n className: null,\n};\n\nCustomDate.propTypes = {\n title: PropTypes.string,\n attr: PropTypes.string,\n style: PropTypes.object,\n onChange: PropTypes.func\n};\n\nexport default CustomDate;","import { I18n } from '@iobroker/adapter-react-v5';\n\nlet lang;\nconst getName = obj => {\n lang = lang || I18n.getLanguage();\n if (typeof obj === 'object') {\n return obj[lang] || obj.en;\n } else {\n return obj;\n }\n};\n\nconst utils = {\n getName\n};\n\nexport default utils;","const STEPS = {\n selectTriggers: 0,\n addScheduleByDoubleClick: 1,\n openTagsMenu: 2,\n selectIntervalTag: 3,\n selectActions: 4,\n addActionPrintText: 5,\n showJavascript: 6,\n switchBackToRules: 7,\n saveTheScript: 8,\n};\n\nconst steps = [\n { // 0\n selector: '.blocks-triggers',\n content: 'Select triggers',\n },\n { // 1\n selector: '.block-TriggerScheduleBlock',\n content: 'Double click to add the block',\n },\n { // 2\n selector: '.tag-card',\n content: 'Open drop down menu',\n },\n { // 3\n selector: '.tag-card-interval',\n content: 'Select interval',\n },\n { // 4\n selector: '.blocks-actions',\n content: 'Select action blocks',\n },\n { // 5\n selector: '.block-ActionPrintText',\n content: 'Double click to add the block',\n },\n { // 6\n selector: '.button-js-code',\n content: 'Check the script',\n },\n { // 7\n selector: '.button-js-code',\n content: 'Switch back to rules',\n },\n { // 8\n selector: '.button-save',\n content: 'Save the script',\n }\n];\n\nexport {STEPS};\n\nexport default steps;","import React, { PureComponent, Fragment } from 'react';\nimport cls from './style.module.scss';\n\nimport { Menu, MenuItem } from '@mui/material';\nimport IconButton from '@mui/material/IconButton';\nimport IconHelp from '@mui/icons-material/HelpOutline';\n\nimport DialogSelectID from '@iobroker/adapter-react-v5/Dialogs/SelectID';\nimport DialogError from '@iobroker/adapter-react-v5/Dialogs/Error';\nimport DialogMessage from '@iobroker/adapter-react-v5/Dialogs/Message';\nimport { getSelectIdIcon } from '@iobroker/adapter-react-v5/Components/Icon';\nimport { I18n, Utils } from '@iobroker/adapter-react-v5';\n\n\nimport CustomButton from '../CustomButton';\nimport CustomCheckbox from '../CustomCheckbox';\nimport CustomInput from '../CustomInput';\nimport CustomInstance from '../CustomInstance';\nimport CustomModal from '../CustomModal';\nimport CustomSelect from '../CustomSelect';\nimport CustomSlider from '../CustomSlider';\nimport CustomSwitch from '../CustomSwitch';\nimport CustomTime from '../CustomTime';\nimport CustomDate from '../CustomDate';\n\nimport MaterialDynamicIcon from '../../helpers/MaterialDynamicIcon';\nimport utils from '../../helpers/utils';\nimport { STEPS } from '../../helpers/Tour';\n\nclass GenericBlock extends PureComponent {\n constructor(props, item) {\n super(props);\n item = item || {};\n let settings = props.settings || {\n tagCard: item.tagCardArray ? typeof item.tagCardArray[0] !== 'string' ? item.tagCardArray[0].title : item.tagCardArray[0] : '',\n };\n\n if (!settings.tagCard && item.tagCardArray) {\n settings.tagCard = typeof item.tagCardArray[0] !== 'string' ? item.tagCardArray[0].title : item.tagCardArray[0];\n }\n\n this.state = {\n inputs: item.inputs || props.inputs || [],\n name: item.name || props.name || '',\n icon: item.icon || props.icon || '',\n adapter: item.adapter || props.adapter || '',\n helpDialog: item.helpDialog || props.helpDialog || '',\n\n tagCardArray: item.tagCardArray || [],\n\n openTagMenu: false,\n openModal: false,\n iconTag: false,\n error: '',\n helpText: '',\n\n oid: {},\n instanceSelectionOptions: [],\n instanceSelectionDef: '',\n\n hideAttributes: [], // e.g. instance\n\n settings,\n debugMessage: null,\n enableSimulation: this.props.enableSimulation,\n };\n\n this.debugHideTimeout = null;\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n if (!nextProps || !nextProps.settings) {\n console.log(JSON.stringify(nextProps));\n return;\n }\n\n const settings = JSON.parse(JSON.stringify(nextProps.settings));\n if (!settings.tagCard && this.state.tagCardArray && this.state.tagCardArray.length) {\n settings.tagCard = typeof this.state.tagCardArray[0] !== 'string' ? this.state.tagCardArray[0].title : this.state.tagCardArray[0];\n }\n\n let newState = null;\n\n if (nextProps.onDebugMessage && nextProps.onDebugMessage.blockId === this.props._id) {\n newState = {};\n newState.debugMessage = JSON.parse(JSON.stringify(nextProps.onDebugMessage));\n this.debugHideTimeout && clearTimeout(this.debugHideTimeout);\n this.debugHideTimeout = setTimeout(() =>\n this.setState({ debugMessage: null }),\n nextProps.onDebugMessage.hideTimeout || 5000);\n }\n\n if (JSON.stringify(settings) !== JSON.stringify(this.state.settings)) {\n newState = newState || {};\n newState.settings = settings;\n }\n\n if (this.state.enableSimulation !== nextProps.enableSimulation) {\n newState = newState || {};\n newState.enableSimulation = nextProps.enableSimulation;\n }\n\n newState && this.setState(newState);\n }\n\n componentWillUnmount() {\n this.debugHideTimeout && clearTimeout(this.debugHideTimeout);\n this.debugHideTimeout = null;\n }\n\n // called every time, the tagCard changes or at start\n onTagChange(tagCard, cb) {\n // analyse inputs and fill the attributes with default values\n let changed = false;\n let settings = JSON.parse(JSON.stringify(this.state.settings));\n this.state.inputs.forEach(input => {\n if (input.attr && input.defaultValue !== undefined) {\n if (settings[input.attr] === undefined) {\n changed = true;\n settings[input.attr] = input.defaultValue;\n }\n }\n });\n if (changed) {\n this.setState({ settings }, () => cb && cb());\n this.props.onChange(settings);\n } else {\n cb && cb();\n }\n }\n\n // called if trigger added or removed\n onUpdate() {\n // do nothing, but blocks can overwrite it\n }\n\n // called every time if some attribute changes\n onValueChanged(value, attr) {\n // do nothing, but blocks can overwrite it\n }\n\n renderText = (input, value, onChange) => {\n const { className } = this.props;\n const { attr, frontText, backText, nameBlock, name, doNotTranslate, doNotTranslateBack } = input;\n return \n {frontText &&
\n {nameBlock && {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n {I18n.t(nameBlock)}
}\n \n
;\n }\n\n renderNameText = ({ attr, signature, doNotTranslate, defaultValue }, value) => \n {frontText &&
\n {nameBlock && {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n {I18n.t(nameBlock)}
}\n \n {frontText &&
: null;\n }\n\n renderColor = (input, value, onChange) => {\n const { className } = this.props;\n const { attr, backText, frontText, doNotTranslate, doNotTranslateBack } = input;\n return {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n {frontText &&
;\n }\n\n renderCheckbox = (input, value, onChange) => {\n const { className } = this.props;\n const { settings } = this.state;\n const { attr, backText, frontText, defaultValue, doNotTranslate, doNotTranslateBack } = input;\n return {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n {frontText &&
;\n }\n\n renderSlider = (input, value, onChange) => {\n const { className } = this.props;\n const { attr, frontText, backText, nameBlock, min, max, step, unit, doNotTranslate, doNotTranslateBack } = input;\n return {doNotTranslate ? frontText : I18n.t(frontText)}
}\n onChange(typeof settings[attr] === 'boolean' ? !settings[attr] : !defaultValue)} className={cls.backText}>{doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n
;\n }\n\n renderButton = (input, value, onClick) => {\n const { className } = this.props;\n const { attr, frontText, backText, buttonText, doNotTranslate, doNotTranslateBack } = input;\n return \n {frontText && {\n console.log(val);\n onChange(val);\n }}\n />\n {backText &&
\n {nameBlock && {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n {I18n.t(nameBlock)}
}\n \n {frontText &&
;\n }\n\n findIcon = obj => {\n if (!obj) {\n return Promise.resolve(null);\n } else\n if (obj.common?.icon) {\n return Promise.resolve(getSelectIdIcon(obj, '../..'));\n } else if (obj.type === 'state' || obj.type === 'channel') {\n const parts = obj._id.split('.');\n parts.pop();\n const newId = parts.join('.');\n return this.props.socket.getObject(newId)\n .then(obj => this.findIcon(obj))\n .catch(() => null);\n }\n }\n\n renderObjectID = (input, value, onChange) => {\n const { attr, openCheckbox, checkReadOnly } = input;\n const { settings } = this.state;\n const showSelectId = this.state[`showSelectId${attr}`];\n const { className, socket } = this.props;\n let visibility = true;\n if (openCheckbox) {\n visibility = typeof settings['offset'] === 'boolean' ? settings['offset'] : true;\n }\n\n if (settings[attr] && !this.state[settings[attr]]) {\n setTimeout(() => {\n socket.getObject(value)\n .then(obj => {\n this.findIcon(obj)\n .then(icon => this.setState({\n [settings[attr]]: obj,\n [`${settings[attr]}___icon`]: icon,\n error: checkReadOnly && this.lastObjectIdChange && Date.now() - this.lastObjectIdChange < 1000 && obj?.common?.write === false ?\n I18n.t('Read only ID selected: %s', settings[attr]) : '',\n }))\n });\n }, 0);\n }\n\n // return null\n return visibility ? {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n {\n const settings = {};\n settings[`showSelectId${attr}`] = false;\n this.setState(settings);\n }}\n onOk={(selected, name, common) => {\n const settings = {};\n settings[`showSelectId${attr}`] = false;\n this.setState(settings, () =>\n // read type of object\n socket.getObject(selected)\n .then(obj => {\n this.lastObjectIdChange = Date.now();\n onChange({\n [attr]: selected,\n [`${attr}Role`]: obj.common.role,\n [`${attr}Type`]: obj.common.type,\n [`${attr}Unit`]: obj.common.unit,\n [`${attr}States`]: obj.common.states,\n [`${attr}Min`]: obj.common.min,\n [`${attr}Max`]: obj.common.max,\n [`${attr}Step`]: obj.common.step,\n [`${attr}Def`]: obj.common.def,\n [`${attr}Write`]: obj.common.write,\n [`${attr}Read`]: obj.common.read,\n }, null, () =>\n this.props.setOnUpdate && this.props.setOnUpdate(true))\n }))}\n }\n /> : null}\n
: null;\n }\n\n renderIconTag = () => {\n return \n {input.title ? {\n const settings = {};\n settings[`showSelectId${attr}`] = true;\n this.setState(settings);\n }}\n />\n
\n {this.state[this.state.settings[input.attr]] && {I18n.t(input.title)}
: null}\n {Utils.getObjectNameFromObj(this.state[settings[attr]], I18n.getLanguage())}
}\n {showSelectId ? \n {frontText &&
;\n };\n\n renderSelect = (input, value, onChange) => {\n const { className } = this.props;\n const { name, options, frontText, backText, attr, multiple, doNotTranslate, doNotTranslate2, doNotTranslateBack } = input;\n return {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n {frontText &&
;\n };\n\n renderInstance = (input, value, onChange) => {\n const { className, socket } = this.props;\n const { name, options, frontText, backText, attr, adapter, doNotTranslate, doNotTranslateBack } = input;\n if (this.state.hideAttributes.includes(attr)) {\n return null;\n }\n return {I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n {frontText && this.setState({ hideAttributes: [...this.state.hideAttributes, attr] }, () => onChange(value))} // hide instance if only exactly one exists\n />\n {backText &&
;\n }\n\n renderDialog = (input, value, onChange) => {\n const { onShowDialog, frontText, backText, attr, icon, doNotTranslate, doNotTranslateBack } = input;\n return {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n {frontText && onShowDialog && onShowDialog()}\n />\n {backText &&
;\n }\n\n renderModalInput = (input, value, onChange) => {\n const { openModal } = this.state;\n const { className } = this.props;\n const { attr, nameBlock, frontText, backText, noTextEdit, doNotTranslate, doNotTranslateBack} = input;\n return {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n \n this.setState({ openModal: false }, () =>\n val !== null && val !== undefined && onChange(val))}\n onClose={() => this.setState({ openModal: false })}\n defaultValue={value}\n textInput\n /> : null}\n {nameBlock &&
;\n };\n\n renderDate = (input, value, onChange) => {\n const { attr, backText, frontText, doNotTranslate, doNotTranslateBack } = input\n return \n {frontText && this.setState({ openModal: true })}\n />\n {backText &&
\n {openModal ? {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n {I18n.t(nameBlock)}
}\n \n {frontText &&
;\n };\n\n static getReplacesInText(context) {\n let value = '';\n if (context.trigger?.oidType) {\n value = '.replace(/%s/g, obj.state.val).replace(/%id/g, obj.id).replace(/%name/g, obj.common && obj.common.name).replace(/%old/g, obj.oldState.val)';\n } else if (context.conditionsStates.length) {\n value = `.replace(/%s/g, ${context.conditionsStates[0].name}).replace(/%id/g, \"${context.conditionsStates[0].id}\")`;\n }\n return value;\n }\n\n /////////////////////////////\n renderTags = () => {\n let { tagCardArray, openTagMenu } = this.state;\n let { tagCard } = this.state.settings;\n let result = tagCard !== '=' && tagCard !== '<>' && tagCard !== '>=' && tagCard !== '()' && tagCard !== '.' && tagCard !== '<=' && tagCard !== '<' && tagCard !== '>' ? I18n.t(tagCard) : tagCard;\n if (tagCardArray.length >= 3) {\n result = {doNotTranslate ? frontText : I18n.t(frontText)}
}\n {doNotTranslateBack ? backText : I18n.t(backText)}
}\n \n this.setState({ openTagMenu: null })}\n >\n {tagCardArray.map(el => {\n let tag = el;\n if (typeof el !== 'string') {\n tag = el.title;\n }\n return (\n {\n const settings = { ...this.state.settings, tagCard: tag };\n this.setState({ openTagMenu: null, settings }, () => {\n this.props.onChange(settings);\n this.onTagChange(tag);\n });\n (this.props.isTourOpen &&\n (this.props.tourStep === STEPS.openTagsMenu ||\n this.props.tourStep === STEPS.selectIntervalTag) &&\n tag === 'interval' &&\n setTimeout(() => this.props.setTourStep(STEPS.selectActions), 500));\n\n }}>{tag.search(/>|<|<>|<=|>=|=/) !== -1 ? tag : I18n.t(tag)}{typeof el !== 'string' && el.title2 &&
;\n }\n\n return result;\n };\n\n onChangeTag = () => {\n const { tagCardArray, settings, settings: { tagCard } } = this.state;\n let newTagCardArray = [...tagCardArray]\n if (typeof newTagCardArray[0] !== 'string') {\n newTagCardArray = newTagCardArray.map(el => el.title);\n }\n\n if (tagCard && newTagCardArray.length < 3) {\n const newSettings = { ...settings };\n const newTagCard = newTagCardArray[(newTagCardArray.indexOf(tagCard) + 1) % newTagCardArray.length]\n newSettings.tagCard = newTagCard;\n this.setState({ settings: newSettings }, () => {\n this.props.onChange(newSettings);\n this.onTagChange(newTagCard);\n });\n }\n };\n\n componentDidMount = () => {\n this.onTagChange();\n // detect changes\n };\n\n componentDidUpdate = prevProps => {\n if (this.props.acceptedBy !== 'triggers' && this.props.onUpdate) {\n setTimeout(() => this.onUpdate(), 0);\n }\n }\n\n onChangeInput = attribute => {\n return (value, attr, cb) => {\n const settings = JSON.parse(JSON.stringify(this.state.settings));\n\n if (typeof value === 'object' && (!attr || typeof attr === 'function')) {\n Object.keys(value).forEach(_attr => settings[_attr] = value[_attr]);\n } else {\n settings[attr || attribute] = value;\n }\n settings.id = this.getData().id;\n settings._id = this.props._id;\n\n this.setState({ settings }, () => {\n this.onValueChanged(value, attr || attribute);\n this.props.onChange(settings);\n cb && cb();\n });\n }\n }\n\n renderSpecific() {\n return null; // it can be overloaded\n }\n\n renderDebugInfo() {\n if (this.state.debugMessage) {\n return {\n this.setState({ openTagMenu: e.currentTarget }, () => {\n this.props.isTourOpen &&\n this.props.tourStep === STEPS.openTagsMenu &&\n setTimeout(() => this.props.setTourStep(STEPS.selectIntervalTag), 300);\n });\n }}>{result}
\n {I18n.t(el.title2)}
}\n \n );\n })}\n \n \n {this.renderDebug ? this.renderDebug(this.state.debugMessage) : I18n.t('executed')}\n
;\n } else {\n return null;\n }\n }\n\n render = () => {\n const { inputs, name, icon, iconTag, settings, adapter, settings: { tagCard }, helpDialog } = this.state;\n const { socket, notFound } = this.props;\n\n return \n \n {I18n.t(name)}\n {!!notFound ? I18n.t(`%s not found`, settings.id) : ''}\n {helpDialog ? this.setState({ helpText: I18n.t(helpDialog) })}> : null}\n \n {inputs.filter(({ nameRender }) => this[nameRender])\n .map(input => {\n const { nameRender, defaultValue, attr, options } = input;\n return this[nameRender](\n input,\n settings[attr] !== undefined ? settings[attr] : defaultValue,\n this.onChangeInput(attr),\n options || []\n );\n })}\n
\n {tagCard && \n
}\n {this.renderDebugInfo()}\n {this.state.error ? this.onChangeTag()} className={Utils.clsx(cls.tagCard, 'tag-card')}>{this.renderTags()}
\n \n {\n await onChange(textCron, attr);\n await onChange(convertCronToText(textCron, I18n.getLanguage()), 'addText');\n this.setState({ openDialog: false });\n }}\n onClose={() => this.setState({ openDialog: false })}>\n textCron = el}\n language={I18n.getLanguage()}\n />\n \n {this.renderNameText({\n defaultValue: I18n.t('every hour at 0 minutes'),\n attr: 'addText',\n signature: true,\n doNotTranslate: true,\n }, !!settings['addText'] ? settings['addText'] : I18n.t('every hour at 0 minutes'), onChange)}\n
;\n }\n\n renderWizard(input, value, onChange) {\n const { className } = this.props;\n const { attr } = input;\n let wizardText = '';\n let wizard = null;\n\n return \n this.setState({ openDialog: true })}\n />\n
\n \n {this.renderText({\n attr: attr,\n defaultValue: value\n }, !!settings[attr] ? settings[attr] : value, onChange)}\n
\n \n \n this.setState({ openDialog: false }, () =>\n onChange({\n [`${attr}Text`]: wizardText,\n [attr]: wizard,\n }))}\n onClose={() => this.setState({ openDialog: false })}>\n {\n wizardText = text;\n wizard = typeof val === 'object' ? JSON.parse(JSON.stringify(val)) : JSON.parse(val);\n wizard.valid = wizard.valid || {};\n wizard.valid.from = wizard.valid.from || Schedule.now2string();\n wizard = JSON.stringify(wizard);\n }} />\n \n
;\n }\n\n onTagChange(tagCard) {\n tagCard = tagCard || this.state.settings.tagCard;\n switch (tagCard) {\n case 'interval':\n this._setInterval();\n break;\n\n case 'cron':\n this.setState({\n inputs: [\n {\n nameRender: 'renderCron',\n attr: 'cron',\n defaultValue: '0 * * * *',\n }\n ]\n }, () => super.onTagChange());\n break;\n\n case 'wizard':\n const wizard = JSON.parse(DEFAULT_WIZARD);\n wizard.valid = wizard.valid || {};\n wizard.valid.from = wizard.valid.from || Schedule.now2string();\n\n this.setState({\n inputs: [\n {\n nameRender: 'renderWizard',\n attr: 'wizard',\n defaultValue: JSON.stringify(wizard),\n },\n ],\n }, () => super.onTagChange(null, () => {\n const wizardText = Schedule.state2text(this.state.settings.wizard || wizard);\n if (this.state.settings.wizardText !== wizardText) {\n const settings = JSON.parse(JSON.stringify(this.state.settings));\n settings.wizardText = wizardText;\n this.setState({ settings });\n this.props.onChange(settings);\n }\n }));\n break;\n\n case 'at':\n this.setState({\n inputs: [\n {\n nameRender: 'renderTime',\n prefix: 'at',\n attr: 'at',\n defaultValue: '07:30',\n },\n {\n nameRender: 'renderSelect',\n attr: 'dow',\n default: '',\n multiple: true,\n defaultValue: ['_', '1', '2', '3', '4', '5', '6', '0'],\n options: [\n { value: '_', title: 'Every day', only: true },\n { value: '1', title: 'Monday', titleShort: 'Mo' },\n { value: '2', title: 'Tuesday', titleShort: 'Tu' },\n { value: '3', title: 'Wednesday', titleShort: 'We' },\n { value: '4', title: 'Thursday', titleShort: 'Th' },\n { value: '5', title: 'Friday', titleShort: 'Fr' },\n { value: '6', title: 'Saturday', titleShort: 'Sa' },\n { value: '0', title: 'Sunday', titleShort: 'Su' },\n ]\n }\n ]\n }, () => super.onTagChange());\n break;\n\n case 'astro':\n this._setAstro();\n break;\n\n default:\n break;\n }\n }\n\n static getStaticData() {\n return {\n acceptedBy: 'triggers',\n name: 'Schedule',\n id: 'TriggerScheduleBlock',\n icon: 'AccessTime',\n tagCardArray: ['cron', 'wizard', 'interval', 'at', 'astro'],\n title: 'Triggers the rule periodically or on some specific time',\n }\n }\n\n getData() {\n return TriggerScheduleBlock.getStaticData();\n }\n}\n\nexport default TriggerScheduleBlock;\n","import React from 'react';\nimport withStyles from '@mui/styles/withStyles';\n\nimport GenericBlock from '../GenericBlock';\nimport Compile from '../../helpers/Compile';\nimport Button from '@mui/material/Button';\nimport Switch from '@mui/material/Switch';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport TextField from '@mui/material/TextField';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport Slide from '@mui/material/Slide';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Checkbox from '@mui/material/Checkbox';\n\nimport { MdCancel as IconCancel } from 'react-icons/md';\nimport { MdCheck as IconCheck } from 'react-icons/md';\n\nimport { I18n } from '@iobroker/adapter-react-v5';\n\nconst styles = theme => ({\n valueAck: {\n color: '#b02323',\n },\n valueNotAck: {\n color: '#12ac15',\n },\n});\n\nconst Transition = React.forwardRef((props, ref) =>\n \n onChange(el)}\n customValue\n />\n this.setState({ openDialog: true })}\n />\n
\n \n
\n
;\n});\n\nCurrentItem.defaultProps = {\n active: false\n};\n\nCurrentItem.propTypes = {\n name: PropTypes.oneOfType([PropTypes.string, PropTypes.object])\n};\n\nexport default CurrentItem;","export function findElement(settings, userRules, additionalParameter) {\n const { _id, acceptedBy } = settings;\n let block;\n\n if (!acceptedBy || !userRules[acceptedBy]) {\n console.warn('Cannot find ' + acceptedBy);\n return userRules;\n }\n\n switch (acceptedBy) {\n case 'actions':\n block = userRules[acceptedBy][additionalParameter].find(el => el._id === _id);\n if (!block) {\n console.warn('Cannot find ' + _id);\n } else {\n userRules[acceptedBy][additionalParameter][userRules[acceptedBy][additionalParameter].indexOf(block)] = settings;\n }\n return userRules;\n case 'conditions':\n block = userRules[acceptedBy][additionalParameter].find(el => el._id === _id);\n if (!block) {\n console.warn('Cannot find ' + _id);\n } else {\n userRules[acceptedBy][additionalParameter][userRules[acceptedBy][additionalParameter].indexOf(block)] = settings;\n }\n return userRules;\n default:\n block = userRules[acceptedBy].find(el => el._id === _id);\n if (!block) {\n console.warn('Cannot find ' + _id);\n } else {\n userRules[acceptedBy][userRules[acceptedBy].indexOf(block)] = settings;\n }\n return userRules;\n }\n}","import React from 'react';\nimport { useDragLayer } from 'react-dnd';\nimport CardMenu from '../CardMenu';\nimport CurrentItem from '../CurrentItem';\n\nconst layerStyles = {\n position: 'fixed',\n pointerEvents: 'none',\n zIndex: 100,\n left: 0,\n top: 0,\n width: '100%',\n height: '100%'\n};\n\nconst snapToGrid = (x, y) => {\n const snappedX = Math.round(x / 32) * 32\n const snappedY = Math.round(y / 32) * 32\n return [snappedX, snappedY]\n}\n\nconst getItemStyles = (initialOffset, currentOffset, isSnapToGrid) => {\n if (!initialOffset || !currentOffset) {\n return {\n display: 'none'\n };\n }\n let { x, y } = currentOffset;\n if (isSnapToGrid) {\n x -= initialOffset.x;\n y -= initialOffset.y;\n [x, y] = snapToGrid(x, y);\n x += initialOffset.x;\n y += initialOffset.y;\n }\n const transform = `translate(${x}px, ${y}px)`;\n return {\n transform,\n WebkitTransform: transform\n };\n}\n\nexport const CustomDragLayer = props => {\n const {\n itemType,\n isDragging,\n item,\n initialOffset,\n currentOffset,\n targetIds\n } = useDragLayer(monitor => ({\n item: monitor.getItem(),\n itemType: monitor.getItemType(),\n initialOffset: monitor.getInitialSourceClientOffset(),\n currentOffset: monitor.getSourceClientOffset(),\n isDragging: monitor.isDragging(),\n targetIds: monitor.getTargetIds()\n }));\n\n const renderItem = () => {\n switch (itemType) {\n case 'box':\n return targetIds.length ? {\n let newItemsSwitches = deepCopy(acceptedBy, userRules, blockValue);\n newItemsSwitches = filterElement(acceptedBy, newItemsSwitches, blockValue, _id);\n setIsDelete(true);\n setTimeout(() => {\n if (acceptedBy === 'triggers') {\n setOnUpdate(true);\n }\n setUserRules(newItemsSwitches);\n }, 300);\n }} className={cls.closeBtn} />\n
}\n \n
;\n};\n","// extracted by mini-css-extract-plugin\nexport default {\"border\":\"style_border__Zz9Km\",\"emptyBlockStyle\":\"style_emptyBlockStyle__sE5FO\",\"emptyBlock\":\"style_emptyBlock__dMBHS\",\"marginTop\":\"style_marginTop__uK9O+\",\"selectOnChange\":\"style_selectOnChange__6r-uo\",\"selectOnChangeHelp\":\"style_selectOnChangeHelp__nP0g8\",\"selectOnChangeHelpIcon\":\"style_selectOnChangeHelpIcon__r7G9x\",\"emptyBlockNone\":\"style_emptyBlockNone__DS6GG\",\"mainBlockItemRules\":\"style_mainBlockItemRules__JYCaQ\",\"nameBlockItems\":\"style_nameBlockItems__sNeEH\",\"contentBlockItem\":\"style_contentBlockItem__SQejW\",\"wrapperMargin\":\"style_wrapperMargin__v8PwE\",\"contentHeightOn\":\"style_contentHeightOn__T3ZZ-\",\"heightBlock\":\"style_heightBlock__B96p1\",\"contentHeightOff\":\"style_contentHeightOff__eaSlV\",\"cardAdd\":\"style_cardAdd__SNY3P\",\"blockCardAdd\":\"style_blockCardAdd__xHdXK\",\"addClassOverflow\":\"style_addClassOverflow__bcVva\",\"addClassHeight\":\"style_addClassHeight__GJALi\"};","import * as React from 'react';\n\nexport function useStateLocal(events, nameEvents) {\n const [state, setState] = React.useState(\n localStorage.getItem(nameEvents) ? JSON.parse(localStorage.getItem(nameEvents)) : events\n );\n\n const eventsToInstall = (newHeadCells) => {\n localStorage.setItem(nameEvents, JSON.stringify(newHeadCells));\n setState(newHeadCells);\n };\n return [state, eventsToInstall, localStorage.getItem(nameEvents) ? true : false];\n}\n","import _ from \"lodash\";\n\nconst funcSet = _.throttle(\n (setCards, userRules) => setCards(userRules)\n , 0);\n\nconst moveCard = (\n id,\n atIndex,\n cards,\n setCards,\n userRules,\n acceptedBy,\n additionally,\n hoverClientY,\n hoverMiddleY) => {\n\n const { card, index } = findCard(id, cards);\n if (index < atIndex && hoverClientY < hoverMiddleY) {\n return;\n }\n if (index > atIndex && hoverClientY > hoverMiddleY) {\n return;\n }\n if (card && index !== atIndex) {\n const copyCard = _.clone(cards);\n copyCard.splice(index, 1);\n copyCard.splice(atIndex, 0, card);\n const newTriggers = _.clone(userRules);\n switch (acceptedBy) {\n case 'actions':\n newTriggers[acceptedBy][additionally] = copyCard;\n funcSet(setCards, newTriggers);\n return;\n case 'conditions':\n newTriggers[acceptedBy][additionally] = copyCard;\n funcSet(setCards, newTriggers);\n return;\n default:\n newTriggers[acceptedBy] = copyCard;\n funcSet(setCards, newTriggers);\n return;\n }\n }\n};\nconst findCard = (id, cards) => {\n const card = cards.find((c) => c._id === id);\n return {\n card,\n index: cards.indexOf(card),\n };\n};\n\nexport { moveCard, findCard };","// extracted by mini-css-extract-plugin\nexport default {\"drag\":\"style_drag__Gq61w\",\"root\":\"style_root__nSnEB\"};","import React, { useContext, useEffect, useRef } from 'react';\n// import { I18n } from '@iobroker/adapter-react-v5';\nimport PropTypes from 'prop-types';\nimport { useDrag, useDrop } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { deepCopy } from '../../helpers/deepCopy';\nimport { filterElement } from '../../helpers/filterElement';\nimport { findCard, moveCard } from '../../helpers/cardSort';\nimport { ContextWrapperCreate } from '../ContextWrapper';\nimport cls from './style.module.scss';\n\nconst DragWrapper = ({ typeBlocks, allProperties, id, isActive, setUserRules, userRules, children, _id, blockValue }) => {\n const { setOnUpdate } = useContext(ContextWrapperCreate);\n const [{ opacity }, drag, preview] = useDrag({\n type: 'box',\n item: () => ({ ...allProperties, id, isActive, _id }),\n end: (item, monitor) => {\n let { acceptedBy } = item;\n let dropResult = monitor.getDropResult();\n let newUserRules;\n if (!dropResult) {\n if (typeof _id === 'number' && !monitor.getTargetIds().length) {\n newUserRules = deepCopy(acceptedBy, userRules, blockValue);\n newUserRules = filterElement(acceptedBy, newUserRules, blockValue, _id);\n setUserRules(newUserRules);\n }\n return null;\n }\n if (dropResult.blockValue !== blockValue) {\n let idNumber = typeof _id === 'number' ? _id : Date.now();\n newUserRules = deepCopy(acceptedBy, userRules, dropResult.blockValue);\n const newItem = { id: item.id, acceptedBy: item.acceptedBy }\n switch (acceptedBy) {\n case 'actions':\n if (blockValue) {\n newUserRules = filterElement(acceptedBy, newUserRules, blockValue, _id);\n }\n newUserRules = filterElement(acceptedBy, newUserRules, dropResult.blockValue, _id);\n newUserRules[acceptedBy][dropResult.blockValue].push({ ...newItem, _id: idNumber });\n return setUserRules(newUserRules);\n\n case 'conditions':\n if (typeof blockValue === 'number') {\n newUserRules = filterElement(acceptedBy, newUserRules, blockValue, _id);\n }\n newUserRules = filterElement(acceptedBy, newUserRules, dropResult.blockValue, _id);\n newUserRules[acceptedBy][dropResult.blockValue].push({ ...newItem, _id: idNumber });\n return setUserRules(newUserRules);\n\n default:\n setOnUpdate(true);\n newUserRules = filterElement(acceptedBy, newUserRules, dropResult.blockValue, _id);\n newUserRules[acceptedBy].push({ ...newItem, _id: idNumber });\n return setUserRules(newUserRules);\n }\n }\n },\n collect: monitor => ({\n opacity: monitor.isDragging() ? 0.4 : 1,\n isDragging: monitor.isDragging(),\n }),\n });\n const ref = useRef(null)\n const [, drop] = useDrop({\n accept: 'box',\n canDrop: () => false,\n hover({ _id: draggedId, acceptedBy }, monitor) {\n if (!ref.current) {\n return;\n }\n if (typeBlocks !== acceptedBy) {\n return\n }\n const hoverBoundingRect = ref.current?.getBoundingClientRect();\n const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n const clientOffset = monitor.getClientOffset();\n const hoverClientY = clientOffset.y - hoverBoundingRect.top;\n\n if (!!_id && draggedId !== _id) {\n switch (acceptedBy) {\n case 'actions':\n if (blockValue === 'then' || blockValue === 'else') {\n const { index: overIndexActions } = findCard(_id, userRules[acceptedBy][blockValue]);\n if (overIndexActions !== draggedId) {\n moveCard(draggedId,\n overIndexActions,\n userRules[acceptedBy][blockValue],\n setUserRules,\n userRules,\n acceptedBy,\n blockValue,\n hoverClientY,\n hoverMiddleY\n );\n }\n }\n return;\n case 'conditions':\n if (typeof blockValue === 'number') {\n const { index: overIndexConditions } = findCard(_id, userRules[acceptedBy][blockValue]);\n if (overIndexConditions !== draggedId) {\n moveCard(draggedId,\n overIndexConditions,\n userRules[acceptedBy][blockValue],\n setUserRules,\n userRules,\n acceptedBy,\n blockValue,\n hoverClientY,\n hoverMiddleY\n );\n }\n }\n return;\n default:\n const { index: overIndex } = findCard(_id, userRules[acceptedBy]);\n if (overIndex !== draggedId) {\n moveCard(draggedId,\n overIndex,\n userRules[acceptedBy],\n setUserRules,\n userRules,\n acceptedBy,\n null,\n hoverClientY,\n hoverMiddleY\n );\n }\n return;\n }\n }\n }\n });\n useEffect(() => {\n preview(getEmptyImage(), { captureDraggingState: true });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n drag(drop(ref));\n const isMobile = window.innerWidth < 600;\n return \n {renderItem()}\n
\n {children}
;\n}\n\nDragWrapper.defaultProps = {\n name: '',\n active: false,\n id: '',\n _id: null\n};\n\nDragWrapper.propTypes = {\n name: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n};\n\nexport default DragWrapper;","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\n\nimport IconOk from '@mui/icons-material/Check';\n\nimport { I18n } from '@iobroker/adapter-react-v5';\n\nconst DialogHelp = ({ onClose, open }) => \n
\n {I18n.t('On condition change')}
\n{I18n.t('help_on_change')}
\n {I18n.t('Just check')}
\n{I18n.t('help_just_check')}
\n {I18n.t('On condition change')}
\n{I18n.t('help_on_change')}
\n {I18n.t('Just check')}
\n{I18n.t('help_just_check')}
\n \n
;\n}\n\nAdditionallyContentBlockItems.defaultProps = {\n children: null,\n boolean: true,\n animation: false\n};\n\nconst ContentBlockItems = ({ size, typeBlock, name, nameAdditionally, additionally, border, userRules, setUserRules, iconName, adapter, socket, setTourStep, tourStep, isTourOpen }) => {\n const [additionallyClickItems, setAdditionallyClickItems, checkLocal] = useStateLocal(typeBlock === 'actions' ? false : [], `additionallyClickItems_${typeBlock}`);\n const [showHelp, setShowHelp] = useState(false);\n const [showConditionDialog, setShowConditionDialog] = useState(false);\n\n useEffect(() => {\n if (typeBlock === 'conditions' && additionallyClickItems.length !== userRules['conditions'].length - 1) {\n let newArray = [];\n userRules['conditions'].forEach((el, idx) => {\n if (idx > 0) {\n newArray.push({\n _id: Date.now(),\n open: true,\n });\n }\n });\n setAdditionallyClickItems([...additionallyClickItems, ...newArray]);\n }\n if (typeBlock === 'actions' && !checkLocal && userRules['actions']['else'].length) {\n setAdditionallyClickItems(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const [animation, setAnimation] = useState(false);\n\n return {itemsSwitchesRender[blockValue]?.map(el => (\n \n
\n \n \n \n {\n if (typeBlock === 'actions') {\n setAdditionallyClickItems(!additionallyClickItems);\n return null;\n }\n let newAdditionally = JSON.parse(JSON.stringify(additionallyClickItems));\n if (userRules['conditions'][index + 1].length) {\n newAdditionally[index].open = !newAdditionally[index].open\n setAdditionallyClickItems(newAdditionally);\n return null;\n }\n newAdditionally = newAdditionally.filter((el, idx) => idx !== index);\n setAdditionallyClickItems(newAdditionally);\n setAnimation(typeBlock === 'actions' ? true : index);\n setTimeout(() => {\n setAnimation(false);\n setUserRules({ ...userRules, conditions: [...userRules.conditions.filter((el, idx) => idx !== index + 1)] });\n }, 250);\n\n }}\n key={index} className={cls.blockCardAdd}>\n {booleanAdditionally() ? '-' : '+'}
\n \n {\n const _userRules = deepCopy('conditions', userRules);\n _userRules.justCheck = e.target.value;\n setUserRules(_userRules);\n }}\n >\n \n \n \n setShowHelp(true)}>\n \n
\n : null}\n \n {nameAdditionally}\n
\n \n {nameAdditionally}\n
\n }\n \n
setHamburgerOnOff(!hamburgerOnOff)}>