public/src/js/page/settings.js

   1 define([
   2     'jquery',
   3     'jquery-sortable',
   4     'lodash',
   5     'js/util'
   6 ], function (
   7     $,
   8     js,
   9     _,
  10     Util
  11 ) {
  12     'use strict';
  13
  14     var ANALYSIS_URL = '<%= protocol %>//<%= hostname %>:<%= port %>/analysis';
  15     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>';
  16
  17     var repoStore = [];  // { name, url }
  18     var recipeStore = []; // TODO: define repo spec
  19
  20     function getRepoStore() {
  21         return repoStore;
  22     }
  23
  24     function _addRepo(url) {
  25         $('#tic-repository-list').append(_.template(ROPO_LI)({
  26             url: url
  27         }));
  28
  29         // TODO: define repo spec
  30         repoStore.push({
  31             url: url
  32         })
  33     }
  34
  35     // TODO: set/get sortable repo
  36     function _updateRepo() {
  37         var $repo = $('#tic-repository-list');
  38         $repo.empty();
  39
  40         _.forEach(repoStore, function(repo) {
  41             _addRepo(repo.url);
  42         });
  43     }
  44
  45     function _getAnalysisUrl() {
  46         return _.template(ANALYSIS_URL)({
  47             protocol: location.protocol,
  48             hostname: location.hostname,
  49             port: parseInt(location.port) + 1 // tic-core port
  50         });
  51     }
  52
  53     function updatePackage() {
  54         return new Promise(function (resolve, reject) {
  55             // TODO: define repo spec
  56             var postBody = {
  57                 repos : _.map(_.orderBy(repoStore, ['priority']), 'url'),
  58                 recipes : ['default']
  59             };
  60             $.ajax({
  61                 type: 'POST',
  62                 contentType: 'text/plain',
  63                 data: JSON.stringify(postBody),
  64                 dataType: 'json',
  65                 processData: false,
  66                 // TODO: test url
  67                 // url: './temp/test.json',
  68                 // url: 'http://172.21.110.103:59001/analysis',
  69                 url: _getAnalysisUrl(),
  70                 success: function(rawData) {
  71                     repoStore = rawData.data.repos;
  72                     _updateRepo();
  73                     resolve(rawData.data);
  74                 },
  75                 error: function(err) {
  76                     reject(err);
  77                 },
  78             });
  79         });
  80     }
  81
  82     function init() {
  83         console.log('settings: init');
  84
  85         /**
  86          * Recipe Import/Export
  87          */
  88         function _recipeImportBtnHandler() {
  89             // TODO:
  90             Util.showAlertDialog('Not yet implemented');
  91         }
  92         $('#tic-repository-recipe-import').on('click', _recipeImportBtnHandler);
  93         function _recipeExportBtnHandler() {
  94             // TODO:
  95             Util.showAlertDialog('Not yet implemented');
  96         }
  97         $('#tic-repository-recipe-export').on('click', _recipeExportBtnHandler);
  98
  99         /**
 100          * Repository Input Component
 101          */
 102         function _filter() {
 103             var input = $(this).val();
 104             var duplicatedUrl = _.filter(repoStore, ['url', input]);
 105
 106             if (Util.validateURL(input) && _.isEmpty(duplicatedUrl)) {
 107                 $('#tic-repository-add').prop('disabled', false);
 108             } else {
 109                 $('#tic-repository-add').prop('disabled', true);
 110             }
 111             $('#tic-repository-input-clear').toggleClass('hidden', _.isEmpty(input));
 112         }
 113         $('#tic-repository-input').on('input change', _filter);
 114
 115         function _inputClearBtnHandler() {
 116             $('#tic-repository-input').val('').trigger('change').focus();
 117             $(this).toggleClass('hidden', true);
 118         }
 119         $('#tic-repository-input-clear').on('click', _inputClearBtnHandler);
 120
 121         /**
 122          * Add Repository Button
 123          */
 124         function _addRepoBtnHandler() {
 125             var $repoInput = $('#tic-repository-input');
 126             var input = $repoInput.val();
 127             _addRepo(input);
 128             $repoInput.val('');
 129             $('#tic-repository-add').prop('disabled', true);
 130             $('#tic-repository-input-clear').addClass('hidden');
 131         }
 132         $('#tic-repository-add').prop('disabled', true).on('click', _addRepoBtnHandler);
 133
 134         /**
 135          * Remove Repository Button
 136          */
 137         function _removeRepoBtnHandler() {
 138             var $li = $(this).parent();
 139             var url = $li.text();
 140             _.remove(repoStore, function (node) {
 141                 return _.isEqual(node.url, url);
 142             });
 143             $li.remove();
 144         }
 145         $('#tic-repository-list').on('click', 'button', _removeRepoBtnHandler);
 146
 147         /**
 148          * Repository List
 149          */
 150         var adjustment;
 151         $('#tic-repository-list').sortable({
 152             group: 'tic-repository-list',
 153             pullPlaceholder: false,
 154
 155             // set $item relative to cursor position
 156             onDragStart: function ($item, container, _super) {
 157                 var offset = $item.offset()
 158                 var pointer = container.rootGroup.pointer;
 159                 adjustment = {
 160                     left: pointer.left - offset.left,
 161                     top: pointer.top - offset.top
 162                 };
 163                 _super($item, container);
 164             },
 165             onDrag: function ($item, position) {
 166                 $item.css({
 167                     left: position.left - adjustment.left,
 168                     top: position.top - adjustment.top
 169                 });
 170             }
 171         });
 172
 173         /**
 174          * Apply Button
 175          */
 176         function _applyRepoBtnHandler() {
 177             Util.showLoadingDialog(true);
 178             updatePackage()
 179             .then(function(rawData) {
 180                 return require('js/page/package').updatePackageTree(rawData);
 181             })
 182             .then(function () {
 183                 Util.showLoadingDialog(false);
 184             })
 185             .catch(function (reason) {
 186                 console.log(reason);
 187                 Util.showLoadingDialog(false);
 188                 Util.showAlertDialog('Failed to load package list.<br>Please check the tic-core.');
 189             });
 190         }
 191         $('#tic-repository-apply').on('click', _applyRepoBtnHandler);
 192
 193     }
 194
 195     init();
 196
 197     return {
 198         /**
 199          * Get package data from tic-core
 200          * @method updatePackage
 201          * @return {object} object of package
 202          */
 203         updatePackage: updatePackage,
 204
 205         /**
 206          * Get repository data
 207          * @method getRepoStore
 208          * @return {array} array of repository object
 209          */
 210         getRepoStore: getRepoStore
 211     }
 212
 213 });