show loading when request data

iryndin · Oct 26, 2014 · 1751fbc · 1751fbc
1 parent 958592b
commit 1751fbc
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 4 deletions.
diff --git a/app/assets/javascripts/component_data/market.js.coffee b/app/assets/javascripts/component_data/market.js.coffee
@@ -1,5 +1,6 @@
 @MarketData = flight.component ->
   @refresh = (event, data) ->
+    @trigger 'market::candlestick::request'
     @reqK(gon.market.id, data['x'])
 
   @reqK = (market = gon.market.id, minutes = 60, limit = 5000) ->

diff --git a/app/assets/javascripts/component_ui/candlestick.js.coffee b/app/assets/javascripts/component_ui/candlestick.js.coffee
@@ -70,24 +70,33 @@ RANGE_DEFAULT =
 INDICATOR = {MA: false, EMA: false}
 
 @CandlestickUI = flight.component ->
+  @mask = ->
+    @$node.find('.mask').show()
+
+  @unmask = ->
+    @$node.find('.mask').hide()
+
+  @request = ->
+    @mask()
+
   @refresh = (event, data) ->
-    @$node.highcharts()?.destroy()
+    @$node.find('#candlestick_chart').highcharts()?.destroy()
     @initHighStock(data)
     @initTooltip()
 
   @switch = (event, data) ->
     INDICATOR[key] = false for key, val of INDICATOR
     INDICATOR[data.x] = true
 
-    if chart = @$node.highcharts()
+    if chart = @$node.find('#candlestick_chart').highcharts()
       for indicator, visible of INDICATOR
         for s in chart.series
           if s.userOptions.algorithm? && (s.userOptions.algorithm == indicator)
             s.setVisible(visible, false)
       chart.redraw()
 
   @initTooltip = ->
-    chart = @$node.highcharts()
+    chart = @$node.find('#candlestick_chart').highcharts()
     tooltips = []
     for i in [0..1]
       if chart.series[i].points.length > 0
@@ -105,8 +114,11 @@ INDICATOR = {MA: false, EMA: false}
     if DATETIME_LABEL_FORMAT_FOR_TOOLTIP
         dataGrouping['dateTimeLabelFormats'] = DATETIME_LABEL_FORMAT_FOR_TOOLTIP
 
-    @$node.highcharts "StockChart",
+    @$node.find('#candlestick_chart').highcharts "StockChart",
       chart:
+        events:
+          load: =>
+            @unmask()
         animation: true
         marginTop: 95
         backgroundColor: 'rgba(0,0,0, 0.0)'
@@ -314,5 +326,6 @@ INDICATOR = {MA: false, EMA: false}
       ]
 
   @after 'initialize', ->
+    @on document, 'market::candlestick::request', @request
     @on document, 'market::candlestick::response', @refresh
     @on document, 'switch::main_indicator_switch', @switch
diff --git a/app/assets/stylesheets/market.css.scss b/app/assets/stylesheets/market.css.scss
@@ -183,6 +183,10 @@ header {
   font-family: $font-family-monospace;
 }
 
+#candlestick > .mask {
+  background-color: rgba(44,44,44,0.5);
+}
+
 .mask {
   position: absolute;
   top: 0px;
@@ -191,6 +195,10 @@ header {
   height: 100%;
   z-index: 900;
   background-color: rgba(44,44,44,0.8);
+  table { 
+    width: 100%;
+    height: 100%;
+  }
 }
 
 #my_orders, #my_done_orders {
@@ -529,6 +537,8 @@ header {
   & > div.tooltip-ma { width: 76; margin-top: 3px; }
   & > div.tooltip-ticker { margin-top: 5px; }
 
+  ul.list-inline { margin-top: 6px; }
+
   span.t-title {
     display: block;
     text-align: rigth;

diff --git a/app/views/private/markets/_candlestick.html.slim b/app/views/private/markets/_candlestick.html.slim
@@ -1 +1,5 @@
 #candlestick
+  #candlestick_chart style='height: 100%;'
+  .mask: table: tr: td.text-center
+    i.fa.fa-refresh.fa-spin.fa-1x
+    span Loading ...