theoludwig/FunctionProject
theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

📦 NEW: FunctionForm type 'select'

Browse Source
This commit is contained in:
Divlo 2020-04-21 18:03:16 +02:00
parent 25582e4cc7
commit 88e4e8c0cc
4 changed files with 105 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api/assets/functions/main/convertDistance.js
View File

@ -21,7 +21,7 @@ function convertDistance(firstValue, unitFirstValue, unitFinalValue) {
const result = firstValue * Math.pow(10, difference);
return {
result,
resultHTML: `<p>Conversion de longueur : ${formatNumberResult(firstValue)} ${unitFirstValue} = ${formatNumberResult(result)} ${unitFinalValue}</p>`
resultHTML: `<p>${formatNumberResult(firstValue)} ${unitFirstValue} = ${formatNumberResult(result)} ${unitFinalValue}</p>`
};
}
return false;
@ -37,7 +37,7 @@ module.exports = convertDistanceOutput = ({ res, next }, argsObject) => {
}
// Si ce n'est pas un nombre
number = parseInt(number);
number = parseFloat(number);
if (isNaN(number)) {
return errorHandling(next, { message: "Veuillez rentré un nombre valide.", statusCode: 400 });
}

6
api/assets/functions/main/convertTemperature.js
View File

@ -22,7 +22,7 @@ function convertTemperature(degree, unit) {
}
return {
result: temperatureValue,
resultHTML: `<p>${formatNumberResult(temperatureValue)} ${unit}</p>`
resultHTML: `<p>${formatNumberResult(degree)} ${(unit === '°C') ? "°F" : "°C"} = ${formatNumberResult(temperatureValue)} ${unit}</p>`
};
}
@ -31,12 +31,12 @@ module.exports = convertTemperatureOutput = ({ res, next }, argsObject) => {
let { degree, unitToConvert } = argsObject;
// S'il n'y a pas les champs obligatoire
if (!(degree && unit)) {
if (!(degree && unitToConvert)) {
return errorHandling(next, requiredFields);
}
// Si ce n'est pas un nombre
degree = parseInt(degree);
degree = parseFloat(degree);
if (isNaN(degree)) {
return errorHandling(next, { message: "Veuillez rentré un nombre valide.", statusCode: 400 });
}

78
website/components/EditFormFunction.js
View File

@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, Fragment } from 'react';
import api from '../utils/api';
import 'notyf/notyf.min.css';
@ -12,11 +12,30 @@ const EditFormFunction = (props) => {
setInputsArray(newInputsArray);
}
const addOption = (event) => {
const newInputsArray = [...inputsArray];
const index = event.target.id.split('-')[1];
const inputObject = newInputsArray[index];
inputObject.options.push({ name: "", value: "" });
setInputsArray(newInputsArray);
}
const handleChangeOption = (inputIndex, optionIndex, event) => {
const newInputsArray = [...inputsArray];
const inputObject = newInputsArray[inputIndex];
const optionObject = inputObject.options[optionIndex];
optionObject[event.target.name] = event.target.value;
setInputsArray(newInputsArray);
}
const handleChangeInput = (event) => {
const newInputsArray = [...inputsArray];
const index = event.target.id.split('-')[1];
const inputObject = newInputsArray[index];
inputObject[event.target.name] = event.target.value;
if (event.target.value === "select") {
inputObject.options = [];
}
setInputsArray(newInputsArray);
}
@ -44,6 +63,14 @@ const EditFormFunction = (props) => {
setInputsArray(newInputsArray);
}
const handleRemoveOption = (inputIndex, optionIndex) => {
const newInputsArray = [...inputsArray];
const inputObject = newInputsArray[inputIndex];
const optionsArray = inputObject.options;
optionsArray.splice(optionIndex, 1);
setInputsArray(newInputsArray);
}
return (
<div className="container-fluid">
@ -58,28 +85,63 @@ const EditFormFunction = (props) => {
{inputsArray.map((input, index) => {
return (
<div key={index} className="form-group Admin__Input-group">
<label className="form-label" htmlFor="nameInput1">Nom de l'input :</label>
<div className="text-center">
<button type="button" onClick={handleRemoveInput} id={`remove-${index}`} className="btn btn-dark">Supprimer l'input</button>
</div>
<label className="form-label" htmlFor={`name-${index}`}>Nom de l'input :</label>
<input value={input.name} onChange={handleChangeInput} type="text" name="name" id={`name-${index}`} className="form-control" placeholder="(e.g : cityName)" />
<br/>
<label className="form-label" htmlFor="labelInput1">Label :</label>
<label className="form-label" htmlFor={`label-${index}`}>Label :</label>
<input value={input.label} onChange={handleChangeInput} type="text" name="label" id={`label-${index}`} className="form-control" placeholder="(e.g : Entrez le nom d'une ville :)" />
<br/>
<label className="form-label" htmlFor="placeholderInput1">Placeholder :</label>
{(input.type !== "select") &&
<Fragment>
<label className="form-label" htmlFor={`placeholder-${index}`}>Placeholder :</label>
<input value={input.placeholder} onChange={handleChangeInput} type="text" name="placeholder" id={`placeholder-${index}`} className="form-control" placeholder="(e.g : Paris, FR)" />
<br/>
</Fragment>
}
<label className="form-label" htmlFor="typeInput1">Type :</label>
<label className="form-label" htmlFor={`type-${index}`}>Type :</label>
<select value={input.type} onChange={handleChangeInput} name="type" id={`type-${index}`} className="form-control">
<option value="text">text</option>
<option value="number">number</option>
<option value="integer">Number integer</option>
<option value="float">Number float</option>
<option value="calendar">calendar</option>
<option value="select">select</option>
</select>
<div className="form-group text-center">
<button type="button" onClick={handleRemoveInput} id={`remove-${index}`} className="btn btn-dark">Supprimer l'input</button>
{(input.type === "select") &&
<div style={{ marginTop: '50px' }}>
<label className="form-label">Options :</label>
{input.options.map((option, optionIndex) => {
return (
<div key={optionIndex} style={{ margin: "0 0 30px 0" }} className="form-group Admin__Input-group">
<div className="text-center">
<button type="button" onClick={() => handleRemoveOption(index, optionIndex)} className="btn btn-dark">Supprimer l'option</button>
</div>
<label className="form-label" htmlFor={`optionName-${optionIndex}-${index}`}>Nom de l'option</label>
<input onChange={(event) => handleChangeOption(index, optionIndex, event)} value={option.name} id={`optionName-${optionIndex}-${index}`} name="name" type="text"className="form-control" placeholder="Nom de l'option" />
<br />
<label className="form-label" htmlFor={`optionValue-${optionIndex}-${index}`}>Valeur de l'option</label>
<input onChange={(event) => handleChangeOption(index, optionIndex, event)} value={option.value} id={`optionValue-${optionIndex}-${index}`} name="value" type="text"className="form-control" placeholder="Valeur de l'option" />
</div>
);
})}
<div className="form-group text-center">
<button id={`optionAdd-${index}`} onClick={addOption} type="button" className="btn btn-dark">Ajouter une option</button>
</div>
</div>
}
</div>
);
})}

24
website/components/FunctionForm.js
View File

@ -49,11 +49,18 @@ const FunctionForm = (props) => {
{props.inputsArray.map((input, index) => {
switch (input.type) {
case "text":
case "number":
return (
<div key={index} className="form-group">
<label className="form-label" htmlFor={input.name}>{input.label}</label>
<input onChange={handleChange} type={input.type} name={input.name} id={input.name} placeholder={input.placeholder} className="form-control" />
<input onChange={handleChange} type="text" name={input.name} id={input.name} placeholder={input.placeholder} className="form-control" />
</div>
);
case "integer":
case "float":
return (
<div key={index} className="form-group">
<label className="form-label" htmlFor={input.name}>{input.label}</label>
<input onChange={handleChange} type="number" step={(input.type === "integer") ? "1" : "0.01"} name={input.name} id={input.name} placeholder={input.placeholder} className="form-control" />
</div>
);
case "calendar":
@ -104,6 +111,19 @@ const FunctionForm = (props) => {
/>
</div>
);
case "select":
return (
<div key={index} className="form-group">
<label className="form-label" htmlFor={input.name}>{input.label}</label>
<select onChange={handleChange} name={input.name} id={input.name} value={inputState[input.name] || input.options[0]} className="form-control">
{input.options.map((option, optionIndex) => {
return (
<option key={optionIndex} value={option.value}>{option.name}</option>
);
})}
</select>
</div>
);
default:
return (
<p>Erreur, l'input n'est pas valide...</p>