expcman
/
joint_exc
mirror of https://ivis.backlog.com/git/TRAIN2025_GROUP_K/joint_exc.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/feature-frontend-top' into develop-frontend

Browse Source
feature-frontend-top
Masaharu.Kato 4 months ago
parent df6972ad99 7f0097a8e0
commit 838283da9d
2 changed files with 102 additions and 89 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 177
      frontend/src/components/Layout.tsx
  2. 10
      frontend/src/pages/TaskListPage.tsx

177
frontend/src/components/Layout.tsx
Unescape View File

@ -38,27 +38,50 @@ const Layout: React.FC = () => {
const navigate = useNavigate();
const location = useLocation();
const [drawerOpen, setDrawerOpen] = useState(false);
const [bottomNavi, setBottomNavi] = useState(1);
/**
* ログアウト処理を行うハンドラー関数
* ローカルストレージからトークンを削除し、ログインページにリダイレクト
*/
const handleLogout = () => {
localStorage.removeItem('token');
navigate('/login');
};
const getTabIndex = (pathname: string) => {
switch (pathname) {
case '/stock':
return 0;
case '/tasks':
return 1;
case '/recipeList':
return 2;
default:
return 0;
}
};
const [bottomNavi, setBottomNavi] = useState(getTabIndex(location.pathname));
useEffect(() => {
setBottomNavi(getTabIndex(location.pathname));
}, [location.pathname]);
/**
* ログアウト処理を行うハンドラー関数
* ローカルストレージからトークンを削除し、ログインページにリダイレクト
*/
const handleLogout = () => {
localStorage.removeItem('token');
navigate('/login');
};
// メニューを開閉するハンドラー
const toggleDrawer = () => {
setDrawerOpen(!drawerOpen);
};
// メッセージ表示
// メニューを開閉するハンドラー
const toggleDrawer = () => {
setDrawerOpen(!drawerOpen);
};
// メッセージ表示
// ページ遷移後もメッセージを維持
useEffect(() => {
@ -91,67 +114,57 @@ const Layout: React.FC = () => {
sessionStorage.removeItem('globalMessage');
};
const handleBottomNavigation = (event: React.SyntheticEvent, newValue: any) => {
setBottomNavi(newValue);
switch(newValue) {
case 0:
navigate('stock');
break;
case 1:
navigate('tasks');
break;
case 2:
navigate('recipeList');
break;
}
// ここでルーティング処理などを行う
}
return (
<Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
{/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */}
<AppBar position="static" elevation={0}>
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
shopchop
</Typography>
<Button color="inherit" onClick={handleLogout}>
ログアウト
</Button>
</Toolbar>
</AppBar>
<Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
<BottomNavigation
showLabels
value={bottomNavi}
onChange={(event, newValue) => {
setBottomNavi(newValue);
switch(newValue) {
case 0:
navigate('stock');
break;
case 1:
navigate('tasks');
break;
case 2:
navigate('recipeList');
break;
}
// ここでルーティング処理などを行う
}}
>
<BottomNavigationAction label="在庫" icon={<InventoryIcon />} />
<BottomNavigationAction label="買うもの" icon={<ShoppingCartIcon />} />
<BottomNavigationAction label="レシピ" icon={<SoupKitchenIcon />} />
</BottomNavigation>
</Paper>
{/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
<Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>
<Container>
<MessageContext.Provider value={{ showErrorMessage, showWarningMessage, showSuccessMessage, showInfoMessage }}>
return (
<Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
{/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */}
<AppBar position="static" elevation={0}>
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
shopchop
</Typography>
<Button color="inherit" onClick={handleLogout}>
ログアウト
</Button>
</Toolbar>
</AppBar>
<Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: (theme) => theme.zIndex.drawer + 1 }} elevation={3}>
<BottomNavigation
showLabels
value={bottomNavi}
onChange={(event, newValue) => {
setBottomNavi(newValue);
switch (newValue) {
case 0:
navigate('stock');
break;
case 1:
navigate('tasks');
break;
case 2:
navigate('recipeList');
break;
}
// ここでルーティング処理などを行う
}}
>
<BottomNavigationAction label="在庫" icon={<InventoryIcon />} />
<BottomNavigationAction label="買うもの" icon={<ShoppingCartIcon />} />
<BottomNavigationAction label="レシピ" icon={<SoupKitchenIcon />} />
</BottomNavigation>
</Paper>
{/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
<Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>
<Container>
<MessageContext.Provider value={{ showErrorMessage, showWarningMessage, showSuccessMessage, showInfoMessage }}>
<MessageAlert
open={msgOpen}
message={msgText}
@ -160,11 +173,11 @@ const Layout: React.FC = () => {
/>
<Outlet /> {/* React Router の Outlet - 子ルートのコンポーネントがここにレンダリングされる */}
</MessageContext.Provider>
</Container>
</Container>
</Box>
</Box>
</Box>
);
};
);
};
export default Layout;
export default Layout;

10
frontend/src/pages/TaskListPage.tsx
Unescape View File

@ -330,21 +330,21 @@ const TaskListPage: React.FC = () => {
</List>
</div>
{/* 新規材料作成ボタン - 画面下部に固定表示 */}
<Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '20%', transform: 'translateX(-50%)' }}>
<Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
<Typography variant="caption" color="textSecondary">
材料のみ追加
材料の追加
</Typography>
</Box>
<Fab
color="primary"
sx={{ position: 'fixed', bottom: 90, left: '20%', transform: 'translateX(-50%)' }}
sx={{ position: 'fixed', bottom: 90, left: '80%', transform: 'translateX(-50%)' }}
onClick={() => setOpenAddToBuyDialog(true)}
>
<AddIcon />
</Fab>
{/*新規料理追加ボタン - 画面下部に固定表示 */}
<Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
{/* <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
<Typography variant="caption" color="textSecondary">
料理から追加
</Typography>
@ -359,7 +359,7 @@ const TaskListPage: React.FC = () => {
//selected={isSelected('/test')}
>
<SoupKitchenIcon />
</Fab>
</Fab> */}
{/* 買うものリストへの材料追加ダイアログ */}

Write Preview
Loading…
Cancel
Save