Added BV
This commit is contained in:
dbroqua
parent
10d3043218
commit
3d9d820f34
|
|
@ -10,6 +10,10 @@
|
|||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.result {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.table>thead>tr>th,
|
||||
.table-centered>tbody>tr>td{text-align:center}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
|
||||
class Gearbox extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{' '}
|
||||
Gearbox
|
||||
{' '}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Gearbox;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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) => {
|
||||
//
|
||||
// });
|
||||
// });
|
||||
|
|
@ -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<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){
|
||||
let c = this.refs.roue_face;
|
||||
var ctx=c.getContext("2d");
|
||||
|
|
@ -489,22 +467,22 @@ class Results extends Component {
|
|||
<p>
|
||||
{ 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 />
|
||||
{
|
||||
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>
|
||||
|
|
@ -514,28 +492,28 @@ class Results extends Component {
|
|||
{ this.state.diffDiam > 0 ?
|
||||
(
|
||||
<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 />
|
||||
{`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>
|
||||
{`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 />
|
||||
{`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>
|
||||
)
|
||||
}
|
||||
<br />
|
||||
<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>
|
||||
|
||||
<h2>Vitesse</h2>
|
||||
<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>
|
||||
|
||||
<h2>Roue</h2>
|
||||
|
|
@ -550,10 +528,10 @@ class Results extends Component {
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className='col-xs-3'>{this.number_format(this.state.diamColA,2,',',' ')}</td>
|
||||
<td className='col-xs-3'>{this.number_format(this.state.diamColB,2,',',' ')}</td>
|
||||
<td className='col-xs-3'>{this.number_format(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.diamColA,2,',',' ')}</td>
|
||||
<td className='col-xs-3'>{formatNumber(this.state.diamColB,2,',',' ')}</td>
|
||||
<td className='col-xs-3'>{formatNumber(this.state.diamColC,2,',',' ')}</td>
|
||||
<td className='col-xs-3'>{formatNumber(this.state.diamColD,2,',',' ')}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user