From fafeb75c2aaa7f462047ad3d27a6c19ba6abcad5 Mon Sep 17 00:00:00 2001
From: Zog
Date: Fri, 9 Mar 2018 16:04:31 +0100
Subject: Refs #6042; Add detailed view for purchazse windows

---
 app/assets/stylesheets/modules/_vj_collection.sass | 29 ++++++--
 .../vehicle_journeys/components/VehicleJourney.js  | 16 +++++
 .../vehicle_journeys/components/VehicleJourneys.js | 83 +++++++++++++++++++---
 app/models/chouette/purchase_window.rb             |  7 ++
 app/views/vehicle_journeys/show.rabl               |  2 +-
 5 files changed, 121 insertions(+), 16 deletions(-)

(limited to 'app')

diff --git a/app/assets/stylesheets/modules/_vj_collection.sass b/app/assets/stylesheets/modules/_vj_collection.sass
index d9079daa2..3ff0828ea 100644
--- a/app/assets/stylesheets/modules/_vj_collection.sass
+++ b/app/assets/stylesheets/modules/_vj_collection.sass
@@ -88,10 +88,12 @@
 
 
   .table-2entries .t2e-head
-    .detailed-timetables
+    .detailed-timetables, .detailed-purchase-windows
+      &:after
+        left: 0
       .fa
         margin-right: 5px
-    .detailed-timetables-bt
+    .detailed-timetables-bt, .detailed-purchase-windows-bt
       text-decoration: none
       .fa
         margin-right: 5px
@@ -117,7 +119,7 @@
       top: 50%
       margin-top: -8px
 
-  .detailed-timetables
+  .detailed-timetables, .detailed-purchase-windows
     padding-top: 10px
     text-align: left
     margin-bottom: -5px
@@ -129,6 +131,13 @@
       a
         text-decoration: none
         border: none
+        white-space: nowrap
+        overflow: hidden
+        text-overflow: ellipsis
+        display: inline-block
+        margin: 0
+        line-height: 1em
+        max-width: 100%
       &:before
         position: absolute
         left: 0px
@@ -147,7 +156,19 @@
         padding-top: 8px
         font-weight: bold
 
-  .t2e-item-list .detailed-timetables > div
+  .detailed-purchase-windows
+    margin-bottom: 12px
+    position: relative
+    &:after
+      position: absolute
+      left: -8px
+      bottom: 0
+      right: -8px
+      content: ""
+      border-top: 1px solid $lightgrey
+
+  .t2e-item-list .detailed-timetables > div,
+  .t2e-item-list .detailed-purchase-windows > div,
     border-left: none
     &:after
       top: 50%
diff --git a/app/javascript/vehicle_journeys/components/VehicleJourney.js b/app/javascript/vehicle_journeys/components/VehicleJourney.js
index d605614c7..e9d40482d 100644
--- a/app/javascript/vehicle_journeys/components/VehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourney.js
@@ -67,6 +67,10 @@ export default class VehicleJourney extends Component {
     return found
   }
 
+  hasPurchaseWindow(purchase_windows, window) {
+    return this.hasTimeTable(purchase_windows, window)
+  }
+
   isDisabled(bool1, bool2) {
     return (bool1 || bool2)
   }
@@ -75,6 +79,8 @@ export default class VehicleJourney extends Component {
     this.previousCity = undefined
     let detailed_calendars = this.hasFeature('detailed_calendars') && !this.disabled
     let detailed_calendars_shown = $('.detailed-timetables-bt').hasClass('active')
+    let detailed_purchase_windows = this.hasFeature('detailed_purchase_windows') && !this.disabled
+    let detailed_purchase_windows_shown = $('.detailed-purchase-windows-bt').hasClass('active')
     let {time_tables, purchase_windows} = this.props.value
 
     return (
@@ -97,6 +103,13 @@ export default class VehicleJourney extends Component {
             {purchase_windows.length > 3 && <span className='vj_tt'> + {purchase_windows.length - 3}</span>}
             </div>
           }
+          { detailed_purchase_windows &&
+            <div className={"detailed-purchase-windows" + (detailed_purchase_windows_shown ? "" : " hidden")}>
+            {this.props.allPurchaseWindows.map((w, i) =>
+              <div key={i} className={(this.hasPurchaseWindow(purchase_windows, w) ? "active" : "inactive")}></div>
+            )}
+            </div>
+          }
           <div>
             {time_tables.slice(0,3).map((tt, i)=>
               <span key={i} className='vj_tt'>{this.timeTableURL(tt)}</span>
@@ -125,6 +138,8 @@ export default class VehicleJourney extends Component {
             )}
             </div>
           }
+
+
         </div>
         {this.props.value.vehicle_journey_at_stops.map((vj, i) =>
           <div key={i} className='td text-center'>
@@ -205,4 +220,5 @@ VehicleJourney.propTypes = {
   onSelectVehicleJourney: PropTypes.func.isRequired,
   vehicleJourneys: PropTypes.object.isRequired,
   allTimeTables: PropTypes.array.isRequired,
+  allPurchaseWindows: PropTypes.array.isRequired,
 }
diff --git a/app/javascript/vehicle_journeys/components/VehicleJourneys.js b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
index 384afba17..ae38a21af 100644
--- a/app/javascript/vehicle_journeys/components/VehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
@@ -12,6 +12,7 @@ export default class VehicleJourneys extends Component {
       this.stopPoints(),
       this.props.filters.features
     )
+    this.togglePurchaseWindows = this.togglePurchaseWindows.bind(this)
     this.toggleTimetables = this.toggleTimetables.bind(this)
   }
 
@@ -49,23 +50,42 @@ export default class VehicleJourneys extends Component {
     return this.headerManager.showHeader(object_id)
   }
 
-  allTimeTables() {
-    if(this._allTimeTables){
-      return this._allTimeTables
-    }
-    let keys = []
+  getPurchaseWindowsAndTimeTables(){
+    let timetables_keys = []
+    let windows_keys = []
     this._allTimeTables = []
+    this._allPurchaseWindows = []
     this.vehicleJourneysList().map((vj, index) => {
       vj.time_tables.map((tt, _) => {
-        if(keys.indexOf(tt.id) < 0){
-            keys.push(tt.id)
+        if(timetables_keys.indexOf(tt.id) < 0){
+            timetables_keys.push(tt.id)
             this._allTimeTables.push(tt)
         }
       })
+      vj.purchase_windows.map((tt, _) => {
+        if(windows_keys.indexOf(tt.id) < 0){
+            windows_keys.push(tt.id)
+            this._allPurchaseWindows.push(tt)
+        }
+      })
     })
+  }
+
+  allTimeTables() {
+    if(! this._allTimeTables){
+      this.getPurchaseWindowsAndTimeTables()
+    }
     return this._allTimeTables
   }
 
+  allPurchaseWindows() {
+    if(!this._allPurchaseWindows){
+      this.getPurchaseWindowsAndTimeTables()
+    }
+
+    return this._allPurchaseWindows
+  }
+
   toggleTimetables(e) {
     $('.table-2entries .detailed-timetables').toggleClass('hidden')
     $('.table-2entries .detailed-timetables-bt').toggleClass('active')
@@ -74,6 +94,14 @@ export default class VehicleJourneys extends Component {
     false
   }
 
+  togglePurchaseWindows(e) {
+    $('.table-2entries .detailed-purchase-windows').toggleClass('hidden')
+    $('.table-2entries .detailed-purchase-windows-bt').toggleClass('active')
+    this.componentDidUpdate()
+    e.preventDefault()
+    false
+  }
+
   componentDidUpdate(prevProps, prevState) {
     if(this.props.status.isFetching == false){
       $('.table-2entries').each(function() {
@@ -127,10 +155,20 @@ export default class VehicleJourneys extends Component {
     )
   }
 
+  purchaseWindowURL(tt) {
+    let refURL = window.location.pathname.split('/', 3).join('/')
+    let ttURL = refURL + '/purchase_windows/' + tt.id
+    return (
+      <a href={ttURL} title='Voir le calendrier commercial'><span className='fa fa-calendar' style={{color: (tt.color ? tt.color : '#4B4B4B')}}></span>{tt.name}</a>
+    )
+  }
+
   render() {
     this.previousBreakpoint = undefined
     this._allTimeTables = null
+    this._allPurchaseWindows = null
     let detailed_calendars = this.hasFeature('detailed_calendars') && !this.isReturn() && (this.allTimeTables().length > 0)
+    let detailed_purchase_windows = this.hasFeature('detailed_purchase_windows') && !this.isReturn() && (this.allPurchaseWindows().length > 0)
     if(this.props.status.isFetching == true) {
       return (
         <div className="isLoading" style={{marginTop: 80, marginBottom: 80}}>
@@ -170,17 +208,39 @@ export default class VehicleJourneys extends Component {
                   <div>{I18n.attribute_name("vehicle_journey", "name")}</div>
                   <div>{I18n.attribute_name("vehicle_journey", "journey_pattern_id")}</div>
                   <div>{I18n.model_name("company")}</div>
-                  { this.hasFeature('purchase_windows') && <div>{I18n.model_name("purchase_window", "plural": true)}</div> }
+                  { this.hasFeature('purchase_windows') &&
+                    <div>
+                      { detailed_purchase_windows &&
+                        <a href='#' onClick={this.togglePurchaseWindows} className='detailed-purchase-windows-bt'>
+                          <span className='fa fa-angle-up'></span>
+                          {I18n.model_name("purchase_window", {"plural": true})}
+                        </a>
+                      }
+                      { !detailed_purchase_windows && I18n.model_name("purchase_window", {"plural": true})}
+                    </div>
+                  }
+                  { detailed_purchase_windows &&
+                    <div className="detailed-purchase-windows hidden">
+                      {this.allPurchaseWindows().map((tt, i)=>
+                        <div key={i}>
+                          <p>
+                            {this.purchaseWindowURL(tt)}
+                          </p>
+                          <p>{tt.bounding_dates.join(' > ')}</p>
+                        </div>
+                      )}
+                    </div>
+                  }
                   <div>
                     { detailed_calendars &&
                       <a href='#' onClick={this.toggleTimetables} className='detailed-timetables-bt'>
                         <span className='fa fa-angle-up'></span>
-                        {I18n.model_name("time_table", "plural": true)}
+                        {I18n.model_name("time_table", {"plural": true})}
                       </a>
                     }
-                    { !detailed_calendars && I18n.model_name("time_table", "plural": true)}
+                    { !detailed_calendars && I18n.model_name("time_table", {"plural": true})}
                   </div>
-                  { !this.isReturn() &&
+                  { detailed_calendars &&
                     <div className="detailed-timetables hidden">
                       {this.allTimeTables().map((tt, i)=>
                         <div key={i}>
@@ -217,6 +277,7 @@ export default class VehicleJourneys extends Component {
                       vehicleJourneys={this}
                       disabled={this.isReturn()}
                       allTimeTables={this.allTimeTables()}
+                      allPurchaseWindows={this.allPurchaseWindows()}
                       />
                   )}
                 </div>
diff --git a/app/models/chouette/purchase_window.rb b/app/models/chouette/purchase_window.rb
index 157390a21..4c8014780 100644
--- a/app/models/chouette/purchase_window.rb
+++ b/app/models/chouette/purchase_window.rb
@@ -39,6 +39,13 @@ module Chouette
       self.slice(*attrs).values + ranges_attrs
     end
 
+    def bounding_dates
+      [
+        date_ranges.map(&:first).min,
+        date_ranges.map(&:last).max,
+      ]
+    end
+
     # def checksum_attributes
     # end
 
diff --git a/app/views/vehicle_journeys/show.rabl b/app/views/vehicle_journeys/show.rabl
index bb26ce797..d218038a6 100644
--- a/app/views/vehicle_journeys/show.rabl
+++ b/app/views/vehicle_journeys/show.rabl
@@ -36,7 +36,7 @@ end
 
 if has_feature? :purchase_windows
   child(:purchase_windows, :object_root => false) do |purchase_windows|
-    attributes :id, :objectid, :name, :color
+    attributes :id, :objectid, :name, :color, :bounding_dates
   end
 end
 
-- 
cgit v1.2.3