Members
(constant) AuthProvider
AuthContext Authentication Component
Tesponsible for managing authentication state
and providing the authenticated user data to its children components.
It fetches the user data from the backend and shares it through React's context API.
- Source:
(constant) AuthProvider
AuthContext Authentication Component
Tesponsible for managing authentication state
and providing the authenticated user data to its children components.
It fetches the user data from the backend and shares it through React's context API.
- Source:
(constant) OrderProvider
OrderContext Authentication Component
Manages the state of a user's order and provides functions
for modifying the order. It uses React Context to share the order state and related
functionality across the application.
- Source:
(constant) OrderProvider
OrderContext Authentication Component
Manages the state of a user's order and provides functions
for modifying the order. It uses React Context to share the order state and related
functionality across the application.
- Source:
(constant) useAuth
Custom hook to access the authentication context.
- Source:
(constant) useAuth
Custom hook to access the authentication context.
- Source:
(constant) useOrder
Custom hook to access the order context.
Provides the order state and functions for interacting with the order.
- Source:
(constant) useOrder
Custom hook to access the order context.
Provides the order state and functions for interacting with the order.
- Source:
Methods
CashierPanel()
Main component to render the cashier panel.
It displays categorized menu items, calculates total price, and allows order placement.
- Source:
CashierPanel()
Main component to render the cashier panel.
It displays categorized menu items, calculates total price, and allows order placement.
- Source:
Employees() → {JSX.Element}
Employees Manager Component
Provides a user interface for managing employees. Users can view, add, edit,
and delete employees through a dynamic interface. The component interacts
with a backend API for CRUD operations.
- Source:
Returns:
The rendered Employees component.
- Type
- JSX.Element
Employees() → {JSX.Element}
Employees Manager Component
Provides a user interface for managing employees. Users can view, add, edit,
and delete employees through a dynamic interface. The component interacts
with a backend API for CRUD operations.
- Source:
Returns:
The rendered Employees component.
- Type
- JSX.Element
Ingredients() → {JSX.Element}
Ingredients Manager Component
Manages the ingredients inventory, allowing users to view, add, and edit ingredients, changing the backend.
- Source:
Returns:
The rendered Ingredients component.
- Type
- JSX.Element
Ingredients() → {JSX.Element}
Ingredients Manager Component
Manages the ingredients inventory, allowing users to view, add, and edit ingredients, changing the backend.
- Source:
Returns:
The rendered Ingredients component.
- Type
- JSX.Element
ListPanelItems(name, price, countMap, setCountMap)
Component to render an individual menu item with increment and decrement buttons.
Parameters:
Name | Type | Description |
---|---|---|
name |
string | Name of the menu item. |
price |
number | Price of the menu item. |
countMap |
Map | State map holding item quantities. |
setCountMap |
function | Function to update the item quantities. |
- Source:
ListPanelItems(name, price, countMap, setCountMap)
Component to render an individual menu item with increment and decrement buttons.
Parameters:
Name | Type | Description |
---|---|---|
name |
string | Name of the menu item. |
price |
number | Price of the menu item. |
countMap |
Map | State map holding item quantities. |
setCountMap |
function | Function to update the item quantities. |
- Source:
Login()
Login component to handle user authentication via Google or manual login.
- Source:
Login()
Login component to handle user authentication via Google or manual login.
- Source:
Meals()
Meals Kiosk Component
Component for selecting meal types (bowl, plate, big plate) and corresponding entrees/sides.
Dynamically fetches menu items and loads images for display.
- Source:
Meals()
Meals Kiosk Component
Component for selecting meal types (bowl, plate, big plate) and corresponding entrees/sides.
Dynamically fetches menu items and loads images for display.
- Source:
MenuBoard()
MenuBoard Static Display Component
MenuBoard component that renders a list of menu items, including seasonal items,
and displays weather information.
- Source:
MenuBoard()
MenuBoard Static Display Component
MenuBoard component that renders a list of menu items, including seasonal items,
and displays weather information.
- Source:
MenuItem(name, img, selectEnabled, isSelected, calories, onInfoClick, hasAllergens, order, updateOrder)
Represents an item button component
Parameters:
Name | Type | Description |
---|---|---|
name |
string | Name of the item |
img |
string | URL of the item's image |
selectEnabled |
boolean | Whether the item can be selected |
isSelected |
boolean | Whether the item is currently selected |
calories |
number | Calories of the item |
onInfoClick |
function | Function to handle info icon click |
hasAllergens |
boolean | Whether the item has allergens |
order |
object | The current order (key-value pairs of item names and quantities) |
updateOrder |
function | Function to update the order with new quantities |
- Source:
MenuItem(name, img, selectEnabled, isSelected, calories, onInfoClick, hasAllergens, order, updateOrder)
Represents an item button component
Parameters:
Name | Type | Description |
---|---|---|
name |
string | Name of the item |
img |
string | URL of the item's image |
selectEnabled |
boolean | Whether the item can be selected |
isSelected |
boolean | Whether the item is currently selected |
calories |
number | Calories of the item |
onInfoClick |
function | Function to handle info icon click |
hasAllergens |
boolean | Whether the item has allergens |
order |
object | The current order (key-value pairs of item names and quantities) |
updateOrder |
function | Function to update the order with new quantities |
- Source:
Order()
Order Kiosk main Component
Represents the Order component where users can view and modify their current order, see recommendations,
and complete their order.
- Source:
Order()
Order Kiosk main Component
Represents the Order component where users can view and modify their current order, see recommendations,
and complete their order.
- Source:
OrderDialog(isOpen, onClose, totalPrice, onConfirmOrder, itemMap)
Modal dialog to confirm order details.
Parameters:
Name | Type | Description |
---|---|---|
isOpen |
boolean | Controls visibility of the dialog. |
onClose |
function | Function to close the dialog. |
totalPrice |
number | Total price of the order. |
onConfirmOrder |
function | Function to handle order confirmation. |
itemMap |
Map | Map of selected items with their quantities. |
- Source:
OrderDialog(isOpen, onClose, totalPrice, onConfirmOrder, itemMap)
Modal dialog to confirm order details.
Parameters:
Name | Type | Description |
---|---|---|
isOpen |
boolean | Controls visibility of the dialog. |
onClose |
function | Function to close the dialog. |
totalPrice |
number | Total price of the order. |
onConfirmOrder |
function | Function to handle order confirmation. |
itemMap |
Map | Map of selected items with their quantities. |
- Source:
Preferences()
Preferences Kiosk Component
The Preferences component provides users with menu recommendations based on their preferences.
- Source:
Preferences()
Preferences Kiosk Component
The Preferences component provides users with menu recommendations based on their preferences.
- Source:
ProtectedRoute(props) → {React.ReactNode}
ProtectedRoute Authentication Component
A wrapper component that restricts access to routes based on user authentication and roles.
Parameters:
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
props |
Object | The component's props.
Properties
|
- Source:
Returns:
- Returns the child components if the user is authenticated
and has the required role, otherwise navigates to the appropriate route.
- Type
- React.ReactNode
ProtectedRoute(props) → {React.ReactNode}
ProtectedRoute Authentication Component
A wrapper component that restricts access to routes based on user authentication and roles.
Parameters:
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
props |
Object | The component's props.
Properties
|
- Source:
Returns:
- Returns the child components if the user is authenticated
and has the required role, otherwise navigates to the appropriate route.
- Type
- React.ReactNode
ReportsView() → {JSX.Element}
ReportsView Manager Component
Allows users to view various reports based on backend data such as sales, x-reports, z-reports, and more.
- Source:
Returns:
The rendered reports component.
- Type
- JSX.Element
ReportsView() → {JSX.Element}
ReportsView Manager Component
Allows users to view various reports based on backend data such as sales, x-reports, z-reports, and more.
- Source:
Returns:
The rendered reports component.
- Type
- JSX.Element
SelectLang()
Component for selecting a language to translate the page.
Integrates with useTranslatePage to dynamically update the language of the page content.
- Source:
SelectLang()
Component for selecting a language to translate the page.
Integrates with useTranslatePage to dynamically update the language of the page content.
- Source:
getAllTextNodes(element) → {Object}
Extracts all text nodes from a given DOM element, excluding text within script and style tags.
Parameters:
Name | Type | Description |
---|---|---|
element |
HTMLElement | The root DOM element to start extracting text nodes from. |
- Source:
Returns:
- An object containing two arrays:
- textNodes: The list of text node objects found within the element.
- textsToTranslate: The corresponding text content of the text nodes.
- Type
- Object
getAllTextNodes(element) → {Object}
Extracts all text nodes from a given DOM element, excluding text within script and style tags.
Parameters:
Name | Type | Description |
---|---|---|
element |
HTMLElement | The root DOM element to start extracting text nodes from. |
- Source:
Returns:
- An object containing two arrays:
- textNodes: The list of text node objects found within the element.
- textsToTranslate: The corresponding text content of the text nodes.
- Type
- Object
(async) handleDelete()
Deletes the currently selected employee.
- Source:
(async) handleDelete()
Deletes the currently selected employee.
- Source:
(async) loadEmployeesFromDatabase()
Fetches employees from the backend and updates the state.
Sorts employees by hire date before setting the state.
- Source:
(async) loadEmployeesFromDatabase()
Fetches employees from the backend and updates the state.
Sorts employees by hire date before setting the state.
- Source:
(async) loadImage(item) → {Promise.<string>}
Loads an image for a menu item based on its category and name. If no image is found, a placeholder image is returned.
Parameters:
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
item |
Object | The menu item object.
Properties
|
- Source:
Returns:
- An await to the image path or a placeholder image.
- Type
- Promise.<string>
(async) loadImage(item) → {Promise.<string>}
Loads an image for a menu item based on its category and name. If no image is found, a placeholder image is returned.
Parameters:
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
item |
Object | The menu item object.
Properties
|
- Source:
Returns:
- An await to the image path or a placeholder image.
- Type
- Promise.<string>
(async) loadIngredientsFromDatabase()
Fetches all ingredients from the backend and updates the state.
- Source:
(async) loadIngredientsFromDatabase()
Fetches all ingredients from the backend and updates the state.
- Source:
(async) translateText(texts, targetLang) → {Promise.<Array.<string>>}
Translates an array of text strings to a target language using the Google Translate API.
Parameters:
Name | Type | Description |
---|---|---|
texts |
Array.<string> | An array of text strings to translate. |
targetLang |
string | The target language code (e.g., 'es' for Spanish, 'fr' for French). |
- Source:
Returns:
- A promise that resolves to an array of translated text strings.
- Type
- Promise.<Array.<string>>
(async) translateText(texts, targetLang) → {Promise.<Array.<string>>}
Translates an array of text strings to a target language using the Google Translate API.
Parameters:
Name | Type | Description |
---|---|---|
texts |
Array.<string> | An array of text strings to translate. |
targetLang |
string | The target language code (e.g., 'es' for Spanish, 'fr' for French). |
- Source:
Returns:
- A promise that resolves to an array of translated text strings.
- Type
- Promise.<Array.<string>>
useTranslatePage(targetLang)
Custom React hook that translates the content of a page into a target language.
Observes changes in the root element's content and re-translates if updates occur.
Parameters:
Name | Type | Description |
---|---|---|
targetLang |
string | The target language code for translation. |
- Source:
useTranslatePage(targetLang)
Custom React hook that translates the content of a page into a target language.
Observes changes in the root element's content and re-translates if updates occur.
Parameters:
Name | Type | Description |
---|---|---|
targetLang |
string | The target language code for translation. |
- Source: