Refs #3542 @1h; Add Time navigation

5 files changed, 144 insertions, 24 deletions

diff --git a/app/assets/stylesheets/components/_referential_overview.sass b/app/assets/stylesheets/components/_referential_overview.sass
index 5fae8080c..a25c49272 100644
--- a/app/assets/stylesheets/components/_referential_overview.sass
+++ b/app/assets/stylesheets/components/_referential_overview.sass
@@ -1,11 +1,22 @@
 .referential-overview
+  margin-top: 50px
+  .time-travel
+    background-color: $grey
+    padding: 10px
+    float: right
+    border-top-left-radius: 10px
+    border-top-right-radius: 10px
+    a.btn:first-child
+      border-right: 1px solid $grey
+    a.btn:last-child
+      border-left: 1px solid $grey
   .overview-table
+    border: 1px solid $grey
+    clear: both
     display: flex
-    margin-top: 50px
     $left-size: 100px
     .head
       height: $left-size
-      border-top: 1px solid $lightgrey
     .line
       height: 80px
     .left
@@ -16,7 +27,7 @@
       border-right: 1px solid white
       .head
         position: relative
-        border-bottom: 1px solid white
+        border-bottom: 1px solid $grey
         border-right: 1px solid $lightgrey
         .dates, .lines
           position: absolute
@@ -41,10 +52,10 @@
           content: ""
       .line
         padding: 15px 10px 10px
-        border-bottom: 1px solid white
+        border-bottom: 1px solid $grey
         font-size: 0.8em
         &:last-child
-          border-bottom: 1px solid $grey
+          border-bottom: none
         .number
           border-radius: 100px
           display: inline-block
@@ -81,8 +92,9 @@
           font-weight: bold
     .right
       flex: 1 1
-      overflow-x: scroll
-      overflow-y: hidden
+      overflow: hidden
+      .inner
+        transition: margin 0.5s
       .head
         white-space: nowrap
         .week
@@ -145,11 +157,29 @@
               border: none
             &.weekend
               background: $lightgrey
+            &.today, &:hover
+              color: $blue
+              background-color: transparentize($blue, 0.7)
+              &:after
+                content: ""
+                left: -1px
+                right: -1px
+                top: 100%
+                height: 10000px
+                background-color: transparentize($blue, 0.7)
+                position: absolute
+                z-index: 4
+            &:hover
+              background-color: transparentize(white, 0.7)
+              &:after
+                background-color: transparentize(white, 0.7)
 
       .line
         border-bottom: 1px solid $grey
         position: relative
         overflow: hidden
+        &:last-child
+          border-bottom: none
 
       .period
         height: 100%
diff --git a/app/javascript/packs/referential_overview/overview.js b/app/javascript/packs/referential_overview/overview.js
new file mode 100644
index 000000000..59c326e9a
--- /dev/null
+++ b/app/javascript/packs/referential_overview/overview.js
@@ -0,0 +1 @@
+import ReferentialOverview from '../../referential_overview'
diff --git a/app/javascript/referential_overview/index.coffee b/app/javascript/referential_overview/index.coffee
new file mode 100644
index 000000000..8dd0e3561
--- /dev/null
+++ b/app/javascript/referential_overview/index.coffee
@@ -0,0 +1,69 @@
+class TimeTravel
+  constructor: (@overview)->
+    @container = @overview.container.find('.time-travel')
+    @todayBt = @container.find(".today")
+    @prevBt = @container.find(".prev-page")
+    @nextBt = @container.find(".next-page")
+    @initButtons()
+
+  initButtons: ->
+    @prevBt.click (e)=>
+      @overview.prevPage()
+      e.preventDefault()
+      false
+
+    @nextBt.click (e)=>
+      @overview.nextPage()
+      e.preventDefault()
+      false
+
+    @todayBt.click (e)=>
+      today = new Date()
+      month = today.getMonth() + 1
+      month = "0#{month}" if month < 10
+      day = today.getDate()
+      day = "0#{month}" if day < 10
+      @overview.showDay "#{today.getFullYear()}-#{month}-#{day}"
+      e.preventDefault()
+      false
+
+  scrolledTo: (progress)->
+    console.log "scrolledTo: #{progress*100}%"
+    @prevBt.removeClass 'disabled'
+    @nextBt.removeClass 'disabled'
+    @prevBt.addClass 'disabled' if progress == 0
+    @nextBt.addClass 'disabled' if progress == 1
+
+class window.ReferentialOverview
+  constructor: (selector)->
+    @container = $(selector)
+    @timeTravel = new TimeTravel(this)
+    @currentOffset = 0
+
+  showDay: (date)->
+    day = @container.find(".day.#{date}")
+    offset = day.offset().left
+    parentOffset = @container.find(".right .inner").offset().left
+    @scrollTo parentOffset - offset
+
+  currentOffset: ->
+    @container.find(".right .inner").offset().left
+
+  prevPage: ->
+    @scrollTo @currentOffset + @container.find(".right").width()
+
+  nextPage: ->
+    @scrollTo @currentOffset - @container.find(".right").width()
+
+  minOffset: ->
+    @_minOffset ||= @container.find(".right").width() - @container.find(".right .line").width()
+    @_minOffset
+
+  scrollTo: (offset)->
+    @currentOffset = offset
+    @currentOffset = Math.max(@currentOffset, @minOffset())
+    @currentOffset = Math.min(@currentOffset, 0)
+    @container.find(".right .inner").css "margin-left": "#{@currentOffset}px"
+    @timeTravel.scrolledTo 1 - (@minOffset() - @currentOffset) / @minOffset()
+
+export default ReferentialOverview
diff --git a/app/services/referential_overview.rb b/app/services/referential_overview.rb
index 14e917bbe..1fafae8ca 100644
--- a/app/services/referential_overview.rb
+++ b/app/services/referential_overview.rb
@@ -17,6 +17,10 @@ class ReferentialOverview
     @period ||= @referential.metadatas_period || []
   end
 
+  def includes_today?
+    period.include? Time.now.to_date
+  end
+
   def weeks
     @weeks = {}
     period.map do |d|
@@ -219,8 +223,9 @@ class ReferentialOverview
     end
 
     def html_class
-      out = []
+      out = [h.l(@date, format: "%Y-%m-%d")]
       out << "weekend" if [0, 6].include?(@date.wday)
+      out << "today" if @date == Time.now.to_date
       out
     end
 
diff --git a/app/views/referentials/_overview.html.slim b/app/views/referentials/_overview.html.slim
index 6dd129405..26958d152 100644
--- a/app/views/referentials/_overview.html.slim
+++ b/app/views/referentials/_overview.html.slim
@@ -1,4 +1,8 @@
-.referential-overview
+.referential-overview id=overview.pagination_param_name
+  .time-travel.btn-group
+    = link_to I18n.t("referentials.overview.head.prev_page"), '#', class: "prev-page btn btn-default"
+    = link_to I18n.t("referentials.overview.head.today"), '#', class: "today btn btn-default #{overview.includes_today? ? '' : 'disabled'}"
+    = link_to I18n.t("referentials.overview.head.next_page"), '#', class: "next-page btn btn-default"
   .overview-table
     .left
       .head
@@ -15,20 +19,31 @@
             .company= line.company&.name
             .mode= line.transport_mode
     .right
-      .head
-        - overview.weeks.each do |week|
-          .week
-            .week-span= week.span
-            .week-number= week.number
-            .days
-              - week.days.each do |day|
-                .day style=day.html_style class=day.html_class
-                  .name= day.short_name
-                  .number= day.number
-      .lines
-        - overview.lines.each do |line|
-          .line style=line.html_style class=line.html_class
-            - line.periods.each do |period|
-              .period style=period.html_style class=period.html_class title=period.title
+      .inner
+        .head
+          - overview.weeks.each do |week|
+            .week
+              .week-span= week.span
+              .week-number= week.number
+              .days
+                - week.days.each do |day|
+                  .day style=day.html_style class=day.html_class
+                    .name= day.short_name
+                    .number= day.number
+        .lines
+          - overview.lines.each do |line|
+            .line style=line.html_style class=line.html_class
+              - line.periods.each do |period|
+                .period style=period.html_style class=period.html_class title=period.title
 
   = new_pagination overview, 'pull-right'
+
+- content_for :javascript do
+  = javascript_pack_tag 'referential_overview/overview.js'
+
+  javascript:
+    overview_id = "#{overview.pagination_param_name}";
+
+  coffee:
+    $ =>
+      new ReferentialOverview("##{overview_id}")