From 3d9d820f348e8cc975a07c3f477419d8131ebc63 Mon Sep 17 00:00:00 2001 From: dbroqua Date: Mon, 30 Jul 2018 19:32:40 +0200 Subject: [PATCH] Added BV --- src/App.css | 4 + src/components/Gearbox.js | 15 - src/components/Gearbox/index.js | 397 ++++++++++++++++++++++ src/components/Gearbox/results.js | 543 ++++++++++++++++++++++++++++++ src/components/Wheels/results.js | 54 +-- src/numbers.js | 24 ++ 6 files changed, 984 insertions(+), 53 deletions(-) delete mode 100644 src/components/Gearbox.js create mode 100644 src/components/Gearbox/index.js create mode 100644 src/components/Gearbox/results.js create mode 100644 src/numbers.js diff --git a/src/App.css b/src/App.css index 9cf71fd..6232e37 100644 --- a/src/App.css +++ b/src/App.css @@ -10,6 +10,10 @@ margin-top: 16px; } +.result { + margin-top: 16px; +} + .table>thead>tr>th, .table-centered>tbody>tr>td{text-align:center} diff --git a/src/components/Gearbox.js b/src/components/Gearbox.js deleted file mode 100644 index 027ee9f..0000000 --- a/src/components/Gearbox.js +++ /dev/null @@ -1,15 +0,0 @@ -import React, { Component } from 'react'; - -class Gearbox extends Component { - render() { - return ( -
- {' '} -Gearbox - {' '} -
- ); - } -} - -export default Gearbox; diff --git a/src/components/Gearbox/index.js b/src/components/Gearbox/index.js new file mode 100644 index 0000000..ada6153 --- /dev/null +++ b/src/components/Gearbox/index.js @@ -0,0 +1,397 @@ +import React, { Component } from 'react'; +import { + Container, Row, Col, Table, FormGroup, Input, Button, Label +} from 'reactstrap'; +import Results from './results' + +import 'bootstrap/dist/css/bootstrap.min.css'; +import '../../App.css'; + +class Gearbox extends Component { + state = {}; + + constructor(props) { + super(props); + + const sizes = []; + for (let i = 10; i <= 24; i += 1) { + sizes.push(i); + } + + this.state = { + sizes, + showResult: false, + wheelDiameter: 14, + tyreWidth: 175, + tyreHeight: 65, + oldGearBoxOne: '11/37', + oldGearBoxSecond: '22/41', + oldGearBoxThird: '28/37', + oldGearBoxFourth: '34/35', + oldGearBoxFifth: '39/32', + oldGearBoxSixth: '', + oldGearBoxGate: '15/61', + oldGearBoxReverse: '11/39', + newGearBoxOne: '11/41', + newGearBoxSecond: '21/43', + newGearBoxThird: '28/37', + newGearBoxFourth: '30/29', + newGearBoxFifth: '39/31', + newGearBoxSixth: '', + newGearBoxGate: '14/63', + newGearBoxReverse: '11/39', + rpm: 2500, + speed: 90 + }; + + this.handleChange = this.handleChange.bind(this); + this.submit = this.submit.bind(this); + } + + handleChange(event) { + const target = event.target; + const value = target.type === 'checkbox' ? target.checked : target.value; + const name = target.name; + + this.setState({ + [name]: value, + showResult: false + }); + } + + submit() { + this.setState({ + showResult: true + }) + } + + render() { + return ( + + + +

Calculez vos rapports de boîte

+ + +

Roue

+ + + + + + + + + + + + + + + + + +
DiamètreLargeur du pneuHauteur du flanc
+ + + { this.state.sizes.map( item => ( + + ))} + + + + + + + + + + +
+ + +

Boîte de vitesse

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
1ère2ère3ère4ère5ère6èrePontMarche arrière
+ Actuelle + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Nouvelle + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +

Bonus

+ + + + + + + + + + + + + + + + + + + + + + { + this.state.showResult ? + + : + (null) + } + + ) + } +} + +export default Gearbox; diff --git a/src/components/Gearbox/results.js b/src/components/Gearbox/results.js new file mode 100644 index 0000000..86ffc58 --- /dev/null +++ b/src/components/Gearbox/results.js @@ -0,0 +1,543 @@ +import React, { Component } from 'react'; +import { Table, Row, Col } from 'reactstrap'; + +import { formatNumber } from '../../numbers'; + +class Results extends Component { + constructor(props) { + super(props); + + this.state = { + wheelDiameter: this.props.wheelDiameter, + tyreWidth: this.props.tyreWidth, + tyreHeight: this.props.tyreHeight, + + oldGearBoxOne: this.props.oldGearBoxOne, + oldGearBoxSecond: this.props.oldGearBoxSecond, + oldGearBoxThird: this.props.oldGearBoxThird, + oldGearBoxFourth: this.props.oldGearBoxFourth, + oldGearBoxFifth: this.props.oldGearBoxFifth, + oldGearBoxSixth: this.props.oldGearBoxSixth, + oldGearBoxGate: this.props.oldGearBoxGate, + oldGearBoxReverse: this.props.oldGearBoxReverse, + + newGearBoxOne: this.props.newGearBoxOne, + newGearBoxSecond: this.props.newGearBoxSecond, + newGearBoxThird: this.props.newGearBoxThird, + newGearBoxFourth: this.props.newGearBoxFourth, + newGearBoxFifth: this.props.newGearBoxFifth, + newGearBoxSixth: this.props.newGearBoxSixth, + newGearBoxGate: this.props.newGearBoxGate, + newGearBoxReverse: this.props.newGearBoxReverse, + + rpm: this.props.rpm, + speed: this.props.speed, + + labels: { + 1: 'One', + 2: 'Second', + 3: 'Third', + 4: 'Fourth', + 5: 'Fifth', + 6: 'Sixth', + reverse: 'Reverse', + }, + + results: { + 1000: { + 1: { + old: 0, + new: 0, + }, + 2: { + old: 0, + new: 0, + }, + 3: { + old: 0, + new: 0, + }, + 4: { + old: 0, + new: 0, + }, + 5: { + old: 0, + new: 0, + }, + 6: { + old: 0, + new: 0, + }, + reverse: { + old: 0, + new: 0, + }, + }, + 2000: { + 1: { + old: 0, + new: 0, + }, + 2: { + old: 0, + new: 0, + }, + 3: { + old: 0, + new: 0, + }, + 4: { + old: 0, + new: 0, + }, + 5: { + old: 0, + new: 0, + }, + 6: { + old: 0, + new: 0, + }, + reverse: { + old: 0, + new: 0, + }, + }, + 3000: { + 1: { + old: 0, + new: 0, + }, + 2: { + old: 0, + new: 0, + }, + 3: { + old: 0, + new: 0, + }, + 4: { + old: 0, + new: 0, + }, + 5: { + old: 0, + new: 0, + }, + 6: { + old: 0, + new: 0, + }, + reverse: { + old: 0, + new: 0, + }, + }, + 4000: { + 1: { + old: 0, + new: 0, + }, + 2: { + old: 0, + new: 0, + }, + 3: { + old: 0, + new: 0, + }, + 4: { + old: 0, + new: 0, + }, + 5: { + old: 0, + new: 0, + }, + 6: { + old: 0, + new: 0, + }, + reverse: { + old: 0, + new: 0, + }, + }, + 5000: { + 1: { + old: 0, + new: 0, + }, + 2: { + old: 0, + new: 0, + }, + 3: { + old: 0, + new: 0, + }, + 4: { + old: 0, + new: 0, + }, + 5: { + old: 0, + new: 0, + }, + 6: { + old: 0, + new: 0, + }, + reverse: { + old: 0, + new: 0, + }, + }, + 6000: { + 1: { + old: 0, + new: 0, + }, + 2: { + old: 0, + new: 0, + }, + 3: { + old: 0, + new: 0, + }, + 4: { + old: 0, + new: 0, + }, + 5: { + old: 0, + new: 0, + }, + 6: { + old: 0, + new: 0, + }, + reverse: { + old: 0, + new: 0, + }, + }, + 7000: { + 1: { + old: 0, + new: 0, + }, + 2: { + old: 0, + new: 0, + }, + 3: { + old: 0, + new: 0, + }, + 4: { + old: 0, + new: 0, + }, + 5: { + old: 0, + new: 0, + }, + 6: { + old: 0, + new: 0, + }, + reverse: { + old: 0, + new: 0, + }, + }, + rpm: { + 1: { + old: 0, + new: 0, + }, + 2: { + old: 0, + new: 0, + }, + 3: { + old: 0, + new: 0, + }, + 4: { + old: 0, + new: 0, + }, + 5: { + old: 0, + new: 0, + }, + 6: { + old: 0, + new: 0, + }, + reverse: { + old: 0, + new: 0, + }, + }, + speed: { + 1: { + old: 0, + new: 0, + }, + 2: { + old: 0, + new: 0, + }, + 3: { + old: 0, + new: 0, + }, + 4: { + old: 0, + new: 0, + }, + 5: { + old: 0, + new: 0, + }, + 6: { + old: 0, + new: 0, + }, + reverse: { + old: 0, + new: 0, + }, + }, + }, + }; + } + + componentDidMount() { + const Pi = Math.PI; + const C = Pi * (Number(this.state.wheelDiameter.toString().replace('"', '')) * 25.4 + 2 * Number(this.state.tyreWidth) * Number(this.state.tyreHeight) / 100) / 1000; + + const results = {}; + + Object.keys(this.state.results).map((rpm) => { + results[rpm] = {}; + Object.keys(this.state.results[rpm]).map((gear) => { + results[rpm][gear] = {}; + Object.keys(this.state.results[rpm][gear]).map((type) => { + let V = 0; + let f = 0; + let vitesseRoue = '-'; + const currentRpm = rpm === 'rpm' ? this.state.rpm : rpm; + const rapportBoite = this.convertRapport(this.state[`${type}GearBox${this.state.labels[gear]}`]); + const rapportPont = this.convertRapport(this.state[`${type}GearBoxGate`]); + + if (rapportBoite > 0 && rapportPont > 0) { + if (rpm !== 'speed') { + f = currentRpm * rapportBoite * rapportPont; + V = f * C * 60 / 1000; + vitesseRoue = `${formatNumber(V, 2, ',', ' ')}km/h`; + } else { + V = Number(this.state.speed); + f = V / (C * 60 / 1000); + const currentSpeedRpm = f / (rapportBoite * rapportPont); + vitesseRoue = `${formatNumber(currentSpeedRpm, 2, ',', ' ')}tr/min`; + } + } + + results[rpm][gear][type] = vitesseRoue; + return true; + }); + return true; + }); + return true; + }); + + this.setState({ results }); + } + + + convertRapport(value) { + if (value) { + const _rapport = value.split('/'); + if (Number(value)) { + return value; + } if (_rapport.length === 2) { + return Number(_rapport[0]) / Number(_rapport[1]); + } + } + + return -1; + } + + render() { + return ( + + +

+ Résultat +

+ + + + + + + + + + + + + + + {Object.keys(this.state.results).map((tpm, index) => ( + + + + + {Object.keys(this.state.results[tpm]).map((values, indexValues) => ( + + ))} + + + + {Object.keys(this.state.results[tpm]).map((values, indexValues) => ( + + ))} + + + ))} +
+ + 1 + + ère + + + 2 + + ème + + + 3 + + ème + + + 4 + + ème + + + 5 + + ème + + + 6 + + ème + + + Marche arrière +
+ { + tpm === 'speed' + ? this.state.speed + : tpm === 'rpm' + ? this.state.rpm + : tpm + } + { + tpm === 'speed' + ? ( + 'km/h' + ) + : ( + 'tr/min' + ) + } + + + + Actuelle + + + {this.state.results[tpm][values].old} +
+ + Nouvelle + + + {this.state.results[tpm][values].new} +
+ + + ); + } +} + +export default Results; +// +// function number_format(number, decimals, dec_point, thousands_sep) { +// number = (`${number}`).replace(/[^0-9+\-Ee.]/g, ''); +// let n = !isFinite(+number) ? 0 : +number, +// prec = !isFinite(+decimals) ? 0 : Math.abs(decimals), +// sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, +// dec = (typeof dec_point === 'undefined') ? '.' : dec_point, +// s = '', +// toFixedFix = function (n, prec) { +// const k = Math.pow(10, prec); +// return `${(Math.round(n * k) / k).toFixed(prec)}`; +// }; +// +// s = (prec ? toFixedFix(n, prec) : `${Math.round(n)}`).split('.'); +// +// if (s[0].length > 3) { +// s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep); +// } +// +// if ((s[1] || '').length < prec) { +// s[1] = s[1] || ''; +// s[1] += new Array(prec - s[1].length + 1).join('0'); +// } +// +// return s.join(dec); +// } +// +// function formValidation() { +// let result = true; +// +// $('.bvcalculotor :input.required').each(function () { +// let isOk = false; +// if ($(this).hasClass('divide')) { +// const _rapport = $(this).val().split('/'); +// if ($(this).val() == '' || $(this).val() == '-' || Number($(this).val()) || _rapport.length == 2 && Number(_rapport[0]) / Number(_rapport[1]) > 0) { +// isOk = true; +// } +// } else if (Number($(this).val()) > 0) { +// isOk = true; +// } +// +// if (isOk === false) { +// $(this).parent().addClass('has-error'); +// result = false; +// } else { +// $(this).parent().removeClass('has-error'); +// } +// }); +// +// return result; +// } +// +// +// $().ready(() => { +// $('.bvcalculator').submit((e) => { +// +// }); +// }); diff --git a/src/components/Wheels/results.js b/src/components/Wheels/results.js index 2dc7717..a0bb4d4 100644 --- a/src/components/Wheels/results.js +++ b/src/components/Wheels/results.js @@ -1,5 +1,7 @@ import React, { Component } from 'react'; +import { formatNumber } from '../../numbers'; + class Results extends Component { state = {}; @@ -150,30 +152,6 @@ class Results extends Component { this.drawET(diamRimOld,diamRimNew,tyreHOld,tyreHNew); } - toFixedFix(n,prec){ - var k=Math.pow(10,prec); - return''+(Math.round(n*k)/k).toFixed(prec); - } - - number_format(number,decimals,dec_point,thousands_sep){ - number=(number+'').replace(/[^0-9+\-Ee.]/g,''); - const n=!isFinite(+number)?0:+number; - const prec=!isFinite(+decimals)?0:Math.abs(decimals); - const sep=(typeof thousands_sep==='undefined')?',':thousands_sep; - const dec=(typeof dec_point==='undefined')?'.':dec_point; - let s=''; - - s=(prec?this.toFixedFix(n,prec):''+Math.round(n)).split('.'); - if(s[0].length>3){ - s[0]=s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g,sep); - } - if((s[1]||'').length { this.state.diffET > 0 ? ( - "Vos nouvelles jantes seront plus proches de votre pivot de " + this.number_format(this.state.diffET,2,',',' ') + " mm." + "Vos nouvelles jantes seront plus proches de votre pivot de " + formatNumber(this.state.diffET,2,',',' ') + " mm." ) : ( - "Vos nouvelles jantes seront plus éloignées de votre pivot de " + this.number_format(this.state.diffET,2,',',' ') + " mm." + "Vos nouvelles jantes seront plus éloignées de votre pivot de " + formatNumber(this.state.diffET,2,',',' ') + " mm." ) }
{ this.state.diffWay > 0 ? ( - "Vos nouvelles jantes ressortiront de " + this.number_format( this.state.diffWay, 2, ',', ' ' ) + " mm par rapport à l'origine." + "Vos nouvelles jantes ressortiront de " + formatNumber( this.state.diffWay, 2, ',', ' ' ) + " mm par rapport à l'origine." ) : ( - "Vos nouvelles jantes rentreront de " + this.number_format(-(this.state.diffWay), 2, ',', ' ' ) + " mm par rapport à l'origine." + "Vos nouvelles jantes rentreront de " + formatNumber(-(this.state.diffWay), 2, ',', ' ' ) + " mm par rapport à l'origine." ) }

@@ -514,28 +492,28 @@ class Results extends Component { { this.state.diffDiam > 0 ? ( - {`Votre nouveau pneu aura un diamètre plus petit de ${this.number_format(- (this.state.diffDiam),2,',',' ')} cm.`} + {`Votre nouveau pneu aura un diamètre plus petit de ${formatNumber(- (this.state.diffDiam),2,',',' ')} cm.`}
- {`Votre véhicule sera ainsi rabaissé de ${this.number_format(- (this.state.diffRayon),2,',',' ')} cm.`} + {`Votre véhicule sera ainsi rabaissé de ${formatNumber(- (this.state.diffRayon),2,',',' ')} cm.`} ) : ( - {`Votre nouveau pneu aura un diamètre plus grand de ${this.number_format( this.state.diffDiam,2,',',' ')} cm.`} + {`Votre nouveau pneu aura un diamètre plus grand de ${formatNumber( this.state.diffDiam,2,',',' ')} cm.`}
- {`Votre véhicule sera ainsi réhaussé de ${this.number_format( this.state.diffRayon,2,',',' ')} cm.`} + {`Votre véhicule sera ainsi réhaussé de ${formatNumber( this.state.diffRayon,2,',',' ')} cm.`} ) }
- Aperçu (Il se peut qu'il n'y ai aucun aperçu pour cette dimension) + Aperçu (Il se peut qu'il n'y ai aucun aperçu pour cette dimension)

Vitesse

- Quand votre compteur indique {this.state.speed} km/h vous roulez en réalité à {this.number_format(this.state.vitesseNew,2,',',' ')} km/h + Quand votre compteur indique {this.state.speed} km/h vous roulez en réalité à {formatNumber(this.state.vitesseNew,2,',',' ')} km/h

Roue

@@ -550,10 +528,10 @@ class Results extends Component { - {this.number_format(this.state.diamColA,2,',',' ')} - {this.number_format(this.state.diamColB,2,',',' ')} - {this.number_format(this.state.diamColC,2,',',' ')} - {this.number_format(this.state.diamColD,2,',',' ')} + {formatNumber(this.state.diamColA,2,',',' ')} + {formatNumber(this.state.diamColB,2,',',' ')} + {formatNumber(this.state.diamColC,2,',',' ')} + {formatNumber(this.state.diamColD,2,',',' ')} diff --git a/src/numbers.js b/src/numbers.js new file mode 100644 index 0000000..e1df4c7 --- /dev/null +++ b/src/numbers.js @@ -0,0 +1,24 @@ + + function toFixedFix (n,prec){ + var k=Math.pow(10,prec); + return''+(Math.round(n*k)/k).toFixed(prec); + } + +export function formatNumber (number,decimals,dec_point,thousands_sep){ + number=(number+'').replace(/[^0-9+\-Ee.]/g,''); + const n=!isFinite(+number)?0:+number; + const prec=!isFinite(+decimals)?0:Math.abs(decimals); + const sep=(typeof thousands_sep==='undefined')?',':thousands_sep; + const dec=(typeof dec_point==='undefined')?'.':dec_point; + let s=''; + + s=(prec?toFixedFix(n,prec):''+Math.round(n)).split('.'); + if(s[0].length>3){ + s[0]=s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g,sep); + } + if((s[1]||'').length