Dashboard was implemented [WEB app side]
authorArtem Motchanyi <a.motchanyi@samsung.com>
Fri, 12 May 2017 07:35:08 +0000 (10:35 +0300)
committerArtem Motchanyi <a.motchanyi@samsung.com>
Fri, 12 May 2017 11:55:02 +0000 (14:55 +0300)
18 files changed:
iot-manager-dashboard/.tproject
iot-manager-dashboard/css/styles.css
iot-manager-dashboard/css/tools/carousel.css [new file with mode: 0644]
iot-manager-dashboard/js/controllers/dashboard_controller.js
iot-manager-dashboard/js/controllers/devices_controller.js
iot-manager-dashboard/js/controls.js
iot-manager-dashboard/js/main.js
iot-manager-dashboard/js/tools/carousel.js [new file with mode: 0644]
iot-manager-dashboard/resources/ui/header/next.png [new file with mode: 0644]
iot-manager-dashboard/resources/ui/header/prev.png [new file with mode: 0644]
iot-manager-dashboard/resources/ui/status/err.png [new file with mode: 0644]
iot-manager-dashboard/resources/ui/status/ok.png [new file with mode: 0644]
iot-manager-dashboard/views/agent_policies.html [new file with mode: 0644]
iot-manager-dashboard/views/dashboard.html
iot-manager-dashboard/views/index.html
iot-manager-dashboard/views/policies.html [new file with mode: 0644]
iot-manager-dashboard/views/reports.html [new file with mode: 0644]
iot-manager-service/project_def.prop

index 6e862c5..56660b2 100644 (file)
@@ -8,8 +8,5 @@
     <package>
         <blacklist/>
         <resFallback autoGen="true"/>
-        <subProjects>
-            <tizenProject project="iot-manager-service" style="native main"/>
-        </subProjects>
     </package>
 </tproject>
index 58fedb7..773cefb 100644 (file)
@@ -6,6 +6,16 @@ img {
     border: none !important;
 }
 
+.fleft {
+    float: left;
+    width: 100%;
+}
+
+.fright {
+    float: right;
+    width: 100%;
+}
+
 .hid {
     visibility: hidden !important;
     display: none !important;
@@ -176,18 +186,25 @@ img {
     background-position: center center;
     background-repeat: no-repeat;
     background-size: 3em;
+}
+
+.device .icon,
+#dashboard .device-info .icon {
     background-image: url("/resources/ui/device/default.png");
 }
 
-.device.tv .icon {
+.device.tv .icon,
+#dashboard .device-info.tv .icon {
     background-image: url("/resources/ui/device/tv.png");
 }
 
-.device.smartphone .icon {
+.device.smartphone .icon,
+#dashboard .device-info.smartphone .icon {
     background-image: url("/resources/ui/device/smartphone.png");
 }
 
-.device.lamp .icon {
+.device.lamp .icon,
+#dashboard .device-info.lamp .icon {
     background-image: url("/resources/ui/device/lamp.png");
 }
 
@@ -231,4 +248,141 @@ img {
     background-image: url("/resources/ui/device/status/warning.png");
 }
 
-/*devices styles*//*END*/
\ No newline at end of file
+/*devices styles*//*END*/
+
+/*security dashboard styles*//*START*/
+
+#dashboard .device-info {
+    float: left;
+    width: 92%;
+    border-bottom: 1px #eeeeee solid !important;
+    padding: 4%;
+    background-color: #ffffff;
+}
+
+#dashboard .device,
+#reports .device {
+    background-color: #ffffff;
+}
+
+#dashboard .device-info .list .item {
+    float: left;
+    width: 100%;
+    color: #75787B;
+    padding-bottom: 1em;
+    height: 1em;
+}
+
+#dashboard .device-info .list .item .key {
+    float: left;
+}
+
+#dashboard .device-info .list .item .value {
+    float: right;
+    height: 100%;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 1em;
+    width: 10%;
+}
+
+#dashboard .device-info .list .item .value.ok {
+    background-image: url("/resources/ui/status/ok.png");
+}
+
+#dashboard .device-info .list .item .value.err {
+    background-image: url("/resources/ui/status/err.png");
+}
+
+#dashboard .device-info .controls,
+#dashboard .device-info .list {
+    float: left;
+    width: 100%;
+}
+
+#dashboard .device-info .controls button {
+    margin-top: 1em;
+    border-color: #00c4b3;
+    color: #00c4b3;
+    background-color: inherit;
+    box-shadow: none;
+}
+
+#dashboard .device-info .controls button:hover {
+    box-shadow: 0 0 10px rgba(0,204,204,0.5);
+}
+
+#dashboard .agent-list {
+    float: left;
+    width: 100%;
+    background-color: #fafafa;
+}
+
+#dashboard .agent-list .agent {
+    float: left;
+    width: 100%;
+    border-bottom: 1px solid #ebebeb;
+}
+
+#dashboard .agent-list .agent .name {
+    margin: 1em;
+}
+
+.circle { 
+    padding:10px;
+    margin:0 auto;
+    border-radius:100%;
+}
+
+.circle.green { 
+    background-color:green;
+}
+
+.circle.red { 
+    background-color:red;
+}
+
+#reports-list {
+    width: 92%;
+    float: left;
+    padding: 0 4%;
+}
+
+#reports-list .item {
+    width: 100%;
+    float: left;
+    display: none;
+}
+
+#reports-list .item.active {
+    display: block;
+}
+
+#reports-list div.name-lable,
+#reports-list div.date-lable {
+    float: left;
+    font-weight: bold;
+    width: 16%;
+    margin-top: 4pt;
+}
+
+#reports-list div.name,
+#reports-list div.date {
+    float: left;
+    width: 84%;
+    margin-top: 4pt;
+}
+
+#reports-list .body {
+    float: left;
+    width: 100%;
+    margin-top: 1em;
+}
+
+#reports-list .body textarea {
+    width: 100%;
+    height: 24em;
+    max-height: 24em;
+    resize: none;
+}
+/*security dashboard styles*//*END*/
\ No newline at end of file
diff --git a/iot-manager-dashboard/css/tools/carousel.css b/iot-manager-dashboard/css/tools/carousel.css
new file mode 100644 (file)
index 0000000..29d7bc4
--- /dev/null
@@ -0,0 +1,15 @@
+.page-pins {
+    margin: 0 auto;
+}
+
+.page-circle { 
+    padding: 8px;
+    margin: 4px;
+    border-radius: 100%;
+    background-color: #a1a1a1;
+    float: left;
+}
+
+.page-circle.active {
+    background-color: #0077c8;
+}
\ No newline at end of file
index 70209ee..747e0a0 100644 (file)
 **/
 
 function DashboardController() {
+    var data = {
+            "device": {"id":"123456789","name":"My TV","name":"smart-tv","status":0,"description":"TV device"},
+            "reports": [
+                         {
+                            "id": "1234",
+                            "date": "12:25 PM; May 08, 2017",
+                            "name": "sim",
+                            "result": 0,
+                            "data": { "report": "smart-security data" }
+                        },
+                        {
+                            "id": "47",
+                            "date": "12:25 PM; Apr 08, 2017",
+                            "name": "smart-security",
+                            "result": 1,
+                            "data": { "report": "sim repasdasd asd asd asda sd asd as dasd asd asd asd asdort data",
+                                "report2": "sim report data",
+                                "report4": "sim report data",
+                                "report3": "sim report data",
+                                "report1": "sim report data"}
+                        }
+                       ],
+            "policies": [],
+            "agents": [
+                       {"id": 1, "name": "Agent 1", "policies": []},
+                       {"id": 2, "name": "Agent 2", "policies": []},
+                       {"id": 3, "name": "Agent 3", "policies": []}
+                       ]
+    };
+
+    this.key_getDeviceDashboard = "dashboard.get";
+
     var htmlBuilder = new HtmlBuilder();
 
     //return device id of the current dashboard
@@ -17,24 +49,124 @@ function DashboardController() {
         return htmlBuilder.getDeviceId();
     }
 
-    //TODO: stub, will be implemented in next sprints
-    //request device's security information and reports, generate dashboard
+    //get device info for Dashboard
     this.getDeviceDashboard = function(id) {
-        //FIXME: tmp solution
-        htmlBuilder.generateDashboard(id);
+        //FIXME: remove after API implemented
+        htmlBuilder.clearDashboard();
+        htmlBuilder.generateDashboard(data);
+        return;
+
+        if (connector) {
+            Loading.start();
+            htmlBuilder.clearDashboard();
+            connector.sendMessage(connector.getDefaultRemotePort(), this.key_getDeviceDashboard, {"id": id});
+        }
+    }
+
+    //get device info for Dashboard callback
+    function getDeviceDashboard_cb(sender, content) {
+        Loading.stop();
+
+        if (!checkErrorCode(content.error_code)) {
+            Popup.show(content.description, Popup.Icon.ERROR);
+
+            return;
+        }
+
+        htmlBuilder.generateDashboard(content.data);
     }
 
+    listeners[this.key_getDeviceDashboard] = getDeviceDashboard_cb;
+
     /*UI builder*/
     function HtmlBuilder() {
-        var m_page = "#dashboard";
+        var m_dashboardPage     = "#dashboard";
+        var m_dashboard         = "#dashboard-content";
+        var m_reportsPage       = "#reports";
+        var m_reports           = "#reports-content";
+        var m_reportsList       = "#reports-list";
 
         this.getDeviceId = function() {
-            return $(m_page).attr("data-id");
+            return $(m_dashboardPage).attr("data-id");
+        }
+
+        this.clearDashboard = function() {
+            $(m_dashboard).empty();
+        }
+
+        this.generateDashboard = function(data) {
+            var deviceType = DevicesController.getDeviceType(data.device.name);
+            var deviceStatus = DevicesController.getDeviceStatus(data.device.status);
+            var deviceHTML = "<div class='device " + deviceType + "'>" +
+                                "<div class='icon'></div>" +
+                                "<div class='info'>" +
+                                    "<div class='name'>" + data.device.name + "</div>" +
+                                    "<div class='description'>" + data.device.description + "</div>" +
+                                "</div>" +
+                                "<div class='status " + deviceStatus + "'></div>" +
+                            "</div>";
+
+            $(m_dashboard).append(deviceHTML);
+            $(m_dashboardPage).attr("data-id", data.device.id);
+            $(m_dashboard).append(
+                "<div class='device-info'>" +
+                    "<div class='list'></div>" +
+                    "<div class='controls'>" +
+                        "<button class='btn-reports ui-btn ui-shadow ui-corner-all'>Device reports</button>" +
+                        "<button class='btn-policies ui-btn ui-shadow ui-corner-all'>Device policies</button>" +
+                    "</div>" +
+                    "<div class='fleft' style='margin-top: 2em;'>Installed Agents</div>" +
+                "</div>"
+            );
+
+            data.reports.forEach(function(report) {
+                var status = "ok";
+
+                if (report.result != 0) {
+                    status = "err";
+                }
+
+                $(m_dashboard).find(".device-info .list").append(
+                    "<div class='item'>" +
+                        "<div class='key'>" + report.name + "</div>" +
+                        "<div class='value " + status + "'</div>" +
+                    "</div>"
+                );
+            });
+
+            $(m_dashboard).append("<div class='agent-list'></div>");
+
+            data.agents.forEach(function(agent) {
+                $(m_dashboard).find(".agent-list").append(
+                    "<div class='agent'>" +
+                        "<div class='name'>" + agent.name + "</div>" +
+                    "</div>"
+                );
+            });
+
+            generateReportPage(deviceHTML, data.reports);
         }
 
-        this.generateDashboard = function(id) {
-            //FIXME: tmp solution
-            $(m_page).attr("data-id", id);
+        function generateReportPage(deviceHTML, reports) {
+            $(m_reports).empty();
+            $(m_reports).append(
+                deviceHTML + 
+                "<div id='reports-list'></div>"
+            );
+
+            reports.forEach(function(report){
+                $(m_reportsList).append(
+                    "<div class='item " + report.name + "' data-item='" + report.name + "'>" +
+                        "<div class='name-lable'>Name:</div><div class='name'>" + report.name + "</div>" +
+                        "<div class='date-lable'>Date:</div><div class='date'>" + report.date + "</div>" +
+                        "<div class='body'><textarea readonly='readonly' data-role='none'>" + JSON.stringify(report.data, null, 4) + "</textarea></div>" +
+                    "</div>"
+                );
+            });
+
+            $(m_reportsList).find(".item:first").addClass("active");
+            var reportCarousel = new Carousel();
+            reportCarousel.init(m_reportsList);
         }
     }
 }
\ No newline at end of file
index a6e6dc8..e57c10f 100644 (file)
@@ -63,8 +63,10 @@ function DevicesController() {
 
     //own device
     this.ownDevice = function(id) {
-        if (connector) {
-            connector.sendMessage(connector.getDefaultRemotePort(), this.key_ownDevice, {"id": id});
+        if (confirm("Do you want to pair this device?")) {
+            if (connector) {
+                connector.sendMessage(connector.getDefaultRemotePort(), this.key_ownDevice, {"id": id});
+            }
         }
     }
 
@@ -82,8 +84,14 @@ function DevicesController() {
 
     //unown device
     this.unownDevice = function(id) {
-        if (connector) {
-            connector.sendMessage(connector.getDefaultRemotePort(), this.key_unownDevice, {"id": id});
+        if (confirm("Do you want to unpair this device?")) {
+            //FIXME: remove after function will be implemented on the network manager side
+            Popup.show("Isn't implemented", Popup.Icon.ERROR);
+            return;
+
+            if (connector) {
+                connector.sendMessage(connector.getDefaultRemotePort(), this.key_unownDevice, {"id": id});
+            }
         }
     }
 
@@ -151,11 +159,11 @@ function DevicesController() {
         }
 
         this.removeUnownedDevice = function(id) {
-            $(m_unownedDevicesList).find(".device[data-id=" + id + "]").remove();
+            $(m_unownedDevicesList).find(".device[data-id=" + id + "]").slideUp(500 , function(){ $(this).remove(); });
         }
 
         this.removeOwnedDevice = function(id) {
-            $(m_ownedDevicesList).find(".device[data-id=" + id + "]").remove();
+            $(m_ownedDevicesList).find(".device[data-id=" + id + "]").hide("slow", function(){ $(this).remove(); });
         }
     }
 }
@@ -178,10 +186,10 @@ DevicesController.getDeviceStatus = function(deviceStatus) {
     //TODO: use real status values
     switch(deviceStatus) {
     case 0:
-        return "on"
+        return "off";
     case 1:
-        return "warning";
+        return "on"
     default:
-        return "off";
+        return "warning";
     }
 }
\ No newline at end of file
index 6ee5fdf..bca1750 100644 (file)
@@ -16,6 +16,9 @@ $(document).ready(function() {
     bindEvent("submit", AuthorizationController.loginForm, loginClickHandler);
     bindEvent("click", "#unowned-devices .device", unownedDeviceControllHandler);
     bindEvent("click", "#owned-devices .device", ownedDeviceControllHandler);
+    bindEvent("click", "#dashboard .controls .btn-reports", deviceReportsControllHandler);
+    bindEvent("click", "#dashboard .controls .btn-policies", devicePoliciesControllHandler);
+    bindEvent("click", "#dashboard .agent-list .agent", agentPoliciesControllHandler);
 });
 
 function leftHeaderControllHandler() {
@@ -59,4 +62,16 @@ function unownedDeviceControllHandler() {
 function ownedDeviceControllHandler() {
     var id = $(this).data("id");
     go(Page.DASHBOARD, id);
+}
+
+function devicePoliciesControllHandler() {
+    go(Page.POLICIES);
+}
+
+function deviceReportsControllHandler() {
+    go(Page.REPORTS);
+}
+
+function agentPoliciesControllHandler() {
+    go(Page.AGENT_POLICIES);
 }
\ No newline at end of file
index 799efe7..abcae44 100644 (file)
@@ -14,8 +14,8 @@ var depth = 0;
 var pageHistory = [];
 
 var authorizationController = null;
-var devicesController = null;
-var dashboardController = null;
+var devicesController       = null;
+var dashboardController     = null;
 
 var nativeServiceAppId  = "org.tizen.iot-manager-service";
 var remotePortID        = "NATIVE_APP";
@@ -148,6 +148,18 @@ function initAllPages() {
     $.get("../views/dashboard.html", function(data) {
         $("#" + Page.LOGIN).after(data);
     });
+
+    $.get("../views/reports.html", function(data) {
+        $("#" + Page.LOGIN).after(data);
+    });
+
+    $.get("../views/policies.html", function(data) {
+        $("#" + Page.LOGIN).after(data);
+    });
+
+    $.get("../views/agent_policies.html", function(data) {
+        $("#" + Page.LOGIN).after(data);
+    });
 }
 
 // Initialize function
diff --git a/iot-manager-dashboard/js/tools/carousel.js b/iot-manager-dashboard/js/tools/carousel.js
new file mode 100644 (file)
index 0000000..c06f4f3
--- /dev/null
@@ -0,0 +1,75 @@
+//Carousel
+function Carousel() {
+    var items;
+    var itemsArr = [];
+    var ptr = 0;
+    var end = 0;
+    var pinsClass   = "page-pins";
+    var circleClass = "page-circle";
+    //var controls;
+    //var previousB = "button.prev";
+    //var nextB = "button.next";
+
+    this.init = function(carouselItemsContainer, swipeArea) {
+        //controls = $(controlsContainer);
+        items = $(carouselItemsContainer);
+        $(items).find("div.item").each(function() {
+            itemsArr.push($(this).data("item"));
+        });
+        end = itemsArr.length - 1;
+
+        generatePagePins(itemsArr.length);
+
+        /*$("body").off("click", "#" + $(controls).attr("id") + " " + previousB, back);
+        $("body").on("click", "#" + $(controls).attr("id") + " " + previousB, back);
+        $("body").off("click", "#" + $(controls).attr("id") + " " + nextB, forward);
+        $("body").on("click", "#" + $(controls).attr("id") + " " + nextB, forward);*/
+        
+        $("body").off("swipeleft", swipeArea, forward);
+        $("body").on("swipeleft", swipeArea, forward);
+        $("body").off("swiperight", swipeArea, back);
+        $("body").on("swiperight", swipeArea, back);
+    }
+    
+    function generatePagePins(count) {
+        var widthStyle = "width:" + (1.5 * count) + "em;";
+        $(items).prepend("<div class='" + pinsClass + "' style='" + widthStyle + "'></div>");
+
+        for (var i = 0; i < count; i++) {
+            $(items).find("." + pinsClass).append("<div class='" + circleClass + "'></div>");
+        }
+
+        $(items).find("." + pinsClass + ":first").addClass("active");
+        active($(items).find("." + pinsClass), $(items).find("." + pinsClass + " ." + circleClass + ":first"));
+    }
+
+    function back() {
+        if (ptr == 0) {
+            ptr = end;
+        } else {
+            ptr--;
+        }
+
+        active($(items).find(".item"), $(items).find("." + itemsArr[ptr]));
+        active($(items).find("." + pinsClass + " ." + circleClass), $(items).find("." + pinsClass + " ." + circleClass + ":nth-child(" + (1 + ptr) + ")"));
+    }
+
+    function forward() {
+        if (ptr == end) {
+            ptr = 0;
+        } else {
+            ptr++;
+        }
+
+        active($(items).find(".item"), $(items).find("." + itemsArr[ptr]));
+        active($(items).find("." + pinsClass + " ." + circleClass), $(items).find("." + pinsClass + " ." + circleClass + ":nth-child(" + (1 + ptr) + ")"));
+    }
+
+    function active(container, element) {
+        $(container).each(function () {
+            $(this).removeClass("active");
+        });
+
+        $(element).addClass("active");
+    }
+}
diff --git a/iot-manager-dashboard/resources/ui/header/next.png b/iot-manager-dashboard/resources/ui/header/next.png
new file mode 100644 (file)
index 0000000..bb0e56d
Binary files /dev/null and b/iot-manager-dashboard/resources/ui/header/next.png differ
diff --git a/iot-manager-dashboard/resources/ui/header/prev.png b/iot-manager-dashboard/resources/ui/header/prev.png
new file mode 100644 (file)
index 0000000..40daebe
Binary files /dev/null and b/iot-manager-dashboard/resources/ui/header/prev.png differ
diff --git a/iot-manager-dashboard/resources/ui/status/err.png b/iot-manager-dashboard/resources/ui/status/err.png
new file mode 100644 (file)
index 0000000..6bc2f01
Binary files /dev/null and b/iot-manager-dashboard/resources/ui/status/err.png differ
diff --git a/iot-manager-dashboard/resources/ui/status/ok.png b/iot-manager-dashboard/resources/ui/status/ok.png
new file mode 100644 (file)
index 0000000..0e4bf7b
Binary files /dev/null and b/iot-manager-dashboard/resources/ui/status/ok.png differ
diff --git a/iot-manager-dashboard/views/agent_policies.html b/iot-manager-dashboard/views/agent_policies.html
new file mode 100644 (file)
index 0000000..a414fe7
--- /dev/null
@@ -0,0 +1,11 @@
+<div id="agent-policies" data-role="page" class="type-interior page">
+    <div data-role="header" data-position="fixed" data-tap-toggle="false" class="header">
+        <div class="left-header back" data-case="back"></div>
+        <div class="mid-header"><span>Agent policies</span></div>
+    </div>
+    <div data-role="content" class="nopadding">
+        <div class="content">
+            TBD
+        </div>
+    </div>
+</div>
\ No newline at end of file
index e5ed21a..b9b9883 100644 (file)
@@ -5,6 +5,6 @@
         <div class="right-header" data-case="unpair"><span>Unpair</span></div>
     </div>
     <div data-role="content" class="nopadding">
-        <div class="content">TBD</div>
+        <div id="dashboard-content" class="content"></div>
     </div>
 </div>
\ No newline at end of file
index 75853ed..b005dc0 100644 (file)
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="../resources/jquery-mobile/css/jquery.mobile-1.4.5.css"/>
     <link rel="stylesheet" href="../css/styles.css"/>
     <link rel="stylesheet" href="../css/tools/loading.css"/>
+    <link rel="stylesheet" href="../css/tools/carousel.css"/>
     <script type="text/javascript" src="../resources/jquery-mobile/js/jquery-1.11.3.js"></script>
     <script type="text/javascript" src="../resources/jquery-mobile/js/jquery.mobile-1.4.5.js"></script>
     <script type="text/javascript" src="../js/service_connector.js"></script>
@@ -17,6 +18,7 @@
     <script type="text/javascript" src="../js/menu.js"></script>
     <script type="text/javascript" src="../js/controls.js"></script>
     <script type="text/javascript" src="../js/tools/loading.js"></script>
+    <script type="text/javascript" src="../js/tools/carousel.js"></script>
 </head>
 
 <body>
diff --git a/iot-manager-dashboard/views/policies.html b/iot-manager-dashboard/views/policies.html
new file mode 100644 (file)
index 0000000..30aae4b
--- /dev/null
@@ -0,0 +1,11 @@
+<div id="policies" data-role="page" class="type-interior page">
+    <div data-role="header" data-position="fixed" data-tap-toggle="false" class="header">
+        <div class="left-header back" data-case="back"></div>
+        <div class="mid-header"><span>Device policies</span></div>
+    </div>
+    <div data-role="content" class="nopadding">
+        <div class="content">
+            TBD
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/iot-manager-dashboard/views/reports.html b/iot-manager-dashboard/views/reports.html
new file mode 100644 (file)
index 0000000..5633266
--- /dev/null
@@ -0,0 +1,8 @@
+<div id="reports" data-role="page" class="type-interior page">
+    <div data-role="header" data-position="fixed" data-tap-toggle="false" class="header">
+        <div class="left-header back" data-case="back"></div>
+        <div class="mid-header"><span>Device reports</span></div>
+    </div>
+    <div id="reports-content" data-role="content" class="nopadding">
+    </div>
+</div>
\ No newline at end of file
index f2f7b9d..4bc9336 100644 (file)
@@ -1,9 +1,9 @@
-APPNAME = service
+APPNAME = iot-manager-service
 
 type = app
-profile = mobile-2.4
+profile = mobile-3.0
 
-USER_SRCS = src/service.c
+USER_SRCS = src/service.cpp
 USER_DEFS =
 USER_INC_DIRS = inc
 USER_OBJS =