63 lines
1.6 KiB
JavaScript
63 lines
1.6 KiB
JavaScript
|
import React, { Component } from 'react'
|
||
|
|
import './Home.css'
|
||
|
|
import { Link } from 'react-router-dom'
|
||
|
|
import ReactPiwik from 'Components/Tracker' //TODO réintégrer Piwik
|
||
|
|
import { rules } from 'Engine/rules'
|
||
|
|
import { propEq, reject } from 'ramda'
|
||
|
|
|
||
|
|
export default class HomeEmbauche extends Component {
|
||
|
|
state = {
|
||
|
|
input: 'salaire de base'
|
||
|
|
}
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div id="home">
|
||
|
|
<div id="header">
|
||
|
|
<img
|
||
|
|
id="marianne"
|
||
|
|
src={require('../images/marianne.svg')}
|
||
|
|
alt="Un service de l'État français"
|
||
|
|
/>
|
||
|
|
<h1>Simulateurs d'embauche</h1>
|
||
|
|
</div>
|
||
|
|
<section id="selection">
|
||
|
|
<h2>Que voulez-vous faire ?</h2>
|
||
|
|
<p>Choisissez ce que vous allez saisir</p>
|
||
|
|
{this.renderInputList()}
|
||
|
|
<div id="conversionSymbol">↓</div>
|
||
|
|
<p>Choisissez ce que nous allons calculer</p>
|
||
|
|
{this.renderOutputList()}
|
||
|
|
<button>C'est parti !</button>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
renderInputList() {
|
||
|
|
let salaires = rules.filter(propEq('type', 'salaire'))
|
||
|
|
return (
|
||
|
|
<select onMouseDown={e => this.setState({input: e.target.value})}>
|
||
|
|
{salaires.map(s => (
|
||
|
|
<option key={s.name} value={s.name} selected={s.name === 'salaire de base'}>
|
||
|
|
{s.title || s.name}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
renderOutputList() {
|
||
|
|
let salaires = rules.filter(propEq('type', 'salaire'))
|
||
|
|
return (
|
||
|
|
<select multiple onMouseDown={e=>{
|
||
|
|
e.preventDefault()
|
||
|
|
e.target.selected = !e.target.selected
|
||
|
|
}}>
|
||
|
|
{salaires.map(s => (
|
||
|
|
<option key={s.name} value={s.name} disabled={s.name === this.state.input}>
|
||
|
|
{s.title || s.name}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|