diff --git a/src/Components/Calculator/Calculator.js b/src/Components/Calculator/Calculator.js
index 60b2ace..bd86b55 100644
--- a/src/Components/Calculator/Calculator.js
+++ b/src/Components/Calculator/Calculator.js
@@ -34,10 +34,20 @@ function ButtonBox({ children }) {
)
}
+/**
+ * Component : Component displaying a calculator, handling all transactions and calculations of when paying the current POS order
+ *
+ * @component Calculator
+ * @param {Number} priceLess full price of the current order
+ * @param {Function} setPriceLess state function to update full price of the current order
+ * @param {[Number]} payList List of all current transactions
+ * @param {Function} setPayList state function to update the payList
+ */
function Calculator({ priceLess, setPriceLess, payList, setPayList }) {
const [calc, setCalc] = useState({ sign: "", num: 0, res: 0 });
const [display, setDisplay] = useState(false);
+ //displays the calculator, with the current price
const displayCalc = useCallback(() => {
let elem = document.getElementsByClassName('select-mod')[0];
if (elem && calc.res !== "Erreur" && priceLess > 0) {
@@ -54,6 +64,7 @@ function Calculator({ priceLess, setPriceLess, payList, setPayList }) {
displayCalc();
}, [display, displayCalc]);
+ //handles all numeric user inputs
const numClickHandler = (e) => {
e.preventDefault();
const value = e.target.innerHTML;
@@ -72,6 +83,7 @@ function Calculator({ priceLess, setPriceLess, payList, setPayList }) {
}
};
+ //handles all comma user inputs
const commaClickHandler = (e) => {
e.preventDefault();
const value = e.target.innerHTML;
@@ -82,6 +94,7 @@ function Calculator({ priceLess, setPriceLess, payList, setPayList }) {
});
};
+ //handles all calculation signs user inputs
const signClickHandler = (e) => {
e.preventDefault();
const value = e.target.innerHTML;
@@ -94,6 +107,7 @@ function Calculator({ priceLess, setPriceLess, payList, setPayList }) {
});
};
+ //handles the calculation
const equalsClickHandler = () => {
if (calc.sign && calc.num) {
const math = (a, b, sign) =>
diff --git a/src/Components/CategoryButton/CategoryButton.js b/src/Components/CategoryButton/CategoryButton.js
index e50e4d1..7a47361 100644
--- a/src/Components/CategoryButton/CategoryButton.js
+++ b/src/Components/CategoryButton/CategoryButton.js
@@ -4,13 +4,25 @@ import PropTypes from 'prop-types';
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
+/**
+ * Component : Component handling a specific category, redirect to a page with all food associated to it
+ *
+ * @component CategoryButton
+ * @param {Number} id id of the specific category
+ * @param {String} name name of a specific category
+ * @param {String} color color code of the category
+ * @param {[Object]} food Object Array with all food of the category
+ * @param {String} route route used for navigation of the food page
+ */
function CategoryButton({id, name, color, food, route}) {
const navigate = useNavigate();
+ //sets in local storage the foods of the category, to get them in each specific food pages
useEffect(() => {
localStorage.setItem("food_category/"+id, JSON.stringify(food));
}, [id, food]);
+ //navigates to the category page
const handleClick = () => {
navigate(route + id, {state: {food: food, color: color}})
}
diff --git a/src/Components/CurrentCommand/CurrentCommand.js b/src/Components/CurrentCommand/CurrentCommand.js
index befb077..05dad2f 100644
--- a/src/Components/CurrentCommand/CurrentCommand.js
+++ b/src/Components/CurrentCommand/CurrentCommand.js
@@ -42,6 +42,14 @@ const Stop = () => (
)
+/**
+ * Component : Component used by the Content component. Displays the content of the related order
+ *
+ * @component Order
+ * @param {Object} orders current order
+ * @param {Boolean} border boolean used to separate orders
+ * @param {Object} config state of the current order
+ */
const Order = ({ order, border, config }) => (
)
+/**
+ * Component : Component used by the CurrentCommand. Displays the content of the current orders
+ *
+ * @component Content
+ * @param {[Object]} orders arrays of current order
+ * @param {Boolean} stop boolean used to know if the order has a stop
+ * @param {Object} config state of the current order
+ */
const Content = ({ orders, stop, config }) => (
)
+/**
+ * Component : Footer Component of the CurrentCommand component. Displays the informations of the command, not the content, and handles PUT databases calls when the order is complete.
+ *
+ * @component Footer
+ * @param {Object} config state of the current order
+ * @param {[Object]} orders arrays of current order
+ * @param {Function} setOrders state function to update the current orders
+ * @param {Function} setConfig state function to update the config of the current order
+ * @param {Number} price full price of the current order
+ * @param {Number} priceLess full price of the current order
+ * @param {[Number]} payList List of all current transactions
+ */
function Footer({ config, orders, setOrders, setConfig, price, priceLess, payList }) {
const navigate = useNavigate();
@@ -192,6 +220,18 @@ function Footer({ config, orders, setOrders, setConfig, price, priceLess, payLis
}
}
+/**
+ * Component : Main Component displaying all the information of the current command.
+ *
+ * @component CurrentCommand
+ * @param {[Object]} orders arrays of current order
+ * @param {Object} config state of the current order
+ * @param {Function} setConfig state function to update the config of the current order
+ * @param {Function} setOrders state function to update the current orders
+ * @param {Number} price full price of the current order
+ * @param {Number} priceLess full price of the current order
+ * @param {[Number]} payList List of all current transactions
+ */
function Currentcommand({ orders, config, setConfig, setOrders, price, priceLess, payList }) {
return (
diff --git a/src/Components/FoodButton/FoodButton.js b/src/Components/FoodButton/FoodButton.js
index 2826e9c..ca19fa8 100644
--- a/src/Components/FoodButton/FoodButton.js
+++ b/src/Components/FoodButton/FoodButton.js
@@ -5,9 +5,20 @@ import { useNavigate } from "react-router-dom";
import FoodStick from '../FoodStick/FoodStick';
+/**
+ * Component : Component handling a specific detail of a food, user inputs, and displays the choices
+ *
+ * @component FoodButton
+ * @param {Number} id id of the specific food
+ * @param {String} name name of a specific food
+ * @param {String} color color code of the current food category
+ * @param {Object} food Object with all selected food details
+ * @param {String} route route containing the category of the food, used for navigation
+ */
function FoodButton({id, name, color, food, route}) {
const navigate = useNavigate();
+ //called when clicked on a specific food, redirects to the food page
const handleClick = () => {
navigate(route + id, {state: {id: id, food: food, color: color}})
}
diff --git a/src/Components/FoodElem/DetailList/DetailList.js b/src/Components/FoodElem/DetailList/DetailList.js
index a6e47d4..1ed7656 100644
--- a/src/Components/FoodElem/DetailList/DetailList.js
+++ b/src/Components/FoodElem/DetailList/DetailList.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
import FoodDetail from "../FoodDetail/FoodDetail";
+/**
+ * Component : Component used to displays all the details of the current food
+ *
+ * @component DetailList
+ * @param {[Object]} details Object Array of all details of the current food
+ * @param {Object} orderDetails Object used to persist detail and ingredient choices of a current food
+ * @param {function} setOrderDetails state function to update the orderDetails object
+ */
function DetailList({details, orderDetails, setOrderDetails}) {
+ //map function to display all details of a food as a FoodDetail Component
const detailsList = details.map((elem) =>
);
diff --git a/src/Components/FoodElem/FoodDetail/FoodDetail.js b/src/Components/FoodElem/FoodDetail/FoodDetail.js
index efb2564..7b097ff 100644
--- a/src/Components/FoodElem/FoodDetail/FoodDetail.js
+++ b/src/Components/FoodElem/FoodDetail/FoodDetail.js
@@ -3,9 +3,21 @@ import PropTypes from 'prop-types';
import { useState } from "react";
+/**
+ * Component : Component handling a specific detail of a food, user inputs, and displays the choices
+ *
+ * @component FoodDetail
+ * @param {String} name Name of the food detail
+ * @param {[Object]} data Object Array of the current detail information of a food
+ * @param {Object} multiple Boolean, used to know if multiple detail options can be chosen
+ * @param {Object} orderDetails Object used to persist detail and ingredient choices of a current food
+ * @param {function} setOrderDetails state function to update the orderDetails object
+ */
function FoodDetail({name, data, multiple, orderDetails, setOrderDetails}) {
let detailObj = {name: name, list: []};
+ //map function to parse the data of a detail, to add a button color and a boolean
+ //uses current order details to update data, preventing resets between page change
const [fullData, setFullData] = useState(data.map((elem => {
let color = 'bg-kitchen-food-detail';
let selected = false;
@@ -22,7 +34,8 @@ function FoodDetail({name, data, multiple, orderDetails, setOrderDetails}) {
}
})));
-
+ //function called when a choice of a detail is clicked :
+ //updates the button based on user inputs
const handleClick = (name) => {
setFullData(null)
setFullData(fullData.map((data => {
@@ -35,6 +48,7 @@ function FoodDetail({name, data, multiple, orderDetails, setOrderDetails}) {
if (data.name === name) {
selected = data.selected ? false : true;
let copy = orderDetails.details;
+ //adds the user choices to an object, else remove it
if (selected) {
color = 'bg-kitchen-food-detail-selected';
copy = copy.filter(e => e.name === detailObj.name);
@@ -42,6 +56,7 @@ function FoodDetail({name, data, multiple, orderDetails, setOrderDetails}) {
if (copy.length !== 0) {
temp = copy[0].list;
}
+ //If the detail is a single choice, will erase previous one, otherwise add it to a list
if (multiple === false) {
temp = [data.name];
} else {
@@ -58,6 +73,7 @@ function FoodDetail({name, data, multiple, orderDetails, setOrderDetails}) {
}
color = 'bg-kitchen-food-detail';
}
+ //adds the new detail to the current order
let arr = orderDetails.details;
arr = arr.filter(e => e.name !== detailObj.name);
let sups = orderDetails.sups;
@@ -72,6 +88,7 @@ function FoodDetail({name, data, multiple, orderDetails, setOrderDetails}) {
})))
}
+ //map function to display all choices of a detail
const choice = fullData.map((elem) =>
{
setOrderDetails({details: [], sups: {current: 0, list: []}});
if (pathname.endsWith("modification")) {
@@ -18,6 +30,7 @@ function FoodFooter({id, name, price, setOrders, orderDetails, setOrderDetails})
}
}
+ //formats the detail list of a selected food
const getAllDetails = (base) => {
let res = []
base.forEach((detail) => {
@@ -28,6 +41,7 @@ function FoodFooter({id, name, price, setOrders, orderDetails, setOrderDetails})
return res;
}
+ //formats the ingredient list of a selected food
const getAllSups = (base) => {
let res = []
base.list.forEach((e) => {
@@ -48,6 +62,7 @@ function FoodFooter({id, name, price, setOrders, orderDetails, setOrderDetails})
return res;
}
+ //function used to add the selected food to the current order and redirects to the dashboard page, used by the "Ajouter" button
const addToOrder = () => {
let details = getAllDetails(orderDetails.details);
let sups = getAllSups(orderDetails.sups);
diff --git a/src/Components/FoodElem/FoodHeader/FoodHeader.js b/src/Components/FoodElem/FoodHeader/FoodHeader.js
index 6a99cd2..ef28845 100644
--- a/src/Components/FoodElem/FoodHeader/FoodHeader.js
+++ b/src/Components/FoodElem/FoodHeader/FoodHeader.js
@@ -3,6 +3,14 @@ import PropTypes from 'prop-types';
import FoodStick from '../../FoodStick/FoodStick';
+/**
+ * Header Component : Header Component of the food page, displays the relevant information of the selected food
+ *
+ * @component FoodHeader
+ * @param {String} name Name of the current food
+ * @param {Number} price Price of the current food
+ * @param {String} color Color code of the current food category, used by the FoodStick
+ */
function FoodHeader({name, price, color}) {
return (
diff --git a/src/Components/FoodElem/Ingredientlist/IngredientList.js b/src/Components/FoodElem/Ingredientlist/IngredientList.js
index f9d4bb7..f0f039c 100644
--- a/src/Components/FoodElem/Ingredientlist/IngredientList.js
+++ b/src/Components/FoodElem/Ingredientlist/IngredientList.js
@@ -1,9 +1,21 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
+/**
+ * Component : Component handling and displaying all user input regarding ingredient choices and changes of the selected food
+ *
+ * @component IngredientList
+ * @param {[Object]} data Object Array of the ingredients of the current food
+ * @param {Object} orderDetails Object used to persist detail and ingredient choices of a current food
+ * @param {function} setOrderDetails state function to update the orderDetails object
+ * @param {Object} buttonSelected Object containing the information of the current selected button
+ * @param {function} setButtonSelected state function to update all selected button based on the current food choices
+ */
function IngredientList({data, orderDetails, setOrderDetails, buttonSelected, setButtonSelected}) {
let current = {value: "", done: false};
+
+ // useState to map the ingredients of the current food, adding them a color for the button, and a boolean to handle user input
const [fullData, setFullData] = useState(data.map((elem => {
return {
id: elem.id,
@@ -13,6 +25,7 @@ function IngredientList({data, orderDetails, setOrderDetails, buttonSelected, se
}
})));
+ // useEffect to update the color and boolean of the ingredient buttons based on their previous state, to handle changes between different screen
useEffect(() => {
setFullData(prevFullData => {
return prevFullData.map((data => {
@@ -35,17 +48,23 @@ function IngredientList({data, orderDetails, setOrderDetails, buttonSelected, se
})
}, [buttonSelected])
-
+ //function called based on ingredient button clicked :
+ //updates the ingredient button list based on user input
+ //updates the current order details with the ingredient changes
const handleClick = (name) => {
setFullData(null)
setFullData(fullData.map((data => {
let color = data.color;
let selected = data.selected;
+ //Will update order details if a button from the IngredientsButton component was selected
if (data.name === name && buttonSelected.active === true) {
selected = data.selected ? false : true;
let copy = orderDetails.sups;
+ //If an ingredient button is selected, this function will add it, otherwise remove it
if (selected) {
+ //conditions to handle the start of the list of choices
if (copy.list.length === copy.current + 1) {
+ //Will only add the ingredients if a choice was previously selected without an ingredient
if (copy.list[copy.current].done === false) {
current.value = copy.list[copy.current].value + " " + data.name;
current.done = true;
@@ -63,8 +82,10 @@ function IngredientList({data, orderDetails, setOrderDetails, buttonSelected, se
setOrderDetails({details: orderDetails.details, sups: copy});
}
}
+ //Updates button states for display
setButtonSelected({active: buttonSelected.active, same: true});
color = 'bg-kitchen-food-detail-selected';
+ //removes ingredient if the button was previously selected
} else {
let last = copy.list[copy.list.length - 1].value;
let mods = last.split(" ");
@@ -82,6 +103,7 @@ function IngredientList({data, orderDetails, setOrderDetails, buttonSelected, se
})))
}
+ //map to display a button for each ingredient of a food
const choice = fullData.map((elem) =>