[TIC-UI] add url validation in settings page

- add url validation
- add apply button

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

diff --git a/public/src/css/style.css b/public/src/css/style.css
index d790172..5703cd4 100644 (file)
--- a/public/src/css/style.css
+++ b/public/src/css/style.css
@@ -9,7 +9,7 @@ html {
     height: 100%;
 }
 
-@media(min-width:767px) {
+@media(min-width:992px) {
     .navbar {
         -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
         -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
@@ -20,11 +20,12 @@ html {
         padding: 0;
     }
 }
+
 .modal {
   text-align: center;
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 992px) {
   .modal:before {
     display: inline-block;
     vertical-align: middle;
@@ -33,11 +34,15 @@ html {
   }
 }
 
+.panel {
+    margin-bottom: 5px;
+}
+
 /* Modal Dialog */
 .modal-dialog {
-  display: inline-block;
-  text-align: left;
-  vertical-align: middle;
+    display: inline-block;
+    text-align: left;
+    vertical-align: middle;
 }
 
 /* Main Navigator Bar */
@@ -54,7 +59,6 @@ html {
 }
 
 #tic-package-section {
-    height: 100%;
     padding-top: 70px;
     background: #e1e1e1;
 }
@@ -66,10 +70,10 @@ html {
 }
 
 #tic-package-left-col-tree {
-        height: 30vh;
-        position: relative;
-        overflow: auto;
-    }
+    height: 30vh;
+    position: relative;
+    overflow: auto;
+}
 @media (min-width: 768px) {
     #tic-package-left-col-tree {
         height: 80vh;
@@ -84,14 +88,14 @@ html {
 
 /* TODO: Height of Treeview, Package Information and Summary grid in Package Page */
 #tic-package-info-table {
-    height: 16vh;
+    height: 15vh;
     display: inline-block;
     position: relative;
     overflow: auto;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
     #tic-package-info-table {
-        height: 43.7vh;
+        height: 43vh;
         display: inline-block;
         position: relative;
         overflow: auto;
@@ -104,7 +108,7 @@ html {
     position: relative;
     overflow: auto;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
     #tic-package-summary {
         height: 20vh;
         display: inline-block;
@@ -126,7 +130,7 @@ html {
     position: relative;
     overflow: auto;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
     #tic-image-summary {
         height: 70vh;
         display: inline-block;
@@ -143,12 +147,17 @@ html {
     background: #e1e1e1;
 }
 
+#tic-repository-toolbar {
+    margin-bottom: 10px;
+}
+
 /* Sortable Repo List */
 .dragged {
     position: absolute;
     opacity: 0.5;
     z-index: 2000;
 }
+
 #tic-repository-list li {
     cursor: move;
     display: block;
@@ -156,7 +165,9 @@ html {
     border: 1px solid #CCC;
     color: #08c;
     background: #eee;
+    max-width: 100%;
 }
+
 #tic-repository-list li.placeholder {
     position: relative;
     margin: 0;
@@ -164,6 +175,7 @@ html {
     border: none;
     content: "";
 }
+
 #tic-repository-list li.placeholder:before {
     position: absolute;
     content: "";
@@ -176,3 +188,12 @@ html {
     border-left-color: #f00;
     border-right: none;
 }
+
+.tic-repository-url {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 90%;
+    display: inline-block;
+    vertical-align: middle;
+}
\ No newline at end of file

diff --git a/public/src/index.html b/public/src/index.html
index cfbd630..d0ba481 100644 (file)
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -200,9 +200,9 @@
                         <div class="panel panel-primary">
                             <div class="panel-body">
                                 <!-- Settings Toolbar -->
-                                <div>
-                                    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-import" aria-hidden="true"></span>Recipe Import</button>
-                                    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-export" aria-hidden="true"></span>Recipe Export</button>
+                                <div id="tic-repository-toolbar">
+                                    <button type="button" id="tic-repository-recipe-import" class="btn btn-default"><i class="fa fa-download"></i> Recipe Import</button>
+                                    <button type="button" id="tic-repository-recipe-export" class="btn btn-default"><i class="fa fa-upload"></i> Recipe Export</button>
                                 </div>
 
                                 <!-- Repository Column -->
@@ -212,7 +212,7 @@
                                         <div class="input-group">
                                             <input id="tic-repository-input" type="text" class="form-control" placeholder="Enter repository URL">
                                             <span class="input-group-btn">
-                                                <button id="tic-repository-add"class="btn btn-default" type="button">Add Repository</button>
+                                                <button type="button" id="tic-repository-add"class="btn btn-default">Add Repository</button>
                                             </span>
                                         </div>
                                         <ol id="tic-repository-list" class="list-group"></ol>
@@ -221,7 +221,7 @@
                             </div>
 
                             <div class="panel-footer">
-                                <a id="tic-repository-apply" type="button" class="btn btn-default" href="#tic-package-section">Apply</a>
+                                <a id="tic-repository-apply" type="button" class="btn btn-primary" href="#tic-package-section">Apply</a>
                             </div>
                         </div>
                     </div><!-- /End Settings Column -->
@@ -229,6 +229,7 @@
             </div><!-- /.container -->
         </section>
 
+
         <!-- Loading Dialog -->
         <div class="modal fade" id="tic-load-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
             <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
@@ -248,6 +249,7 @@
             </div>
         </div>><!-- /End Alert Dialog -->
 
+
         <!-- library loading -->
         <script src="/socket.io/socket.io.js"></script>
         <script src="/lib/jquery/jquery.js"></script>

diff --git a/public/src/js/page/package.js b/public/src/js/page/package.js
index b9b587b..73266b8 100644 (file)
--- a/public/src/js/page/package.js
+++ b/public/src/js/page/package.js
@@ -183,6 +183,7 @@ define([
                 }
             });
             if (!_.isEmpty(checkedRefNode)) {
+                Util.showLoadingDialog(false);
                 Util.showAlertDialog('\'' +localNode.text + '\'' + ' package repuired from ' + '\'' + _.toString(_.map(checkedRefNode, 'text')) + '\'');
 
                 // cancel for unchecked

diff --git a/public/src/js/page/settings.js b/public/src/js/page/settings.js
index 932cd63..61d83c9 100644 (file)
--- a/public/src/js/page/settings.js
+++ b/public/src/js/page/settings.js
@@ -12,36 +12,27 @@ define([
     'use strict';
 
     var ANALYSIS_URL = '<%= protocol %>//<%= hostname %>:<%= port %>/analysis';
-    var ROPO_LI = '<li class="list-group-item clearfix"><span><%= url %></span><button type="button" class="btn pull-right btn-default tic-repo-list"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></li>';
+    var ROPO_LI = '<li class="list-group-item clearfix"><span class="tic-repository-url"><%= url %></span><button type="button" class="btn pull-right btn-default"><i class="fa fa-trash-o"></i></button></li>';
 
     var repoStore = [];  // { name, url }
-    var recipeStore = []; // TODO:
+    var recipeStore = []; // TODO: define repo spec
 
     function getRepoStore() {
         return repoStore;
     }
 
     function _addRepo(url) {
-        var $repo = $('#tic-repository-list');
-        var li = _.template(ROPO_LI)({ url: url });
-        $repo.append(li);
-
-        $('.tic-repo-list').on('click', function (e) {
-            var $li = $(this).parent();
-            var url = $li.text();
-            _.remove(repoStore, function (node) {
-                return _.isEqual(node.url, url);
-            });
-            $li.remove();
-        });
+        $('#tic-repository-list').append(_.template(ROPO_LI)({
+            url: url
+        }));
 
-        // TODO:
+        // TODO: define repo spec
         repoStore.push({
             url: url
         })
     }
 
-    // TODO: sortable repoStore
+    // TODO: set/get sortable repo
     function _updateRepo() {
         var $repo = $('#tic-repository-list');
         $repo.empty();
@@ -55,29 +46,27 @@ define([
         return _.template(ANALYSIS_URL)({
             protocol: location.protocol,
             hostname: location.hostname,
-            port: parseInt(location.port) + 1
+            port: parseInt(location.port) + 1 // tic-core port
         });
     }
 
     function updatePackage() {
         return new Promise(function (resolve, reject) {
-            // FIXME: 'priority' property from core
+            // TODO: define repo spec
             var postBody = {
                 repos : _.map(_.orderBy(repoStore, ['priority']), 'url'),
                 recipes : ['default']
             };
             $.ajax({
                 type: 'POST',
-                // TODO: local file test
-                // type: 'GET',
                 contentType: 'text/plain',
                 data: JSON.stringify(postBody),
                 dataType: 'json',
                 processData: false,
-                url: _getAnalysisUrl(),
                 // TODO: test url
-                // url: 'http://172.21.110.103:59001/analysis',
                 // url: './temp/test.json',
+                // url: 'http://172.21.110.103:59001/analysis',
+                url: _getAnalysisUrl(),
                 success: function(rawData) {
                     repoStore = rawData.data.repos;
                     _updateRepo();
@@ -93,18 +82,62 @@ define([
     function init() {
         console.log('settings: init');
 
-        // set add repo button
-        $('#tic-repository-add').on('click', function () {
+        /**
+         * Recipe Import/Export
+         */
+        function _recipeImportBtnHandler() {
+            // TODO:
+            Util.showAlertDialog('Not yet implemented');
+        }
+        $('#tic-repository-recipe-import').on('click', _recipeImportBtnHandler);
+        function _recipeExportBtnHandler() {
+            // TODO:
+            Util.showAlertDialog('Not yet implemented');
+        }
+        $('#tic-repository-recipe-export').on('click', _recipeExportBtnHandler);
+
+        /**
+         * Repository Input Component
+         */
+        function _filter() {
+            var input = $(this).val();
+            var duplicatedUrl = _.filter(repoStore, ['url', input]);
+            if (Util.validateURL(input) && _.isEmpty(duplicatedUrl)) {
+                $('#tic-repository-add').prop('disabled', false);
+            } else {
+                $('#tic-repository-add').prop('disabled', true);
+            }
+        }
+        $('#tic-repository-input').on('input', _filter);
+
+        /**
+         * Add Repository Button
+         */
+        function _addRepoBtnHandler() {
             var $repoInput = $('#tic-repository-input');
             var input = $repoInput.val();
-            var url = Util.validateURL(input);
-            if (url) {
-                _addRepo(input);
-            }
+            _addRepo(input);
             $repoInput.val('');
-        });
+            $('#tic-repository-add').prop('disabled', true);
+        }
+        $('#tic-repository-add').prop('disabled', true).on('click', _addRepoBtnHandler);
+
+        /**
+         * Remove Repository Button
+         */
+        function _removeRepoBtnHandler() {
+            var $li = $(this).parent();
+            var url = $li.text();
+            _.remove(repoStore, function (node) {
+                return _.isEqual(node.url, url);
+            });
+            $li.remove();
+        }
+        $('#tic-repository-list').on('click', 'button', _removeRepoBtnHandler);
 
-        // set sortable list
+        /**
+         * Repository List
+         */
         var adjustment;
         $('#tic-repository-list').sortable({
             group: 'tic-repository-list',
@@ -128,9 +161,10 @@ define([
             }
         });
 
-        // apply button
-        $('#tic-repository-apply').on('click', function () {
-            // TODO: refactoring
+        /**
+         * Apply Button
+         */
+        function _applyRepoBtnHandler() {
             Util.showLoadingDialog(true);
             updatePackage()
             .then(function(rawData) {
@@ -144,15 +178,26 @@ define([
                 Util.showLoadingDialog(false);
                 Util.showAlertDialog('Failed to load package list.<br>Please check the tic-core.');
             });
-        });
+        }
+        $('#tic-repository-apply').on('click', _applyRepoBtnHandler);
 
     }
 
     init();
 
     return {
+        /**
+         * Get package data from tic-core
+         * @method updatePackage
+         * @return {object} object of package
+         */
         updatePackage: updatePackage,
 
+        /**
+         * Get repository data
+         * @method getRepoStore
+         * @return {array} array of repository object
+         */
         getRepoStore: getRepoStore
     }