[TIC-Web] fix the socket handler

- fix the duplicated socket handler
- refactoring to ajax post

Change-Id: Id79b030621018bde248ea05b706b14acc1c43138
Signed-off-by: ChangHyun Lee <leechwin.lee@samsung.com>

diff --git a/public/src/css/style.css b/public/src/css/style.css
index a4ce0e5..fb54040 100644 (file)
--- a/public/src/css/style.css
+++ b/public/src/css/style.css
@@ -147,15 +147,12 @@ body {
     overflow: hidden;
 }
 
-.infobox {
-    padding: 20px;
-    margin: 20px 0;
+#tic-image-new-log {
     border: 1px solid #eee;
     border-radius: 3px;
-    margin-top: 3px;
-    height: 25vh;
+    height: 32vh;
     overflow: auto;
-    font-size: 14px;
+    font-size: 12px;
 }
 
 

diff --git a/public/src/index.html b/public/src/index.html
index 66c5698..da62b0c 100644 (file)
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -173,11 +173,7 @@
                         <div class="panel panel-primary">
                             <div class="panel-heading">Create Image</div>
                             <div class="panel-body">
-                                <div id="tic-image-new-container">
-                                    <div class="infobox info" id="tic-image-new">
-                                        <div id="tic-image-new-log"></div>
-                                    </div>
-                                </div>
+                                <div id="tic-image-new-log"></div>
                             </div>
                             <div class="panel-footer">
                                 <button type="button" id="tic-image-create" class="btn btn-primary">Create Image</button>

diff --git a/public/src/js/main.js b/public/src/js/main.js
index 8f4d7e2..f8d1609 100644 (file)
--- a/public/src/js/main.js
+++ b/public/src/js/main.js
@@ -29,8 +29,8 @@ define([
     $(document).ready(function () {
         init();
 
-        // Image - the list of images
-        Image.updateList(socket);
+        Image.initSocket(socket);
+        Image.updateList(); // Image - the list of images
 
         Util.showLoadingDialog(true);
 

diff --git a/public/src/js/page/image.js b/public/src/js/page/image.js
index 4875f9d..033a5cb 100644 (file)
--- a/public/src/js/page/image.js
+++ b/public/src/js/page/image.js
@@ -1,8 +1,10 @@
 define([
     'jquery',
+    'lodash',
     'js/util'
 ], function (
     $,
+    _,
     Util
 ) {
     'use strict';
@@ -22,61 +24,59 @@ define([
     // the path for images
     var PATH_TIC_IMAGES = '/tmp/tic/images/';
 
-    function updateList(socket) {
-        if (!_.isEmpty(socket)) {
-            client = socket;
-        }
-
-        var msgData = {
-            path: PATH_TIC_IMAGES
-        };
+    // template
+    var IMAGE_LOG = '<p><%= log %></p>';
+    var IMAGE_ITEM = '<li class="list-group-item image-item">' +
+                        '<p class="image-list-name" title="<%= fileName %>"><%= fileName %></p>' +
+                        '<p class="image-list-detail">Size: <%= fileSize %></p>' +
+                        '<p class="image-list-detail">Updated: <%= fileTime %></p>' +
+                        '<a class="image-list-btndownload" href="<%= hrefPath %>" date-name="<%= fileName %>" download="download">Download</a>' +
+                     '</li>';
 
-        client.emit('ws/fs/image/list/from', msgData);
+    function initSocket(socket) {
+        client = socket;
 
         client.on('ws/fs/image/list/to', function (data) {
-            var list, tableDomElem;
-
-            list = data.list;
-            tableDomElem = $('#tic-image-list');
-            tableDomElem.empty();
-
-            list.forEach(function (file) {
-                var liElem, aElem, spanElem, fileName, hrefPath;
-
-                fileName = file.name;
-                hrefPath = '/api/fs/download/' + fileName;
-
-                liElem = document.createElement('li');
-                liElem.setAttribute('class', 'list-group-item image-item');
-
-                spanElem = document.createElement('p');
-                spanElem.innerText = fileName;
-                spanElem.setAttribute('title', fileName);
-                spanElem.setAttribute('class', 'image-list-name');
-                liElem.appendChild(spanElem);
-
-                spanElem = document.createElement('p');
-                spanElem.innerText = 'Size: ' + Util.bytesToSize(file.size);
-                spanElem.setAttribute('class', 'image-list-detail');
-                liElem.appendChild(spanElem);
-
-                spanElem = document.createElement('p');
-                spanElem.innerText = 'Updated: ' + new Date(file.birthtime).toLocaleString();
-                spanElem.setAttribute('class', 'image-list-detail');
-                liElem.appendChild(spanElem);
-
-                aElem = document.createElement('a');
-                aElem.innerText = 'Download';
-                aElem.setAttribute('class', 'image-list-btndownload');
-                aElem.setAttribute('href', hrefPath);
-                aElem.setAttribute('data-name', fileName);
-                aElem.setAttribute('download', 'download');
-
-                liElem.appendChild(aElem);
-                tableDomElem.append(liElem);
+            var $imageList = $('#tic-image-list').empty();
+            _.forEach(data.list, function (file) {
+                 var imageItem = _.template(IMAGE_ITEM)({
+                    fileName: file.name,
+                    fileSize: Util.bytesToSize(file.size),
+                    fileTime: new Date(file.birthtime).toLocaleString(),
+                    hrefPath: '/api/fs/download/' + file.name
+                });
+                $imageList.append(imageItem);
+            });
+        });
+
+        client.on('ws/fs/image/add/to', function (data) {
+            var logItem = _.template(IMAGE_LOG)({
+                log: data
             });
+            var $imageNewLog = $('#tic-image-new-log').append(logItem);
+            $imageNewLog.animate({ scrollTop : $imageNewLog.height() }, 'slow');
         });
 
+        /**
+         * TODO
+         *
+         * manage the logs for file.
+         */
+        // when finished
+        client.on('ws/fs/image/add/finished', function (data) {
+            // button enabled
+            $('#tic-image-create').prop('disabled', false);
+
+            // upate the list of images
+            updateList();
+        });
+    }
+
+    function updateList() {
+        var msgData = {
+            path: PATH_TIC_IMAGES
+        };
+        client.emit('ws/fs/image/list/from', msgData);
     }
 
     function updateSummary() {
@@ -120,41 +120,16 @@ define([
         }
 
         function createImage(pathKsFile) {
+            $('#tic-image-new-log').empty();
+
             /**
              * TODO - checks the msgData
              */
-            var msgData, tableDomElem;
-            msgData = {
+            var msgData = {
                 pathKsFile: pathKsFile,
                 pathOutput: PATH_TIC_IMAGES
             };
-
-            tableDomElem = $('#tic-image-new-log');
-            tableDomElem.empty();
-
             client.emit('ws/fs/image/add/from', msgData);
-
-            client.on('ws/fs/image/add/to', function (data) {
-                var elem = document.createElement('p');
-                elem.innerText = data;
-                tableDomElem.append(elem);
-
-                $('#tic-image-new').animate({ scrollTop : $('#tic-image-new').height() }, 'slow');
-            });
-
-            /**
-             * TODO
-             *
-             * manage the logs for file.
-             */
-            // when finished
-            client.on('ws/fs/image/add/finished', function (data) {
-                // button enabled
-                $('#tic-image-create').prop('disabled', false);
-
-                // upate the list of images
-                updateList(null);
-            });
         }
 
         function getExportsUrl() {
@@ -164,29 +139,16 @@ define([
         }
 
         function getKickstartRecipeFile() {
-            return new Promise(function (resolve, reject) {
-                var msgData = {
-                    recipe: {
-                        name: 'default'
-                    },
-                    packages: _.map(checkedPackagesList, 'name'),
-                    output: PATH_TIC_KS
-                };
-
-                $.ajax({
-                    type: 'POST',
-                    contentType: 'application/json; charset=UTF-8',
-                    dataType: 'json',
-                    data: JSON.stringify(msgData),
-                    processData: false,
-                    url: getExportsUrl(),
-                    success: function (res) {
-                        resolve(res.data);
-                    },
-                    error: function (err) {
-                        reject(err.responseText);
-                    }
-                });
+             var msgData = {
+                recipe: {
+                    name: 'default'
+                },
+                packages: _.map(checkedPackagesList, 'name'),
+                output: PATH_TIC_KS
+            };
+            return Util.POST(getExportsUrl(), msgData)
+            .then(function (result) {
+                return result.data
             });
         }
 
@@ -225,6 +187,11 @@ define([
 
     return {
         /**
+         * Initialize listener of socket
+         * @method initSocket
+         */
+        initSocket: initSocket,
+        /**
          * Update summary in image page
          * @method updateSummary
          */
@@ -237,4 +204,4 @@ define([
         updateList: updateList
     }
 
-});
\ No newline at end of file
+});

diff --git a/public/src/js/page/settings.js b/public/src/js/page/settings.js
index 07d9f83..cafff55 100644 (file)
--- a/public/src/js/page/settings.js
+++ b/public/src/js/page/settings.js
@@ -49,28 +49,16 @@ define([
     }
 
     function updatePackage() {
-        return new Promise(function (resolve, reject) {
-            // TODO: define repo spec
-            var postBody = {
-                repos : _.map(_.orderBy(repoStore, ['priority']), 'url'),
-                recipes : ['default']
-            };
-            $.ajax({
-                type: 'POST',
-                contentType: 'application/json; charset=UTF-8',
-                dataType: 'json',
-                data: JSON.stringify(postBody),
-                processData: false,
-                url: _getAnalysisUrl(),
-                success: function(rawData) {
-                    repoStore = rawData.data.repos;
-                    _updateRepo();
-                    resolve(rawData.data);
-                },
-                error: function(err) {
-                    reject(err);
-                },
-            });
+        var postBody = {
+            repos : _.map(_.orderBy(repoStore, ['priority']), 'url'),
+            recipes : ['default']
+        };
+
+        return Util.POST(_getAnalysisUrl(), postBody)
+        .then(function (result) {
+            repoStore = result.data.repos;
+            _updateRepo();
+            return result.data;
         });
     }
 

diff --git a/public/src/js/util.js b/public/src/js/util.js
index 7617fb2..0e4d2a9 100644 (file)
--- a/public/src/js/util.js
+++ b/public/src/js/util.js
@@ -54,6 +54,25 @@ define([
         return urlRegex.test(url);
     }
 
+    function POST(url, postData) {
+        return new Promise(function (resolve, reject) {
+            $.ajax({
+                type: 'POST',
+                contentType: 'application/json; charset=UTF-8',
+                dataType: 'json',
+                data: JSON.stringify(postData),
+                processData: false,
+                url: url,
+                success: function (result) {
+                    resolve(result);
+                },
+                error: function (err) {
+                    reject(err);
+                }
+            });
+        })
+    }
+
     return {
         /**
          * Set smooth scrolling, one page websites
@@ -79,7 +98,7 @@ define([
          * Display the confirm dialog.
          * @method showLoadingDialog
          * @param {string} content in dialog
-         * @return Promise
+         * @return {Promise}
          */
         showConfirmDialog: showConfirmDialog,
 
@@ -91,7 +110,22 @@ define([
          */
         bytesToSize: bytesToSize,
 
-        validateURL: validateURL
+        /**
+         * Makes the element require a valid url.
+         * @method validateURL
+         * @param {string} url - A string containing the URL.
+         * @return {boolean} Return true, if the value is a valid url.
+         */
+        validateURL: validateURL,
+
+        /**
+         * Load data from the server using a HTTP POST request.
+         * @method POST
+         * @param {string} url - A string containing the URL to which the request is sent.
+         * @param {object} data - A plain object or string that is sent to the server with the request.
+         * @return {Promise}
+         */
+        POST: POST
     }
 
 });