First working version of EVE-PI

src/app/components/Account/AccountCard.tsx

@@ -0,0 +1,35 @@
+import { AccessToken } from "@/types";
+import { Box, Stack, Typography } from "@mui/material";
+import { CharacterRow } from "../Characters/CharacterRow";
+import { PlanetaryInteractionRow } from "../PlanetaryInteraction/PlanetaryInteractionRow";
+
+export const AccountCard = ({
+  characters,
+  sessionReady,
+}: {
+  characters: AccessToken[];
+  sessionReady: boolean;
+}) => {
+  return (
+    <Box
+      sx={{
+        background: "#262626",
+        padding: 1,
+        borderRadius: 1,
+        margin: 1,
+      }}
+    >
+      <Typography paddingLeft={2}>Account: {characters[0].account}</Typography>
+      {characters.map((c) => (
+        <Stack
+          key={c.character.characterId}
+          direction="row"
+          alignItems="flex-start"
+        >
+          <CharacterRow character={c} />
+          {sessionReady && <PlanetaryInteractionRow character={c} />}
+        </Stack>
+      ))}
+    </Box>
+  );
+};

src/app/components/Characters/CharacterDialog.tsx

@@ -0,0 +1,70 @@
+import { Button, Dialog, DialogActions, DialogTitle } from "@mui/material";
+import { AccessToken, CharacterUpdate } from "../../../types";
+import { useEffect, useState } from "react";
+import TextField from "@mui/material/TextField";
+import { revokeToken } from "@/esi-sso";
+
+export const CharacterDialog = ({
+  character,
+  closeDialog,
+  deleteCharacter,
+  updateCharacter,
+}: {
+  character: AccessToken | undefined;
+  closeDialog: () => void;
+  deleteCharacter: (character: AccessToken) => void;
+  updateCharacter: (characer: AccessToken, update: CharacterUpdate) => void;
+}) => {
+  const [account, setAccount] = useState("");
+
+  useEffect(() => {
+    if (character?.account) setAccount(character.account);
+  }, [character]);
+
+  const logout = (character: AccessToken) => {
+    revokeToken(character)
+      .then()
+      .catch((e) => console.log("Logout failed"));
+  };
+
+  return (
+    <Dialog open={character !== undefined} onClose={closeDialog}>
+      <DialogTitle>{character && character.character.name}</DialogTitle>
+      <TextField
+        id="outlined-basic"
+        label="Account name"
+        variant="outlined"
+        value={account ?? ""}
+        sx={{ margin: 1 }}
+        onChange={(event) => setAccount(event.target.value)}
+      />
+      <DialogActions>
+        <Button
+          onClick={() => {
+            character && updateCharacter(character, { account });
+            closeDialog();
+          }}
+          variant="contained"
+        >
+          Save
+        </Button>
+        <Button
+          onClick={() => {
+            character && deleteCharacter(character);
+            character && logout(character);
+          }}
+          variant="contained"
+        >
+          Delete
+        </Button>
+        <Button
+          onClick={() => {
+            closeDialog();
+          }}
+        >
+          Cancel
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

src/app/components/Characters/CharacterRow.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useContext, useState } from "react";
+import Image from "next/image";
+import Stack from "@mui/material/Stack";
+import { styled } from "@mui/material/styles";
+import React from "react";
+import { CharacterDialog } from "./CharacterDialog";
+import { AccessToken } from "@/types";
+import { Box } from "@mui/material";
+import { EVE_IMAGE_URL } from "@/const";
+import { CharacterContext } from "@/app/context/Context";
+
+const StackItem = styled(Stack)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(2),
+  textAlign: "left",
+  justifyContent: "center",
+  alignItems: "center",
+}));
+
+export const CharacterRow = ({ character }: { character: AccessToken }) => {
+  const [selectedCharacter, setSelectedCharacter] = useState<
+    AccessToken | undefined
+  >(undefined);
+
+  const { deleteCharacter, updateCharacter } = useContext(CharacterContext);
+
+  return (
+    <StackItem
+      key={character.character.characterId}
+      alignItems="flex-start"
+      justifyContent="flex-start"
+    >
+      <CharacterDialog
+        character={selectedCharacter}
+        deleteCharacter={deleteCharacter}
+        updateCharacter={updateCharacter}
+        closeDialog={() => setSelectedCharacter(undefined)}
+      />
+      <Box
+        onClick={() => setSelectedCharacter(character)}
+        display="flex"
+        flexDirection="column"
+      >
+        <Image
+          src={`${EVE_IMAGE_URL}/characters/${character.character.characterId}/portrait?size=64`}
+          alt=""
+          width={120}
+          height={120}
+          style={{ marginBottom: "0.2rem" }}
+        />
+        {character.character.name}
+      </Box>
+    </StackItem>
+  );
+};

src/app/components/Login/LoginButton.tsx

@@ -0,0 +1,22 @@
+import { Button } from "@mui/material";
+import { useState } from "react";
+import { LoginDialog } from "./LoginDialog";
+
+export const LoginButton = () => {
+  const [loginDialogOpen, setLoginDialogOpen] = useState(false);
+  return (
+    <>
+      <Button
+        style={{ width: "100%" }}
+        variant="contained"
+        onClick={() => setLoginDialogOpen(true)}
+      >
+        Login
+      </Button>
+      <LoginDialog
+        open={loginDialogOpen}
+        closeDialog={() => setLoginDialogOpen(false)}
+      />
+    </>
+  );
+};

src/app/components/Login/LoginDialog.tsx

@@ -0,0 +1,71 @@
+import DialogTitle from "@mui/material/DialogTitle";
+import Dialog from "@mui/material/Dialog";
+import Button from "@mui/material/Button";
+import { Box, DialogActions } from "@mui/material";
+import { useContext, useEffect, useState } from "react";
+import { eveSwagger, loginParameters } from "@/esi-sso";
+import { SessionContext } from "@/app/context/Context";
+
+export const LoginDialog = ({
+  open,
+  closeDialog,
+}: {
+  open: boolean;
+  closeDialog: () => void;
+}) => {
+  const [scopes] = useState<string[]>(["esi-planets.manage_planets.v1"]);
+  const [selectedScopes, setSelectedScopes] = useState<string[]>([
+    "esi-planets.manage_planets.v1",
+  ]);
+  const [ssoUrl, setSsoUrl] = useState<string | undefined>(undefined);
+  const [loginUrl, setLoginUrl] = useState<string | undefined>(undefined);
+
+  const { EVE_SSO_CLIENT_ID, EVE_SSO_CALLBACK_URL } =
+    useContext(SessionContext);
+
+  useEffect(() => {
+    eveSwagger().then((json) => {
+      setSsoUrl(json.securityDefinitions.evesso.authorizationUrl);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!ssoUrl || selectedScopes.length === 0) return;
+    loginParameters(
+      selectedScopes,
+      EVE_SSO_CLIENT_ID,
+      EVE_SSO_CALLBACK_URL
+    ).then((res) => setLoginUrl(ssoUrl + "?" + res));
+  }, [selectedScopes, ssoUrl, EVE_SSO_CLIENT_ID, EVE_SSO_CALLBACK_URL]);
+
+  return (
+    <Dialog open={open} onClose={closeDialog}>
+      <DialogTitle>Select scopes to login with</DialogTitle>
+      {scopes.map((scope) => (
+        <Box key={scope} padding={1}>
+          <input
+            type="checkbox"
+            checked={selectedScopes.some((v) => v === scope)}
+            onChange={() => {
+              selectedScopes.some((v) => v === scope)
+                ? setSelectedScopes(selectedScopes.filter((s) => s !== scope))
+                : setSelectedScopes([...selectedScopes, scope]);
+            }}
+          />
+          {scope}
+        </Box>
+      ))}
+      <DialogActions>
+        <Button
+          variant="contained"
+          onClick={() => {
+            window.open(loginUrl, "_self");
+          }}
+        >
+          Login
+        </Button>
+        <Button onClick={closeDialog}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

src/app/components/Login/RefreshButton.tsx

@@ -0,0 +1,16 @@
+import { SessionContext } from "@/app/context/Context";
+import { Button } from "@mui/material";
+import { useContext } from "react";
+
+export const RefreshButton = () => {
+  const { refreshSession } = useContext(SessionContext);
+  return (
+    <Button
+      style={{ width: "100%" }}
+      variant="contained"
+      onClick={refreshSession}
+    >
+      Refresh
+    </Button>
+  );
+};

src/app/components/MainGrid.tsx

@@ -0,0 +1,45 @@
+import { useContext } from "react";
+import { Box, Grid, Stack } from "@mui/material";
+import { LoginButton } from "./Login/LoginButton";
+import { RefreshButton } from "./Login/RefreshButton";
+import { AccountCard } from "./Account/AccountCard";
+import { AccessToken } from "@/types";
+import { CharacterContext } from "../context/Context";
+
+interface Grouped {
+  [key: string]: AccessToken[];
+}
+
+export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
+  const { characters } = useContext(CharacterContext);
+  const groupByAccount = characters.reduce<Grouped>((group, character) => {
+    const { account } = character;
+    group[account ?? ""] = group[account ?? ""] ?? [];
+    group[account ?? ""].push(character);
+    return group;
+  }, {});
+
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Grid container spacing={1}>
+        <Grid item xs={2}>
+          <Stack direction="row" spacing={1}>
+            <LoginButton />
+            <RefreshButton />
+          </Stack>
+        </Grid>
+      </Grid>
+      <Grid container spacing={1}>
+        <Grid item xs={12}>
+          {Object.values(groupByAccount).map((g, id) => (
+            <AccountCard
+              key={`account-${id}-${g[0].account}`}
+              characters={g}
+              sessionReady={sessionReady}
+            />
+          ))}
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};

src/app/components/PlanetaryInteraction/NoPlanetCard.tsx

@@ -0,0 +1,32 @@
+import { Stack, Typography, styled } from "@mui/material";
+import Image from "next/image";
+
+const StackItem = styled(Stack)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: 0,
+  textAlign: "left",
+  justifyContent: "center",
+  alignItems: "center",
+}));
+
+export const NoPlanetCard = ({}: {}) => {
+  return (
+    <StackItem alignItems="flex-start" className="poop" height="100%">
+      <Image
+        src={`/noplanet.png`}
+        alt=""
+        width={120}
+        height={120}
+        style={{ marginBottom: "0.2rem" }}
+      />
+      <Image
+        width={64}
+        height={64}
+        src={`/stopped.png`}
+        alt=""
+        style={{ position: "absolute" }}
+      />
+      <Typography>No planet</Typography>
+    </StackItem>
+  );
+};

src/app/components/PlanetaryInteraction/PlanetCard.tsx

@@ -0,0 +1,146 @@
+import { Stack, Typography, styled } from "@mui/material";
+import Image from "next/image";
+import { AccessToken, Planet } from "@/types";
+import { Api } from "@/esi-api";
+import { useEffect, useState } from "react";
+import { DateTime } from "luxon";
+import { EXTRACTOR_TYPE_IDS } from "@/const";
+import Countdown from "react-countdown";
+
+const StackItem = styled(Stack)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: 0,
+  textAlign: "left",
+  justifyContent: "center",
+  alignItems: "center",
+}));
+
+export interface PlanetInfo {
+  links: {
+    destination_pin_id: number;
+    link_level: number;
+    source_pin_id: number;
+  }[];
+  pins: {
+    contents?: {
+      amount: number;
+      type_id: number;
+    }[];
+    expiry_time?: string;
+    extractor_details?: {
+      cycle_time?: number;
+      head_radius?: number;
+      heads: {
+        head_id: number;
+        latitude: number;
+        longitude: number;
+      }[];
+      product_type_id?: number;
+      qty_per_cycle?: number;
+    };
+    factory_details?: {
+      schematic_id: number;
+    };
+    install_time?: string;
+    last_cycle_start?: string;
+    latitude: number;
+    longitude: number;
+    pin_id: number;
+    schematic_id?: number;
+    type_id: number;
+  }[];
+  routes: {
+    content_type_id: number;
+    destination_pin_id: number;
+    quantity: number;
+    route_id: number;
+    source_pin_id: number;
+    waypoints?: number[];
+  }[];
+}
+
+export const PlanetCard = ({
+  planet,
+  character,
+}: {
+  planet: Planet;
+  character: AccessToken;
+}) => {
+  const [planetInfo, setPlanetInfo] = useState<PlanetInfo | undefined>(
+    undefined
+  );
+  const extractors =
+    (planetInfo &&
+      planetInfo.pins
+        .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.characters.getCharactersCharacterIdPlanetsPlanetId(
+        character.character.characterId,
+        planet.planet_id,
+        {
+          token: character.access_token,
+        }
+      )
+    ).data;
+    return planetInfo;
+  };
+  useEffect(() => {
+    getPlanet(character, planet).then(setPlanetInfo);
+  }, [planet, character]);
+  return (
+    <StackItem alignItems="flex-start" className="poop" height="100%">
+      <Image
+        src={`/${planet.planet_type}.png`}
+        alt=""
+        width={120}
+        height={120}
+        style={{ marginBottom: "0.2rem" }}
+      />
+      {extractors.some((e) => {
+        if (!e) return true;
+        const dateExtractor = DateTime.fromISO(e);
+        const dateNow = DateTime.now();
+        return dateExtractor < dateNow;
+      }) && (
+        <Image
+          width={64}
+          height={64}
+          src={`/stopped.png`}
+          alt=""
+          style={{ position: "absolute" }}
+        />
+      )}
+      {extractors.map((e, idx) => {
+        const inPast = () => {
+          if (!e) return true;
+          const dateExtractor = DateTime.fromISO(e);
+          const dateNow = DateTime.now();
+          return dateExtractor < dateNow;
+        };
+
+        return (
+          <Typography
+            key={`${e}-${idx}-${character.character.characterId}`}
+            color={inPast() ? "red" : "white"}
+          >
+            {e ? (
+              <Countdown
+                overtime={true}
+                date={DateTime.fromISO(e).toMillis()}
+              />
+            ) : (
+              "STOPPED"
+            )}
+          </Typography>
+        );
+      })}
+    </StackItem>
+  );
+};

src/app/components/PlanetaryInteraction/PlanetaryInteractionRow.tsx

@@ -0,0 +1,57 @@
+import { Api } from "@/esi-api";
+import { AccessToken, Planet } from "@/types";
+import { Stack, styled } from "@mui/material";
+import { useEffect, useState } from "react";
+import { PlanetCard } from "./PlanetCard";
+import { NoPlanetCard } from "./NoPlanetCard";
+
+const StackItem = styled(Stack)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(2),
+  textAlign: "left",
+  justifyContent: "center",
+  alignItems: "center",
+}));
+
+const getPlanets = async (character: AccessToken): Promise<Planet[]> => {
+  const api = new Api();
+  const planets = (
+    await api.characters.getCharactersCharacterIdPlanets(
+      character.character.characterId,
+      {
+        token: character.access_token,
+      }
+    )
+  ).data;
+  return planets;
+};
+
+export const PlanetaryInteractionRow = ({
+  character,
+}: {
+  character: AccessToken;
+}) => {
+  const [planets, setPlanets] = useState<Planet[]>([]);
+  useEffect(() => {
+    getPlanets(character).then(setPlanets).catch(console.log);
+  }, [character]);
+
+  return (
+    <StackItem>
+      <Stack spacing={2} direction="row" flexWrap="wrap">
+        {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) => (
+          <NoPlanetCard
+            key={`${character.character.characterId}-no-planet-${id}`}
+          />
+        ))}
+      </Stack>
+    </StackItem>
+  );
+};