Corrected #238

Better widget
ioBroker · Apr 3, 2024 · 50baa22 · 50baa22
1 parent 80c3a04
commit 50baa22
Show file tree

Hide file tree

Showing 11 changed files with 666 additions and 350 deletions.
diff --git a/README.md b/README.md
@@ -25,6 +25,10 @@ This adapter has vis2 widget.
 -->
 
 ## Changelog
+### **WORK IN PROGRESS**
+* (bluefox) Corrected 15-minute intervals
+* (bluefox) GUI improvements for mobile view
+
 ### 1.1.14 (2024-04-02)
 * (bluefox) Corrected widget and profile
 

diff --git a/main.js b/main.js
@@ -72,7 +72,7 @@ function convertValue(obj, type, value) {
     return false;
 }
 
-const updateStates = async () => {
+const updateStates = async force => {
     const profiles = adapter.config.profiles;
     const now = new Date();
     const active = {};
@@ -85,33 +85,43 @@ const updateStates = async () => {
         if (profileState && typeof profileState === 'object') {
             profileState = profileState.val;
         }
+        const minutes = now.getMinutes();
+        // if not XX:00 or XX:30
+        if (!force && profile.data.intervalDuration === 0.5 && (minutes === 15 || minutes === 45)) {
+            continue;
+        }
+        // if not XX:00
+        if (!force && profile.data.intervalDuration >= 1 && minutes) {
+            continue;
+        }
+        if (profile.type === 'profile') {
+            if (profile.data.dow.includes(now.getDay()) && profileState) {
+                const index = Math.floor((now.getHours() + now.getMinutes() / 60) / profile.data.intervalDuration);
+                const value = profile.data.intervals[index];
+                await adapter.setStateAsync(profile.data.activeState, true, true);
+
+                profile.data.members.forEach(id => {
+                    if (!devices[id]) {
+                        adapter.log.warn(`Device ${id} used in schedule "${profile.title}", but object does not exist.`);
+                        // this object was deleted after adapter start
+                        return;
+                    }
 
-        if (profile.type === 'profile'
-            && profile.data.dow.includes(now.getDay())
-            && profileState
-        ) {
-            const index = Math.floor((now.getHours() + now.getMinutes() / 60) / profile.data.intervalDuration);
-            const value = profile.data.intervals[index];
-
-            profile.data.members.forEach(id => {
-                if (!devices[id]) {
-                    adapter.log.warn(`Device ${id} used in schedule "${profile.title}", but object does not exist.`);
-                    // this object was deleted after adapter start
-                    return;
-                }
-
-                if (!active[id] || active[id].priority < profile.data.prio) {
-                    active[id] = {
-                        id: profile.id,
-                        title: profile.title,
-                        priority: profile.data.prio,
-                        type: profile.data.type,
-                        value,
-                    };
-                } else if (active[id] && active[id].priority === profile.data.prio) {
-                    adapter.log.error(`"${id}" is in two or more profiles: "${profile.title}" and "${active[id].title}"(<-used for control)`);
-                }
-            });
+                    if (!active[id] || active[id].priority < profile.data.prio) {
+                        active[id] = {
+                            id: profile.id,
+                            title: profile.title,
+                            priority: profile.data.prio,
+                            type: profile.data.type,
+                            value,
+                        };
+                    } else if (active[id] && active[id].priority === profile.data.prio) {
+                        adapter.log.error(`"${id}" is in two or more profiles: "${profile.title}" and "${active[id].title}"(<-used for control)`);
+                    }
+                });
+            } else {
+                await adapter.setStateAsync(profile.data.activeState, false, true);
+            }
         }
     }
 
@@ -133,8 +143,12 @@ const updateStates = async () => {
 function startNextInterval() {
     const time = new Date();
 
-    if (time.getMinutes() < 30) {
+    if (time.getMinutes() < 15) {
+        time.setMinutes(15);
+    } else if (time.getMinutes() < 30) {
         time.setMinutes(30);
+    } else if (time.getMinutes() < 45) {
+        time.setMinutes(45);
     } else {
         time.setHours(time.getHours() + 1);
         time.setMinutes(0);
@@ -169,6 +183,25 @@ function getStateId(profile, profiles, _list) {
     return `${adapter.namespace}.${_list.join('.')}`;
 }
 
+async function createActiveState(id) {
+    const obj = await adapter.getForeignObjectAsync(id);
+    if (!obj) {
+        await adapter.setObjectAsync(id, {
+            type: 'state',
+            common: {
+                name: 'Active state of the profile',
+                type: 'boolean',
+                role: 'indicator',
+                read: true,
+                write: false,
+                def: false,
+            },
+            native: {}
+        });
+
+    }
+}
+
 async function main() {
     const profiles = adapter.config.profiles;
 
@@ -180,6 +213,8 @@ async function main() {
             if (profile.data.state === true) {
                 profile.data.state = getStateId(profile, profiles);
             }
+            profile.data.activeState = `${getStateId(profile, profiles)}_active`;
+            await createActiveState(profile.data.activeState);
 
             for (const m in profile.data.members) {
                 if (!devices[profile.data.members[m]]) {
@@ -196,7 +231,7 @@ async function main() {
     // subscribe on all used IDs
     adapter.subscribeForeignObjects(Object.keys(devices));
 
-    await updateStates();
+    await updateStates(true);
     startNextInterval();
 }
 

diff --git a/src-widgets/src/components/Intervals.js b/src-widgets/src/components/Intervals.js
@@ -207,24 +207,24 @@ class Intervals extends Component {
 
         const sliders = [];
         for (let i = slideId * count; i < (slideId + 1) * count; i++) {
-            sliders.push(
-                <Interval
-                    key={`${i}step${range}${key}`}
-                    value={data[i]}
-                    selected={selected[i]}
-                    label=""
-                    i={i}
-                    step={range}
-                    on={this.onChange}
-                    type={type}
-                    theme={theme}
-                    intervalsWidth={intervalsWidth / count}
-                />,
-            );
+            sliders.push(<Interval
+                key={`${i}step${range}${key}`}
+                value={data[i]}
+                selected={selected[i]}
+                label=""
+                i={i}
+                step={range}
+                on={this.onChange}
+                type={type}
+                theme={theme}
+                intervalsWidth={intervalsWidth / count}
+            />);
         }
 
+        const now = new Date(this.state.currentTime);
+
         const leftOffset = Math.round(
-            (((this.state.currentTime.getHours() + this.state.currentTime.getMinutes() / 60) / range - count * slideId) / count) * intervalsWidth,
+            (((now.getHours() + now.getMinutes() / 60) / range - count * slideId) / count) * intervalsWidth,
         );
 
         return <>

diff --git a/src-widgets/src/components/IntervalsContainer.js b/src-widgets/src/components/IntervalsContainer.js
@@ -34,7 +34,9 @@ class IntervalsContainer extends Component {
     constructor(props) {
         super(props);
         this.tapperRef = React.createRef();
-        this.state = {};
+        this.state = {
+            intervalsWidth: 0,
+        };
     }
 
     componentDidMount() {
@@ -56,7 +58,7 @@ class IntervalsContainer extends Component {
     }
 
     updateWindowDimensions = () => {
-        const w = this.tapperRef.current.getBoundingClientRect().width;
+        const w = this.tapperRef.current?.getBoundingClientRect().width;
         this.setState({
             intervalsWidth: w || 30,
         });
@@ -67,9 +69,16 @@ class IntervalsContainer extends Component {
             type, theme, range, intervals,
         } = this.props;
         const { tapperGrid, tapperInside } = this.props.classes;
+        const intervalsWidth = this.tapperRef.current?.getBoundingClientRect().width;
+        if (intervalsWidth && intervalsWidth !== this.state.intervalsWidth) {
+            this.updateWidth = this.updateWidth || setTimeout(() => {
+                this.updateWidth = null;
+                this.updateWindowDimensions();
+            }, 100);
+        }
         // console.log(this.state.intervalsWidth);
         return <div
-            className={`${tapperGrid} m-1 h-100 `}
+            className={`${tapperGrid} m-1 h-100`}
             style={{ backgroundColor: theme.palette.background.default }}
         >
             <div

diff --git a/src/package.json b/src/package.json
@@ -5,6 +5,7 @@
     "dependencies": {
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@iobroker/adapter-react-v5": "^4.13.5",
+        "@devbookhq/splitter": "^1.4.2",
         "@mui/icons-material": "^5.15.14",
         "@mui/material": "5.14.14",
         "@mui/styles": "5.14.14",
@@ -53,4 +54,4 @@
         "not op_mini all"
     ],
     "devDependencies": {}
-}
+}