From 1ae2e6715edbd53ae5b869520712cac344c29c8b Mon Sep 17 00:00:00 2001 From: nAgI314 Date: Mon, 27 May 2024 20:05:48 +0900 Subject: [PATCH] 2 --- src/App.tsx | 45 +++++++-------------------------------------- src/firebase.ts | 14 +++++++------- src/showCal.tsx | 38 +++++++++++++++++++++++++++++++++++--- 3 files changed, 49 insertions(+), 48 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 581d900..eab4a48 100644 --- 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(true); const [isVisible4, setIsVisible4] = useState(false); + const [BarColor,setBarColor] =useState(["#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 */} - } onClick={Page3} /> - } onClick={Page4} /> + } onClick={Page3} /> + } onClick={Page4} /> diff --git a/src/firebase.ts b/src/firebase.ts index cc2febf..5595d1c 100644 --- 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 index 3ab2301..3ee2d2b 100644 --- a/src/showCal.tsx +++ b/src/showCal.tsx @@ -30,13 +30,19 @@ const _productData: Item[] = productData.map((data) => { const ItemTable: React.FC<{ items: Item[] }> = ({ items }) => { const [itemList, setItemList] = useState(items.map(item => ({ ...item, quantity: 0 }))); const [_sum, setSum] = useState(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) => { @@ -44,6 +50,11 @@ const ItemTable: React.FC<{ items: Item[] }> = ({ items }) => { 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) => { + 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 (
@@ -119,9 +150,10 @@ const ItemTable: React.FC<{ items: Item[] }> = ({ items }) => { set_InputValue(parseInt(e.target.value) - _sum)} + value={_inputValue} + onChange={handleInputValueChange} /> -

おつり: {_inputValue} 円

+

おつり: {change} 円

|{/*左の縦棒はあえて*/} {/* */}