From 1d85cd467cee8ed43ddfa72678dce9cd768869fe Mon Sep 17 00:00:00 2001
From: Aaron Kable <aaronkable@gmail.com>
Date: Mon, 30 Dec 2024 16:38:44 +0800
Subject: [PATCH] update skill queue

---
 .../src/Components/Cards/PortraitCard.tsx     |   4 +-
 .../frontend/src/Pages/Char/SkillQueue.tsx    | 178 ++++++++++++++----
 2 files changed, 141 insertions(+), 41 deletions(-)

diff --git a/frontend/frontend/src/Components/Cards/PortraitCard.tsx b/frontend/frontend/src/Components/Cards/PortraitCard.tsx
index 7a56d2c0..96ac6bcd 100644
--- a/frontend/frontend/src/Components/Cards/PortraitCard.tsx
+++ b/frontend/frontend/src/Components/Cards/PortraitCard.tsx
@@ -14,6 +14,7 @@ export declare interface PortraitCardProps {
   headerIcon?: string;
   roundedImages?: string;
   character: any; //todo type from api?
+  portaitSize?: number;
 }
 
 export function PortraitCard({
@@ -26,6 +27,7 @@ export function PortraitCard({
   headerIcon,
   heading,
   roundedImages,
+  portaitSize = 350,
 }: PortraitCardProps) {
   return (
     <Card
@@ -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"}>
diff --git a/frontend/frontend/src/Pages/Char/SkillQueue.tsx b/frontend/frontend/src/Pages/Char/SkillQueue.tsx
index 611795fe..5c6c52b9 100644
--- a/frontend/frontend/src/Pages/Char/SkillQueue.tsx
+++ b/frontend/frontend/src/Pages/Char/SkillQueue.tsx
@@ -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();
@@ -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>
+    </>
   );
 };