v3.7.2

package.json

@@ -23,6 +23,7 @@
     "typeface-roboto": "^1.1.13",
     "vue": "^2.6.11",
     "vue-apexcharts": "^1.6.0",
+    "vue-json-pretty": "^1.7.1",
     "vue-router": "^3.5.1",
     "vuetify": "^2.4.8"
   },

public/cfg/config.json

@@ -6,7 +6,9 @@
   },
   "options": {
     "maxChartPoints": 100,
-    "logBuffer": 500
+    "logBuffer": 500,
+    "debugMode": true,
+    "debugLevel": 5
   },
   "theme": {
     "dark": true,

src/App.vue

@@ -9,7 +9,7 @@
 
     <v-app-bar
       app
-      color="primary"
+      :color="appBarColor"
       dark
       clipped-left
     >
@@ -30,6 +30,10 @@
         {{ app.options.clock }}
       </h2>
       <v-spacer />
+      <div v-if="app.options.debugMode">
+        DebugMode - Level {{ app.options.debugLevel }}
+      </div>
+
       <div class="hidden-lg-and-up text-h5">
         {{ app.data.header }}
       </div>
@@ -193,6 +197,7 @@
     data: () => ({
       drawer: null,
       back: false,
+      appBarColor: 'primary',
       app: {
         options: {
           loading: false,
@@ -207,7 +212,7 @@
           header: ''
         }
       },
-      version: 'v3.7.1',
+      version: 'v3.7.2',
       status: {
         color: 'secondary',
         icon: 'mdi-circle',
@@ -244,6 +249,8 @@
       this.$fhem.on('connect', () => this.loadRoutes())
       this.$fhem.init();
       this.loadRoutes();
+
+      if(this.app.options.debugMode) this.appBarColor = 'pink darken-4'
     },
 
     methods: {

src/components/Jsonlist.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="text-center">
+    <v-dialog
+      v-model="dialog"
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn
+          small
+          icon
+          v-bind="attrs"
+          v-on="on"
+        >
+          <v-icon
+            small
+          >
+            mdi-code-json
+          </v-icon>
+        </v-btn>
+      </template>
+
+      <v-card>
+        <v-card-title class="headline secondary">
+          <v-btn
+            icon
+            @click="deep = deep > 1 ? 1 : 5"
+          >
+            <v-icon>mdi-file-tree-outline</v-icon>
+          </v-btn>
+
+          <v-spacer />
+          {{ item.Name }}
+          <v-spacer />
+          <v-btn
+            icon
+            @click="dialog = false"
+          >
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-divider />
+        <v-card-text class="secondary lighten-2">
+          <vue-json-pretty
+            :show-line="false"
+            :deep="deep"
+            :data="item"
+          />
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+<script>
+  import VueJsonPretty from 'vue-json-pretty'
+  import 'vue-json-pretty/lib/styles.css'
+
+  export default {
+    props: {
+      item: {
+        type: Object,
+        default: () => { return { name: 'json' } }
+      }
+    },
+
+    data () {
+      return {
+        dialog: false,
+        deep: 1
+      }
+    },
+
+    components: {
+      VueJsonPretty
+    }
+  }
+</script>

src/components/TemplDefault.vue

@@ -14,6 +14,10 @@
       <v-card-title class="text-truncate">
         {{ vals.title }}
         <v-spacer />
+        <jsonList
+          v-if="app.options.debugMode"
+          :item="item"
+        />
         <v-btn
           v-if="multiLevel && isActive"
           small
@@ -38,8 +42,10 @@
               small
               icon
               :disabled="vals.main.leftBtnDisabled"
-              @mousedown="clickStart('left')"
-              @mouseup="clickEnd('left')"
+              @touchstart="clickStart('left','touch')"
+              @touchend="clickEnd('left','touch')"
+              @mousedown="clickStart('left','mouse')"
+              @mouseup="clickEnd('left','mouse')"
             >
               <v-icon large>
                 {{ vals.main.leftBtn }}
@@ -119,8 +125,10 @@
               small
               icon
               :disabled="vals.main.rightBtnDisabled"
-              @mousedown="clickStart('right')"
-              @mouseup="clickEnd('right')"
+              @touchstart="clickStart('right','touch')"
+              @touchend="clickEnd('right','touch')"
+              @mousedown="clickStart('right','mouse')"
+              @mouseup="clickEnd('right','mouse')"
             >
               <v-icon large>
                 {{ vals.main.rightBtn }}
@@ -223,7 +231,12 @@
 </template>
 
 <script>
+  import jsonList from '@/components/Jsonlist.vue'
+
   export default {
+    components: {
+      jsonList
+    },
 
     props: {
       item: {
@@ -234,6 +247,11 @@
 
     data: () => ({
       name: 'default',
+      app: {
+        options: {
+          debugMode: false
+        }
+      },
       setup: {
         size: 'col-12 col-sm-6 col-md-4 col-lg-4',
         status: {
@@ -299,7 +317,8 @@
       isActive: true,
       timer: false,
       long: false,
-      pendingClick: 0
+      pendingClick: 0,
+      touchFirst: false
     }),
 
     computed: {
@@ -329,6 +348,8 @@
     },
 
     mounted() {
+      this.app.options = this.$fhem.app.options;
+
       let size = this.$fhem.getEl(this.item, 'Options', 'setup', 'size');
       let status = this.$fhem.getEl(this.item, 'Options', 'setup', 'status');
       let main = this.$fhem.getEl(this.item, 'Options', 'setup', 'main');
@@ -368,14 +389,21 @@
         }
       },
 
-      clickStart(val) {
+      clickStart(val, evt) {
         this.long = false;
 
+        this.$fhem.log = { type: 'intern', message: 'ClickStart: type ' + val + ':' + evt, debugLevel: 5 };
+
+        if(this.touchFirst && evt === 'mouse') return;
+        if(evt === 'touch') this.touchFirst = true;
+
         this.timer = setInterval(() => {
           this.long = true;
 
           let action = this.setup.main[this.mainLevel].[val + 'Long'];
 
+          this.$fhem.log = { type: 'intern', message: 'ClickEvent: Long ' + ' [' + action + ']', debugLevel: 5 };
+
           if(action) {
             let param = this.$fhem.handleVals(this.item, action);
             if(param[0]) {
@@ -387,18 +415,26 @@
         }, 1000)
       },
 
-      clickEnd(val) {
+      clickEnd(val, evt) {
+        this.$fhem.log = { type: 'intern', message: 'ClickEnd: type ' + val + ':' + evt, debugLevel: 5 };
+
+        if(this.touchFirst && evt === 'mouse') return;
+        if(evt === 'touch') this.touchFirst = true;
+
         this.timer = clearInterval(this.timer);
 
         let action = this.setup.main[this.mainLevel].[val + (this.long ? 'LongRelease' : 'Click')];
 
+        this.$fhem.log = { type: 'intern', message: 'ClickEvent: ' + (this.long ? 'LongRelease' : 'Click') + ' [' + action + ']', debugLevel: 5 };
+
         if(action) {
           let param = this.$fhem.handleVals(this.item, action);
           if(param[0]) {
             this.vals.main.sliderPrevent = false;
             let cmd = param[0].match('set') ? param[0] : 'set ' + this.item.Name + ' ' + param[0];
             let isIncrement = action.findIndex((e) => e.match('%i')) != -1 ? true : false;
             if(!this.long && isIncrement) this.updateReading(cmd);
+
             this.sendCmd(cmd, isIncrement);
           }
         }

src/components/TemplSonos.vue

@@ -14,6 +14,10 @@
       <v-card-title class="text-truncate">
         {{ vals.title }}
         <v-spacer />
+        <jsonList
+          v-if="app.options.debugMode"
+          :item="item"
+        />
         <v-btn
           small
           icon
@@ -156,7 +160,13 @@
 </template>
 
 <script>
+  import jsonList from '@/components/Jsonlist.vue'
+
   export default {
+    components: {
+      jsonList
+    },
+
     props: {
       item: {
         type: Object,
@@ -166,6 +176,11 @@
 
     data: () => ({
       name: 'sonos',
+      app: {
+        options: {
+          debugMode: false
+        }
+      },
       defaultSet: [
         "Volume:^[0]$:stumm::success:mdi-volume-off",
         "transportState:PLAYING:an:100:success:mdi-play",
@@ -253,6 +268,8 @@
     },
 
     mounted() {
+      this.app.options = this.$fhem.app.options;
+
       setInterval(() => {
         this.vals.systemIconValue = this.vals.systemIconValue === this.vals.playInfo1 ? this.vals.playInfo2 : this.vals.playInfo1;
       }, 3000)

src/plugins/fhem.js

@@ -72,6 +72,7 @@ export default class Fhem extends EventEmitter {
     if(target.type === 'request') { target.icon = 'mdi-send-circle-outline'; target.color = 'success' } // debugLevel 3 request
     if(target.type === 'warning') { target.icon = 'mdi-help-circle-outline'; target.color = 'warning' } // debugLevel 3 request
     if(target.type === 'info') { target.icon = 'mdi-sync'; target.color = 'success' } // debugLevel 4 request
+    if(target.type === 'intern') { target.icon = 'mdi-hexagon-multiple-outline'; target.color = 'warning' } // debugLevel 5 internals
 
     this.app.session.logLast = target;
 
@@ -196,6 +197,8 @@ export default class Fhem extends EventEmitter {
       idx ++;
     }
 
+    this.log = { type: 'intern', message: 'handle Chartdata (Lines: ' + items.length + ')', debugLevel: 5 };
+
     return result;
   }
 
@@ -216,6 +219,8 @@ export default class Fhem extends EventEmitter {
           cmd += obj.to ? ' ' + obj.to : '';
           cmd += select ? ' ' + select[0].replace(/\(|\)/g,'') : ' 4:' + defPart[1];
 
+          this.log = { type: 'intern', message: 'Loading Chartdata - ' + cmd, debugLevel: 5 };
+
           this.request([{ param: 'cmd', value: cmd }, { param: 'XHR', value: '1' }],'text', { id: idx })
             .then((res) => {
               data.push({ id: res.id, data: this.handleLogData(res.data) });