[TIC-UI] add the filedownload feature
[archive/20170607/tools/tic.git] / public / src / js / page / image.js
index 485c1ce..77c3136 100644 (file)
@@ -7,22 +7,28 @@ define([
 ) {
     'use strict';
 
-    var client;
+    // connected socket object
+    var client,
+
+        // the list of checked pakages
+        checkedPackagesList,
+
+        // template for the URL
+        URL_EXPORTS = '<%= protocol %>//<%= hostname %>:<%= port %>/exports',
+
+        // the path for ks
+        PATH_TIC_KS = '/tmp/tic/ks/',
+
+        // the path for images
+        PATH_TIC_IMAGES = '/tmp/tic/images/';
+
+
 
     function updateList(socket) {
-        /**
-         * FIXME
-         *
-         * changed to be set the path dynamically
-         */
         var msgData = {
-            path: './resource/images/'
+            path: PATH_TIC_IMAGES
         };
 
-        /**
-         * TODO
-         * checks
-         */
         client = socket;
 
         client.emit('ws/fs/image/list/from', msgData);
@@ -33,11 +39,39 @@ define([
             list = data.list;
             tableDomElem = $('#tic-image-list');
 
-            /**
-             * FIXME
-             */
             list.forEach(function (file) {
-                tableDomElem.append(file.name + ' (size:' + file.size + ')' + '</br>');
+                /**
+                 * @info
+                 *
+                 * file = {
+                 *  name: '',
+                 *  size: ''
+                 * }
+                 */
+                var liElem, aElem, spanElem, fileName, hrefPath;
+
+                fileName = file.name;
+
+                hrefPath = '/api/fs/download/' + fileName;
+
+                liElem = document.createElement('li');
+                liElem.innerText = fileName;
+                liElem.setAttribute('class', 'list-group-item image-item');
+
+                spanElem = document.createElement('span');
+                spanElem.innerText = '(' + file.size + 'B / ' + file.mtime + ')';
+                spanElem.setAttribute('class', 'image-list-time');
+
+                aElem = document.createElement('a');
+                aElem.innerText = 'Download';
+                aElem.setAttribute('class', 'badge');
+                aElem.setAttribute('href', hrefPath);
+                aElem.setAttribute('data-name', fileName);
+                aElem.setAttribute('download', 'download');
+
+                liElem.appendChild(spanElem);
+                liElem.appendChild(aElem);
+                tableDomElem.append(liElem);
             });
         });
 
@@ -49,12 +83,12 @@ define([
         var packageCount = $('#tic-image-package-count').empty();
         var packageList = $('#tic-image-package-list').empty();
 
-        var list = require('js/page/package').getCheckedPackages();
-        var count = _.size(list);
-        var imageSize = _.sumBy(list, function getImageSize(item) {
+        checkedPackagesList = require('js/page/package').getCheckedPackages();
+        var count = _.size(checkedPackagesList);
+        var imageSize = _.sumBy(checkedPackagesList, function getImageSize(item) {
             return _.toNumber(item.size);
         });
-        var imageInstalledSize = _.sumBy(list, function getImageInstalled(item) {
+        var imageInstalledSize = _.sumBy(checkedPackagesList, function getImageInstalled(item) {
             return _.toNumber(item.installed);
         });
 
@@ -67,16 +101,137 @@ define([
         if (_.isNumber(count)) {
             packageCount.html(count);
         }
-        if (!_.isEmpty(list)) {
-            packageList.html(_.orderBy(_.map(list, 'text')).join('<br>'));
+        if (!_.isEmpty(checkedPackagesList)) {
+            packageList.html(_.orderBy(_.map(checkedPackagesList, 'text')).join('<br>'));
         }
 
         $('#tic-image-create').prop('disabled', count === 0);
     }
 
+    function confirmCreateImage() {
+        var isOk;
+
+        $('#tic-image-create').prop('disabled', true);
+
+        // when packages are checked nothing
+        if (_.isEmpty(checkedPackagesList)) {
+            $('#tic-image-create').prop('disabled', true);
+            return;
+        }
+
+        function createImage(pathKsFile) {
+            /**
+             * TODO - checks the msgData
+             */
+            var msgData, tableDomElem;
+            msgData = {
+                pathKsFile: pathKsFile,
+                pathOutput: PATH_TIC_IMAGES
+            };
+
+            tableDomElem = $('#tic-image-new-log');
+
+            client.emit('ws/fs/image/add/from', msgData);
+
+            client.on('ws/fs/image/add/to', function (data) {
+                console.log(data);
+                var elem = document.createElement('p');
+                elem.innerText = data;
+                tableDomElem.append(elem);
+            });
+
+            // when finished
+            client.on('ws/fs/image/add/finished', function (data) {
+                $('#tic-image-create').prop('disabled', false);
+                $('#tic-image-new').empty();
+                updateList();
+            });
+        }
+
+        function getExportsUrl() {
+            return _.template(URL_EXPORTS)({
+                protocol: location.protocol,
+                hostname: location.hostname,
+                port: parseInt(location.port) + 1
+            });
+        }
+
+        function getKickstartRecipeFile() {
+            return new Promise(function (resolve, reject) {
+                var msgData = {
+                    recipe: {
+                        name: 'default'
+                    },
+                    packages: _.map(checkedPackagesList, 'name'),
+                    output: PATH_TIC_KS
+                };
+
+                console.log('url = ' + getExportsUrl());
+                console.log(msgData);
+
+                $.ajax({
+                    type: 'POST',
+                    contentType: 'text/plain',
+                    data: JSON.stringify(msgData),
+                    dataType: 'json',
+                    url: getExportsUrl(),
+                    success: function (res) {
+                        console.log(res);
+                        resolve(res.data);
+                    },
+                    error: function (err) {
+                        reject(err.responseText);
+                    }
+                });
+            });
+        }
+
+        /**
+         * FIXME
+         * using modal
+         *
+         * $('#confirmModalCreateImage').modal('show');
+         */
+        // confirm
+        isOk = window.confirm('Are you sure?');
+        if (isOk) {
+            getKickstartRecipeFile()
+                .then(createImage)
+                .catch(function (err) {
+                    console.log(err);
+                    Util.showLoadingDialog(false);
+                    Util.showAlertDialog('Failed to create a image.<br>Please check the ks file.');
+                });
+        } else {
+            $('#tic-image-create').prop('disabled', false);
+        }
+    }
+
+    /**
+     * Initiation for the all widgets
+     */
+    function _initWidgets() {
+        // button
+        $('#tic-image-create').prop('disabled', true);
+        $('#tic-image-create').click(confirmCreateImage);
+
+        /**
+         * FIXME
+         * chanage 'confirm' to 'modal'
+         *
+         * modal
+         *   $('#confirmModalCreateImage').modal({
+         *       keyboard: false,
+         *       backdrop: true
+         *   });
+         */
+
+    }
+
     function init() {
         console.log('image: init');
-        $('#tic-image-create').prop('disabled', true);
+
+        _initWidgets();
     }
 
     init();
@@ -87,6 +242,11 @@ define([
          * @method updateSummary
          */
         updateSummary: updateSummary,
+
+        /**
+         * Update list in image page
+         * @method updateList
+         */
         updateList: updateList
     }