iobroker.zigbee 3.1.5 → 3.2.0

package/admin/admin.js

@@ -9,6 +9,7 @@ const Materialize = (typeof M !== 'undefined') ? M : Materialize,
     namespace = 'zigbee.' + instance,
     namespaceLen = namespace.length;
 let devices = [],
+    models = [],
     debugDevices = [],
     messages = [],
     map = {},
@@ -17,6 +18,7 @@ let devices = [],
     network,
     networkEvents,
     responseCodes = false,
+    localConfigData = {},
     groups = {},
     devGroups = {}, // eslint-disable-line prefer-const
     binding = [],
@@ -92,12 +94,12 @@ function keepAlive(callback) {
 }
 
 function startKeepalive() {
-    return setInterval(keepAlive, 10000);
+    return setInterval(() => UpdateAdapterAlive(false), 120000);
 }
 
 function UpdateAdapterAlive(state) {
-    if (connectionStatus.connected === state) return;
     connectionStatus.time = Date.now();
+    if (connectionStatus.connected === state) return;
     if (state) {
         $('#adapterStopped_btn').addClass('hide');
         $('#code_pairing').removeClass('disabled');
@@ -180,7 +182,11 @@ function getLQICls(value) {
 
 function sanitizeModelParameter(parameter) {
     const replaceByUnderscore = /[\s/]/g;
-    return parameter.replace(replaceByUnderscore, '_');
+    try {
+        return parameter.replace(replaceByUnderscore, '_');
+    }
+    catch { /* intentionally empty*/ }
+    return parameter;
 }
 
 /////
@@ -189,88 +195,281 @@ function sanitizeModelParameter(parameter) {
 //
 ////
 
+const LocalDataDisplayValues = {
+    unfoldedModels : [], // [{ model:plug01, devices: true/false, options: true/false}]
+    unfoldedDevices : [], // [{ device:0xdeadbeefdeadbeef, show: true/false}]
+    buttonSet: new Set(),
+    showModels: true,
+    sortedKeys : [],
+    sortMethod: function (a, b) { return 0 },
+    filterMethod: function (a) { return true },
+}
 
-function getModelData(data) {
-    console.warn(JSON.stringify(data));
-    const devicesByModel = {};
-    for (const dev of data) {
-        const modelID = dev.info?.mapped?.model || dev.info.device.modelZigbee || dev.info.device.name || 'unknown';
-        if (devicesByModel[modelID])
-            devicesByModel[modelID].devices.push(dev);
-        else devicesByModel[modelID] = {devices:[dev], icon:dev.common.icon};
+function updateFoldModel(model, devices, options) {
+    const m = LocalDataDisplayValues.unfoldedModels.find((c) => c.model === model);
+    if (!m) {
+        const ml = {model, devices: (devices === undefined ? false: devices), options: (options === undefined ? false : options)}
+        LocalDataDisplayValues.unfoldedModels.push(ml)
+        return ml;;
     }
-    console.warn(JSON.stringify(devicesByModel));
+    if (devices) m.devices = !m.devices;
+    if (options) m.options = !m.options;
+    return m;
+}
+
+
+function getModelData(data, models, keys) {
     const Html = [];
-    // Html.push(`<ul class="collapsible">`);
-    Html.push(`<ul class="collection">`)
-    for (const key of Object.keys(devicesByModel)) {
-        const model = devicesByModel[key];
-        Html.push(`<li class="collection-item avatar>`);
-        //Html.push(`<li>`)
-        //Html.push(`<div class="collapsible-header"><img src=${model.iccon} alt="" class="circle" width="40" height="auto">&nbsp;Paired Models</div>`);
-        //Html.push(`<div class="collapsile-body"<span>${getDeviceData(model.devices)}</span></div>`);
-        Html.push(`<img src = ${model.iccon} alt="" class="circle" width="40" height="auto">`);
-        Html.push(`<span class=title></p>`);
-        Html.push(getDeviceData(model.devices).join('<br>'))
-        Html.push(`</p><a href="#!" class="secondary-content"><i class="material-icons">grade</i></a></li>`)
-    }
-    Html.push('</ul>');
+    const s = new Set();
+    for (const k of keys) {
+        const model = models[k];
+        const key = model.model.model;
+        //console.warn(`getmodeldata: model is ${key}, sO: ${JSON.stringify(model.setOptions)}`);
+        const numOptions = Object.keys(model.setOptions).length + ((typeof model.setOptions.options === 'object' && model.setOptions.options != null) ? Object.keys(model.setOptions.options).length-1 : 0);
+        const foldData = updateFoldModel(key, undefined, undefined);
+        let numrows = 1;
+        if (foldData.devices) numrows +=  model.devices.length;
+        if (numOptions > 0) numrows += 1;
+        if (foldData.options) numrows += numOptions;
+        const d_btn_name = `d_toggle_${k}`;
+        const e_btn_name = `m_edit_${k}`;
+        const d_btn_tip = `fold / unfold devices of ${key}`;
+        const e_btn_tip = `edit model ${key}`;
+        const d_btn = btnParam(d_btn_name, d_btn_tip, foldData.devices ? 'expand_less' : 'expand_more', false);
+        const e_btn = btnParam(e_btn_name, e_btn_tip, 'edit', 'green', false)
+        LocalDataDisplayValues.buttonSet.add(d_btn_name);
+        LocalDataDisplayValues.buttonSet.add(e_btn_name);
+        const devtxt = (model.devices.length && !foldData.devices) ? `${model.devices.length} ${model.model.type}${model.devices.length > 1 ? 's' : ''}` : '';
+        Html.push(`<tr id="datarowodd">
+            <td rowspan="${numrows}" width="15%"><img src=${model.model.icon} class="dev_list"></td>
+            <td colspan="2">Model ${key}</td><td>${devtxt}</td>
+            <td>${d_btn}&nbsp;${e_btn}</td></tr>`)
+        let cnt = 0;
+        if (foldData.devices) {
+            let isOdd = false;
+            for (const dev of model.devices) {
+                let devieee = dev._id.replace(`${namespace}.`, '');
+
+                if (devieee == undefined) devieee = 'unknown' + cnt++;
+                //LocalDataDisplayValues.buttonSet.add(`d_delete_${devieee}`);
+                LocalDataDisplayValues.buttonSet.add(`d_delall_${k}-${devieee}`);
+                LocalDataDisplayValues.buttonSet.add(`d_disen_${k}-${devieee}`);
+
+                //const bn = btnParam(`d_delete_${devieee}`, `delete device ${devieee}`, 'delete', 'red darken-4', false);
+                const bna = btnParam(`d_delall_${k}-${devieee}`, `completely delete device ${devieee}`, 'delete_forever', 'red accent-4', false);
+                const bta = !dev.common.deactivated ? btnParam(`d_disen_${k}-${devieee}`, `disable device ${devieee}`, 'power_settings_new', 'green accent-4', false) : btnParam(`d_disen_${k}-${devieee}`, `enable device ${devieee}`, 'power_settings_new', 'red accent-4', false);
+                Html.push(`<tr id="datarow${isOdd ? 'opt':'even'}${dev.common.deactivated ? '_red' : ''}"><td width="1%"><i class="material-icons small">devices</i></td><td width="25%">${devieee}</td><td width="45%">${dev.common.name}</td><td width="10%">${bna}${bta}<td></tr>`)
+                isOdd = !isOdd;
+            }
+        }
+        if (numOptions > 0) {
+            const o_btn_name = `o_toggle_${k}`;
+            const o_btn_tip = `fold / unfold options for Model ${key}`;
+            LocalDataDisplayValues.buttonSet.add(o_btn_name);
+            const opttxt = (numOptions > 0 && !(foldData.options)) ? `${numOptions} global option${numOptions > 1 ? 's' : ''}` :''
+            Html.push(`<tr id="datarowodd">
+                <td colspan="2">Model ${key}</td><td>${opttxt}</td>
+                <td>${btnParam(o_btn_name, o_btn_tip, foldData.options ? 'expand_less' : 'expand_more')}</td></tr>`)
+            if (foldData.options) {
+                let isOdd = false;
+                for (const key of Object.keys(model.setOptions)) {
+                    if (typeof model.setOptions[key] === 'object') {
+                        const oo = model.setOptions[key];
+                        for (const ok of Object.keys(oo)) {
+                            LocalDataDisplayValues.buttonSet.add(`o_delete_${k}-${ok}`);
+                            const btn = btnParam(`o_delete_${k}-${ok}`, `delete option ${ok}`, 'delete', 'red darken-4', false);
+                            Html.push(`<tr id="datarow${isOdd ? 'opt':'even'}"><td width="1%"><i class="material-icons small">blur_circular</i></td><td width="25%">${ok}</td><td width="45%" ${oo[ok] === undefined ? 'id="datared">"not set on model"' : '>'+oo[ok]}</td><td>${btn}</td></tr>`)
+                            isOdd = !isOdd;
+                        }
+                    }
+                    else {
+                        LocalDataDisplayValues.buttonSet.add(`l_delete_${k}-${key}`);
+                        const btn = btnParam(`l_delete_${k}-${key}`, `delete option ${key}`, 'delete', 'red darken-4', false);
+                        if (key==='icon') {
+                            const icontext = model.setOptions[key] === undefined ? 'id="datared">"not set on model"' : `>${model.setOptions[key]}`;
+                            const icon = model.setOptions[key]=== undefined ? '' : `<img src=${model.setOptions[key]} height="32px" class="sml_list">`;
+                            Html.push(`<tr id="datarow${isOdd ? 'opt':'even'}"><td width="1%"><i class="material-icons small">blur_circular</i></td><td width="25%">${key}</td><td valign="middle" width="45%" ${icontext}</td><td>${btn}${icon}</td></tr>`)
+                        }
+                        else
+                            Html.push(`<tr id="datarow${isOdd ? 'opt':'even'}"><td width="1%"><i class="material-icons small">blur_circular</i></td><td width="25%">${key}</td><td width="45%" ${model.setOptions[key] === undefined ? 'id="datared">"not set on model"' : '>'+model.setOptions[key]}</td><td>${btn}</td></tr>`)
+                        isOdd = !isOdd;
+                    }
+                }
+            }
+        }
+
+    }
     return Html;
 }
+
+function btnParam(id, tooltip, icon, color, disabled) {
+    return `<a id="${id}" class="btn-floating waves-effect waves-light right ${color ? color : 'blue'} ${disabled ? 'disabled ' : ''}tooltipped center-align hoverable translateT" title="${tooltip}"><i class="material-icons large">${icon}</i></a>`;
+}
+
+
 function getDeviceData(deviceList, withIcon) {
-    const Html = [`<div class="container">`];
-    for (const dev of deviceList) {
-        const iconLink = `<img src=${dev.common.icon} class="circle" width="40" height="auto">`;
-        Html.push(`<div="row"><div class="col s4">${withIcon ? iconLink : ''}<br>${dev.info.device.ieee}<br>connectedInfo</div>`)
-        Html.push(`<div class=col s4>Device Name:${dev.common.name}</div><div class=col s4>Connected: true</div></div>`);
-        if (dev.options) {
-            Html.push(`<div="row"><div class="col s3">Options</div>`)
+    const Html = [];
+    return Html;
+    /*for (const dev of deviceList) {
+        const rowspan = dev.options ? Object.keys(dev.options).length + 2 : 2;
+        const iconLink = `<img src=${dev.common.icon} class="dev_list">`;
+        const devieee = dev._id.replace(`${namespace}.`, '');
+        const o_btn_name = `do_toggle_${devieee}`;
+        const o_btn_tip = `fold / unfold options for ${devieee}`;
+        LocalDataDisplayValues.buttonSet.add(o_btn_name);
+        const bn = `f_edit_${devieee}`
+        LocalDataDisplayValues.buttonSet.add(bn);
+
+        Html.push(`<tr id="datarowodd"><td rowspan="${rowspan}">${iconLink}</td><td colspan="2">${dev.common.name} (${devieee})</td><td>${btnParam(o_btn_name, o_btn_tip, LocalDataDisplayValues.unfoldedDevices ? 'do_not_disturb' : 'add_circle')}</td></tr>`);
+        Html.push(`<tr id="dataroweven"><td colspan="2">Device flags</td><td>${btnParam(bn, 'edit flags','edit')}</td></tr>`);
+        //console.warn(`dev is ${JSON.stringify(dev)}`);
+        if (dev.options && LocalDataDisplayValues.unfoldedDevices[devieee]) {
             for (const o of dev.options) {
-                Html.push(`<div class=col s4>${o.key}</div><div class=col s4>${o.value}</div><div>`);
+                const bn = `o_edit_${devieee}.${o.key}`
+                LocalDataDisplayValues.buttonSet.add(bn);
+                Html.push(`<tr id="datarowopt"><td>${o.key}></td><td>${o.value}</td><td>${btnParam(bn, 'edit flags','edit')}</td></tr>`);
             }
-            Html.push(`</div>`);
         }
-        Html.push(`</div>`)
     }
-    Html.push(`</div>`)
-    return Html;
+    return Html;*/
 }
-function getGlobalOptionData() {
-    return ['No Data Yet'];
+
+function sortAndFilter(filter, sort) {
+    const fFun = filter || LocalDataDisplayValues.filterMethod;
+    console.warn('once:='+JSON.stringify(models['m_0'].setOptions))
+    console.warn('twice:='+ JSON.stringify(models['m_1'].setOptions))
+    let filterMap = LocalDataDisplayValues.sortedKeys = Object.keys(models);
+    if (LocalDataDisplayValues.searchVal && LocalDataDisplayValues.searchVal.length) {
+        filterMap = filterMap.filter((a) => {
+            return models[a]?.model?.model?.toLowerCase().includes(LocalDataDisplayValues.searchVal)
+        });
+        console.warn(`${JSON.stringify(LocalDataDisplayValues.searchVal)} - ${JSON.stringify(models['m_1'].model)}`);
+    }
+    if (typeof fFun == 'function')  {
+        console.warn(`${JSON.stringify(filterMap)} - ${JSON.stringify(models['m_1'].model)}`);
+        filterMap = filterMap.filter(fFun);
+    }
+    console.warn(JSON.stringify(filterMap));
+    const sFun = sort || LocalDataDisplayValues.sortMethod;
+    if (typeof sFun == 'function') {
+        console.warn(`${JSON.stringify(filterMap)} - ${JSON.stringify(models['m_1'].model)}`);
+        filterMap = filterMap.sort(sFun);
+    }
+    console.warn(JSON.stringify(filterMap));
+    if (typeof filter == 'function') LocalDataDisplayValues.filterMethod = filter;
+    if (typeof sort == 'function') LocalDataDisplayValues.sortMethod = sort;
+    return filterMap;
 }
 
 function showLocalData() {
-    return;
-    /*
+    LocalDataDisplayValues.buttonSet.clear();
+    ;
+    const ModelHtml = getModelData(devices, models, sortAndFilter(undefined, undefined));
+    const DeviceHtml = getDeviceData(devices);
+    const sm = LocalDataDisplayValues.showModels;
+    //const dmtoggle = btnParam('t_all_models', 'Refresh models', 'developer_board');
+
+    const RowSpan = sm ? ModelHtml.length +2 : DeviceHtml.length + 2;
     const Html = [];
 
-    Html.push(`<ul class="collapsible">`);
-    Html.push('<li>')
-    Html.push (`<li class="active"><div class="collapsible-header">
-                    Paired Models
-                </div>`);
-    Html.push (`<div class="collapsible-body">
-                    <span>${getModelData(devices).join('')}</span>
-                </div>`);
-    Html.push ('</li><li>')
-    Html.push (`<div class="collapsible-header">
-                    Paired Devices
-                </div>`);
-    Html.push (`<div class="collapsible-body">
-                    <span>${getDeviceData(devices, true).join('')}</span>
-                </div>`);
-    Html.push ('</li><li>')
-    Html.push (`<div class="collapsible-header">
-                   Global Options
-                </div>`);
-    Html.push (`<div class="collapsible-body">
-                    <span>${getGlobalOptionData(devices).join('')}</span>
-                </div>`);
-    Html.push ('</li>')
-    Html.push (`</ul>`);
-    $('#tab-overrides').html(Html.join(''));
-    $('.collapsible').collapsible();
-    */
+    if (sm) {
+        Html.push(`<table style="width:100%"><tr id="datatable"><th rowspan="${RowSpan}">&nbsp;</th><th colspan=4></th><th></th><th rowspan="${RowSpan}">&nbsp;</th></tr>`);
+        Html.push(ModelHtml.join(''));
+    }
+    /*else {
+        Html.push(`<table style="width:100%"><tr id="datatable"><th rowspan="${RowSpan}">&nbsp;</th><th colspan=4>Device Data</th><th>${dmtoggle}</th><th rowspan="${RowSpan}">&nbsp;</th></tr>`)
+        Html.push(DeviceHtml.join(''));
+    }*/
+    Html.push(`<tr id="datatable"><td colspan="5"></td></tr>`)
+    Html.push('</table>');
+    //Html.push('</div></div>');
+    $('#tab-overrides-content').html(Html.join(''));
+
+    /*$('#t_all_models').click(function () {
+        //LocalDataDisplayValues.showModels = !LocalDataDisplayValues.showModels;
+        getDevices();
+    });*/
+
+    //console.warn(`lddv is ${JSON.stringify(LocalDataDisplayValues)}`)
+    for (const item of LocalDataDisplayValues.buttonSet) {
+        if (item.startsWith('d_toggle_')) $(`#${item}`).click(function () {
+            const key = item.replace('d_toggle_',  '');
+            //console.warn(`clicked ${item}`);
+            updateFoldModel(models[key].model.model, true, false)
+            showLocalData();
+        });
+        if (item.startsWith('o_toggle_')) $(`#${item}`).click(function () {
+            //console.warn(`clicked ${item}`);
+            const key = item.substring(9);
+            updateFoldModel(models[key].model.model, false, true)
+            showLocalData();
+        })
+        if (item.startsWith('do_toggle_')) $(`#${item}`).click(function () {
+            //console.warn(`clicked ${item}`);
+            const key = item.substring(10);
+            if (LocalDataDisplayValues.unfoldedDevices.hasOwnProperty(key))
+                LocalDataDisplayValues.unfoldedDevices[key] =! LocalDataDisplayValues.unfoldedDevices[key];
+            else
+                LocalDataDisplayValues.unfoldedDevices[key] = true;
+            showLocalData();
+        })
+        if (item.startsWith('m_edit_')) $(`#${item}`).click(function () {
+            //console.warn(`clicked ${item}`);
+            const key = item.substring(7);
+            editDeviceOptions(models[key], true);
+        })
+        if (item.startsWith('o_delete_'))  {
+            console.warn(`adding click to ${item}`)
+            $(`#${item}`).click(function () {
+                console.warn(`clicked ${item}`);
+                const keys = item.replace('o_delete_', '').split('-');
+                const model = models[keys[0]]?.model.model;
+                const option = keys[1];
+                const sOptions = models[keys[0]]?.setOptions || {};
+                const options = models[keys[0]]?.setOptions?.options || {};
+                //options[option] = '##REMOVE##';
+                console.warn(`clicked ${item} - options are ${JSON.stringify(options)}`);
+                delete options[option];
+                updateLocalConfigItems(model, sOptions || {}, true);
+                showLocalData();
+            })
+        }
+        if (item.startsWith('l_delete_'))  $(`#${item}`).click(function () {
+            const keys = item.replace('l_delete_', '').split('-');
+            const model = models[keys[0]]?.model.model;
+            const option = keys[1];
+            const options = models[keys[0]].setOptions;
+            options[option] = '##REMOVE##';
+            console.warn(`clicked ${item} - options are ${JSON.stringify(options)}`);
+            updateLocalConfigItems(model, options || {}, true)
+            delete options[option];
+            showLocalData();
+        })
+        if (item.startsWith('d_disen_'))  {
+            console.warn(`adding click to ${item}`)
+            $(`#${item}`).click(function () {
+                console.warn(`clicked ${item}`);
+                const keys = item.replace('d_disen_', '').split('-');
+                const model = models[keys[0]];
+                const device = model.devices.find( (d) => d.native.id === keys[1]);
+                swapActive(keys[1]);
+                device.common.deactivated = !device.common.deactivated
+                showLocalData();
+
+
+            });
+        }
+        if (item.startsWith('d_delall_')) {
+            console.warn(`adding click to ${item}`)
+            $(`#${item}`).click(function () {
+                console.warn(`clicked ${item}`);
+                const keys = item.replace('d_delall_', '').split('-');
+                const model = models[keys[0]];
+                const device = model.devices.find( (d) => d.native.id === keys[1]);
+                deleteConfirmation(keys[1], device.common.name, keys[1], models[keys[0]].devices.count <=1 ? models[keys[0]]?.model.model : undefined);
+            });
+        }
+    }
 }
 
 /////
@@ -298,6 +497,7 @@ function getCard(dev) {
             rooms.push(dev.rooms[r]);
         }
     }
+    const NoInterviewIcon = dev.info?.device?.interviewstate != 'SUCCESSFUL' ? `<div class="col tool"><i class="material-icons icon-red">perm_device_information</i></div>` : ``;
     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_url}.html" target="_blank" rel="noopener noreferrer">${type}</a>`;
@@ -321,9 +521,15 @@ function getCard(dev) {
                         ${roomInfo}
                     </ul>
                 </div>`,
-        deactBtn = `<button name="swapactive" class="right btn-flat btn-small tooltipped" title="${(isActive ? 'Deactivate' : 'Activate')}"><i class="material-icons ${(isActive ? 'icon-green' : 'icon-red')}">power_settings_new</i></button>`,
-        debugBtn = `<button name="swapdebug" class="right btn-flat btn-small tooltipped" title="${(isDebug > -1 ? (isDebug > 0) ?'Automatic by '+debugDevices[isDebug-1]: 'Disable Debug' : 'Enable Debug')}"><i class="material-icons icon-${(isDebug > -1 ? (isDebug > 0 ? 'orange' : 'green') : 'gray')}">bug_report</i></button>`,
-        infoBtn = (nwk) ? `<button name="info" class="left btn-flat btn-small"><i class="material-icons icon-blue">info</i></button>` : '';
+        deactBtn = `<button name="swapactive" class="right btn-flat btn-small tooltipped" title="${(isActive ? 'deactivate' : 'activate')}"><i class="material-icons ${(isActive ? 'icon-green' : 'icon-red')}">power_settings_new</i></button>`,
+        debugBtn = `<button name="swapdebug" class="right btn-flat btn-small tooltipped" title="${(isDebug > -1 ? (isDebug > 0) ?'automatic by '+debugDevices[isDebug-1]: 'disable debug' : 'enable debug')}"><i class="material-icons icon-${(isDebug > -1 ? (isDebug > 0 ? 'orange' : 'green') : 'gray')}">bug_report</i></button>`,
+        infoBtn = (nwk) ? `<button name="info" class="left btn-flat btn-small"><i class="material-icons icon-blue">info</i></button>` : '',
+        reconfigureButton = dev.info.mapped.hasConfigure ? `<button name="reconfigure" class="right btn-flat btn-small tooltipped" title="reconfigure">
+                                    <i class="material-icons icon-red">sync</i>
+                                </button>` : ``,
+        groupButton = dev.info?.device?.isGroupable ? `                                <button name="edit" class="right btn-flat btn-small tooltipped" title="edit group membership">
+                                    <i class="material-icons icon-black">group_work</i>
+                                </button>` : ``;
 
     const dashCard = getDashCard(dev);
     const card = `<div id="${id}" class="device">
@@ -333,6 +539,7 @@ function getCard(dev) {
                         <div class="card-content zcard">
                             <div class="flip" style="cursor: pointer">
                             <span class="top right small" style="border-radius: 50%">
+                                ${NoInterviewIcon}
                                 ${battery}
                                 <!--${lq}-->
                                 ${status}
@@ -347,20 +554,15 @@ function getCard(dev) {
                         <div class="card-action">
                             <div class="card-reveal-buttons">
                                 ${infoBtn}
-
                                 <span class="left fw_info"></span>
-                                <button name="delete" class="right btn-flat btn-small tooltipped" title="Delete">
+                                <button name="delete" class="right btn-flat btn-small tooltipped" title="delete device">
                                     <i class="material-icons icon-red">delete</i>
                                 </button>
-                                <button name="edit" class="right btn-flat btn-small tooltipped" title="Edit">
+                                ${groupButton}
+                                <button name="swapimage" class="right btn-flat btn-small tooltipped" title="edit device options">
                                     <i class="material-icons icon-black">edit</i>
                                 </button>
-                                <button name="swapimage" class="right btn-flat btn-small tooltipped" title="Select Image">
-                                    <i class="material-icons icon-black">image</i>
-                                </button>
-                                <button name="reconfigure" class="right btn-flat btn-small tooltipped" title="Reconfigure">
-                                    <i class="material-icons icon-red">sync</i>
-                                </button>
+                                ${reconfigureButton}
                                 ${deactBtn}
                                 ${debugBtn}
                             </div>
@@ -395,7 +597,7 @@ function getCoordinatorCard(dev) {
                         <li><span class="label">ZHC / ZH:</span><span>${coordinatorinfo.converters} / ${coordinatorinfo.herdsman}</span></li>
                     </ul>
                 </div>`,
-        permitJoinBtn = '<div class="col tool"><button name="joinCard" class="waves-effect btn-small btn-flat right hoverable green"><i class="material-icons icon-green">leak_add</i></button></div>',
+        permitJoinBtn = '<div class="col tool"><button name="joinCard" class="waves-effect btn-small btn-flat right hoverable green tooltipped" title="open network"><i class="material-icons icon-green">leak_add</i></button></div>',
         //permitJoinBtn = `<div class="col tool"><button name="join" class="btn-floating-sml waves-effect waves-light right hoverable green><i class="material-icons">leak_add</i></button></div>`,
         card = `<div id="${id}" class="device">
                   <div class="card hoverable">
@@ -448,6 +650,7 @@ function getGroupCard(dev) {
     ;
     info = info.concat(`              ${roomInfo}</ul>
                 </div>`);
+    const infoBtn = `<button name="info" class="left btn-flat btn-small"><i class="material-icons icon-blue">info</i></button>`;
     const image = `<img src="${dev.common.icon}" width="64px" onerror="this.onerror=null;this.src='img/unavailable.png';">`;
     const dashCard = getDashCard(dev, dev.common.icon, memberCount > 0);
     const card = `<div id="${id}" class="device group">
@@ -469,14 +672,15 @@ function getGroupCard(dev) {
                         </div>
                         <div class="card-action">
                             <div class="card-reveal-buttons">
-                                <button name="deletegrp" class="right btn-flat btn-small">
-                                    <i class="material-icons icon-black">delete</i>
+                                ${infoBtn}
+                                <button name="deletegrp" class="right btn-flat btn-small tooltipped" title="delete group">
+                                    <i class="material-icons icon-red">delete</i>
                                 </button>
-                                <button name="editgrp" class="right btn-flat btn-small">
-                                    <i class="material-icons icon-green">edit</i>
+                                <button name="editgrp" class="right btn-flat btn-small tooltipped" title="edit group members">
+                                    <i class="material-icons">group_work</i>
                                 </button>
-                                <button name="swapimage" class="right btn-flat btn-small tooltipped" title="Edit">
-                                    <i class="material-icons icon-black">image</i>
+                                <button name="swapimage" class="right btn-flat btn-small tooltipped" title="edit group options">
+                                    <i class="material-icons icon-black">edit</i>
                                 </button>
                             </div>
                         </div>
@@ -506,10 +710,11 @@ function getDashCard(dev, groupImage, groupstatus) {
         rooms = [],
         lang = systemLang || 'en';
     const paired = (dev.paired) ? '' : '<i class="material-icons right">leak_remove</i>';
-    const permitJoinBtn = dev.battery || dev.common.type == 'group' ? '' : `<div class="col tool"><button name="joinCard" class="waves-effect btn-small btn-flat right hoverable green"><i class="material-icons icon-green">leak_add</i></button></div>`;
-    const device_queryBtn = dev.battery || dev.common.type == 'group' ? '' : `<div class="col tool"><button name="deviceQuery" class="waves-effect btn-small btn-flat right hoverable green"><i class="material-icons icon-green">play_for_work</i></button></div>`;
+    const permitJoinBtn = dev.info?.device?.type == 'EndDevice' || dev.common.type == 'group' ? '' : `<div class="col tool"><button name="joinCard" class="waves-effect btn-small btn-flat right hoverable green tooltipped" title="open network on device"><i class="material-icons icon-green">leak_add</i></button></div>`;
+    const device_queryBtn = dev.info?.device?.type == 'EndDevice' || dev.common.type == 'group' ? '' : `<div class="col tool"><button name="deviceQuery" class="waves-effect btn-small btn-flat right hoverable green tooltipped" title="trigger device query"><i class="material-icons icon-green">play_for_work</i></button></div>`;
     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 NoInterviewIcon = (dev.info?.device?.interviewstate != 'SUCCESSFUL' && dev.common.type != 'group') ? `<div class="col tool"><i class="material-icons icon-red">perm_device_information</i></div>` : ``;
     const image = `<img src="${img_src}" width="64px" onerror="this.onerror=null;this.src='img/unavailable.png';">`,
         nwk = (dev.info && dev.info.device) ? dev.info.device.nwk : undefined,
         battery_cls = getBatteryCls(dev.battery),
@@ -574,6 +779,7 @@ function getDashCard(dev, groupImage, groupstatus) {
             </span>
             <div  class="flip">
             <span class="top right small" style="border-radius: 50%">
+                ${NoInterviewIcon}
                 ${idleTime}
                 ${battery}
                 ${lq}
@@ -719,7 +925,7 @@ function showDevInfo(id) {
 // section Confirmations
 //
 ////
-function deleteConfirmation(id, name) {
+function deleteConfirmation(id, name, dev, model) {
     const text = translateWord('Do you really want to delete device') + ' "' + name + '" (' + id + ')?';
     $('#modaldelete').find('p').text(text);
     $('#force').prop('checked', false);
@@ -727,7 +933,7 @@ function deleteConfirmation(id, name) {
     $('#modaldelete a.btn[name=\'yes\']').unbind('click');
     $('#modaldelete a.btn[name=\'yes\']').click(() => {
         const force = $('#force').prop('checked');
-        deleteZigbeeDevice(id, force);
+        deleteZigbeeDevice(id, force, dev, model);
     });
     $('#modaldelete').modal('open');
     Materialize.updateTextFields();
@@ -782,7 +988,7 @@ function EndPointIDfromEndPoint(ep) {
 
 
 
-function editName(id, name) {
+function editGroupMembers(id, name) {
 
     function updateGroupables(groupables) {
         const html = [];
@@ -849,8 +1055,8 @@ function GenerateGroupChange(oldmembers, newmembers) {
     return grpchng;
 }
 
-function deleteZigbeeDevice(id, force) {
-    sendToWrapper(namespace, 'deleteZigbeeDevice', {id: id, force: force}, function (msg) {
+function deleteZigbeeDevice(id, force, devOpts, modelOpts) {
+    sendToWrapper(namespace, 'deleteZigbeeDevice', {id: id, force: force, dev:devOpts, model:modelOpts}, function (msg) {
         closeWaitingDialog();
         if (msg) {
             if (msg.error) {
@@ -860,7 +1066,7 @@ function deleteZigbeeDevice(id, force) {
             }
         }
     });
-    showWaitingDialog('Device is being removed', 10);
+    showWaitingDialog('Device is being removed', 30);
 }
 
 
@@ -966,6 +1172,7 @@ function showDevices() {
             return room;
         }
     }).filter((item) => item != undefined));
+    //console.warn(`rooms is ${JSON.stringify(allRooms)}`);
     const roomSelector = $('#room-filter');
     roomSelector.empty();
     roomSelector.append(`<li class="device-order-item" data-type="All" tabindex="0"><a class="translate" data-lang="All">All</a></li>`);
@@ -988,12 +1195,14 @@ function showDevices() {
 
     const element = $('#devices');
 
-    if (element) {
+    if ($('tab-main')) try {
         shuffleInstance = devices && devices.length ? new Shuffle(element, {
             itemSelector: '.device',
             sizer: '.js-shuffle-sizer',
         }) : undefined;
         doFilter();
+    } catch {
+        // empty.
     }
 
     const getDevName = function (dev_block) {
@@ -1015,7 +1224,7 @@ function showDevices() {
         const dev_block = $(this).parents('div.device');
         const id = getDevId(dev_block);
         const name = getDevName(dev_block);
-        editName(id, name);
+        editGroupMembers(id, name);
     });
     $('.card-reveal-buttons button[name=\'swapdebug\']').click(function () {
         const dev_block = $(this).parents('div.device');
@@ -1027,7 +1236,7 @@ function showDevices() {
     $('.card-reveal-buttons button[name=\'swapimage\']').click(function () {
         const dev_block = $(this).parents('div.device');
         const id = getDevId(dev_block);
-        selectImageOverride(id);
+        editDeviceOptions(id, false);
     });
 
     $('.card-reveal-buttons button[name=\'editgrp\']').click(function () {
@@ -1048,12 +1257,6 @@ function showDevices() {
         sendTo(namespace, 'setState', {id: `${getDevId(dev_block)}.device_query`, val: true}, function (data) {
             //console.log(data);
         });    });
-    $('#modalpairing a.btn[name=\'extendpairing\']').click(function () {
-        openNetwork();
-    });
-    $('#modalpairing a.btn[name=\'endpairing\']').click(function () {
-        stopPairing();
-    });
     $('.card-reveal-buttons button[name=\'info\']').click(function () {
         const dev_block = $(this).parents('div.device');
         showDevInfo(getDevId(dev_block));
@@ -1146,22 +1349,22 @@ function letsPairingWithCode(code) {
 }
 
 function openNetwork() {
-    messages = [];
     sendToWrapper(namespace, 'letsPairing', {stop:false}, function (msg) {
         if (msg && msg.error) {
             showMessage(msg.error, _('Error'));
         }
-        else showPairingProcess();
+        //else showPairingProcess();
     });
 }
 
 function stopPairing() {
-    messages = [];
     sendToWrapper(namespace, 'letsPairing', {stop:true}, function (msg) {
         if (msg && msg.error) {
             showMessage(msg.error, _('Error'));
         }
     });
+    $('#pairing').html('<i class="material-icons">leak_add</i>');
+
 }
 
 function touchlinkReset() {
@@ -1226,21 +1429,24 @@ async function toggleDebugDevice(id) {
 }
 
 function updateLocalConfigItems(device, data, global) {
-    sendToWrapper(namespace, 'updateLocalConfigItems', {target: device, data:data, global:global}, function(msg) {
-        if (msg && msg.hasOwnProperty.error) {
-            showMessage(msg.error, _('Error'));
-        }
-        getDevices();
-    });
+    if (data != {})
+        sendToWrapper(namespace, 'updateLocalConfigItems', {target: device, data:data, global:global}, function(msg) {
+            if (msg && msg.hasOwnProperty.error) {
+                showMessage(msg.error, _('Error'));
+            }
+            getDevices();
+        });
 }
 
-async function selectImageOverride(id) {
+async function editDeviceOptions(id, isModel) {
+    //console.warn(`selectImageOverride on ${JSON.stringify(id)}`);
 
     // start local functions
     function removeOption(k) {
+        const model = dialogData.model;
         if (k && device_options.hasOwnProperty(k)) {
-            if (dev.info.mapped && dev.info.mapped.options && dev.info.mapped.options.includes(device_options[k].key))
-                availableOptions.push(device_options[k].key)
+            if (device_options[k].key === 'legacy' || (model && model.options && model.options.includes(device_options[k].key)) && !device_options[k].isCustom)
+                dialogData.availableOptions.push(device_options[k].key)
             delete device_options[k];
         }
     }
@@ -1253,12 +1459,15 @@ async function selectImageOverride(id) {
             key = `o${idx++}`;
         }
         while (device_options.hasOwnProperty(key));
-        device_options[key] = { key:optionName, value:''};
-        idx = availableOptions.indexOf(optionName);
-        if (idx > -1) availableOptions.splice(idx, 1);
+        device_options[key] = { key:optionName, value:'', isCustom:optionName==='custom', expose:getExposeFromOptions(optionName)};
+        idx = dialogData.availableOptions.indexOf(optionName);
+        if (idx > -1 && !device_options[key].isCustom) dialogData.availableOptions.splice(idx, 1);
+        console.warn(`addOption added ${JSON.stringify(device_options)}`)
     }
 
+
     function updateOptions(candidates) {
+        console.warn(`update Options with ${JSON.stringify(candidates)}`)
         if (candidates.length > 0) {
             $('#chooseimage').find('.new_options_available').removeClass('hide');
             list2select('#option_Selector', candidates, [], (key, val) => { return val; }, (key, val) => { return val; })
@@ -1267,54 +1476,123 @@ async function selectImageOverride(id) {
             $('#chooseimage').find('.new_options_available').addClass('hide');
         }
         const html_options=[];
+        const checkboxButtons = [];
 
         for (const k of Object.keys(device_options)) {
+            const expose = device_options[k].expose === undefined ? getExposeFromOptions(device_options[k].key) : device_options[k].expose;
+            const disabled = device_options[k]?.isCustom ? '' : 'disabled ';
+            console.warn(`option for ${k} is ${JSON.stringify(device_options[k])}`);
             html_options.push(`<div class="row">`);
-            html_options.push(`<div class="input-field suffix col s5 m5 l5"><input disabled id="option_key_${k}" type="text" class="value" /><label for="option_key_${k}">Option</label></div>`)
-            html_options.push(`<div class="input-field suffix col s5 m5 l5"><input id="option_value_${k}" type="text" class="value" /><label for="option_value_${k}">Value</label></div>`)
-            html_options.push(`<div class="col"><a id="option_rem_${k}" class="btn-large round red" ><i class="material-icons icon-red">remove_circle</i></a></div>`);
+            switch (expose.type) {
+                case 'numeric':
+                    html_options.push(`<div class="input-field  col s5 m5 l5"><input ${disabled}id="option_key_${k}" type="text" class="value" /><label for="option_key_${k}">Option</label></div>`)
+                    html_options.push(`<div class="input-field  col s5 m5 l5"><input id="option_value_${k}" type="number"${expose.value_min != undefined ? ' min="'+expose.value_min+'"' : ''}${expose.value_max != undefined ? ' max="'+expose.value_max+'"' : ''}${expose.value_step != undefined ? ' step="'+expose.value_step+'"' : ''} class="value" /><label>${expose.label ? expose.label : 'Value'}</label></div>`)
+                    break;
+                case 'binary': {
+                    html_options.push(`<div class="input-field col s5 m5 l5">
+                        <input ${disabled}id="option_key_${k}" type="text" class="value" />
+                        <label for="option_key_${k}">Option</label></div>`);
+                    const dok = device_options[k];
+                    if (dok.vOn=== undefined) dok.vOn = (expose.value_on === undefined ? 'true' : String(expose.value_on));
+                    if (dok.vOff=== undefined) dok.vOff = (expose.value_off === undefined ? 'false' : String(expose.value_off));
+                    if (dok.value != dok.vOn) dok.value = dok.vOff;
+                    html_options.push(`<div class="col s5 m5 l5"><a id="option_value_${k}" class="btn-large value">${dok.value}</a></div>`);
+                    checkboxButtons.push(`option_value_${k}`);
+                    break;
+                }
+                default:
+                    html_options.push(`<div class="input-field  col s5 m5 l5"><input ${disabled}id="option_key_${k}" type="text" class="value" /><label for="option_key_${k}">Option</label></div>`)
+                    html_options.push(`<div class="input-field  col s5 m5 l5"><input id="option_value_${k}" type="text" class="value" /><label for="option_value_${k}">${expose.label ? expose.label : 'Value'}</label></div>`)
+                    break;
+            }
+            html_options.push(`<div class="col"><a id="option_rem_${k}" class="btn-large round red " ><i class="material-icons icon-red">remove_circle</i></a></div>`);
             html_options.push(`</div>`)
         }
         $('#chooseimage').find('.options_grid').html(html_options.join(''));
+        for (const item of checkboxButtons) {
+            $(`#${item}`).unbind('click');
+            $(`#${item}`).click(() => {
+                const key = item.replace('option_value_', '');
+                const dok = device_options[key];
+                const oval = $(`#option_value_${key}`).html();
+                const val = $(`#option_value_${key}`).html()=== dok.vOn ? dok.vOff : dok.vOn;
+                dok.value = val;
+                console.warn(`${item} clicked: ${JSON.stringify(dok)} => ${val} from ${oval}`);
+                $(`#${item}`).html(val);
+            });
+        }
+
         if (html_options.length > 0) {
             for (const k of Object.keys(device_options)) {
+                if (device_options[k].isCustom) $(`#option_key_${k}`).removeClass('disabled')
                 $(`#option_key_${k}`).val(device_options[k].key);
-                $(`#option_value_${k}`).val(device_options[k].value);
+                if (device_options[k].expose?.type != 'binary') {
+                    const value = $(`#option_value_${k}.value`);
+                    /*                if (value.attr('type') === 'checkbox') {
+                    console.warn(`oval for ${k} : ${device_options[k].value}`);
+                    value.prop('checked', Boolean(device_options[k].value));
+                    }
+                    else*/
+                    value.val(device_options[k].value);
+                }
                 $(`#option_rem_${k}`).unbind('click');
-                $(`#option_rem_${k}`).click(() => { removeOption(k); updateOptions(availableOptions) });
+                $(`#option_rem_${k}`).click(() => {
+                    removeOption(k);
+                    updateOptions(dialogData.availableOptions);
+                });
             }
         }
     }
 
+    function getExposeFromOptions(option) {
+        const rv = dialogData.model.optionExposes.find((expose) => expose.name === option);
+        console.warn(`GEFO: ${option} results in ${JSON.stringify(rv)}`);
+        if (rv) return rv;
+        return { type:option === 'legacy' ? 'binary' : 'string' };
+    }
+
     function getOptionsFromUI(_do, _so) {
         const _no = {};
         let changed = false;
+        console.warn(`${changed} : ${JSON.stringify(_do)} - ${JSON.stringify(_no)}`)
         for (const k of Object.keys(_do)) {
             const key =  $(`#option_key_${k}`).val();
-            _do[k].key = key;
-            const val = $(`#option_value_${k}`).val();
-            try {
-                _do[k].value = JSON.parse(val);
+            if (_do[k].isCustom) _do[k].key = key;
+            else if (_do[k].key != key) {
+                console.warn(`_illegal Keys: ${key}, ${_do[k].key}`)
+                continue;
             }
-            catch {
-                _do[k].value = val;
+            console.warn(`_legal Keys: ${key}, ${_do[k].key}`)
+            if (_do[k].expose?.type === 'binary') {
+                _do[k].value = $(`#option_value_${k}`).html();
             }
-            if (device_options[k].key.length > 0) {
-                _no[key] = device_options[k].value;
-                changed |= _no[key] != _so[key];
+            else
+            {
+                const val = $(`#option_value_${k}`).val();
+                try {
+                    _do[k].value = JSON.parse(val);
+                }
+                catch {
+                    _do[k].value = val;
+                }
+            }
+            if (_do[k].key.length > 0) {
+                console.warn(`dok: ${_do[k].key} : ${_do[k].value}`);
+                _no[key] = _do[k].value;
+                changed |= (_no[key] != _so[key]);
             }
         }
         changed |= (Object.keys(_no).length != Object.keys(_so).length);
-        console.warn(`${changed} : ${JSON.stringify(_do)} - ${JSON.stringify(_no)}`)
+        console.warn(`${changed ? 'changed': 'unchanged'} : ${JSON.stringify(_so)} - ${JSON.stringify(_no)}`)
         if (changed) return _no;
         return undefined;
     }
 
-    function updateImageSelection(dev, imagedata) {
-        const default_icon = (dev.common.type === 'group' ? dev.common.modelIcon : `img/${dev.common.type.replace(/\//g, '-')}.png`);
-        if (dev.legacyIcon) imagedata.unshift( { file:dev.legacyIcon, name:'legacy', data:dev.legacyIcon});
-        imagedata.unshift( { file:'none', name:'default', data:default_icon});
-        imagedata.unshift( { file:'current', name:'current', data:dev.common.icon || dev.icon});
+    function updateImageSelection(dData, imagedata) {
+        //        const default_icon = (dev.common.type === 'group' ? dev.common.modelIcon : `img/${dev.common.type.replace(/\//g, '-')}.png`);
+        if (dData.legacyIcon) imagedata.unshift( { file:dData.legacyIcon, name:'legacy', data:dData.legacyIcon});
+        imagedata.unshift( { file:'none', name:'default', data:dData.defaultIcon});
+        imagedata.unshift( { file:'current', name:'current', data:dData.icon});
 
         list2select('#images', imagedata, selectItems,
             function (key, image) {
@@ -1337,39 +1615,65 @@ async function selectImageOverride(id) {
     const device_options = {};
     const received_options = {};
 
-    const dev = devices.find((d) => d._id == id);
-    const availableOptions = (dev.info.mapped ? dev.info.mapped.options.slice() || []:[]);
-    const imghtml = `<img src="${dev.common.icon || dev.icon}" width="80px">`
+    const dialogData = {};
+
+    if (isModel) {
+        const model = id.model;
+        dialogData.model = model;
+        dialogData.availableOptions = model.options.slice() || [];
+        dialogData.availableOptions.push('custom');
+        if (model.hasLegacyDef) dialogData.availableOptions.push('legacy');
+        dialogData.setOptions = {};
+        for (const k in Object.keys(id.setOptions))
+            if (k == 'icon' || k == 'name') continue;
+            else dialogData.setOptions[k] = id.setOptions[k];
+        dialogData.name = id.setOptions.name || id.name || 'unset';
+        dialogData.icon = id.setOptions.icon || model.icon || 'img/dummyDevice.jpg';
+        dialogData.legacyIcon = id.devices[0].legacyIcon;
+        id = id.model.model;
+    } else
+    {
+        const dev = devices.find((d) => d._id == id);
+        dialogData.model = dev.info.mapped;
+        dialogData.availableOptions = (dev.info.mapped ? dev.info.mapped.options.slice() || []:[]);
+        dialogData.name = dev.common.name;
+        dialogData.icon = dev.common.icon || dev.icon;
+        dialogData.default_icon = (dev.common.type === 'group' ? dev.common.modelIcon : `img/${dev.common.type.replace(/\//g, '-')}.png`);
+        dialogData.legacyIcon = dev.legacyIcon;
+    }
+
+    const imghtml = `<img src="${dialogData.icon}" width="80px">`;
     //console.error(imghtml)
     const selectItems= [''];
-    $('#chooseimage').find('input[id=\'d_name\']').val(dev.common.name);
+    $('#chooseimage').find('input[id=\'d_name\']').val(dialogData.name);
     $('#chooseimage').find('.currentIcon').html(imghtml);
     $('#option_add_1084').unbind('click');
     $('#option_add_1084').click(() => {
         getOptionsFromUI(device_options, received_options);
         addOption();
-        updateOptions(availableOptions)
+        updateOptions(dialogData.availableOptions);
     });
 
 
 
     sendToWrapper(namespace, 'getLocalImages', {}, function(msg) {
         if (msg && msg.imageData) {
-            updateImageSelection(dev, msg.imageData);
+            updateImageSelection(dialogData , msg.imageData);
 
             $('#chooseimage a.btn[name=\'save\']').unbind('click');
             $('#chooseimage a.btn[name=\'save\']').click(() => {
                 const image = $('#chooseimage').find('#images option:selected').val();
-                const global = $('#chooseimage').find('#globaloverride').prop('checked');
+                //const global = $('#chooseimage').find('#globaloverride').prop('checked');
                 const name = $('#chooseimage').find('input[id=\'d_name\']').val();
                 const data = {};
                 if (image != 'current') data.icon= image;
-                if (name != dev.common.name) data.name = name;
-                data.options = getOptionsFromUI(device_options, received_options)
+                if (name != dialogData.name) data.name = name;
+                const changedOptions = getOptionsFromUI(device_options, received_options);
+                if (changedOptions != undefined) data.options = changedOptions;
 
-                updateLocalConfigItems(id, data, global);
+                updateLocalConfigItems(id, data, isModel);
             });
-            sendToWrapper(namespace, 'getLocalConfigItems', { target:id, global:false, key:'options' }, function (msg) {
+            sendToWrapper(namespace, 'getLocalConfigItems', { target:id, global:isModel, key:'options' }, function (msg) {
                 if (msg) {
                     if (msg.error) showMessage(msg.error, '_Error');
                     Object.keys(device_options).forEach(key => delete device_options[key]);
@@ -1378,15 +1682,15 @@ async function selectImageOverride(id) {
                         let cnt = 1;
                         for (const key in msg.options)
                         {
-                            const idx = availableOptions.indexOf(key);
+                            const idx = dialogData.availableOptions.indexOf(key);
                             console.warn(`key ${key} : index : ${idx}`);
-                            if (idx > -1) availableOptions.splice(idx,1);
+                            if (idx > -1) dialogData.availableOptions.splice(idx,1);
                             received_options[key]=msg.options[key];
                             device_options[`o${cnt}`] = { key:key, value:msg.options[key]}
                             cnt++;
                         }
                     }
-                    updateOptions(availableOptions);
+                    updateOptions(dialogData.availableOptions);
                 } else showMessage('callback without message');
                 $('#chooseimage').modal('open');
                 Materialize.updateTextFields();
@@ -1503,6 +1807,7 @@ function HtmlFromOutDebugMessages(messages, devID, filter) {
 }
 
 function displayDebugMessages(msg) {
+    console.warn('displayDebugMessages called with '+ JSON.stringify(msg));
     const buttonNames = [];
     const idButtons = [];
     if (msg.byId) {
@@ -1692,55 +1997,33 @@ function getDevices() {
                 coordinatorinfo = msg;
                 updateStartButton()
             }
-            sendToWrapper(namespace, 'getDevices', {}, function (msg) {
-                if (msg) {
-                    devices = msg.devices ? msg.devices : [];
-                    // check if stashed error messages are sent alongside
-                    if (msg.clean)
-                        $('#state_cleanup_btn').removeClass('hide');
-                    else
-                        $('#state_cleanup_btn').addClass('hide');
-                    if (msg.errors && msg.errors.length > 0) {
-                        $('#show_errors_btn').removeClass('hide');
-                        errorData = msg.errors;
-                    }
-                    else {
-                        $('#show_errors_btn').addClass('hide');
-                    }
-                    let newDebugMessages = false;
-
-                    //check if debug messages are sent alongside
-                    if (msg && typeof (msg.debugDevices == 'array')) {
-                        debugDevices = msg.debugDevices;
-                    }
-                    else
-                        debugDevices = [];
-                    if (debugMessages.byId) {
-                        newDebugMessages = true;
-                        debugMessages.byId = msg;
-                        if (msg) displayDebugMessages(debugMessages)
-                    }
-                    lockout.isActive = false;
-                    if (msg.error) {
-                        errorData.push(msg.error);
-                        isHerdsmanRunning = false;
-                    } else {
-                        isHerdsmanRunning = true;
-                        if (!newDebugMessages) {
-                            getDebugMessages();
-                        }
-                        //getExclude();
-                        getBinding();
-                    }
-                    updateStartButton();
-                    showDevices();
-                    showLocalData();
-                    UpdateAdapterAlive(true)
+        });
+        sendToWrapper(namespace, 'getLocalConfigItems', {getAllData:true}, function(msg) {
+            if (msg.hasOwnProperty('by_id') && msg.hasOwnProperty('by_model'))
+                localConfigData = msg;
+        })
+        sendToWrapper(namespace, 'getDevices', {}, function (msg) {
+            if (msg) {
+                extractDevicesData(msg);
+                if (msg.error) {
+                    errorData.push(msg.error);
+                    isHerdsmanRunning = false;
+                } else {
+                    isHerdsmanRunning = true;
+                    getBinding();
                 }
-            });
+                updateStartButton();
+                displayDebugMessages(debugMessages);
+                showDevices();
+                LocalDataDisplayValues.sortedKeys = Object.keys(models);
+                showLocalData();
+                UpdateAdapterAlive(true)
+            }
         });
     }
 
+
+
     if (lockout.timeoutid) {
         clearTimeout(lockout.timeoutid);
     }
@@ -1753,6 +2036,38 @@ function getDevices() {
 
 }
 
+function extractDevicesData(msg) {
+    devices = msg.devices ? msg.devices : [];
+    // check if stashed error messages are sent alongside
+    if (msg.clean)
+        $('#state_cleanup_btn').removeClass('hide');
+    else
+        $('#state_cleanup_btn').addClass('hide');
+    if (msg.errors && msg.errors.length > 0) {
+        $('#show_errors_btn').removeClass('hide');
+        errorData = msg.errors;
+    }
+    else {
+        $('#show_errors_btn').addClass('hide');
+    }
+    //check if debug messages are sent alongside
+    if (msg && typeof (msg.debugDevices == 'array')) {
+        debugDevices = msg.debugDevices;
+    }
+    else
+        debugDevices = [];
+
+    if (msg.deviceDebugData) {
+        debugMessages = { byId: msg.deviceDebugData };
+        displayDebugMessages(debugMessages);
+    }
+    if (msg.models) models = msg.models;
+    lockout.isActive = false;
+
+}
+
+
+
 function getNamedColors() {
     sendToWrapper(namespace, 'getNamedColors', {}, function(msg) {
         if (msg && typeof msg.colors) {
@@ -1862,7 +2177,7 @@ function load(settings, onChange) {
     getComPorts(onChange);
 
     //dialog = new MatDialog({EndingTop: '50%'});
-    const keepAliveHandle = startKeepalive();
+    //const keepAliveHandle = startKeepalive();
     keepAlive(() => {
         getDevices();
         getNamedColors();
@@ -1871,6 +2186,10 @@ function load(settings, onChange) {
             groups = data.groups || {};
         //showGroups();
         });
+        sendToWrapper(namespace, 'getLibData', {key: 'cidList'}, function (data) {
+            cidList = data.list;
+        });
+
     })
 
     //getDebugMessages();
@@ -1924,8 +2243,10 @@ function load(settings, onChange) {
     });
     $('#pairing').click(function () {
         if (!$('#pairing').hasClass('pulse')) {
+            messages = [];
             openNetwork();
-        } else showPairingProcess();
+        }
+        showPairingProcess();
     });
 
     $('#refresh').click(function () {
@@ -1940,6 +2261,10 @@ function load(settings, onChange) {
         resetConfirmation();
     });
 
+    $('#restore-backup-btn').click(function () {
+        selectBackup();
+    });
+
     $('#deleteNVRam-btn').click(function () {
         deleteNvBackupConfirmation();
     });
@@ -2007,6 +2332,65 @@ function load(settings, onChange) {
             $('#device-filter-btn').text($(this).text());
             doFilter();
         });
+        $('#model-search').keyup(function (event) {
+            LocalDataDisplayValues.searchVal = event.target.value.toLowerCase();
+            if (!LocalDataDisplayValues.searchTimeout)
+                LocalDataDisplayValues.searchTimeout = setTimeout(() => { LocalDataDisplayValues.searchTimeout = null; showLocalData(); }, 250);
+        });
+        $('#model-sort a').click(function () {
+            const t = $(this).text();
+            $('#model-sort-btn').text(t);
+            switch (t) {
+                case 'by type':
+                    LocalDataDisplayValues.sortMethod = function(a,b) {
+                        if (models[a].model?.type == models[b].model?.type) return (models[a].model?.model > models[b].model?.model ? 1 : -1);
+                        return (models[a].model?.type > models[b].model?.type ? 1 : -1);
+                    };
+                    break;
+
+                case 'by device count':
+                    LocalDataDisplayValues.sortMethod = function(a,b) {
+                        if (models[a].setOptions?.length == models[b].setOptions?.length) return (models[a].model?.model > models[b].model?.model ? 1 : -1);
+                        return (models[a].setOptions?.length > models[b].setOptions?.length?1:-1);
+                    };
+                    break;
+                case 'by option count':
+                    LocalDataDisplayValues.sortMethod = function(a,b) {
+                        if (models[a].devices?.length == models[b].devices?.length) return (models[a].model?.model > models[b].model?.model ? 1 : -1);
+                        return (models[a].devices?.length > models[b].devices?.length ? 1 : -1);
+                    };
+                    break;
+                default:
+                    LocalDataDisplayValues.sortMethod = undefined;
+            }
+            showLocalData();
+        });
+        $('#refresh_models_btn').click(function () {
+            getDevices();
+        });
+        $('#model-filter a').click(function () {
+            const t = $(this).text();
+            $('#model-filter-btn').text(t);
+            switch (t) {
+                case 'Groups':
+                    LocalDataDisplayValues.filterMethod = function(a) { return models[a].model.model== 'group'};
+                    break;
+                case 'Routers':
+                    LocalDataDisplayValues.filterMethod = function(a) { return models[a].model.type == 'Router'};
+                    break;
+                case 'End Devices':
+                    LocalDataDisplayValues.filterMethod = function(a) { return models[a].model.type == 'EndDevice'};
+                    break;
+                case 'with options':
+                    LocalDataDisplayValues.filterMethod = function(a) { return models[a].setOptions && Object.keys(models[a].setOptions).length > 0 };
+                    break;
+                case 'without options':
+                    LocalDataDisplayValues.filterMethod = function(a) { return !(models[a].setOptions && Object.keys(models[a].setOptions).length > 0) };
+                    break;
+                default: LocalDataDisplayValues.filterMethod = undefined;
+            }
+            showLocalData();
+        });
     });
 
     const text = $('#pairing').attr('data-tooltip');
@@ -2058,6 +2442,14 @@ function showPairingProcess(noextrabuttons) {
         dismissible: false
     });
 
+    $('#modalpairing a.btn[name=\'extendpairing\']').unbind('click');
+    $('#modalpairing a.btn[name=\'extendpairing\']').click(function () {
+        openNetwork();
+    });
+    $('#modalpairing a.btn[name=\'endpairing\']').unbind('click');
+    $('#modalpairing a.btn[name=\'endpairing\']').click(function () {
+        stopPairing();
+    });
     if (noextrabuttons) {
         $('#modalpairing').find('.endpairing').addClass('hide');
         $('#modalpairing').find('.extendpairing').addClass('hide');
@@ -2185,6 +2577,7 @@ socket.emit('subscribeObjects', namespace + '.*');
 
 // react to changes
 socket.on('stateChange', function (id, state) {
+    UpdateAdapterAlive(true);
     // only watch our own states
     if (id.substring(0, namespaceLen) !== namespace) return;
     if (state) {
@@ -2220,6 +2613,9 @@ socket.on('stateChange', function (id, state) {
                     isHerdsmanRunning = false;
                     updateStartButton();
                 }
+                if (state.val === 'Closing network.') {
+                    getDevices();
+                }
             }
         } else {
             const devId = getDevId(id);
@@ -2247,6 +2643,7 @@ socket.on('stateChange', function (id, state) {
 
 
 socket.on('objectChange', function (id, obj) {
+    UpdateAdapterAlive(true);
     if (id.substring(0, namespaceLen) !== namespace) return;
     if (obj && obj.type == 'device') { // && obj.common.type !== 'group') {
         updateDevice(id);
@@ -2257,6 +2654,7 @@ socket.on('objectChange', function (id, obj) {
         if (elems.length === 3) {
             removeDevice(id);
             showDevices();
+            showLocalData();
         }
     }
 });
@@ -2324,7 +2722,7 @@ function showNetworkMap(devices, map) {
             node.label = 'Coordinator';
             // delete node.color;
         }
-        console.warn(`node for device ${JSON.stringify(node)}`)
+        //console.warn(`node for device ${JSON.stringify(node)}`)
         return node;
     };
 
@@ -3173,6 +3571,42 @@ function resetConfirmation() {
     });
 }
 
+
+function selectBackup() {
+    sendToWrapper(namespace, 'listbackups', {}, function(msg) {
+        const candidates = {};
+        for (const fn of msg.files) {
+            const m = fn.matchAll(/backup_([0-9]+)_([0-9]+)_([0-9]+)-([0-9]+)_([0-9]+)_([0-9]+)/gm);
+            console.warn(`m is ${JSON.stringify(m)}`);
+            if (m) {
+                candidates[`${m[3]}.${m[2]}.${m[1]} ${m[4]}:${m[5]}`] = fn;
+            }
+        }
+        console.warn('candidates is ' + JSON.stringify(candidates));
+        list2select('#backup_Selector', msg.files, [], (key, val) => { return val; }, (key, val) => { return val; })
+        $('#modalrestore').modal('open');
+        const btn = $('#modalrestore .modal-content a.btn-large');
+        btn.unbind('click')
+        btn.click(function (e) {
+            const name = $('#backup_Selector').val();
+            console.warn(` filename is ${name}`);
+            $('#modalrestore').modal('close');
+            showWaitingDialog(`Attempting to restore the backup from ${name}`, 180000);
+            const start = Date.now();
+            sendToWrapper(namespace, 'restore', {name}, function(msg) {
+                closeWaitingDialog();
+                if (msg.error) {
+                    showMessage(msg.error, _('Error'))
+                }
+                else {
+                    const duration = Date.now() - start;
+                    showMessage(`Restored configuration from backup after ${duration / 1000} s`, 'Restore successful');
+                }
+            })
+        })
+    })
+
+}
 function showViewConfig() {
     $('#modalviewconfig').modal('open');
 }
@@ -3559,14 +3993,13 @@ function genDevInfo(device) {
         if (value === undefined) {
             return '';
         } else {
-            return `<li><span class="label">${name.replace('_',' ')}:</span><span>${value}</span></li>`;
+            const label = `${name=='' ? '&nbsp;' : name + ':'}`;
+            return `<li><span class="label">${label.replace('_',' ')}</span><span>${value}</span></li>`;
         }
     };
     const genRowValues = function (name, value) {
-        if (value === undefined) {
-            return '';
-        } else {
-            let label = `${name}:`;
+        if (Array.isArray(value)) {
+            let label = `${name=='' ? '&nbsp;' : name + ':'}`;
             try {
                 return value.map((val) => {
                     const row = `<li><span class="label">${label}</span><span>${val}</span></li>`;
@@ -3578,6 +4011,7 @@ function genDevInfo(device) {
                 return `<li><span class="label">${label}</span><span>${JSON.stringify(value)}</span></li>`
             }
         }
+        else return '';
     };
     const modelUrl = (!mapped) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${sanitizeModelParameter(mapped.model)}.html" target="_blank" rel="noopener noreferrer">${mapped.model}</a>`;
     const mappedInfo = [];
@@ -3589,7 +4023,7 @@ function genDevInfo(device) {
             if (item == 'model')
                 mappedInfo.push(genRow(item,modelUrl));
             else
-                mappedInfo.push(genRow(item,mapped[item]));
+                if (typeof mapped[item] != 'object') mappedInfo.push(genRow(item,mapped[item]));
         }
         mappedInfo.push(
             `            </ul>
@@ -3611,7 +4045,7 @@ function genDevInfo(device) {
     const imgSrc = device.icon || device.common.icon;
     const imgInfo = (imgSrc) ? `<img src=${imgSrc} width='150px' onerror="this.onerror=null;this.src='img/unavailable.png';"><div class="divider"></div>` : '';
     const info =[
-        `<div class="col s12 m6 l6 xl6">
+        `<div class="col ${device.memberinfo != undefined ? 's12 m12 l12 xl12':'s12 m6 l6 xl6'}">
             ${imgInfo}
             ${mappedInfo.join('')}
             <div class="divider"></div>
@@ -3620,8 +4054,19 @@ function genDevInfo(device) {
     for (const item in dev) {
         info.push(genRow(item, dev[item]));
     }
-    info.push(`                ${genRow('configured', (device.isConfigured), true)}
-                </ul>
+    if (device.memberinfo != undefined) {
+        const memberCount = (device.memberinfo.length);
+        if (memberCount != 1) info.push(genRow(`Members`, `${memberCount}`));
+        for (let m = 0; m < device.memberinfo.length; m++) {
+            const dev =  getDeviceByIEEE(device.memberinfo[m].ieee);
+            const epid = device.memberinfo[m].epid;
+            const epname = Array.isArray(dev.info.endpoints) ? `:${dev.info.endpoints.find((item) => item.ID == epid)?.epName}` : undefined;
+            info.push(genRow(`Member${memberCount > 1 ?  ' ' + (m+1) : ''}`, `${device.memberinfo[m].device}${epname ? epname : ''} - ${device.memberinfo[m].ieee}.${epid}`));
+        }
+        info.push(`</div>
+        </div>`);
+    }
+    else info.push(`${genRow('configured', (device.isConfigured), true)}</ul>
             </div>
         </div>
         <div class="col s12 m6 l6 xl6">
@@ -3951,20 +4396,22 @@ function sortByTitle(element) {
 
 
 function updateDevice(id) {
-    sendToWrapper(namespace, 'getDevice', {id: id}, function (msg) {
-        if (msg) {
-            const devs = msg.devices;
-            if (devs) {
-                if (devs.error) {
-                    showMessage(devs.error, _('Error'));
-                } else {
-                    removeDevice(id);
-                    devs.forEach(dev => devices.push(dev));
-                    showDevices();
+    if (devices.length > 0)
+        sendToWrapper(namespace, 'getDevice', {id: id}, function (msg) {
+            if (msg) {
+                const devs = msg.devices;
+                if (devs) {
+                    if (devs.error) {
+                        showMessage(devs.error, _('Error'));
+                    } else {
+                        removeDevice(id);
+                        devs.forEach(dev => devices.push(dev));
+                        showDevices();
+                    }
                 }
             }
-        }
-    });
+        });
+    else sendToWrapper(namespace, 'getDevices', {}, extractDevicesData)
 }
 
 function removeDevice(id) {
@@ -3978,7 +4425,8 @@ function removeDevice(id) {
 }
 
 function swapActive(id) {
-    const dev = getDeviceByID(id);
+    const dev = getDeviceByID(id) || getDeviceByIEEE(`0x${id}`);
+    console.warn(`swap_active for ${id} -> ${JSON.stringify(dev)}`);
     if (dev && dev.common) {
         dev.common.deactivated = !(dev.common.deactivated);
         sendToWrapper(namespace, 'setDeviceActivated', {id: id, deactivated: dev.common.deactivated}, function () {