added summary dialog

summary as button added statistic into summary
neeia · Mar 8, 2025 · d0e21f3 · d0e21f3
1 parent 9859fb6
commit d0e21f3
Show file tree

Hide file tree

Showing 2 changed files with 446 additions and 7 deletions.
diff --git a/src/components/planner/depot/MaterialsNeeded.tsx b/src/components/planner/depot/MaterialsNeeded.tsx
@@ -12,6 +12,7 @@ import ItemNeeded from "./ItemNeeded";
 import getGoalIngredients from "util/fns/depot/getGoalIngredients";
 import DepotItem from "types/depotItem";
 import ExportImportDialog from "./ExportImportDialog";
+import MaterialsSummaryDialog from "./MaterialsSummaryDialog";
 import Board from "components/base/Board";
 import canCompleteByCrafting from "util/fns/depot/canCompleteByCrafting";
 import { LocalStorageSettings } from "types/localStorageSettings";
@@ -43,6 +44,8 @@ const MaterialsNeeded = React.memo((props: Props) => {
 
   const [exportImportOpen, setExportImportOpen] = useState<boolean>(false);
 
+  const [summaryOpen, setSummaryOpen] = useState<boolean>(false);
+
   const {setAnchorEl, menuProps, menuButtonProps} = useMenu();
 
   const craftToggleTooltips = ["Toggle only craftable materials ON - use with Goals and Filters","Toggle all crafting states ON","Reset all crafting states"];
@@ -78,6 +81,7 @@ const MaterialsNeeded = React.memo((props: Props) => {
   const [ rawValues, setRawValues ] = useState({} as Record<string, DepotItem>);
   //states to keep data beetwen renders
   const [ savedStates, setSavedStates ] = useState({
+    goalsMaterials: {} as Record<string, number>,
     materialsNeeded: {} as Record<string, number>,
     craftableItems: {} as Record<string, boolean>,
     sortedMaterialsNeeded: [] as [string, number][],
@@ -100,6 +104,8 @@ const MaterialsNeeded = React.memo((props: Props) => {
         });
       }
 
+      const goalsMaterials = {...materialsNeeded}; 
+
       // 3. calculate what ingredients can be fulfilled by crafting
       const _depot = { ...depot, ..._rawValues }; // need to hypothetically deduct from stock
       const { craftableItems, ingredientToCraftedItemsMapping } = canCompleteByCrafting(
@@ -132,6 +138,7 @@ const MaterialsNeeded = React.memo((props: Props) => {
       });
 
       setSavedStates({
+        goalsMaterials,
         materialsNeeded,
         craftableItems,
         sortedMaterialsNeeded,
@@ -359,22 +366,27 @@ const MaterialsNeeded = React.memo((props: Props) => {
     <>
       <Board
         title={
-          !depotIsUnsaved ?
-          <Box display="flex" alignItems="center">
-            <Typography variant="h2">Depot</Typography>
+          !depotIsUnsaved
+            ? <Box display="flex" alignItems="center" paddingRight={1}>
+              <Typography variant="h2">Depot</Typography>
             </Box>
-            : (<Box display="flex"
-              alignItems="center"
+            : (<Box display="flex" alignItems="center" paddingRight={1}
               sx={{ flexFlow: "row nowrap", gap: { xs: 1, md: 3 } }}>
-              <Typography variant="h2">Depot</Typography>
+              <Typography variant="h2" sx={{ color: { xs: "primary.main", lg: "unset" } }}>Depot</Typography>
               <Tooltip title="on 5s idle: ↑ upload changes to DB ↑">
                 <Typography variant="h3"
-                  sx={{ color: "#FFD440" }}>unsaved</Typography>
+                  sx={{ color: "primary.main", display: { xs: "none", lg: "unset" } }}>unsaved</Typography>
               </Tooltip>
             </Box>)
         }
         TitleAction={
           <Box display="flex" gap={1}>
+            <Button
+              onClick={() => setSummaryOpen(true)}
+              variant="contained"
+              color="primary">
+              Summary
+            </Button>
             <Tooltip arrow title={craftToggleTooltips[craftToggle]}>
               <Button
                 onClick={handleCraftingToggleAll}
@@ -442,6 +454,7 @@ const MaterialsNeeded = React.memo((props: Props) => {
               xs: "repeat(auto-fill, minmax(96px, 1fr))",
               sm: "repeat(auto-fill, minmax(108px, 1fr))",
             },
+            position: "relative",
           }}
         >
           {savedStates.sortedMaterialsNeeded.map(([itemId, needed]) => (
@@ -481,6 +494,16 @@ const MaterialsNeeded = React.memo((props: Props) => {
         }}
         goals={goalData}
       />
+      <MaterialsSummaryDialog
+        depot={depot}
+        goalData={goalData}
+        expOwned={savedStates.expOwned}
+        goalsMaterials={savedStates.goalsMaterials}
+        open={summaryOpen}
+        onClose={() => {
+          setSummaryOpen(false);
+        }}
+      />
     </>
   );
 });