stickyban panel

cmss13-devs · Apr 24, 2024 · be5be2c · be5be2c
1 parent 4d03973
commit be5be2c
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 20 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,15 +1,18 @@
-import { PropsWithChildren, useRef, useState } from "react";
+import React, { PropsWithChildren, useRef, useState } from "react";
 import "./App.css";
 import { LookupMenu } from "./components/userLookup";
 import { IpLookup } from "./components/ipLookup";
 import { GlobalContext } from "./types/global";
 import { CidLookup } from "./components/cidLookup";
 import { RoundData } from "./components/roundData";
 import { Dialog } from "./components/dialog";
+import { StickybansModal } from "./components/stickybans";
 
-export default function App() {
+export default function App(): React.ReactElement {
   const [toastMessage, showToastMessage] = useState<string | null>(null);
 
+  const [stickyMenu, setStickyMenu] = useState(false);
+
   const displayToast = (string: string) => {
     showToastMessage(string);
     setTimeout(() => {
@@ -30,6 +33,22 @@ export default function App() {
               <LookupOption type="cid">Lookup CID</LookupOption>
             </div>
 
+            <div
+              onClick={() => setStickyMenu(true)}
+              className={"border border-white p-3 cursor-pointer grow"}
+            >
+              Sticky Menu
+            </div>
+            {stickyMenu && (
+              <Dialog
+                open={stickyMenu}
+                toggle={() => setStickyMenu(false)}
+                className="w-11/12"
+              >
+                <StickybansModal />
+              </Dialog>
+            )}
+
             <RoundData />
           </div>
         </div>
@@ -88,7 +107,6 @@ const LookupOption = (props: LookupProps) => {
               onInput={(event) => {
                 const target = event.target as HTMLInputElement;
                 setHeldValue(target.value);
-                console.log(`clearing ${timer}`);
                 clearTimeout(timer);
                 setTimer(
                   setTimeout(() => {

diff --git a/src/components/dialog.tsx b/src/components/dialog.tsx
@@ -21,7 +21,7 @@ export const Dialog: React.FC<DialogPropsType> = (props: DialogPropsType) => {
       <dialog
         {...rest}
         open={open}
-        className={`w-full md:w-1/2 py-10 border border-themed foreground z-20 px-10 ${
+        className={`w-full md:w-11/12 py-10 border border-themed foreground z-20 px-10 ${
           className ?? ""
         } md:min-w-[600px]`}
         style={{

diff --git a/src/components/expand.tsx b/src/components/expand.tsx
@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import { Link } from "./link";
+import { Dialog } from "./dialog";
+
+type ExpandProps = {
+  label: string;
+  value: string;
+};
+
+export const Expand: React.FC<ExpandProps> = (props: ExpandProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Link onClick={() => setOpen(true)}>{props.label}</Link>
+      {open && (
+        <Dialog open={open} toggle={() => setOpen(false)}>
+          <div className="pt-10">{props.value}</div>
+        </Dialog>
+      )}
+    </>
+  );
+};
diff --git a/src/components/stickybans.tsx b/src/components/stickybans.tsx
@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "./link";
+import { Dialog } from "./dialog";
+
+type Stickyban = {
+  id: number;
+  identifier: string;
+  reason: string;
+  message: string;
+  date: string;
+  active: boolean;
+  adminId?: number;
+  adminCkey?: string;
+};
+
+export const StickybansModal: React.FC<Record<string, never>> = () => {
+  const [stickybanData, setStickybanData] = useState<Stickyban[] | null>(null);
+
+  useEffect(() => {
+    if (!stickybanData) {
+      fetch(`${import.meta.env.VITE_API_PATH}/Stickyban`).then((value) =>
+        value.json().then((json) => setStickybanData(json))
+      );
+    }
+  });
+
+  if (!stickybanData) {
+    return <div className="flex flex-row justify-center">Loading...</div>;
+  }
+
+  return (
+    <div className="pt-10">
+      <div className="overflow-scroll max-h-[800px]">
+        <table>
+          <tbody>
+            <tr>
+              <th>Identifier</th>
+              <th>Message</th>
+              <th>Reason</th>
+              <th>Actions</th>
+            </tr>
+            {stickybanData.map((stickyban) => (
+              <StickybanEntry stickyban={stickyban} key={stickyban.id} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+const StickybanEntry = (props: { stickyban: Stickyban }) => {
+  const { stickyban } = props;
+
+  return (
+    <tr>
+      <td className="border p-2">{stickyban.identifier}</td>
+      <td className="border p-2">{stickyban.message}</td>
+      <td className="border p-2">{stickyban.reason.trim()}</td>
+      <td className="border p-2">
+        <ExpandDetails stickyban={stickyban} />
+      </td>
+    </tr>
+  );
+};
+
+type StickybansMatchedCid = {
+  id: number;
+  cid: string;
+  linkedStickyban: number;
+};
+
+type StickybansMatchedCkey = {
+  id: number;
+  ckey: string;
+  linkedStickyban: number;
+  whitelisted: boolean;
+};
+
+type StickybansMatchedIp = {
+  id: number;
+  ip: string;
+  linkedStickyban: number;
+};
+
+const ExpandDetails = (props: { stickyban: Stickyban }) => {
+  const { stickyban } = props;
+
+  const [cids, setCids] = useState<StickybansMatchedCid[] | null>(null);
+  const [ckeys, setCkeys] = useState<StickybansMatchedCkey[] | null>(null);
+  const [ips, setIps] = useState<StickybansMatchedIp[] | null>(null);
+
+  const [open, setOpen] = useState(false);
+
+  const check = () => {
+    setOpen(true);
+
+    fetch(
+      `${import.meta.env.VITE_API_PATH}/Stickyban/Cid?id=${stickyban.id}`
+    ).then((value) =>
+      value.json().then((json) => {
+        setCids(json);
+      })
+    );
+
+    fetch(
+      `${import.meta.env.VITE_API_PATH}/Stickyban/Ckey?id=${stickyban.id}`
+    ).then((value) =>
+      value.json().then((json) => {
+        setCkeys(json);
+      })
+    );
+
+    fetch(
+      `${import.meta.env.VITE_API_PATH}/Stickyban/Ip?id=${stickyban.id}`
+    ).then((value) =>
+      value.json().then((json) => {
+        setIps(json);
+      })
+    );
+  };
+
+  return (
+    <>
+      <Link onClick={() => check()}>Details</Link>
+      {open && (
+        <Dialog open={!!cids} toggle={() => setOpen(false)}>
+          <div className="flex flex-col pt-10">
+            <div>CIDs: {cids && cids.map((cid) => cid.cid).join(", ")}</div>
+            <div>
+              CKEYs: {ckeys && ckeys.map((ckey) => ckey.ckey).join(", ")}
+            </div>
+            <div>IPs: {ips && ips.map((ip) => ip.ip).join(", ")}</div>
+          </div>
+        </Dialog>
+      )}
+    </>
+  );
+};
diff --git a/src/components/userLookup.tsx b/src/components/userLookup.tsx
@@ -13,6 +13,7 @@ import { ConnectionHistory } from "../types/loginTriplet";
 import { Dialog } from "./dialog";
 import { TripletList } from "./tripletsList";
 import { Link } from "./link";
+import { Expand } from "./expand";
 
 type ActiveLookupType = {
   value: string;
@@ -406,21 +407,6 @@ const ConnectionTypeDetails = (props: {
   );
 };
 
-const Expand = (props: { label: string; value: string }) => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <Link onClick={() => setOpen(true)}>{props.label}</Link>
-      {open && (
-        <Dialog open={open} toggle={() => setOpen(false)}>
-          <div className="pt-10">{props.value}</div>
-        </Dialog>
-      )}
-    </>
-  );
-};
-
 interface PlayerNote {
   id: number;
   playerId: number;

diff --git a/src/index.css b/src/index.css
@@ -55,7 +55,7 @@
   border-radius: 2px;
   padding: 16px;
   position: fixed;
-  z-index: 1;
+  z-index: 100;
   left: 50%;
   bottom: 30px;
 }