[SECIOTSRK-449] View is updated for displaying of simple devices

diff --git a/tv-widget/ui/resources/ui/device/tree/body.svg b/tv-widget/ui/resources/ui/device/tree/body.svg
new file mode 100644 (file)
index 0000000..1566f22
--- /dev/null
+++ b/tv-widget/ui/resources/ui/device/tree/body.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<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"\r
+        width="299px" height="299px" viewBox="0 0 299 299" enable-background="new 0 0 299 299" xml:space="preserve">\r
+<path fill="#FFFFFF" 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\r
+       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\r
+       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\r
+       s9,4,9,9S284.1,159.3,279.2,159.3z"/>\r
+</svg>\r

diff --git a/tv-widget/ui/resources/ui/device/tree/end.svg b/tv-widget/ui/resources/ui/device/tree/end.svg
new file mode 100644 (file)
index 0000000..0f16c3e
--- /dev/null
+++ b/tv-widget/ui/resources/ui/device/tree/end.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<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"\r
+        width="299px" height="299px" viewBox="0 0 299 299" enable-background="new 0 0 299 299" xml:space="preserve">\r
+<path fill="#FFFFFF" 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\r
+       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\r
+       S284.1,159.3,279.2,159.3z"/>\r
+</svg>\r

diff --git a/tv-widget/ui/scripts/context.js b/tv-widget/ui/scripts/context.js
index 7f2d011..844aa92 100644 (file)
--- a/tv-widget/ui/scripts/context.js
+++ b/tv-widget/ui/scripts/context.js
@@ -1,5 +1,5 @@
 /*Global context*/
 function Context() {}
 
-Context.DBG         = false;     // If "false" - hides logs area on the HTML page.
+Context.DBG         = false;    // If "false" - hides logs area on the HTML page.
 Context.TESTDATA    = false;    // "true" to work with test data
\ No newline at end of file

diff --git a/tv-widget/ui/scripts/controllers/devices_controller.js b/tv-widget/ui/scripts/controllers/devices_controller.js
index b3ccbd8..998807b 100644 (file)
--- a/tv-widget/ui/scripts/controllers/devices_controller.js
+++ b/tv-widget/ui/scripts/controllers/devices_controller.js
@@ -22,25 +22,51 @@ function DevicesController() {
         if (Context.TESTDATA) {
             var devices = [
                            {
-                               id: "sadasdasdasdas",
+                               id: "id",
+                               parentUuid: "",
                                type: "tv",
                                status: 1,
-                               name: "My Smart Tv",
+                               name: "My Smart HUB",
                                description: "Description tv"
                            },
                            {
+                               id: "primitive-lol",
+                               parentUuid: "id",
+                               type: "smartplug",
+                               status: 1,
+                               name: "Simple Smart Plug",
+                               description: "Description plug"
+                           },
+                           {
                                id: "lol",
+                               parentUuid: "id",
                                type: "light",
                                status: 0,
-                               name: "My Smart LAmp",
+                               name: "Simple Smart Lamp",
                                description: "Description lamp"
+                           },
+                           {
+                               id: "pimitive_other",
+                               parentUuid: "other",
+                               type: "phone",
+                               status: 1,
+                               name: "Simple Phone",
+                               description: "Description phone"
+                           },
+                           {
+                               id: "other",
+                               parentUuid: "",
+                               type: "phone",
+                               status: 1,
+                               name: "My Smart Phone",
+                               description: "Description phone"
                            }
                            ];
-                           htmlBuilder.fillOwnedDevicesList(devices);
-                return;
+               htmlBuilder.fillOwnedDevicesList(devices);
+               return;
         }
 
-            if (connector) {
+        if (connector) {
             Loading.start();
             htmlBuilder.removeOwnedDevicesList();
             connector.sendCommand(this.key_getOwnedDevices, {});
@@ -104,8 +130,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.sendCommand(this.key_unownDevice, {"id": id});
             }
@@ -158,17 +190,18 @@ function DevicesController() {
         }
 
         this.fillOwnedDevicesList = function(devices) {
+            var firstCnt = 0;
+            var simpleDevicesList = [];
+
             for (var int = 0; int < devices.length; int++) {
                 var device = devices[int];
+                var simpleDevice = device.parentUuid.length > 0;
+                var simpleDeviceClass = simpleDevice ? "simple" : "";
                 var deviceType = DevicesController.getDeviceType(device.type);
                 var deviceStatus = DevicesController.getDeviceStatus(device.status);
-                var deviceHtml = "<div class='device " + deviceType + "' data-id='" + device.id + "'>";
-
-                if (int == 0) {
-                    deviceHtml = "<div class='first device " + deviceType + "' data-id='" + device.id + "'>";
-                }
-
-                deviceHtml +=       "<div class='icon'></div>" +
+                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>" +
@@ -178,7 +211,24 @@ function DevicesController() {
                                         "<button class='btn btn-info btn-lg' data-control='unown'>Unpair</button>" +
                                     "</div>" +
                                 "</div>";
-                $(m_ownedDevicesList).append(deviceHtml);
+
+                if (simpleDevice) {
+                    simpleDevicesList.push({"parentUuid": device.parentUuid, "html": deviceHtml});
+                } else {
+                    $(m_ownedDevicesList).append(deviceHtml);
+                }
+            }
+
+            //append primitive devices
+            for (var int = 0; int < simpleDevicesList.length; int++) {
+                var device = simpleDevicesList[int];
+
+                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);
             }
         }
 
@@ -191,13 +241,8 @@ function DevicesController() {
                 var device = devices[int];
                 var deviceType = DevicesController.getDeviceType(device.type);
                 var deviceStatus = DevicesController.getDeviceStatus(device.status);
-                var deviceHtml = "<div class='device " + deviceType + "' data-id='" + device.id + "'>";
-
-                if (int == 0) {
-                    deviceHtml = "<div class='first device " + deviceType + "' data-id='" + device.id + "'>";
-                }
-
-                deviceHtml +=       "<div class='icon'></div>" +
+                var deviceHtml = "<div class='device " + deviceType + "' data-id='" + device.id + "'>" +
+                                    "<div class='icon'></div>" +
                                     "<div class='info'>" +
                                         "<div class='name'>" + device.name + "</div>" +
                                         "<div class='description'>" + device.description + "</div>" +
@@ -212,6 +257,10 @@ 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 + "]").slideUp(500 , function(){ $(this).remove(); });
         }
     }
@@ -222,7 +271,6 @@ DevicesController.getDeviceId = function() {
 }
 
 DevicesController.getDeviceType = function(deviceType) {
-    //TODO: use real device type values
     switch(deviceType) {
     case "tv":
         return "tv";

diff --git a/tv-widget/ui/scripts/controls.js b/tv-widget/ui/scripts/controls.js
index 5319f2e..6c59f68 100644 (file)
--- a/tv-widget/ui/scripts/controls.js
+++ b/tv-widget/ui/scripts/controls.js
@@ -105,10 +105,11 @@ function ownedDeviceClickHandler(e) {
 function deviceActionButtonClick() {
     var control = $(this).data("control");
     var id = $(this).closest(".device").attr("data-id");
+    var hub = $(this).closest(".device").attr("data-hub") == "hub" ? true : false;
 
     switch (control) {
         case "unown":
-            devicesController.unownDevice(id);
+            devicesController.unownDevice(id, hub);
             break;
     }
 }

diff --git a/tv-widget/ui/styles/styles.css b/tv-widget/ui/styles/styles.css
index 422770a..aae455d 100644 (file)
--- a/tv-widget/ui/styles/styles.css
+++ b/tv-widget/ui/styles/styles.css
@@ -223,6 +223,20 @@ a {
  box-shadow: 0 0 1em rgba(238, 238, 238, 0.7);
 }
 
+.simple-list .device.simple .tree {
+ background-image: url("/resources/ui/device/tree/body.svg");
+ width: 10%;
+ 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 {
  width: 100%;
  height: 4em;
@@ -232,7 +246,11 @@ a {
  border-bottom: 1px solid #ebebeb;
 }
 
-.device.first {
+.simple-list .device:first-child {
+ border-top: 0 none;
+}
+
+.device:first-child {
  border-top: 1px solid #ebebeb;
 }