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             if (Util.validateURL(input) && _.isEmpty(duplicatedUrl)) {
 106                 $('#tic-repository-add').prop('disabled', false);
 107             } else {
 108                 $('#tic-repository-add').prop('disabled', true);
 109             }
 110         }
 111         $('#tic-repository-input').on('input', _filter);
 112
 113         /**
 114          * Add Repository Button
 115          */
 116         function _addRepoBtnHandler() {
 117             var $repoInput = $('#tic-repository-input');
 118             var input = $repoInput.val();
 119             _addRepo(input);
 120             $repoInput.val('');
 121             $('#tic-repository-add').prop('disabled', true);
 122         }
 123         $('#tic-repository-add').prop('disabled', true).on('click', _addRepoBtnHandler);
 124
 125         /**
 126          * Remove Repository Button
 127          */
 128         function _removeRepoBtnHandler() {
 129             var $li = $(this).parent();
 130             var url = $li.text();
 131             _.remove(repoStore, function (node) {
 132                 return _.isEqual(node.url, url);
 133             });
 134             $li.remove();
 135         }
 136         $('#tic-repository-list').on('click', 'button', _removeRepoBtnHandler);
 137
 138         /**
 139          * Repository List
 140          */
 141         var adjustment;
 142         $('#tic-repository-list').sortable({
 143             group: 'tic-repository-list',
 144             pullPlaceholder: false,
 145
 146             // set $item relative to cursor position
 147             onDragStart: function ($item, container, _super) {
 148                 var offset = $item.offset()
 149                 var pointer = container.rootGroup.pointer;
 150                 adjustment = {
 151                     left: pointer.left - offset.left,
 152                     top: pointer.top - offset.top
 153                 };
 154                 _super($item, container);
 155             },
 156             onDrag: function ($item, position) {
 157                 $item.css({
 158                     left: position.left - adjustment.left,
 159                     top: position.top - adjustment.top
 160                 });
 161             }
 162         });
 163
 164         /**
 165          * Apply Button
 166          */
 167         function _applyRepoBtnHandler() {
 168             Util.showLoadingDialog(true);
 169             updatePackage()
 170             .then(function(rawData) {
 171                 return require('js/page/package').updatePackageTree(rawData);
 172             })
 173             .then(function () {
 174                 Util.showLoadingDialog(false);
 175             })
 176             .catch(function (reason) {
 177                 console.log(reason);
 178                 Util.showLoadingDialog(false);
 179                 Util.showAlertDialog('Failed to load package list.<br>Please check the tic-core.');
 180             });
 181         }
 182         $('#tic-repository-apply').on('click', _applyRepoBtnHandler);
 183
 184     }
 185
 186     init();
 187
 188     return {
 189         /**
 190          * Get package data from tic-core
 191          * @method updatePackage
 192          * @return {object} object of package
 193          */
 194         updatePackage: updatePackage,
 195
 196         /**
 197          * Get repository data
 198          * @method getRepoStore
 199          * @return {array} array of repository object
 200          */
 201         getRepoStore: getRepoStore
 202     }
 203
 204 });