[TIC-UI] add confirm dialog

- Add confirm dialog
- Add mime package

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

diff --git a/README.md b/README.md
index c6ba682..501e7e5 100644 (file)
--- a/README.md
+++ b/README.md
@@ -1,20 +1,42 @@
 # Tizen Image Configurator
 
-# Install
-Install command
+## Install
 
-- npm install
-- ./node_modules/bower/bin/bower install
-- ./node_modules/gulp/bin/gulp.js
+>
+    npm install
+    ./node_modules/bower/bin/bower install
+    ./node_modules/gulp/bin/gulp.js
 
-# Run
-Run command
+## Run
 
-- ./node_modules/pm2/bin/pm2 start app.js
+>
+    ./node_modules/pm2/bin/pm2 start app.js
 
-# PM2 Options
+### PM2 Options
 - ./node_modules/pm2/bin/pm2 start app.js -i 0
 - ./node_modules/pm2/bin/pm2 stop all
 - ./node_modules/pm2/bin/pm2 delete all
 - ./node_modules/pm2/bin/pm2 start app.js --watch
-- https://github.com/Unitech/pm2#commands-overview
\ No newline at end of file
+- https://github.com/Unitech/pm2#commands-overview
+
+
+## Proxy Settings
+### NPM proxy
+
+>
+    npm config set proxy http://yourProxy:yourPort
+    npm config set https-proxy https://yourProxy:yourPort
+    npm config set strict-ssl false
+    npm config set registry http://registry.npmjs.org/
+
+### Bower proxy
+
+- Edit for .bowerrc file
+
+>
+    {
+        "directory": "bower_components",
+        "proxy": "http://yourProxy:yourPort",
+        "https-proxy":"https://yourProxy:yourPort",
+        "strict-ssl": false
+    }

diff --git a/package.json b/package.json
index e0f1702..139d831 100644 (file)
--- a/package.json
+++ b/package.json
@@ -31,7 +31,8 @@
     "jquery": "~3.1.1",
     "express": "~4.14.0",
     "body-parser": "~1.15.2",
-    "socket.io": "~1.6.0"
+    "socket.io": "~1.6.0",
+    "mime": "~1.3.4"
   },
   "devDependencies": {
     "bower": "~1.8.0",

diff --git a/public/src/index.html b/public/src/index.html
index 2583932..9b79698 100644 (file)
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -182,14 +182,13 @@
                             <div class="panel-heading">Image List</div>
                             <div class="panel-body">
                                 <div class="infoboxheader">
-                                    <h4>create a image</h4>
+                                    <h4>Create a image</h4>
                                 </div>
                                 <div class="infobox info" id="tic-image-new">
-                                    <div id="tic-image-new-log">
-                                    </div>
+                                    <div id="tic-image-new-log"></div>
                                 </div>
                                 <div class="infoboxheader">
-                                    <h4>image list</h4>
+                                    <h4>Image File list</h4>
                                 </div>
                                 <ul class="list-group" id="tic-image-list"></ul>
                             </div>
@@ -197,24 +196,6 @@
                     </div><!-- /End Image List Column -->
                 </div>
             </div><!-- /.container -->
-            <!-- modal -->
-            <div class="modal fade" id="confirmModalCreateImage" role="dialog">
-                <div class="modal-dialog modal-sm">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal">&times;</button>
-                        <h4 class="modal-title">Create a new Image</h4>
-                    </div>
-                    <div class="modal-body">
-                        <p>Are you sure ?</p>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                        <button type="button" class="btn btn-primary">Ok</button>
-                    </div>
-                </div>
-                </div>
-            </div>
         </section>
 
 
@@ -266,7 +247,7 @@
         </div><!-- /End Loading Dialog -->
 
         <!-- Alert Dialog -->
-         <div class="modal fade" id="tic-alert-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
+        <div class="modal fade" id="tic-alert-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
             <div class="modal-dialog modal-sm">
                 <div class="modal-content">
                     <div class="modal-body">
@@ -277,7 +258,22 @@
                 </div>
                 </div>
             </div>
-        </div>><!-- /End Alert Dialog -->
+        </div><!-- /End Alert Dialog -->
+
+        <!-- Confirm Dialog -->
+        <div class="modal fade" id="tic-confirm-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
+            <div class="modal-dialog modal-sm">
+                <div class="modal-content">
+                    <div class="modal-body">
+                        <p id="tic-confirm-content"></p>
+                    </div>
+                    <div class="modal-footer">
+                        <button id="tic-confirm-ok" type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
+                        <button id="tic-confirm-cancel" type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
+                   </div>
+                </div>
+            </div>
+        </div><!-- /End Confirm Dialog -->
 
 
         <!-- library loading -->

diff --git a/public/src/js/page/image.js b/public/src/js/page/image.js
index 77c3136..6b858b7 100644 (file)
--- a/public/src/js/page/image.js
+++ b/public/src/js/page/image.js
@@ -59,7 +59,7 @@ define([
                 liElem.setAttribute('class', 'list-group-item image-item');
 
                 spanElem = document.createElement('span');
-                spanElem.innerText = '(' + file.size + 'B / ' + file.mtime + ')';
+                spanElem.innerText = '(' + Util.bytesToSize(file.size) + ' / ' + file.mtime + ')';
                 spanElem.setAttribute('class', 'image-list-time');
 
                 aElem = document.createElement('a');
@@ -109,8 +109,6 @@ define([
     }
 
     function confirmCreateImage() {
-        var isOk;
-
         $('#tic-image-create').prop('disabled', true);
 
         // when packages are checked nothing
@@ -138,12 +136,13 @@ define([
                 var elem = document.createElement('p');
                 elem.innerText = data;
                 tableDomElem.append(elem);
+                $('#tic-image-new').animate({ scrollTop : $('#tic-image-new').height() }, 'slow');
             });
 
             // when finished
             client.on('ws/fs/image/add/finished', function (data) {
                 $('#tic-image-create').prop('disabled', false);
-                $('#tic-image-new').empty();
+                $('#tic-image-new-log').empty();
                 updateList();
             });
         }
@@ -193,18 +192,19 @@ define([
          * $('#confirmModalCreateImage').modal('show');
          */
         // confirm
-        isOk = window.confirm('Are you sure?');
-        if (isOk) {
+        Util.showConfirmDialog('Are you sure?')
+        .then(function () {
             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 {
+            .then(createImage)
+            .catch(function (err) {
+                console.error(err);
+                Util.showAlertDialog('Failed to create a image.<br>Please check the ks file.');
+                $('#tic-image-create').prop('disabled', false);
+            });
+        })
+        .catch(function () {
             $('#tic-image-create').prop('disabled', false);
-        }
+        });
     }
 
     /**

diff --git a/public/src/js/util.js b/public/src/js/util.js
index d87093b..7617fb2 100644 (file)
--- a/public/src/js/util.js
+++ b/public/src/js/util.js
@@ -27,6 +27,19 @@ define([
         $('#tic-alert-dialog').modal('show');
     }
 
+    function showConfirmDialog(content) {
+        return new Promise(function (resolve, reject) {
+            $('#tic-confirm-content').html(content);
+            $('#tic-confirm-ok').on('click', function () {
+                resolve();
+            })
+            $('#tic-confirm-cancel').on('click', function () {
+                reject();
+            })
+            $('#tic-confirm-dialog').modal('show');
+        });
+    }
+
     function bytesToSize(bytes) {
         var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
         if (bytes == 0) {
@@ -62,6 +75,14 @@ define([
          */
         showAlertDialog: showAlertDialog,
 
+        /**
+         * Display the confirm dialog.
+         * @method showLoadingDialog
+         * @param {string} content in dialog
+         * @return Promise
+         */
+        showConfirmDialog: showConfirmDialog,
+
         /*
          * Convert size in bytes to KB, MB, GB, TB
          * {@link http://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript}