Align tables a bit better and add setting to show icons instead of product texts

2025-04-25 09:01:51 +03:00
parent 67acea9be4
commit a1f682e9fc
7 changed files with 85 additions and 29 deletions
--- a/src/app/components/MainGrid.tsx
+++ b/src/app/components/MainGrid.tsx
@@ -153,7 +153,7 @@ export const MainGrid = () => {
              <Grid
                container
                spacing={1}
-                sx={{ padding: 1 }}
+                sx={{ padding: 1, width: '100%' }}
                {...provided.droppableProps}
                ref={provided.innerRef}
              >
--- a/src/app/components/PlanetaryInteraction/PlanetTableRow.tsx
+++ b/src/app/components/PlanetaryInteraction/PlanetTableRow.tsx
@@ -1,5 +1,5 @@
 import { ColorContext, SessionContext } from "@/app/context/Context";
-import { PI_TYPES_MAP, STORAGE_IDS, STORAGE_CAPACITIES, PI_PRODUCT_VOLUMES } from "@/const";
+import { PI_TYPES_MAP, STORAGE_IDS, STORAGE_CAPACITIES, PI_PRODUCT_VOLUMES, EVE_IMAGE_URL } from "@/const";
 import { planetCalculations } from "@/planets";
 import { AccessToken, PlanetWithInfo } from "@/types";
 import CloseIcon from "@mui/icons-material/Close";
@@ -41,6 +41,7 @@ export const PlanetTableRow = ({
  character: AccessToken;
 }) => {
  const theme = useTheme();
+  const { showProductIcons } = useContext(SessionContext);

  const [planetRenderOpen, setPlanetRenderOpen] = useState(false);
  const [planetConfigOpen, setPlanetConfigOpen] = useState(false);
@@ -153,6 +154,39 @@ export const PlanetTableRow = ({
    });
  };

+  const renderProductDisplay = (typeId: number, amount?: number) => {
+    if (showProductIcons) {
+      return (
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
+          <Image
+            src={`${EVE_IMAGE_URL}/types/${typeId}/icon?size=32`}
+            alt={PI_TYPES_MAP[typeId].name}
+            width={32}
+            height={32}
+            style={{ marginRight: "5px" }}
+          />
+          {amount !== undefined && (
+            <Typography fontSize={theme.custom.smallText} style={{ marginLeft: "5px", flexShrink: 0 }}>
+              {amount}/h
+            </Typography>
+          )}
+        </div>
+      );
+    }
+    return (
+      <div style={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
+        <Typography fontSize={theme.custom.smallText}>
+          {PI_TYPES_MAP[typeId].name}
+        </Typography>
+        {amount !== undefined && (
+          <Typography fontSize={theme.custom.smallText} style={{ marginLeft: "5px", flexShrink: 0 }}>
+            {amount}/h
+          </Typography>
+        )}
+      </div>
+    );
+  };
+
  return (
    <>
      <TableRow
@@ -238,11 +272,12 @@ export const PlanetTableRow = ({
        <TableCell className="clickable-cell">{planet.upgrade_level}</TableCell>
        <TableCell className="clickable-cell">
          <div style={{ display: "flex", flexDirection: "column" }}>
+            {extractors.length === 0 &&<Typography fontSize={theme.custom.smallText}>No extractors</Typography>}
            {extractors.map((e, idx) => {
              return (
                <div
                  key={`${e}-${idx}-${character.character.characterId}`}
-                  style={{ display: "flex" }}
+                  style={{ display: "flex", alignItems: "center" }}
                >
                  <Typography
                    color={timeColor(e.expiry_time, colors)}
@@ -258,12 +293,7 @@ export const PlanetTableRow = ({
                      "STOPPED"
                    )}
                  </Typography>
-                  <Typography fontSize={theme.custom.smallText}>
-                    {
-                      PI_TYPES_MAP[e.extractor_details?.product_type_id ?? 0]
-                        ?.name
-                    }
-                  </Typography>
+                  {renderProductDisplay(e.extractor_details?.product_type_id ?? 0)}
                </div>
              );
            })}
@@ -273,12 +303,12 @@ export const PlanetTableRow = ({
          <div style={{ display: "flex", flexDirection: "column" }}>
            {Array.from(localProduction).map((schematic, idx) => {
              return (
-                <Typography
+                <div
                  key={`prod-${character.character.characterId}-${planet.planet_id}-${idx}`}
-                  fontSize={theme.custom.smallText}
+                  style={{ display: "flex", alignItems: "center" }}
                >
-                  {schematic[1].name}
-                </Typography>
+                  {renderProductDisplay(schematic[1].outputs[0].type_id)}
+                </div>
              );
            })}
          </div>
@@ -286,24 +316,24 @@ export const PlanetTableRow = ({
        <TableCell className="clickable-cell">
          <div style={{ display: "flex", flexDirection: "column" }}>
            {localImports.map((i) => (
-              <Typography
+              <div
                key={`import-${character.character.characterId}-${planet.planet_id}-${i.type_id}`}
-                fontSize={theme.custom.smallText}
+                style={{ display: "flex", alignItems: "center" }}
              >
-                {PI_TYPES_MAP[i.type_id].name} ({i.quantity * i.factoryCount}/h)
-              </Typography>
+                {renderProductDisplay(i.type_id, i.quantity * i.factoryCount)}
+              </div>
            ))}
          </div>
        </TableCell>
        <TableCell className="clickable-cell">
          <div style={{ display: "flex", flexDirection: "column" }}>
            {localExports.map((exports) => (
-              <Typography
+              <div
                key={`export-${character.character.characterId}-${planet.planet_id}-${exports.typeId}`}
-                fontSize={theme.custom.smallText}
+                style={{ display: "flex", alignItems: "center" }}
              >
-                {PI_TYPES_MAP[exports.typeId].name}
-              </Typography>
+                {renderProductDisplay(exports.typeId, exports.amount)}
+              </div>
            ))}
          </div>
        </TableCell>
@@ -371,6 +401,7 @@ export const PlanetTableRow = ({
        </TableCell>
        <TableCell className="clickable-cell">
          <div style={{ display: "flex", flexDirection: "column" }}>
+            {storageFacilities.length === 0 &&<Typography fontSize={theme.custom.smallText}>No storage</Typography>}
            {storageFacilities
              .sort((a, b) => {
                const isALaunchpad = a.type_id === 2256 || a.type_id === 2542 || a.type_id === 2543 || a.type_id === 2544 || a.type_id === 2552 || a.type_id === 2555 || a.type_id === 2556 || a.type_id === 2557;
--- a/src/app/components/PlanetaryInteraction/PlanetaryInteractionRow.tsx
+++ b/src/app/components/PlanetaryInteraction/PlanetaryInteractionRow.tsx
@@ -36,8 +36,8 @@ const PlanetaryIteractionTable = ({

  return (
    <StackItem width="100%">
-      <TableContainer component={Paper}>
-        <Table size="small" aria-label="a dense table">
+      <TableContainer component={Paper} sx={{ width: '100%' }}>
+        <Table size="small" aria-label="a dense table" sx={{ width: '100%' }}>
          <TableHead>
            <TableRow>
              <TableCell width="8%">
--- a/src/app/components/Settings/SettingsButtons.tsx
+++ b/src/app/components/Settings/SettingsButtons.tsx
@@ -13,13 +13,15 @@ import {
  Typography,
  TextField,
  Box,
+  FormControlLabel,
+  Checkbox,
 } from "@mui/material";
 import { ColorChangeHandler, ColorResult, CompactPicker } from "react-color";
 import React, { useState, useContext } from "react";

 export const SettingsButton = () => {
  const { colors, setColors } = useContext(ColorContext);
-  const { balanceThreshold, setBalanceThreshold } = useContext(SessionContext);
+  const { balanceThreshold, setBalanceThreshold, showProductIcons, setShowProductIcons } = useContext(SessionContext);
  const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
@@ -45,6 +47,10 @@ export const SettingsButton = () => {
    }
  };

+  const handleShowProductIconsChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setShowProductIcons(event.target.checked);
+  };
+
  return (
    <Tooltip title="Toggle settings dialog">
      <>
@@ -57,12 +63,23 @@ export const SettingsButton = () => {
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
-
          <DialogTitle id="alert-dialog-title">
            {"Settings"}
          </DialogTitle>

          <DialogContent style={{ paddingTop: "1rem" }}>
+            <Box sx={{ mt: 2 }}>
+              <Typography variant="subtitle1">Display Settings</Typography>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={showProductIcons}
+                    onChange={handleShowProductIconsChange}
+                  />
+                }
+                label="Show product icons instead of names"
+              />
+            </Box>
            <Box sx={{ mt: 2 }}>
              <Typography variant="subtitle1">Balance Threshold</Typography>
              <TextField
@@ -87,7 +104,6 @@ export const SettingsButton = () => {
                </div>
              );
            })}
-            
          </DialogContent>
          <DialogActions>
            <Button onClick={handleClose}>Close</Button>
--- a/src/app/components/Summary/Summary.tsx
+++ b/src/app/components/Summary/Summary.tsx
@@ -199,8 +199,8 @@ export const Summary = ({ characters }: { characters: AccessToken[] }) => {
              sx={{ width: '100px' }}
            />
          </Box>
-          <TableContainer component={Paper}>
-            <Table size="small" aria-label="a dense table">
+          <TableContainer component={Paper} sx={{ width: '100%' }}>
+            <Table size="small" aria-label="a dense table" sx={{ width: '100%' }}>
              <TableHead>
                <TableRow>
                  <TableCell width="20%">
--- a/src/app/context/Context.tsx
+++ b/src/app/context/Context.tsx
@@ -37,6 +37,8 @@ export const SessionContext = createContext<{
  }) => PlanetConfig;
  balanceThreshold: number;
  setBalanceThreshold: Dispatch<SetStateAction<number>>;
+  showProductIcons: boolean;
+  setShowProductIcons: (show: boolean) => void;
 }>({
  sessionReady: false,
  refreshSession: () => {},
@@ -62,7 +64,10 @@ export const SessionContext = createContext<{
  },
  balanceThreshold: 1000,
  setBalanceThreshold: () => {},
+  showProductIcons: false,
+  setShowProductIcons: () => {},
 });
+
 export type ColorSelectionType = {
  defaultColor: string;
  expiredColor: string;
@@ -84,6 +89,7 @@ export const defaultColors = {
  dayColor: "#2F695A",
  twoDaysColor: "#2F695A",
 };
+
 export const ColorContext = createContext<{
  colors: ColorSelectionType;
  setColors: (colors: ColorSelectionType) => void;
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -30,6 +30,7 @@ const Home = () => {
    undefined,
  );
  const [balanceThreshold, setBalanceThreshold] = useState(1000);
+  const [showProductIcons, setShowProductIcons] = useState(false);

  const [colors, setColors] = useState<ColorSelectionType>(defaultColors);
  const [alertMode, setAlertMode] = useState(false);
@@ -278,6 +279,8 @@ const Home = () => {
        readPlanetConfig,
        balanceThreshold,
        setBalanceThreshold,
+        showProductIcons,
+        setShowProductIcons,
      }}
    >
      <CharacterContext.Provider