Merge pull request #141 from jemu75/dev-v4

v4.7.0

README.md

@@ -493,6 +493,7 @@ Zeigt ein Bild an.
 |value||siehe Parameter [value](#konfiguration-der-elemente)|
 |source||URL die auf ein Bild verweist. Bei direkter Eingabe von URLs müssen Doppelpunkte entsprechend ersetzt werden. (siehe auch [Ersetzungen](#ersetzungen)) [string]|
 |height||legt die absolute Höhe des Bildes in Pixeln fest [string]|
+|lazyload|true|schaltet das dynamische Nachladen aus bzw. ein [boolean]|
 ### Level Element IFrame iframe
 Bettet ein iframe ein.
 
@@ -501,6 +502,7 @@ Bettet ein iframe ein.
 |reading||siehe Parameter [reading](#konfiguration-der-elemente)|
 |value||siehe Parameter [value](#konfiguration-der-elemente)|
 |source||URL deren Inhalt im Panel angezeigt werden soll. Bei direkter Eingabe von URLs müssen Doppelpunkte entsprechend ersetzt werden. (siehe auch [Ersetzungen](#ersetzungen)) [string]|
+|lazyload|true|schaltet das dynamische Nachladen aus bzw. ein [boolean]|
 ### Level Element Menu btn
 Zeigt einen Button an, der beim Klicken ein DropDown-Menü öffnet. Wenn dieses Element nicht definiert ist wird ein Standard-Button angezeigt, sobald mindestens ein [Menüeintrag](#level-element-menu-menu) definiert ist.
 

public/CHANGELOG.md

@@ -1,3 +1,14 @@
+# 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

src/components/PanelMainChart.vue

@@ -81,7 +81,7 @@
                     logData = await fhem.request('text', cmd.join(' '))
                     
                     data = []
-                    rows = logData.split('\n')
+                    if(logData) rows = logData.split('\n')
 
                     if(rows.length > 0) {
                         for(const row of rows) {

src/components/PanelMainIframe.vue

@@ -14,8 +14,10 @@
     const extContent = ref()
 
     const content = computed(() => {
-        let res = {
-            source: fhem.handleDefs(props.el.iframe, ['source'],['']).source,
+        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
         }
@@ -30,7 +32,7 @@
             :src="content.source"
             :width="content.width"
             :height="content.height"
-            loading="lazy"
+            :loading="content.lazy"
             style="border:none;">
         </iframe>
     </div>

src/components/PanelMainImage.vue

@@ -14,7 +14,7 @@
     const loaded = ref(false)
 
     const image = computed(() => {
-        return fhem.handleDefs(props.el.image, ['source','height'],['', 'auto'])
+        return fhem.handleDefs(props.el.image, ['source','height', 'lazyload'],['', 'auto', true])
     })
 
     const contentSize = computed(() => {
@@ -26,7 +26,7 @@
 </script>
 
 <template>
-    <v-skeleton-loader v-if="!loaded" type="image">
+    <v-skeleton-loader v-if="image.lazyload && !loaded" type="image">
     </v-skeleton-loader>
     <v-img
         :src="image.source"

src/components/SettingsPropsMain.vue

@@ -65,12 +65,12 @@
             { type: 'defs', required: false, prop: 'size', def: 'reading:value:size', help: 'level-element-size', assist: 'props' }
         ],
         image: [
-            { type: 'defs', required: false, prop: 'image', def: 'reading:value:source:height', help: 'level-element-image-image', assist: 'props' },
+            { type: 'defs', required: false, prop: 'image', def: 'reading:value:source:height:lazyload', help: 'level-element-image-image', assist: 'props' },
             { type: 'defs', required: false, prop: 'divider', def: 'reading:value:divider', help: 'level-element-divider', assist: 'props' },
             { type: 'defs', required: false, prop: 'size', def: 'reading:value:size', help: 'level-element-size', assist: 'props' }
         ],
         iframe: [
-            { type: 'defs', required: false, prop: 'iframe', def: 'reading:value:source', help: 'level-element-iframe-iframe', assist: 'props' },
+            { type: 'defs', required: false, prop: 'iframe', def: 'reading:value:source:lazyload', help: 'level-element-iframe-iframe', assist: 'props' },
             { type: 'defs', required: false, prop: 'divider', def: 'reading:value:divider', help: 'level-element-divider', assist: 'props' },
             { type: 'defs', required: false, prop: 'size', def: 'reading:value:size', help: 'level-element-size', assist: 'props' }
         ],

src/locales/de.json

@@ -16,7 +16,7 @@
                 "headLineRouteTitle": "aktuelle Seite",
                 "headLineRouteSubTitle": "Zeigt den aktuell ausgewählte Seite in der mobilen Ansicht in der Mitte der Kopfzeile an",
                 "headLineNavigationTitle": "Navigationsmenü ausblenden",
-                "headLineNavigationSubTitle": "Zeigt den Buttom zum Einblenden des Navigaitonsmenü in der Desktopansicht an",
+                "headLineNavigationSubTitle": "Zeigt den Buttom zum Einblenden des Navigationsmenü in der Desktopansicht an",
                 "darkMode": "Farbschema",
                 "darkModeTitle": "DarkMode über FHEM",
                 "darkModeSubTitle": "Schaltet in das dunkle Farbschema um, wenn der Wert des FHEM Reading zutrifft",

src/stores/fhem.js

@@ -774,9 +774,9 @@ export const useFhemStore = defineStore('fhem', () => {
     }
 
     //coreFunction inital Loading from FHEM
-    async function initialLoad() {
+    async function initialLoad(refresh) {
         let deviceList = [],
-            panelList = JSON.parse(JSON.stringify(app.panelList)),
+            panelList = refresh ? app.panelList : JSON.parse(JSON.stringify(app.panelList)),
             device,
             res,
             parts,
@@ -826,7 +826,7 @@ export const useFhemStore = defineStore('fhem', () => {
             if(item.task) taskList.push({ idx: mapIdx, value: val })
         }
 
-        app.panelList = panelList
+        if(!refresh) app.panelList = panelList
 
         for(const item of taskList) handleInternalTask(stat.panelMap[item.idx], item.value)
 
@@ -1114,33 +1114,33 @@ export const useFhemStore = defineStore('fhem', () => {
     }
 
     //coreFunction create a new Session
-    async function createSession(connect) {
+    async function createSession(refresh) {
         let res = true
         let tid = thread()
 
-        log(4, connect ? 'Create Session...' : 'Refresh Session...')
+        log(4, refresh ? 'Refresh Session...' : 'Create Session...')
 
         app.isReady = false
 
-        if(connect) stat.conn = null
-        if(res && connect) res = await getToken()
-        if(res && connect) res = openEventWatcher()
+        stat.conn = null
+        if(res) res = await getToken()
+        if(res) res = openEventWatcher()
         if(res) res = await timeSync()
-        if(res) res = await loadConfig()
-        if(res) res = await loadTemplates()
-        if(res) res = createPanelList()
-        if(res) res = await initialLoad()
-        if(res) res = createNavigation()
-        if(res) res = loadPanelView()
+        if(res && !refresh) res = await loadConfig()
+        if(res && !refresh) res = await loadTemplates()
+        if(res && !refresh) res = createPanelList()
+        if(res) res = await initialLoad(refresh)
+        if(res && !refresh) res = createNavigation()
+        if(res && !refresh) res = loadPanelView()
 
         if(!res) {
             log(3, 'FHEMApp launching failed.')
         } else {            
             app.message = false
             app.isReady = true
-            log(1, connect ? 'FHEMApp launched.' : 'Session refreshed.')
+            log(1, refresh ? 'Session refreshed.' : 'FHEMApp launched.')
 
-            if(connect && app.noConfig) {
+            if(!refresh && app.noConfig) {
                 await router.push({ name: 'settings', query: router.currentRoute.value.query })
                 log(3, 'No Config handling', null, 'noConfig')
             }
@@ -1164,7 +1164,7 @@ export const useFhemStore = defineStore('fhem', () => {
 
             if(res.langChanged) i18n.locale.value = app.settings.lang
             if(res.darkChanged) changeDarkMode(app.settings.dark === '0' ? 'light' : 'dark')
-            if(res.connChanged || !app.isReady) return createSession(true)
+            if(res.connChanged || !app.isReady) return createSession()
             if(res.configChanged) return location.reload()
             if(res.routeChanged) loadPanelView()
         })

src/views/DevicesView.vue

@@ -34,6 +34,8 @@
   })
 
   function getCols(route, navObj) {
+    if(!route) return null
+    
     if(/=maximized$/.test(route)) return 1
     
     let path = route.split('->'),

www/fhemapp4/CHANGELOG.md

@@ -1,4 +1,12 @@
+# 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
 # v4.6.1 (27.12.2024)
+## Slider
 - Bugfix for setting Height of vertical slider
 # v4.6.0 (21.12.2024)
 ## Panel