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, }} >