77 servie button implementation

src/Components/Buttons/Buttons.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { useNavigate } from "react-router-dom";
 import { IoIosArrowDroprightCircle, IoIosArrowDropleftCircle, IoIosCheckmarkCircle } from "react-icons/io";
 
 /**
@@ -65,7 +66,8 @@ const GenericButton = ({
     invertOnClick,
     navigationPrev,
     navigationAfter,
-    handleSettingsDisplay
+    handleSettingsDisplay,
+    currentOrderId
 }) => {
     const [isInverted, setIsInverted] = useState(false);
 
@@ -77,14 +79,78 @@ const GenericButton = ({
         setIsInverted(false);
     };
 
+    const handleServed = (id) => {
+        const navigate = useNavigate();
+            fetch(
+                `http://${process.env.REACT_APP_BACKEND_URL}:${process.env.REACT_APP_BACKEND_PORT}/api/${process.env.REACT_APP_NBR_RESTAURANT}/orders/${id}`
+                , {headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+                }})
+                .then((response) => {
+                if (response.status === 401) {
+                    navigate("/", {state: {error: "Unauthorized access. Please log in."}});
+                    throw new Error("Unauthorized access. Please log in.");
+                }
+                return response.json();
+                })
+                .then((order) => {
+                if (order.food_ordered.every(food => food.is_ready === true)) {
+                    // Pas sur que delete completement soit la chose a faire mais on laisse ca la pour l'instant
+                    // fetch(
+                    //     `http://${process.env.REACT_APP_BACKEND_URL}:${process.env.REACT_APP_BACKEND_PORT}/api/${process.env.REACT_APP_NBR_RESTAURANT}/orders/${id}`
+                    //     , {
+                    //         method: 'DELETE',
+                    //         headers: {
+                    //         Authorization: `Bearer ${localStorage.getItem("token")}`,
+                    //     }
+                    //     })
+                    //     .then((response) => {
+                    //       if (response.status === 401) {
+                    //         navigate("/", {state: {error: "Unauthorized access. Please log in."}});
+                    //         throw new Error("Unauthorized access. Please log in.");
+                    //       }
+                    //     }
+                    // )
+                } else {
+                    order.food_ordered.forEach((food) => {
+                        if (!food.is_ready) {
+                            fetch(
+                                `http://${process.env.REACT_APP_BACKEND_URL}:${process.env.REACT_APP_BACKEND_PORT}/api/${process.env.REACT_APP_NBR_RESTAURANT}/orders/status/${food.id}`
+                                , {
+                                    method: 'PUT',
+                                    headers: {
+                                    Authorization: `Bearer ${localStorage.getItem("token")}`,
+                                }
+                                })
+                                .then((response) => {
+                                if (response.status === 401) {
+                                    navigate("/", {state: {error: "Unauthorized access. Please log in."}});
+                                    throw new Error("Unauthorized access. Please log in.");
+                                }
+                                })
+                                .catch((error) => {
+                                    console.error('An error occurred:', error.message);
+                                });
+                        }
+                    });
+                }
+            }
+        )
+        .catch((error) => {
+            console.error('An error occurred:', error.message);
+        });
+    };
+
     const handleClick = () => {
         if (setConfig) {
             setConfig(prevConfig => ({ ...prevConfig, enable: !prevConfig.enable }));
         }
+        if (label === "SERVIE")
+            handleServed(currentOrderId);
 
         if (label === "SUIVANT")
             navigationAfter();
-    
+
         if (label === "PRÉCÉDENT")
             navigationPrev();
 
@@ -135,8 +201,11 @@ GenericButton.propTypes = {
     navigationPrev: PropTypes.func, ///< Function to handle navigation order
     navigationAfter: PropTypes.func, ///< Function to handle navigation order
     handleSettingsDisplay: PropTypes.func, ///< Function to handle settings display
+    currentOrderId: PropTypes.number
 };
 
+export { GenericButton };
+
 /**
  * @brief Defines the button data, including icon, label, and any custom behavior.
  *
@@ -169,7 +238,7 @@ let buttonData = {
  *
  * @return {JSX.Element} A set of rendered buttons.
  */
-function ButtonSet({ buttons, setConfig, activeTab, updateActiveTab, navigationPrev, navigationAfter, handleSettingsDisplay }) {
+function ButtonSet({ buttons, setConfig, activeTab, updateActiveTab, navigationPrev, navigationAfter, handleSettingsDisplay, currentOrderId }) {
 
     return (
         <div className="flex w-full">
@@ -194,6 +263,7 @@ function ButtonSet({ buttons, setConfig, activeTab, updateActiveTab, navigationP
                         navigationPrev={navigationPrev}
                         navigationAfter={navigationAfter}
                         handleSettingsDisplay={handleSettingsDisplay}
+                        currentOrderId={currentOrderId}
                     />
                 );
             })}
@@ -209,6 +279,7 @@ ButtonSet.propTypes = {
     navigationPrev: PropTypes.func, ///< Function to handle navigation order
     navigationAfter: PropTypes.func, ///< Function to handle navigation order
     handleSettingsDisplay: PropTypes.func, ///< Function to handle settings display
+    currentOrderId: PropTypes.number, ///< Function to handle serving feature
 };
 
 export default ButtonSet;

src/Components/Footer/Footer.js

@@ -65,12 +65,12 @@ const NotConnected = () => (
  *
  * @return {JSX.Element} A JSX element representing the footer with buttons and connection state.
  */
-function Footer({ buttons, setConfig, activeTab, updateActiveTab, navigationPrev, navigationAfter, handleSettingsDisplay }) {
+function Footer({ buttons, setConfig, activeTab, updateActiveTab, navigationPrev, navigationAfter, handleSettingsDisplay, currentOrderId }) {
     const isConnected = true; // Connection status, assumed to be true for now
     const ConnectionStatus = isConnected ? Connected : NotConnected;
     return (
         <div className='w-full h-lf bg-kitchen-yellow flex flex-row justify-between'>
-            <ButtonSet buttons={buttons} setConfig={setConfig} activeTab={activeTab} updateActiveTab={updateActiveTab} navigationPrev={navigationPrev} navigationAfter={navigationAfter} handleSettingsDisplay={handleSettingsDisplay} />
+            <ButtonSet buttons={buttons} setConfig={setConfig} activeTab={activeTab} updateActiveTab={updateActiveTab} navigationPrev={navigationPrev} navigationAfter={navigationAfter} handleSettingsDisplay={handleSettingsDisplay} currentOrderId={currentOrderId}/>
             <ConnectionStatus />
         </div>
     );
@@ -84,6 +84,7 @@ Footer.propTypes = {
     activeTab: PropTypes.string, ///< Currently active tab
     updateActiveTab: PropTypes.func, ///< Function to handle tab changes
     handleSettingsDisplay: PropTypes.func, ///< Function to handle settings display
+    currentOrderId: PropTypes.number, ///< Function to handle serving feature
 };
 
 export default Footer;

src/Components/OrdersDisplay/OrdersDisplay.js

@@ -9,14 +9,14 @@ import PropTypes from "prop-types";
  * It manages the state for the number of orders, the orders waiting, and organizes
  * the display of orders into two lines based on their status.
  * Orders are fetched every 5 seconds.
- * 
+ *
  * @param {number} props.selectOrder - Index of the order be selected with button "suivant" and "precedent".
  * @param {func} props.setNbrOrder - Function for set the number of order for the selection.
  * @param {Boolean} orderAnnoncement - A boolean to determine if an order announcement is active.
  *
  * @returns {JSX.Element} The rendered component.
  */
-function OrdersDisplay({orderAnnoncement, selectOrder, setNbrOrder}) {
+function OrdersDisplay({orderAnnoncement, selectOrder, setNbrOrder, onSelectOrderId}) {
   const navigate = useNavigate();
   const [nbrOrders, setNbrOrders] = useState(0);
   const [nbrOrdersWaiting, setNbrOrdersWaiting] = useState(0);
@@ -44,7 +44,7 @@ function OrdersDisplay({orderAnnoncement, selectOrder, setNbrOrder}) {
     const getNbrColumns = (orderDetails) => {
       let nbrLines = 0;
       let nbrCol = 0;
-      
+
       orderDetails.food_ordered.map((food) => {
         nbrLines += 1;
         food.details.map(() => {
@@ -243,6 +243,14 @@ function OrdersDisplay({orderAnnoncement, selectOrder, setNbrOrder}) {
     selectOrderRef.current = selectOrder;
   }, [selectOrder]);
 
+  useEffect(() => {
+    const selectedOrder = ordersLine1.concat(ordersLine2)[selectOrder];
+    const selectedOrderId = selectedOrder ? selectedOrder.props.orderDetails.id : undefined;
+
+    onSelectOrderId(selectedOrderId);
+
+  }, [selectOrder, ordersLine1]);
+
   return (
     <div className="relative w-full h-full grid grid-rows-2 grid-cols-1">
       <div className="grid grid-cols-5 gap-4 mx-2 py-2 min-h-full">
@@ -269,7 +277,8 @@ function OrdersDisplay({orderAnnoncement, selectOrder, setNbrOrder}) {
 OrdersDisplay.propTypes = {
   orderAnnoncement: PropTypes.bool, //< A boolean to determine if an order announcement is active.
   selectOrder: PropTypes.number.isRequired, //< Index of the order be selected with button "suivant" and "precedent".
-  setNbrOrder: PropTypes.func //< Function for set the number of order for the selection.
+  setNbrOrder: PropTypes.func, //< Function for set the number of order for the selection.
+  onSelectOrderId: PropTypes.func.isRequired,
 };
 
 OrdersDisplay.defaultProps = {

src/Components/OrdersDisplay/OrdersDisplayPasse.js

@@ -16,7 +16,7 @@ import { useNavigate } from "react-router-dom";
  * @example
  * <OrdersDisplayPasse status="ready" selectOrder=0/>
  */
-function OrdersDisplayPasse({ status, selectOrder, setNbrOrder }) {
+function OrdersDisplayPasse({ status, selectOrder, setNbrOrder, onSelectOrderId }) {
   const navigate = useNavigate();
   const [nbrOrders, setNbrOrders] = useState(0);
   const [nbrOrdersWaiting, setNbrOrdersWaiting] = useState(0);
@@ -205,6 +205,14 @@ function OrdersDisplayPasse({ status, selectOrder, setNbrOrder }) {
     selectOrderRef.current = selectOrder;
   }, [selectOrder]);
 
+  useEffect(() => {
+    const selectedOrder = ordersLine1[selectOrder];
+    const selectedOrderId = selectedOrder ? selectedOrder.props.orderDetails.id : undefined;
+
+    onSelectOrderId(selectedOrderId);
+
+  }, [selectOrder, ordersLine1]);
+
   return (
     <div className="relative w-full h-full grid grid-rows-2 grid-cols-1">
       <div className="grid grid-cols-5 gap-4 mx-2 py-2 min-h-full">
@@ -227,7 +235,8 @@ function OrdersDisplayPasse({ status, selectOrder, setNbrOrder }) {
 OrdersDisplayPasse.propTypes = {
   status: PropTypes.string.isRequired,
   selectOrder: PropTypes.number.isRequired,
-  setNbrOrder: PropTypes.func
+  setNbrOrder: PropTypes.func,
+  onSelectOrderId: PropTypes.func
 };
 
 export default OrdersDisplayPasse;

src/Pages/Dashboard/DashboardCuisine.js

@@ -32,6 +32,7 @@ const formatDate = (date) => {
 function DashboardCuisine({ config, setConfig }) {
   const [currentTime, setCurrentTime] = useState(new Date());
   const [currentOrderIndex, setCurrentOrderIndex] = useState(0);
+  const [currentOrderId, setCurrentOrderId] = useState(undefined);
   const [nbrOrder, setNbrOrder] = useState(0);
   const [activeTab, setActiveTab] = useState("");
   const [displaySettings, setDisplaySettings] = useState(false);
@@ -104,7 +105,7 @@ function DashboardCuisine({ config, setConfig }) {
               screenOn={true}
             />
           ) : (
-            <OrdersDisplay selectOrder={currentOrderIndex} setNbrOrder={setNbrOrder} orderAnnoncement={orderAnnoncement}  />
+            <OrdersDisplay selectOrder={currentOrderIndex} setNbrOrder={setNbrOrder} orderAnnoncement={orderAnnoncement} onSelectOrderId={setCurrentOrderId} />
           )}
         </div>
         <Footer
@@ -114,6 +115,7 @@ function DashboardCuisine({ config, setConfig }) {
           navigationPrev={handleNavigationPrev}
           navigationAfter={handleNavigationAfter}
           handleSettingsDisplay={handleSettingsDisplay}
+          currentOrderId={currentOrderId}
         />
       </div>
     );
@@ -139,10 +141,10 @@ function DashboardCuisine({ config, setConfig }) {
             </div>
           )}
         </div>
-        <Footer 
-          buttons={["activer", "", "", "", "", "reglage"]} 
-          setConfig={setConfig} 
-          activeTab={activeTab} 
+        <Footer
+          buttons={["activer", "", "", "", "", "reglage"]}
+          setConfig={setConfig}
+          activeTab={activeTab}
           updateActiveTab={updateActiveTab}
           handleSettingsDisplay={handleSettingsDisplay}
         />

src/Pages/Dashboard/DashboardPasse.js

@@ -28,6 +28,7 @@ const formatDate = (date) => {
 function DashboardPasse() {
   const [currentTime, setCurrentTime] = useState(new Date());
   const [currentOrderIndex, setCurrentOrderIndex] = useState(0);
+  const [currentOrderId, setCurrentOrderId] = useState(undefined);
   const [nbrOrder, setNbrOrder] = useState(0);
   const [activeTab, setActiveTab] = useState("");
 
@@ -68,15 +69,16 @@ function DashboardPasse() {
       <Header textLeft="time" textCenter="Passe" textRight={formatDate(currentTime)} />
       <div className='w-full h-lb grid grid-cols-[5%_1fr] grid-rows-2 gap-0.5 bg-kitchen-blue'>
         <div className="col-span-1 row-span-2"><LeftSection /></div>
-        <div className="col-span-1 row-span-1 bg-white"><OrdersDisplayPasse status={"ready"} selectOrder={currentOrderIndex} setNbrOrder={setNbrOrder} /></div>
-        <div className="col-span-1 row-span-1 bg-white"><OrdersDisplayPasse status={"pending"} selectOrder={-1} setNbrOrder={undefined} /></div>
+        <div className="col-span-1 row-span-1 bg-white"><OrdersDisplayPasse status={"ready"} selectOrder={currentOrderIndex} setNbrOrder={setNbrOrder} onSelectOrderId={setCurrentOrderId} /></div>
+        <div className="col-span-1 row-span-1 bg-white"><OrdersDisplayPasse status={"pending"} selectOrder={-1} setNbrOrder={undefined} onSelectOrderId={setCurrentOrderId} /></div>
       </div>
       <Footer
         buttons={["servie", "precedent", "suivant", "rappel", "statistique", "reglage"]}
         navigationPrev={handleNavigationPrev}
         navigationAfter={handleNavigationAfter}
-        activeTab={activeTab} 
+        activeTab={activeTab}
         updateActiveTab={updateActiveTab}
+        currentOrderId={currentOrderId}
       />
     </div>
   );