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

Move extraction details expand to row click

Browse Source
This commit is contained in:
calli
2025-04-23 11:32:44 +03:00
parent eca35f51ac
commit a871bac35f
1 changed files with 25 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/app/components/PlanetaryInteraction/PlanetTableRow.tsx
View File

@@ -23,8 +23,6 @@ import { ExtractionSimulationDisplay } from './ExtractionSimulationDisplay';
import { ExtractionSimulationTooltip } from './ExtractionSimulationTooltip'; import { ExtractionSimulationTooltip } from './ExtractionSimulationTooltip';
import { ProductionNode } from './ExtractionSimulation'; import { ProductionNode } from './ExtractionSimulation';
import { Collapse, Box, Stack } from "@mui/material"; import { Collapse, Box, Stack } from "@mui/material";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
const Transition = forwardRef(function Transition( const Transition = forwardRef(function Transition(
props: TransitionProps & { props: TransitionProps & {
@@ -159,9 +157,22 @@ export const PlanetTableRow = ({
<> <>
<TableRow <TableRow
style={{ visibility: alertModeVisibility(alertMode, expired) }} style={{ visibility: alertModeVisibility(alertMode, expired) }}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }} sx={{
"&:last-child td, &:last-child th": { border: 0 },
cursor: 'pointer',
'&:hover': {
backgroundColor: 'action.hover'
}
}}
onClick={(e) => {
// Only trigger if clicking a cell with the clickable-cell class
if (!(e.target as HTMLElement).closest('.clickable-cell')) return;
if (extractors.length > 0) {
setSimulationOpen(!simulationOpen);
}
}}
> >
<TableCell component="th" scope="row"> <TableCell component="th" scope="row" className="clickable-cell">
<Tooltip <Tooltip
title={`${ title={`${
planet.planet_type.charAt(0).toUpperCase() + planet.planet_type.charAt(0).toUpperCase() +
@@ -225,8 +236,8 @@ export const PlanetTableRow = ({
</div> </div>
</Tooltip> </Tooltip>
</TableCell> </TableCell>
<TableCell>{planet.upgrade_level}</TableCell> <TableCell className="clickable-cell">{planet.upgrade_level}</TableCell>
<TableCell> <TableCell className="clickable-cell">
<div style={{ display: "flex", flexDirection: "column" }}> <div style={{ display: "flex", flexDirection: "column" }}>
{extractors.map((e, idx) => { {extractors.map((e, idx) => {
return ( return (
@@ -259,7 +270,7 @@ export const PlanetTableRow = ({
})} })}
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell className="clickable-cell">
<div style={{ display: "flex", flexDirection: "column" }}> <div style={{ display: "flex", flexDirection: "column" }}>
{Array.from(localProduction).map((schematic, idx) => { {Array.from(localProduction).map((schematic, idx) => {
return ( return (
@@ -273,7 +284,7 @@ export const PlanetTableRow = ({
})} })}
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell className="clickable-cell">
<div style={{ display: "flex", flexDirection: "column" }}> <div style={{ display: "flex", flexDirection: "column" }}>
{localImports.map((i) => ( {localImports.map((i) => (
<Typography <Typography
@@ -285,7 +296,7 @@ export const PlanetTableRow = ({
))} ))}
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell className="clickable-cell">
<div style={{ display: "flex", flexDirection: "column" }}> <div style={{ display: "flex", flexDirection: "column" }}>
{localExports.map((exports) => ( {localExports.map((exports) => (
<Typography <Typography
@@ -314,7 +325,7 @@ export const PlanetTableRow = ({
))} ))}
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell className="clickable-cell">
<div style={{ display: "flex", flexDirection: "column" }}> <div style={{ display: "flex", flexDirection: "column" }}>
{localExports.map((exports) => ( {localExports.map((exports) => (
<Typography <Typography
@@ -326,7 +337,7 @@ export const PlanetTableRow = ({
))} ))}
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell className="clickable-cell">
<div <div
style={{ style={{
display: "flex", display: "flex",
@@ -359,7 +370,7 @@ export const PlanetTableRow = ({
})} })}
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell className="clickable-cell">
<div style={{ display: "flex", flexDirection: "column" }}> <div style={{ display: "flex", flexDirection: "column" }}>
{storageFacilities {storageFacilities
.sort((a, b) => { .sort((a, b) => {
@@ -401,7 +412,7 @@ export const PlanetTableRow = ({
})} })}
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell className="menu-cell">
<IconButton <IconButton
aria-label="more" aria-label="more"
aria-controls="planet-menu" aria-controls="planet-menu"
@@ -423,14 +434,6 @@ export const PlanetTableRow = ({
}}> }}>
Configure Planet Configure Planet
</MenuItem> </MenuItem>
{extractors.length > 0 && (
<MenuItem onClick={() => {
setSimulationOpen(!simulationOpen);
handleMenuClose();
}}>
{simulationOpen ? 'Hide Extraction Simulation' : 'Show Extraction Simulation'}
</MenuItem>
)}
<MenuItem onClick={() => { <MenuItem onClick={() => {
handle3DrenderOpen(); handle3DrenderOpen();
handleMenuClose(); handleMenuClose();
@@ -441,7 +444,7 @@ export const PlanetTableRow = ({
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell colSpan={6} style={{ paddingBottom: 0, paddingTop: 0 }}> <TableCell colSpan={6} style={{ paddingBottom: 0, paddingTop: 0, border: 'none' }}>
<Collapse in={simulationOpen} timeout="auto" unmountOnExit> <Collapse in={simulationOpen} timeout="auto" unmountOnExit>
<Box sx={{ my: 2 }}> <Box sx={{ my: 2 }}>
<ExtractionSimulationDisplay <ExtractionSimulationDisplay