[TIC-UI] add url validation in settings page

[archive/20170607/tools/tic.git] / public / src / js / page / settings.js

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
     }