diff options
Diffstat (limited to 'module/web/static')
| -rw-r--r-- | module/web/static/css/default/dashboard.less | 53 | ||||
| -rw-r--r-- | module/web/static/js/app.js | 1 | ||||
| -rw-r--r-- | module/web/static/js/helpers/fileHelper.js | 51 | ||||
| -rw-r--r-- | module/web/static/js/helpers/formatSize.js | 4 | ||||
| -rw-r--r-- | module/web/static/js/models/File.js | 18 | ||||
| -rw-r--r-- | module/web/static/js/utils/initHB.js | 5 | ||||
| -rw-r--r-- | module/web/static/js/views/fileView.js | 19 | ||||
| -rw-r--r-- | module/web/static/js/views/filterView.js | 16 |
8 files changed, 128 insertions, 39 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> "; + if (file.download.error) + s += file.download.error; + else s += msg; + } else if (file.finished) + s = "<i class='iconf-ok'></i> " + 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; }, |