v4.0.25-beta

jemu75 · Mar 11, 2024 · a9960fb · a9960fb
1 parent aeb357d
commit a9960fb
Show file tree

Hide file tree

Showing 22 changed files with 179 additions and 172 deletions.
diff --git a/README.md b/README.md
@@ -77,7 +77,7 @@ Nachdem du Einstellungen in **FHEMApp** angepasst hast, müssen diese gespeicher
 ![](./docs/media/example_settings_4.png)*Beispiel für Einstellungen*
 
 # Kopfzeile
-In den Einstellungen für die Kopfzeile kann die Anzeige für das aktuelle Datum und Uhrzeit aktiviert werden. Die Anzeige für Datum und Uhrzeit erfolgt nur in der Desktopansicht. In der mobilen Ansicht werden Datum und Uhrzeit nicht angezeigt.
+In den Einstellungen für die Kopfzeile kann die Anzeige für das aktuelle Datum, die Uhrzeit und die aktuelle Navigationauswahl aktiviert werden. Die Anzeige für Datum und Uhrzeit erfolgt nur in der Desktopansicht. In der mobilen Ansicht werden Datum und Uhrzeit nicht angezeigt. Die Anzeige für die Navigationsauswahl erfolgt nur in der mobilen Ansicht.
 
 Weiterhin kann ein Hintergrundbild für die Kopfzeile festgelegt werden. Die Verwendung des Farbfilters mit einer [CSS Linear Gradient Definition](https://www.w3schools.com/css/css3_gradients.asp) ermöglicht ein Anpassung des Hintergrundbildes an das festgelegte Farbschema. 
 ## Optionsmenü

diff --git a/docs/media/example_settings_4.png b/docs/media/example_settings_4.png
diff --git a/docs/media/x_example_settings_4.png b/docs/media/x_example_settings_4.png
diff --git a/public/CHANGELOG.md b/public/CHANGELOG.md
@@ -1,3 +1,9 @@
+# v4.0.25-beta (11.03.2024)
+## Settings
+- add option for header in mobile view
+- optimization language settings
+## Panels
+- optimization for section info
 # v4.0.24-beta (10.03.2024)
 ## Core
 - detect darkMode from OS

diff --git a/src/App.vue b/src/App.vue
@@ -64,6 +64,7 @@
         </template>
 
         <div v-if="!mobile && fhem.app.header.showDate" class="text-h5">{{ $d(fhem.app.header.time, fhem.app.header.dateFormat) }}</div>
+        <div v-if="mobile && fhem.app.header.showTitle" class="text-h5">{{ fhem.app.header.title }}</div>
 
         <template v-slot:append>
           <v-btn v-if="fhem.app.settings.loglevel > 6" icon="mdi-information" @click="showInternals()"></v-btn>

diff --git a/src/components/AppNavigation.vue b/src/components/AppNavigation.vue
@@ -16,6 +16,8 @@
   }
 
   const loadView = (idx) => {
+    fhem.app.header.title = fhem.replacer(props.items[idx].title, '')
+
     router.push({ name: 'devices', params: { view: getPath(props.items[idx].name) }, query: router.currentRoute.value.query })
   }
 </script>

diff --git a/src/components/PanelCard.vue b/src/components/PanelCard.vue
@@ -146,31 +146,23 @@
 
         <PanelMain :main="panel.main" :levels="levels" :iconmap="panel.panel.iconmap" :devices="panel.panel.devices"></PanelMain>
 
-        <v-sheet color="secondary">
-            <v-card-text class="pa-1">
-                <v-row no-gutters>
-                    <v-col class="text-truncate text-left">
-                        <v-icon v-if="infoLeft1.icon" :icon="infoLeft1.icon" :color="infoLeft1.color" size="small"></v-icon>
-                        <span v-if="infoLeft1.text">{{ infoLeft1.text }}</span>
-                        <v-icon v-if="infoLeft2.icon" :icon="infoLeft2.icon" :color="infoLeft2.color" size="small" class="ml-2"></v-icon>
-                        <span v-if="infoLeft2.text">{{ infoLeft2.text }}</span>
-                    </v-col>
-
-                    <v-col class="text-truncate text-center" :cols="getMidSize()">
-                        <v-icon v-if="infoMid1.icon" :icon="infoMid1.icon" :color="infoMid1.color" size="small"></v-icon>
-                        <span v-if="infoMid1.text">{{ infoMid1.text }}</span>
-                        <v-icon v-if="infoMid2.icon" :icon="infoMid2.icon" :color="infoMid2.color" size="small" class="ml-2"></v-icon>
-                        <span v-if="infoMid2.text">{{ infoMid2.text }}</span>
-                    </v-col>
-
-                    <v-col class="text-truncate text-right">
-                        <v-icon v-if="infoRight1.icon" :icon="infoRight1.icon" :color="infoRight1.color" size="small"></v-icon>
-                        <span v-if="infoRight1.text">{{ infoRight1.text }}</span>
-                        <v-icon v-if="infoRight2.icon" :icon="infoRight2.icon" :color="infoRight2.color" size="small" class="ml-2"></v-icon>
-                        <span v-if="infoRight2.text">{{ infoRight2.text }}</span>
-                    </v-col>
-                </v-row>
-            </v-card-text>
-        </v-sheet>
+        <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>
+                <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>
+                <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>
+            </v-system-bar>
+        </v-layout>
     </v-card>
 </template>
diff --git a/src/components/SettingsContent.vue b/src/components/SettingsContent.vue
@@ -15,7 +15,7 @@
         newKey: null,
         editKey: false,
         lang: null,
-        showNew: false,
+        newLang: null,
         isLangValid: false,
         isKeyValid: false
     })
@@ -57,7 +57,7 @@
     })
 
     const rules = {
-        iso639code: value => /^[a-z]{2}$/.test(value) || fhem.replacer('%t(_app.settings.rules.iso639code)'),
+        iso639code: value => /^(?:[a-z]{2}|)$/.test(value) || fhem.replacer('%t(_app.settings.rules.iso639code)'),
         uniqueLang: value => languages.value.indexOf(value) === -1 || fhem.replacer('%t(_app.settings.rules.langUnique)'),
         uniqueKey: value => items.value.map((e) => e.key).indexOf(value) === -1 || fhem.replacer('%t(_app.settings.rules.keyUnique)')
     }
@@ -69,13 +69,12 @@
 
     function addKey() {
         fhem.app.config.content[languages.value[0]][settings.value.newKey] = ''
-        settings.value.newKey = null
+        editKey(settings.value.newKey)
     }
 
     function addLang() {
-        fhem.app.config.content[settings.value.lang] = {}
-        settings.value.lang = null
-        settings.value.showNew = false
+        fhem.app.config.content[settings.value.newLang] = {}
+        settings.value.newLang = null
     }
 
     function deleteKey(contentKey) {
@@ -105,89 +104,40 @@
 
         <v-list-item v-if="!settings.editKey">
             <v-row no-gutters>
-                <v-col>
-                    <v-text-field
-                        v-model="settings.search"
-                        :label="$t(preLang + 'search')"
-                        prepend-inner-icon="mdi-magnify"
-                        single-line
-                        clearable
-                        density="compact"
-                        variant="outlined"
-                        class="mr-4">
-                    </v-text-field>
-                </v-col>                
-                <v-col>
-                    <v-form v-model="settings.isKeyValid">
+                <v-col cols="12" md="6">
+                    <v-form v-model="settings.isLangValid">
                         <v-text-field 
-                            v-model="settings.newKey"    
-                            :label="$t(preLang + 'newKey')" 
-                            :rules="[rules.uniqueKey]"
-                            single-line
-                            clearable
-                            :disabled="languages.length < 1"                        
-                            density="compact" 
-                            variant="outlined"
-                            class="mr-4">
-                            <template v-slot:append>
-                                <v-btn 
-                                    variant="text" 
-                                    icon="mdi-plus" 
-                                    :disabled="languages.length < 1 || !settings.isKeyValid || !settings.newKey"
-                                    density="compact"
-                                    @click="addKey()">
-                                </v-btn>
-                            </template>
-                        </v-text-field>
-                    </v-form>
-                </v-col>
-                <v-col>
-                    <v-form v-if="settings.showNew" v-model="settings.isLangValid">
-                        <v-text-field 
-                            v-model="settings.lang"    
+                            v-model="settings.newlang"    
                             :label="$t(preLang + 'newLang')"
                             :rules="[rules.iso639code, rules.uniqueLang]"
                             single-line
                             clearable
                             density="compact" 
                             variant="outlined"
-                            append-inner-icon="mdi-help-circle" 
-                            @click:append-inner="openHelp('Sprachcodes')">
+                            class="pr-4">
                             <template v-slot:append>
                                 <v-btn
                                     variant="text" 
-                                    icon="mdi-check"
-                                    :disabled="!settings.isLangValid"
+                                    icon="mdi-plus"
+                                    :disabled="!settings.isLangValid || !settings.newLang"
                                     density="compact" 
-                                    @click="addLang()"
-                                    class="mr-2">
-                                </v-btn>
-                                <v-btn
-                                    variant="text" 
-                                    icon="mdi-cancel"
-                                    density="compact"
-                                    @click="settings.lang = null; settings.showNew = !settings.showNew">
+                                    @click="addLang()">
                                 </v-btn>
                             </template>
                         </v-text-field>
                     </v-form>
-
+                </v-col>
+
+                <v-col cols="12" md="6">
                     <v-select
-                        v-if="!settings.showNew"
                         v-model="settings.lang"
                         single-line                                
                         :items="languages"
                         :label="$t(preLang + 'title')"                                                
                         density="compact"
-                        variant="outlined">
+                        variant="outlined"
+                        class="pr-4">
                         <template v-slot:append>
-                            <v-btn
-                                variant="text" 
-                                icon="mdi-plus"
-                                density="compact"                            
-                                @click="settings.showNew = !settings.showNew; settings.lang = null"
-                                class="mr-2">
-                            </v-btn>
                             <v-btn
                                 variant="text" 
                                 icon="mdi-delete"
@@ -199,6 +149,44 @@
                     </v-select>
                 </v-col>
             </v-row>
+            <v-row no-gutters>
+                <v-col cols="12" md="6">
+                    <v-text-field
+                        v-model="settings.search"
+                        :label="$t(preLang + 'search')"
+                        prepend-inner-icon="mdi-magnify"
+                        single-line
+                        clearable
+                        density="compact"
+                        variant="outlined"
+                        class="pr-4">
+                    </v-text-field>
+                </v-col>                
+                <v-col cols="12" md="6">
+                    <v-form v-model="settings.isKeyValid">
+                        <v-text-field 
+                            v-model="settings.newKey"    
+                            :label="$t(preLang + 'newKey')" 
+                            :rules="[rules.uniqueKey]"
+                            single-line
+                            clearable
+                            :disabled="languages.length < 1"                        
+                            density="compact" 
+                            variant="outlined"
+                            class="pr-4">
+                            <template v-slot:append>
+                                <v-btn 
+                                    variant="text" 
+                                    icon="mdi-plus" 
+                                    :disabled="languages.length < 1 || !settings.isKeyValid || !settings.newKey"
+                                    density="compact"
+                                    @click="addKey()">
+                                </v-btn>
+                            </template>
+                        </v-text-field>
+                    </v-form>
+                </v-col>
+            </v-row>
         </v-list-item>
 
         <v-list-item v-if="!settings.editKey">

diff --git a/src/components/SettingsHeader.vue b/src/components/SettingsHeader.vue
@@ -54,7 +54,7 @@
             :label="$t(preLang + 'imageUrl')"
             v-model="fhem.app.config.header.imageUrl"/>
         </v-col>
-        <v-col cols="12" lg="5" class="pt-3 pr-3">
+        <v-col cols="12" lg="4" class="pt-3 pr-3">
           <v-text-field 
             density="compact" 
             variant="outlined" 
@@ -76,6 +76,12 @@
             :label="$t(preLang + 'showDate')"
             v-model="fhem.app.config.header.showDate"/>
         </v-col>
+        <v-col cols="6" lg="" class="pt-1">
+          <v-checkbox
+            :hint="$t(preLang + 'showTitleHint')"              
+            :label="$t(preLang + 'showTitle')"
+            v-model="fhem.app.config.header.showTitle"/>
+        </v-col>
       </v-row>
     </v-list-item>
     <v-divider></v-divider>

diff --git a/src/locales/de.json b/src/locales/de.json
@@ -13,6 +13,8 @@
                 "showTimeHint": "Anzeige der Uhrzeit in der Kopfzeile",
                 "showDate": "Datum",
                 "showDateHint": "Anzeige des Datums in der Kopfzeile",
+                "showTitle": "Navigation",
+                "showTitleHint": "Anzeige des aktuellen Navigationspunktes in der Kopfzeile",
                 "optionsTitle":"Optionsmenü",
                 "showDarkMode": "Tag/Nacht Modus",
                 "showDarkModeHint": "",

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -13,6 +13,8 @@
                 "showTimeHint": "Show time in the header",
                 "showDate": "Date",
                 "showDateHint": "Show date in the header",
+                "showTitle": "Navigation",
+                "showTitleHint": "Show navigationpoint in the header",
                 "optionsTitle":"Optionsmenu",
                 "showDarkMode": "Day/Night mode",
                 "showDarkModeHint": "",

diff --git a/src/stores/fhem.js b/src/stores/fhem.js
@@ -28,11 +28,13 @@ export const useFhemStore = defineStore('fhem', () => {
             colors: {}
         },
         header: {
+            title: null,
             time: new Date(),
             timeFormat: { hour: '2-digit', minute: '2-digit' },
             dateFormat: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
             showTime: false,
             showDate: false,
+            showTitle: true,
             showHomeBtn: false,
             imageUrl: null,
             imageGradient: null,

diff --git a/www/fhemapp4/CHANGELOG.md b/www/fhemapp4/CHANGELOG.md
@@ -1,3 +1,9 @@
+# v4.0.25-beta (11.03.2024)
+## Settings
+- add option for header in mobile view
+- optimization language settings
+## Panels
+- optimization for section info
 # v4.0.24-beta (10.03.2024)
 ## Core
 - detect darkMode from OS

diff --git a/www/fhemapp4/assets/DevicesView-d3d3a92f.js → www/fhemapp4/assets/DevicesView-f37b84af.js b/www/fhemapp4/assets/DevicesView-d3d3a92f.js → www/fhemapp4/assets/DevicesView-f37b84af.js