From 7e5341ea59f85b63fdced3556d4a51be4f0814ba Mon Sep 17 00:00:00 2001 From: ChangHyun Lee Date: Thu, 15 Dec 2016 15:32:51 +0900 Subject: [PATCH] [TIC-UI] add url validation in settings page - add url validation - add apply button Signed-off-by: ChangHyun Lee Change-Id: Ibccdb774b0bbf343497a3050710f414365cf7adc --- public/src/css/style.css | 51 +++++++++++++------ public/src/index.html | 12 +++-- public/src/js/page/package.js | 1 + public/src/js/page/settings.js | 113 ++++++++++++++++++++++++++++------------- 4 files changed, 123 insertions(+), 54 deletions(-) diff --git a/public/src/css/style.css b/public/src/css/style.css index d790172..5703cd4 100644 --- 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 --- a/public/src/index.html +++ b/public/src/index.html @@ -200,9 +200,9 @@
-
- - +
+ +
@@ -212,7 +212,7 @@
- +
    @@ -221,7 +221,7 @@
    - Apply + Apply
    @@ -229,6 +229,7 @@ + > + diff --git a/public/src/js/page/package.js b/public/src/js/page/package.js index b9b587b..73266b8 100644 --- 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 --- 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 = '
  1. <%= url %>
    2. '; + var ROPO_LI = '
  2. <%= url %>
    3. '; 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.
    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 } -- 2.7.4