dave/eve-pi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add color selection and save it to localStorage

Browse Source
This commit is contained in:
Calli
2023-10-06 19:40:54 +03:00
parent 5a34784c9c
commit e69e65059e
9 changed files with 236 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/components/PlanetaryInteraction/PlanetCard.tsx
View File

@@ -31,7 +31,7 @@ const Transition = forwardRef(function Transition(
props: TransitionProps & {
children: React.ReactElement;
},
ref: React.Ref<unknown>
ref: React.Ref<unknown>,
) {
return <Slide direction="up" ref={ref} {...props} />;
});
@@ -44,7 +44,7 @@ export const PlanetCard = ({
character: AccessToken;
}) => {
const [planetInfo, setPlanetInfo] = useState<PlanetInfo | undefined>(
undefined
undefined,
);
const [planetInfoUniverse, setPlanetInfoUniverse] = useState<
@@ -71,7 +71,7 @@ export const PlanetCard = ({
[];
const getPlanet = async (
character: AccessToken,
planet: Planet
planet: Planet,
): Promise<PlanetInfo> => {
const api = new Api();
const planetInfo = (
@@ -80,14 +80,14 @@ export const PlanetCard = ({
planet.planet_id,
{
token: character.access_token,
}
},
)
).data;
return planetInfo;
};
const getPlanetUniverse = async (
planet: Planet
planet: Planet,
): Promise<PlanetInfoUniverse> => {
const api = new Api();
const planetInfo = (
@@ -96,7 +96,7 @@ export const PlanetCard = ({
return planetInfo;
};
const colorContext = useContext(ColorContext)
const { colors } = useContext(ColorContext);
useEffect(() => {
getPlanet(character, planet).then(setPlanetInfo);
@@ -144,7 +144,7 @@ export const PlanetCard = ({
return (
<Typography
key={`${e}-${idx}-${character.character.characterId}`}
color={timeColor(e, colorContext)}
color={timeColor(e, colors)}
fontSize={theme.custom.smallText}
>
{e ? (

10
src/app/components/PlanetaryInteraction/PlanetTableRow.tsx
View File

@@ -1,8 +1,4 @@
import {
SessionContext,
ColorContext,
ColorContextType,
} from "@/app/context/Context";
import { SessionContext, ColorContext } from "@/app/context/Context";
import {
EXTRACTOR_TYPE_IDS,
FACTORY_IDS,
@@ -178,7 +174,7 @@ export const PlanetTableRow = ({
getPlanetUniverse(planet).then(setPlanetInfoUniverse);
}, [planet, character]);
const colorContext = useContext(ColorContext);
const { colors } = useContext(ColorContext);
return (
<TableRow sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
<TableCell component="th" scope="row">
@@ -210,7 +206,7 @@ export const PlanetTableRow = ({
style={{ display: "flex" }}
>
<Typography
color={timeColor(e.expiry_time, colorContext)}
color={timeColor(e.expiry_time, colors)}
fontSize={theme.custom.smallText}
paddingRight={1}
>

4
src/app/components/PlanetaryInteraction/timeColors.ts
View File

@@ -1,9 +1,9 @@
import { ColorContextType } from "@/app/context/Context";
import { ColorSelectionType } from "@/app/context/Context";
import { DateTime } from "luxon";
export const timeColor = (
extractorDate: string | undefined,
colors: ColorContextType,
colors: ColorSelectionType,
): string => {
if (!extractorDate) return colors.expiredColor;
const dateExtractor = DateTime.fromISO(extractorDate);

48
src/app/components/Settings/SettingsButtons.tsx
View File

@@ -1,10 +1,22 @@
import { SessionContext } from "@/app/context/Context";
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField, Tooltip } from "@mui/material";
import {
ColorContext,
ColorSelectionType,
} from "@/app/context/Context";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Tooltip,
Typography,
} from "@mui/material";
import { ColorChangeHandler, ColorResult, CompactPicker } from "react-color";
import React from "react";
import { useContext } from "react";
export const SettingsButton = () => {
const { compactMode, toggleCompactMode } = useContext(SessionContext);
const { colors, setColors } = useContext(ColorContext);
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
@@ -14,6 +26,14 @@ export const SettingsButton = () => {
const handleClose = () => {
setOpen(false);
};
const handleColorSelection = (key: string, currentColors: ColorSelectionType) => (selection: ColorResult) => {
console.log(key, selection.hex)
setColors({
...currentColors,
[key]: selection.hex
})
};
return (
<Tooltip title="Toggle settings dialog">
<>
@@ -27,17 +47,21 @@ export const SettingsButton = () => {
<DialogTitle id="alert-dialog-title">
{"Override default timer colors"}
</DialogTitle>
<DialogContent style={{ paddingTop: '1rem'}}>
<TextField
label="Required"
defaultValue="Hello World"
/>
<DialogContent style={{ paddingTop: "1rem" }}>
{Object.keys(colors).map((key) => {
return (
<div key={`color-row-${key}`}>
<Typography>{key}</Typography>
<CompactPicker
color={colors[key as keyof ColorSelectionType]}
onChangeComplete={handleColorSelection(key, colors)}
/>
</div>
);
})}
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Disagree</Button>
<Button onClick={handleClose} autoFocus>
Agree
</Button>
<Button onClick={handleClose}>Close</Button>
</DialogActions>
</Dialog>
</>

44
src/app/components/Settings/SettingsDialog.tsx
View File

@@ -1,44 +0,0 @@
import * as React from 'react';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import { Button } from '@mui/material';
export default function AlertDialog({handleClickOpen}: ) {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Use Google's location service?"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous
location data to Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Disagree</Button>
<Button onClick={handleClose} autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
);
}

32
src/app/context/Context.tsx
View File

@@ -36,8 +36,8 @@ export const SessionContext = createContext<{
planMode: false,
togglePlanMode: () => {},
piPrices: undefined,
})
export type ColorContextType = {
});
export type ColorSelectionType = {
defaultColor: string;
expiredColor: string;
twoHoursColor: string;
@@ -46,16 +46,22 @@ export type ColorContextType = {
twelveHoursColor: string;
dayColor: string;
twoDaysColor: string;
};
}
export const ColorContext = createContext<ColorContextType>({
defaultColor: '#006596',
expiredColor: '#AB324A',
twoHoursColor: '#9C4438',
fourHoursColor: '#765B21',
eightHoursColor: '#63620D',
twelveHoursColor: '#2C6C2F',
dayColor: '#2F695A',
twoDaysColor: '#2F695A',
export const defaultColors = {
defaultColor: "#006596",
expiredColor: "#AB324A",
twoHoursColor: "#9C4438",
fourHoursColor: "#765B21",
eightHoursColor: "#63620D",
twelveHoursColor: "#2C6C2F",
dayColor: "#2F695A",
twoDaysColor: "#2F695A",
};
export const ColorContext = createContext<{
colors: ColorSelectionType;
setColors: (colors: ColorSelectionType) => void;
}>({
colors: defaultColors,
setColors: () => {}
});

35
src/app/page.tsx
View File

@@ -7,7 +7,13 @@ import { memo, useCallback, useEffect, useState } from "react";
import { AccessToken, CharacterUpdate, Env } from "../types";
import { MainGrid } from "./components/MainGrid";
import { refreshToken } from "@/esi-sso";
import { CharacterContext, SessionContext } from "./context/Context";
import {
CharacterContext,
ColorContext,
ColorSelectionType,
SessionContext,
defaultColors,
} from "./context/Context";
import { useSearchParams } from "next/navigation";
import { EvePraisalResult, fetchAllPrices } from "@/eve-praisal";
@@ -18,9 +24,9 @@ const Home = () => {
const [compactMode, setCompactMode] = useState(false);
const [planMode, setPlanMode] = useState(false);
const [piPrices, setPiPrices] = useState<EvePraisalResult | undefined>(
undefined
undefined,
);
const [colors, setColors] = useState<ColorSelectionType>(defaultColors);
const searchParams = useSearchParams();
const code = searchParams && searchParams.get("code");
@@ -28,7 +34,7 @@ const Home = () => {
const deleteCharacter = (character: AccessToken) => {
const charactersToSave = characters.filter(
(c) => character.character.characterId !== c.character.characterId
(c) => character.character.characterId !== c.character.characterId,
);
setCharacters(charactersToSave);
saveCharacters(charactersToSave);
@@ -36,7 +42,7 @@ const Home = () => {
const updateCharacter = (
character: AccessToken,
updates: CharacterUpdate
updates: CharacterUpdate,
) => {
const charactersToSave = characters.map((c) => {
if (c.character.characterId === character.character.characterId)
@@ -56,7 +62,7 @@ const Home = () => {
};
const handleCallback = async (
characters: AccessToken[]
characters: AccessToken[],
): Promise<AccessToken[]> => {
if (code) {
window.history.replaceState(null, "", "/");
@@ -89,19 +95,28 @@ const Home = () => {
};
const togglePlanMode = () => {
setPlanMode(!planMode)
}
setPlanMode(!planMode);
};
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))
}, []);
useEffect(() => {
localStorage.setItem("compactMode", compactMode ? "true" : "false");
}, [compactMode]);
useEffect(() => {
localStorage.setItem("colors", JSON.stringify(colors))
}, [colors]);
// Initialize EVE PI
useEffect(() => {
fetch("api/env")
@@ -157,7 +172,9 @@ const Home = () => {
restoreCharacters,
}}
>
<MainGrid />
<ColorContext.Provider value={{ colors: colors, setColors: setColors }}>
<MainGrid />
</ColorContext.Provider>
</CharacterContext.Provider>
</SessionContext.Provider>
);