Broad casting system

client/src/components/admin-customer/Banner.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { AiOutlineClose } from 'react-icons/ai'
+
+const Banner = ({message, onClose}) => {
+    return (
+        <div className='bg-white rounded-sm fixed inset-0 h-[10%] shadow-xl'>
+            <div className='flex justify-center'>
+                <p>{message}</p>
+            </div>
+            <div className='flex mt-10 justify-center'>
+                <AiOutlineClose onClick={onClose} role='button' size={20}/>
+            </div>
+        </div>
+    )
+};
+export default Banner;

client/src/components/admin-customer/BroadcastModal.jsx

@@ -0,0 +1,37 @@
+import React, {useState} from 'react';
+import { AiOutlineClose } from 'react-icons/ai'
+
+const BroadcastModal = ({ isOpen, onClose}) => {
+    //State for storing the message
+    const [announcement, setAnnouncement] = useState('');
+    const [displayAnnouncement, setDisplayAnnouncement] = useState(true);
+    //set announcement to whatever user inputs in the text area
+    const handleChange = (e) => {
+        setAnnouncement(e.target.value)
+    }
+    if (!isOpen) return null;
+    return (
+        <div className="fixed inset-0 flex items-center justify-center">
+            <div className="bg-white w-[70%] h-[70%] p-3 rounded-[25px] shadow-lg flex flex-col">
+                <div className='flex justify-end fixed'>
+                    {/*Button to close the modal*/}
+                    <AiOutlineClose onClick={onClose} role='button' size={20} />
+                </div>
+                {/*Text Area for Admin to input the announcement*/}
+                 <textarea 
+                    className='mt-12 mx-auto w-[90%] h-[80%] flex justify-center border border-gray-100 rounded-md shadow-md'
+                    value={announcement}
+                    onChange={handleChange}
+                    placeholder='Enter your message here'
+                 />
+                 {/*Button for Admin to release the announcement*/}
+                 <button 
+                    className='mt-3 mx-auto bg-gray-300 w-[90%] h-12 shadow-lg rounded-md'
+                  >
+                    Release Message
+                </button>
+            </div>
+        </div>
+    )
+}
+export default BroadcastModal;

client/src/components/admin-customer/BroadcastingSystem.jsx

@@ -0,0 +1,21 @@
+import React, {useState} from 'react';
+import BroadcastModal from './BroadcastModal';
+const BroadcastingSystem = () => {
+  const [displayModal, setDisplayModal] = useState(false);
+  const openModal = () => {
+    setDisplayModal(true);
+  }
+  const closeModal = () => {
+    setDisplayModal(false);
+  }
+  return (
+    <div>
+      <div className='flex h-screen items-center justify-center text-xl'>
+        <button className="bg-white w-[90%] h-[70%] rounded-lg overflow-hidden shadow-md" onClick={openModal}>Broadcast</button>
+      </div>
+      <BroadcastModal isOpen={displayModal} onClose={closeModal}/>
+    </div>
+  );
+};
+
+export default BroadcastingSystem;

client/src/components/shoppingCart.jsx

@@ -35,6 +35,7 @@ const ShoppingCart = ({ orderNum, tableNum, date, cartItems, setCartItems, WebSo
     const [subTotal, setSubTotal] = useState(0);
     const [total, setTotal] = useState(0);
     const [tax, setTax] = useState(0);
+    const [help, setHelp] = useState(true);
     useEffect(() => {
         const sum = cartItems.reduce((accu, cartItem) => {
             return accu + cartItem.itemPrice * cartItem.itemCount;

client/src/pages/admin-customer.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import AdminNavbar from '../components/adminNavbar'
+import BroadcastingSystem from '../components/admin-customer/BroadcastingSystem';
 
 const Admin_customer = (props) => {
     const { WebSocketService, setPage } = props;
@@ -10,7 +11,7 @@ const Admin_customer = (props) => {
                 <div className="w-[80%] h-screen">
                     <div className='flex flex-col'>
                         <div className='text-center mt-27 text-black font-Montserrat text-4xl font-bold py-6'>Customer</div>
-                        <div>{/* Component */}</div>
+                        <div><BroadcastingSystem/></div>
                     </div>
                 </div>
             </div>

client/src/pages/admin-dashboard.js

@@ -6,18 +6,35 @@ import Admin_analytics from './admin-analytics';
 import Admin_customer from './admin-customer';
 import Admin_table from './admin-table';
 import Admin_orders from './admin-orders';
+import Banner from '../components/admin-customer/Banner';
 
 const Admin_dashboard = (props) => {
 
     const [page, setPage] = useState("Dashboard");
-
+    const [help, setHelp] = useState(true);
+    const [tableNum, setTableNum] = useState('12');
+    const [helpMessage, setHelpMessage] = useState('');
     const {WebSocketService} = props;
+    const [displayBanner, setDisplayBanner] = useState(false);
+
+    const checkHelp = () => {
+        if (help) {
+            setHelpMessage('Customer at table number ' + tableNum +  ' requires assistance');
+            setDisplayBanner(true);
+        }
+    }
+
+    const closeBanner = () => {
+        setDisplayBanner(false);
+        setHelp(false);
+    }
 
     useEffect(() => {
         if (!WebSocketService.socket){
             WebSocketService.connect('127.0.0.1', '8080', true)
             .then(alert("Connected!"));
         }
+        checkHelp();
     }, []);
 
     if (page === "Dashboard"){
@@ -28,6 +45,11 @@ const Admin_dashboard = (props) => {
                     <div className="w-[80%] h-screen">
                         <div className='flex flex-col'>
                             <div className='text-center mt-27 text-black font-Montserrat text-4xl font-bold py-6'>Dashboard</div>
+                            <div>
+                                {displayBanner && (
+                                    <Banner message={helpMessage} onClose={closeBanner}/>
+                                )}
+                            </div>
                             <div>{/* Component */}</div>
                         </div>
                     </div>

client/src/pages/menu.js

@@ -5,18 +5,19 @@ import ItemModal from '../components/itemModal';
 import ShoppingCart from '../components/shoppingCart';
 import LpNavBar from '../components/landing-page/lpNavBar';
 import WebSocketService from '../WebSocketService';
+import Banner from '../components/admin-customer/Banner';
 
 const Menu = (props) => {
 
 
     // Testing
-    // let admin = true;
-    let admin = false;
-
+    let admin = true;
+    //let admin = false;
+    const [announcement, setAnnouncement] = useState('Restaurant is closing soon');
     const [items, setItems] = useState([]); // used to save data states
     const [isLoading, setIsLoading] = useState(true); // used to save whether data is loading 
-
     const [menuItems, setMenuItems] = useState([]);
+    const [displayBanner, setDisplayBanner] = useState(false);
 
     const menuSet = false;
 
@@ -68,6 +69,10 @@ const Menu = (props) => {
 
     const [selectedItem, setSelectedItem] = useState(null);
 
+    const closeBanner = () => {
+        setDisplayBanner(false);
+    }
+
     const openModal = (item) => {
         setSelectedItem(item);
     };
@@ -83,6 +88,10 @@ const Menu = (props) => {
     else {
 
         return (
+            <div>
+            {admin && displayBanner && (
+                <Banner message={announcement} onClose={closeBanner}/>
+            )}
             <div className='font-tt-norms-pro'>
                 {admin ? (
                     <>
@@ -143,6 +152,7 @@ const Menu = (props) => {
                     </>
                 )}
             </div>
+            </div>
         );
     }
 };