v3.13.3

README.md

@@ -743,7 +743,7 @@ Im FHEM-Device muss im Attribut `appOptions` folgendes eingetragen werden.
 ```
 
 ### Konfiguration von Charts
-Da *Chart* kein Standard-Template ist, könnt ihr nur ausgewählte Eigenschaften über den Parameter `setup` in `appOptions` anpassen. Über den Paramter `size` kann die Templatebreite [siehe](#breite-von-templates) verändert werden. Der Parameter `daysAgo` legt ihr fest, wieviele Tage das Chart beim Laden zurückschaut. Als Standard werden die Daten der letzten 7 Tage `"daysAgo": -7` geladen. Über den Parameter `lineWidth` könnt ihr die Linienbreite der Chartlinien verändern. Als Standard ist `"lineWidth": 3` festgelegt. Über den Parameter `chartDef` legt ihr fest, welche Daten im Chart angezeigt werden. Jede Linie entspricht dabei einer Definition.
+Da *Chart* kein Standard-Template ist, könnt ihr nur ausgewählte Eigenschaften über den Parameter `setup` in `appOptions` anpassen. Über den Paramter `size` kann die Templatebreite [siehe](#breite-von-templates) verändert werden. Der Parameter `daysAgo` legt ihr fest, wieviele Tage das Chart beim Laden zurückschaut. Als Standard werden die Daten der letzten 7 Tage `"daysAgo": 6` geladen. Über den Parameter `lineWidth` könnt ihr die Linienbreite der Chartlinien verändern. Als Standard ist `"lineWidth": 3` festgelegt. Über den Parameter `chartDef` legt ihr fest, welche Daten im Chart angezeigt werden. Jede Linie entspricht dabei einer Definition.
 ```
 "chartDef": ["logsource:reading:text:präfix:axis"],
 "setup": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhemapp",
-  "version": "3.13.2",
+  "version": "3.13.3",
   "private": true,
   "author": "jemu75",
   "scripts": {

src/components/Jsonlist.vue

@@ -2,6 +2,8 @@
   <div class="text-center">
     <v-dialog
       v-model="dialog"
+      max-width="90%"
+      scrollable
     >
       <template v-slot:activator="{ on, attrs }">
         <v-btn
@@ -18,8 +20,8 @@
         </v-btn>
       </template>
 
-      <v-card>
-        <v-card-title class="headline secondary">
+      <v-card class="secondary lighten-1">
+        <v-card-title class="secondary">
           <v-btn
             icon
             @click="deep = deep > 1 ? 1 : 5"
@@ -37,8 +39,7 @@
             <v-icon>mdi-close</v-icon>
           </v-btn>
         </v-card-title>
-        <v-divider />
-        <v-card-text class="secondary lighten-2">
+        <v-card-text>
           <vue-json-pretty
             :show-line="false"
             :deep="deep"

src/components/TemplChart.vue

@@ -117,7 +117,7 @@
       name: 'chart',
       setup: {
         size: 'col-12 col-sm-12 col-md-6 col-lg-4',
-        daysAgo: -6,
+        daysAgo: 6,
         daysTo: 0,
         lang: 'de'
       },

src/plugins/fhem.js

@@ -85,6 +85,7 @@ class Fhem extends EventEmitter {
       time: time + ':' + ('000' + miSecs).slice(-3),
       msg: message.msg || '',
       lvl: message.lvl || 5,
+      meta: message.meta || null,
       icon: icons[message.lvl || 5],
       color: colors[message.lvl || 5],
     }
@@ -100,7 +101,7 @@ class Fhem extends EventEmitter {
   // mainFunction: Calculate Date with diff of days
   getDate(val) {
     let diff = val ? parseInt(val) : 0;
-    return ( d => new Date(d.setDate(d.getDate() + diff)).toISOString() )(new Date).split('T')[0];
+    return ( d => new Date(d.setDate(d.getDate() - diff)).toISOString() )(new Date).split('T')[0];
   }
 
   // mainFunction: Format Date and Time from FHEM
@@ -157,7 +158,7 @@ class Fhem extends EventEmitter {
 
         return typeof obj === 'object' ? Object.assign(obj, { data: result }) : result;
       })
-      .catch((err) => this.log({ lvl: 1, msg: err.message + ' - Request: ' + req }))
+      .catch((err) => this.log({ lvl: 1, msg: 'Request failed ' + req, meta: err.message }))
   }
 
   // coreFunction: to get json-data from a server-file
@@ -171,10 +172,9 @@ class Fhem extends EventEmitter {
       headers: header,
     };
 
-    this.log({ lvl: 5, msg: 'Read Json-Data from ' + file });
-
     let result = await fetch(file, options).then((res) => res.json());
 
+    if(result) this.log({ lvl: 5, msg: 'Json-Data parsed from ' + file, meta: result });
     if(!result) this.log({ lvl: 1, msg: 'No Json-Data found at ' + file });
 
     return await result;
@@ -189,7 +189,7 @@ class Fhem extends EventEmitter {
       }
       if(this.app.options.debugMode) this.app.appBar.color = 'pink darken-4';
     } else {
-      this.log({ lvl: 2, msg: 'No Configuration File found. FHEMApp starting with default settings.'})
+      this.log({ lvl: 2, msg: 'No Configuration File found. FHEMApp starting with default settings.', meta: this.app.options })
     }
   }
 
@@ -201,7 +201,7 @@ class Fhem extends EventEmitter {
       try {
         result = JSON.parse(device.Attributes.appOptions);
       } catch(err) {
-        this.log({ lvl: 1, msg: 'Read `appOptions` from ' + device.Name + ' failed. - ' + err.message })
+        this.log({ lvl: 1, msg: 'Read `appOptions` from ' + device.Name + ' failed.', meta: err.message })
       }
 
       if(result) {
@@ -563,7 +563,7 @@ class Fhem extends EventEmitter {
         }
       } else {
         // alles was nicht verarbeitet werden kann
-        this.log({ lvl: 3, msg: 'No Handling for this FHEM data. ' + arr })
+        this.log({ lvl: 3, msg: 'No Handling for this FHEM data. ', meta: arr })
       }
     }
 
@@ -624,13 +624,13 @@ class Fhem extends EventEmitter {
     this.app.session.connect = true;
     this.app.session.restartCnt = 0;
 
-    this.log({ lvl: 2, msg: 'Connection with FHEM is opened.'})
+    this.log({ lvl: 2, msg: 'Connection with FHEM is opened.', meta: this.app.connection })
 
     this.loadStructure();
   }
 
   // subFunction: calls after websocket is closed
-  async wsClose() {
+  async wsClose(evt) {
     this.app.session.connect = false;
     this.app.session.csrf = null;
     this.app.session.ready = false;
@@ -646,7 +646,14 @@ class Fhem extends EventEmitter {
         this.wsStart()
       }, msecs);
 
-      this.log({ lvl: 2, msg: 'Connection with FHEM was closed. Try to Reconnect in ' + (msecs / 1000) + ' seconds...' })
+      let meta = {
+        info: 'Websocket was closed.',
+        errCode: evt.code,
+        readyState: this.app.socket.readyState
+      }
+
+      this.log({ lvl: 2, msg: 'Connection with FHEM was closed. Try to Reconnect in ' + (msecs / 1000) + ' seconds...', meta: meta })
+      this.loading = false;
     }
   }
 
@@ -661,7 +668,7 @@ class Fhem extends EventEmitter {
     this.app.socket = new WebSocket(url);
     this.app.socket.onopen = () => this.wsOpen();
     this.app.socket.onmessage = (message) => this.doUpdate(message);
-    this.app.socket.onclose = () => this.wsClose();
+    this.app.socket.onclose = (evt) => this.wsClose(evt);
   }
 
   // subFunction: set the actual timestamp for menubar

src/views/Syslog.vue

@@ -85,7 +85,42 @@
             {{ item.icon }}
           </v-icon>
         </template>
+
+        <template v-slot:item.actions="{ item }">
+          <v-icon
+            v-if="item.meta"
+            small
+            @click="showMeta(item)"
+          >
+            mdi-paperclip
+          </v-icon>
+        </template>
       </v-data-table>
+
+      <v-dialog
+        v-model="log.metaDialog"
+        max-width="90%"
+        scrollable
+      >
+        <v-card color="secondary lighten-1">
+          <v-card-title class="secondary">
+            Systemprotokoll - Details
+            <v-spacer />
+            <v-btn
+              icon
+              @click="log.metaDialog = false"
+            >
+              <v-icon>mdi-close</v-icon>
+            </v-btn>
+          </v-card-title>
+          <v-card-text>
+            <vue-json-pretty
+              :show-line="false"
+              :data="log.metaData"
+            />
+          </v-card-text>
+        </v-card>
+      </v-dialog>
     </v-card-text>
 
     <v-divider />
@@ -97,6 +132,9 @@
 </template>
 
 <script>
+  import VueJsonPretty from 'vue-json-pretty'
+  import 'vue-json-pretty/lib/styles.css'
+
   export default {
     data: () => ({
       name: 'syslog',
@@ -118,7 +156,8 @@
         headers: [
           { text: 'Art', value: 'icon', class: 'secondary' },
           { text: 'Zeit', value: 'time', class: 'secondary' },
-          { text: 'Nachricht', value: 'msg', class: 'secondary' }
+          { text: 'Nachricht', value: 'msg', class: 'secondary' },
+          { text: 'Details', value: 'actions', sortable: false }
         ],
         search: '',
         lastPageIcon: 'mdi-chevron-left',
@@ -129,10 +168,16 @@
         page: 1,
         pageCount: 1,
         lastPage: true,
-        nextPage: false
+        nextPage: false,
+        metaDialog: false,
+        metaData: null
       }
     }),
 
+    components: {
+      VueJsonPretty
+    },
+
     watch: {
       session: {
         immediate: true,
@@ -176,6 +221,11 @@
         this.log.page = newVal > this.log.pageCount ? this.log.pageCount : newVal < 1 ? 1 : newVal;
         this.log.lastPage = this.log.page === 1 ? true : false;
         this.log.nextPage = this.log.page === this.log.pageCount ? true : false;
+      },
+
+      showMeta(val) {
+        this.log.metaDialog = true;
+        this.log.metaData = val.meta;
       }
     }
   }

www/fhemapp/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><link rel="icon" href="favicon.png"><link rel="apple-touch-icon" href="apple-touch-icon.png"><title>fhemapp</title><link href="css/chunk-03454508.55c011d2.css" rel="prefetch"><link href="css/chunk-07709945.d4481170.css" rel="prefetch"><link href="css/chunk-085bcd30.01cf6fd8.css" rel="prefetch"><link href="css/chunk-15fa718e.55c011d2.css" rel="prefetch"><link href="css/chunk-17d492e6.1bbdaac2.css" rel="prefetch"><link href="css/chunk-28a3f15f.fc346ba4.css" rel="prefetch"><link href="css/chunk-2c05d556.cb4d0868.css" rel="prefetch"><link href="css/chunk-4a62a958.b490d9b1.css" rel="prefetch"><link href="css/chunk-53c4ff2a.9398bfa8.css" rel="prefetch"><link href="css/chunk-72c6e8d8.d4bef30a.css" rel="prefetch"><link href="css/chunk-b2de1140.1bbdaac2.css" rel="prefetch"><link href="css/chunk-d4e16e04.6714eec0.css" rel="prefetch"><link href="css/chunk-dc5178fa.cb4d0868.css" rel="prefetch"><link href="css/chunk-dd03e16c.cb4d0868.css" rel="prefetch"><link href="js/chunk-03454508.86732017.js" rel="prefetch"><link href="js/chunk-07709945.536f8338.js" rel="prefetch"><link href="js/chunk-085bcd30.fce1ca94.js" rel="prefetch"><link href="js/chunk-15fa718e.8e403831.js" rel="prefetch"><link href="js/chunk-17d492e6.9e183584.js" rel="prefetch"><link href="js/chunk-28a3f15f.fd07f95d.js" rel="prefetch"><link href="js/chunk-2c05d556.0cfae3f0.js" rel="prefetch"><link href="js/chunk-2d0aa92c.855dd2bf.js" rel="prefetch"><link href="js/chunk-2d212bf1.923fd44e.js" rel="prefetch"><link href="js/chunk-4a62a958.b5b68579.js" rel="prefetch"><link href="js/chunk-53c4ff2a.47e547a9.js" rel="prefetch"><link href="js/chunk-72c6e8d8.c00175b8.js" rel="prefetch"><link href="js/chunk-b2de1140.ceddc6db.js" rel="prefetch"><link href="js/chunk-d4e16e04.70c63a71.js" rel="prefetch"><link href="js/chunk-dc5178fa.4891b2bc.js" rel="prefetch"><link href="js/chunk-dd03e16c.f4db6a88.js" rel="prefetch"><link href="css/chunk-vendors.95431e8e.css" rel="preload" as="style"><link href="js/app.e8b9f39e.js" rel="preload" as="script"><link href="js/chunk-vendors.b9a283db.js" rel="preload" as="script"><link href="css/chunk-vendors.95431e8e.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but fhemapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.b9a283db.js"></script><script src="js/app.e8b9f39e.js"></script></body></html>
+<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><link rel="icon" href="favicon.png"><link rel="apple-touch-icon" href="apple-touch-icon.png"><title>fhemapp</title><link href="css/chunk-03454508.55c011d2.css" rel="prefetch"><link href="css/chunk-07709945.d4481170.css" rel="prefetch"><link href="css/chunk-085bcd30.01cf6fd8.css" rel="prefetch"><link href="css/chunk-15fa718e.55c011d2.css" rel="prefetch"><link href="css/chunk-28a3f15f.fc346ba4.css" rel="prefetch"><link href="css/chunk-3c9d184f.1bbdaac2.css" rel="prefetch"><link href="css/chunk-46bea2ee.1bbdaac2.css" rel="prefetch"><link href="css/chunk-50f89d12.b490d9b1.css" rel="prefetch"><link href="css/chunk-53c4ff2a.9398bfa8.css" rel="prefetch"><link href="css/chunk-72c6e8d8.d4bef30a.css" rel="prefetch"><link href="css/chunk-dc5178fa.cb4d0868.css" rel="prefetch"><link href="css/chunk-dd03e16c.cb4d0868.css" rel="prefetch"><link href="css/chunk-ecd3142c.86805334.css" rel="prefetch"><link href="js/chunk-03454508.86732017.js" rel="prefetch"><link href="js/chunk-07709945.536f8338.js" rel="prefetch"><link href="js/chunk-085bcd30.fce1ca94.js" rel="prefetch"><link href="js/chunk-15fa718e.8e403831.js" rel="prefetch"><link href="js/chunk-21b07e80.b3f882b2.js" rel="prefetch"><link href="js/chunk-28a3f15f.fd07f95d.js" rel="prefetch"><link href="js/chunk-2d0aa92c.855dd2bf.js" rel="prefetch"><link href="js/chunk-2d212bf1.e377c778.js" rel="prefetch"><link href="js/chunk-3c9d184f.28dc459c.js" rel="prefetch"><link href="js/chunk-46bea2ee.942f5a8a.js" rel="prefetch"><link href="js/chunk-50f89d12.d065ef66.js" rel="prefetch"><link href="js/chunk-53c4ff2a.a3ca272e.js" rel="prefetch"><link href="js/chunk-72c6e8d8.c00175b8.js" rel="prefetch"><link href="js/chunk-dc5178fa.4891b2bc.js" rel="prefetch"><link href="js/chunk-dd03e16c.f4db6a88.js" rel="prefetch"><link href="js/chunk-ecd3142c.0688a723.js" rel="prefetch"><link href="css/chunk-vendors.95431e8e.css" rel="preload" as="style"><link href="js/app.0bdba360.js" rel="preload" as="script"><link href="js/chunk-vendors.b9a283db.js" rel="preload" as="script"><link href="css/chunk-vendors.95431e8e.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but fhemapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.b9a283db.js"></script><script src="js/app.0bdba360.js"></script></body></html>