wip(ban-tpl): hydrate the web modal with backend data

core/webroutes/banTemplates/getBanTemplates.ts

@@ -9,12 +9,12 @@ const console = consoleFactory(modulename);
 //Response type
 export type GetBanTemplatesSuccessResp = BanTemplatesDataType[];
 
+
 /**
- * Retrieves the ban templates from the config file
+ * NOTE: Extracted this from the default export to be able to use it in player modal
  * NOTE: i'm doing validation here because really nowhere else to do at boot time
  */
-export default async function GetBanTemplates(ctx: AuthedCtx) {
-    const sendTypedResp = (data: GetBanTemplatesSuccessResp | GenericApiErrorResp) => ctx.send(data);
+export const getBanTemplatesImpl = (ctx: AuthedCtx): BanTemplatesDataType[] => {
     const savedTemplates = ctx.txAdmin.configVault.getScopedStructure('banTemplates');
 
     //Validating saved data
@@ -23,7 +23,7 @@ export default async function GetBanTemplates(ctx: AuthedCtx) {
             'Invalid ban templates data. Expected array, got:',
             typeof savedTemplates,
         );
-        return sendTypedResp([]);
+        return [];
     }
 
     const filteredTemplates = (savedTemplates as unknown[]).filter((template): template is BanTemplatesDataType => {
@@ -38,5 +38,16 @@ export default async function GetBanTemplates(ctx: AuthedCtx) {
         return true;
     });
 
-    return sendTypedResp(filteredTemplates);
+    return filteredTemplates;
+}
+
+
+/**
+ * Retrieves the ban templates from the config file
+ */
+export default async function GetBanTemplates(ctx: AuthedCtx) {
+    const sendTypedResp = (data: GetBanTemplatesSuccessResp | GenericApiErrorResp) => ctx.send(data);
+    const templates = getBanTemplatesImpl(ctx);
+
+    return sendTypedResp(templates);
 };

core/webroutes/player/modal.ts

@@ -7,6 +7,7 @@ import { ServerPlayer } from '@core/playerLogic/playerClasses';
 import consoleFactory from '@extras/console';
 import { AuthedCtx } from '@core/components/WebServer/ctxTypes';
 import { now } from '@extras/helpers';
+import { getBanTemplatesImpl } from '../banTemplates/getBanTemplates';
 const console = consoleFactory(modulename);
 
 //Helpers
@@ -90,6 +91,7 @@ export default async function PlayerModal(ctx: AuthedCtx) {
     // console.dir(playerData);
     return sendTypedResp({
         serverTime: now(),
+        banTemplates: getBanTemplatesImpl(ctx), //TODO: move this to websocket push
         player: playerData
     });
 };

panel/src/layout/PlayerModal/PlayerModal.tsx

@@ -18,6 +18,7 @@ import { useBackendApi } from "@/hooks/fetch";
 import { PlayerModalResp, PlayerModalSuccess } from "@shared/playerApiTypes";
 import PlayerModalFooter from "./PlayerModalFooter";
 import ModalCentralMessage from "@/components/ModalCentralMessage";
+import type { BanTemplatesDataType } from "@shared/otherTypes";
 
 
 const modalTabs = [
@@ -191,6 +192,7 @@ export default function PlayerModal() {
                                     player={modalData.player}
                                 />}
                                 {selectedTab === 'Ban' && <PlayerBanTab
+                                    banTemplates={modalData.banTemplates}
                                     playerRef={playerRef!}
                                 />}
                             </>

panel/src/lib/utils.ts

@@ -203,3 +203,27 @@ export const banDurationToString = (duration: BanDurationType) => {
     const pluralizedString = duration.value === 1 ? duration.unit.slice(0, -1) : duration.unit;
     return `${duration.value} ${pluralizedString}`;
 }
+
+
+/**
+ * Converts the duration object to a short string
+ */
+export const banDurationToShortString = (duration: BanDurationType) => {
+    if (typeof duration === 'string') {
+        return duration === 'permanent' ? 'PERM' : duration;
+    }
+
+    let suffix: string;
+    if (duration.unit === 'hours') {
+        suffix = 'h';
+    } else if (duration.unit === 'days') {
+        suffix = 'd';
+    } else if (duration.unit === 'weeks') {
+        suffix = 'w';
+    } else if (duration.unit === 'months') {
+        suffix = 'mo';
+    } else {
+        suffix = duration.unit;
+    }
+    return `${duration.value}${suffix}`;
+}

shared/playerApiTypes.ts

@@ -1,4 +1,5 @@
 import { GenericApiErrorResp } from "genericApiTypes";
+import { BanTemplatesDataType } from "otherTypes";
 
 //Already compliant with new db specs
 export type PlayerHistoryItem = {
@@ -40,6 +41,7 @@ export type PlayerModalPlayerData = {
 
 export type PlayerModalSuccess = {
     serverTime: number; //required to calculate if bans have expired on frontend
+    banTemplates: BanTemplatesDataType[]; //TODO: move this to websocket push
     player: PlayerModalPlayerData;
 }
 export type PlayerModalResp = PlayerModalSuccess | GenericApiErrorResp;