diff options
9 files changed, 226 insertions, 104 deletions
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js index 789b1b1e6..6ed0a0b54 100644 --- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js +++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js @@ -17,6 +17,15 @@ class VehicleJourney extends Component { return bool } + timeTableURL(id) { + let refURL = window.location.pathname.split('/', 3).join('/') + let ttURL = refURL + '/time_tables/' + id + + return ( + <a href={ttURL} title='Voir le calendrier'><span className='fa fa-calendar'></span></a> + ) + } + columnHasDelta() { let a = [] this.props.value.vehicle_journey_at_stops.map((vj, i) => { @@ -41,11 +50,9 @@ class VehicleJourney extends Component { <div className='th'> <div className='strong mb-xs'>{this.props.value.objectid ? this.props.value.objectid : '-'}</div> <div>{this.props.value.journey_pattern.objectid}</div> - <div> - {this.props.value.time_tables.map((tt, i)=> - <span key={i}>{tt.objectid}</span> - )} - </div> + {this.props.value.time_tables.map((tt, i)=> + <div key={i}>{this.timeTableURL(tt.id)}</div> + )} <div className={(this.props.value.deletable ? 'disabled ' : '') + 'checkbox'}> <input diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js index f488c9d4e..19a5af869 100644 --- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js +++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js @@ -36,42 +36,67 @@ class CalendarsEditVehicleJourney extends Component { <div className='modal-container'> <div className='modal-dialog'> <div className='modal-content'> - <div className='modal-header clearfix'> - <h4>Calendriers associés</h4> + <div className='modal-header'> + <h4 className='modal-title'>Calendriers associés</h4> </div> {(this.props.modal.type == 'calendars_edit') && ( <form> <div className='modal-body'> - <ul> - {this.props.modal.modalProps.timetables.map((tt, i) => - <li - key= {i} - > - {tt.comment} - <button - type='button' - onClick={() => this.props.onDeleteCalendarModal(tt)} - > - <span className='fa fa-times'></span> - </button> - </li> - )} - </ul> <div className='row'> - <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'> - <div className='form-group'> - <label className='control-label is-required'>Ajouter un calendrier</label> - <TimetableSelect2 - onSelect2Timetable={this.props.onSelect2Timetable} - chunkURL={'/autocomplete_time_tables.json'} - isFilter={false} - /> - <button - onClick={this.props.onAddSelectedTimetable} - type='button' - ><span className='fa fa-times'>Ajouter</span> - </button> + <div className='col-lg-12'> + <div className='subform'> + <div className='nested-head'> + <div className='wrapper'> + <div> + <div className='form-group'> + <label className='control-label'>Calendriers associés</label> + </div> + </div> + <div></div> + </div> + </div> + {this.props.modal.modalProps.timetables.map((tt, i) => + <div className='nested-fields' key={i}> + <div className='wrapper'> + <div>{tt.comment}</div> + <div> + <a + href='#' + title='Supprimer' + className='fa fa-trash remove_fields' + style={{height: 'auto', lineHeight: 'normal'}} + onClick={(e) => { + e.preventDefault() + this.props.onDeleteCalendarModal(tt) + }} + ></a> + </div> + </div> + </div> + )} + <div className='nested-fields'> + <div className='wrapper'> + <div> + <TimetableSelect2 + onSelect2Timetable={this.props.onSelect2Timetable} + chunkURL={'/autocomplete_time_tables.json'} + isFilter={false} + /> + </div> + <div> + <a + href='#' + title='Ajouter' + className='fa fa-plus' + onClick={(e) => { + e.preventDefault() + this.props.onAddSelectedTimetable() + }} + ></a> + </div> + </div> + </div> </div> </div> </div> @@ -79,7 +104,7 @@ class CalendarsEditVehicleJourney extends Component { <div className='modal-footer'> <button - className='btn btn-default' + className='btn btn-link' data-dismiss='modal' type='button' onClick={this.props.onModalClose} @@ -87,7 +112,7 @@ class CalendarsEditVehicleJourney extends Component { Annuler </button> <button - className='btn btn-danger' + className='btn btn-primary' type='button' onClick={this.handleSubmit.bind(this)} > diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js index 61b4047d7..0c083c897 100644 --- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js +++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js @@ -38,25 +38,27 @@ class CreateModal extends Component { <div className='modal-container'> <div className='modal-dialog'> <div className='modal-content'> - <div className='modal-header clearfix'> - <h4>Ajouter une mission</h4> + <div className='modal-header'> + <h4 className='modal-title'>Ajouter une mission</h4> </div> {(this.props.modal.type == 'create') && ( <form> <div className='modal-body'> - <div className='form-group'> - <label className='control-label is-required'>Nom de la course</label> - <input - type='text' - ref='published_journey_name' - className='form-control' - onKeyDown={(e) => actions.resetValidation(e.currentTarget)} - required - /> - </div> <div className='row'> - <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'> + <div className='col-lg-6 col-md-6 col-sm-6 col-xs-12'> + <div className='form-group'> + <label className='control-label is-required'>Nom de la course</label> + <input + type='text' + ref='published_journey_name' + className='form-control' + onKeyDown={(e) => actions.resetValidation(e.currentTarget)} + required + /> + </div> + </div> + <div className='col-lg-6 col-md-6 col-sm-6 col-xs-12'> <div className='form-group'> <label className='control-label is-required'>ID de la mission</label> <MissionSelect2 @@ -69,7 +71,7 @@ class CreateModal extends Component { </div> <div className='modal-footer'> <button - className='btn btn-default' + className='btn btn-link' data-dismiss='modal' type='button' onClick={this.props.onModalClose} @@ -77,7 +79,7 @@ class CreateModal extends Component { Annuler </button> <button - className='btn btn-danger' + className='btn btn-primary' type='button' onClick={this.handleSubmit.bind(this)} > diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js index 1e166dd64..89d3540b1 100644 --- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js +++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js @@ -37,18 +37,18 @@ class DuplicateVehicleJourney extends Component { <div className='modal-container'> <div className='modal-dialog'> <div className='modal-content'> - <div className='modal-header clearfix'> - <h4>Mettre à jour une course</h4> + <div className='modal-header'> + <h4 className='modal-title'>Dupliquer une course</h4> + {(this.props.modal.type == 'duplicate') && ( + <em>Dupliquer les horaires de la course {actions.getSelected(this.props.vehicleJourneys)[0].objectid}</em> + )} </div> {(this.props.modal.type == 'duplicate') && ( <form> <div className='modal-body'> - <div className='form-group'> - <span>Dupliquer les horaires de la course suivante : {actions.getSelected(this.props.vehicleJourneys)[0].objectid}</span> - </div> <div className='row'> - <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'> + <div className='col-lg-10 col-md-9 col-sm-8 col-xs-12'> <div className='form-group'> <label className='control-label is-required'>Nombre de courses à créer et dupliquer</label> <input @@ -62,9 +62,7 @@ class DuplicateVehicleJourney extends Component { /> </div> </div> - </div> - <div className='row'> - <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'> + <div className='col-lg-2 col-md-3 col-sm-4 col-xs-12'> <div className='form-group'> <label className='control-label is-required'>Avec un décalage de</label> <input @@ -82,7 +80,7 @@ class DuplicateVehicleJourney extends Component { </div> <div className='modal-footer'> <button - className='btn btn-default' + className='btn btn-link' data-dismiss='modal' type='button' onClick={this.props.onModalClose} @@ -90,7 +88,7 @@ class DuplicateVehicleJourney extends Component { Annuler </button> <button - className='btn btn-danger' + className='btn btn-primary' type='button' onClick={this.handleSubmit.bind(this)} > diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js index 3dc272686..19482258d 100644 --- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js +++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js @@ -37,32 +37,42 @@ class EditVehicleJourney extends Component { <div className='modal-container'> <div className='modal-dialog'> <div className='modal-content'> - <div className='modal-header clearfix'> - <h4>Informations</h4> + <div className='modal-header'> + <h4 className='modal-title'>Informations</h4> </div> {(this.props.modal.type == 'edit') && ( <form> <div className='modal-body'> - <div className='form-group'> - <label className='control-label is-required'>Intitulé de la course</label> - <input - type='text' - ref='published_journey_name' - className='form-control' - defaultValue={this.props.modal.modalProps.vehicleJourney.published_journey_name} - onKeyDown={(e) => actions.resetValidation(e.currentTarget)} - required - /> - </div> - <div className='row'> - <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'> - <p>Mission <span> {this.props.modal.modalProps.vehicleJourney.journey_pattern.objectid} - {this.props.modal.modalProps.vehicleJourney.journey_pattern.name}</span></p> + <div className='col-lg-6 col-md-6 col-sm-6 col-xs-12'> + <div className='form-group'> + <label className='control-label is-required'>Intitulé de la course</label> + <input + type='text' + ref='published_journey_name' + className='form-control' + defaultValue={this.props.modal.modalProps.vehicleJourney.published_journey_name} + onKeyDown={(e) => actions.resetValidation(e.currentTarget)} + required + /> + </div> + </div> + <div className='col-lg-6 col-md-6 col-sm-6 col-xs-12'> + <div className='form-group'> + <label className='control-label'>Mission</label> + <input + type='text' + className='form-control' + value={(this.props.modal.modalProps.vehicleJourney.journey_pattern.objectid) + ' - ' + (this.props.modal.modalProps.vehicleJourney.journey_pattern.name)} + disabled={true} + /> + </div> </div> </div> + <div className='row'> - <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'> + <div className='col-lg-6 col-md-6 col-sm-6 col-xs-12'> <label className='control-label is-required'>Numéro de train</label> <input type='text' @@ -73,17 +83,21 @@ class EditVehicleJourney extends Component { required /> </div> - </div> - <div className='row'> - <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'> - <p>Transporteur <span> {this.props.modal.modalProps.vehicleJourney.company_id}</span></p> + <div className='col-lg-6 col-md-6 col-sm-6 col-xs-12'> + <label className='control-label'>Transporteur</label> + <input + type='text' + className='form-control' + value={this.props.modal.modalProps.vehicleJourney.company_id} + disabled={true} + /> </div> </div> </div> <div className='modal-footer'> <button - className='btn btn-default' + className='btn btn-link' data-dismiss='modal' type='button' onClick={this.props.onModalClose} @@ -91,7 +105,7 @@ class EditVehicleJourney extends Component { Annuler </button> <button - className='btn btn-danger' + className='btn btn-primary' type='button' onClick={this.handleSubmit.bind(this)} > diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js index 105cfa4c5..a373ed1e5 100644 --- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js +++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js @@ -37,18 +37,18 @@ class ShiftVehicleJourney extends Component { <div className='modal-container'> <div className='modal-dialog'> <div className='modal-content'> - <div className='modal-header clearfix'> - <h4>Mettre à jour une course</h4> + <div className='modal-header'> + <h4 className='modal-title'>Mettre à jour une course</h4> + {(this.props.modal.type == 'shift') && ( + <em>Mettre à jour les horaires de la course {actions.getSelected(this.props.vehicleJourneys)[0].objectid}</em> + )} </div> {(this.props.modal.type == 'shift') && ( <form> <div className='modal-body'> - <div className='form-group'> - <span>Mettre à jour les horaires de la course {actions.getSelected(this.props.vehicleJourneys)[0].objectid}</span> - </div> <div className='row'> - <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'> + <div className='col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-12'> <div className='form-group'> <label className='control-label is-required'>Avec un décalage de</label> <input @@ -66,7 +66,7 @@ class ShiftVehicleJourney extends Component { </div> <div className='modal-footer'> <button - className='btn btn-default' + className='btn btn-link' data-dismiss='modal' type='button' onClick={this.props.onModalClose} @@ -74,7 +74,7 @@ class ShiftVehicleJourney extends Component { Annuler </button> <button - className='btn btn-danger' + className='btn btn-primary' type='button' onClick={this.handleSubmit.bind(this)} > diff --git a/app/assets/stylesheets/application.sass b/app/assets/stylesheets/application.sass index f7645d285..4652de9f4 100644 --- a/app/assets/stylesheets/application.sass +++ b/app/assets/stylesheets/application.sass @@ -12,6 +12,7 @@ @import 'layout' @import 'components/buttons' +@import 'components/modals' @import 'components/select2' @import 'components/forms' @import 'components/tables' diff --git a/app/assets/stylesheets/components/_modals.sass b/app/assets/stylesheets/components/_modals.sass new file mode 100644 index 000000000..2db4fe955 --- /dev/null +++ b/app/assets/stylesheets/components/_modals.sass @@ -0,0 +1,47 @@ +//----------// +// Modals // +//----------// + +$modalW: 600px + +.modal + // Modal centering + .modal-container + display: table + width: 100% + height: 100% + + .modal-dialog + display: table-cell + vertical-align: middle + width: 100% + height: 100% + margin: 0 + text-align: center + + .modal-content + display: inline-block + text-align: left + width: $modalW + + // Modal custom styles + .modal-content + border-radius: 4px + border: none + overflow: hidden + + .modal-header + border: none + background-color: $blue + color: #fff + padding: 15px 30px + + .modal-title + font-size: $h2-size + + .modal-body + padding: 15px 30px + + .modal-footer + border-color: rgba($blue, 0.25) + padding: 15px 30px diff --git a/app/assets/stylesheets/components/_select2.sass b/app/assets/stylesheets/components/_select2.sass index b7fd2c6df..1eb6d01a8 100644 --- a/app/assets/stylesheets/components/_select2.sass +++ b/app/assets/stylesheets/components/_select2.sass @@ -3,15 +3,43 @@ //-----------------------// // With Font Awesome adjusts. +.select2-selection__rendered + position: relative -.select2-selection__clear - font-size: 0 - font-family: FontAwesome - text-rendering: auto - -webkit-font-smoothing: antialiased +.select2-container--bootstrap + .select2-dropdown + z-index: 2050 + .select2-dropdown--above + box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.175) - &::before - content: '\f057' - display: inline - font-size: 14px - font-weight: normal + .select2-selection--multiple + .select2-selection__clear + position: absolute + top: 50% + right: 10px + margin: -10px 0 0 0 + font-size: 0 + font-family: FontAwesome + text-rendering: auto + -webkit-font-smoothing: antialiased + + &::before + content: '\f057' + color: $grey + display: inline + font-size: 14px + font-weight: normal + + .select2-selection__choice + background-color: $blue + color: #fff + border: none + border-radius: 3px + + .select2-selection__choice__remove + float: right + color: rgba(#fff, 0.5) + margin: 0 0 0 5px + + &:hover + color: #fff |