v4.0.26-beta

README.md

@@ -330,7 +330,6 @@ Es stehen folgende Typen zur Verfügung
 |none|Spalte wird nicht angezeigt|
 |button|Es kann ein Button zur Steuerung von Aktoren konfiguriert werden|
 |info|Es können bis zu 3 Textelemente und ein Icon zur Anzeige von Statuswerten konfiguriert werden|
-|status|Es kann eine runde Statusbar zur Anzeige von Statuswerten konfiguriert werden|
 |slider|Es kann ein Slider zu Steuerung von Aktoren konfiguriert werden|
 |image|Es kann ein Bild über eine URL angezeigt werden|
 |menu|Es kann ein DropDown-Menü zur Steuerung verschiedener Aktoren bzw. Aktorwerte konfiguriert werden|

public/CHANGELOG.md

@@ -1,3 +1,9 @@
+# v4.0.26-beta (13.03.2024)
+## Core
+- bugfix for spaces at readings 
+- local Loop to update reading directly without response from FHEM
+## Panel
+- optimization for section info
 # v4.0.25-beta (11.03.2024)
 ## Settings
 - add option for header in mobile view

src/components/OptionsMenu.vue

@@ -13,18 +13,18 @@
 
     const options = computed(() => {
         let res = [],
-            options = fhem.app.header,
+            opts = fhem.app.header,
             presets = {
                 darkMode: { name: 'darkMode', title: "%t(_app.options.darkMode)" ,icon: 'mdi-theme-light-dark' },
                 reloadPage: { name: 'reloadPage', title: "%t(_app.options.reload)", icon: 'mdi-reload' },
                 settings: { name:'settings', title: "%t(_app.options.settings)", icon: 'mdi-cogs' }
             }
 
-        if(options.showDarkMode) res.push(presets.darkMode)
-        if(options.showReloadPage) res.push(presets.reloadPage)
-        if(options.showSettings) res.push(presets.settings)
+        if(opts.showDarkMode) res.push(presets.darkMode)
+        if(opts.showReloadPage) res.push(presets.reloadPage)
+        if(opts.showSettings) res.push(presets.settings)
 
-        res.push(...options.commands)
+        res.push(...opts.commands)
 
         return res
     })
@@ -54,7 +54,7 @@
             <v-btn icon="mdi-dots-vertical" v-bind="props"></v-btn>
         </template>
 
-        <v-list nav>
+        <v-list>
             <v-list-item v-for="(option, idx) in options"
                 rounded="pill"
                 :key="idx"

src/components/PanelCard.vue

@@ -86,12 +86,14 @@
         return res
     }
 
-    function getMidSize() {
-        let leftText = infoLeft1.value.text || infoLeft2.value.text ? true : false
-        let midText = infoMid1.value.text || infoMid2.value.text ? true : false
-        let rightText = infoRight1.value.text || infoRight2.value.text ? true : false
-        
-        return !leftText && midText && !rightText ? 7 : null
+    function getInfoClass(pos) {
+        let sections = ['left1', 'left2', 'mid1', 'mid2', 'right1', 'right2'],
+            posEl = getInfo(pos),
+            leftEl = getInfo(sections[sections.indexOf(pos) - 1])
+
+            if(leftEl.text && posEl.text && !posEl.icon) return 'ml-1 text-truncate'
+        if(posEl.text) return 'text-truncate'
+        return ''
     }
 
     const infoLeft1 = computed(() => getInfo('left1'))
@@ -149,19 +151,19 @@
         <v-layout style="height:24px">
             <v-system-bar color="secondary">
                 <v-icon v-if="infoLeft1.icon" :icon="infoLeft1.icon" :color="infoLeft1.color"></v-icon>
-                <span v-if="infoLeft1.text">{{ infoLeft1.text }}</span>
-                <v-icon v-if="infoLeft2.icon" :icon="infoLeft2.icon" :color="infoLeft2.color" class="ml-2"></v-icon>
-                <span v-if="infoLeft2.text">{{ infoLeft2.text }}</span>
+                <span v-if="infoLeft1.text" :class="getInfoClass('left1')">{{ infoLeft1.text }}</span>
+                <v-icon v-if="infoLeft2.icon" :icon="infoLeft2.icon" :color="infoLeft2.color"></v-icon>
+                <span v-if="infoLeft2.text" :class="getInfoClass('left2')">{{ infoLeft2.text }}</span>
                 <v-spacer></v-spacer>
                 <v-icon v-if="infoMid1.icon" :icon="infoMid1.icon" :color="infoMid1.color"></v-icon>
-                <span v-if="infoMid1.text">{{ infoMid1.text }}</span>
-                <v-icon v-if="infoMid2.icon" :icon="infoMid2.icon" :color="infoMid2.color" class="ml-2"></v-icon>
-                <span v-if="infoMid2.text">{{ infoMid2.text }}</span>
+                <span v-if="infoMid1.text" :class="getInfoClass('mid1')">{{ infoMid1.text }}</span>
+                <v-icon v-if="infoMid2.icon" :icon="infoMid2.icon" :color="infoMid2.color"></v-icon>
+                <span v-if="infoMid2.text" :class="getInfoClass('mid2')">{{ infoMid2.text }}</span>
                 <v-spacer></v-spacer>
                 <v-icon v-if="infoRight1.icon" :icon="infoRight1.icon" :color="infoRight1.color"></v-icon>
-                <span v-if="infoRight1.text">{{ infoRight1.text }}</span>
-                <v-icon v-if="infoRight2.icon" :icon="infoRight2.icon" :color="infoRight2.color" class="ml-2"></v-icon>
-                <span v-if="infoRight2.text">{{ infoRight2.text }}</span>
+                <span v-if="infoRight1.text" :class="getInfoClass('right1')">{{ infoRight1.text }}</span>
+                <v-icon v-if="infoRight2.icon" :icon="infoRight2.icon" :color="infoRight2.color"></v-icon>
+                <span v-if="infoRight2.text" :class="getInfoClass('right2')">{{ infoRight2.text }}</span>
             </v-system-bar>
         </v-layout>
     </v-card>

src/components/PanelMainBtn.vue

@@ -55,14 +55,14 @@
             longClick = fhem.handleDefs(props.el.longClick, ['cmd', 'type'], ['', 'cmd']),
             longRelease = fhem.handleDefs(props.el.longRelease, ['cmd', 'type'], ['', 'cmd'])
 
-        if(evt === 'touchStart' || evt === 'mouseStart') {
+        if(evt === 'mouseStart') {
             btnState.timer = setTimeout(() => {
                 btnState.long = true
                 if(longClick.cmd) doCmd(longClick)
             }, 1000)
         }
 
-        if(evt === 'touchEnd' || evt === 'mouseEnd') {
+        if(evt === 'mouseEnd') {
             if(btnState.long) {
                 if(longRelease.cmd) doCmd(longRelease)
             } else {
@@ -88,8 +88,6 @@
         :variant="btn.variant"
         :disabled="btn.disabled" 
         :color="btn.color" 
-        @touchstart="btnClick('touchStart')"
-        @touchend="btnClick('touchEnd')"
         @mousedown="btnClick('mouseStart')"
         @mouseup="btnClick('mouseEnd')"
         class="my-2">

src/components/SettingsPropsItem.vue

@@ -73,7 +73,7 @@
         item-key="id">
         <template #item={index}>
             <v-row no-gutters class="py-3 align-center">
-                <v-icon icon="mdi-drag-vertical" class="dd_zone pr-5"></v-icon>
+                <v-icon icon="mdi-drag-vertical" class="dd_zone pr-5" :disabled="disable"></v-icon>
                 <v-col>
                     <v-text-field 
                         density="compact" 

src/stores/fhem.js

@@ -208,11 +208,20 @@ export const useFhemStore = defineStore('fhem', () => {
     async function request(type, cmd) {
         let params = '?XHR=1',
             options = { method: 'POST' },
+            cmdParts = [],
             result
 
         if(type !== 'token' && stat.csrf) params += '&fwcsrf=' + stat.csrf
         if(cmd) options.body = 'cmd=' + cmd
 
+        //local Loop to update reading directly without response from FHEM
+        if(/^set.*/.test(cmd)) {
+            cmdParts = cmd.split(' ')
+
+            stat.evtBuffer.push({ reading: cmdParts.slice(1, 3).join('-'), value: cmdParts[3] })
+            handleEventBuffer(true)
+        }
+
         log(4, 'Request send to FHEM.', { url: createURL(params), options })
 
         return await fetch(createURL(params), options)
@@ -397,7 +406,7 @@ export const useFhemStore = defineStore('fhem', () => {
     }
 
     //coreFunction to handle all Events in Buffer
-    function handleEventBuffer() {
+    function handleEventBuffer(localLoop) {
         let idx,
             evts = stat.evtBuffer.length
 
@@ -407,12 +416,12 @@ export const useFhemStore = defineStore('fhem', () => {
             idx = stat.panelMap.map((e) => e.reading).indexOf(evt.reading)
 
             if(idx !== -1) {
-                log(6, 'Data from FHEM handled.', evt)
+                if(!localLoop) log(6, 'Data from FHEM handled.', evt)
                 for(const path of stat.panelMap[idx].items) {
                     doUpdate(app.panelList, path, evt.value)
                 }
             } else {
-                log(8, 'Data from FHEM received.', evt)
+                if(!localLoop)  log(8, 'Data from FHEM received.', evt)
             }
         }
 
@@ -507,7 +516,7 @@ export const useFhemStore = defineStore('fhem', () => {
 
     //helperFunction called from createPanelMap for handle reading-definitions in Panels
     function getReading(devices, reading) {
-        let parts = reading.split('-'),
+        let parts = reading.trim().split('-'),
             idx = devices.map((e) => e.key).indexOf(parts[0])
 
         if(idx !== -1) {
@@ -546,7 +555,7 @@ export const useFhemStore = defineStore('fhem', () => {
                     }
                 }
             }
-        }
+        }        
     }
 
     //helperFunction called from createPanelList

www/fhemapp4/CHANGELOG.md

@@ -1,3 +1,9 @@
+# v4.0.26-beta (13.03.2024)
+## Core
+- bugfix for spaces at readings 
+- local Loop to update reading directly without response from FHEM
+## Panel
+- optimization for section info
 # v4.0.25-beta (11.03.2024)
 ## Settings
 - add option for header in mobile view