tools/src/components/Resistor/index.js

import React, { Component } from 'react';
import {
  Container,
  Row,
  Col,
  FormGroup,
  Label,
  Input,
  Button,
  FormFeedback
} from 'reactstrap';
import Result from './result'

class Resistor extends Component {
  state = {};

  constructor(props) {
    super(props);

    this.state = {
      powerSource: 12,
      powerLed: 3.3,
      ledConsumption: 20,

      powerSourceError: false,
      powerLedError: false,
      ledConsumptionError: false,

      showResult: false,

      series: {
        //Source: https://www.positron-libre.com/cours/electronique/resistances/serie-resistance.php
        e24: [
          1,
          1.1,
          1.2,
          1.3,
          1.5,
          1.6,
          1.8,
          2.0,
          2.2,
          2.4,
          2.7,
          3.0,
          3.30,
          3.60,
          3.90,
          4.30,
          4.70,
          5.10,
          5.60,
          6.20,
          6.80,
          7.50,
          8.20,
          9.10
        ]
      },
      factors: [
        {
          factor: 0.01,
          colorLabel: 'Argent',
          color: '#ccc',
          factorLabel: 'x0.01'
        },
        {
          factor: 0.1,
          colorLabel: 'or',
          color: '#cd9932',
          factorLabel: 'x0.1'
        },
        {
          factor: 1,
          colorLabel: 'noir',
          color: '#000',
          factorLabel: 'x1'
        },
        {
          factor: 10,
          colorLabel: 'marron',
          color: '#663331',
          factorLabel: 'x10'
        },
        {
          factor: 100,
          colorLabel: 'rouge',
          color: '#fd0000',
          factorLabel: 'x100'
        },
        {
          factor: 1000,
          colorLabel: 'orange',
          color: '#ff6600',
          factorLabel: 'x1 k'
        },
        {
          factor: 10000,
          colorLabel: 'jaune',
          color: '#ffff00',
          factorLabel: 'x10 k'
        },
        {
          factor: 100000,
          colorLabel: 'vert',
          color: '#33cb33',
          factorLabel: 'x100 k'
        },
        {
          factor: 1000000,
          colorLabel: 'bleu',
          color: '#6666ff',
          factorLabel: 'x1 M'
        },
        {
          factor: 10000000,
          colorLabel: 'violet',
          color: '#cd66ff',
          factorLabel: 'x10 M'
        },
        {
          factor: 100000000,
          colorLabel: 'gris',
          color: '#939393',
          factorLabel: 'x100 M'
        },
        {
          factor: 1000000000,
          colorLabel: 'blanc',
          color: '#fff',
          factorLabel: 'x1 G'
        },
      ],
      byColor: [
        {
          colorLabel: 'black',
          color: '#000',
          value: 0
        },
        {
          colorLabel: 'brown',
          color: '#663331',
          value: 1
        },
        {
          colorLabel: 'red',
          color: '#fd0000',
          value: 2
        },
        {
          colorLabel: 'orange',
          color: '#ff6600',
          value: 3
        },
        {
          colorLabel: 'yellow',
          color: '#ffff00',
          value: 4
        },
        {
          colorLabel: 'green',
          color: '#33cb33',
          value: 5
        },
        {
          colorLabel: 'blue',
          color: '#6666ff',
          value: 6
        },
        {
          colorLabel: 'violet',
          color: '#cd66ff',
          value: 7
        },
        {
          colorLabel: 'grey',
          color: '#939393',
          value: 8
        },
        {
          colorLabel: 'white',
          color: '#fff',
          value: 9
        },
      ]
    }

    this.handleChange = this.handleChange.bind(this);
    this.checkForm = this.checkForm.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
    });
  }

  checkForm() {
    let isOk = true;
    let powerSourceError = false;
    let powerLedError = false;
    let ledConsumptionError = false;

    if ( this.state.powerSource <= 0 )
    {
      powerSourceError = true;
    }

    if ( this.state.powerLed <= 0 || this.state.powerLed > this.state.powerSource )
    {
      powerLedError = true;
    }

    if ( this.state.ledConsumption <= 0 )
    {
      ledConsumptionError = true;
    }

    if ( powerSourceError === true
      || powerLedError === true
      || ledConsumptionError === true
    ){
      isOk = false;
    }

    this.setState({
      powerSourceError,
      powerLedError,
      ledConsumptionError
    })

    return isOk;
  }

  submit() {
    let showResult = this.checkForm();

    console.log(showResult);

    this.setState({
      showResult
    })
  }

  render() {
    return (
      <Container>
        <h1>Calcul de la valeur d&#39;une résistance</h1>
        <Row>
          <Col xs="12" md="6">
            <Row>
              <Col xs="12">
                <FormGroup>
                  <Label for="powerSource">Alimentation</Label>
                  <Input
                    type="number"
                    id="powerSource"
                    name="powerSource"
                    placeholder="Alimentation (ex: 12V)"
                    step="0.1"
                    value={this.state.powerSource}
                    onChange={this.handleChange}
                    invalid={this.state.powerSourceError}
                  />
                  {this.state.powerSourceError ?
                    (<FormFeedback>Vous devez saisir un nombre positif</FormFeedback>)
                    : (null)
                  }
                </FormGroup>
              </Col>
            </Row>
            <Row>
              <Col xs="12">
                <FormGroup>
                  <Label for="powerLed">Tension max admissible par la led</Label>
                  <Input
                    type="number"
                    id="powerLed"
                    name="powerLed"
                    placeholder="ex: 3.3V"
                    step="0.1"
                    value={this.state.powerLed}
                    onChange={this.handleChange}
                    invalid={this.state.powerLedError}
                  />
                  {this.state.powerLedError ?
                    (<FormFeedback>Vous devez saisir un nombre positif et inférieur à votre alimentation</FormFeedback>)
                    : (null)
                  }
                </FormGroup>
              </Col>
            </Row>
            <Row>
              <Col xs="12">
                <FormGroup>
                  <Label for="ledConsumption">Consommation de la led (en mA)</Label>
                  <Input
                    type="number"
                    id="ledConsumption"
                    name="ledConsumption"
                    placeholder="20mA"
                    step="1"
                    value={this.state.ledConsumption}
                    onChange={this.handleChange}
                    invalid={this.state.ledConsumptionError}
                  />
                  {this.state.ledConsumptionError ?
                    (<FormFeedback>Vous devez saisir un nombre positif</FormFeedback>)
                    : (null)
                  }
                </FormGroup>
              </Col>
            </Row>
            <Row>
              <Col xs="12">
                <Button onClick={this.submit}>Calculer</Button>
              </Col>
            </Row>
          </Col>
          <Col xs="12" md="6">
            {
              this.state.showResult ?
              <Result
                powerSource={this.state.powerSource}
                powerLed={this.state.powerLed}
                ledConsumption={this.state.ledConsumption}
                series={this.state.series}
                factors={this.state.factors}
                colors={this.state.byColor}
                />
              :
              (null)
            }
          </Col>
        </Row>
      </Container>
    );
  }
}

export default Resistor