From 19606ee7e973df4ffdacabec5b1ef403548ec6f2 Mon Sep 17 00:00:00 2001
From: Artem Motchanyi <a.motchanyi@samsung.com>
Date: Thu, 31 Aug 2017 14:44:14 +0300
Subject: [PATCH] [SECIOTSRK-450] View is updated for displaying of simple
 devices

---
 control_app/iot-manager-dashboard/css/styles.css   | 20 ++++++++--
 .../js/controllers/devices_controller.js           | 43 ++++++++++++++++++----
 control_app/iot-manager-dashboard/js/controls.js   |  4 +-
 .../resources/ui/device/tree/body.svg              | 10 +++++
 .../resources/ui/device/tree/end.svg               |  9 +++++
 5 files changed, 75 insertions(+), 11 deletions(-)
 create mode 100644 control_app/iot-manager-dashboard/resources/ui/device/tree/body.svg
 create mode 100644 control_app/iot-manager-dashboard/resources/ui/device/tree/end.svg

diff --git a/control_app/iot-manager-dashboard/css/styles.css b/control_app/iot-manager-dashboard/css/styles.css
index 328f070..99c70cb 100644
--- a/control_app/iot-manager-dashboard/css/styles.css
+++ b/control_app/iot-manager-dashboard/css/styles.css
@@ -179,6 +179,20 @@ img {
     border-bottom: 1px solid #ebebeb;
 }
 
+.simple-list .device.simple .tree {
+    background-image: url("/resources/ui/device/tree/body.svg");
+    width: 20%;
+    height: 100%;
+    float: left;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 4em;
+}
+
+.simple-list .device.simple:last-child .tree {
+    background-image: url("/resources/ui/device/tree/end.svg");
+}
+
 .device .icon {
     width: 20%;
     height: 100%;
@@ -234,7 +248,7 @@ img {
 }
 
 .device .info {
-    width: 60%;
+    width: 44%;
     float:left;
 }
 
@@ -253,9 +267,9 @@ img {
 }
 
 .device .status {
-    width: 20%;
+    width: 16%;
     height: 100%;
-    float:left;
+    float: right;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: 2em;
diff --git a/control_app/iot-manager-dashboard/js/controllers/devices_controller.js b/control_app/iot-manager-dashboard/js/controllers/devices_controller.js
index d65038e..4887dc7 100644
--- a/control_app/iot-manager-dashboard/js/controllers/devices_controller.js
+++ b/control_app/iot-manager-dashboard/js/controllers/devices_controller.js
@@ -83,8 +83,14 @@ function DevicesController() {
     }
 
     //unown device
-    this.unownDevice = function(id) {
-        if (confirm("Do you want to unpair this device?")) {
+    this.unownDevice = function(id, hub) {
+        var confirmMsg = "Do you want to unpair this device?";
+
+        if (hub) {
+            confirmMsg = "Do you want to unpair HUB with all simple devices?";
+        }
+
+        if (confirm(confirmMsg)) {
             if (connector) {
                 connector.sendMessage(connector.getDefaultRemotePort(), this.key_unownDevice, {"id": id});
             }
@@ -138,19 +144,39 @@ function DevicesController() {
         }
 
         this.fillOwnedDevicesList = function(devices) {
+            var simpleDevicesList = [];
+
             devices.forEach(function(device) {
+                var simpleDevice = device.parentUuid.length > 0;
+                var simpleDeviceClass = simpleDevice ? "simple" : "";
                 var deviceType = DevicesController.getDeviceType(device.type);
                 var deviceStatus = DevicesController.getDeviceStatus(device.status);
-                $(m_ownedDevicesList).append(
-                    "<div class='device " + deviceType + "' data-id='" + device.id + "'>" +
+                var deviceHtml =
+                    "<div class='device " + deviceType + " " + simpleDeviceClass + "' data-id='" + device.id + "' data-parentid='" + device.parentUuid + "'>" +
+                        "<div class='tree'></div>" +
                         "<div class='icon'></div>" +
                         "<div class='info'>" +
                             "<div class='name'>" + device.name + "</div>" +
                             "<div class='description'>" + device.description + "</div>" +
                         "</div>" +
                         "<div class='status " + deviceStatus + "'></div>" +
-                    "</div>"
-                );
+                    "</div>";
+
+                if (simpleDevice) {
+                    simpleDevicesList.push({"parentUuid": device.parentUuid, "html": deviceHtml});
+                } else {
+                    $(m_ownedDevicesList).append(deviceHtml);
+                }
+            });
+
+            //append primitive devices
+            simpleDevicesList.forEach(function(device) {
+                if ($(m_ownedDevicesList).find(".simple-list.simple-" + device.parentUuid).length == 0) {
+                    $(m_ownedDevicesList).find("div.device[data-id='" + device.parentUuid + "']").after("<div class='simple-list simple-" + device.parentUuid + "'></div>");
+                }
+
+                $(m_ownedDevicesList).find("div.device[data-id='" + device.parentUuid + "']").attr("data-hub", "hub");
+                $(m_ownedDevicesList).find(".simple-list.simple-" + device.parentUuid).append(device.html);
             });
         }
 
@@ -179,13 +205,16 @@ function DevicesController() {
         }
 
         this.removeOwnedDevice = function(id) {
+            if ($(m_ownedDevicesList).find(".device[data-id=" + id + "]").data("hub") == "hub") {
+                $(m_ownedDevicesList).find(".simple-list.simple-" + id).remove();
+            }
+
             $(m_ownedDevicesList).find(".device[data-id=" + id + "]").remove();
         }
     }
 }
 
 DevicesController.getDeviceType = function(deviceType) {
-    //TODO: use real device type values
     switch(deviceType) {
     case "tv":
         return "tv";
diff --git a/control_app/iot-manager-dashboard/js/controls.js b/control_app/iot-manager-dashboard/js/controls.js
index c3aa454..f666a56 100644
--- a/control_app/iot-manager-dashboard/js/controls.js
+++ b/control_app/iot-manager-dashboard/js/controls.js
@@ -40,7 +40,9 @@ function rightHeaderControllHandler() {
 
     switch(mark){
     case "unpair":
-        devicesController.unownDevice(dashboardController.getDeviceId());
+        var id = dashboardController.getDeviceId();
+        var hub = $("#" + Page.HOME).find(".device[data-id='" + id + "']").attr("data-hub") == "hub" ? true : false;
+        devicesController.unownDevice(id, hub);
         break;
     case "discovery":
         devicesController.getUnownedDevices();
diff --git a/control_app/iot-manager-dashboard/resources/ui/device/tree/body.svg b/control_app/iot-manager-dashboard/resources/ui/device/tree/body.svg
new file mode 100644
index 0000000..3066beb
--- /dev/null
+++ b/control_app/iot-manager-dashboard/resources/ui/device/tree/body.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="299px" height="299px" viewBox="0 0 299 299" enable-background="new 0 0 299 299" xml:space="preserve">
+<path fill="#1455AD" d="M279.2,130.8c-7.4,0-13.8,4.1-17.1,10.2h-98.4c-2.1-3.9-5.5-7-9.6-8.7V0h-17v132v1.3c-6,3.3-10,9.7-10,17
+	s4,13.7,10,17V299h17V168.3c3.6-1.5,6.7-4.1,8.8-7.3h100c3.5,5.3,9.5,8.8,16.3,8.8c10.8,0,19.5-8.7,19.5-19.5
+	S289.9,130.8,279.2,130.8z M146.5,159.3c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S151.5,159.3,146.5,159.3z M279.2,159.3c-5,0-9-4-9-9s4-9,9-9
+	s9,4,9,9S284.1,159.3,279.2,159.3z"/>
+</svg>
diff --git a/control_app/iot-manager-dashboard/resources/ui/device/tree/end.svg b/control_app/iot-manager-dashboard/resources/ui/device/tree/end.svg
new file mode 100644
index 0000000..0da6975
--- /dev/null
+++ b/control_app/iot-manager-dashboard/resources/ui/device/tree/end.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="299px" height="299px" viewBox="0 0 299 299" enable-background="new 0 0 299 299" xml:space="preserve">
+<path fill="#1455AD" d="M279.2,130.8c-7.4,0-13.8,4.1-17.1,10.2H154V0h-17v137.8c0,12.5,10.6,23.2,23.2,23.2h102.7
+	c3.5,5.3,9.5,8.8,16.3,8.8c10.8,0,19.5-8.7,19.5-19.5S289.9,130.8,279.2,130.8z M279.2,159.3c-5,0-9-4-9-9s4-9,9-9s9,4,9,9
+	S284.1,159.3,279.2,159.3z"/>
+</svg>
-- 
2.7.4