Add plan mode to show character comments in the table

This commit is contained in:
Calli
2023-10-02 12:29:32 +03:00
parent 1d75dfb286
commit 77af55ce2f
8 changed files with 81 additions and 20 deletions

View File

@@ -2,9 +2,13 @@ import { AccessToken } from "@/types";
import { Box, Stack, Typography, useTheme } from "@mui/material"; import { Box, Stack, Typography, useTheme } from "@mui/material";
import { CharacterRow } from "../Characters/CharacterRow"; import { CharacterRow } from "../Characters/CharacterRow";
import { PlanetaryInteractionRow } from "../PlanetaryInteraction/PlanetaryInteractionRow"; import { PlanetaryInteractionRow } from "../PlanetaryInteraction/PlanetaryInteractionRow";
import { SessionContext } from "@/app/context/Context";
import { useContext } from "react";
import { PlanRow } from "./PlanRow";
export const AccountCard = ({ characters }: { characters: AccessToken[] }) => { export const AccountCard = ({ characters }: { characters: AccessToken[] }) => {
const theme = useTheme(); const theme = useTheme();
const { planMode } = useContext(SessionContext);
return ( return (
<Box <Box
sx={{ sx={{
@@ -24,7 +28,11 @@ export const AccountCard = ({ characters }: { characters: AccessToken[] }) => {
alignItems="flex-start" alignItems="flex-start"
> >
<CharacterRow character={c} /> <CharacterRow character={c} />
{planMode ? (
<PlanRow character={c} />
) : (
<PlanetaryInteractionRow character={c} /> <PlanetaryInteractionRow character={c} />
)}
</Stack> </Stack>
))} ))}
</Box> </Box>

View File

@@ -0,0 +1,16 @@
import { AccessToken } from "@/types";
import { Stack, Typography, 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",
}));
export const PlanRow = ({ character }: { character: AccessToken }) => {
return (
<StackItem>
<Typography style={{whiteSpace: 'pre-line'}}>{character.comment}</Typography>
</StackItem>
);
};

View File

@@ -1,25 +1,26 @@
import * as React from "react"; import MenuIcon from "@mui/icons-material/Menu";
import PublicIcon from "@mui/icons-material/Public";
import AppBar from "@mui/material/AppBar"; import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import Menu from "@mui/material/Menu";
import MenuIcon from "@mui/icons-material/Menu";
import Container from "@mui/material/Container"; import Container from "@mui/material/Container";
import IconButton from "@mui/material/IconButton";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem"; import MenuItem from "@mui/material/MenuItem";
import PublicIcon from "@mui/icons-material/Public"; import Toolbar from "@mui/material/Toolbar";
import { LoginButton } from "../Login/LoginButton"; import Typography from "@mui/material/Typography";
import * as React from "react";
import { DowloadButton } from "../Backup/DowloadButton"; import { DowloadButton } from "../Backup/DowloadButton";
import { UploadButton } from "../Backup/UploadButton"; import { UploadButton } from "../Backup/UploadButton";
import { DiscordButton } from "../Discord/DiscordButton";
import { GitHubButton } from "../Github/GitHubButton";
import { CCPButton } from "../CCP/CCPButton"; import { CCPButton } from "../CCP/CCPButton";
import { CompactModeButton } from "../CompactModeButton/CompactModeButton"; import { CompactModeButton } from "../CompactModeButton/CompactModeButton";
import { DiscordButton } from "../Discord/DiscordButton";
import { GitHubButton } from "../Github/GitHubButton";
import { LoginButton } from "../Login/LoginButton";
import { PlanModeButton } from "../PlanModeButton/PlanModeButton";
function ResponsiveAppBar() { function ResponsiveAppBar() {
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>( const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
null null,
); );
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => { const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
@@ -103,6 +104,9 @@ function ResponsiveAppBar() {
<MenuItem onClick={handleCloseNavMenu}> <MenuItem onClick={handleCloseNavMenu}>
<CompactModeButton /> <CompactModeButton />
</MenuItem> </MenuItem>
<MenuItem onClick={handleCloseNavMenu}>
<PlanModeButton />
</MenuItem>
</Menu> </Menu>
</Box> </Box>
<PublicIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} /> <PublicIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} />
@@ -129,6 +133,7 @@ function ResponsiveAppBar() {
flexGrow: 1, flexGrow: 1,
display: { xs: "none", md: "flex" }, display: { xs: "none", md: "flex" },
alignItems: "center", alignItems: "center",
gap: "0.2rem"
}} }}
> >
<LoginButton /> <LoginButton />
@@ -138,6 +143,7 @@ function ResponsiveAppBar() {
<GitHubButton /> <GitHubButton />
<CCPButton /> <CCPButton />
<CompactModeButton /> <CompactModeButton />
<PlanModeButton />
</Box> </Box>
</Toolbar> </Toolbar>
</Container> </Container>

View File

@@ -37,7 +37,11 @@ export const CharacterDialog = ({
}; };
return ( return (
<Dialog open={character !== undefined} onClose={closeDialog}> <Dialog
open={character !== undefined}
onClose={closeDialog}
fullWidth={true}
>
<DialogTitle>{character && character.character.name}</DialogTitle> <DialogTitle>{character && character.character.name}</DialogTitle>
<TextField <TextField
id="outlined-basic" id="outlined-basic"
@@ -50,13 +54,13 @@ export const CharacterDialog = ({
/> />
<TextField <TextField
id="outlined-basic" id="outlined-basic"
label="Comment" label="Comment / Plan"
variant="outlined" variant="outlined"
value={comment ?? ""} value={comment ?? ""}
sx={{ margin: 1 }} sx={{ margin: 1 }}
multiline={true} multiline={true}
minRows={6}
onChange={(event) => setComment(event.target.value)} onChange={(event) => setComment(event.target.value)}
onKeyDown={handleKeyDown}
/> />
<DialogActions> <DialogActions>
<Button <Button

View File

@@ -10,8 +10,6 @@ import { AccountCard } from "./Account/AccountCard";
import { AccessToken } from "@/types"; import { AccessToken } from "@/types";
import { CharacterContext, SessionContext } from "../context/Context"; import { CharacterContext, SessionContext } from "../context/Context";
import ResponsiveAppBar from "./AppBar/AppBar"; import ResponsiveAppBar from "./AppBar/AppBar";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@emotion/react";
interface Grouped { interface Grouped {
[key: string]: AccessToken[]; [key: string]: AccessToken[];
@@ -38,7 +36,7 @@ declare module "@mui/material/styles" {
} }
} }
export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => { export const MainGrid = () => {
const { characters } = useContext(CharacterContext); const { characters } = useContext(CharacterContext);
const groupByAccount = characters.reduce<Grouped>((group, character) => { const groupByAccount = characters.reduce<Grouped>((group, character) => {
const { account } = character; const { account } = character;

View File

@@ -0,0 +1,18 @@
import { SessionContext } from "@/app/context/Context";
import { ToggleButton, Tooltip } from "@mui/material";
import { useContext } from "react";
export const PlanModeButton = () => {
const { planMode, togglePlanMode } = useContext(SessionContext);
return (
<Tooltip title="Toggle plan mode that show layout for widescreen">
<ToggleButton
value="check"
selected={planMode}
onChange={togglePlanMode}
>
Plan mode
</ToggleButton>
</Tooltip>
);
};

View File

@@ -22,6 +22,8 @@ export const SessionContext = createContext<{
EVE_SSO_CLIENT_ID: string; EVE_SSO_CLIENT_ID: string;
compactMode: boolean; compactMode: boolean;
toggleCompactMode: () => void; toggleCompactMode: () => void;
planMode: boolean;
togglePlanMode: () => void;
piPrices: EvePraisalResult | undefined; piPrices: EvePraisalResult | undefined;
}>({ }>({
sessionReady: false, sessionReady: false,
@@ -31,5 +33,7 @@ export const SessionContext = createContext<{
EVE_SSO_CLIENT_ID: "", EVE_SSO_CLIENT_ID: "",
compactMode: false, compactMode: false,
toggleCompactMode: () => {}, toggleCompactMode: () => {},
planMode: false,
togglePlanMode: () => {},
piPrices: undefined, piPrices: undefined,
}); });

View File

@@ -16,6 +16,7 @@ const Home = () => {
const [sessionReady, setSessionReady] = useState(false); const [sessionReady, setSessionReady] = useState(false);
const [environment, setEnvironment] = useState<Env | undefined>(undefined); const [environment, setEnvironment] = useState<Env | undefined>(undefined);
const [compactMode, setCompactMode] = useState(false); const [compactMode, setCompactMode] = useState(false);
const [planMode, setPlanMode] = useState(false);
const [piPrices, setPiPrices] = useState<EvePraisalResult | undefined>( const [piPrices, setPiPrices] = useState<EvePraisalResult | undefined>(
undefined undefined
); );
@@ -87,6 +88,10 @@ const Home = () => {
setCompactMode(!compactMode); setCompactMode(!compactMode);
}; };
const togglePlanMode = () => {
setPlanMode(!planMode)
}
useEffect(() => { useEffect(() => {
const storedCompactMode = localStorage.getItem("compactMode"); const storedCompactMode = localStorage.getItem("compactMode");
if (!storedCompactMode) return; if (!storedCompactMode) return;
@@ -139,6 +144,8 @@ const Home = () => {
EVE_SSO_CLIENT_ID: environment?.EVE_SSO_CLIENT_ID ?? "", EVE_SSO_CLIENT_ID: environment?.EVE_SSO_CLIENT_ID ?? "",
compactMode, compactMode,
toggleCompactMode, toggleCompactMode,
planMode,
togglePlanMode,
piPrices, piPrices,
}} }}
> >
@@ -150,7 +157,7 @@ const Home = () => {
restoreCharacters, restoreCharacters,
}} }}
> >
<MainGrid sessionReady={sessionReady} /> <MainGrid />
</CharacterContext.Provider> </CharacterContext.Provider>
</SessionContext.Provider> </SessionContext.Provider>
); );