📦 NEW: FunctionForm type 'select'

api/assets/functions/main/convertDistance.js

@@ -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 });
     }

api/assets/functions/main/convertTemperature.js

@@ -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 });
     }

website/components/EditFormFunction.js

@@ -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">
+                            {(input.type === "select") &&
-                                <button type="button" onClick={handleRemoveInput} id={`remove-${index}`} className="btn btn-dark">Supprimer l'input</button>
+                                <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>
                     );
                 })}

website/components/FunctionForm.js

@@ -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>