2018-07-29 10:26:45 +02:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import { Container, Row, Col, Table, FormGroup, Input, Button } from 'reactstrap';
|
|
|
|
import Result from "./results"
|
2018-07-29 19:05:17 +02:00
|
|
|
import Explain from "./explain"
|
2018-07-29 10:26:45 +02:00
|
|
|
|
|
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
|
|
import '../../App.css';
|
|
|
|
|
|
|
|
class Wheels 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,
|
|
|
|
oldWheelDiameter: 14,
|
|
|
|
oldWheelWidth: 6.5,
|
|
|
|
oldWheelET: 37,
|
|
|
|
oldTyreWidth: 175,
|
|
|
|
oldTyreHeight: 65,
|
|
|
|
newWheelDiameter: 15,
|
|
|
|
newWheelWidth: 7,
|
|
|
|
newWheelET: 42,
|
|
|
|
newTyreWidth: 195,
|
|
|
|
newTyreHeight: 50,
|
|
|
|
};
|
|
|
|
|
|
|
|
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>
|
|
|
|
<h1>
|
|
|
|
Calculez vos futures jantes et futurs pneus en ligne
|
|
|
|
</h1>
|
|
|
|
<Table bordered>
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th></th>
|
|
|
|
<th>Diamètre</th>
|
|
|
|
<th>Jante</th>
|
|
|
|
<th>Pneu</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<th scope="row">Actuel</th>
|
|
|
|
<td>
|
|
|
|
<FormGroup>
|
|
|
|
<Input
|
|
|
|
type="select"
|
|
|
|
name="oldWheelDiameter"
|
|
|
|
value={this.state.oldWheelDiameter}
|
|
|
|
onChange={this.handleChange}>
|
|
|
|
{ this.state.sizes.map( item => (
|
|
|
|
<option value={item} key={`select_old_diametre_${item}`}>
|
|
|
|
{`${item}"`}
|
|
|
|
</option>
|
|
|
|
))}
|
|
|
|
</Input>
|
|
|
|
</FormGroup>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<Row>
|
|
|
|
<Col xs="12" md="6">
|
|
|
|
<FormGroup>
|
|
|
|
<Input
|
|
|
|
type="number"
|
|
|
|
name="oldWheelWidth"
|
|
|
|
placeholder="Largeur"
|
|
|
|
step="0.1"
|
|
|
|
value={this.state.oldWheelWidth}
|
|
|
|
onChange={this.handleChange}
|
|
|
|
/>
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
<Col xs="12" md="6">
|
|
|
|
<FormGroup>
|
|
|
|
<Input
|
|
|
|
type="number"
|
|
|
|
name="oldWheelET"
|
|
|
|
placeholder="ET"
|
|
|
|
step="1"
|
|
|
|
value={this.state.oldWheelET}
|
|
|
|
onChange={this.handleChange}
|
|
|
|
/>
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<Row>
|
|
|
|
<Col xs="12" md="6">
|
|
|
|
<FormGroup>
|
|
|
|
<Input
|
|
|
|
type="number"
|
|
|
|
name="oldTyreWidth"
|
|
|
|
placeholder="Largeur"
|
|
|
|
step="5"
|
|
|
|
value={this.state.oldTyreWidth}
|
|
|
|
onChange={this.handleChange}
|
|
|
|
/>
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
<Col xs="12" md="6">
|
|
|
|
<FormGroup>
|
|
|
|
<Input
|
|
|
|
type="number"
|
|
|
|
name="oldTyreHeight"
|
|
|
|
placeholder="Hauteur"
|
|
|
|
step="5"
|
|
|
|
value={this.state.oldTyreHeight}
|
|
|
|
onChange={this.handleChange}
|
|
|
|
/>
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<th scope="row">Nouveau</th>
|
|
|
|
<td>
|
|
|
|
<FormGroup>
|
|
|
|
<Input
|
|
|
|
type="select"
|
|
|
|
name="newWheelDiameter"
|
|
|
|
value={this.state.newWheelDiameter}
|
|
|
|
onChange={this.handleChange}>
|
|
|
|
{ this.state.sizes.map( item => (
|
|
|
|
<option value={item} key={`select_new_diametre_${item}`}>
|
|
|
|
{`${item}"`}
|
|
|
|
</option>
|
|
|
|
))}
|
|
|
|
</Input>
|
|
|
|
</FormGroup>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<Row>
|
|
|
|
<Col xs="12" md="6">
|
|
|
|
<FormGroup>
|
|
|
|
<Input
|
|
|
|
type="number"
|
|
|
|
name="newWheelWidth"
|
|
|
|
placeholder="Largeur"
|
|
|
|
step="0.1"
|
|
|
|
value={this.state.newWheelWidth}
|
|
|
|
onChange={this.handleChange}
|
|
|
|
/>
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
<Col xs="12" md="6">
|
|
|
|
<FormGroup>
|
|
|
|
<Input
|
|
|
|
type="number"
|
|
|
|
name="newWheelET"
|
|
|
|
placeholder="ET"
|
|
|
|
step="1"
|
|
|
|
value={this.state.newWheelET}
|
|
|
|
onChange={this.handleChange}
|
|
|
|
/>
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<Row>
|
|
|
|
<Col xs="12" md="6">
|
|
|
|
<FormGroup>
|
|
|
|
<Input
|
|
|
|
type="number"
|
|
|
|
name="newTyreWidth"
|
|
|
|
placeholder="Largeur"
|
|
|
|
step="5"
|
|
|
|
value={this.state.newTyreWidth}
|
|
|
|
onChange={this.handleChange}
|
|
|
|
/>
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
<Col xs="12" md="6">
|
|
|
|
<FormGroup>
|
|
|
|
<Input
|
|
|
|
type="number"
|
|
|
|
name="newTyreHeight"
|
|
|
|
placeholder="Hauteur"
|
|
|
|
step="5"
|
|
|
|
value={this.state.newTyreHeight}
|
|
|
|
onChange={this.handleChange}
|
|
|
|
/>
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
<tfoot>
|
|
|
|
<tr>
|
|
|
|
<td colSpan="4">
|
2018-07-30 08:18:41 +02:00
|
|
|
<Button onClick={this.submit}>Calculer</Button>
|
2018-07-29 10:26:45 +02:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tfoot>
|
|
|
|
</Table>
|
|
|
|
{
|
|
|
|
this.state.showResult ?
|
|
|
|
<Result
|
|
|
|
oldWheelDiameter={this.state.oldWheelDiameter}
|
|
|
|
oldWheelWidth={this.state.oldWheelWidth}
|
|
|
|
oldWheelET={this.state.oldWheelET}
|
|
|
|
oldTyreWidth={this.state.oldTyreWidth}
|
|
|
|
oldTyreHeight={this.state.oldTyreHeight}
|
|
|
|
newWheelDiameter={this.state.newWheelDiameter}
|
|
|
|
newWheelWidth={this.state.newWheelWidth}
|
|
|
|
newWheelET={this.state.newWheelET}
|
|
|
|
newTyreWidth={this.state.newTyreWidth}
|
|
|
|
newTyreHeight={this.state.newTyreHeight}
|
|
|
|
/>
|
|
|
|
:
|
|
|
|
(null)
|
|
|
|
}
|
2018-07-29 19:05:17 +02:00
|
|
|
<Explain />
|
2018-07-29 10:26:45 +02:00
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Wheels;
|