Display the device model section

This way we can differentiate between the different states

app/qml/main.qml

@@ -40,6 +40,25 @@ ApplicationWindow
             Layout.fillHeight: true
             ListView {
                 id: devicesView
+
+                section {
+                    property: "status"
+                    delegate: Label {
+                        text: switch (parseInt(section))
+                        {
+                            case DevicesModel.StatusUnknown:
+                                return i18n("Unknown")
+                            case DevicesModel.StatusPaired:
+                                return i18n("Paired")
+                            case DevicesModel.StatusReachable:
+                                return i18n("Reachable")
+                            case (DevicesModel.StatusReachable | DevicesModel.StatusPaired):
+                                return i18n("Paired & Reachable")
+                        }
+
+                    }
+                }
+
                 spacing: 5
                 model: DevicesSortProxyModel {
                     sourceModel: DevicesModel {
@@ -49,7 +68,7 @@ ApplicationWindow
                 }
                 delegate: DeviceDelegate {
                     width: parent.width
-                   onClicked: {
+                    onClicked: {
                         var data = {
                             item: deviceViewComponent,
                             properties: {currentDevice: device}

interfaces/devicesmodel.cpp

@@ -63,6 +63,7 @@ QHash< int, QByteArray > DevicesModel::roleNames() const
     names.insert(IdModelRole, "deviceId");
     names.insert(IconNameRole, "iconName");
     names.insert(DeviceRole, "device");
+    names.insert(StatusModelRole, "status");
     return names;
 }