iobroker.zigbee 1.6.3 → 1.6.14

package/admin/admin.js

@@ -129,6 +129,7 @@ function getGroupCard(dev) {
         title = dev.common.name,
         lq = '<div class="col tool"><i class="material-icons icon-green">check_circle</i></div>',
         rooms = [],
+        numid = parseInt(id.replace(namespace+'.group_', '')),
         lang = systemLang  || 'en';
     for (const r in dev.rooms) {
         if (dev.rooms[r].hasOwnProperty(lang)) {
@@ -137,16 +138,17 @@ function getGroupCard(dev) {
             rooms.push(dev.rooms[r]);
         }
     }
+    devGroups[numid] = dev;
     const room = rooms.join(',') || '&nbsp';
     let memberCount = 0;
     let info = `<div style="min-height:88px; font-size: 0.8em; height: 98px; overflow-y: auto" class="truncate">
                 <ul>`;
-                info = info.concat(`<li><span class="labelinfo">Group ${id.replace(namespace+'.group_', '')}</span></li>`);
+                info = info.concat(`<li><span class="labelinfo">Group ${numid}</span></li>`);
     if (dev.memberinfo === undefined) {
         info = info.concat(`<li><span class="labelinfo">No devices in group</span></li>`);
     } else {
         for (let m=0;m < dev.memberinfo.length; m++) {
-            info = info.concat(`<li><span class="labelinfo">${dev.memberinfo[m].name}</span><span> ...${dev.memberinfo[m].ieee.slice(-4)}</span></li>`);
+            info = info.concat(`<li><span align:"left">${dev.memberinfo[m].device}.${dev.memberinfo[m].epid}</span><span align:"right"> ...${dev.memberinfo[m].ieee.slice(-4)}</span></li>`);
         }
         memberCount = (dev.memberinfo.length<8?dev.memberinfo.length:7);
     };
@@ -154,7 +156,7 @@ function getGroupCard(dev) {
                 </div>`);
     const image = `<img src="img/group_${memberCount}.png" width="80px" onerror="this.onerror=null;this.src='img/unavailable.png';">`;
     const dashCard = getDashCard(dev,`img/group_${memberCount}.png` );
-    const card = `<div id="${id}" class="device">
+    const card = `<div id="${id}" class="device group">
                   <div class="card hoverable flipable">
                     <div class="front face">${dashCard}</div>
                     <div class="back face">
@@ -187,14 +189,19 @@ function getGroupCard(dev) {
     return card;
 }
 
-
+function sanitizeModelParameter(parameter) {
+    const replaceByUnderscore = /[\s/]/g;
+    return parameter.replace(replaceByUnderscore, '_');
+}
 
 function getCard(dev) {
     const title = dev.common.name,
         id = dev._id,
-        type = (dev.common.type ? dev.common.type.replace('/','_'):'unknown'),
+        type = (dev.common.type ? dev.common.type : 'unknown'),
+        type_url = (dev.common.type ? sanitizeModelParameter(dev.common.type) : 'unknown'),
         img_src = dev.icon || dev.common.icon,
         rooms = [],
+        isActive = (dev.common.deactivated ? false : true),
         lang = systemLang  || 'en';
     for (const r in dev.rooms) {
         if (dev.rooms[r].hasOwnProperty(lang)) {
@@ -206,14 +213,14 @@ function getCard(dev) {
     const room = rooms.join(',') || '&nbsp';
     const paired = (dev.paired) ? '' : '<i class="material-icons right">leak_remove</i>';
     const rid = id.split('.').join('_');
-    const modelUrl = (!type) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${type}.html" target="_blank" rel="noopener noreferrer">${type}</a>`;
+    const modelUrl = (!type) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${type_url}.html" target="_blank" rel="noopener noreferrer">${type}</a>`;
     const image = `<img src="${img_src}" width="80px" onerror="this.onerror=null;this.src='img/unavailable.png';">`,
         nwk = (dev.info && dev.info.device) ? dev.info.device._networkAddress : undefined,
-        battery_cls = getBatteryCls(dev.battery),
+        battery_cls = (isActive ? getBatteryCls(dev.battery):''),
         lqi_cls = getLQICls(dev.link_quality),
-        battery = (dev.battery) ? `<div class="col tool"><i id="${rid}_battery_icon" class="material-icons ${battery_cls}">battery_std</i><div id="${rid}_battery" class="center" style="font-size:0.7em">${dev.battery}</div></div>` : '',
-        lq = (dev.link_quality) > 0 ? `<div class="col tool"><i id="${rid}_link_quality_icon" class="material-icons ${lqi_cls}">network_check</i><div id="${rid}_link_quality" class="center" style="font-size:0.7em">${dev.link_quality}</div></div>` : '',
-        status = (dev.link_quality) > 0 ? `<div class="col tool"><i class="material-icons icon-green">check_circle</i></div>` : `<div class="col tool"><i class="material-icons icon-black">leak_remove</i></div>`,
+        battery = (dev.battery && isActive) ? `<div class="col tool"><i id="${rid}_battery_icon" class="material-icons ${battery_cls}">battery_std</i><div id="${rid}_battery" class="center" style="font-size:0.7em">${dev.battery}</div></div>` : '',
+        lq = (dev.link_quality > 0 && isActive) ? `<div class="col tool"><i id="${rid}_link_quality_icon" class="material-icons ${lqi_cls}">network_check</i><div id="${rid}_link_quality" class="center" style="font-size:0.7em">${dev.link_quality}</div></div>` : '',
+        status = (dev.link_quality > 0 && isActive) ? `<div class="col tool"><i class="material-icons icon-green">check_circle</i></div>` : (isActive ? `<div class="col tool"><i class="material-icons icon-black">leak_remove</i></div>`:''),
         info = `<div style="min-height:88px; font-size: 0.8em" class="truncate">
                     <ul>
                         <li><span class="labelinfo">ieee:</span><span>0x${id.replace(namespace+'.', '')}</span></li>
@@ -223,10 +230,11 @@ function getCard(dev) {
                     </ul>
                 </div>`,
         permitJoinBtn = (dev.info && dev.info.device._type == 'Router') ? '<button name="join" class="btn-floating btn-small waves-effect waves-light right hoverable green"><i class="material-icons tiny">leak_add</i></button>' : '',
+        deactBtn = `<button name="swapactive" class="right btn-flat btn-small tooltipped" title="${(isActive?'Deactivate':'Activate')}"><i class="material-icons icon-${(isActive?'red':'green')}">power_settings_new</i></button>`,
         infoBtn = (nwk) ? `<button name="info" class="left btn-flat btn-small"><i class="material-icons icon-blue">info</i></button>` : '';
     const dashCard = getDashCard(dev);
     const card = `<div id="${id}" class="device">
-                  <div class="card hoverable flipable">
+                  <div class="card hoverable flipable  ${isActive?'':'bg_red'}">
                     <div class="front face">${dashCard}</div>
                     <div class="back face">
                         <div class="card-content zcard">
@@ -254,6 +262,10 @@ function getCard(dev) {
                                 <button name="edit" class="right btn-flat btn-small">
                                     <i class="material-icons icon-green">edit</i>
                                 </button>
+                                <button name="reconfigure" class="right btn-flat btn-small tooltipped" title="Reconfigure">
+                                    <i class="material-icons icon-red">sync</i>
+                                </button>
+                                ${deactBtn}
                                 ${permitJoinBtn}
                             </div>
                         </div>
@@ -344,25 +356,96 @@ function cleanConfirmation() {
     Materialize.updateTextFields();
 }
 
+function EndPointIDfromEndPoint(ep)
+{
+  if (ep && ep.deviceIeeeAddress && ep.ID)
+    return `${ep.deviceIeeeAddress}:${ep.ID}`;
+  return 'unidentified';
+}
+
 function editName(id, name) {
+  console.log('editName called with '+name);
     const dev = devices.find((d) => d._id == id);
     $('#modaledit').find("input[id='d_name']").val(name);
-    if (dev.info && dev.info.device._type == 'Router') {
-        list2select('#d_groups', groups, devGroups[id] || []);
-        $('#modaledit').find('.input-field.groups').removeClass('hide');
-    } else {
-        $('#modaledit').find('.input-field.groups').addClass('hide');
-    }
+//    if (dev.info && dev.info.device._type == 'Router') {
+      const groupables = [];
+      if (dev && dev.info && dev.info.endpoints) {
+        for (const ep of dev.info.endpoints) {
+          if (ep.inputClusters.includes(4)) {
+            groupables.push({ epid:EndPointIDfromEndPoint(ep), ep:ep, memberOf:[]});
+          }
+        }
+      }
+      const numEP = groupables.length;
+//      console.log('groupables: '+JSON.stringify(groupables));
+      $('#modaledit').find('.row.epid0').addClass('hide');
+      $('#modaledit').find('.row.epid1').addClass('hide');
+      $('#modaledit').find('.row.epid2').addClass('hide');
+      $('#modaledit').find('.row.epid3').addClass('hide');
+      if (numEP > 0) {
+        // go through all the groups. Find the ones to list for each groupable
+        if (numEP == 1) {
+          $('#modaledit').find('.endpointid').addClass('hide');
+        }
+        else {
+          $('#modaledit').find('.endpointid').removeClass('hide');
+        }
+        for (const d of devices) {
+          if (d && d.common && d.common.type == 'group') {
+            if (d.hasOwnProperty("memberinfo")) {
+              for (const member of d.memberinfo) {
+                const epid = EndPointIDfromEndPoint(member.ep)
+                for (var i=0;i<groupables.length;i++) {
+                  if (groupables[i].epid == epid) {
+                    groupables[i].memberOf.push(d.native.id.replace('group_', ''));
+                  }
+                }
+              }
+            }
+          }
+        }
+        console.log("groupables: " + JSON.stringify(groupables));
+        for (var i = 0;i<groupables.length;i++)
+        {
+          if (i > 1) {
+            $('#modaledit').find("translate.device_with_endpoint").innerHtml = name + ' ' + groupables[i].epid;
+          }
+          $('#modaledit').find('.row.epid'+i).removeClass('hide');
+          list2select('#d_groups_ep'+i, groups, groupables[i].memberOf || []);
+        }
+      }
+//    } else {
+//        $('#modaledit').find('.input-field.endpoints').addClass('hide');
+//        $('#modaledit').find('.input-field.groups').addClass('hide');
+//    }
     $("#modaledit a.btn[name='save']").unbind('click');
     $("#modaledit a.btn[name='save']").click(() => {
-        const newName = $('#modaledit').find("input[id='d_name']").val(),
-            newGroups = $('#d_groups').val();
-        updateDev(id, newName, newGroups);
+        const newName = $('#modaledit').find("input[id='d_name']").val();
+        const groupsbyid = {};
+        if (groupables.length  > 0) {
+          for (var i = 0;i<groupables.length;i++) {
+            const ng = $('#d_groups_ep'+i).val();
+            if (ng.toString() != groupables[i].memberOf.toString())
+            groupsbyid[groupables[i].ep.ID] = GenerateGroupChange(groupables[i].memberOf, ng);
+          }
+        }
+        console.log('grpid ' + JSON.stringify(groupsbyid));
+        updateDev(id, newName, groupsbyid);
     });
     $('#modaledit').modal('open');
     Materialize.updateTextFields();
 }
 
+function GenerateGroupChange(oldmembers, newmembers)
+{
+  let grpchng = [];
+  for (const oldg of oldmembers)
+    if (!newmembers.includes(oldg)) grpchng.push('-'+oldg);
+  for (const newg of newmembers)
+    if (!oldmembers.includes(newg)) grpchng.push(newg)
+  return grpchng;
+}
+
 function deleteDevice(id, force) {
     sendTo(namespace, 'deleteDevice', {id: id, force: force}, function (msg) {
         closeWaitingDialog();
@@ -434,7 +517,6 @@ function showDevices() {
         }
         return 0;
     });
-    devGroups = {};
     for (let i=0;i < devices.length; i++) {
         const d = devices[i];
         if (!d.info) {
@@ -451,7 +533,7 @@ function showDevices() {
         } else {
         //if (d.groups && d.info && d.info.device._type == "Router") {
             if (d.groups) {
-                devGroups[d._id] = d.groups;
+//                devGroups[d._id] = d.groups;
                 if (typeof d.groups.map == 'function') {
                     d.groupNames = d.groups.map(item=>{
                         return groups[item] || '';
@@ -525,7 +607,7 @@ function showDevices() {
         const dev_block = $(this).parents('div.device'),
             id = dev_block.attr('id').replace(namespace+'.group_', ''),
             name = getDevName(dev_block);
-        editGroupName(id, name);
+        editGroupName(id, name, false);
     });
     $("button.btn-floating[name='join']").click(function() {
         const dev_block = $(this).parents('div.device');
@@ -544,6 +626,14 @@ function showDevices() {
     $("a.btn-flat[name='close']").click((e) => {
         closeReval(e);
     });
+    $(".card-reveal-buttons button[name='reconfigure']").click(function() {
+        const dev_block = $(this).parents('div.device');
+        reconfigureDlg(getDevId(dev_block));
+    });
+    $(".card-reveal-buttons button[name='swapactive']").click(function() {
+        const dev_block = $(this).parents('div.device');
+        swapActive(getDevId(dev_block));
+    });
 
     showNetworkMap(devices, map);
     translateAll();
@@ -656,7 +746,7 @@ function getDevices() {
 }
 
 function getDeviceCards() {
-    return $('#devices .device');
+    return $('#devices .device').not(".group");
 }
 
 function getDeviceCard(devId) {
@@ -758,13 +848,14 @@ function load(settings, onChange) {
     });
 
     $('#add_group').click(function() {
+//        showGroupList(true);
         const maxind = parseInt(Object.getOwnPropertyNames(groups).reduce((a,b) => a>b ? a : b, 0));
-        editGroupName(maxind+1, '');
+        editGroupName(maxind+1, 'Group ' + maxind+1, true);
     });
     $('#add_grp_btn').click(function() {
+//        showGroupList(true);
         const maxind = parseInt(Object.getOwnPropertyNames(groups).reduce((a,b) => a>b ? a : b, 0));
-        editGroupName(maxind+1, '');
-        getDevices();
+        editGroupName(maxind+1, 'Group ' + maxind+1, true);
     });
 
     $(document).ready(function() {
@@ -1702,7 +1793,7 @@ function showGroups() {
     $("a.btn-floating[name='groupedit']").click(function() {
         const index = $(this).attr('id'),
             name = groups[index];
-        editGroupName(index, name);
+        editGroupName(index, name, false);
     });
     $("a.btn-floating[name='groupdelete']").click(function() {
         const index = $(this).attr('id'),
@@ -1711,8 +1802,35 @@ function showGroups() {
     });
 }
 
-function editGroupName(id, name) {
+function editGroupName(id, name, isnew) {
+    //const dev = devices.find((d) => d._id == id);
+    //console.log('devices: '+ JSON.stringify(devices));
+    const groupables = [];
+    for (const d of devices) {
+      if (d && d.info && d.info.endpoints) {
+        for (const ep of d.info.endpoints) {
+          if (ep.inputClusters.includes(4))
+          {
+            groupables.push(ep);
+          }
+        }
+      }
+      //console.log('device ' + JSON.stringify(d));
+    }
+
     //var text = 'Enter new name for "'+name+'" ('+id+')?';
+    if (isnew) {
+          $('#groupedit').find('.editgroup').addClass('hide');
+          $('#groupedit').find('.addgroup').removeClass('hide');
+          $('#groupedit').find('.input-field.members').addClass('hide');
+          $('#groupedit').find('.input-field.groupid').removeClass('hide');
+    }
+    else {
+          $('#groupedit').find('.editgroup').removeClass('hide');
+          $('#groupedit').find('.addgroup').addClass('hide');
+          $('#groupedit').find('.input-field.members').removeClass('hide');
+          $('#groupedit').find('.input-field.groupid').addClass('hide');
+    }
     $('#groupedit').find("input[id='g_index']").val(id);
     $('#groupedit').find("input[id='g_name']").val(name);
     $("#groupedit a.btn[name='save']").unbind('click');
@@ -1721,7 +1839,7 @@ function editGroupName(id, name) {
             newName = $('#groupedit').find("input[id='g_name']").val();
         updateGroup(id, newId, newName);
 //        showGroups();
-        getDevices();
+//        getDevices();
     });
     $('#groupedit').modal('open');
     Materialize.updateTextFields();
@@ -1735,7 +1853,7 @@ function deleteGroupConfirmation(id, name) {
     $("#modaldelete a.btn[name='yes']").click(() => {
         deleteGroup(id);
 //        showGroups();
-        getDevices();
+//        getDevices();
     });
     $('#modaldelete').modal('open');
 }
@@ -1743,12 +1861,22 @@ function deleteGroupConfirmation(id, name) {
 function updateGroup(id, newId, newName) {
     delete groups[id];
     groups[newId] = newName;
-    sendTo(namespace, 'renameGroup', { id: newId, name: newName} );
+    sendTo(namespace, 'renameGroup', { id: newId, name: newName}, function(msg) {
+        if (msg && ms.error) {
+            showMessage(msg.error, _('Error'));
+        }
+        getDevices();
+    });
 }
 
 function deleteGroup(id) {
     delete groups[id];
-    sendTo(namespace, 'deleteGroup', id );
+    sendTo(namespace, 'deleteGroup', id , function(msg) {
+        if (msg && ms.error) {
+            showMessage(msg.error, _('Error'));
+        }
+        getDevices();
+    });
 }
 
 function updateDev(id, newName, newGroups) {
@@ -1756,6 +1884,24 @@ function updateDev(id, newName, newGroups) {
     if (dev && dev.common.name != newName) {
         renameDevice(id, newName);
     }
+    const keys = Object.keys(newGroups)
+    if (keys && keys.length)
+    {
+      sendTo(namespace, 'updateGroupMembership', { id: id, groups: newGroups }, function (msg) {
+          closeWaitingDialog();
+          if (msg && msg.error) {
+                  showMessage(msg.error, _('Error'));
+              }
+              else {
+              // save dev-groups on success
+                  dev.groups = newGroups;
+              }
+          showDevices();
+      });
+      showWaitingDialog('Updating group memberships', 10);
+
+    }
+/*
     if (dev.info.device._type == 'Router') {
         const oldGroups = devGroups[id] || [];
         if (oldGroups.toString() != newGroups.toString()) {
@@ -1772,6 +1918,7 @@ function updateDev(id, newName, newGroups) {
             });
         }
     }
+*/
 }
 
 function resetConfirmation() {
@@ -2166,7 +2313,7 @@ function genDevInfo(device) {
     const dev = (device && device.info) ? device.info.device : undefined;
     const mapped = (device && device.info) ? device.info.mapped : undefined;
     if (!dev) return `<div class="truncate">No info</div>`;
-    const genRow = function(name, value) {
+    const genRow = function(name, value, refresh) {
         if (value === undefined) {
             return '';
         } else {
@@ -2185,7 +2332,7 @@ function genDevInfo(device) {
             }).join('');
         }
     };
-    const modelUrl = (!mapped) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${mapped.model}.html" target="_blank" rel="noopener noreferrer">${mapped.model}</a>`;
+    const modelUrl = (!mapped) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${sanitizeModelParameter(mapped.model)}.html" target="_blank" rel="noopener noreferrer">${mapped.model}</a>`;
     const mappedInfo = (!mapped) ? '' :
         `<div style="font-size: 0.9em">
             <ul>
@@ -2230,7 +2377,7 @@ function genDevInfo(device) {
                     ${genRow('date code', dev._dateCode)}
                     ${genRow('build', dev._softwareBuildID)}
                     ${genRow('interviewed', dev._interviewCompleted)}
-                    ${genRow('configured', (dev.meta.configured === 1))}
+                    ${genRow('configured', (dev.meta.configured === 1), true)}
                 </ul>
             </div>
         </div>
@@ -2246,17 +2393,60 @@ function showDevInfo(id){
     $('#modaldevinfo').modal('open');
 }
 
+function showGroupList(show){
+    const htmlsections = [];
+    for (const groupid in devGroups) {
+      const dev = devGroups[groupid];
+      const grpname = (dev.common && dev.common.name?dev.common.name:'Group '+groupid);
+      const selectables = [];
+      const members = [];
+      if (dev && dev.memberinfo)
+      {
+        selectables.push(`<select id="members_${groupid}" multiple>`)
+        for (let m=0;m<dev.memberinfo.length; m++) {
+          members.push(`${dev.memberinfo[m].device}.${dev.memberinfo[m].epid} (${dev.memberinfo[m].ieee})`)
+          selectables.push(`<option value="${m}">${dev.memberinfo[m].device}.${dev.memberinfo[m].epid} (...${dev.memberinfo[m].ieee.slice(-4)})</option>`);
+        }
+        selectables.push('</select>');
+      }
+      htmlsections.push(`
+        <div class="row">
+          <div class="col s4 m4 l4">
+              <h5>${grpname}<h5>
+          </div>
+          <div class=col s7 m7 l7">
+          ${members.join('<br>')}
+          </div>
+        </div>
+        `);
+    }
+
+    $('#grouplist').html(htmlsections.join(''));
+    $('#add').click(function() {
+        const maxind = parseInt(Object.getOwnPropertyNames(groups).reduce((a,b) => a>b ? a : b, 0));
+        editGroupName(maxind+1, 'Group ' + maxind+1, true);
+        showGroupList(false);
+    });
+
+    $("#modalgrouplist a.btn[name='save']").unbind('click');
+    $("#modalgrouplist a.btn[name='save']").click(() => {
+    });
+    if (show) $('#modalgrouplist').modal('open');
+}
+
+let waitingTimeout, waitingInt;
 
 function showWaitingDialog(text, timeout){
     let countDown = timeout;
-    const waitingInt = setInterval(function() {
+    waitingInt = setInterval(function() {
         countDown -= 1;
         const percent = 100-100*countDown/timeout;
         $('#waiting_progress_line').css('width', `${percent}%`);
     }, 1000);
-    setTimeout(function() {
+    waitingTimeout = setTimeout(function() {
         $('#waiting_progress_line').css('width', `0%`);
         clearTimeout(waitingInt);
+        clearTimeout(waitingTimeout);
         $('#modalWaiting').modal('close');
     }, timeout*1000);
     $('#waiting_message').text(text);
@@ -2264,6 +2454,8 @@ function showWaitingDialog(text, timeout){
 }
 
 function closeWaitingDialog(){
+    if (waitingInt) clearTimeout(waitingInt);
+    if (waitingTimeout) clearTimeout(waitingTimeout);
     $('#modalWaiting').modal('close');
 }
 
@@ -2427,10 +2619,10 @@ function showExclude() {
         const exclude_dev = devices.find((d) => d.common.type == exclude_id) || {common: {name: exclude_id}};
         // exclude_icon = (exclude_dev.icon) ? `<img src="${exclude_dev.icon}" width="64px">` : '';
 
-        const modelUrl = (!exclude_id) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${exclude_id}.html" target="_blank" rel="noopener noreferrer">${exclude_id}</a>`;
+        const modelUrl = (!exclude_id) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${sanitizeModelParameter(exclude_id)}.html" target="_blank" rel="noopener noreferrer">${exclude_id}</a>`;
 
         const card = `
-                    <div id="${exclude_id}" class="exclude col s12 m6 l4 xl3">
+                    <div id="${exclude_id}" class="exclude col s12 m6 l4 xl3" style="height: 135px;padding-bottom: 10px;">
                         <div class="card hoverable">
                             <div class="card-content zcard">
                                 <i class="left"><img src="${exclude_dev.icon}" width="64px" onerror="this.onerror=null;this.src='img/unavailable.png';"></i>
@@ -2546,6 +2738,7 @@ function getDashCard(dev, groupImage) {
     id = dev._id,
     type = dev.common.type,
     img_src = (groupImage ? groupImage: dev.icon || dev.common.icon),
+    isActive = (dev.common.deactivated ? false : true),
     rooms = [],
     lang = systemLang  || 'en';
     const paired = (dev.paired) ? '' : '<i class="material-icons right">leak_remove</i>';
@@ -2555,12 +2748,12 @@ function getDashCard(dev, groupImage) {
         nwk = (dev.info && dev.info.device) ? dev.info.device._networkAddress : undefined,
         battery_cls = getBatteryCls(dev.battery),
         lqi_cls = getLQICls(dev.link_quality),
-        battery = (dev.battery) ? `<div class="col tool"><i id="${rid}_battery_icon" class="material-icons ${battery_cls}">battery_std</i><div id="${rid}_battery" class="center" style="font-size:0.7em">${dev.battery}</div></div>` : '',
-        lq = (dev.link_quality) > 0 ? `<div class="col tool"><i id="${rid}_link_quality_icon" class="material-icons ${lqi_cls}">network_check</i><div id="${rid}_link_quality" class="center" style="font-size:0.7em">${dev.link_quality}</div></div>` : '<div class="col tool"><i class="material-icons icon-green">check_circle</i></div>',
-        status = (dev.link_quality) > 0 ? `<div class="col tool"><i class="material-icons icon-green">check_circle</i></div>` : (groupImage ? '': `<div class="col tool"><i class="material-icons icon-black">leak_remove</i></div>`),
-        permitJoinBtn = (dev.info && dev.info.device._type == 'Router') ? '<button name="join" class="btn-floating btn-small waves-effect waves-light right hoverable green"><i class="material-icons tiny">leak_add</i></button>' : '',
+        battery = (dev.battery && isActive) ? `<div class="col tool"><i id="${rid}_battery_icon" class="material-icons ${battery_cls}">battery_std</i><div id="${rid}_battery" class="center" style="font-size:0.7em">${dev.battery}</div></div>` : '',
+        lq = (dev.link_quality > 0 && isActive) ? `<div class="col tool"><i id="${rid}_link_quality_icon" class="material-icons ${lqi_cls}">network_check</i><div id="${rid}_link_quality" class="center" style="font-size:0.7em">${dev.link_quality}</div></div>` : (isActive ? '<div class="col tool"><i class="material-icons icon-green">check_circle</i></div>':''),
+        status = (dev.link_quality > 0 && isActive) ? `<div class="col tool"><i class="material-icons icon-green">check_circle</i></div>` : (groupImage || !isActive ? '': `<div class="col tool"><i class="material-icons icon-black">leak_remove</i></div>`),
+        permitJoinBtn = (isActive && dev.info && dev.info.device._type == 'Router') ? '<button name="join" class="btn-floating btn-small waves-effect waves-light right hoverable green"><i class="material-icons tiny">leak_add</i></button>' : '',
         infoBtn = (nwk) ? `<button name="info" class="left btn-flat btn-small"><i class="material-icons icon-blue">info</i></button>` : '',
-        idleTime = (dev.link_quality_lc > 0) ? `<div class="col tool"><i id="${rid}_link_quality_lc_icon" class="material-icons idletime">access_time</i><div id="${rid}_link_quality_lc" class="center" style="font-size:0.7em">${getIdleTime(dev.link_quality_lc)}</div></div>` : '';
+        idleTime = (dev.link_quality_lc > 0 && isActive) ? `<div class="col tool"><i id="${rid}_link_quality_lc_icon" class="material-icons idletime">access_time</i><div id="${rid}_link_quality_lc" class="center" style="font-size:0.7em">${getIdleTime(dev.link_quality_lc)}</div></div>` : '';
     const info = (dev.statesDef) ? dev.statesDef.map((stateDef)=>{
         const id = stateDef.id;
         const sid = id.split('.').join('_');
@@ -2587,7 +2780,7 @@ function getDashCard(dev, groupImage) {
         return `<li><span class="label dash truncate">${stateDef.name}</span><span id=${sid} oid=${id} class="state">${val}</span></li>`;
     }).join('') : '';
     const dashCard = `
-        <div class="card-content zcard">
+        <div class="card-content zcard ${isActive?'':'bg_red'}">
             <div class="flip" style="cursor: pointer">
             <span class="top right small" style="border-radius: 50%">
                 ${idleTime}
@@ -2600,7 +2793,7 @@ function getDashCard(dev, groupImage) {
             <i class="left">${image}</i>
             <div style="min-height:88px; font-size: 0.8em; height: 130px; overflow-y: auto" class="truncate">
                 <ul>
-                    ${info}
+                    ${(isActive?info:'Device deactivated')}
                 </ul>
             </div>
             <div class="footer right-align"></div>
@@ -2698,3 +2891,36 @@ function removeDevice(id) {
         }
     }
 }
+
+function swapActive(id) {
+  const dev = getDeviceByID(id);
+  if (dev && dev.common) {
+     dev.common.deactivated = !(dev.common.deactivated)
+     sendTo(namespace, 'setDeviceActivated', {id: id, deactivated: dev.common.deactivated}, function () {
+        showDevices();
+    });
+  }
+}
+
+function reconfigureDlg(id) {
+    const text = translateWord(`Do you really want to reconfigure device?`);
+    $('#modalreconfigure').find('p').text(text);
+    $("#modalreconfigure a.btn[name='yes']").unbind('click');
+    $("#modalreconfigure a.btn[name='yes']").click(() => {
+        reconfigureDevice(id, force);
+    });
+    $('#modalreconfigure').modal('open');
+    Materialize.updateTextFields();
+}
+
+function reconfigureDevice(id) {
+    sendTo(namespace, 'reconfigure', {id: id}, function (msg) {
+        closeWaitingDialog();
+        if (msg) {
+            if (msg.error) {
+                showMessage(msg.error, _('Error'));
+            }
+        }
+    });
+    showWaitingDialog('Device is being reconfigure', 30);
+}