add Group component

Dashticz · Dec 30, 2023 · 8a70062 · 8a70062
1 parent 0b5bb0d
commit 8a70062
Show file tree

Hide file tree

Showing 17 changed files with 386 additions and 75 deletions.
diff --git a/css/creative.css b/css/creative.css
@@ -60,6 +60,17 @@
   padding: 5px !important;
 }
 
+/* dirty fix for group component ... */
+
+.mh.dt_block {
+  padding-top: 15px !important;
+  padding-bottom: 15px !important;
+}
+
+.mh.dt_block .col-icon {
+  margin-top: 0px;
+}
+
 .dt_column {
   flex-direction: column;
 }
@@ -687,6 +698,42 @@ a.playlist {
   margin: auto;
 }
 
+.col-dots {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  position: absolute;
+  width: 45px;
+  height: 100%;
+  right: 0px;
+  top: 0px;
+  border: 0px !important;
+}
+
+.col-icondata {
+  width: calc(100% - 45px);
+  margin: -5px;
+  padding: 5px;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.col-icondata.hover {
+  border: 0px !important;
+}
+
+.transbg.longpress::after {
+  content:"";
+  float: left;
+  bottom:0;
+  left:0;
+  top:0;
+  width:100%;
+  height:100%;
+  border-right: solid rgba(255,255,255,0.5) 5px;
+  position: absolute;
+}
+
 .btn.plus {}
 
 .btn.min {}
@@ -788,18 +835,7 @@ a.playlist {
   height: 100%;
 }
 
-.col-xs-1.block_trafficmap,
-.col-xs-2.block_trafficmap,
-.col-xs-3.block_trafficmap,
-.col-xs-4.block_trafficmap,
-.col-xs-5.block_trafficmap,
-.col-xs-6.block_trafficmap,
-.col-xs-7.block_trafficmap,
-.col-xs-8.block_trafficmap,
-.col-xs-9.block_trafficmap,
-.col-xs-10.block_trafficmap,
-.col-xs-11.block_trafficmap,
-.col-xs-12.block_trafficmap {
+.block_trafficmap {
   padding-left: 13px !important;
   padding-right: 13px !important;
   height: 200px !important;
@@ -1163,40 +1199,16 @@ p {
   clear: both;
 }
 
-.transbg.col-xs-1,
-.transbg.col-xs-2,
-.transbg.col-xs-3,
-.transbg.col-xs-4,
-.transbg.col-xs-5,
-.transbg.col-xs-6,
-.transbg.col-xs-7,
-.transbg.col-xs-8,
-.transbg.col-xs-9,
-.transbg.col-xs-10,
-.transbg.col-xs-11,
-.transbg.col-xs-12 {
+.transbg {
   padding-top: 15px;
   padding-bottom: 15px;
   border: 7px solid rgba(255, 255, 255, 0);
   background: rgba(0, 0, 0, 0.2);
   background-clip: padding-box;
 }
 
-.transbg.dark.col-xs-1,
-.transbg.dark.col-xs-2,
-.transbg.dark.col-xs-3,
-.transbg.dark.col-xs-4,
-.transbg.dark.col-xs-5,
-.transbg.dark.col-xs-6,
-.transbg.dark.col-xs-7,
-.transbg.dark.col-xs-8,
-.transbg.dark.col-xs-9,
-.transbg.dark.col-xs-10,
-.transbg.dark.col-xs-11,
-.transbg.dark.col-xs-12 {
-  border: 7px solid rgba(255, 255, 255, 0);
+.transbg.dark {
   background: rgba(0, 0, 0, 0.5);
-  background-clip: padding-box;
 }
 
 .dt_block.popup {
@@ -1223,19 +1235,7 @@ Only add this hover on NON touch devices
 */
 
 @media (hover: hover) {
-  /*
-  .transbg.col-xs-1.hover:hover,
-  .transbg.col-xs-2.hover:hover,
-  .transbg.col-xs-3.hover:hover,
-  .transbg.col-xs-4.hover:hover,
-  .transbg.col-xs-5.hover:hover,
-  .transbg.col-xs-6.hover:hover,
-  .transbg.col-xs-7.hover:hover,
-  .transbg.col-xs-8.hover:hover,
-  .transbg.col-xs-9.hover:hover,
-  .transbg.col-xs-10.hover:hover,
-  .transbg.col-xs-11.hover:hover,
-  .transbg.col-xs-12.hover:hover */
+
   html.non-touch .hover:hover{
     background: rgba(255, 255, 255, 0.1);
     background-clip: padding-box;
@@ -1278,6 +1278,7 @@ Only add this hover on NON touch devices
   --connected-color: green;
 }
 
+
 .col-xs-1,
 .col-xs-2,
 .col-xs-3,
@@ -1500,6 +1501,10 @@ img.icon {
   opacity: 1 !important;
 }
 
+.mixed.icon {
+  opacity: 1;
+}
+
 .blinds .fas.fa-arrow-up,
 .blinds .fas.fa-arrow-down,
 .blinds .fas.fa-stop-circle {
@@ -1529,6 +1534,14 @@ img.icon {
   .dt_block {
     padding: 2px !important;
   }
+
+  /* dirty fix for group component ... */
+
+  .mh.dt_block {
+    padding-top: 5px !important;
+    padding-bottom: 5px !important;
+  }
+
   .dt_title,
   .dt_state {
     margin: 2px 2px;

diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/dist/bundle.js.LICENSE.txt b/dist/bundle.js.LICENSE.txt
@@ -60,6 +60,14 @@
  *  jquery.ui.mouse.js
  */
 
+/*!
+ * long-press-event - v@version@
+ * Pure JavaScript long-press-event
+ * https://github.com/john-doherty/long-press-event
+ * @author John Doherty <www.johndoherty.info>
+ * @license MIT
+ */
+
 /*! Hammer.JS - v2.0.7 - 2016-04-22
  * http://hammerjs.github.io/
  *

diff --git a/docs/blocks/img/group.jpg b/docs/blocks/img/group.jpg
diff --git a/docs/blocks/specials/group.rst b/docs/blocks/specials/group.rst
@@ -0,0 +1,58 @@
+.. _group :
+
+Group
+=========
+
+For Dashticz a custom block type 'group' has been created with the following advantages:
+
+* Instantanious update of the group/scene status when one of the devices changes
+* By longpress on a block, a popup will open showing all the group devices.
+
+Group blocks can be recognized by the border on the right side of the block.
+
+.. image :: img/group.jpg
+
+Block parameters
+----------------
+
+.. list-table:: 
+  :header-rows: 1
+  :widths: 5 30
+  :class: tight-table
+
+  * - Parameter
+    - Description
+  * - width
+    - ``1..12``: The width of the block relative to the column width
+  * - title
+    - ``'<string>'``: Custom title for the block
+  * - icon
+    - | Defines the icon for this block, choose from: https://fontawesome.com/icons?d=gallery&m=free
+      | ``'fas fa-eye'``
+  * - image
+    - | If you want to show an image instead of an icon, place image in ``img/`` folder
+      | ``'bulb_off.png'``
+  * - idx
+    - | Domoticz group ID to be used for device selection
+      | ``'s12'``: The devices of Domoticz group 12 will be used
+      | ``12``: The devices of Domoticz group 12 will be used
+  * - devices
+    - | Domoticz device id's belonging to this group (only if ``idx`` is not defined)
+      | ``[ 1, 3, 5]``: Device id 1,3 and 5 will be used
+  * - longpress
+    - | ``true``: Enable popup on longpress of block (=default)
+      | ``false``: Disable popup
+  * - mixed
+    - | ``'on'`` (=default): The group state will be 'On' in case at least one device in the group has status 'On'
+      | ``'off'``: The group state will be 'off' in case at least one device in the group has status 'Off'
+      
+
+Example
+-------
+
+An example of a group block::
+
+    blocks['mygroup'] = {
+      type: 'group',
+      devices: [12, 14, 16]
+    }
diff --git a/js/blocks.js b/js/blocks.js
diff --git a/js/components/domoticzblock.js b/js/components/domoticzblock.js
@@ -6,20 +6,26 @@ var DT_domoticzblock = (function () {
     canHandle: function (block) {
       return block && block.idx;
     },
-    defaultCfg: {
-      width: 4,
-      batteryThreshold: settings.batteryThreshold,
-      icon: 'default',
+    defaultCfg: function(block){
+      return {
+        width: 4,
+        batteryThreshold: settings.batteryThreshold,
+        icon: 'default',
+        longpress: block&&block.idx&&(block.idx[0]==='s')
+      }
     },
     run: function (me) {
       var block = me.block;
+      var longpress = me.block.longpress?' longpress ':'';
+      var longpressdata = me.block.longpress? ' data-long-press-delay="1000" ':'';
       me.$mountPoint.html(
         '<div data-id="' +
-          block.idx +
-          '" class="mh transbg block_' +
-          block.key +
-          '"></div>'
+        block.idx + '"' + longpressdata + 
+        ' class="mh transbg block_' +
+        block.key + longpress + ' col-xs-'+me.block.width +
+        '">Getting device ' + me.block.idx + '</div>'
       );
+        me.$mountPoint.find()
       me.deviceIdx = block.idx;
       if (typeof block.idx === 'string') {
         var idxSplit = block.idx.split('_');
@@ -36,6 +42,22 @@ var DT_domoticzblock = (function () {
 
       fixBlock(me);
       addDeviceUpdateHandler(me);
+      if (me.block.longpress) {
+        me.$mountPoint.find('.block_' + block.key)[0].addEventListener('long-press', function (e) {
+          e.preventDefault();
+          console.log('long press');
+          if (me.deviceIdx[0]==='s') 
+          Domoticz.request('getscenedevices', false, { idx: me.deviceIdx.substring(1)  })
+            .then(function (res) {
+              console.log(res);
+              var devices = res.result.map(function (device) {
+                return device.DevRealIdx
+              });
+              console.log(devices);
+              DT_function.clickHandler(me, { popup: devices })
+            })
+        })
+      }
     },
     refresh: function (me) {
       fixBlock(me);