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