Hoist planet fetch to root and add totals calculation

This commit is contained in:
Calli
2024-04-28 09:45:29 +03:00
parent cfa0a86b99
commit 4066125333
8 changed files with 313 additions and 218 deletions

View File

@@ -10,6 +10,7 @@ import { AccountCard } from "./Account/AccountCard";
import { AccessToken } from "@/types";
import { CharacterContext, SessionContext } from "../context/Context";
import ResponsiveAppBar from "./AppBar/AppBar";
import { Summary } from "./Summary/Summary";
interface Grouped {
[key: string]: AccessToken[];
@@ -58,7 +59,7 @@ export const MainGrid = () => {
cardMinHeight: compactMode ? 100 : 170,
stoppedPosition: compactMode ? 32 : 48,
},
})
}),
);
useEffect(() => {
@@ -74,7 +75,7 @@ export const MainGrid = () => {
cardMinHeight: compactMode ? 100 : 170,
stoppedPosition: compactMode ? 32 : 48,
},
})
}),
);
}, [compactMode]);
@@ -83,6 +84,7 @@ export const MainGrid = () => {
<CssBaseline />
<Box sx={{ flexGrow: 1 }}>
<ResponsiveAppBar />
<Summary characters={characters} />
<Grid container spacing={1}>
{Object.values(groupByAccount).map((g, id) => (
<Grid

View File

@@ -1,7 +1,12 @@
import { Stack, Typography, styled, useTheme } from "@mui/material";
import Image from "next/image";
import { AccessToken, Planet, PlanetInfo, PlanetInfoUniverse } from "@/types";
import { Api } from "@/esi-api";
import {
AccessToken,
Planet,
PlanetInfo,
PlanetInfoUniverse,
PlanetWithInfo,
} from "@/types";
import React, { forwardRef, useContext, useEffect, useState } from "react";
import { DateTime } from "luxon";
import { EXTRACTOR_TYPE_IDS } from "@/const";
@@ -15,8 +20,12 @@ import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import CloseIcon from "@mui/icons-material/Close";
import Button from "@mui/material/Button";
import { alertModeVisibility, extractorsHaveExpired, timeColor } from "./timeColors";
import { ColorContext, SessionContext, } from "@/app/context/Context";
import {
alertModeVisibility,
extractorsHaveExpired,
timeColor,
} from "./timeColors";
import { ColorContext, SessionContext } from "@/app/context/Context";
const StackItem = styled(Stack)(({ theme }) => ({
...theme.typography.body2,
@@ -37,21 +46,16 @@ const Transition = forwardRef(function Transition(
});
export const PlanetCard = ({
planet,
character,
planet,
}: {
planet: Planet;
character: AccessToken;
planet: PlanetWithInfo;
}) => {
const { alertMode } = useContext(SessionContext);
const [planetInfo, setPlanetInfo] = useState<PlanetInfo | undefined>(
undefined,
);
const [planetInfoUniverse, setPlanetInfoUniverse] = useState<
PlanetInfoUniverse | undefined
>(undefined);
const planetInfo = planet.info;
const planetInfoUniverse = planet.infoUniverse;
const [planetRenderOpen, setPlanetRenderOpen] = useState(false);
@@ -71,40 +75,10 @@ export const PlanetCard = ({
.filter((p) => EXTRACTOR_TYPE_IDS.some((e) => e === p.type_id))
.map((p) => p.expiry_time)) ??
[];
const getPlanet = async (
character: AccessToken,
planet: Planet,
): Promise<PlanetInfo> => {
const api = new Api();
const planetInfo = (
await api.v3.getCharactersCharacterIdPlanetsPlanetId(
character.character.characterId,
planet.planet_id,
{
token: character.access_token,
},
)
).data;
return planetInfo;
};
const getPlanetUniverse = async (
planet: Planet,
): Promise<PlanetInfoUniverse> => {
const api = new Api();
const planetInfo = (
await api.v1.getUniversePlanetsPlanetId(planet.planet_id)
).data;
return planetInfo;
};
const { colors } = useContext(ColorContext);
const expired = extractorsHaveExpired(extractorsExpiryTime)
const expired = extractorsHaveExpired(extractorsExpiryTime);
useEffect(() => {
getPlanet(character, planet).then(setPlanetInfo);
getPlanetUniverse(planet).then(setPlanetInfoUniverse);
}, [planet, character]);
return (
<StackItem
alignItems="flex-start"
@@ -124,7 +98,6 @@ export const PlanetCard = ({
/>
{expired && (
<Image
unoptimized
width={32}
height={32}
src={`/stopped.png`}

View File

@@ -1,12 +1,7 @@
import { SessionContext, ColorContext } from "@/app/context/Context";
import {
EXTRACTOR_TYPE_IDS,
FACTORY_IDS,
PI_SCHEMATICS,
PI_TYPES_MAP,
} from "@/const";
import { Api } from "@/esi-api";
import { AccessToken, Planet, PlanetInfo, PlanetInfoUniverse } from "@/types";
import { PI_TYPES_MAP } from "@/const";
import { AccessToken, PlanetWithInfo } from "@/types";
import { planetCalculations } from "@/planets";
import CloseIcon from "@mui/icons-material/Close";
import { Button, Tooltip, Typography, useTheme } from "@mui/material";
import AppBar from "@mui/material/AppBar";
@@ -19,10 +14,10 @@ import Toolbar from "@mui/material/Toolbar";
import { TransitionProps } from "@mui/material/transitions";
import { DateTime } from "luxon";
import Image from "next/image";
import React, { forwardRef, useContext, useEffect, useState } from "react";
import React, { forwardRef, useContext, useState } from "react";
import Countdown from "react-countdown";
import PinsCanvas3D from "./PinsCanvas3D";
import { timeColor, extractorsHaveExpired, alertModeVisibility } from "./timeColors";
import { timeColor, alertModeVisibility } from "./timeColors";
const Transition = forwardRef(function Transition(
props: TransitionProps & {
@@ -37,7 +32,7 @@ export const PlanetTableRow = ({
planet,
character,
}: {
planet: Planet;
planet: PlanetWithInfo;
character: AccessToken;
}) => {
const theme = useTheme();
@@ -53,131 +48,16 @@ export const PlanetTableRow = ({
};
const { piPrices, alertMode } = useContext(SessionContext);
const [planetInfo, setPlanetInfo] = useState<PlanetInfo | undefined>(
undefined,
);
const [planetInfoUniverse, setPlanetInfoUniverse] = useState<
PlanetInfoUniverse | undefined
>(undefined);
const [extractors, setExtractors] = useState<PlanetInfo["pins"]>([]);
const [production, setProduction] = useState(
new Map<SchematicId, (typeof PI_SCHEMATICS)[number]>(),
);
const [imports, setImports] = useState<
(typeof PI_SCHEMATICS)[number]["inputs"]
>([]);
const [exports, setExports] = useState<{ typeId: number; amount: number }[]>(
[],
);
type SchematicId = number;
const getPlanet = async (
character: AccessToken,
planet: Planet,
): Promise<PlanetInfo> => {
const api = new Api();
const planetRes = await api.v3.getCharactersCharacterIdPlanetsPlanetId(
character.character.characterId,
planet.planet_id,
{
token: character.access_token,
},
);
const planetInfo = planetRes.data;
setExtractors(
planetInfo.pins.filter((p) =>
EXTRACTOR_TYPE_IDS.some((e) => e === p.type_id),
),
);
const localProduction = planetInfo.pins
.filter((p) => FACTORY_IDS().some((e) => e.type_id === p.type_id))
.reduce((acc, f) => {
if (f.schematic_id) {
const schematic = PI_SCHEMATICS.find(
(s) => s.schematic_id == f.schematic_id,
);
if (schematic) acc.set(f.schematic_id, schematic);
}
return acc;
}, new Map<SchematicId, (typeof PI_SCHEMATICS)[number]>());
setProduction(localProduction);
const locallyProduced = Array.from(localProduction)
.flatMap((p) => p[1].outputs)
.map((p) => p.type_id);
const locallyConsumed = Array.from(localProduction)
.flatMap((p) => p[1].inputs)
.map((p) => p.type_id);
const locallyExcavated = planetInfo.pins
.filter((p) => EXTRACTOR_TYPE_IDS.some((e) => e === p.type_id))
.map((e) => e.extractor_details?.product_type_id ?? 0);
const localImports = Array.from(localProduction)
.flatMap((p) => p[1].inputs)
.filter(
(p) =>
![...locallyProduced, ...locallyExcavated].some(
(lp) => lp === p.type_id,
),
);
const localExports = locallyProduced
.filter((p) => !locallyConsumed.some((lp) => lp === p))
.map((typeId) => {
const outputs = PI_SCHEMATICS.flatMap((s) => s.outputs).find(
(s) => s.type_id === typeId,
);
if (!outputs) return { typeId, amount: 0 };
const cycleTime =
PI_SCHEMATICS.find((s) => s.schematic_id === outputs.schematic_id)
?.cycle_time ?? 3600;
const factoriesProducing = planetInfo.pins
.filter((p) => FACTORY_IDS().some((e) => e.type_id === p.type_id))
.filter((f) => f.schematic_id === outputs?.schematic_id);
const amount = outputs.quantity
? factoriesProducing.length * outputs.quantity * (3600 / cycleTime)
: 0;
return {
typeId,
amount,
};
});
setImports(localImports);
setExports(localExports);
return planetInfo;
};
const getPlanetUniverse = async (
planet: Planet,
): Promise<PlanetInfoUniverse> => {
const api = new Api();
const planetInfo = (
await api.v1.getUniversePlanetsPlanetId(planet.planet_id)
).data;
return planetInfo;
};
useEffect(() => {
getPlanet(character, planet).then(setPlanetInfo);
getPlanetUniverse(planet).then(setPlanetInfoUniverse);
}, [planet, character]);
const expired = extractorsHaveExpired(extractors.map(e => e.expiry_time))
const planetInfo = planet.info;
const planetInfoUniverse = planet.infoUniverse;
const { expired, extractors, localProduction, localImports, localExports } =
planetCalculations(planet);
const { colors } = useContext(ColorContext);
return (
<TableRow style={{ visibility: alertModeVisibility(alertMode, expired) }} sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
<TableRow
style={{ visibility: alertModeVisibility(alertMode, expired) }}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell component="th" scope="row">
<Tooltip
title={`${
@@ -233,7 +113,7 @@ export const PlanetTableRow = ({
</TableCell>
<TableCell>
<div style={{ display: "flex", flexDirection: "column" }}>
{Array.from(production).map((schematic, idx) => {
{Array.from(localProduction).map((schematic, idx) => {
return (
<Typography
key={`prod-${character.character.characterId}-${planet.planet_id}-${idx}`}
@@ -247,7 +127,7 @@ export const PlanetTableRow = ({
</TableCell>
<TableCell>
<div style={{ display: "flex", flexDirection: "column" }}>
{imports.map((i) => (
{localImports.map((i) => (
<Typography
key={`import-${character.character.characterId}-${planet.planet_id}-${i.type_id}`}
fontSize={theme.custom.smallText}
@@ -259,7 +139,7 @@ export const PlanetTableRow = ({
</TableCell>
<TableCell>
<div style={{ display: "flex", flexDirection: "column" }}>
{exports.map((exports) => (
{localExports.map((exports) => (
<Typography
key={`export-${character.character.characterId}-${planet.planet_id}-${exports.typeId}`}
fontSize={theme.custom.smallText}
@@ -271,7 +151,7 @@ export const PlanetTableRow = ({
</TableCell>
<TableCell>
<div style={{ display: "flex", flexDirection: "column" }}>
{exports.map((exports) => (
{localExports.map((exports) => (
<Typography
key={`export-uph-${character.character.characterId}-${planet.planet_id}-${exports.typeId}`}
fontSize={theme.custom.smallText}
@@ -290,7 +170,7 @@ export const PlanetTableRow = ({
textAlign: "end",
}}
>
{exports.map((e) => {
{localExports.map((e) => {
const valueInMillions =
(((piPrices?.appraisal.items.find((a) => a.typeID === e.typeId)
?.prices.sell.min ?? 0) *

View File

@@ -1,7 +1,5 @@
import { Api } from "@/esi-api";
import { AccessToken, Planet } from "@/types";
import { AccessToken } from "@/types";
import { Stack, Tooltip, Typography, styled, useTheme } from "@mui/material";
import { useEffect, useState } from "react";
import { PlanetCard } from "./PlanetCard";
import { NoPlanetCard } from "./NoPlanetCard";
import Table from "@mui/material/Table";
@@ -21,25 +19,10 @@ const StackItem = styled(Stack)(({ theme }) => ({
alignItems: "center",
}));
const getPlanets = async (character: AccessToken): Promise<Planet[]> => {
const api = new Api();
const planets = (
await api.v1.getCharactersCharacterIdPlanets(
character.character.characterId,
{
token: character.access_token,
}
)
).data;
return planets;
};
const PlanetaryIteractionTable = ({
character,
planets,
}: {
character: AccessToken;
planets: Planet[];
}) => {
const theme = useTheme();
@@ -102,7 +85,7 @@ const PlanetaryIteractionTable = ({
</TableRow>
</TableHead>
<TableBody>
{planets.map((planet) => (
{character.planets.map((planet) => (
<PlanetTableRow
key={`${character.character.characterId}-${planet.planet_id}`}
planet={planet}
@@ -118,22 +101,20 @@ const PlanetaryIteractionTable = ({
const PlanetaryInteractionIconsRow = ({
character,
planets,
}: {
character: AccessToken;
planets: Planet[];
}) => {
return (
<StackItem>
<Stack spacing={2} direction="row" flexWrap="wrap">
{planets.map((planet) => (
{character.planets.map((planet) => (
<PlanetCard
key={`${character.character.characterId}-${planet.planet_id}`}
planet={planet}
character={character}
/>
))}
{Array.from(Array(6 - planets.length).keys()).map((i, id) => (
{Array.from(Array(6 - character.planets.length).keys()).map((i, id) => (
<NoPlanetCard
key={`${character.character.characterId}-no-planet-${id}`}
/>
@@ -148,15 +129,11 @@ export const PlanetaryInteractionRow = ({
}: {
character: AccessToken;
}) => {
const [planets, setPlanets] = useState<Planet[]>([]);
const theme = useTheme();
useEffect(() => {
getPlanets(character).then(setPlanets).catch(console.log);
}, [character]);
return theme.custom.compactMode ? (
<PlanetaryInteractionIconsRow planets={planets} character={character} />
<PlanetaryInteractionIconsRow character={character} />
) : (
<PlanetaryIteractionTable planets={planets} character={character} />
<PlanetaryIteractionTable character={character} />
);
};

View File

@@ -0,0 +1,119 @@
import { PI_TYPES_MAP } from "@/const";
import { planetCalculations } from "@/planets";
import { AccessToken } from "@/types";
import {
TableContainer,
Paper,
Table,
TableHead,
TableRow,
TableCell,
Typography,
Tooltip,
TableBody,
useTheme,
Stack,
styled,
} from "@mui/material";
const StackItem = styled(Stack)(({ theme }) => ({
...theme.typography.body2,
padding: theme.custom.compactMode ? theme.spacing(1) : theme.spacing(2),
textAlign: "left",
justifyContent: "center",
alignItems: "center",
}));
interface Grouped {
[key: number]: number;
}
export const Summary = ({ characters }: { characters: AccessToken[] }) => {
const exports = characters.flatMap((char) => {
return char.planets.flatMap((planet) => {
const { localExports } = planetCalculations(planet);
return localExports;
});
});
const groupedByMaterial = exports.reduce<Grouped>((totals, material) => {
const { typeId, amount } = material;
const newTotal = isNaN(totals[typeId]) ? amount : totals[typeId] + amount;
totals[typeId] = newTotal;
return totals;
}, {});
const withProductNameAndPrice = Object.keys(groupedByMaterial).map(
(typeIdString) => {
const typeId = parseInt(typeIdString);
return {
typeId,
amount: groupedByMaterial[typeId],
materialName: PI_TYPES_MAP[typeId].name,
price: 0,
};
},
);
const theme = useTheme();
return (
<StackItem width="100%">
<h2>Totals</h2>
<TableContainer component={Paper}>
<Table size="small" aria-label="a dense table">
<TableHead>
<TableRow>
<TableCell width="40%">
<Tooltip title="What exports factories are producing">
<Typography fontSize={theme.custom.smallText}>
Exports
</Typography>
</Tooltip>
</TableCell>
<TableCell width="10%">
<Tooltip title="How many units per hour factories are producing">
<Typography fontSize={theme.custom.smallText}>u/h</Typography>
</Tooltip>
</TableCell>
<TableCell width="10%" align="right">
<Tooltip title="How many million ISK per month this planet is exporting (Jita sell min)">
<Typography fontSize={theme.custom.smallText}>
ISK/M
</Typography>
</Tooltip>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{withProductNameAndPrice.map((product) => (
<SummaryRow
key={product.materialName}
material={product.materialName}
amount={product.amount}
price={product.price}
/>
))}
</TableBody>
</Table>
</TableContainer>
</StackItem>
);
};
const SummaryRow = ({
material,
amount,
price,
}: {
material: string;
amount: number;
price: number;
}) => (
<TableRow>
<TableCell component="th" scope="row">
{material}
</TableCell>
<TableCell>{amount}</TableCell>
<TableCell align="right">{price}</TableCell>
</TableRow>
);

View File

@@ -4,7 +4,7 @@ import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import { memo, useCallback, useEffect, useState } from "react";
import { AccessToken, CharacterUpdate, Env } from "../types";
import { AccessToken, CharacterUpdate, Env, PlanetWithInfo } from "../types";
import { MainGrid } from "./components/MainGrid";
import { refreshToken } from "@/esi-sso";
import {
@@ -16,6 +16,7 @@ import {
} from "./context/Context";
import { useSearchParams } from "next/navigation";
import { EvePraisalResult, fetchAllPrices } from "@/eve-praisal";
import { getPlanet, getPlanetUniverse, getPlanets } from "@/planets";
const Home = () => {
const [characters, setCharacters] = useState<AccessToken[]>([]);
@@ -31,8 +32,6 @@ const Home = () => {
const searchParams = useSearchParams();
const code = searchParams && searchParams.get("code");
// Memoize chracter state manipulations
const deleteCharacter = (character: AccessToken) => {
const charactersToSave = characters.filter(
(c) => character.character.characterId !== c.character.characterId,
@@ -83,6 +82,26 @@ const Home = () => {
return [];
}, []);
const initializeCharacterPlanets = (
characters: AccessToken[],
): Promise<AccessToken[]> =>
Promise.all(
characters.map(async (c) => {
const planets = await getPlanets(c);
const planetsWithInfo: PlanetWithInfo[] = await Promise.all(
planets.map(async (p) => ({
...p,
info: await getPlanet(c, p),
infoUniverse: await getPlanetUniverse(p),
})),
);
return {
...c,
planets: planetsWithInfo,
};
}),
);
const saveCharacters = (characters: AccessToken[]): AccessToken[] => {
localStorage.setItem("characters", JSON.stringify(characters));
return characters;
@@ -148,6 +167,7 @@ const Home = () => {
.then(refreshSession)
.then(handleCallback)
.then(saveCharacters)
.then(initializeCharacterPlanets)
.then(setCharacters)
.then(() => setSessionReady(true));
}, []);

122
src/planets.ts Normal file
View File

@@ -0,0 +1,122 @@
import {
AccessToken,
Planet,
PlanetInfo,
PlanetInfoUniverse,
PlanetWithInfo,
} from "@/types";
import { Api } from "@/esi-api";
import { EXTRACTOR_TYPE_IDS, FACTORY_IDS, PI_SCHEMATICS } from "@/const";
import { extractorsHaveExpired } from "./app/components/PlanetaryInteraction/timeColors";
export const getPlanets = async (character: AccessToken): Promise<Planet[]> => {
const api = new Api();
const planets = (
await api.v1.getCharactersCharacterIdPlanets(
character.character.characterId,
{
token: character.access_token,
},
)
).data;
return planets;
};
export const getPlanet = async (
character: AccessToken,
planet: Planet,
): Promise<PlanetInfo> => {
const api = new Api();
const planetInfo = (
await api.v3.getCharactersCharacterIdPlanetsPlanetId(
character.character.characterId,
planet.planet_id,
{
token: character.access_token,
},
)
).data;
return planetInfo;
};
export const getPlanetUniverse = async (
planet: Planet,
): Promise<PlanetInfoUniverse> => {
const api = new Api();
const planetInfo = (await api.v1.getUniversePlanetsPlanetId(planet.planet_id))
.data;
return planetInfo;
};
export const planetCalculations = (planet: PlanetWithInfo) => {
const planetInfo = planet.info;
type SchematicId = number;
const extractors: PlanetInfo["pins"] = planetInfo.pins.filter((p) =>
EXTRACTOR_TYPE_IDS.some((e) => e === p.type_id),
);
const localProduction = planetInfo.pins
.filter((p) => FACTORY_IDS().some((e) => e.type_id === p.type_id))
.reduce((acc, f) => {
if (f.schematic_id) {
const schematic = PI_SCHEMATICS.find(
(s) => s.schematic_id == f.schematic_id,
);
if (schematic) acc.set(f.schematic_id, schematic);
}
return acc;
}, new Map<SchematicId, (typeof PI_SCHEMATICS)[number]>());
const locallyProduced = Array.from(localProduction)
.flatMap((p) => p[1].outputs)
.map((p) => p.type_id);
const locallyConsumed = Array.from(localProduction)
.flatMap((p) => p[1].inputs)
.map((p) => p.type_id);
const locallyExcavated = planetInfo.pins
.filter((p) => EXTRACTOR_TYPE_IDS.some((e) => e === p.type_id))
.map((e) => e.extractor_details?.product_type_id ?? 0);
const localImports = Array.from(localProduction)
.flatMap((p) => p[1].inputs)
.filter(
(p) =>
![...locallyProduced, ...locallyExcavated].some(
(lp) => lp === p.type_id,
),
);
const localExports = locallyProduced
.filter((p) => !locallyConsumed.some((lp) => lp === p))
.map((typeId) => {
const outputs = PI_SCHEMATICS.flatMap((s) => s.outputs).find(
(s) => s.type_id === typeId,
);
if (!outputs) return { typeId, amount: 0 };
const cycleTime =
PI_SCHEMATICS.find((s) => s.schematic_id === outputs.schematic_id)
?.cycle_time ?? 3600;
const factoriesProducing = planetInfo.pins
.filter((p) => FACTORY_IDS().some((e) => e.type_id === p.type_id))
.filter((f) => f.schematic_id === outputs?.schematic_id);
const amount = outputs.quantity
? factoriesProducing.length * outputs.quantity * (3600 / cycleTime)
: 0;
return {
typeId,
amount,
};
});
const expired = extractorsHaveExpired(extractors.map((e) => e.expiry_time));
return {
expired,
localExports,
localImports,
locallyConsumed,
locallyProduced,
localProduction,
extractors,
};
};

View File

@@ -10,6 +10,7 @@ export interface AccessToken {
needsLogin: boolean;
comment: string;
system: string;
planets: PlanetWithInfo[];
}
export interface Character {
@@ -25,6 +26,7 @@ export interface CharacterPlanets {
name: string;
characterId: number;
account?: string;
system?: string;
planets: PlanetWithInfo[];
}