v3.12.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhemapp",
-  "version": "3.12.1",
+  "version": "3.12.2",
   "private": true,
   "author": "jemu75",
   "scripts": {
@@ -10,15 +10,15 @@
     "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
   },
   "dependencies": {
-    "apexcharts": "^3.26.0",
-    "core-js": "^3.9.1",
+    "apexcharts": "^3.26.1",
+    "core-js": "^3.10.1",
     "typeface-roboto": "^1.1.13",
     "vue": "^2.6.11",
-    "vue-apexcharts": "^1.6.0",
+    "vue-apexcharts": "^1.6.1",
     "vue-i18n": "^8.22.3",
     "vue-json-pretty": "^1.7.1",
     "vue-router": "^3.5.1",
-    "vuetify": "^2.4.8"
+    "vuetify": "^2.4.9"
   },
   "devDependencies": {
     "@mdi/font": "^5.9.55",

src/components/TemplPanel.vue

@@ -324,7 +324,7 @@
               menu: data.menu
             };
 
-            if(data.color != 'success') this.vals.status.color = data.color;
+            if(listItem.color != 'success' && this.vals.status.color === 'success') this.vals.status.color = listItem.color;
 
             if(idx != -1) {
               this.list.splice(idx, 1, listItem);

src/main2.js

@@ -0,0 +1,26 @@
+import 'typeface-roboto'
+import '@mdi/font/css/materialdesignicons.css'
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import vuetify from './plugins/vuetify'
+import fhem from './plugins/fhem'
+import VueApexCharts from 'vue-apexcharts'
+import i18n from './plugins/i18n'
+import fhem2 from './plugins/fhem2'
+
+Vue.use(fhem2, vuetify, i18n)
+
+Vue.use(VueApexCharts)
+Vue.component('apexchart', VueApexCharts)
+
+Vue.config.productionTip = false
+
+Vue.prototype.$fhem = new fhem()
+
+new Vue({
+  vuetify,
+  router,
+  i18n,
+  render: h => h(App)
+}).$mount('#app')

src/plugins/fhem.js

@@ -368,7 +368,7 @@ export default class Fhem extends EventEmitter {
 
         if(defSet.length > 2) {
           let value = defSet[0].match(/\./) ? defSet[0].split('.') : [ 'Readings', defSet[0], 'Value' ];
-          let state = this.getEl(device, ...value);
+          let state = this.getEl(device, ...value) || this.getEl(device, 'Readings', defSet[0], 'Value');
 
           if(state) {
             let found = false;

src/plugins/fhem2.js

@@ -0,0 +1,126 @@
+import EventEmitter from 'events';
+
+class Fhem extends EventEmitter {
+  constructor() {
+    super();
+
+    this.app = {
+      connection: {
+        location: window.location.protocol + '//' + window.location.hostname,
+        port: window.location.port,
+        path: 'fhem' //root path
+      },
+      socket: null,
+      session: {
+        connect: false,
+        csrf: null,
+        restart: false,
+        restartCnt: 0,
+        logList: [],
+        logLast: {}
+      },
+      options: {
+        lang: 'de', // default language
+        debugMode: false,
+        debugLevel: 2, // 1 = fehler, 2 = status, 3 = requests, 4 = informChannel, 5 = internals
+        loading: false,
+        loadCount: 0,
+        clockInterval: 5000,
+        clock: null,
+        date: null,
+        maxChartPoints: 100,
+        updateProcess: false,
+        logRecord: true,
+        logBuffer: 500,
+        ignoreFhemRoom: false,
+        ignoreFhemGroup: false,
+        ignoreFhemSortby: false,
+        mobileHeader: false
+      },
+      theme: {},
+      templates: [], // only the fallback for v3.1
+      componentMap: [],
+      data: {
+        roomList: [],
+        groupList: [],
+        deviceList: [],
+        header: ''
+      }
+    }
+  }
+
+  // coreFunction: handle log-messages
+  log(message) {
+    let time = new Date().toLocaleTimeString(this.app.options.lang);
+    let miSecs = new Date().getMilliseconds();
+    let result = {
+      time: time + ':' + ('000' + miSecs).slice(-3),
+      msg: message.msg || '',
+      lvl: message.lvl || 5
+    }
+
+    if(result.lvl <= this.app.options.debugLevel) {
+      console.log(result);
+    }
+  }
+
+  // coreFunction: to get json-data from a server-file
+  async getJsonFile(file) {
+    let header = new Headers();
+    header.append('pragma', 'no-cache');
+    header.append('cache-control', 'no-cache');
+
+    let options = {
+      method: 'GET',
+      headers: header,
+    };
+
+    return await fetch(file, options)
+      .then((res) => {
+        let contentType = res.headers.get("content-type")
+        if(contentType.indexOf("application/json") != -1) {
+          return res.json()
+        } else {
+          throw new Error('No JSON-Data found')
+        }
+      })
+      .catch((err) => this.log({ lvl: 1, msg: err.message + ' at ' + file }))
+  }
+
+  // coreFunction: to merge config-data with app-default scheme
+  async readConfig(file) {
+    let cfg = await this.getJsonFile(file);
+    if(cfg) {
+      for(const item of Object.keys(cfg)) {
+        if(item in this.app) Object.assign(this.app[item], cfg[item]);
+      }
+      this.log({ lvl: 5, msg: 'Read Configuration from ' + file + ' completed.' });
+    }
+  }
+
+  // mainFunction: Initializing FHEM App
+  async init(vuetify, i18n) {
+    this.log({ lvl: 2, msg: 'Starting FHEMApp...'});
+    await this.readConfig('./cfg/config.json');
+
+    if(vuetify && this.app.theme) {
+      vuetify.framework.theme.dark = this.app.theme.dark;
+      Object.assign(vuetify.framework.theme.themes.light, this.app.theme.themes.light);
+      Object.assign(vuetify.framework.theme.themes.dark, this.app.theme.themes.dark);
+    }
+
+    if(i18n && this.app.options.lang) {
+      i18n.locale = this.app.options.lang;
+    }
+  }
+}
+
+export default {
+  install(Vue, vuetify, i18n) {
+
+    // add an instance method
+    Vue.prototype.$myMethod = new Fhem;
+
+    Vue.prototype.$myMethod.init(vuetify, i18n);
+  }
+}