functions to render file status, only simple coloring for now

9 files changed, 153 insertions, 73 deletions

diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less
index 206c09ea8..e2cc739c6 100644
--- a/module/web/static/css/default/dashboard.less
+++ b/module/web/static/css/default/dashboard.less
@@ -164,11 +164,13 @@
   margin: 0;

 }

 

+@file-height: 22px;

+

 .file-view {

   position: relative;

   padding: 0 4px;

   border-top: 1px solid #dddddd;

-  line-height: 22px;

+  line-height: @file-height;

 

   &:first-child {

     border-top: none;

@@ -186,11 +188,11 @@
     border-color: @greenDark;

   }

 

-  img {

+  img { // plugin logo

     margin-top: -2px;

     padding: 0 2px;

-    height: 22px;

-    width: 22px;

+    height: @file-height;

+    width: @file-height;

   }

 

   .iconf-chevron-down:hover {

@@ -202,14 +204,22 @@
 

 .file-row {

   min-height: 0 !important;

-  margin-top: 4px;

-  margin-bottom: 4px;

+//  padding-left: 5px;

+  padding-top: 4px;

+  padding-bottom: 4px;

 

+  // TODO: better styling for filestatus

   &.second {

+//    border-radius: 4px;

+//    background: @light;

     font-size: small;

+    font-weight: bold;

+//    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.75);

+//    .default-shadow;

   }

 

   &.third {

+    margin-left: 0;

     position: relative;

     font-size: small;

   }

@@ -217,22 +227,39 @@
   .dropdown-menu {

     font-size: medium;

   }

-

 }

 

-

 /*

  TODO: more colorful states

  better fileView design

 */

 

-//.file-row.finished {

+.file-row.finished {

 //  .gradient(top, @green, @greenLight);

-//}

-//

-//.file-row.failed {

+//  color: @light;

+  color: @green;

+}

+

+.file-row.failed {

 //  .gradient(top, @red, @redLight);

-//}

+//  color: @light;

+  color: @red;

+}

+

+.file-row.downloading  {

+

+  .progress {

+    height: @file-height;

+    background: @light;

+    margin: 0;

+  }

+

+  .bar {

+    .gradient(top, @green, @greenLight);

+    color: @light;

+  }

+

+}

 

 /*

 FANCY CHECKBOXES

diff --git a/module/web/static/js/app.js b/module/web/static/js/app.js
index e3fad4ea1..b081022af 100644
--- a/module/web/static/js/app.js
+++ b/module/web/static/js/app.js
@@ -33,7 +33,6 @@ define([
             options.url = 'api/restartFailed';
             $.ajax(options);
         }
-
     });
 
 
diff --git a/module/web/static/js/helpers/fileHelper.js b/module/web/static/js/helpers/fileHelper.js
new file mode 100644
index 000000000..d7cf03f53
--- /dev/null
+++ b/module/web/static/js/helpers/fileHelper.js
@@ -0,0 +1,51 @@
+// Helpers to render the file view
+define('helpers/fileHelper', ['handlebars', 'utils/apitypes'],
+    function(Handlebars, Api) {
+
+        function fileClass(file, options) {
+            if (file.finished)
+                return 'finished';
+            else if (file.failed)
+                return "failed";
+            else if (file.offline)
+                return "offline";
+            else if (file.online)
+                return "online";
+            else if (file.waiting)
+                return "waiting";
+            else if (file.downloading)
+                return "downloading";
+
+            return "";
+        }
+
+        // TODO
+        function fileIcon(media, options) {
+            return 'iconf-music';
+        }
+
+        // TODO rest of the states
+        function fileStatus(file, options) {
+            var s;
+            var msg = file.download.statusmsg;
+
+            if (file.failed) {
+                s = "<i class='iconf-remove'></i>&nbsp;";
+                if (file.download.error)
+                    s += file.download.error;
+                else s += msg;
+            } else if (file.finished)
+                s = "<i class='iconf-ok'></i>&nbsp;" + msg;
+            else if(file.downloading)
+                s= "<div class='progress'><div class='bar' style='width: 50%'></div></div>";
+            else
+                s = msg;
+
+            return new Handlebars.SafeString(s);
+        }
+
+        Handlebars.registerHelper('fileClass', fileClass);
+        Handlebars.registerHelper('fileIcon', fileIcon);
+        Handlebars.registerHelper('fileStatus', fileStatus);
+        return fileClass;
+    });
\ No newline at end of file
diff --git a/module/web/static/js/helpers/formatSize.js b/module/web/static/js/helpers/formatSize.js
index 1b1d96a73..a792392b7 100644
--- a/module/web/static/js/helpers/formatSize.js
+++ b/module/web/static/js/helpers/formatSize.js
@@ -1,8 +1,8 @@
 // Format bytes in human readable format
 define('helpers/formatSize', ['handlebars'], function(Handlebars) {
+    var sizes = ["B", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB"];
     function formatSize(bytes, options) {
-        var sizes = ["B", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB"];
-        if (bytes == 0) return '0 B';
+        if (bytes === 0) return '0 B';
         var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
         // round to two digits
         return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i];
diff --git a/module/web/static/js/models/File.js b/module/web/static/js/models/File.js
index e965df9df..42275a452 100644
--- a/module/web/static/js/models/File.js
+++ b/module/web/static/js/models/File.js
@@ -1,4 +1,8 @@
-define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
+define(['jquery', 'backbone', 'underscore', 'utils/apitypes'], function($, Backbone, _, Api) {
+
+    var Finished = [Api.DownloadStatus.Finished, Api.DownloadStatus.Skipped];
+    var Failed = [Api.DownloadStatus.Failed, Api.DownloadStatus.Aborted, Api.DownloadStatus.TempOffline, Api.DownloadStatus.Offline];
+    // Unfinished - Other
 
     return Backbone.Model.extend({
 
@@ -45,6 +49,18 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
 
         isDownload : function() {
             return this.has('download');
+        },
+
+        isFinished: function() {
+            return _.indexOf(Finished, this.get('download').status) > -1;
+        },
+
+        isUnfinished: function() {
+            return _.indexOf(Finished, this.get('download').status) === -1 && _.indexOf(Failed, this.get('download').status) === -1;
+        },
+
+        isFailed: function() {
+            return _.indexOf(Failed, this.get('download').status) > -1;
         }
 
     });
diff --git a/module/web/static/js/utils/initHB.js b/module/web/static/js/utils/initHB.js
index 784032ca0..f3a0955b3 100644
--- a/module/web/static/js/utils/initHB.js
+++ b/module/web/static/js/utils/initHB.js
@@ -1,9 +1,10 @@
 // Loads all helper and set own handlebars rules
-define(['underscore', 'handlebars', 'helpers/formatSize'],
+define(['underscore', 'handlebars',
+    'helpers/formatSize', 'helpers/fileHelper'],
     function(_, Handlebars) {
         // Replace with own lexer rules compiled from handlebars.l
         Handlebars.Parser.lexer.rules = [/^(?:[^\x00]*?(?=(<%)))/, /^(?:[^\x00]+)/, /^(?:[^\x00]{2,}?(?=(\{\{|$)))/, /^(?:\{\{>)/, /^(?:<%=)/, /^(?:<%\/)/, /^(?:\{\{\^)/, /^(?:<%\s*else\b)/, /^(?:\{<%%)/, /^(?:\{\{&)/, /^(?:<%![\s\S]*?%>)/, /^(?:<%)/, /^(?:=)/, /^(?:\.(?=[%} ]))/, /^(?:\.\.)/, /^(?:[\/.])/, /^(?:\s+)/, /^(?:%%>)/, /^(?:%>)/, /^(?:"(\\["]|[^"])*")/, /^(?:'(\\[']|[^'])*')/, /^(?:@[a-zA-Z]+)/, /^(?:true(?=[%}\s]))/, /^(?:false(?=[%}\s]))/, /^(?:[0-9]+(?=[%}\s]))/, /^(?:[a-zA-Z0-9_$-]+(?=[=%}\s\/.]))/, /^(?:\[[^\]]*\])/, /^(?:.)/, /^(?:$)/];
         _.compile = Handlebars.compile;
 
-        return Handlebars
+        return Handlebars;
     });
\ No newline at end of file
diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js
index a8cac9503..59a26d7c9 100644
--- a/module/web/static/js/views/fileView.js
+++ b/module/web/static/js/views/fileView.js
@@ -1,5 +1,5 @@
-define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'],
-    function($, Backbone, _, App, ItemView) {
+define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abstract/itemView'],
+    function($, Backbone, _, App, Api, ItemView) {
 
         // Renders single file item
         return ItemView.extend({
@@ -26,18 +26,17 @@ define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'],
                 var data = this.model.toJSON();
                 if (data.download) {
                     var status = data.download.status;
-                    // TODO: remove hardcoded states
-                    if (status === 1 || status === 11)
+                    if (status === Api.DownloadStatus.Offline || status === Api.DownloadStatus.TempOffline)
                         data.offline = true;
-                    else if (status === 7)
-                        data.failed = true;
-                    else if (status === 2)
+                    else if (status === Api.DownloadStatus.Online)
                         data.online = true;
-                    else if (status === 9)
+                    else if (status === Api.DownloadStatus.Waiting)
                         data.waiting = true;
-                    else if (status === 10)
+                    else if (status === Api.DownloadStatus.Downloading)
                         data.downloading = true;
-                    else if (status === 5 || status === 6)
+                    else if (this.model.isFailed())
+                        data.failed = true;
+                    else if (this.model.isFinished())
                         data.finished = true;
                 }
 
diff --git a/module/web/static/js/views/filterView.js b/module/web/static/js/views/filterView.js
index 2c2aecf0b..a085fdad5 100644
--- a/module/web/static/js/views/filterView.js
+++ b/module/web/static/js/views/filterView.js
@@ -1,10 +1,6 @@
 define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes'],
     function($, Backbone, _, App, Api) {
 
-        var Finished = [Api.DownloadStatus.Finished, Api.DownloadStatus.Skipped];
-        var Failed = [Api.DownloadStatus.Failed, Api.DownloadStatus.Aborted, Api.DownloadStatus.TempOffline, Api.DownloadStatus.Offline];
-        // Unfinished - Other
-
         // Renders the actionbar for the dashboard, handles everything related to filtering displayed files
         return Backbone.View.extend({
             el: 'ul.actionbar',
@@ -77,12 +73,12 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes'],
             // determine if a file should be visible
             // TODO: non download files
             is_visible: function(file) {
-                if (this.state == Api.DownloadState.Finished)
-                    return _.indexOf(Finished, file.get('download').status) > -1;
-                else if (this.state == Api.DownloadState.Unfinished)
-                    return _.indexOf(Finished, file.get('download').status) == -1 && _.indexOf(Failed, file.get('download').status) == -1;
-                else if (this.state == Api.DownloadState.Failed)
-                    return _.indexOf(Failed, file.get('download').status) > -1;
+                if (this.state === Api.DownloadState.Finished)
+                    return file.isFinished();
+                else if (this.state === Api.DownloadState.Unfinished)
+                    return file.isUnfinished();
+                else if (this.state === Api.DownloadState.Failed)
+                    return file.isFailed();
 
                 return true;
             },
diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html
index 8cb5f8f68..2bfd3d796 100644
--- a/module/web/templates/default/dashboard.html
+++ b/module/web/templates/default/dashboard.html
@@ -71,41 +71,32 @@
             <% name %>

             </span>

         </div>

-        <%= if finished %>

-        <div class="file-row second finished span3">

-            <% else %> <%= if failed %>

-            <div class="file-row second failed span3">

-                <% download.error %>

-                <% else %>

-                <div class="file-row second span3">

-                    <%/if%><%/if%>

-                    <% download.statusmsg %>

-                </div>

-

-                <div class="file-row third span3 pull-right">

-                    {#  TODO: file type as icon  #}

-                    <i class="iconf-music"></i>&nbsp;

-                    <% formatSize size %>

+        <div class="file-row second span3 <% fileClass this %>">

+            <% fileStatus this %>

+        </div>

 

-                    <span class="pull-right">

-                    <img src="icons/<% download.plugin %>"/>

-                    <% download.plugin %>&nbsp;

-                    <i class="iconf-chevron-down" data-toggle="dropdown"></i>

-                    <ul class="dropdown-menu" role="menu">

-                        <li><a href="#"><i class="iconf-trash"></i> Delete</a></li>

-                        <li><a href="#"><i class="iconf-refresh"></i> Restart</a></li>

-                        <li><a href="#"><i class="iconf-download"></i> Download</a></li>

-                        <li><a href="#"><i class="iconf-share"></i> Share</a></li>

-                        <li class="divider"></li>

-                        <li class="dropdown-submenu pull-left">

-                            <a>Addons</a>

-                            <ul class="dropdown-menu">

-                                <li><a>Test</a></li>

-                            </ul>

-                        </li>

-                    </ul>

-                    </span>

-                </div>

+        <div class="file-row third span3 pull-right">

+            <i class="<% fileIcon media %>"></i>&nbsp;

+            <% formatSize size %>

+            <span class="pull-right">

+                <img src="icons/<% download.plugin %>"/>

+                <% download.plugin %>&nbsp;

+                <i class="iconf-chevron-down" data-toggle="dropdown"></i>

+                <ul class="dropdown-menu" role="menu">

+                    <li><a href="#"><i class="iconf-trash"></i> Delete</a></li>

+                    <li><a href="#"><i class="iconf-refresh"></i> Restart</a></li>

+                    <li><a href="#"><i class="iconf-download"></i> Download</a></li>

+                    <li><a href="#"><i class="iconf-share"></i> Share</a></li>

+                    <li class="divider"></li>

+                    <li class="dropdown-submenu pull-left">

+                        <a>Addons</a>

+                        <ul class="dropdown-menu">

+                            <li><a>Test</a></li>

+                        </ul>

+                    </li>

+                </ul>

+            </span>

+        </div>

     </script>

 

     <script type="text/template" id="template-select">