[TIC-UI] Implementing package information in package page

Signed-off-by: ChangHyun Lee <leechwin.lee@samsung.com>
Change-Id: Ib6f972cd74b46127423c7b76b0625d3e90669515

diff --git a/public/src/css/style.css b/public/src/css/style.css
index 84cddc5..6546c8b 100644 (file)
--- a/public/src/css/style.css
+++ b/public/src/css/style.css
@@ -63,9 +63,20 @@ html {
 }
 
 #tic-package-left-col-tree {
-    height:80vh;
+    height: 80vh;
     position: relative;
-    overflow: scroll;
+    overflow: auto;
+}
+
+/* TODO: Height of Treeview, Package Information and Summary grid in Package Page */
+#tic-package-info-table {
+    height: 50vh;
+    display: inline-block;
+    position: relative;
+    overflow: auto;
+
+}
+#tic-package-info-dependency {
 }
 
 /* Image Page */

diff --git a/public/src/index.html b/public/src/index.html
index 9392e96..ce46c11 100644 (file)
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -82,9 +82,17 @@
                                     <div class="input-group">
                                         <input type="text" class="form-control" placeholder="Start typing to filter list of packages" id="tic-package-left-col-tree-toolbar-filter"/>
                                         <div class="input-group-btn">
-                                            <button type="button" class="btn btn-default"><!-- TODO: Filter Option -->
-                                                <span class="glyphicon glyphicon glyphicon-menu-hamburger" aria-hidden="true"/>
+                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                                                <span class="glyphicon glyphicon glyphicon-menu-hamburger"></span>
                                             </button>
+                                            <ul class="dropdown-menu dropdown-menu-right">
+                                                <li><a href="#">Action</a></li>
+                                                <li><a href="#">Another action</a></li>
+                                                <li><a href="#">Something else here</a></li>
+                                                <li role="separator" class="divider"></li>
+                                                <li><a href="#">Separated link</a></li>
+                                            </ul>
+
                                             <button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-collapse-all">
                                                 <span class="glyphicon glyphicon glyphicon glyphicon-minus" aria-hidden="true"/>
                                             </button>
@@ -107,16 +115,16 @@
                         <div class="panel panel-primary">
                             <div class="panel-heading">Package Information</div>
                             <div class="panel-body">
-                                <table class="table  table-condensed ">
+                                <table id="tic-package-info-table" class="table table-condensed">
                                     <tbody>
-                                        <tr><td>Name</td><td>TODO</td></tr>
-                                        <tr><td>Version</td><td>TODO</td></tr>
-                                        <tr><td>Summary</td><td>TODO</td></tr>
-                                        <tr><td>Architecture</td><td>TODO</td></tr>
-                                        <tr><td>Size</td><td>TODO</td></tr>
-                                        <tr><td>Installed Size</td><td>TODO</td></tr>
-                                        <tr><td>Dependency</td><td>TODO</td></tr>
-                                        <tr><td>Description</td><td>TODO</td></tr>
+                                        <tr><td>Name</td><td id="tic-package-info-name"></td></tr>
+                                        <tr><td>Version</td><td id="tic-package-info-version"></td></tr>
+                                        <tr><td>Architecture</td><td id="tic-package-info-arch"></td></tr>
+                                        <tr><td>Size</td><td id="tic-package-info-size"></td></tr>
+                                        <tr><td>Installed Size</td><td id="tic-package-info-installed-size"></td></tr>
+                                        <tr><td>Summary</td><td id="tic-package-info-summary"></td></tr>
+                                        <tr><td>Description</td><td id="tic-package-info-description"></td></tr>
+                                        <tr><td>Dependency</td><td id="tic-package-info-dependency"></td></tr>
                                     </tbody>
                                 </table>
                             </div>
@@ -235,7 +243,7 @@
             </div>
         </div><!-- /End Loading Dialog -->
 
-        <!-- Alert Dialog -->
+        <!-- TODO: Alert Dialog -->
         <div class="alert alert-danger fade in">
         <!-- /End Alert Dialog -->
 

diff --git a/public/src/js/page/package.js b/public/src/js/page/package.js
index 377f869..45657a0 100644 (file)
--- a/public/src/js/page/package.js
+++ b/public/src/js/page/package.js
@@ -1,9 +1,11 @@
 define([
     'jquery',
+    'lodash',
     'js/util',
     'js/page/settings'
 ], function (
     $,
+    _,
     Util,
     Settings
 ) {
@@ -34,13 +36,53 @@ define([
             $tree.treeview('expandAll');
         }
         $('#tic-package-left-col-tree-toolbar-expand-all').on('click', expandAll);
+
+        $tree.on('nodeSelected', nodeSelected);
+    }
+
+    function nodeSelected(event, node) {
+        var name = $('#tic-package-info-name').empty();
+        var version = $('#tic-package-info-version').empty();
+        var arch = $('#tic-package-info-arch').empty();
+        var size = $('#tic-package-info-size').empty();
+        var installedSize = $('#tic-package-info-installed-size').empty();
+        var summary = $('#tic-package-info-summary').empty();
+        var description = $('#tic-package-info-description').empty();
+        var dependency = $('#tic-package-info-dependency').empty();
+
+        if (!_.isEmpty(node.name)) {
+            name.html(node.name);
+        }
+        if (!_.isEmpty(node.version)) {
+            version.html(node.version);
+        }
+        if (!_.isEmpty(node.arch)) {
+            arch.html(node.arch);
+        }
+        if (!_.isEmpty(node.size)) {
+            size.html(Util.bytesToSize(node.size));
+        }
+        if (!_.isEmpty(node.installed)) {
+            installedSize.html(Util.bytesToSize(node.installed));
+        }
+        if (!_.isEmpty(node.summary)) {
+            summary.html(node.summary);
+        }
+        if (!_.isEmpty(node.description)) {
+            description.html(node.description);
+        }
+        if (!_.isEmpty(node.dependency)) {
+            // TODO: remove dependency ui in div and apply scroll ui
+            dependency.html(node.dependency.join('\r\n'));
+        }
     }
 
     function updatePackageTree(packageData) {
         $tree.treeview({
             data: packageData,
             showIcon: false,
-            showCheckbox: true
+            showCheckbox: true,
+            onNodeSelected: nodeSelected
         });
     }
 

diff --git a/public/src/js/page/settings.js b/public/src/js/page/settings.js
index afc45ff..561a260 100644 (file)
--- a/public/src/js/page/settings.js
+++ b/public/src/js/page/settings.js
@@ -15,6 +15,11 @@ define([
     var recipeStore = []; // TODO:
     var packageData;
 
+    // FIXME: 172.21.110.103:59001
+    var TIC_CORE_URL = 'http://172.21.17.231:59001';
+    // var TIC_CORE_URL = location.origin;
+    var TIC_CORE_QUERY_URL = TIC_CORE_URL + '/analysis';
+
     /* FIXME: */
     var baseRepo = {
         order: 1,
@@ -42,7 +47,7 @@ define([
         Util.showLoadingDialog(true);
 
         $.ajax({
-            contentType: 'application/json',
+            contentType: 'text/plain',
             data: JSON.stringify(postBody),
             dataType: 'json',
             success: function(rawData) {
@@ -69,7 +74,7 @@ define([
             },
             processData: false,
             type: 'POST',
-            url: 'http://172.21.17.231:59001/analysis'
+            url: TIC_CORE_QUERY_URL
         });
     }
 

diff --git a/public/src/js/util.js b/public/src/js/util.js
index b9a0e28..7c63b55 100644 (file)
--- a/public/src/js/util.js
+++ b/public/src/js/util.js
@@ -22,16 +22,31 @@ define([
         }
     }
 
+    function bytesToSize(bytes) {
+        var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        if (bytes == 0) {
+            return '0 Byte';
+        }
+        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+        return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
+    };
+
     return {
         /**
          * Set smooth scrolling, one page websites
          */
-        setAnimateScroll: setAnimateScroll,
+        setAnimateScroll : setAnimateScroll,
 
         /**
          * Display or hide the loading dialog.
          */
-        showLoadingDialog: showLoadingDialog
+        showLoadingDialog : showLoadingDialog,
+
+        /*
+         * Convert size in bytes to KB, MB, GB
+         * {@link http://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript}
+         */
+        bytesToSize : bytesToSize
     }
 
 });
\ No newline at end of file