Browse Source

[spark] Subtle progress bar

Enrico Berti 11 years ago
parent
commit
62f6943

+ 12 - 1
apps/spark/src/spark/templates/editor.mako

@@ -188,7 +188,6 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
         <span data-bind="editable: name, editableOptions: {enabled: $root.isEditing(), placement: 'right'}"></span>
         <div class="inline pull-right">
           <strong class="muted" data-bind="text: status"></strong> &nbsp;
-          <strong class="muted" data-bind="text: progress"></strong>% &nbsp;
           <a href="javascript:void(0)" data-bind="visible: $root.isEditing, click: function(){ remove($parent, $data);}"><i class="fa fa-times"></i></a>
         </div>
       </h2>
@@ -204,6 +203,9 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
           <textarea data-bind="value: statement_raw, codemirror: { 'id': id(), 'lineNumbers': true, 'matchBrackets': true, 'mode': editorMode(), 'enter': execute }"></textarea>
           <a href="javascript:void(0)" data-bind="click: execute, visible: status() != 'running'" class="btn codeMirror-overlaybtn">${ _('Go!') }</a>
           <a href="javascript:void(0)" data-bind="click: cancel, visible: status() == 'running'" class="btn codeMirror-overlaybtn">${ _('Cancel') }</a>
+          <div class="progress" data-bind="css:{'progress-neutral': progress() == 0, 'progress-warning': progress() > 0 && progress() < 100, 'progress-success': progress() == 100}" style="height: 1px">
+            <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
+          </div>
         </div>
       </div>
 
@@ -213,6 +215,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
         <a data-bind="visible: status() != 'ready', click: function() { $data.showLogs(! $data.showLogs()); }, css: {'active': $data.showLogs}" href="javascript:void(0)" class="btn" title="${ _('Logs') }"><i class="fa fa-file-text-o"></i></a>
       </div>
 
+
       <div data-bind="visible: showLogs, css: resultsKlass">
         <span data-bind="visible: result.logs().length == 0">${ _('Loading...') }</span>
         <span data-bind="text: result.logs"></span>
@@ -871,6 +874,14 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
         }, 10);
       }
     });
+
+    $(document).on("progress", function(e, options){
+      if (options.data == 100){
+        window.setTimeout(function(){
+          options.snippet.progress(0);
+        }, 2000);
+      }
+    });
   });
 
 </script>

+ 7 - 1
apps/spark/static/css/spark.css

@@ -33,6 +33,7 @@
 .CodeMirror {
   border: 1px solid #DDD;
   border-top: none;
+  border-bottom: none;
 }
 
 .codeMirror-overlaybtn {
@@ -129,4 +130,9 @@
 
 .results table tr td {
   white-space: nowrap;
-}
+}
+
+.progress, .progress-neutral .bar {
+  background-color: #DDD;
+}
+

+ 4 - 0
apps/spark/static/js/spark.vm.js

@@ -126,6 +126,10 @@ var Snippet = function (notebook, snippet) {
   self.showChart = ko.observable(typeof snippet.showChart != "undefined" && snippet.showChart != null ? snippet.showChart : false);
   self.showLogs = ko.observable(typeof snippet.showLogs != "undefined" && snippet.showLogs != null ? snippet.showLogs : false);
   self.progress =  ko.observable(typeof snippet.progress != "undefined" && snippet.progress != null ? snippet.progress : 0);
+
+  self.progress.subscribe(function (val){
+    $(document).trigger("progress", {data: val, snippet: self});
+  });
   
   self.showGrid.subscribe(function (val){
     if (val){