43 documentation dev front pos

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) =>

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

src/Components/CurrentCommand/CurrentCommand.js

@@ -42,6 +42,14 @@ const Stop = () => (
     </div>
 )
 
+/**
+ * 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 }) => (
     <div className={`w-full h-auto p-2 ${border ? 'border-t border-t-kitchen-yellow' : ''}`}>
         {order.plat && order.price && <Food name={order.plat} price={order.price} />}
@@ -56,6 +64,14 @@ const Order = ({ order, border, config }) => (
     </div>
 )
 
+/**
+ * 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 }) => (
     <div className={!config.payement ? 'w-full flex flex-col overflow-auto scrollbar-hide' : 'w-full min-h-[h-current-cmd-content] flex flex-col overflow-auto scrollbar-hide border-b-4 border-kitchen-yellow box-border border-solid'}>
         {
@@ -81,6 +97,18 @@ const Content = ({ orders, stop, config }) => (
     </div>
 )
 
+/**
+ * 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 (
         <div className='h-full w-1/4 bg-kitchen-blue float-right flex flex-col justify-between'>

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

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) =>
         <FoodDetail key={elem.id} name={elem.name} data={elem.data} multiple={elem.multiple} orderDetails={orderDetails} setOrderDetails={setOrderDetails} />
     );

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,13 +48,15 @@ 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);
                     let temp = detailObj.list;
                     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) =>
         <div
             key={elem.name}

src/Components/FoodElem/FoodFooter/FoodFooter.js

@@ -3,12 +3,24 @@ import PropTypes from 'prop-types';
 
 import { useNavigate, useLocation } from "react-router-dom";
 
+/**
+ * Footer Component : 
+ *  
+ * @component FoodFooter
+ * @param {Number} id Id of the current food
+ * @param {String} name Name of the current food
+ * @param {Number} price Price of the current food
+ * @param {function} setOrders state function used to update the current order when the food is added
+ * @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 FoodFooter({id, name, price, setOrders, orderDetails, setOrderDetails}) {
 
     const navigate = useNavigate();
     const location = useLocation();
     const { pathname } = location;
 
+    //function used to reset the current order details and redirects to the dashboard page, used by the "Annuler" button
     const handleBackClick = () => {
         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);

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 (

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) =>
         <div key={elem.id} className={`${elem.color} border border-white h-20 col-span-1 flex content-center ${elem.selected ? "shadow-button" : ""}`} >
             <button className="h-full w-full" onClick={() => handleClick(elem.name)}>