v1.3.1

jemu75 · Mar 15, 2021 · 1e897ba · 1e897ba
1 parent c32e00b
commit 1e897ba
Show file tree

Hide file tree

Showing 72 changed files with 294 additions and 97 deletions.
diff --git a/README.md b/README.md
@@ -13,15 +13,16 @@
 *Beispiele für die App in der Smartphoneansicht*
 
 # Systemanforderungen
-Für den Betrieb der **FHEMApp** wird FHEM(tm) und ein Web-Server benötigt.
-* Backendsystem - FHEM https://fhem.de/
-* Webserver - z.B. Apache https://httpd.apache.org/, lighttpd https://www.lighttpd.net/
+Für den Betrieb der **FHEMApp** wird FHEM(tm) benötigt.
+* FHEM https://fhem.de/
+* optional kann die App auch auf einem separaten Web-Server (z.B. Apache https://httpd.apache.org/, lighttpd https://www.lighttpd.net/) installiert werden
 
 # Installation
-Kopiert einfach alle Dateien und Unterverzeichnisse aus dem Ordner [www/fhemapp](./www/fhemapp) auf das Arbeitsverzeichnis eures Webservers. Danach sollte folgende Verzeichnisstruktur auf eurem Webserver vorhanden sein.
+Kopiert einfach alle Dateien und Unterverzeichnisse aus dem Ordner [www/fhemapp](./www/fhemapp) in eure FHEM-Installation unter **opt/fhem/www/fhemapp** bzw. in das gewünschte Verzeichnis auf eurem Webserver. Danach sollte folgende Verzeichnisstruktur auf eurem Webserver vorhanden sein.
 ```bash
 .
 └─ fhemapp
+    ├── apple-touch-icon.png
     ├── favicon.png
     ├── index.html
     ├── cfg

diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/cfg/customSwitch.json b/public/cfg/customSwitch.json
@@ -0,0 +1,25 @@
+{
+  "status": {
+    "line": ["state:on:100:success","state::0:success"],
+    "error": ["reading:value:text"]
+  },
+  "main": [
+    {
+      "leftIcon": "mdi-minus",
+      "leftClick": "pct --10",
+      "leftLongClick": "off",
+      "state": ["reading:value:text"],
+      "rightIcon": "mdi-plus",
+      "rightClick": "pct ++10",
+      "rightLongClick": "on"
+    }
+  ],
+  "info": {
+    "left1": ["reading:value:hint:icon"],
+    "left2": ["reading:value:hint:icon"],
+    "mid1": ["reading:value:text:icon"],
+    "mid2": ["reading:value:text:icon"],
+    "right1": ["reading:value:hint:icon"],
+    "right2": ["reading:value:hint:icon"]
+  }
+}
diff --git a/public/cfg/custom_example.json b/public/cfg/custom_example.json
@@ -0,0 +1,25 @@
+{
+  "status": {
+    "line": ["reading:value:level:color"],
+    "error": ["reading:value:text"]
+  },
+  "main": [
+    {
+      "leftIcon": "mdi-minus",
+      "leftClick": "pct --10",
+      "leftLongClick": "off",
+      "state": ["reading:value:text"],
+      "rightIcon": "mdi-plus",
+      "rightClick": "pct ++10",
+      "rightLongClick": "on"
+    }
+  ],
+  "info": {
+    "left1": ["reading:value:hint:icon"],
+    "left2": ["reading:value:hint:icon"],
+    "mid1": ["reading:value:text:icon"],
+    "mid2": ["reading:value:text:icon"],
+    "right1": ["reading:value:hint:icon"],
+    "right2": ["reading:value:hint:icon"]
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -7,6 +7,7 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <link rel="icon" href="<%= BASE_URL %>favicon.png">
+    <link rel="apple-touch-icon" href="<%= BASE_URL %>apple-touch-icon.png">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

diff --git a/src/components/TemplCustom.vue b/src/components/TemplCustom.vue
@@ -0,0 +1,111 @@
+<template>
+  <v-col class="col-12 col-sm-6 col-md-4 col-lg-4" :order="vals.order">
+    <v-card :dark="this.$vuetify.theme.dark" color="secondary">
+      <v-progress-linear height="7" :value="vals.mainLevel" :color="vals.mainColor" background-color="secondary darken-1"></v-progress-linear>
+
+      <v-card-title class="text-truncate">{{ vals.title }}</v-card-title>
+      <v-divider></v-divider>
+
+      <v-card-text>
+        <v-row align="center">
+          <v-col class="col-3" align="center">
+            <v-btn icon @click="set(-10)" @mousedown="start(-100)" @mouseup="stop()" @touchstart="start(-100)" @touchend="stop()">
+              <v-icon large>{{ leftIcon }}</v-icon>
+            </v-btn>
+          </v-col>
+          <v-divider vertical></v-divider>
+          <v-col align="center">
+            <div class="headline font-weight-bold">{{ vals.mainState }}</div>
+          </v-col>
+          <v-divider vertical></v-divider>
+          <v-col class="col-3" align="center">
+            <v-btn icon @click="set(10)" @mousedown="start(100)" @mouseup="stop()" @touchstart="start(100)" @touchend="stop()">
+              <v-icon large>{{ rightIcon }}</v-icon>
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+      <v-divider></v-divider>
+      <v-system-bar color="secondary darken-1">
+        <v-icon>{{ vals.systemIcon }}</v-icon>{{ vals.systemIconValue }}
+      </v-system-bar>
+    </v-card>
+  </v-col>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      name: 'custom',
+      setup: {
+        status: {
+          line: [],
+          error: []
+        },
+        main: [],
+        info: {
+          left1: [],
+          left2: [],
+          mid1: [],
+          mid2: [],
+          right1: [],
+          right2: []
+        }
+      },
+      vals: {
+        order: '',
+        title: '',
+        mainState: '',
+        mainLevel: 0,
+        mainColor: '',
+        systemIcon: '',
+        systemIconValue: ''
+      },
+      leftIcon: 'mdi-minus',
+      rightIcon: 'mdi-plus',
+    }),
+
+    watch: {
+      item: {
+        immediate: true,
+        deep: true,
+        handler(val) {
+          let alias = this.$fhem.getEl(val, 'Attributes', 'alias') || val.Name;
+
+          this.vals.title = this.$fhem.getEl(val, 'Options', 'name') || alias;
+          this.vals.order = this.$fhem.getEl(val, 'Attributes', 'sortby') || 'last';
+
+          this.$fhem.checkVal(val, this.setup.status.line);
+        }
+      },
+
+      setup: {
+        deep: true,
+        handler() {
+          this.$fhem.checkVal(this.item, this.setup.status.line);
+        }
+      }
+    },
+
+    props: {
+      item: {}, // jsonObject from FHEM Device
+    },
+
+    created() {
+      let file = this.$fhem.getEl(this.item, 'Options', 'customDef');
+
+      if(file) {
+        fetch('./cfg/' + file + '.json')
+          .then(res => res.json())
+          .catch((err) => {
+            this.$fhem.log = { type: 'error', message: 'wrong definition in ./cfg/' + file + '.json', meta: err };
+          })
+          .then(cfg => {
+            if(cfg.status) Object.assign(this.setup.status, cfg.status);
+            if(cfg.main) Object.assign(this.setup.main, cfg.main);
+            if(cfg.info) Object.assign(this.setup.info, cfg.info);
+          })
+      }
+    }
+  }
+</script>
diff --git a/src/components/TemplHmLan.vue b/src/components/TemplHmLan.vue
@@ -82,11 +82,11 @@
     data: () => ({
       name: 'hmlan',
       defaultSet: [
-        "cond:^(?!ok):offline:100:error:mdi-wifi-off",
-        "loadLvl:low:normal:100:success:mdi-wifi",
-        "loadLvl:batchLevel:hoch:50:success:mdi-wifi-star",
-        "loadLvl:high:sehr hoch:10:success:mdi-wifi-alert",
-        "loadLvl:suspended:überlastet:100:error:mdi-wifi-cancel"
+        "cond:^(?!ok):offline:100:error:mdi-access-point-network-off",
+        "loadLvl:low:normal:100:success:mdi-access-point-network",
+        "loadLvl:batchLevel:hoch:50:success:mdi-access-point-network",
+        "loadLvl:high:sehr hoch:10:success:mdi-access-point-network",
+        "loadLvl:suspended:überlastet:100:error:mdi-access-point-network"
       ],
       vals: {
         order: '',
@@ -95,9 +95,7 @@
         mainLevel: 0,
         mainColor: '',
         devCount: 0,
-        devCountIcon: 'mdi-check',
         devOffline: [],
-        devOfflineIcon: 'mdi-alert',
         systemIcon: '',
         systemIconValue: '',
         systemLastEvent: ''

diff --git a/src/components/TemplThermostat.vue b/src/components/TemplThermostat.vue
@@ -96,7 +96,8 @@
           let night = this.$fhem.getEl(val, 'Readings', 'R-nightTemp', 'Value');
           let desired = this.$fhem.getEl(val, 'Readings', 'desired-temp', 'Value');
           let activity = this.$fhem.getEl(val, 'Connected', 'receiver', 'Readings', 'Activity', 'Value');
-          let battery = this.$fhem.getEl(val, 'Connected', 'receiver', 'Readings', 'batteryLevel', 'Value');
+          let battery = this.$fhem.getEl(val, 'Connected', 'receiver', 'Readings', 'battery', 'Value');
+          let batlevel = this.$fhem.getEl(val, 'Connected', 'receiver', 'Readings', 'batteryLevel', 'Value');
           let rssi = this.$fhem.getEl(val, 'Connected', 'receiver', 'Internals', 'myHMLAN_RSSI');
           let alias = this.$fhem.getEl(val, 'Attributes', 'alias') || val.Name;
 
@@ -111,8 +112,8 @@
           this.vals.systemDayNightIcon = parseFloat(desired) === parseFloat(day) ? 'mdi-weather-sunny' : parseFloat(desired) === parseFloat(night) ? 'mdi-weather-night' : '';
           this.vals.systemTempValue = measured + '°C';
           this.vals.systemHumValue = humidity +'%';
-          this.vals.systemBatteryIcon = parseFloat(battery) < 2.5 ? 'mdi-battery-10' : 'mdi-battery'
-          this.vals.systemBatteryState = battery + 'v';
+          this.vals.systemBatteryIcon = battery != 'ok' ? 'mdi-battery-10' : 'mdi-battery';
+          this.vals.systemBatteryState = batlevel + 'v';
           this.vals.systemActivityIcon = activity ? activity === 'alive' ? 'mdi-wifi' : 'mdi-wifi-off' : '';
           this.vals.systemActivityState = this.$fhem.getDateTime(timestamp);
           this.vals.systemActivityState += rssi ? ' ' + rssi +'dB' : '';

diff --git a/src/main.js b/src/main.js
@@ -12,7 +12,7 @@ Vue.config.productionTip = false
 
 Vue.prototype.$fhem = new fhem()
 
-fetch('/cfg/config.json')
+fetch('./cfg/config.json')
   .then(res => res.json())
   .catch(() => null)
   .then(cfg => {

diff --git a/src/plugins/fhem.js b/src/plugins/fhem.js
@@ -298,6 +298,39 @@ export default class Fhem extends EventEmitter {
     }
   }
 
+  // mainfunction new solution for handleStates
+  checkVal(device, defs) {
+    let result = [];
+
+    if(typeof device === 'object' && defs.length > 0) {
+      for(const def of defs) {
+        let defSet = def.split(':');
+
+        if(defSet.length > 2) {
+          let value = defSet[0].match(/\./) ? defSet[0].split('.') : [ 'Readings', defSet[0], 'Value' ];
+          let state = this.getEl(device, ...value);
+
+          if(state) {
+            let found = false;
+
+            if(isNaN(parseFloat(defSet[1]))) {
+              if(RegExp(!defSet[1] ? '.' : defSet[1]).test(state)) found = true;
+            } else {
+              if(parseFloat(state) >= parseFloat(defSet[1])) found = true;
+            }
+
+            if(found) {
+              // hier müssen jetzt noch die Ersetzungen rein %s %n %n.1 %t
+              // schleife bauen, die defSet-Array ab idx 2 - x durchläuft und Ersetzungen vornimmt
+              break;
+            }
+          }
+        }
+      }
+    }
+    return result;
+  }
+
   // mainfuntion handle states and set mainValues
   handleStates(device, vals, defaultSet) {
     let defs = this.getEl(device, 'Options', 'states') || defaultSet;

diff --git a/src/router/index.js b/src/router/index.js
@@ -42,7 +42,7 @@ const routes = [
 ]
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: 'hash',
   base: process.env.BASE_URL,
   routes
 })

diff --git a/src/views/Devices.vue b/src/views/Devices.vue
@@ -38,7 +38,8 @@ export default {
     templ_weather: () => import('@/components/TemplWeather.vue'),
     templ_scenes: () => import('@/components/TemplScenes.vue'),
     templ_sonos: () => import('@/components/TemplSonos.vue'),
-    templ_hmlan: () => import('@/components/TemplHmLan.vue')
+    templ_hmlan: () => import('@/components/TemplHmLan.vue'),
+    templ_custom: () => import('@/components/TemplCustom.vue')
   },
 
   watch: {

diff --git a/vue.config.js b/vue.config.js
@@ -4,5 +4,6 @@ module.exports = {
   ],
 
   outputDir: 'www/fhemapp',
-  publicPath: '/'
+  publicPath: '',
+  productionSourceMap: false
 }
diff --git a/www/fhemapp/apple-touch-icon.png b/www/fhemapp/apple-touch-icon.png
diff --git a/www/fhemapp/cfg/customSwitch.json b/www/fhemapp/cfg/customSwitch.json
@@ -0,0 +1,25 @@
+{
+  "status": {
+    "line": ["state:on:100:success","state::0:success"],
+    "error": ["reading:value:text"]
+  },
+  "main": [
+    {
+      "leftIcon": "mdi-minus",
+      "leftClick": "pct --10",
+      "leftLongClick": "off",
+      "state": ["reading:value:text"],
+      "rightIcon": "mdi-plus",
+      "rightClick": "pct ++10",
+      "rightLongClick": "on"
+    }
+  ],
+  "info": {
+    "left1": ["reading:value:hint:icon"],
+    "left2": ["reading:value:hint:icon"],
+    "mid1": ["reading:value:text:icon"],
+    "mid2": ["reading:value:text:icon"],
+    "right1": ["reading:value:hint:icon"],
+    "right2": ["reading:value:hint:icon"]
+  }
+}
diff --git a/www/fhemapp/cfg/custom_example.json b/www/fhemapp/cfg/custom_example.json
@@ -0,0 +1,25 @@
+{
+  "status": {
+    "line": ["reading:value:level:color"],
+    "error": ["reading:value:text"]
+  },
+  "main": [
+    {
+      "leftIcon": "mdi-minus",
+      "leftClick": "pct --10",
+      "leftLongClick": "off",
+      "state": ["reading:value:text"],
+      "rightIcon": "mdi-plus",
+      "rightClick": "pct ++10",
+      "rightLongClick": "on"
+    }
+  ],
+  "info": {
+    "left1": ["reading:value:hint:icon"],
+    "left2": ["reading:value:hint:icon"],
+    "mid1": ["reading:value:text:icon"],
+    "mid2": ["reading:value:text:icon"],
+    "right1": ["reading:value:hint:icon"],
+    "right2": ["reading:value:hint:icon"]
+  }
+}