398 lines
13 KiB
JavaScript
398 lines
13 KiB
JavaScript
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;
|