[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 <heekyoung.oh@samsung.com>

diff --git a/app.js b/app.js
index 4477913..8a4852b 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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 (file)
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -181,16 +181,16 @@
                         <div class="panel panel-primary">
                             <div class="panel-heading">Image List</div>
                             <div class="panel-body">
-                                <div class="infoboxheader">
-                                    <h4>Create a image</h4>
-                                </div>
-                                <div class="infobox info" id="tic-image-new">
-                                    <div id="tic-image-new-log"></div>
-                                </div>
-                                <div class="infoboxheader">
-                                    <h4>Image File list</h4>
-                                </div>
                                 <ul class="list-group" id="tic-image-list"></ul>
+                                <!-- Create an image -->
+                                <div id="tic-image-new-container">
+                                    <div class="infoboxheader">
+                                        <h4>Create an image</h4>
+                                    </div>
+                                    <div class="infobox info" id="tic-image-new">
+                                        <div id="tic-image-new-log"></div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div><!-- /End Image List Column -->

diff --git a/public/src/js/page/image.js b/public/src/js/page/image.js
index 6b858b7..9d83306 100644 (file)
--- 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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
--- 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 (file)
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 (file)
--- 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