Merge pull request #142 from jemu75/dev-v4

v4.8.0

README.md

@@ -417,6 +417,7 @@ Legt die Breite der Spalte fest.
 Zeigt einen Button an, der folgendes ermöglicht. Das Auslösen der Befehle wird in [click](#level-element-button-click), [longClick](#level-element-button-longclick) und [longRelease](#level-element-button-longrelease) konfiguriert.
 - das Senden von FHEM Kommandos
 - das Aufrufen von Navigationspunkten in **FHEMApp**
+- das Aufrufen eines Panels als Popup in **FHEMApp**
 - das Aufrufen von beliebigen URLs
 
 |Parameter|Default|Beschreibung|
@@ -447,13 +448,14 @@ Legt den Befehl fest, der bei kurzem Drücken des Button ausgeführt wird.
 |reading||siehe Parameter [reading](#konfiguration-der-elemente)|
 |value||siehe Parameter [value](#konfiguration-der-elemente)|
 |cmd|| FHEM Kommando, Route oder Link [string]|
-|type|cmd| cmd, route, url [string]|
+|type|cmd| cmd, route, popout, url [string]|
 
 |Beispiel|Erklärung|
 |---|---|
 |`::set switch on`|sendet den Befehl `set switch on` an FHEM. Dabei wird im Panel unter dem [Element devices](#element-devices) nach dem Schlüssel `switch` gesucht und falls vorhanden, durch den Name des FHEM Devices ersetzt. Kann kein entsprechender Schlüssel gefunden werden, so wird der Befehl unverändert an FHEM gesendet. Es können auch mehrere Befehle (durch Semikolon getrennt) an FHEM gesendet werden.|
 |`::home:route`|wechselt zum Navigationspunkt `home` in **FHEMApp**. Die angegebene Route muss existieren und der Route in der URL (.../devices/{route}/?...) entsprechen|
 |`::panel=licht_bad:route`|wechselt zum Panel `licht_bad` in **FHEMApp**. Das angegebene Panel muss existieren|
+|`::panel=licht_bad width=300px:popout`|öffnet das Panel mit dem Name `licht_bad` als Popup in **FHEMApp** Das angegebene Panel muss existieren. Zusätzlich kann `width=`verwendet werden, um die Breite des Popup festzulegen| 
 |`::https\\://fhem.de:url`|wechsel direkt zu der URL `https://fhem.de`. Bei direkter Eingabe von URLs müssen Doppelpunkte entsprechend ersetzt werden. (siehe auch [Ersetzungen](#ersetzungen))|
 |`cam-link::%s:url`|wechsel direkt zu der URL, die im Device `cam` im Reading `link` hinterlegt ist|
 ### Level Element Button longClick

public/CHANGELOG.md

@@ -1,3 +1,8 @@
+# v4.8.0 (11.01.2025)
+## Button
+- new command type popout
+## iFrame
+- bugfix in case of resizing panels
 # v4.7.0 (05.01.2025)
 ## Core
 - Optimization of Reconnect and Refreshing Session

src/components/PanelMainBtn.vue

@@ -48,6 +48,13 @@
             
             if(obj.type === 'route') router.push({ name: 'devices', params: { view: obj.cmd }, query: router.currentRoute.value.query })
             if(obj.type === 'url') window.open(obj.cmd, '_self')
+            if(obj.type === 'popout') {
+                let name = /panel=/.test(obj.cmd) ? obj.cmd.split('panel=')[1].split(' ')[0] : -1,
+                    width = /width=/.test(obj.cmd) ? obj.cmd.split('width=')[1].split(' ')[0] : '400px',
+                    panel = fhem.app.panelList.map((e) => e.name).indexOf(name)
+                
+                if(panel !== -1) fhem.app.popOutList.push({ show: true, width, panel })
+            }
         }
     }
 

src/components/PanelMainIframe.vue

@@ -1,5 +1,5 @@
 <script setup>
-    import { computed, ref } from 'vue'
+    import { computed, ref, onMounted } from 'vue'
     import { useFhemStore } from '@/stores/fhem'
 
     const props = defineProps({
@@ -12,26 +12,37 @@
     const fhem = useFhemStore()
 
     const extContent = ref()
+    const width = ref()
+    const height = ref(/=maximized$/.test(fhem.app.currentView) ? (window.innerHeight - 170) : props.height)
 
     const content = computed(() => {
         let src = fhem.handleDefs(props.el.iframe, ['source', 'lazyload'],['', true]),
             res = {
-            source: src.source,
-            lazy: src.lazyload ? 'lazy' :'eager',
-            width: extContent.value && extContent.value.scrollWidth ? extContent.value.scrollWidth : 0,
-            height: /=maximized$/.test(fhem.app.currentView) ? (window.innerHeight - 170) : props.height
-        }
+                source: src.source,
+                lazy: src.lazyload ? 'lazy' :'eager'
+            }
 
         return res
     })
+
+    function refreshIframe() {
+        if(extContent.value) width.value = extContent.value.scrollWidth
+    }
+
+    onMounted(() => {
+        window.addEventListener('resize', refreshIframe)
+        refreshIframe()
+    })
+        
 </script>
 
 <template>
-    <div ref="extContent">
+    <div>
+        <div ref="extContent"></div>
         <iframe 
             :src="content.source"
-            :width="content.width"
-            :height="content.height"
+            :width="width"
+            :height="height"
             :loading="content.lazy"
             style="border:none;">
         </iframe>

src/stores/fhem.js

@@ -1,5 +1,5 @@
 import { reactive } from 'vue'
-import { defineStore, storeToRefs } from 'pinia'
+import { defineStore } from 'pinia'
 import router from '@/router'
 import { useI18n } from 'vue-i18n'
 import { useTheme, useDisplay } from 'vuetify'

www/fhemapp4/CHANGELOG.md

@@ -1,10 +1,17 @@
+# v4.8.0 (11.01.2025)
+## Button
+- new command type popout
 # v4.7.0 (05.01.2025)
 ## Core
 - Optimization of Reconnect and Refreshing Session
 ## Image
 - new Option for disabling lazy loading
 ## iFrame
 - new Option for disabling lazy loading
+## Chart
+- Bugfix if no LogData from FHEM received
+## Devices View
+- Bugfix if no route is defined
 # v4.6.1 (27.12.2024)
 ## Slider
 - Bugfix for setting Height of vertical slider