From fefacc864a51feecda7b6a092d9c5493ddc5bde1 Mon Sep 17 00:00:00 2001 From: ChangHyun Lee Date: Tue, 27 Dec 2016 19:18:33 +0900 Subject: [PATCH] [TIC-Web] fix the socket handler - fix the duplicated socket handler - refactoring to ajax post Change-Id: Id79b030621018bde248ea05b706b14acc1c43138 Signed-off-by: ChangHyun Lee --- public/src/css/style.css | 9 +-- public/src/index.html | 6 +- public/src/js/main.js | 4 +- public/src/js/page/image.js | 169 +++++++++++++++++------------------------ public/src/js/page/settings.js | 32 +++----- public/src/js/util.js | 38 ++++++++- 6 files changed, 120 insertions(+), 138 deletions(-) diff --git a/public/src/css/style.css b/public/src/css/style.css index a4ce0e5..fb54040 100644 --- 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 --- a/public/src/index.html +++ b/public/src/index.html @@ -173,11 +173,7 @@
Create Image
-
-
-
-
-
+
diff --git a/public/src/js/main.js b/public/src/js/main.js index 8f4d7e2..f8d1609 100644 --- 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 --- 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 = '

<%= log %>

'; + var IMAGE_ITEM = '
  • ' + + '

    <%= fileName %>

    ' + + '

    Size: <%= fileSize %>

    ' + + '

    Updated: <%= fileTime %>

    ' + + 'Download' + + '
    • '; - 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 --- 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 --- 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 } }); -- 2.7.4