-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpages_manager_AddIngredient.js.html
131 lines (102 loc) · 5.58 KB
/
pages_manager_AddIngredient.js.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Source: pages/manager/AddIngredient.js</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Source: pages/manager/AddIngredient.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>import React, { useState } from "react";
import "../../css/AddMenuItem.css";
import { HOST } from "../../host";
import ManagerPop from "../../components/managerErrorPop";
/**
A React component that logs user input to the console.
@returns {JSX.Element} A React component that includes an input field and a button to log the user's input to the console.
*/
function UserInputLogger() {
const [inputValue, setInputValue] = useState("");
const[quantity, setQuantity] = useState("");
const [showManagerPop , setManagerPop] = useState(false);
const [ErrorPrompt , setErrorPrompt] = useState("");
/**
Function that updates the state hook with the current value of the input field.
@param {React.ChangeEvent<HTMLInputElement>} event The change event triggered by the input field.
*/
const handleInputChange = (event) => {
setInputValue(event.target.value);
};
const handleQuantityChange = (event) => {
setQuantity(event.target.value);
};
/**
Function that prompts the user if they are missing ingredients.
*/
/**
Function that displays the help menu to the user.
*/
const answerScreen = () =>{
setErrorPrompt("completeChange");
setManagerPop(true);
}
/**
Function that logs the current value of the input field to the console.
*/
const handleButtonClick = () => {
// Do something with the item name and price (e.g. add them to an order list)
fetch(`${HOST}/addIngredient`, {
method: 'POST',
headers:{
'Content-Type': 'application/json'
},
body:JSON.stringify({'name':inputValue , 'quantity': quantity})
}) .then(response => response.json())
.then(data => {console.log(data);answerScreen()})
.catch(error => { console.error(error); });
// Reset the form to add ingredients again
};
return (
<>
<div id = "menuadder">
<h3>Change Ingredient Quantity</h3>
<div id = "menuadder-form">
<input type="text" value={inputValue} onChange={handleInputChange} placeholder="Input ingredient name"/>
<input type="text" value={quantity} onChange={handleQuantityChange} placeholder="Input Quantity"/>
<button type = "button" onClick={handleButtonClick}>Add Ingredient</button>
</div>
</div>
{showManagerPop && (
<ManagerPop
ErrorPrompt={ErrorPrompt}
setErrorPrompt={setErrorPrompt}
setManagerPop={setManagerPop}
/>
)}
</>
);
}
export default UserInputLogger;</code></pre>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#App">App</a></li><li><a href="global.html#Cashier">Cashier</a></li><li><a href="global.html#CashierDrink">CashierDrink</a></li><li><a href="global.html#CashierHeader">CashierHeader</a></li><li><a href="global.html#CashierMeal">CashierMeal</a></li><li><a href="global.html#CashierSauce">CashierSauce</a></li><li><a href="global.html#CashierSeasonal">CashierSeasonal</a></li><li><a href="global.html#Customer">Customer</a></li><li><a href="global.html#CustomerDrink">CustomerDrink</a></li><li><a href="global.html#ExcessReport">ExcessReport</a></li><li><a href="global.html#HOST">HOST</a></li><li><a href="global.html#Home">Home</a></li><li><a href="global.html#Inventory">Inventory</a></li><li><a href="global.html#Login">Login</a></li><li><a href="global.html#Logout">Logout</a></li><li><a href="global.html#Manager">Manager</a></li><li><a href="global.html#MenuAdder">MenuAdder</a></li><li><a href="global.html#MenuItems">MenuItems</a></li><li><a href="global.html#Orders">Orders</a></li><li><a href="global.html#PrivateRouteCashier">PrivateRouteCashier</a></li><li><a href="global.html#PrivateRouteManager">PrivateRouteManager</a></li><li><a href="global.html#UserInputLogger">UserInputLogger</a></li><li><a href="global.html#getMenuEffect">getMenuEffect</a></li><li><a href="global.html#getMenuPrice">getMenuPrice</a></li><li><a href="global.html#handleComplete">handleComplete</a></li><li><a href="global.html#handleIdChange">handleIdChange</a></li><li><a href="global.html#handleInventory">handleInventory</a></li><li><a href="global.html#handleNameChange">handleNameChange</a></li><li><a href="global.html#handleNewOrder">handleNewOrder</a></li><li><a href="global.html#handlePriceChange">handlePriceChange</a></li><li><a href="global.html#handleSubmit">handleSubmit</a></li><li><a href="global.html#local">local</a></li><li><a href="global.html#root">root</a></li><li><a href="global.html#useEffect">useEffect</a></li><li><a href="global.html#useGoogleSignIn">useGoogleSignIn</a></li><li><a href="global.html#useLocalState">useLocalState</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Tue May 02 2023 22:48:22 GMT-0500 (Central Daylight Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>