style changes

src/views/mod-tools/ModToolsView.scss

@@ -2,6 +2,6 @@
     width: 200px;
 }
 
-@import './views/room/ModToolsRoomView';
+@import './views/room/room-tools/ModToolsRoomView';
 @import './views/chatlog/ChatlogView';
-@import './views/user/ModToolsUserView';
+@import './views/user/user-info/ModToolsUserView';

src/views/mod-tools/ModToolsView.tsx

@@ -13,11 +13,11 @@ import { ModToolsContextProvider } from './context/ModToolsContext';
 import { ModToolsViewProps } from './ModToolsView.types';
 import { initialModTools, ModToolsActions, ModToolsReducer } from './reducers/ModToolsReducer';
 import { ISelectedUser } from './utils/ISelectedUser';
-import { ModToolsChatlogView } from './views/room-chatlog/ModToolsChatlogView';
+import { ModToolsChatlogView } from './views/room/room-chatlog/ModToolsChatlogView';
-import { ModToolsRoomView } from './views/room/ModToolsRoomView';
+import { ModToolsRoomView } from './views/room/room-tools/ModToolsRoomView';
 import { ModToolsTicketsView } from './views/tickets/ModToolsTicketsView';
-import { ModToolsUserChatlogView } from './views/user-chatlog/ModToolsUserChatlogView';
+import { ModToolsUserChatlogView } from './views/user/user-chatlog/ModToolsUserChatlogView';
-import { ModToolsUserView } from './views/user/ModToolsUserView';
+import { ModToolsUserView } from './views/user/user-info/ModToolsUserView';
 
 export const ModToolsView: FC<ModToolsViewProps> = props =>
 {

src/views/mod-tools/utils/IUserInfo.ts

@@ -0,0 +1,6 @@
+export interface IUserInfo
+{
+    nameKey: string;
+    nameKeyFallback: string;
+    value: string;
+}

src/views/mod-tools/views/chatlog/ChatlogView.scss

@@ -29,6 +29,7 @@
 
             .room-info {
                 border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+                background: rgba(0, 0, 0, .05);
             }
         }
     }

src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.tsx

@@ -1,8 +1,8 @@
 import { ChatRecordData, ModtoolRequestRoomChatlogComposer, ModtoolRoomChatlogEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
+import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
-import { ChatlogView } from '../chatlog/ChatlogView';
+import { ChatlogView } from '../../chatlog/ChatlogView';
 import { ModToolsChatlogViewProps } from './ModToolsChatlogView.types';
 
 export const ModToolsChatlogView: FC<ModToolsChatlogViewProps> = props =>

src/views/mod-tools/views/room/room-tools/ModToolsRoomView.tsx

@@ -1,10 +1,10 @@
-import { ModtoolRequestRoomInfoComposer, ModtoolRoomInfoEvent } from '@nitrots/nitro-renderer';
+import { ModerateRoomMessageComposer, ModeratorActionMessageComposer, ModtoolRequestRoomInfoComposer, ModtoolRoomInfoEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { TryVisitRoom } from '../../../../api';
+import { TryVisitRoom } from '../../../../../api';
-import { ModToolsOpenRoomChatlogEvent } from '../../../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
+import { ModToolsOpenRoomChatlogEvent } from '../../../../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
-import { dispatchUiEvent } from '../../../../hooks';
+import { dispatchUiEvent } from '../../../../../hooks';
-import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
+import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { ModToolsRoomViewProps } from './ModToolsRoomView.types';
 
 export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
@@ -20,6 +20,12 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
     const [ ownerInRoom, setOwnerInRoom ] = useState(false);
     const [ usersInRoom, setUsersInRoom ] = useState(0);
 
+    //form data
+    const [kickUsers, setKickUsers] = useState(false);
+    const [lockRoom, setLockRoom] = useState(false);
+    const [changeRoomName, setChangeRoomName] = useState(false);
+    const [message, setMessage] = useState('');
+
     useEffect(() =>
     {
         if(infoRequested) return;
@@ -50,15 +56,21 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
 
         switch(action)
         {
-            case 'close':
+            case 'alert_only':
-                onCloseClick();
+                if(message.trim().length === 0) return;
+                SendMessageHook(new ModeratorActionMessageComposer(ModeratorActionMessageComposer.ACTION_ALERT, message, ''));
+                return;
+            case 'send_message':
+                if(message.trim().length === 0) return;
+                SendMessageHook(new ModeratorActionMessageComposer(ModeratorActionMessageComposer.ACTION_MESSAGE, message, ''));
+                SendMessageHook(new ModerateRoomMessageComposer(roomId, lockRoom ? 1 : 0, changeRoomName ? 1 : 0, kickUsers ? 1 : 0))
                 return;
         }
-    }, [ onCloseClick ]);
+    }, [changeRoomName, kickUsers, lockRoom, message, roomId]);
 
     return (
         <NitroCardView className="nitro-mod-tools-room" simple={ true }>
-            <NitroCardHeaderView headerText={ 'Room Info' + (name ? ': ' + name : '') } onCloseClick={ event => handleClick('close') } />
+            <NitroCardHeaderView headerText={ 'Room Info' + (name ? ': ' + name : '') } onCloseClick={ () => onCloseClick() } />
             <NitroCardContentView className="text-black">
                 <div className="d-flex justify-content-between align-items-center mb-1">
                     <div>
@@ -80,28 +92,28 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
                 </div>
                 <div className="bg-muted rounded py-1 px-2 mb-2">
                     <div className="form-check">
-                        <input className="form-check-input" type="checkbox" id="kickUsers" />
+                        <input className="form-check-input" type="checkbox" id="kickUsers" checked={ kickUsers } onChange={e => setKickUsers(e.target.checked)}/>
                         <label className="form-check-label" htmlFor="kickUsers">
                             Kick users out of the room
                         </label>
                     </div>
                     <div className="form-check">
-                        <input className="form-check-input" type="checkbox" id="lockRoom" />
+                        <input className="form-check-input" type="checkbox" id="lockRoom" checked={ lockRoom } onChange={e => setLockRoom(e.target.checked)}/>
                         <label className="form-check-label" htmlFor="lockRoom">
                             Change room lock to doorbell
                         </label>
                     </div>
                     <div className="form-check">
-                        <input className="form-check-input" type="checkbox" id="lockRoom" />
+                        <input className="form-check-input" type="checkbox" id="roomName" checked={ changeRoomName } onChange={e => setChangeRoomName(e.target.checked)}/>
-                        <label className="form-check-label" htmlFor="lockRoom">
+                        <label className="form-check-label" htmlFor="roomName">
                             Change room name to "Inappro- priate to Hotel Management"
                         </label>
                     </div>
                 </div>
-                <textarea className="form-control mb-2" placeholder="Type a mandatory message to the users in this text box..."></textarea>
+                <textarea className="form-control mb-2" placeholder="Type a mandatory message to the users in this text box..." value={message} onChange={e => setMessage(e.target.value)}></textarea>
                 <div className="d-flex justify-content-between">
-                    <button className="btn btn-danger w-100 me-2">Send Caution</button>
+                    <button className="btn btn-danger w-100 me-2" onClick={() => handleClick('send_message')}>Send Caution</button>
-                    <button className="btn btn-success w-100">Send Alert only</button>
+                    <button className="btn btn-success w-100" onClick={() => handleClick('alert_only')}>Send Alert only</button>
                 </div>
             </NitroCardContentView>
         </NitroCardView>

src/views/mod-tools/views/user/ModToolsUserView.scss

@@ -1,8 +0,0 @@
-.nitro-mod-tools-user {
-    width: 240px;
-    
-    .username {
-        color: #1E7295;
-        text-decoration: underline;
-    }
-}

src/views/mod-tools/views/user/ModToolsUserView.tsx

@@ -1,58 +0,0 @@
-import { ModeratorUserInfoData, ModtoolRequestUserInfoComposer, ModtoolUserInfoEvent } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useState } from 'react';
-import { ModToolsOpenUserChatlogEvent } from '../../../../events/mod-tools/ModToolsOpenUserChatlogEvent';
-import { CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
-import { ModToolsUserViewProps } from './ModToolsUserView.types';
-
-export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
-{
-    const { onCloseClick = null, userId = null, simple = true } = props;
-    const [userInfo, setUserInfo] = useState<ModeratorUserInfoData>(null);
-
-    useEffect(() =>
-    {
-        SendMessageHook(new ModtoolRequestUserInfoComposer(userId));
-    }, [userId]);
-
-
-    const onModtoolUserInfoEvent = useCallback((event: ModtoolUserInfoEvent) =>
-    {
-        const parser = event.getParser();
-
-        if(!parser || parser.data.userId !== userId) return;
-
-        setUserInfo(parser.data);
-    }, [setUserInfo, userId]);
-
-    CreateMessageHook(ModtoolUserInfoEvent, onModtoolUserInfoEvent);
-    
-    return (
-        <NitroCardView className="nitro-mod-tools-user" simple={true}>
-            <NitroCardHeaderView headerText={'User Info: ' + (userInfo ? userInfo.userName : '')} onCloseClick={() => onCloseClick()} />
-            <NitroCardContentView className="text-black">
-                {userInfo &&
-                    <>
-                        {!simple &&
-                            <div className="col-sm-3 px-0 d-flex align-items-center">
-                                <AvatarImageView figure={userInfo.figure} direction={2} />
-                            </div>
-                        }
-                        <div className="d-flex justify-content-between align-items-center mb-1">
-                            <div>
-                                <b>Name:</b> <span className="username fw-bold cursor-pointer">{userInfo.userName}</span>
-                            </div>
-                            <button className="btn btn-sm btn-primary" onClick={() => dispatchUiEvent(new ModToolsOpenUserChatlogEvent(userId))}>Chatlog</button>
-                        </div>
-                        <div className="d-flex justify-content-between align-items-center mb-1">
-                            <div>
-                                <b>CFHs:</b> {userInfo.cfhCount}
-                            </div>
-                        </div>
-                    </>
-                }
-            </NitroCardContentView>
-        </NitroCardView>
-    );
-}

src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.tsx

@@ -1,8 +1,8 @@
 import { ChatRecordData, ModtoolRequestUserChatlogComposer, ModtoolUserChatlogEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { CreateMessageHook, SendMessageHook } from '../../../../hooks';
+import { CreateMessageHook, SendMessageHook } from '../../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
-import { ChatlogView } from '../chatlog/ChatlogView';
+import { ChatlogView } from '../../chatlog/ChatlogView';
 import { ModToolsUserChatlogViewProps } from './ModToolsUserChatlogView.types';
 
 export const ModToolsUserChatlogView: FC<ModToolsUserChatlogViewProps> = props =>

src/views/mod-tools/views/user/user-info/ModToolsUserView.scss

@@ -0,0 +1,27 @@
+.nitro-mod-tools-user {
+    width: 350px;
+    height: 400px;
+
+    .username {
+        color: #1E7295;
+        text-decoration: underline;
+    }
+
+    .table {
+        color: $black;
+
+        > :not(caption) > * > * {
+            box-shadow: none;
+            border-bottom: 1px solid rgba(0, 0, 0, .2);
+        }
+
+        &.table-striped > tbody > tr:nth-of-type(odd) {
+            color: $black;
+            background: rgba(0, 0, 0, .05);
+        }
+
+        td {
+            padding: 0px 5px;
+        }
+    }
+}

src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx

@@ -0,0 +1,161 @@
+import { FriendlyTime, ModeratorUserInfoData, ModtoolRequestUserInfoComposer, ModtoolUserInfoEvent } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { ModToolsOpenUserChatlogEvent } from '../../../../../events/mod-tools/ModToolsOpenUserChatlogEvent';
+import { CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
+import { IUserInfo } from '../../../utils/IUserInfo';
+import { ModToolsUserViewProps } from './ModToolsUserView.types';
+
+
+export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
+{
+    const { onCloseClick = null, userId = null, simple = true } = props;
+    const [userInfo, setUserInfo] = useState<ModeratorUserInfoData>(null);
+
+    useEffect(() =>
+    {
+        SendMessageHook(new ModtoolRequestUserInfoComposer(userId));
+    }, [userId]);
+
+
+    const onModtoolUserInfoEvent = useCallback((event: ModtoolUserInfoEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser || parser.data.userId !== userId) return;
+
+        setUserInfo(parser.data);
+    }, [setUserInfo, userId]);
+
+    CreateMessageHook(ModtoolUserInfoEvent, onModtoolUserInfoEvent);
+
+    const OnlineIcon = useCallback(() => 
+    {
+        if(userInfo.online) return (<i className="icon icon-pf-online ml-1" />);
+        else return (<i className="icon icon-pf-offline ml-1" />);
+    }, [userInfo]);
+
+    const userProperties = useCallback(() =>
+    {
+        let properties: IUserInfo[] = [];
+
+        if(!userInfo) return properties;
+
+        properties = [
+            {
+                nameKey: 'name',
+                nameKeyFallback: 'Name',
+                value: userInfo.userName
+            },
+            {
+                nameKey: 'cfhs',
+                nameKeyFallback: 'CFHs',
+                value: userInfo.cfhCount.toString()
+            },
+            {
+                nameKey: 'abusive_cfhs',
+                nameKeyFallback: 'Abusive CFHs',
+                value: userInfo.abusiveCfhCount.toString()
+            },
+            {
+                nameKey: 'cautions',
+                nameKeyFallback: 'Cautions',
+                value: userInfo.cautionCount.toString()
+            },
+            {
+                nameKey: 'bans',
+                nameKeyFallback: 'Bans',
+                value: userInfo.banCount.toString()
+            },
+            {
+                nameKey: 'last_sanction',
+                nameKeyFallback: 'Last sanction',
+                value: userInfo.lastSanctionTime
+            },
+            {
+                nameKey: 'trade_locks',
+                nameKeyFallback: 'Trade locks',
+                value: userInfo.tradingLockCount.toString()
+            },
+            {
+                nameKey: 'lock_expires',
+                nameKeyFallback: 'Lock expires',
+                value: userInfo.tradingExpiryDate
+            },
+            {
+                nameKey: 'last_login',
+                nameKeyFallback: 'Last login',
+                value: FriendlyTime.format(userInfo.minutesSinceLastLogin * 60, '.ago', 2)
+            },
+            {
+                nameKey: 'purchase',
+                nameKeyFallback: 'Purchases',
+                value: userInfo.lastPurchaseDate
+            },
+            {
+                nameKey: 'email',
+                nameKeyFallback: 'Email',
+                value: userInfo.primaryEmailAddress
+            },
+            {
+                nameKey: 'acc_bans',
+                nameKeyFallback: 'Banned Accs.',
+                value: userInfo.identityRelatedBanCount.toString()
+            },
+            {
+                nameKey: 'registered',
+                nameKeyFallback: 'Registered',
+                value: FriendlyTime.format(userInfo.registrationAgeInMinutes * 60, '.ago', 2)
+            },
+            {
+                nameKey: 'rank',
+                nameKeyFallback: 'Rank',
+                value: userInfo.userClassification
+            }
+        ];
+
+        return properties;
+
+    }, [userInfo]);
+
+    return (
+        <NitroCardView className="nitro-mod-tools-user" simple={true}>
+            <NitroCardHeaderView headerText={'User Info: ' + (userInfo ? userInfo.userName : '')} onCloseClick={() => onCloseClick()} />
+            <NitroCardContentView className="text-black">
+                {userInfo &&
+                    <div className="row">
+                        {!simple &&
+                            <div className="col-sm-3 px-0 d-flex align-items-center">
+                                <AvatarImageView figure={userInfo.figure} direction={2} />
+                            </div>
+                        }
+                        <div className="col-7">
+                            <table className="d-flex flex-column table table-striped table-sm table-text-small text-black">
+                                <tbody>
+                                    {userProperties().map(property =>
+                                    {
+                                        return (
+                                            <tr key={property.nameKey}>
+                                                <th scope="row">{property.nameKeyFallback}</th>
+                                                <td className={'' + (property.nameKey === 'name' ? 'username' : '')}>
+                                                    {property.value} {(property.nameKey === 'name') && <OnlineIcon/>}
+                                                </td>
+                                            </tr>
+                                        )
+                                    })}
+                                </tbody>
+                            </table>
+                        </div>
+                        <div className="col-5">
+                            <button className="btn btn-sm btn-primary" onClick={() => dispatchUiEvent(new ModToolsOpenUserChatlogEvent(userId))}>Room Chat</button>
+                            <button className="btn btn-sm btn-primary mt-2">Send Message</button>
+                            <button className="btn btn-sm btn-primary mt-2">Room Visits</button>
+                            <button className="btn btn-sm btn-primary mt-2">Mod Action</button>
+                        </div>
+                    </div>
+                }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}