diff options
| -rw-r--r-- | app/assets/stylesheets/components/_referential_overview.sass | 44 | ||||
| -rw-r--r-- | app/javascript/packs/referential_overview/overview.js | 1 | ||||
| -rw-r--r-- | app/javascript/referential_overview/index.coffee | 69 | ||||
| -rw-r--r-- | app/services/referential_overview.rb | 7 | ||||
| -rw-r--r-- | app/views/referentials/_overview.html.slim | 47 | ||||
| -rw-r--r-- | config/locales/referentials.en.yml | 5 | ||||
| -rw-r--r-- | config/locales/referentials.fr.yml | 3 |
7 files changed, 151 insertions, 25 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}") diff --git a/config/locales/referentials.en.yml b/config/locales/referentials.en.yml index dd7f776fd..b7483c0aa 100644 --- a/config/locales/referentials.en.yml +++ b/config/locales/referentials.en.yml @@ -52,7 +52,10 @@ en: head: dates: Dates lines: Lignes - + today: Today + prev_page: Prev. page + next_page: Next page + activerecord: models: referential: diff --git a/config/locales/referentials.fr.yml b/config/locales/referentials.fr.yml index 48b98214e..3485413f1 100644 --- a/config/locales/referentials.fr.yml +++ b/config/locales/referentials.fr.yml @@ -52,6 +52,9 @@ fr: head: dates: Dates lines: Lignes + today: Aujourd'hui + prev_page: Page précédente + next_page: Page suivante activerecord: models: |