add import tooltip to show import spesifics

This commit is contained in:
calli
2025-04-30 17:30:36 +03:00
parent 370400ce99
commit e085fcd59b

View File

@@ -358,30 +358,37 @@ export const PlanetTableRow = ({
const remainingAmount = Math.max(0, totalAmount - (consumptionPerHour * hoursSinceUpdate)); const remainingAmount = Math.max(0, totalAmount - (consumptionPerHour * hoursSinceUpdate));
const hoursUntilDepletion = consumptionPerHour > 0 ? remainingAmount / consumptionPerHour : 0; const hoursUntilDepletion = consumptionPerHour > 0 ? remainingAmount / consumptionPerHour : 0;
// Calculate monthly cost
const price = piPrices?.appraisal.items.find((a) => a.typeID === i.type_id)?.prices.sell.min ?? 0;
const monthlyCost = (consumptionPerHour * 24 * 30 * price) / 1000000; // Cost in millions
return ( return (
<div <div
key={`import-${character.character.characterId}-${planet.planet_id}-${i.type_id}`} key={`import-${character.character.characterId}-${planet.planet_id}-${i.type_id}`}
style={{ display: "flex", alignItems: "center" }} style={{ display: "flex", alignItems: "center" }}
> >
{renderProductDisplay(i.type_id, i.quantity * i.factoryCount)} <Tooltip title={
{totalAmount > 0 && ( <>
<Tooltip title={ <div>Total in storage: {totalAmount.toFixed(1)} units</div>
<> <div>Consumption rate: {consumptionPerHour.toFixed(1)} units/hour</div>
<div>Total in storage: {totalAmount.toFixed(1)} units</div> <div>Last update: {lastUpdate.toFormat('yyyy-MM-dd HH:mm:ss')}</div>
<div>Consumption rate: {consumptionPerHour.toFixed(1)} units/hour</div> <div>Will be depleted in {hoursUntilDepletion.toFixed(1)} hours</div>
<div>Last update: {lastUpdate.toFormat('yyyy-MM-dd HH:mm:ss')}</div> <div>Monthly cost: {monthlyCost.toFixed(2)}M ISK</div>
<div>Will be depleted in {hoursUntilDepletion.toFixed(1)} hours</div> </>
</> }>
}> <div style={{ display: "flex", alignItems: "center" }}>
<Typography {renderProductDisplay(i.type_id, i.quantity * i.factoryCount)}
fontSize={theme.custom.smallText} {totalAmount > 0 && (
color={hoursUntilDepletion < 24 ? 'error' : hoursUntilDepletion < 48 ? 'warning' : 'success'} <Typography
sx={{ ml: 1 }} fontSize={theme.custom.smallText}
> color={hoursUntilDepletion < 24 ? 'error' : hoursUntilDepletion < 48 ? 'warning' : 'success'}
({hoursUntilDepletion.toFixed(1)}h) sx={{ ml: 1 }}
</Typography> >
</Tooltip> ({hoursUntilDepletion.toFixed(1)}h)
)} </Typography>
)}
</div>
</Tooltip>
</div> </div>
); );
})} })}