2

suiranfes · May 27, 2024 · 1ae2e67 · 1ae2e67
1 parent d3d6761
commit 1ae2e67
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 48 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,7 +8,7 @@ import { productData } from './data';
 import { CreateCal } from './showCal';
 
 // Material UI
-import { BottomNavigation, BottomNavigationAction, Paper } from '@mui/material';
+import { BottomNavigation, BottomNavigationAction, Paper,Box } from '@mui/material';
 import Button from '@mui/material/Button';
 
 // Icons
@@ -147,53 +147,22 @@ function App() {
     console.log(_SellItem);
     setSellIetm(_SellItem);
   }
-
-  const [code, setCode] = useState('');
-
-  // 合計金額
-  let sum = 0;
-
-  // 模擬店かどうか判別
-  if (code.indexOf("焼きそば") === 0) {
-    const allArray = code.split(";");// 品ごとに分割
-    var nameArray: string[] = new Array(allArray.length - 1);
-    var costArray: number[] = new Array(allArray.length - 1);
-    var qtyArray: number[] = new Array(allArray.length - 1);
-    var sumArray: number[] = new Array(allArray.length - 1);
-    // それぞれの情報に分割
-    for (let i = 0; i < allArray.length; i++) {
-      let a = allArray[i].split(",");
-      let name = a[0];
-      let cost = Number(a[1]);
-      let qty = Number(a[2]);
-      let eachSum = Number(a[3]);
-      nameArray[i] = name;
-      costArray[i] = cost;
-      qtyArray[i] = qty;
-      sumArray[i] = eachSum;
-    }
-
-    // 合計金額を求める処理
-    for (let i = 0; i < sumArray.length - 1; i++) {
-      sum = sum + sumArray[i]
-    }
-    // console.log(sum);
-  }
-
-
-  // ページ処理
 
+  // ページ処理
   const [isVisible3, setIsVisible3] = useState<boolean>(true);
   const [isVisible4, setIsVisible4] = useState<boolean>(false);
+  const [BarColor,setBarColor] =useState<string[]>(["#afeeee","white"]);
 
   const Page3 = () => {
     setIsVisible3(true);
     setIsVisible4(false);
+    setBarColor(["#afeeee","white"])
     // stopScanning();
   }
   const Page4 = () => {
     setIsVisible3(false);
     setIsVisible4(true);
+    setBarColor(["white","#afeeee"])
     updateData();
     // stopScanning();
   }
@@ -230,8 +199,8 @@ function App() {
       {/* footer */}
       <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
         <BottomNavigation>
-          <BottomNavigationAction label="電卓" icon={<CalculateIcon />} onClick={Page3} />
-          <BottomNavigationAction label="データ" icon={<DataThresholdingIcon />} onClick={Page4} />
+          <Box bgcolor={BarColor[0]}><BottomNavigationAction label="電卓" icon={<CalculateIcon />} onClick={Page3} /></Box>
+          <Box bgcolor={BarColor[1]}><BottomNavigationAction label="データ" icon={<DataThresholdingIcon />} onClick={Page4} /></Box>
         </BottomNavigation>
       </Paper>
     </div>

diff --git a/src/firebase.ts b/src/firebase.ts
@@ -4,13 +4,13 @@ import { getFirestore } from "firebase/firestore";
 const firebaseConfig = {
   // あなたのFirebaseの設定情報（APIキーなど）を入力してください
   // 詳細な情報はFirebaseコンソールのプロジェクト設定から取得できます
-  apiKey: "AIzaSyAQMukEKto0NkQpk9lGXKNcRpBWn_yTba0",
-  authDomain: "mogitenapp-react.firebaseapp.com",
-  projectId: "mogitenapp-react",
-  storageBucket: "mogitenapp-react.appspot.com",
-  messagingSenderId: "86642412840",
-  appId: "1:86642412840:web:052d62e59fa72a132e941d",
-  measurementId: "G-TD32389VD8"
+  apiKey: "AIzaSyBzPssZ1gFlb6_uG0Uu_I-QVXvyBwst7WM",
+  authDomain: "shokkitu-cafeapp.firebaseapp.com",
+  projectId: "shokkitu-cafeapp",
+  storageBucket: "shokkitu-cafeapp.appspot.com",
+  messagingSenderId: "135205687359",
+  appId: "1:135205687359:web:488aca8771748ae353288a",
+  measurementId: "G-MNMDZ3GZN3"
 };
 
 const app = initializeApp(firebaseConfig);

diff --git a/src/showCal.tsx b/src/showCal.tsx
@@ -30,20 +30,31 @@ const _productData: Item[] = productData.map((data) => {
 const ItemTable: React.FC<{ items: Item[] }> = ({ items }) => {
   const [itemList, setItemList] = useState<Item[]>(items.map(item => ({ ...item, quantity: 0 })));
   const [_sum, setSum] = useState<number>(0);
-  const [_inputValue, set_InputValue] = useState(0);
+  const [_inputValue, set_InputValue] = useState("");
+  const [change, setchange] = useState(0);
 
   const decreaseQuantity = (index: number) => {
     const updatedList = [...itemList];
     updatedList[index].quantity = Math.max(0, updatedList[index].quantity - 1);
     setItemList(updatedList);
     calculateSum(updatedList);
+    if(isNaN(parseInt(_inputValue))){
+      setchange(0);
+    }else{
+      setchange(parseInt(_inputValue) - calculateSum(updatedList));
+    }
   };
 
   const increaseQuantity = (index: number) => {
     const updatedList = [...itemList];
     updatedList[index].quantity++;
     setItemList(updatedList);
     calculateSum(updatedList);
+    if(isNaN(parseInt(_inputValue))){
+      setchange(0);
+    }else{
+      setchange(parseInt(_inputValue) - calculateSum(updatedList));
+    }
   };
 
   const calculateSum = (items: Item[]) => {
@@ -52,6 +63,7 @@ const ItemTable: React.FC<{ items: Item[] }> = ({ items }) => {
       sum += item.quantity * item.price;
     });
     setSum(sum);
+    return(sum);
   };
 
   const setLocalStorage = () => {
@@ -83,11 +95,30 @@ const ItemTable: React.FC<{ items: Item[] }> = ({ items }) => {
   //   const keys = Object.keys(localStorage);
   //   console.log(keys);
   // }
+  const handleInputValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    set_InputValue(e.target.value);
+    if(isNaN(parseInt(e.target.value))){
+      setchange(0);
+    }else{
+      setchange(parseInt(e.target.value) - _sum);
+    }  
+  };
+
   const deleteData = () => {
     setItemList(items.map(item => ({ ...item, quantity: 0 })));
     setSum(0);
+    set_InputValue("");
+    setchange(0);
   }
 
+  // const returnChange = () => {
+  //   if(isNaN(parseInt(_inputValue))){
+  //     return(0);
+  //   }else{
+  //     return(parseInt(_inputValue) - _sum);
+  //   }
+  // }
+
   return (
     <div>
       <table>
@@ -119,9 +150,10 @@ const ItemTable: React.FC<{ items: Item[] }> = ({ items }) => {
       <TextField
         label="入力金額" variant="outlined"
         type="number"
-        onChange={(e) => set_InputValue(parseInt(e.target.value) - _sum)}
+        value={_inputValue}
+        onChange={handleInputValueChange}
       />
-      <p>おつり: {_inputValue} 円</p>
+      <p>おつり: {change} 円</p>
       <Button onClick={deleteData} endIcon={<DeleteForeverIcon />}>データを消す</Button>|{/*左の縦棒はあえて*/}
       <Button onClick={setLocalStorage} endIcon={<CheckIcon />}>データを保存</Button>
       {/* <Button onClick={deleteLocalStorage}>データを消す (開発者向け)</Button> */}