Improve zigbee settings when a node has multiple things

nymea-app/styles.qrc

@@ -37,5 +37,6 @@
         <file>styles/lime/logo-wide.svg</file>
         <file>styles/noir/logo-wide.svg</file>
         <file>ui/Configuration.qml</file>
+        <file>styles/dark/Dialog.qml</file>
     </qresource>
 </RCC>

nymea-app/styles/dark/Dialog.qml

@@ -0,0 +1,105 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.9
+import QtQuick.Templates 2.2 as T
+import QtQuick.Controls 2.2
+import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Material.impl 2.2
+import Nymea 1.0
+
+T.Dialog {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            header && header.visible ? header.implicitWidth : 0,
+                            footer && footer.visible ? footer.implicitWidth : 0,
+                            contentWidth > 0 ? contentWidth + leftPadding + rightPadding : 0)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             (header && header.visible ? header.implicitHeight + spacing : 0)
+                             + (footer && footer.visible ? footer.implicitHeight + spacing : 0)
+                             + (contentHeight > 0 ? contentHeight + topPadding + bottomPadding : 0))
+
+    contentWidth: contentItem.implicitWidth || (contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0)
+    contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0)
+
+    padding: 24
+    topPadding: 20
+
+    Material.elevation: 24
+
+    enter: Transition {
+        // grow_fade_in
+        NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
+        NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; easing.type: Easing.OutCubic; duration: 150 }
+    }
+
+    exit: Transition {
+        // shrink_fade_out
+        NumberAnimation { property: "scale"; from: 1.0; to: 0.9; easing.type: Easing.OutQuint; duration: 220 }
+        NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
+    }
+
+    background: Rectangle {
+        radius: Style.smallCornerRadius
+        color: control.Material.dialogColor
+
+        layer.enabled: control.Material.elevation > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
+        }
+    }
+
+    header: Label {
+        text: control.title
+        visible: control.title
+        elide: Label.ElideRight
+        padding: 24
+        bottomPadding: 0
+        // TODO: QPlatformTheme::TitleBarFont
+        font.bold: true
+        font.pixelSize: 16
+        background: Rectangle {
+            radius: 2
+            color: control.Material.dialogColor
+            clip: true
+        }
+    }
+
+    footer: DialogButtonBox {
+        visible: count > 0
+    }
+}

nymea-app/ui/system/ZigbeeNetworkPage.qml

@@ -269,12 +269,15 @@ SettingsPageBase {
                 engine: _engine
                 paramsFilter: {"ieeeAddress": nodeDelegate.node.ieeeAddress}
             }
-            readonly property Thing nodeThing: nodeThings.count === 1 ? nodeThings.get(0) : null
+            readonly property Thing nodeThing: nodeThings.count >= 1 ? nodeThings.get(0) : null
             property int signalStrength: node ? Math.round(node.lqi * 100.0 / 255.0) : 0
 
             Layout.fillWidth: true
-            text: nodeThing ? nodeThing.name : node.model
+            text: node.model + " - " + node.manufacturer// nodeThing ? nodeThing.name : node.model
-            subText: node.manufacturer || node.ieeeAddress
+            subText: node.state == ZigbeeNode.ZigbeeNodeStateInitializing ?
+                         qsTr("Initialiazing...")
+                       : nodeThings.count == 1 ? nodeThing.name :
+                                                 nodeThings.count > 1 ? qsTr("%1 things").arg(nodeThings.count) : qsTr("Unrecognized device")
             iconName: nodeThing ? app.interfacesToIcon(nodeThing.thingClass.interfaces) : "/ui/images/zigbee.svg"
             iconColor: busy
                        ? Style.tileOverlayColor
@@ -327,11 +330,10 @@ SettingsPageBase {
                   ? "/ui/images/zigbee-router.svg"
                   : "/ui/images/zigbee-enddevice.svg"
                 color: communicationIndicatorLedTimer.running ? Style.accentColor : Style.iconColor
-                Component.onCompleted: print("************+ node type", node.type)
             }
 
             onClicked: {
-                var popup = nodeInfoComponent.createObject(app, {node: node, nodeThing: nodeThing})
+                var popup = nodeInfoComponent.createObject(app, {node: node, nodeThings: nodeThings})
                 popup.open()
             }
         }
@@ -342,9 +344,10 @@ SettingsPageBase {
         MeaDialog {
             id: nodeInfoDialog
             property ZigbeeNode node: null
-            property Thing nodeThing: null
+            property ThingsProxy nodeThings: null
+            readonly property Thing nodeThing: nodeThings.count > 0 ? nodeThings.get(0) : null
             header: Item {
-                implicitHeight: headerRow.height + Style.margins
+                implicitHeight: headerRow.height
                 implicitWidth: parent.width
                 RowLayout {
                     id: headerRow
@@ -352,65 +355,98 @@ SettingsPageBase {
                     spacing: Style.margins
                     ColorIcon {
                         id: headerColorIcon
-                        Layout.preferredHeight: Style.hugeIconSize
+                        Layout.preferredHeight: Style.bigIconSize
                         Layout.preferredWidth: height
                         color: Style.accentColor
-                        name: nodeThing ? app.interfacesToIcon(nodeThing.thingClass.interfaces) : "/ui/images/zigbee.svg"
+                        name: "/ui/images/zigbee.svg"
-                        visible: name.length > 0
                     }
-
+                    ColumnLayout {
-                    TextField {
-                        id: titleLabel
-                        Layout.fillWidth: true
                         Layout.margins: Style.margins
-                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                        Label {
-                        text: nodeThing ? nodeThing.name : node.model
+                            Layout.fillWidth: true
-                        color: Style.accentColor
+                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                        font.pixelSize: app.largeFont
+                            text: nodeInfoDialog.node.model
-                        readOnly: nodeInfoDialog.nodeThing == null
+                        }
-                        onEditingFinished: engine.thingManager.editThing(nodeInfoDialog.nodeThing.id, text)
+                        Label {
+                            Layout.fillWidth: true
+                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                            text: nodeInfoDialog.node.manufacturer
+                        }
                     }
                 }
             }
 
             standardButtons: Dialog.NoButton
 
-            NymeaItemDelegate {
+            GridLayout {
-                text: qsTr("Model")
+                columns: 2
-                Layout.fillWidth: true
+                Label {
-                progressive: false
+                    text: qsTr("IEEE address:")
-                subText: nodeInfoDialog.node.model
+                    font: Style.smallFont
+                }
+                Label {
+                    Layout.fillWidth: true
+                    text: nodeInfoDialog.node.ieeeAddress
+                    font: Style.smallFont
+                    horizontalAlignment: Text.AlignRight
+                }
+                Label {
+                    text: qsTr("Network address:")
+                    font: Style.smallFont
+                }
+                Label {
+                    Layout.fillWidth: true
+                    text: "0x" + nodeInfoDialog.node.networkAddress.toString(16)
+                    font: Style.smallFont
+                    horizontalAlignment: Text.AlignRight
+                }
+                Label {
+                    text: qsTr("Signal strength:")
+                    font: Style.smallFont
+                }
+                Label {
+                    Layout.fillWidth: true
+                    text: (nodeInfoDialog.node.lqi * 100 / 255).toFixed(0) + " %"
+                    font: Style.smallFont
+                    horizontalAlignment: Text.AlignRight
+                }
+                Label {
+                    text: qsTr("Version:")
+                    font: Style.smallFont
+                }
+                Label {
+                    Layout.fillWidth: true
+                    text: nodeInfoDialog.node.version.length > 0 ? nodeInfoDialog.node.version : qsTr("Unknown")
+                    font: Style.smallFont
+                    horizontalAlignment: Text.AlignRight
+                }
             }
-            NymeaItemDelegate {
+
-                text: qsTr("Manufacturer")
+            SettingsPageSectionHeader {
-                Layout.fillWidth: true
+                text: qsTr("Associated things")
-                progressive: false
+                Layout.leftMargin: 0
-                subText: nodeInfoDialog.node.manufacturer
+                Layout.rightMargin: 0
             }
-            NymeaItemDelegate {
+
-                text: qsTr("IEEE address")
+            Repeater {
-                Layout.fillWidth: true
+                model: nodeInfoDialog.nodeThings
-                progressive: false
+                delegate: RowLayout {
-                subText: nodeInfoDialog.node.ieeeAddress
+                    id: thingDelegate
-            }
+                    property Thing thing: nodeInfoDialog.nodeThings.get(index)
-            NymeaItemDelegate {
+                    Layout.fillWidth: true
-                text: qsTr("Network address")
+                    ColorIcon {
-                Layout.fillWidth: true
+                        size: Style.iconSize
-                progressive: false
+                        source: app.interfacesToIcon(thing.thingClass.interfaces)
-                subText: "0x" + nodeInfoDialog.node.networkAddress.toString(16)
+                        color: Style.accentColor
-            }
+                    }
-            NymeaItemDelegate {
+                    TextField {
-                text: qsTr("Signal strength")
+                        text: thingDelegate.thing.name
-                Layout.fillWidth: true
+                        Layout.fillWidth: true
-                progressive: false
+                        onEditingFinished: engine.thingManager.editThing(thingDelegate.thing.id, text)
-                subText: (nodeInfoDialog.node.lqi * 100 / 255).toFixed(0) + " %"
+                    }
-            }
+                }
-            NymeaItemDelegate {
-                text: qsTr("Version")
-                Layout.fillWidth: true
-                progressive: false
-                subText: nodeInfoDialog.node.version
             }
+
             RowLayout {
                 Layout.fillWidth: true