Merge pull request #132 from jemu75/dev-v4

v4.5.0

README.md

@@ -220,7 +220,7 @@ Ersetzungen bieten die Möglichkeit, Werte innerhalb von Element-Definitionen zu
 |`state-ts::%d(time)`|2023-12-17 17:53:32|17:53:32|abhängig vom Sprachschema|
 |`state-ts::%d(date)`|2023-12-17 17:53:32|17.12.2023|abhängig vom Sprachschema|
 |`state-ts::%d({ "weekday"\: "long" })`|2023-12-17 17:53:32|Sonntag|abhängig vom Sprachschema|
-|`state-ts::%d({ "diff"\: { "days"\: true, "hours"\: true, "minutes"\: true, "seconds"\: true, "daysSuffix"\: " Tag(e) ", "hoursSuffix"\: "\:", "minutesSuffix"\: "\:", "secondsSuffix"\: " " } })`||10 Tag(e) 8:07:34|auf korrekte JSON Notation achten und zusätzlich Doppelpunkte escapen|
+|`state-ts::%d({ "diff"\: { "days"\: "nozero", "hours"\: "numeric", "minutes"\: true, "seconds"\: true, "daysSuffix"\: " Tag(e) ", "hoursSuffix"\: "\:", "minutesSuffix"\: "\:", "secondsSuffix"\: " " } })`||10 Tag(e) 8:07:34|auf korrekte JSON Notation achten und Doppelpunkte escapen|
 |`state::%t(%s)`|on|an|wenn unter [Sprachen](#sprachen) für die Variable `on` im deutschen Sprachschema `an` hinterlegt wurde|
 |`state::%r(%s,_, )`|alle_offen|alle offen|ersetzt alle Unterstriche durch Leerzeichen|
 |`temp::Temperatur\: %n(1)°C`|18.7|Temperatur: 18,7°C|
@@ -241,8 +241,6 @@ Für jede Vorlage muss mindestens ein *devicekey* festgelegt werden.
 |key|eindeutiger Schlüssel, der für Element-Definitionen an Stelle von festen FHEM-Devicenamen verwendet werden soll|
 |description|kurze Beschreibung des jeweiligen FHEM Devicetypen|
 
-
-
 ### Element devices
 Liste der FHEM-Devices, die mit dem Panel verknüpft sind. Es muss mindestens ein FHEM-Device mit einem Panel verknüpft werden. (siehe auch [neues Panel erstellen](#neues-panel-erstellen))
 
@@ -663,8 +661,24 @@ Das Navigationsmenü von **FHEMApp** kann individuell angepasst werden. So ist e
 
 Die alternativen Beschriftungen können somit auch für die Erstellung mehrsprachiger Instanzen von **FHEMApp** verwendet werden. Hierbei kann die Ersetzung `%t(...)` (siehe auch [Ersetzungen](#ersetzungen)) eingesetzt werden.
 
+Für jeden Navigationspunkt können weitere Optionen festgelegt werden. 
+- untergeordnete Navigationspunkte in **kompakter Darstellung**
+- alphabetische **Sortierung** untergeordneter Navigationspunkte
+- **Trennlinie** unterhalb des Navigationspunktes
+- Anzahl der **Spalten** für die Anzeige der Panels unter dem Navigationspunkt
+
+|Device|Code|Range|Spalten (Default)|
+|---|---|---|---|
+|Extra small|xs|<660px|1|
+|Small|sm|600px - 960px|2|
+|Medium|md|960px - 1264px|2|
+|Large|lg|1264px - 1904px|3|
+|Exra large|xl|1904px - 2560px|3|
+|Extra wide|xxl|>2560px|4|
+
 ![](./docs/media/example_settings_5.png)
 <br>*Beispiel für ein angepasstes Navigationsmenü*
+
 # Farben
 In **FHEMApp** können altrnativ zu hexadezimalen Farbangaben auch  Farbvariablen eingesetzt werden. Damit können Themen erstellt und Farben schnell angepasst werden. Grundsätzlich steht ein helles und ein dunkles Farbschema für jede Instanz von **FHEMApp** zur Verfügung. (siehe auch [Farbschema](#farbschema))
 

public/CHANGELOG.md

@@ -1,3 +1,10 @@
+# v4.5.0 (08.12.2024)
+## Core
+- new settings for parameter diff into replacer %d (nozero and numeric)
+## Panels
+- Panels are displayed without gaps if they are of different heights
+## Slider
+- Bugfix for setting Height of vertical slider
 # v4.4.1 (17.11.2024)
 ## Core
 - bugfix for replacer %d

src/components/PanelMainSlider.vue

@@ -11,6 +11,10 @@
 
     const fhem = useFhemStore()
 
+    const sliderHeight = ref(props.height + (/px/.test(props.height) ? '' : 'px'))
+
+    console.log(props.height)
+
     const sliderVal = ref()
 
     function setSliderVal(val) {
@@ -60,11 +64,17 @@
         hide-details
         thumb-label
         @update:modelValue="doCmd($event)"
-        >
+        class="py-2">
         <template v-slot:thumb-label="{ modelValue }">
             <div class="text-white">
                 {{ modelValue }}
             </div>
         </template>
     </v-slider>
-</template>
+</template>
+
+<style>    
+    .v-slider.v-input--vertical > .v-input__control {
+        min-height: v-bind(sliderHeight)
+    }
+</style>

src/components/SettingsNavigation.vue

@@ -8,14 +8,29 @@
     const { mobile } = useDisplay()
     const preLang = '_app.settings.navigation.'
 
+	const colDefs = [
+		{ name: "xs", label: "xs", placeholder: "1" },
+		{ name: "sm", label: "sm", placeholder: "2" },
+		{ name: "md", label: "md", placeholder: "2" },
+		{ name: "lg", label: "lg", placeholder: "3" },
+		{ name: "xl", label: "xl", placeholder: "3" },
+		{ name: "xxl", label: "xxl", placeholder: "4" }
+	]
+
 	const newItem = ref({
 		name: '',
 		title: '',
 		icon: '',
 		group: [],
 		groupAsChips: false,
 		sort: false,
-		divider: false
+		divider: false,
+		xxl: null, 
+		xl: null, 
+		lg: null, 
+		md: null, 
+		sm: null, 
+		xs: null	
 	})
 
 	const items = ref(fhem.app.config.navigation)
@@ -59,7 +74,13 @@
 			group: [],
 			groupAsChips: false,
 			sort: false,
-			divider: false
+			divider: false,
+			xxl: null, 
+			xl: null, 
+			lg: null, 
+			md: null, 
+			sm: null, 
+			xs: null
 		}
 }
 </script>
@@ -176,6 +197,22 @@
 													<v-switch v-model="items[index].divider" color="info" hide-details></v-switch>
 												</template>
 											</v-list-item>
+
+											<v-list-item :title="$t(preLang + 'optionsRowsTitle')" :subtitle="$t(preLang + 'optionsRows')">
+												<v-row class="mt-1">
+													<v-col v-for="col of colDefs" :key="col.name">
+														<v-text-field
+															v-model="items[index][col.name]"
+															variant="outlined"
+															density="compact"
+															:label="col.label"
+															:placeholder="col.placeholder"
+															persistent-placeholder
+															hide-details>
+														</v-text-field>
+													</v-col>
+												</v-row>
+											</v-list-item>
 										</v-list>
 										<v-card-actions>
 											<v-spacer></v-spacer>

src/locales/de.json

@@ -55,7 +55,9 @@
                 "optionsSortTitle": "Sortierung",
                 "optionsSort": "Sortiert untergeordnete Navigationspunkte aufsteigend",
                 "optionsDividerTitle": "Trennlinie",
-                "optionsDivider": "Zeigt eine Trennlinie unterhalb des Navigationspunktes"
+                "optionsDivider": "Zeigt eine Trennlinie unterhalb des Navigationspunktes",
+                "optionsRowsTitle": "Spalten",
+                "optionsRows": "Legt die Anzahl der Spalten für Panels abhängig vom Display fest"
             },
             "props": {
                 "panel": "Allgemein",                

src/locales/en.json

@@ -55,7 +55,9 @@
                 "optionsSortTitle": "Sorting",
                 "optionsSort": "Sorts subordinate navigation items in ascending order",
                 "optionsDividerTitle": "Divider",
-                "optionsDivider": "Shows a dividing line below the navigation point"
+                "optionsDivider": "Shows a dividing line below the navigation point",
+                "optionsRowsTitle": "Columns",
+                "optionsRows": "Defines the number of columns for panels depending on the display"
             },
             "props": {
                 "panel": "General",                

src/stores/fhem.js

@@ -2,11 +2,12 @@ import { reactive } from 'vue'
 import { defineStore, storeToRefs } from 'pinia'
 import router from '@/router'
 import { useI18n } from 'vue-i18n'
-import { useTheme } from 'vuetify'
+import { useTheme, useDisplay } from 'vuetify'
 
 export const useFhemStore = defineStore('fhem', () => {
     const i18n = useI18n()
     const theme = useTheme()
+    const display = useDisplay()
 
     const app = reactive({
         settings: {
@@ -43,7 +44,7 @@ export const useFhemStore = defineStore('fhem', () => {
             showSettings: false,
             commands: [],
             darkModeOverFhem: null,
-            defaultRoute: null
+            defaultRoute: null            
         },
         fhemDevice: null,
         panelView: [],
@@ -68,6 +69,8 @@ export const useFhemStore = defineStore('fhem', () => {
         noConfig: false,
         isLoaded: false,
         isReady: false,
+        display: display.name,
+        viewCols: { xxl: 4, xl: 3, lg: 3, md: 2, sm: 2, xs: 1 },
         message: false,
         currentView: null,
         settingsTab: null,
@@ -805,7 +808,12 @@ export const useFhemStore = defineStore('fhem', () => {
         let diffHours = options.hours ? Math.floor(diffMs / (1000 * 60 * 60)) - (diffDays * 24) : 0
         let diffMinutes = options.minutes ? Math.floor(diffMs / (1000 * 60)) - (diffDays * 24 * 60) - (diffHours * 60) : 0
         let diffSeconds = options.seconds ? Math.floor(diffMs / 1000) - (diffDays * 24 * 60 * 60) - (diffHours * 60 * 60) - (diffMinutes * 60): 0 
-
+
+        let showDay = /nozero/.test(options.days) ? false : true
+        let showHour = /nozero/.test(options.hours) ? false : true
+        let showMinute = /nozero/.test(options.minutes) ? false : true
+        let showSecond = /nozero/.test(options.seconds) ? false : true
+
         if(/%t\(.*\)/.test(options.daysSuffix)) {
             parts = /%t\(.*\)/.exec(options.daysSuffix)
             options.daysSuffix.replace(parts[0], i18n.t(parts[0].slice(3, -1)))
@@ -826,10 +834,14 @@ export const useFhemStore = defineStore('fhem', () => {
             options.secondsSuffix.replace(parts[0], i18n.t(parts[0].slice(3, -1)))
         }
 
-        if(options.days && diffDays > 0) res.push(diffDays, options.daysSuffix || ' Tag(e) ')
-        if(options.hours) res.push(diffHours, options.hoursSuffix || ' Stunde(n) ')
-        if(options.minutes) res.push(options.hoursSuffix === ':' && diffMinutes < 10 ? 0 : '', diffMinutes, options.minutesSuffix || ' Minute(n) ')
-        if(options.seconds) res.push(options.minutesSuffix === ':' && diffSeconds < 10 ? 0 : '', diffSeconds, options.secondsSuffix || ' Sekunde(n) ')
+        if(!/numeric/.test(options.hours)) diffHours = (diffHours < 10 ? '0' : '') + diffHours
+        if(!/numeric/.test(options.minutes)) diffMinutes = (options.hoursSuffix === ':' && diffMinutes < 10 ? '0' : '') + diffMinutes
+        if(!/numeric/.test(options.seconds)) diffSeconds = (options.minutesSuffix === ':' && diffSeconds < 10 ? '0' : '') + diffSeconds
+
+        if(options.days && showDay) res.push(diffDays, options.daysSuffix || ' Tag(e) ')
+        if(options.hours && showHour) res.push(diffHours, options.hoursSuffix || ' Stunde(n) ')
+        if(options.minutes && showMinute) res.push(diffMinutes, options.minutesSuffix || ' Minute(n) ')
+        if(options.seconds && showSecond) res.push(diffSeconds, options.secondsSuffix || ' Sekunde(n) ')
 
         return res.join('').trim()
     }

src/views/DevicesView.vue

@@ -7,39 +7,62 @@
   const fhem = useFhemStore()
 
   const view = computed(() => {
-    let res = []
+    let items = [],
+        res = {},        
+        colIdx = 1
 
     if(fhem.app.panelMaximized) {      
-      res.push(fhem.app.panelMaximized)
+      items.push(fhem.app.panelMaximized)
     } else {
       for(const idx of fhem.app.panelView) {
-        if(fhem.handleDefs(fhem.app.panelList[idx].panel.show, ['show'], [true]).show) res.push(fhem.app.panelList[idx])
+        if(fhem.handleDefs(fhem.app.panelList[idx].panel.show, ['show'], [true]).show) items.push(fhem.app.panelList[idx])
       }
 
-      res.sort((a,b) => (s(a) > s(b)) ? 1 : ((s(b) > s(a)) ? -1 : 0)) 
+      items.sort((a,b) => (s(a) > s(b)) ? 1 : ((s(b) > s(a)) ? -1 : 0)) 
+    }
+
+    for(const item of items) {
+      if(!res[colIdx]) res[colIdx] = []
+      res[colIdx].push(item)
+      colIdx = colIdx === cols.value ? 1 : colIdx + 1
     }
 
     return res
   })
 
   const cols = computed(() => {
-    let res = { cols: 12, sm: 6, lg: 4 }
+    return getCols(fhem.app.currentView, fhem.app.navigation) || fhem.app.viewCols[fhem.app.display]
+  })
 
-    if(/=maximized$/.test(fhem.app.currentView)) res = { cols: 12 }
+  function getCols(route, navObj) {
+    if(/=maximized$/.test(route)) return 1
+    
+    let path = route.split('->'),
+        item = { name: path[0] },
+        idx = navObj.map((e) => e.name).indexOf(item.name),
+        res
 
-    return res
-  })
+    if(idx !== -1) Object.assign(item, navObj[idx])
+    if(path.length > 1) res = getCols(path.slice(1).join('->'), item.group || [])
+    
+    if(idx !== -1 && !res) res = item[fhem.app.display]
+
+    return parseInt(res)
+  }
 
   function s(obj) {
     return fhem.handleDefs(obj.panel.sortby, ['sortby'], [null]).sortby || '999'
   }
 </script>
 
-
 <template>
   <v-row no-gutters>
-    <v-col :cols="cols.cols" :sm="cols.sm" :lg="cols.lg" v-for="(panel) of view" :key="panel.name" class="pa-1">
-      <PanelCard :panel="panel"/>    
+    <v-col v-for="col of cols" :key="col">
+      <v-row no-gutters>
+        <v-col cols="12" v-for="(panel) of view[col]" :key="panel.name" class="pa-1">
+          <PanelCard :panel="panel"/>
+        </v-col>
+      </v-row>
     </v-col>
   </v-row>
 </template>

www/fhemapp4/CHANGELOG.md

@@ -1,3 +1,10 @@
+# v4.5.0 (08.12.2024)
+## Core
+- new settings for parameter diff into replacer %d (nozero and numeric)
+## Panels
+- Panels are displayed without gaps if they are of different heights
+## Slider
+- Bugfix for setting Height of vertical slider
 # v4.4.1 (17.11.2024)
 ## Core
 - bugfix for replacer %d