wip: cleaned legacy player modal/list + randoms

tabarra · Dec 27, 2023 · 12d8964 · 12d8964
1 parent 6f5e917
commit 12d8964
Show file tree

Hide file tree

Showing 19 changed files with 108 additions and 1,038 deletions.
diff --git a/docs/dev_notes.md b/docs/dev_notes.md
@@ -175,13 +175,13 @@ setTimeout(() => {
         - [x] admin manager should open "my account" when trying to edit self
         - [x] maybe separate the backend routes
     - [x][3d] playerlist
-    - [ ][2d] implement new player modal
+    - [x][2d] implement new player modal
         - [x] legacy pages should open the new modal
         - [x] write tsx + handling of data
-        - [ ] all actions
-        - [ ] clean legacy modal and playerlist code
-        - [ ] make sure it is responsive
-        - [ ] check behavior on error (invalid player, 500, etc)
+        - [x] all actions
+        - [x] make sure it is responsive
+        - [x] check behavior on error (invalid player, 500, etc)
+        - [x] clean legacy modal and playerlist code
 - [ ][5d] full auth flow
     - [x] password login
     - [x] cfx.re login

diff --git a/fxmanifest.lua b/fxmanifest.lua
@@ -76,7 +76,6 @@ files {
     'web/public/js/humanizeDuration.min.js',
     'web/public/js/txadmin/base.js',
     'web/public/js/txadmin/main.js',
-    'web/public/js/txadmin/players.js',
     'web/public/xtermjs/xterm.min.css',
     'web/public/xtermjs/xterm.min.js',
     'web/public/xtermjs/xterm-addon-fit.min.js',

diff --git a/package-lock.json b/package-lock.json
diff --git a/panel/package.json b/panel/package.json
@@ -32,6 +32,7 @@
     "@tanstack/react-virtual": "^3.0.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "is-mobile": "^4.0.0",
     "jotai": "^2.5.1",
     "jotai-effect": "^0.2.3",
     "lucide-react": "^0.300.0",

diff --git a/panel/src/components/ui/dialog.tsx b/panel/src/components/ui/dialog.tsx
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+        <X className="h-6 w-6" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

diff --git a/panel/src/global.d.ts b/panel/src/global.d.ts
@@ -7,6 +7,7 @@ type OpenPlayerModalMessage = { type: 'openPlayerModal', ref: PlayerModalRefType
 export declare global {
     interface Window {
         txConsts: InjectedTxConsts;
+        txIsMobile: boolean;
         invokeNative?: (nativeName: string, ...args: any[]) => void;
     }
     type MessageEventFromIframe = MessageEvent<LogoutNoticeMessage>

diff --git a/panel/src/layout/playerModal/IdsTab.tsx b/panel/src/layout/playerModal/IdsTab.tsx
@@ -34,6 +34,8 @@ function IdsBlock({ title, emptyMessage, currIds, allIds, isSmaller }: IdsBlockP
             {hasCopiedIds ? (
                 <span className="text-sm text-success-inline">Copied!</span>
             ) : (
+                // TODO: a button to erase the ids from the database can be added here,
+                // requires tooltip and confirm modal though
                 <button onClick={handleCopyIds}>
                     <CopyIcon className="h-4 text-secondary hover:text-primary" />
                 </button>

diff --git a/panel/src/layout/playerModal/InfoTab.tsx b/panel/src/layout/playerModal/InfoTab.tsx
@@ -38,23 +38,27 @@ function PlayerNotesBox({ playerRef, player }: { playerRef: PlayerModalRefType,
         path: `/player/save_note`,
     });
 
+    const doSaveNotes = () => {
+        setNotesLogText('Saving...');
+        playerNotesApi({
+            queryParams: playerRef,
+            data: {
+                note: textAreaRef.current?.value.trim(),
+            },
+            success: (data) => {
+                if ('error' in data) {
+                    setNotesLogText(data.error);
+                } else {
+                    setNotesLogText('Saved!');
+                }
+            },
+        });
+    }
+
     const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if (event.key === 'Enter' && !event.shiftKey) {
+        if (event.key === 'Enter' && !event.shiftKey && !window.txIsMobile) {
             event.preventDefault();
-            setNotesLogText('Saving...');
-            playerNotesApi({
-                queryParams: playerRef,
-                data: {
-                    note: textAreaRef.current?.value.trim(),
-                },
-                success: (data) => {
-                    if('error' in data){
-                        setNotesLogText(data.error);
-                    }else{
-                        setNotesLogText('Saved!');
-                    }
-                },
-            });
+            doSaveNotes();
         }
     }
 
@@ -74,6 +78,15 @@ function PlayerNotesBox({ playerRef, player }: { playerRef: PlayerModalRefType,
                 ? 'Type your notes about the player.'
                 : 'Cannot set notes for players that are not registered.'}
         />
+        {window.txIsMobile && <div className="mt-2 w-full">
+            <Button
+                variant="outline"
+                size='xs'
+                onClick={doSaveNotes}
+                disabled={!player.isRegistered}
+                className="w-full"
+            >Save Note</Button>
+        </div>}
     </>
 }
 
@@ -119,7 +132,7 @@ export default function InfoTab({ playerRef, player, setSelectedTab, refreshModa
                 successMsg: 'Whitelist changed.',
             },
             success: (data, toastId) => {
-                if('success' in data){
+                if ('success' in data) {
                     refreshModalData();
                 }
             },

diff --git a/panel/src/layout/playerModal/PlayerModal.tsx b/panel/src/layout/playerModal/PlayerModal.tsx
@@ -141,7 +141,7 @@ export default function PlayerModal() {
                         ))}
                     </div>
                     {/* NOTE: consistent height: sm:h-[16.5rem] */}
-                    <ScrollArea className="w-full max-h-[calc(100vh-3.125rem-4rem-5rem)] min-h-[16.5rem] px-4 py-2 md:py-0">
+                    <ScrollArea className="w-full max-h-[calc(100vh-3.125rem-4rem-5rem)] min-h-[16.5rem] md:max-h-[50vh] px-4 py-2 md:py-0">
                         {!modalData ? (
                             <PlayerModalMidMessage>
                                 {modalError ? (

diff --git a/panel/src/layout/playerModal/PlayerModalFooter.tsx b/panel/src/layout/playerModal/PlayerModalFooter.tsx
@@ -47,7 +47,7 @@ export default function PlayerModalFooter({ playerRef, player }: PlayerModalFoot
     }
 
     const handleGiveAdmin = () => {
-        if(!player) return;
+        if (!player) return;
         const params = new URLSearchParams();
         params.set("autofill", "true");
         params.set("name", player.pureName);
@@ -68,7 +68,7 @@ export default function PlayerModalFooter({ playerRef, player }: PlayerModalFoot
     }
 
     const handleDm = () => {
-        if(!player) return;
+        if (!player) return;
         openPromptDialog({
             title: `Direct Message ${player.displayName}`,
             message: 'Type direct message below',
@@ -88,7 +88,7 @@ export default function PlayerModalFooter({ playerRef, player }: PlayerModalFoot
     }
 
     const handleKick = () => {
-        if(!player) return;
+        if (!player) return;
         openPromptDialog({
             title: `Kick ${player.displayName}`,
             message: 'Type the kick reason or leave it blank (press enter)',
@@ -107,7 +107,7 @@ export default function PlayerModalFooter({ playerRef, player }: PlayerModalFoot
     }
 
     const handleWarn = () => {
-        if(!player) return;
+        if (!player) return;
         openPromptDialog({
             title: `Warn ${player.displayName}`,
             message: 'Type the warn reason.',

diff --git a/panel/src/layout/playerlistSidebar/PlayerlistSidebar.tsx b/panel/src/layout/playerlistSidebar/PlayerlistSidebar.tsx
@@ -21,9 +21,7 @@ export function PlayerlistSidebar({ isSheet }: PlayerSidebarProps) {
                     : 'calc(100vh - 3.5rem - 1px - 2rem)',
             }}
         >
-            <div
-                className="rounded-xl border border-border bg-card text-card-foreground shadow-sm shrink-0"
-            >
+            <div className="rounded-xl border border-border bg-card text-card-foreground shadow-sm shrink-0">
                 <PlayerlistSummary />
             </div>
             <div

diff --git a/panel/src/main.tsx b/panel/src/main.tsx
@@ -13,7 +13,14 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { isValidRedirectPath } from './lib/utils.ts';
 import ThemeProvider from './components/ThemeProvider.tsx';
 import { StrictMode } from 'react';
+import { isMobile } from 'is-mobile';
 
+//Detecting if the user is on a mobile device
+try {
+    window.txIsMobile = isMobile({ tablet: true });
+} catch (error) {
+    window.txIsMobile = false;
+}
 
 //If the initial routing is from WebPipe, remove it from the pathname so the router can handle it
 if (window.location.pathname.substring(0, 8) === '/WebPipe') {

diff --git a/resource/sv_main.lua b/resource/sv_main.lua
@@ -235,7 +235,7 @@ txaEventHandlers.playerWarned = function(eventData)
         end
         txPrint('Warning '..pName..' with reason: '..eventData.reason)
     else
-        logError('handleWarnEvent: player not found')
+        txPrint('handleWarnEvent: player not found')
     end
 end
 

diff --git a/web/main/adminManager.ejs b/web/main/adminManager.ejs
@@ -194,7 +194,7 @@
         const discordValue = params.get('discord');
         autofill = {
             name: params.get('name'),
-            citizenfxID: params.get('citizenfx'),
+            citizenfxID: params.get('citizenfx') ?? '',
             discordID: discordValue && discordValue.includes(':') ? discordValue.split(':')[1] : '',
         }
         window.history.pushState(null, 'txAdmin', 'adminManager?');

diff --git a/web/parts/footer.ejs b/web/parts/footer.ejs
@@ -5,9 +5,6 @@
         </div>
     </div>
 
-
-<%- await include('parts/playerInfoModal.ejs', locals) %>
-
     <!-- CoreUI and necessary plugins-->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" 
         integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" 
@@ -21,6 +18,5 @@
     <script src="<%= resourcePath %>js/socket.io.min.js"></script>
     <script src="<%= resourcePath %>js/txadmin/base.js"></script>
     <script src="<%= resourcePath %>js/txadmin/main.js"></script>
-    <script src="<%= resourcePath %>js/txadmin/players.js"></script>
 </body>
 </html>
diff --git a/web/parts/header.ejs b/web/parts/header.ejs
@@ -48,32 +48,6 @@
 </head>
 
 <body class="c-app <%= uiTheme %>">
-    <!-- Player List -->
-    <% if (isWebInterface) { %>
-        <div class="c-sidebar c-sidebar-md c-sidebar-light c-sidebar-fixed 
-            c-sidebar-right c-sidebar-xl-show playerlist-sidebar" id="plist">
-            <div class="tab-pane" role="tabpanel">
-                <div class="list-group list-group-accent">
-                    <div class="list-group-item list-group-item-accent-secondary playerlist-header plheader">
-                        <span class="plheader-label font-weight-bold text-muted text-uppercase">
-                            Players:
-                        </span>
-                        <span class="plheader-bignum float-right" id="plist-count">--</span>
-                    </div>
-                    <div class="list-group-item list-group-item-accent-secondary playerlist-search">
-                        <input class="form-control form-control-sm text-center" type="text"
-                            placeholder="Search" id="plist-search">
-                    </div>
-                    <div class="playerlist thin-scroll" id="playerlist">
-                      <div class="list-group-item text-center p-3 font-weight-bold" id="playerlist-message">
-                        loading...
-                      </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    <% } %>
-
     <!-- Center Content -->
     <div class="c-wrapper c-fixed-components">