diff --git a/src/app/components/AlertModeButton/AlertModeButton.tsx b/src/app/components/AlertModeButton/AlertModeButton.tsx
new file mode 100644
index 0000000..cc3e804
--- /dev/null
+++ b/src/app/components/AlertModeButton/AlertModeButton.tsx
@@ -0,0 +1,21 @@
+import { SessionContext } from "@/app/context/Context";
+import { Button, Tooltip } from "@mui/material";
+import { useContext } from "react";
+
+export const AlertModeButton = () => {
+ const { alertMode, toggleAlertMode } = useContext(SessionContext);
+ return (
+
+
+
+ );
+};
diff --git a/src/app/components/AppBar/AppBar.tsx b/src/app/components/AppBar/AppBar.tsx
index 8833ff4..9aab3ef 100644
--- a/src/app/components/AppBar/AppBar.tsx
+++ b/src/app/components/AppBar/AppBar.tsx
@@ -18,6 +18,7 @@ import { GitHubButton } from "../Github/GitHubButton";
import { LoginButton } from "../Login/LoginButton";
import { PlanModeButton } from "../PlanModeButton/PlanModeButton";
import { SettingsButton } from "../Settings/SettingsButtons";
+import { AlertModeButton } from "../AlertModeButton/AlertModeButton";
function ResponsiveAppBar() {
const [anchorElNav, setAnchorElNav] = React.useState(
@@ -111,6 +112,9 @@ function ResponsiveAppBar() {
+
@@ -149,6 +153,7 @@ function ResponsiveAppBar() {
+
diff --git a/src/app/components/PlanetaryInteraction/PlanetCard.tsx b/src/app/components/PlanetaryInteraction/PlanetCard.tsx
index 9079ce1..c94f91e 100644
--- a/src/app/components/PlanetaryInteraction/PlanetCard.tsx
+++ b/src/app/components/PlanetaryInteraction/PlanetCard.tsx
@@ -15,8 +15,8 @@ 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 { timeColor } from "./timeColors";
-import { ColorContext } 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,
@@ -43,6 +43,8 @@ export const PlanetCard = ({
planet: Planet;
character: AccessToken;
}) => {
+ const { alertMode } = useContext(SessionContext);
+
const [planetInfo, setPlanetInfo] = useState(
undefined,
);
@@ -63,7 +65,7 @@ export const PlanetCard = ({
setPlanetRenderOpen(false);
};
- const extractors =
+ const extractorsExpiryTime =
(planetInfo &&
planetInfo.pins
.filter((p) => EXTRACTOR_TYPE_IDS.some((e) => e === p.type_id))
@@ -97,6 +99,7 @@ export const PlanetCard = ({
};
const { colors } = useContext(ColorContext);
+ const expired = extractorsHaveExpired(extractorsExpiryTime)
useEffect(() => {
getPlanet(character, planet).then(setPlanetInfo);
@@ -108,6 +111,7 @@ export const PlanetCard = ({
height="100%"
position="relative"
minHeight={theme.custom.cardMinHeight}
+ visibility={alertModeVisibility(alertMode, expired)}
>
- {extractors.some((e) => {
- if (!e) return true;
- const dateExtractor = DateTime.fromISO(e);
- const dateNow = DateTime.now();
- return dateExtractor < dateNow;
- }) && (
+ {expired && (
- {extractors.map((e, idx) => {
+ {extractorsExpiryTime.map((e, idx) => {
return (
(
undefined,
);
@@ -174,9 +174,10 @@ export const PlanetTableRow = ({
getPlanetUniverse(planet).then(setPlanetInfoUniverse);
}, [planet, character]);
+ const expired = extractorsHaveExpired(extractors.map(e => e.expiry_time))
const { colors } = useContext(ColorContext);
return (
-
+
+ extractorsExpiryTime.some((e) => {
+ if (!e) return true;
+ const dateExtractor = DateTime.fromISO(e);
+ const dateNow = DateTime.now();
+ return dateExtractor < dateNow;
+ });
+
+export const alertModeVisibility = (alertMode: boolean, expired: boolean) => {
+ if(alertMode && expired) return 'visible'
+ if(alertMode && !expired) return 'collapse'
+ return 'visible'
+}
diff --git a/src/app/context/Context.tsx b/src/app/context/Context.tsx
index aa78545..793b190 100644
--- a/src/app/context/Context.tsx
+++ b/src/app/context/Context.tsx
@@ -24,6 +24,8 @@ export const SessionContext = createContext<{
toggleCompactMode: () => void;
planMode: boolean;
togglePlanMode: () => void;
+ alertMode: boolean;
+ toggleAlertMode: () => void;
piPrices: EvePraisalResult | undefined;
}>({
sessionReady: false,
@@ -35,6 +37,8 @@ export const SessionContext = createContext<{
toggleCompactMode: () => {},
planMode: false,
togglePlanMode: () => {},
+ alertMode: false,
+ toggleAlertMode: () => {},
piPrices: undefined,
});
export type ColorSelectionType = {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0579440..af11844 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -27,6 +27,7 @@ const Home = () => {
undefined,
);
const [colors, setColors] = useState(defaultColors);
+ const [alertMode, setAlertMode] = useState(false);
const searchParams = useSearchParams();
const code = searchParams && searchParams.get("code");
@@ -98,15 +99,26 @@ const Home = () => {
setPlanMode(!planMode);
};
+ const toggleAlertMode = () => {
+ setAlertMode(!alertMode);
+ };
+
useEffect(() => {
const storedCompactMode = localStorage.getItem("compactMode");
if (!storedCompactMode) return;
storedCompactMode === "true" ? setCompactMode(true) : false;
}, []);
+
useEffect(() => {
const storedColors = localStorage.getItem("colors");
if (!storedColors) return;
- setColors(JSON.parse(storedColors))
+ setColors(JSON.parse(storedColors));
+ }, []);
+
+ useEffect(() => {
+ const storedAlertMode = localStorage.getItem("alertMode");
+ if (!storedAlertMode) return;
+ setAlertMode(JSON.parse(storedAlertMode));
}, []);
useEffect(() => {
@@ -114,7 +126,11 @@ const Home = () => {
}, [compactMode]);
useEffect(() => {
- localStorage.setItem("colors", JSON.stringify(colors))
+ localStorage.setItem("alertMode", alertMode ? "true" : "false");
+ }, [alertMode]);
+
+ useEffect(() => {
+ localStorage.setItem("colors", JSON.stringify(colors));
}, [colors]);
// Initialize EVE PI
@@ -162,6 +178,8 @@ const Home = () => {
planMode,
togglePlanMode,
piPrices,
+ alertMode,
+ toggleAlertMode,
}}
>