From: Hee Kyoung, Oh Date: Mon, 19 Dec 2016 12:58:36 +0000 (+0900) Subject: [TIC-UI] Update the list of images X-Git-Tag: v20170316~6^2 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=05f930fa623f1df5a3fff6e4142cc4b518006710;p=archive%2F20170607%2Ftools%2Ftic.git [TIC-UI] Update the list of images - Update the style of that - Add the filesystem iniailize Change-Id: Iab5a871b5c8d9f26fabcd2dd3352839198982026 Signed-off-by: Hee Kyoung, Oh --- diff --git a/app.js b/app.js index 4477913..8a4852b 100644 --- a/app.js +++ b/app.js @@ -27,6 +27,8 @@ app.use('/api', Router); server.listen(app.get('port'), process.env.IP || "0.0.0.0", function () { var addr = server.address(); console.log('Server listening at', addr.address + ':' + addr.port); + + FileSystem.init(); }); /* server - socket test diff --git a/package.json b/package.json index 139d831..000a43d 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,8 @@ "express": "~4.14.0", "body-parser": "~1.15.2", "socket.io": "~1.6.0", - "mime": "~1.3.4" + "mime": "~1.3.4", + "mkdirp": "~0.5.1" }, "devDependencies": { "bower": "~1.8.0", diff --git a/public/src/css/style.css b/public/src/css/style.css index 0739b02..89c7885 100644 --- a/public/src/css/style.css +++ b/public/src/css/style.css @@ -134,7 +134,6 @@ html { padding-top: 70px; background: #e1e1e1; } - #tic-image-summary { height: 40vh; display: inline-block; @@ -144,14 +143,41 @@ html { #tic-image-list { margin-top: 3px; } - -.image-list-time { +.image-list-name { + font-weight: bold; + text-overflow: ellipsis; + white-space:nowrap; + display:inline-block; + min-width: 350px; + overflow: hidden; + width: 97%; + color: #31708f; +} +.image-list-detail { padding-left: 10px; + font-size: smaller; + text-overflow: ellipsis; + white-space:nowrap; + display:inline-block; + overflow: hidden; + width: 85%; +} +.image-list-btndownload { + float: right; + min-width: 10px; + padding: 3px 7px; + font-size: 12px; + font-weight: bold; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: middle; + background-color: #337ab7; + border-radius: 10px; } - .image-item { overflow: hidden; - text-overflow: ellipsis; } .infobox { @@ -174,7 +200,8 @@ html { height: 5vh; overflow: hidden; text-overflow: ellipsis; - border-left-color: #1b809e; + border-left-color: #337ab7; + vertical-align: middle; } .infoboxheader h4 { color: #1b809e; diff --git a/public/src/index.html b/public/src/index.html index 9b79698..4659efc 100644 --- a/public/src/index.html +++ b/public/src/index.html @@ -181,16 +181,16 @@
Image List
-
-

Create a image

-
-
-
-
-
-

Image File list

-
    + +
    +
    +

    Create an image

    +
    +
    +
    +
    +
    diff --git a/public/src/js/page/image.js b/public/src/js/page/image.js index 6b858b7..9d83306 100644 --- a/public/src/js/page/image.js +++ b/public/src/js/page/image.js @@ -40,36 +40,37 @@ define([ tableDomElem = $('#tic-image-list'); list.forEach(function (file) { - /** - * @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 = '(' + Util.bytesToSize(file.size) + ' / ' + file.mtime + ')'; - spanElem.setAttribute('class', 'image-list-time'); + 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', 'badge'); + aElem.setAttribute('class', 'image-list-btndownload'); aElem.setAttribute('href', hrefPath); aElem.setAttribute('data-name', fileName); aElem.setAttribute('download', 'download'); - liElem.appendChild(spanElem); liElem.appendChild(aElem); tableDomElem.append(liElem); }); @@ -132,17 +133,29 @@ define([ 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); $('#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); + + // the logs are removed $('#tic-image-new-log').empty(); + + // creation was hidden when finished. + $('#tic-image-new-container').hide(); + + // upate the list of images updateList(); }); } @@ -165,8 +178,8 @@ define([ output: PATH_TIC_KS }; - console.log('url = ' + getExportsUrl()); - console.log(msgData); + // creation is shown when creation started. + $('#tic-image-new-container').show(); $.ajax({ type: 'POST', @@ -175,7 +188,6 @@ define([ dataType: 'json', url: getExportsUrl(), success: function (res) { - console.log(res); resolve(res.data); }, error: function (err) { @@ -185,12 +197,6 @@ define([ }); } - /** - * FIXME - * using modal - * - * $('#confirmModalCreateImage').modal('show'); - */ // confirm Util.showConfirmDialog('Are you sure?') .then(function () { @@ -215,17 +221,8 @@ define([ $('#tic-image-create').prop('disabled', true); $('#tic-image-create').click(confirmCreateImage); - /** - * FIXME - * chanage 'confirm' to 'modal' - * - * modal - * $('#confirmModalCreateImage').modal({ - * keyboard: false, - * backdrop: true - * }); - */ - + // creation was hidden when started. + $('#tic-image-new-container').hide(); } function init() { diff --git a/resource/images/aa.img b/resource/images/aa.img deleted file mode 100644 index 72943a1..0000000 --- a/resource/images/aa.img +++ /dev/null @@ -1 +0,0 @@ -aaa diff --git a/resource/images/bb.img b/resource/images/bb.img deleted file mode 100644 index 3f07055..0000000 --- a/resource/images/bb.img +++ /dev/null @@ -1,10 +0,0 @@ -aaakkkkkkkkkkkk -dkfjakdjf' -dkfjakdjf' -dkfjakdjf' -dkfjakdjf' -dkfjakdjf' -dkfjakdjf' -dkfjakdjf' -dkfjakdjf' - diff --git a/resource/images/cc.img b/resource/images/cc.img deleted file mode 100644 index 17aa032..0000000 --- a/resource/images/cc.img +++ /dev/null @@ -1,47 +0,0 @@ -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa -aaa diff --git a/resource/images/dd.img b/resource/images/dd.img deleted file mode 100644 index 36d4f52..0000000 --- a/resource/images/dd.img +++ /dev/null @@ -1,4 +0,0 @@ -aaa -aaa -aaa -aaa diff --git a/server/fs/filesystem.js b/server/fs/filesystem.js index 68cbf9e..7982574 100644 --- a/server/fs/filesystem.js +++ b/server/fs/filesystem.js @@ -1,23 +1,39 @@ 'use strict'; -/** - * using websocket - */ var fs = require('fs'); +var mime = require('mime'); var path = require('path'); +var mkdirp = require('mkdirp'); var FileSystem = {}; +FileSystem.PATH_KS = '/tmp/tic/ks/'; +FileSystem.PATH_IMAGES = '/tmp/tic/images/'; + +FileSystem.init = function () { + var ticKs, ticImages; + + ticKs = this.PATH_KS; + ticImages = this.PATH_IMAGES; + + function fnMkdir(paramPath) { + mkdirp(paramPath, function (err) { + if (err) { + console.error(err); + } else { + console.log(paramPath + ' exists'); + } + }); + } + + fnMkdir(ticKs); + fnMkdir(ticImages); +}; FileSystem.list = function (dirPath) { - console.log('filesystem.list called'); var results, info, list; results = []; - if(!fs.existsSync(dirPath)) { - fs.mkdirSync(dirPath); - } - list = fs.readdirSync(dirPath); list.forEach(function(file) { var fileStat, filePath; @@ -29,10 +45,6 @@ FileSystem.list = function (dirPath) { if (fileStat && fileStat.isDirectory()) { results = results.concat(FileSystem.list(filePath)) } else { - /** - * TODO - * to be extended .. - */ info = { name: file, size: fileStat['size'], @@ -47,12 +59,22 @@ FileSystem.list = function (dirPath) { return results; }; -FileSystem.remove = function () { - console.log('filesystem.remove called'); +FileSystem.download = function (req, res) { + var fileName, filePath, fileMimetype, fileStream; + + fileName = req.params.filename; + filePath = this.PATH_IMAGES + fileName; + fileMimetype = mime.lookup(filePath); + + res.setHeader('Content-disposition', 'attachment; filename=' + fileName); + res.setHeader('Content-type', fileMimetype); + + fileStream = fs.createReadStream(filePath); + fileStream.pipe(res); }; -FileSystem.download = function () { - console.log('filesystem.download called'); +FileSystem.remove = function () { + console.log('filesystem.remove called'); }; -module.exports = FileSystem; \ No newline at end of file +module.exports = FileSystem; diff --git a/server/fs/ws.filesystem.js b/server/fs/ws.filesystem.js deleted file mode 100644 index f4d79f6..0000000 --- a/server/fs/ws.filesystem.js +++ /dev/null @@ -1,51 +0,0 @@ -'use strict'; - -var fs = require('fs'); -var path = require('path'); - -var FileSystem = {}; - -FileSystem.list = function (dirPath) { - console.log('FileSystem.list called'); - var results, info, list; - - results = []; - - if(!fs.existsSync(dirPath)) { - fs.mkdirSync(dirPath); - } - - list = fs.readdirSync(dirPath); - list.forEach(function(file) { - var fileStat, filePath; - - filePath = dirPath + file; - - fileStat = fs.statSync(filePath); - - if (fileStat && fileStat.isDirectory()) { - results = results.concat(FileSystem.list(filePath)) - } else { - /** - * TODO - * to be extended .. - */ - info = { - name: file, - size: fileStat['size'] - } - results.push(info); - } - }); - return results; -}; - -FileSystem.remove = function () { - console.log('FileSystem.remove called'); -}; - -FileSystem.download = function () { - console.log('FileSystem.download called'); -}; - -module.exports = FileSystem; \ No newline at end of file diff --git a/server/routes/router.js b/server/routes/router.js index a276618..ede8e34 100644 --- a/server/routes/router.js +++ b/server/routes/router.js @@ -1,37 +1,24 @@ var express = require('express'); var router = express.Router(); -var mime = require('mime'); -var fs = require('fs'); -var path = require('path'); + +var FileSystem = require('../fs/filesystem'); router.use(function timeLog(req, res, next) { var time = new Date(); - console.log('Time: ', time.toISOString()); + console.log('time: ', time.toLocaleString()); next(); }); /** * API - * + * * path : /api/fs/download - * request body : { - * filename: 'filename.ks' - * } + * */ router.get('/fs/download/:filename', function (req, res) { - var fileName, filePath, fileOptions, fileMimetype, fileStream; - console.log('>> file download called'); - - fileName = req.params.filename; - filePath = '/tmp/tic/images/' + fileName; - fileMimetype = mime.lookup(filePath); - console.log('>> filename: ' + req.params.filename + ', mime: ' + fileMimetype); - - res.setHeader('Content-disposition', 'attachment; filename=' + fileName); - res.setHeader('Content-type', fileMimetype); - - fileStream = fs.createReadStream(filePath); - fileStream.pipe(res); + console.log('an api called that /api/fs/download/'+req.params.filename); + FileSystem.download(req, res); }); + module.exports = router; \ No newline at end of file