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%;
}
.device .info {
- width: 60%;
+ width: 44%;
float:left;
}
}
.device .status {
- width: 20%;
+ width: 16%;
height: 100%;
- float:left;
+ float: right;
background-position: center center;
background-repeat: no-repeat;
background-size: 2em;
}
//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});
}
}
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);
});
}
}
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";
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();
--- /dev/null
+<?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="#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\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
--- /dev/null
+<?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="#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\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