v4.0.35-beta

jemu75 · Apr 10, 2024 · 0ee7c27 · 0ee7c27
1 parent 98357d3
commit 0ee7c27
Show file tree

Hide file tree

Showing 20 changed files with 331 additions and 207 deletions.
diff --git a/README.md b/README.md
@@ -58,7 +58,7 @@ Diese sind u.a. beim Betrieb von **FHEMApp** auf einem separaten Web-Server nöt
 |server|url bzw. IP-Adresse unter der FHEM erreichbar ist|fhem|
 |port|Port über den FHEM erreichbar ist|8083|
 |path|Pfad der FHEM Installation|fhem|
-|dark|Festlegen ob **FHEMApp** im dunklen Farbschema geöffnet wird|1
+|dark|Festlegen ob **FHEMApp** im dunklen Farbschema geöffnet wird (siehe auch [Farbschema](#farbschema))|1
 |lang|Sprache in der **FHEMApp** geöffnet wird|de, en, ...|
 |xhr|Umschaltung auf Longpoll wenn Browser kein websocket unterstützt|1|
 |loglevel|Detailgrad der Protokollierung für Fehleranalyse über die Browserkonsole. Ab dem loglevel 7 wird die Kopfzeile von **FHEMApp** umgeschaltet und ein Infosymbol angzeigt. Bei Klick auf das Infosymbol werden weitere Systeminformationen von **FHEMApp** angezeigt. (*1=status, 2=error, 3=warnings, 4=infos, 5=all request to fhem, 6=received events from fhem, 7=details, 8=all received events from FHEM*)|1...8|
@@ -76,10 +76,30 @@ Nachdem du Einstellungen in **FHEMApp** angepasst hast, müssen diese gespeicher
 
 ![](./docs/media/example_settings_4.png)*Beispiel für Einstellungen*
 
-# Kopfzeile
+# Allgemeine Einstellungen
+
+## Kopfzeile
 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. 
+
+## Farbschema
+In **FHEMApp** werden zwei Farbschemen (dunkel und hell) unterstützt. Die einzelnen Farben können für beide Farbschemen wie im Abschnitt [Farben](#farben) beschrieben, angepasst werden. Beim Öffnen von **FHEMApp** wird das Farbschema (dunkel bzw. hell) aus den Einstellungen des Browsers bzw. des Betriebssystems verwendet. Zusätzlich kann das Farbschema wie folgt gesteuert werden.
+1. über den URL-Parameter `dark` (siehe auch [zusätzliche URL-Parameter](#zusätzliche-url-parameter))
+2. über ein FHEM Reading
+3. über das Optionsmenü (siehe auch [Optionsmenü](#optionsmenü))
+
+Wenn das Farbschema über den **URL-Parameter** `dark` festgelegt wird, dann wird **FHEMApp** in diesem geöffnet und die Browsereinstellung bzw. Betriebssystemeinstellung ignoriert.
+
+Wenn das Farbschema über ein **FHEM Reading** gesteuert wird, dann wird die Browerseinstellung bzw. Betriebssystemeinstellung und (sofern festgelegt) der URL-Parameter `dark` ignoriert. Jede Änderung des FHEM Reading hat dann eine Umschaltung aller gerade geöffneten **FHEMApp's** zur Folge. Das festgelegte FHEM Reading wird auf seinen Wahrheitswert geprüft. Wenn dieses zutrifft, dann wird **FHEMApp** in das dunkle Farbschema geschaltet. Ansonsten wird **FHEMApp** in das helle Farbschema geschaltet.
+
+|Parameter|Beschreibung|
+|---|---|
+|reading|siehe Parameter [reading](#konfiguration-der-elemente)|
+|value|siehe Parameter [value](#konfiguration-der-elemente)|
+
+Die Umschaltung des Farbschema über das **Optionsmenü** kann zur Laufzeit immer erfolgen, wird jedoch nicht gespeichert.
+
 ## Optionsmenü
 Durch Aktivierung der folgenden Optionen wird das Optionsmenü oben rechts in der Kopfleiste eingeblendet.
 ![](./docs/media/example_option_menu.png)
@@ -608,7 +628,7 @@ Die alternativen Beschriftungen können somit auch für die Erstellung mehrsprac
 ![](./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. 
+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))
 
 Neben frei definierbaren Farbvariablen, die Elementdefinitionen zur Angabe von Farbwerten eingesetzt werden können, gibt es feste Farbvariablen.
 

diff --git a/public/CHANGELOG.md b/public/CHANGELOG.md
@@ -1,3 +1,9 @@
+# v4.0.35-beta (10.04.2024)
+## OptionsMenu
+- App Update Function
+## Core
+- Changing DarkMode over FHEM reading
+- Solving unicode problem https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem 
 # v4.0.34-beta (29.03.2024)
 ## Panel Button
 - When selecting the type "route" on click/longClick/longRelease, individual panels can now also be addressed

diff --git a/src/components/OptionsMenu.vue b/src/components/OptionsMenu.vue
@@ -14,12 +14,14 @@
             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' }
+                settings: { name:'settings', title: "%t(_app.options.settings)", icon: 'mdi-cogs' },
+                update: { name: 'update', title: "%t(_app.options.update)", icon: 'mdi-cloud-download-outline' }
             }
 
         if(opts.showDarkMode) res.push(presets.darkMode)
         if(opts.showReloadPage) res.push(presets.reloadPage)
         if(opts.showSettings) res.push(presets.settings)
+        if(opts.showUpdate && fhem.app.updateAvailable) res.push(presets.update)
 
         res.push(...opts.commands)
 
@@ -38,6 +40,8 @@
         if(option.name === 'settings') router.push({ name: 'settings', query: router.currentRoute.value.query })
 
         if(option.name === 'darkMode') fhem.changeDarkMode()
+
+        if(option.name === 'update') fhem.appUpdate()
         
         if(option.cmd) fhem.request('text', option.cmd)
     }
@@ -46,17 +50,22 @@
 <template>
     <v-menu v-if="options.length > 0">
         <template v-slot:activator="{ props }">
-            <v-btn icon="mdi-dots-vertical" v-bind="props"></v-btn>
+            <v-badge :model-value="fhem.app.updateAvailable && fhem.app.header.showUpdate" color="error" dot class="mr-2">
+                <v-btn icon="mdi-dots-vertical" density="compact" v-bind="props"></v-btn>
+            </v-badge>
         </template>
 
         <v-list>
             <v-list-item v-for="(option, idx) in options"
                 rounded="pill"
                 :key="idx"
-                :prepend-icon="option.icon"
                 :title="fhem.replacer(option.title, '')"
-                @click="setOption(idx)"
-            >
+                @click="setOption(idx)">
+                <template v-slot:prepend>
+                    <v-badge :model-value="fhem.app.updateAvailable && option.name === 'update'" color="error" dot>
+                        <v-icon :icon="option.icon" density="compact"></v-icon>
+                    </v-badge>
+                </template>
             </v-list-item>
             <v-divider v-if="options.length > 0 && fhem.app.header.showLanguages" class="pb-2"/>
             <v-list-item v-if="fhem.app.header.showLanguages" class="text-center">

diff --git a/src/components/PanelCard.vue b/src/components/PanelCard.vue
@@ -121,7 +121,7 @@
 </script>
 
 <template>
-    <v-card variant="tonal">
+    <v-card variant="tonal" v-if="fhem.app.isReady">
         <v-row no-gutters>
             <v-col v-if="panel.status.bar">
                 <v-progress-linear
@@ -161,7 +161,11 @@
         </v-sheet>
 
         <PanelMain :main="panel.main" :levels="levelOpts.levels" :iconmap="panel.panel.iconmap" :devices="panel.panel.devices"></PanelMain>
-
+
+        <v-card-text v-if="item.panel.internals">
+            {{ item.panel.internals }}
+        </v-card-text>
+
         <v-layout style="height:24px">
             <v-system-bar color="secondary">
                 <v-icon v-if="infoLeft1.icon" :icon="infoLeft1.icon" :color="infoLeft1.color"></v-icon>

diff --git a/src/components/SettingsHeader.vue b/src/components/SettingsHeader.vue
@@ -84,6 +84,35 @@
         </v-col>
       </v-row>
     </v-list-item>
+
+    <v-divider></v-divider>
+    <v-list-item :title="$t(preLang + 'darkModeOverFhem')">
+      <template v-slot:append>
+        <v-btn
+          color="info"
+          icon="mdi-help-circle"
+          variant="text"
+          @click="fhem.help('farbschema')"
+        ></v-btn>
+      </template>
+    </v-list-item>
+    <v-list-item>
+      <v-row no-gutters>
+        <v-col cols="12" md="4" class="pt-3">
+          <v-text-field 
+            density="compact" 
+            variant="outlined" 
+            clearable
+            persistent-placeholder
+            placeholder="device-reading:value"
+            label="Definition"
+            v-model="fhem.app.config.header.darkModeOverFhem"        
+            >
+          </v-text-field>
+        </v-col>
+      </v-row>
+    </v-list-item>
+
     <v-divider></v-divider>
     <v-list-item :title="$t(preLang + 'optionsTitle')">
       <template v-slot:append>
@@ -112,6 +141,11 @@
             :label="$t(preLang + 'showSettings')"
             v-model="fhem.app.config.header.showSettings"/>
         </v-col>
+        <v-col cols="6" lg="">
+          <v-checkbox
+            :label="$t(preLang + 'showUpdate')"
+            v-model="fhem.app.config.header.showUpdate"/>
+        </v-col>
         <v-col cols="6" lg="">
           <v-checkbox
             :label="$t(preLang + 'showLanguages')"

diff --git a/src/locales/de.json b/src/locales/de.json
@@ -2,6 +2,9 @@
     "_app": {
         "settings": {
             "title": "Einstellungen",
+            "general": {
+                "title": "Allgemein" 
+            },
             "header": {
                 "title": "Kopfzeile",
                 "barTitle":"Kopfzeile",
@@ -20,11 +23,14 @@
                 "showDarkModeHint": "",
                 "showReloadPage": "Seite aktualsieren",
                 "showReloadPageHint": "",
+                "showUpdate": "Update anzeigen",
+                "showUpdateHint": "",
                 "showSettings": "Einstellungen",
                 "showSettingsHint": "",
                 "showLanguages": "Sprachen",
                 "showLanguagesHint": "",
                 "optionsCommandTitle":"Optionsmenü FHEM Befehle",
+                "darkModeOverFhem": "DarkMode über FHEM Reading",
                 "commandName": "Name",
                 "commandNamePlaceholder": "restart",
                 "commandNameRules": "Eingabe erforderlich!",
@@ -103,7 +109,8 @@
         "options": {
             "darkMode": "Tag/Nacht Modus",
             "reload": "Aktualisieren",
-            "settings": "Einstellungen"
+            "settings": "Einstellungen",
+            "update": "Aktualisierung"
         },
         "internals": {
             "title": "Systeminformationen",

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -2,6 +2,9 @@
     "_app": {
         "settings": {
             "title": "Settings",
+            "general": {
+                "title": "General" 
+            },
             "header": {
                 "title": "Header",
                 "barTitle":"Header",
@@ -20,11 +23,14 @@
                 "showDarkModeHint": "",
                 "showReloadPage": "Page refresh",
                 "showReloadPageHint": "",
+                "showUpdate": "show Update",
+                "showUpdateHint": "",
                 "showSettings": "Sesstings",
                 "showSettingsHint": "",
                 "showLanguages": "Languages",
                 "showLanguagesHint": "",
                 "optionsCommandTitle":"Optionsmenu FHEM Commands",
+                "darkModeOverFhem": "DarkMode over FHEM Reading",
                 "commandName": "Name",
                 "commandNamePlaceholder": "restart",
                 "commandNameRules": "Input required!",
@@ -103,7 +109,8 @@
         "options": {
             "darkMode": "Day/Night Mode",
             "reload": "Refresh",
-            "settings": "Settings"
+            "settings": "Settings",
+            "update": "Update"
         },
         "internals": {
             "title": "Internals",