Masaharu.Kato
4 months ago
parent
1153f69d09
commit
8fd8771ac5
@ -1,82 +0,0 @@ |
||||
import React, { useState } from 'react'; |
||||
import { useNavigate } from 'react-router-dom'; |
||||
import {
|
||||
AppBar,
|
||||
Toolbar,
|
||||
Typography,
|
||||
Container,
|
||||
Box,
|
||||
Button,
|
||||
Drawer, |
||||
List, |
||||
ListItemText, |
||||
ListItemIcon, |
||||
ListItemButton, |
||||
Divider, |
||||
IconButton, |
||||
TextField, |
||||
Paper, |
||||
Alert, |
||||
Link, |
||||
Grid, |
||||
} from '@mui/material'; |
||||
import { LoginCredentials } from '../types/types'; |
||||
import { authApi } from '../services/api'; |
||||
import { GENERAL_ERRORS } from '../constants/errorMessages'; |
||||
|
||||
const AddDishes1: React.FC = () => { |
||||
const navigate = useNavigate(); |
||||
const [dish, setDish] = useState(""); |
||||
// エラーメッセージの状態管理
|
||||
const [error, setError] = useState(false); |
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { |
||||
setDish(event.target.value); |
||||
}; |
||||
const handleSubmit = async (e: React.FormEvent) => { |
||||
e.preventDefault(); // フォームのデフォルト送信動作を防止
|
||||
if (!dish.trim()) { |
||||
alert("エラー"); |
||||
setError(true); |
||||
} else { |
||||
alert("送信成功！"); |
||||
localStorage.setItem("dishName", dish); // ローカルストレージにフォームに入力された料理名を保存
|
||||
navigate('/add2', { state: dish }); // 料理名から材料名追加ページにリダイレクト
|
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<div> |
||||
<Typography variant="h4" component="h1" gutterBottom> |
||||
料理の追加・編集 |
||||
</Typography> |
||||
<Box component="form" onSubmit={handleSubmit}> |
||||
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '10px', textAlign: 'center'}}> |
||||
<TextField |
||||
required |
||||
// id="username"
|
||||
label="追加・編集したい料理名を入力" |
||||
variant="outlined" |
||||
InputLabelProps={{ style: { fontSize: "40px" }}} |
||||
style={{width: "80%" }} |
||||
InputProps={{ style: { fontSize: "40px"} }} |
||||
name="dishName" |
||||
// autoComplete="username"
|
||||
autoFocus |
||||
value={dish} |
||||
onChange={handleChange} |
||||
error={error} |
||||
helperText={error ? "入力が必要です" : ""} |
||||
/> |
||||
</div> |
||||
<div style={{position: "fixed", left: "75%", transform: 'translateX(-50%)', bottom: "10px"}}> |
||||
<Button type="submit" variant='contained' sx={{ width: "250px", height: "60px", fontSize: "40px" }} color="primary" > |
||||
編集・追加 |
||||
</Button> |
||||
</div> |
||||
</Box> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default AddDishes1; |
||||
@ -1,278 +0,0 @@ |
||||
/** |
||||
* テストページコンポーネント |
||||
* 白紙の状態で表示されるテスト用のページ |
||||
*/ |
||||
import React, { useState, useEffect } from 'react'; |
||||
import { toBuyApi } from '../services/api'; |
||||
import {
|
||||
Container, |
||||
Typography, |
||||
Tooltip, |
||||
List, |
||||
ListItem, |
||||
ListItemText, |
||||
ListItemSecondaryAction, |
||||
IconButton, |
||||
Checkbox, |
||||
Fab, |
||||
Dialog, |
||||
DialogTitle, |
||||
DialogContent, |
||||
DialogActions, |
||||
TextField, |
||||
Button, |
||||
Box, |
||||
MenuItem, |
||||
Select, |
||||
FormControl, |
||||
InputLabel |
||||
} from '@mui/material'; |
||||
import { |
||||
Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon, |
||||
SoupKitchen as SoupKitchenIcon |
||||
} from '@mui/icons-material'; |
||||
import { STUFF_ERRORS } from '../constants/errorMessages'; |
||||
import { GENERAL_ERRORS } from '../constants/errorMessages'; |
||||
import CategoryDropDown from "../components/CategoryDropDown"; |
||||
|
||||
// 新規タスクの初期状態(画面表示用)
|
||||
const EMPTY_TASK = { id: 0, title: '', amount: 0, completed: false }; |
||||
|
||||
// 新規タスクの初期状態(データベース登録用)
|
||||
const EMPTY_TASK_DATA_BASE = { id: 0, title: '', amount: 0, completed: false }; |
||||
|
||||
interface Stuff { |
||||
title: string; // 食材名
|
||||
amount: number; // 食材の個数
|
||||
completed: boolean; //
|
||||
} |
||||
|
||||
const AddDishes2: React.FC = () => { |
||||
const receivedData = localStorage.getItem("dishName"); |
||||
// タスク一覧の状態管理
|
||||
const [tasks, setTasks] = useState<Stuff[]>([]); |
||||
|
||||
const [addtasks, setAddTasks] = useState<Stuff[]>([]); |
||||
// エラーメッセージの状態管理
|
||||
const [error, setError] = useState(false); |
||||
// 新規タスク作成ダイアログの表示状態
|
||||
const [openDialog, setOpenDialog] = useState(false); |
||||
// 新規タスクの入力内容
|
||||
const [newTask, setNewTask] = useState(EMPTY_TASK); |
||||
|
||||
// // コンポーネントマウント時にタスク一覧を取得
|
||||
// useEffect(() => {
|
||||
// fetchTasks();
|
||||
// }, []);
|
||||
|
||||
// /**
|
||||
// * APIからタスク一覧を取得する関数
|
||||
// * 取得したタスクをstate(tasks)に設定
|
||||
// */
|
||||
// const fetchTasks = async () => {
|
||||
// try {
|
||||
// const tasks = await taskApi.getTasks();
|
||||
// setTasks(tasks);
|
||||
// } catch (error) {
|
||||
// console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
|
||||
// }
|
||||
// };
|
||||
/** |
||||
* タスクを削除するハンドラー |
||||
* 指定されたIDのタスクをAPIを通じて削除 |
||||
*/ |
||||
const handleDeleteTask = async (index: number) => { |
||||
try { |
||||
let newAddTasks = [...addtasks]; // 配列をコピー
|
||||
newAddTasks.splice(index, 1); |
||||
setAddTasks(newAddTasks); |
||||
// fetchTasks(); // 削除後のタスク一覧を再取得
|
||||
} catch (error) { |
||||
console.error(`${STUFF_ERRORS.DELETE_FAILED}:`, error); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* 新規タスクを作成するハンドラー |
||||
* 入力されたタスク情報をAPIに送信して新規作成 |
||||
* 作成後はダイアログを閉じ、入力内容をリセット |
||||
*/ |
||||
const handleSubmit = async (e: React.FormEvent) => { |
||||
e.preventDefault(); // フォームのデフォルト送信動作を防止
|
||||
if (addtasks[0] == null) { |
||||
setError(true); |
||||
alert("食材を追加してください"); |
||||
} else { |
||||
alert("送信成功！"); |
||||
handleCreateTask_DataBase(); |
||||
// localStorage.setItem("dishName", dish); // ローカルストレージにフォームに入力された料理名を保存
|
||||
// navigate('/add2', { state: dish }); // 料理名から材料名追加ページにリダイレクト
|
||||
} |
||||
}; |
||||
const handleCreateTask_Temp = async () => { |
||||
try { |
||||
// await taskApi.createTask(newTask);
|
||||
let newAddTasks = [...addtasks]; // 配列をコピー
|
||||
newAddTasks.push(newTask); |
||||
setAddTasks(newAddTasks); |
||||
setOpenDialog(false); // ダイアログを閉じる
|
||||
setNewTask(EMPTY_TASK); // 入力内容をリセット
|
||||
// fetchTasks(); // 作成後のタスク一覧を再取得
|
||||
} catch (error) { |
||||
console.error(`${STUFF_ERRORS.CREATE_FAILED}:`, error); |
||||
} |
||||
}; |
||||
|
||||
const handleCreateTask_DataBase = async () => { |
||||
try { |
||||
// for (let i = 0; i < addtasks.length; i++) {
|
||||
// // await taskApi.createTask(addtasks[i]);
|
||||
// await toBuyApi.addToBuy(addtasks[i]);
|
||||
// }
|
||||
setOpenDialog(false); // ダイアログを閉じる
|
||||
setNewTask(EMPTY_TASK); // 入力内容をリセット
|
||||
// fetchTasks(); // 作成後のタスク一覧を再取得
|
||||
} catch (error) { |
||||
console.error(`${STUFF_ERRORS.CREATE_FAILED}:`, error); |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<Box> |
||||
<div> |
||||
<h1>追加する料理名</h1> |
||||
<p style={{fontSize: "40px"}}>{receivedData}</p> |
||||
</div> |
||||
<List> |
||||
{/* タスク一覧をマップして各タスクをリストアイテムとして表示 */} |
||||
{addtasks.map((task, index) => ( |
||||
<ListItem |
||||
key={index} |
||||
sx={{ |
||||
bgcolor: 'background.paper', |
||||
mb: 1, |
||||
borderRadius: 1, |
||||
boxShadow: 1, |
||||
}} |
||||
> |
||||
{/* タスク完了状態を切り替えるチェックボックス |
||||
<Checkbox |
||||
checked={task.completed} |
||||
onChange={() => handleToggleComplete(task.id)} |
||||
/> */} |
||||
{/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} |
||||
<ListItemText |
||||
primary={task.title} |
||||
// secondary={task.description}
|
||||
sx={{ |
||||
textDecoration: task.completed ? 'line-through' : 'none', |
||||
}} |
||||
/> |
||||
{/* 食材の個数を表示 */} |
||||
<ListItemText |
||||
primary={<Typography style={{textAlign:"center"}}>個数<br /> |
||||
{task.amount} |
||||
</Typography> |
||||
} |
||||
// secondary={task.description}
|
||||
primaryTypographyProps={{ align: "right", marginRight: "20%", fontSize: "20px" }} |
||||
/> |
||||
{/* 買い物リスト：食材情報記入ボタン */} |
||||
<ListItemSecondaryAction> |
||||
<Tooltip title="食材情報追加"> |
||||
<IconButton |
||||
edge="end" |
||||
aria-label="食材情報追加" |
||||
//onClick={() => handleDeleteTask(task.id)}
|
||||
> |
||||
<ShoppingBasketIcon /> |
||||
</IconButton> |
||||
</Tooltip> |
||||
{/* 買い物リスト：食材削除ボタン */} |
||||
<Tooltip title="項目を削除" |
||||
componentsProps={{ |
||||
tooltip: { |
||||
sx: { |
||||
backgroundColor: "white", |
||||
color: "red", |
||||
fontSize: "0.8rem", |
||||
padding: "6px", |
||||
borderRadius: "6px", |
||||
}, |
||||
}, |
||||
}} |
||||
> |
||||
|
||||
<IconButton |
||||
edge="end" |
||||
aria-label="delete" |
||||
onClick={() => handleDeleteTask(index)} |
||||
> |
||||
<DeleteIcon /> |
||||
</IconButton> |
||||
</Tooltip> |
||||
</ListItemSecondaryAction> |
||||
|
||||
</ListItem> |
||||
))} |
||||
</List> |
||||
<div style={{position: "fixed", left: "75%", transform: 'translateX(-50%)', bottom: "20%"}}> |
||||
<Button variant='contained' sx={{ width: "250px", height: "60px", fontSize: "40px" }}
|
||||
color="primary" onClick={() => setOpenDialog(true)}> |
||||
食材の追加 |
||||
</Button> |
||||
</div> |
||||
<div style={{position: "fixed", width: "60%", left: "50%", transform: 'translateX(-50%)', bottom: "2%"}}> |
||||
<Button variant='contained' sx={{ width: "100%", height: "100px", fontSize: "40px" }}
|
||||
color="primary" onClick={handleSubmit}> |
||||
料理リストへ追加 |
||||
</Button> |
||||
</div> |
||||
{/* 新規タスク作成ダイアログ */} |
||||
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true}> |
||||
<DialogTitle>材料の追加</DialogTitle> |
||||
<DialogContent> |
||||
<Box sx={{ pt: 1 }}> |
||||
{/*材料カテゴリ選択 */} |
||||
<CategoryDropDown></CategoryDropDown> |
||||
{/* タスクタイトル入力フィールド */} |
||||
<TextField |
||||
autoFocus |
||||
margin="dense" |
||||
label="材料名" |
||||
fullWidth |
||||
value={newTask.title} |
||||
onChange={(e) => setNewTask({ ...newTask, title: e.target.value })} |
||||
sx={{ marginBottom: 2 }} |
||||
/> |
||||
{/* 数量入力フィールド */} |
||||
<TextField |
||||
margin="dense" |
||||
label="数量" |
||||
fullWidth |
||||
value={newTask.amount} |
||||
onChange={(e) => { |
||||
const value = e.target.value; |
||||
const parsedValue = parseInt(value, 10); // 数値に変換
|
||||
if (!isNaN(parsedValue)) { |
||||
setNewTask({ ...newTask, amount: parsedValue }); // number型で保存
|
||||
} |
||||
}} |
||||
sx={{ width: "20%" }} |
||||
type="number" |
||||
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
|
||||
/> |
||||
</Box> |
||||
</DialogContent> |
||||
<DialogActions> |
||||
<Button onClick={() => setOpenDialog(false)}>キャンセル</Button> |
||||
<Button onClick={handleCreateTask_Temp} variant="contained"> |
||||
追加 |
||||
</Button> |
||||
</DialogActions> |
||||
</Dialog> |
||||
</Box> |
||||
); |
||||
}; |
||||
|
||||
export default AddDishes2; |
||||
@ -1,13 +0,0 @@ |
||||
|
||||
import React from 'react'; |
||||
import { Box } from '@mui/material'; |
||||
|
||||
const AddDishies1: React.FC = () => { |
||||
return ( |
||||
<Box> |
||||
{/* 白紙のページ - 何も表示しない */} |
||||
</Box> |
||||
); |
||||
}; |
||||
|
||||
export default AddDishies1; |
||||
@ -0,0 +1,155 @@ |
||||
/** |
||||
* テストページコンポーネント |
||||
* 白紙の状態で表示されるテスト用のページ |
||||
*/ |
||||
import React, { useState, useEffect } from 'react'; |
||||
import { |
||||
Container, |
||||
Typography, |
||||
Tooltip, |
||||
List, |
||||
ListItem, |
||||
ListItemText, |
||||
ListItemSecondaryAction, |
||||
IconButton, |
||||
Checkbox, |
||||
Fab, |
||||
Dialog, |
||||
DialogTitle, |
||||
DialogContent, |
||||
DialogActions, |
||||
TextField, |
||||
Button, |
||||
Box, |
||||
MenuItem, |
||||
Select, |
||||
FormControl, |
||||
InputLabel, |
||||
ListItemIcon |
||||
} from '@mui/material'; |
||||
import { |
||||
Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon, |
||||
SoupKitchen as SoupKitchenIcon, Edit as EditIcon, ListAlt as ListAltIcon |
||||
} from '@mui/icons-material'; |
||||
import AddStuffAmountDialog from '../components/AddStuffAmountDialog'; |
||||
import { StuffAndCategoryAndAmount, StuffNameAndAmount } from '../types/types'; |
||||
import EditAmountDialog from '../components/EditAmountDialog'; |
||||
|
||||
const AddDishes2: React.FC = () => { |
||||
// 料理名
|
||||
const [recipeName, setRecipeName] = useState<string>(''); |
||||
// 材料リスト
|
||||
const [items, setItems] = useState<StuffAndCategoryAndAmount[]>([]); |
||||
// 材料追加作成ダイアログの表示状態
|
||||
const [openAddDialog, setOpenAddDialog] = useState(false); |
||||
// 材料追加作成ダイアログの表示状態
|
||||
const [openAmountDialog, setOpenAmountDialog] = useState(false); |
||||
// 新規アイテムの入力内容
|
||||
const emptyItem: StuffAndCategoryAndAmount = { stuffId: null, stuffName: '', category: '', amount: 1 } |
||||
const [newItem, setNewItem] = useState<StuffAndCategoryAndAmount>(emptyItem); |
||||
// 編集しているアイテム
|
||||
const [editingItem, setEditingItem] = useState<StuffAndCategoryAndAmount>(emptyItem); |
||||
const [editingItemIdx, setEditingItemIdx] = useState(0); |
||||
|
||||
const handleAddRecipeToBuy = () => { |
||||
console.log('追加された材料:', items); |
||||
} |
||||
|
||||
return ( |
||||
<Box> |
||||
<div> |
||||
<h1>料理の追加</h1> |
||||
<TextField autoFocus margin="dense" label="料理名" fullWidth |
||||
value={recipeName} onChange={(e) => setRecipeName(e.target.value)} |
||||
/> |
||||
</div> |
||||
<h2>材料リスト</h2> |
||||
{/* すべての材料情報を表示 */} |
||||
{!items.length |
||||
? (<p>+ボタンで材料を追加してください</p>) |
||||
: (<List>{items.map((item, index) => ( |
||||
|
||||
<ListItem |
||||
key={index} |
||||
sx={{ |
||||
bgcolor: 'background.paper', |
||||
mb: 1, |
||||
borderRadius: 1, |
||||
boxShadow: 1, |
||||
}} |
||||
> |
||||
<ListItemText primary={item.stuffName} /> |
||||
{/* 買い物リスト：食材情報記入ボタン */} |
||||
<ListItemSecondaryAction> |
||||
<Typography variant="body1" component="span" sx={{ marginRight: '1em' }}> |
||||
{`× ${item.amount}`} |
||||
</Typography> |
||||
{/* 買い物リスト：数量変更ボタン */} |
||||
<Tooltip title="数量変更"> |
||||
<IconButton sx={{ marginRight: 0, marginLeft: 0 }} edge="end" aria-label="数量変更" |
||||
onClick={() => { |
||||
setOpenAmountDialog(true) |
||||
setEditingItemIdx(index) |
||||
setEditingItem(item) |
||||
}} |
||||
> |
||||
<EditIcon /> |
||||
</IconButton> |
||||
</Tooltip> |
||||
{/* 買い物リスト：食材削除ボタン */} |
||||
<Tooltip title="項目を削除" |
||||
componentsProps={{ |
||||
tooltip: { sx: { backgroundColor: "white", color: "red", fontSize: "0.8rem", padding: "6px", borderRadius: "6px" } }, |
||||
}}> |
||||
<IconButton edge="end" sx={{ marginRight: 0, marginLeft: 0 }} aria-label="delete" |
||||
onClick={() => setItems([...items.slice(0, index), ...items.slice(index + 1)])}> |
||||
<DeleteIcon /> |
||||
</IconButton> |
||||
</Tooltip> |
||||
|
||||
</ListItemSecondaryAction> |
||||
|
||||
</ListItem> |
||||
|
||||
))}</List>)} |
||||
|
||||
|
||||
<div style={{ position: "fixed", left: "80%", transform: 'translateX(-50%)', bottom: "10%" }}> |
||||
<Box sx={{ textAlign: 'center' }}> |
||||
<Typography variant="caption">材料を追加</Typography> |
||||
</Box> |
||||
<Fab color="primary" onClick={() => setOpenAddDialog(true)}> |
||||
<AddIcon sx={{ fontSize: "1.5rem" }} /> |
||||
</Fab> |
||||
</div> |
||||
|
||||
<div style={{ position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "2%" }}> |
||||
<Button variant='contained' sx={{ fontSize: "1.0rem" }} |
||||
color="primary" onClick={handleAddRecipeToBuy}> |
||||
<ListAltIcon sx={{ fontSize: "1.5rem", marginRight: "0.5rem" }} /> |
||||
料理リストへ追加 |
||||
</Button> |
||||
</div> |
||||
|
||||
{/* 新規材料追加ダイアログ */} |
||||
<AddStuffAmountDialog openDialog={openAddDialog} setOpenDialog={setOpenAddDialog} newItem={newItem} setNewItem={setNewItem} |
||||
onSubmit={() => { |
||||
console.log('newItem:', newItem); |
||||
setItems([...items, newItem]); |
||||
setOpenAddDialog(false); |
||||
}} /> |
||||
|
||||
{/* 数量変更ダイアログ */} |
||||
<EditAmountDialog openDialog={openAmountDialog} setOpenDialog={setOpenAmountDialog} |
||||
editingItem={editingItem} |
||||
setEditingItem={(v) => setEditingItem({ ...editingItem, ...v })} |
||||
onSubmit={() => { |
||||
setItems([...items.slice(0, editingItemIdx), editingItem, ...items.slice(editingItemIdx + 1)]) |
||||
setOpenAmountDialog(false); |
||||
}} /> |
||||
|
||||
</Box> |
||||
); |
||||
}; |
||||
|
||||
export default AddDishes2; |
||||
Loading…
Reference in new issue