From af887e538f5726d227355155655e30e15aa2eb6b Mon Sep 17 00:00:00 2001 From: Artem Motchanyi Date: Tue, 22 Aug 2017 09:54:24 +0300 Subject: [PATCH] [SECIOTSRK-449] View is updated for displaying of simple devices --- tv-widget/ui/resources/ui/device/tree/body.svg | 10 +++ tv-widget/ui/resources/ui/device/tree/end.svg | 9 ++ tv-widget/ui/scripts/context.js | 2 +- .../ui/scripts/controllers/devices_controller.js | 96 ++++++++++++++++------ tv-widget/ui/scripts/controls.js | 3 +- tv-widget/ui/styles/styles.css | 20 ++++- 6 files changed, 113 insertions(+), 27 deletions(-) create mode 100644 tv-widget/ui/resources/ui/device/tree/body.svg create mode 100644 tv-widget/ui/resources/ui/device/tree/end.svg 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 index 0000000..1566f22 --- /dev/null +++ b/tv-widget/ui/resources/ui/device/tree/body.svg @@ -0,0 +1,10 @@ + + + + + + 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 index 0000000..0f16c3e --- /dev/null +++ b/tv-widget/ui/resources/ui/device/tree/end.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/tv-widget/ui/scripts/context.js b/tv-widget/ui/scripts/context.js index 7f2d011..844aa92 100644 --- 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 --- 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 = "
"; - - if (int == 0) { - deviceHtml = "
"; - } - - deviceHtml += "
" + + var deviceHtml = "
" + + "
" + + "
" + "
" + "
" + device.name + "
" + "
" + device.description + "
" + @@ -178,7 +211,24 @@ function DevicesController() { "" + "
" + "
"; - $(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("
"); + } + + $(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 = "
"; - - if (int == 0) { - deviceHtml = "
"; - } - - deviceHtml += "
" + + var deviceHtml = "
" + + "
" + "
" + "
" + device.name + "
" + "
" + device.description + "
" + @@ -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 --- 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 --- 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; } -- 2.7.4