Skip to content

Commit

Permalink
update skill queue
Browse files Browse the repository at this point in the history
  • Loading branch information
@pvyParts
pvyParts committed Dec 30, 2024
1 parent 132e265 commit 1d85cd4
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 41 deletions.
4 changes: 3 additions & 1 deletion frontend/frontend/src/Components/Cards/PortraitCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export declare interface PortraitCardProps {
headerIcon?: string;
roundedImages?: string;
character: any; //todo type from api?
portaitSize?: number;
}

export function PortraitCard({
Expand All @@ -26,6 +27,7 @@ export function PortraitCard({
headerIcon,
heading,
roundedImages,
portaitSize = 350,
}: PortraitCardProps) {
return (
<Card
Expand All @@ -38,7 +40,7 @@ export function PortraitCard({
<Card.Body className={"d-flex flex-column align-items-center p-0"}>
<CharacterAllegiancePortrait
className="card-img-top"
size={350}
size={portaitSize}
{...{ character, roundedImages }}
/>
<Card.Title className={"text-center w-100 pt-2"}>
Expand Down
178 changes: 138 additions & 40 deletions frontend/frontend/src/Pages/Char/SkillQueue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@ import { PortraitCard } from "../../Components/Cards/PortraitCard";
import { ErrorLoader, PanelLoader } from "../../Components/Loaders/loaders";
import { SkillLevelBlock } from "../../Components/Skills/SkillLevelBlock";
import { getCharacterSkillQueues } from "../../api/character";
import { Table } from "react-bootstrap";
import { useState } from "react";
import { Form, FormGroup, Table } from "react-bootstrap";
import { useQuery } from "react-query";
import { useParams } from "react-router-dom";
import ReactTimeAgo from "react-time-ago";

const CharacterSkillQueues = () => {
const { characterID } = useParams();
Expand All @@ -14,53 +16,149 @@ const CharacterSkillQueues = () => {
{ refetchOnWindowFocus: false }
);

const [activeFilter, setActive] = useState(true);
const [pausedFilter, setPaused] = useState(true);
const [emptyFilter, setEmpty] = useState(false);

if (isLoading) return <PanelLoader />;

if (error) return <ErrorLoader />;

const handleActive = (e) => {
setActive(e.currentTarget.checked);
};

const handlePaused = (e) => {
setPaused(e.currentTarget.checked);
};

const handleEmpty = (e) => {
setEmpty(e.currentTarget.checked);
};

let filtered_data = data.filter((char: any) => {
let active = false;
let paused = false;
let empty = false;
if (char.queue) {
if (char.queue.length && char.queue[0].end) {
active = true;
} else if (char.queue.length) {
paused = true;
} else {
empty = true;
}
} else {
empty = true;
}
return (activeFilter && active) || (emptyFilter && empty) || (pausedFilter && paused);
});

if (isLoading) return <PanelLoader />;

if (error) return <ErrorLoader />;

return (
<div className="d-flex justify-content-around align-items-center flex-row flex-wrap">
{data?.map((char: any) => {
return (
<PortraitCard
border={"secondary"}
isFetching={isFetching}
character={char.character}
heading={char.character.character_name}
roundedImages={"10"}
>
<div style={{ width: "350px" }}>
<div>
<Table striped style={{ marginBottom: 0 }}>
<thead>
<tr key={`head-${char.character.character_name}`}>
<th>Skill</th>
<th className="text-end">Level</th>
</tr>
</thead>
</Table>
<div style={{ width: "350px", height: "250px", overflowY: "auto" }}>
<Table striped>
<tbody>
{char.queue?.map((s: any) => {
return (
<tr key={s.skill}>
<td className="no-margin">{s.skill}</td>
<td className="text-end text-nowrap">
<SkillLevelBlock level={s.end_level} active={s.current_level} />
</td>
</tr>
);
})}
</tbody>
<>
<h5 className="text-center">Filters</h5>
<FormGroup className="col-xs-12 text-center">
<Form.Check
defaultChecked={activeFilter}
onChange={handleActive}
label={"Active"}
inline
></Form.Check>
<Form.Check
defaultChecked={pausedFilter}
onChange={handlePaused}
label={"Paused"}
inline
></Form.Check>
<Form.Check
defaultChecked={emptyFilter}
onChange={handleEmpty}
label={"Empty"}
inline
></Form.Check>
</FormGroup>

<div className="d-flex justify-content-around align-items-center flex-row flex-wrap">
{filtered_data?.map((char: any) => {
let char_status = char.queue.length ? { border: "success" } : { border: "warning" };
if (char.queue.length > 0 && !char.queue[0].end) {
char_status = { border: "info" };
}

return (
<PortraitCard
{...char_status}
isFetching={isFetching}
character={char.character}
heading={char.character.character_name}
roundedImages={"10"}
portaitSize={450}
>
<h6>
{char.character.corporation_name}
{char.character.alliance_name && ` (${char.character.alliance_name})`}
</h6>
<div style={{ width: "450px" }}>
<div>
<Table striped style={{ marginBottom: 0 }}>
<thead>
<tr key={`head-${char.character.character_name}`}>
<th>Skill</th>
<th className="text-end">Level</th>
</tr>
</thead>
</Table>
<div
style={{ width: "450px", height: "350px", overflowY: "auto" }}
className="card-img-bottom"
>
<Table striped>
<tbody>
{char.queue?.map((s: any) => {
return (
<tr key={s.skill}>
<td className="no-margin">
<div className="d-flex justify-content-between">
<p className="m-0">{s.skill}</p>
<SkillLevelBlock level={s.end_level} active={s.current_level} />
</div>
<div className="d-flex justify-content-between">
{s.end ? (
<>
<ReactTimeAgo date={Date.parse(s.end)} />
<p className="m-0 small">
{(s.end_sp - s.start_sp).toLocaleString()}/
{s.end_sp.toLocaleString()} SP
</p>
</>
) : (
<>
<i className="fa-solid fa-pause"></i>
<p className="m-0">
{(s.end_sp - s.start_sp).toLocaleString()}/
{s.end_sp.toLocaleString()} SP
</p>
</>
)}
</div>
</td>
</tr>
);
})}
</tbody>
</Table>
</div>
</div>
</div>
</div>
</PortraitCard>
);
})}
</div>
</PortraitCard>
);
})}
</div>
</>
);
};

Expand Down

0 comments on commit 1d85cd4

Please sign in to comment.