dave/eve-pi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wrap totals in collapsible

Browse Source
This commit is contained in:
Calli
2024-04-28 10:08:55 +03:00
parent 0a0f41cc25
commit 8190351e51
1 changed files with 57 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/app/components/Summary/Summary.tsx
View File

@@ -15,8 +15,12 @@ import {
useTheme,
Stack,
styled,
Accordion,
AccordionSummary,
AccordionDetails,
} from "@mui/material";
import { useContext } from "react";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
const StackItem = styled(Stack)(({ theme }) => ({
...theme.typography.body2,
@@ -75,51 +79,59 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
return (
<StackItem width="100%">
<h2>Totals</h2>
<TableContainer component={Paper}>
<Table size="small" aria-label="a dense table">
<TableHead>
<TableRow>
<TableCell width="40%">
<Tooltip title="What exports factories are producing">
<Typography fontSize={theme.custom.smallText}>
Exports
</Typography>
</Tooltip>
</TableCell>
<TableCell width="10%">
<Tooltip title="How many units per hour factories are producing">
<Typography fontSize={theme.custom.smallText}>u/h</Typography>
</Tooltip>
</TableCell>
<TableCell width="10%" align="right">
<Tooltip title="How many million ISK per month this planet is exporting (Jita sell min)">
<Typography fontSize={theme.custom.smallText}>
ISK/M
</Typography>
</Tooltip>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{withProductNameAndPrice.map((product) => (
<SummaryRow
key={product.materialName}
material={product.materialName}
amount={product.amount}
price={product.price}
/>
))}
<SummaryRow
material="Total"
price={withProductNameAndPrice.reduce(
(amount, p) => amount + p.price,
0,
)}
/>
</TableBody>
</Table>
</TableContainer>
<Accordion style={{ width: "100%" }}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<h2>Totals</h2>
</AccordionSummary>
<AccordionDetails>
<TableContainer component={Paper}>
<Table size="small" aria-label="a dense table">
<TableHead>
<TableRow>
<TableCell width="40%">
<Tooltip title="What exports factories are producing">
<Typography fontSize={theme.custom.smallText}>
Exports
</Typography>
</Tooltip>
</TableCell>
<TableCell width="10%">
<Tooltip title="How many units per hour factories are producing">
<Typography fontSize={theme.custom.smallText}>
u/h
</Typography>
</Tooltip>
</TableCell>
<TableCell width="10%" align="right">
<Tooltip title="How many million ISK per month this planet is exporting (Jita sell min)">
<Typography fontSize={theme.custom.smallText}>
ISK/M
</Typography>
</Tooltip>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{withProductNameAndPrice.map((product) => (
<SummaryRow
key={product.materialName}
material={product.materialName}
amount={product.amount}
price={product.price}
/>
))}
<SummaryRow
material="Total"
price={withProductNameAndPrice.reduce(
(amount, p) => amount + p.price,
0,
)}
/>
</TableBody>
</Table>
</TableContainer>
</AccordionDetails>
</Accordion>
</StackItem>
);
};