gazoline/tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added BV

Browse source
This commit is contained in:
dbroqua 2018-07-30 19:32:40 +02:00
parent 10d3043218
commit 3d9d820f34
6 changed files with 984 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.css
View file

@ -10,6 +10,10 @@
margin-top: 16px; margin-top: 16px;
} }
.result {
margin-top: 16px;
}
.table>thead>tr>th, .table>thead>tr>th,
.table-centered>tbody>tr>td{text-align:center} .table-centered>tbody>tr>td{text-align:center}

15
src/components/Gearbox.js
View file

@ -1,15 +0,0 @@
import React, { Component } from 'react';
class Gearbox extends Component {
render() {
return (
<div>
{' '}
Gearbox
{' '}
</div>
);
}
}
export default Gearbox;

397
src/components/Gearbox/index.js Normal file
View file

@ -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 (
<Container>
<Row>
<Col xs="12">
<h1>Calculez vos rapports de boîte</h1>
</Col>
<Col xs="12">
<h2>Roue</h2>
</Col>
<Col xs="12">
<Table bordered>
<thead>
<tr>
<th>Diamètre</th>
<th>Largeur du pneu</th>
<th>Hauteur du flanc</th>
</tr>
</thead>
<tbody>
<tr>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="select"
name="wheelDiameter"
value={this.state.wheelDiameter}
onChange={this.handleChange}>
{ this.state.sizes.map( item => (
<option value={item} key={`select_old_diametre_${item}`}>
{`${item}"`}
</option>
))}
</Input>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="number"
name="tyreWidth"
step="5"
placeholder="Largeur du pneu"
value={this.state.tyreWidth}
onChange={this.handleChange}
/>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="number"
name="tyreHeight"
step="5"
placeholder="Hauteur du pneu"
value={this.state.tyreHeight}
onChange={this.handleChange}
/>
</FormGroup>
</td>
</tr>
</tbody>
</Table>
</Col>
<Col xs="12">
<h2>Boîte de vitesse</h2>
</Col>
<Col xs="12">
<Table bordered>
<thead>
<tr>
<th></th>
<th>1<sup>ère</sup></th>
<th>2<sup>ère</sup></th>
<th>3<sup>ère</sup></th>
<th>4<sup>ère</sup></th>
<th>5<sup>ère</sup></th>
<th>6<sup>ère</sup></th>
<th>Pont</th>
<th>Marche arrière</th>
</tr>
</thead>
<tbody>
<tr>
<td className="align-middle">
Actuelle
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="oldGearBoxOne"
value={this.state.oldGearBoxOne}
onChange={this.handleChange}
/>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="oldGearBoxSecond"
value={this.state.oldGearBoxSecond}
onChange={this.handleChange}
/>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="oldGearBoxThird"
value={this.state.oldGearBoxThird}
onChange={this.handleChange}
/>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="oldGearBoxFourth"
value={this.state.oldGearBoxFourth}
onChange={this.handleChange}
/>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="oldGearBoxFifth"
value={this.state.oldGearBoxFifth}
onChange={this.handleChange}
/>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="oldGearBoxSixth"
value={this.state.oldGearBoxSixth}
onChange={this.handleChange}
/>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="oldGearBoxGate"
value={this.state.oldGearBoxGate}
onChange={this.handleChange}
/>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="oldGearBoxReverse"
value={this.state.oldGearBoxReverse}
onChange={this.handleChange}
/>
</FormGroup>
</td>
</tr>
<tr>
<td className="align-middle">
Nouvelle
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="newGearBoxOne"
value={this.state.newGearBoxOne}
onChange={this.handleChange}
/>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="newGearBoxSecond"
value={this.state.newGearBoxSecond}
onChange={this.handleChange}
/>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="newGearBoxThird"
value={this.state.newGearBoxThird}
onChange={this.handleChange}
/>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="newGearBoxFourth"
value={this.state.newGearBoxFourth}
onChange={this.handleChange}
/>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="newGearBoxFifth"
value={this.state.newGearBoxFifth}
onChange={this.handleChange}
/>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="newGearBoxSixth"
value={this.state.newGearBoxSixth}
onChange={this.handleChange}
/>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="newGearBoxGate"
value={this.state.newGearBoxGate}
onChange={this.handleChange}
/>
</FormGroup>
</td>
<td className="align-middle col-xs-4">
<FormGroup>
<Input
type="text"
name="newGearBoxReverse"
value={this.state.newGearBoxReverse}
onChange={this.handleChange}
/>
</FormGroup>
</td>
</tr>
</tbody>
</Table>
</Col>
<Col xs="12">
<h2>Bonus</h2>
</Col>
<Col xs="12">
<Row>
<Col xs="12" md="6">
<FormGroup>
<Label for="rpm">Afficher la vitesse pour le régime moteur suivant (tr/min) :</Label>
<Input
type="number"
id="rpm"
name="rpm"
step="50"
value={this.state.rpm}
onChange={this.handleChange}
/>
</FormGroup>
</Col>
<Col xs="12" md="6">
<FormGroup>
<Label for="speed">Afficher le régime moteur pour la vitesse suivante (km/h) :</Label>
<Input
type="number"
step="1"
id="speed"
name="speed"
value={this.state.speed}
onChange={this.handleChange}
/>
</FormGroup>
</Col>
</Row>
</Col>
<Col xs="12">
<Button onClick={this.submit}>Calculer</Button>
</Col>
</Row>
{
this.state.showResult ?
<Results
wheelDiameter={this.state.wheelDiameter}
tyreWidth={this.state.tyreWidth}
tyreHeight={this.state.tyreHeight}
oldGearBoxOne={this.state.oldGearBoxOne}
oldGearBoxSecond={this.state.oldGearBoxSecond}
oldGearBoxThird={this.state.oldGearBoxThird}
oldGearBoxFourth={this.state.oldGearBoxFourth}
oldGearBoxFifth={this.state.oldGearBoxFifth}
oldGearBoxSixth={this.state.oldGearBoxSixth}
oldGearBoxGate={this.state.oldGearBoxGate}
oldGearBoxReverse={this.state.oldGearBoxReverse}
newGearBoxOne={this.state.newGearBoxOne}
newGearBoxSecond={this.state.newGearBoxSecond}
newGearBoxThird={this.state.newGearBoxThird}
newGearBoxFourth={this.state.newGearBoxFourth}
newGearBoxFifth={this.state.newGearBoxFifth}
newGearBoxSixth={this.state.newGearBoxSixth}
newGearBoxGate={this.state.newGearBoxGate}
newGearBoxReverse={this.state.newGearBoxReverse}
rpm={this.state.rpm}
speed={this.state.speed}
/>
:
(null)
}
</Container>
)
}
}
export default Gearbox;

543
src/components/Gearbox/results.js Normal file
View file

@ -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 (
<Row className="result">
<Col xs="12">
<h2>
Résultat
</h2>
</Col>
<Col xs="12">
<Table bordered>
<thead>
<tr>
<th colSpan="2" />
<th>
1
<sup>
ère
</sup>
</th>
<th>
2
<sup>
ème
</sup>
</th>
<th>
3
<sup>
ème
</sup>
</th>
<th>
4
<sup>
ème
</sup>
</th>
<th>
5
<sup>
ème
</sup>
</th>
<th>
6
<sup>
ème
</sup>
</th>
<th>
Marche arrière
</th>
</tr>
</thead>
{Object.keys(this.state.results).map((tpm, index) => (
<tbody key={`rpm_${index}`}>
<tr>
<td className="align-middle" rowSpan="2">
{
tpm === 'speed'
? this.state.speed
: tpm === 'rpm'
? this.state.rpm
: tpm
}
{
tpm === 'speed'
? (
'km/h'
)
: (
'tr/min'
)
}
</td>
<td className="align-middle">
<strong>
Actuelle
</strong>
</td>
{Object.keys(this.state.results[tpm]).map((values, indexValues) => (
<td className="align-middle" key={`rpm_values_old_${index}_${indexValues}`}>
{this.state.results[tpm][values].old}
</td>
))}
</tr>
<tr>
<td className="align-middle">
<strong>
Nouvelle
</strong>
</td>
{Object.keys(this.state.results[tpm]).map((values, indexValues) => (
<td className="align-middle" key={`rpm_values_new_${index}_${indexValues}`}>
{this.state.results[tpm][values].new}
</td>
))}
</tr>
</tbody>
))}
</Table>
</Col>
</Row>
);
}
}
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) => {
//
// });
// });

54
src/components/Wheels/results.js
View file

@ -1,5 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { formatNumber } from '../../numbers';
class Results extends Component { class Results extends Component {
state = {}; state = {};
@ -150,30 +152,6 @@ class Results extends Component {
this.drawET(diamRimOld,diamRimNew,tyreHOld,tyreHNew); 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<prec){
s[1]=s[1]||'';
s[1]+=new Array(prec-s[1].length+1).join('0');
}
return s.join(dec);
}
drawWheel(diamWheelOld,diamWheelNew,diamRimOld,diamRimNew){ drawWheel(diamWheelOld,diamWheelNew,diamRimOld,diamRimNew){
let c = this.refs.roue_face; let c = this.refs.roue_face;
var ctx=c.getContext("2d"); var ctx=c.getContext("2d");
@ -489,22 +467,22 @@ class Results extends Component {
<p> <p>
{ this.state.diffET > 0 ? { 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."
) )
} }
<br /> <br />
{ {
this.state.diffWay > 0 ? 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."
) )
} }
</p> </p>
@ -514,28 +492,28 @@ class Results extends Component {
{ this.state.diffDiam > 0 ? { this.state.diffDiam > 0 ?
( (
<span> <span>
{`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.`}
<br /> <br />
{`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.`}
</span> </span>
) )
: :
( (
<span> <span>
{`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.`}
<br /> <br />
{`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.`}
</span> </span>
) )
} }
<br /> <br />
<span className='glyphicon glyphicon-link' aria-hidden='true'></span> <span className='glyphicon glyphicon-link' aria-hidden='true'></span>
<a href={`http://tyrestretch.com/${this.number_format(this.state.newWheelWidth,1,'.','')}-${this.state.newTyreWidth}-${this.state.newTyreHeight}-R${this.state.newWheelDiameter}/`} target='_blank'>Aperçu</a> (Il se peut qu'il n'y ai aucun aperçu pour cette dimension) <a href={`http://tyrestretch.com/${formatNumber(this.state.newWheelWidth,1,'.','')}-${this.state.newTyreWidth}-${this.state.newTyreHeight}-R${this.state.newWheelDiameter}/`} target='_blank'>Aperçu</a> (Il se peut qu'il n'y ai aucun aperçu pour cette dimension)
</p> </p>
<h2>Vitesse</h2> <h2>Vitesse</h2>
<p> <p>
Quand votre compteur indique <strong>{this.state.speed} km/h</strong> vous roulez en réalité à <strong>{this.number_format(this.state.vitesseNew,2,',',' ')} km/h</strong> Quand votre compteur indique <strong>{this.state.speed} km/h</strong> vous roulez en réalité à <strong>{formatNumber(this.state.vitesseNew,2,',',' ')} km/h</strong>
</p> </p>
<h2>Roue</h2> <h2>Roue</h2>
@ -550,10 +528,10 @@ class Results extends Component {
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td className='col-xs-3'>{this.number_format(this.state.diamColA,2,',',' ')}</td> <td className='col-xs-3'>{formatNumber(this.state.diamColA,2,',',' ')}</td>
<td className='col-xs-3'>{this.number_format(this.state.diamColB,2,',',' ')}</td> <td className='col-xs-3'>{formatNumber(this.state.diamColB,2,',',' ')}</td>
<td className='col-xs-3'>{this.number_format(this.state.diamColC,2,',',' ')}</td> <td className='col-xs-3'>{formatNumber(this.state.diamColC,2,',',' ')}</td>
<td className='col-xs-3'>{this.number_format(this.state.diamColD,2,',',' ')}</td> <td className='col-xs-3'>{formatNumber(this.state.diamColD,2,',',' ')}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

24
src/numbers.js Normal file
View file

@ -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<prec){
s[1]=s[1]||'';
s[1]+=new Array(prec-s[1].length+1).join('0');
}
return s.join(dec);
};