added user room visits view

src/views/mod-tools/ModToolsView.scss

@@ -5,3 +5,4 @@
 @import './views/room/room-tools/ModToolsRoomView';
 @import './views/chatlog/ChatlogView';
 @import './views/user/user-info/ModToolsUserView';
+@import './views/user/user-room-visits/ModToolsUserRoomVisitsView';

src/views/mod-tools/ModToolsView.tsx

@@ -1,4 +1,4 @@
-import { RoomEngineEvent, RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
+import { ModeratorInitMessageEvent, RoomEngineEvent, RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useReducer, useState } from 'react';
 import { GetRoomSession } from '../../api';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
@@ -6,6 +6,7 @@ import { ModToolsOpenRoomChatlogEvent } from '../../events/mod-tools/ModToolsOpe
 import { ModToolsOpenRoomInfoEvent } from '../../events/mod-tools/ModToolsOpenRoomInfoEvent';
 import { ModToolsOpenUserChatlogEvent } from '../../events/mod-tools/ModToolsOpenUserChatlogEvent';
 import { ModToolsOpenUserInfoEvent } from '../../events/mod-tools/ModToolsOpenUserInfoEvent';
+import { CreateMessageHook } from '../../hooks';
 import { useRoomEngineEvent } from '../../hooks/events';
 import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
@@ -154,6 +155,22 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
     
     useRoomEngineEvent(RoomEngineObjectEvent.SELECTED, onRoomEngineObjectEvent);
 
+    const onModeratorInitMessageEvent = useCallback((event: ModeratorInitMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        dispatchModToolsState({
+            type: ModToolsActions.SET_INIT_DATA,
+            payload: {
+                settings: parser.data
+            }
+        });   
+    }, []);
+
+    CreateMessageHook(ModeratorInitMessageEvent, onModeratorInitMessageEvent);
+
     const handleClick = useCallback((action: string, value?: string) =>
     {
         if(!action) return;

src/views/mod-tools/reducers/ModToolsReducer.tsx

@@ -1,7 +1,9 @@
+import { ModeratorInitData } from '@nitrots/nitro-renderer';
 import { Reducer } from 'react';
 
 export interface IModToolsState
 {
+    settings: ModeratorInitData;
     currentRoomId: number;
     openRooms: number[];
     openRoomChatlogs: number[];
@@ -13,6 +15,7 @@ export interface IModToolsAction
 {
     type: string;
     payload: {
+        settings?: ModeratorInitData;
         currentRoomId?: number;
         openRooms?: number[];
         openRoomChatlogs?: number[];
@@ -23,6 +26,7 @@ export interface IModToolsAction
 
 export class ModToolsActions
 {
+    public static SET_INIT_DATA: string = 'MTA_SET_INIT_DATA';
     public static SET_CURRENT_ROOM_ID: string = 'MTA_SET_CURRENT_ROOM_ID';
     public static SET_OPEN_ROOMS: string = 'MTA_SET_OPEN_ROOMS';
     public static SET_OPEN_USERINFO: string = 'MTA_SET_OPEN_USERINFO';
@@ -32,6 +36,7 @@ export class ModToolsActions
 }
 
 export const initialModTools: IModToolsState = {
+    settings: null,
     currentRoomId: null,
     openRooms: null,
     openRoomChatlogs: null,
@@ -43,6 +48,11 @@ export const ModToolsReducer: Reducer<IModToolsState, IModToolsAction> = (state,
 {
     switch(action.type)
     {
+        case ModToolsActions.SET_INIT_DATA: {
+            const data = (action.payload.settings || state.settings || null);
+
+            return { ...state, data };
+        }
         case ModToolsActions.SET_CURRENT_ROOM_ID: {
             const currentRoomId = (action.payload.currentRoomId || state.currentRoomId || null);
 

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

@@ -1,6 +1,6 @@
 .nitro-mod-tools-user {
     width: 350px;
-    height: 400px;
+    height: 370px;
 
     .username {
         color: #1E7295;

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

@@ -5,6 +5,9 @@ import { CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../..
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
 import { IUserInfo } from '../../../utils/IUserInfo';
+import { ModToolsUserModActionView } from '../user-mod-action/ModToolsUserModActionView';
+import { ModToolsUserRoomVisitsView } from '../user-room-visits/ModToolsUserRoomVisitsView';
+import { ModToolsSendUserMessageView } from '../user-sendmessage/ModToolsSendUserMessageView';
 import { ModToolsUserViewProps } from './ModToolsUserView.types';
 
 
@@ -12,6 +15,9 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
 {
     const { onCloseClick = null, userId = null, simple = true } = props;
     const [userInfo, setUserInfo] = useState<ModeratorUserInfoData>(null);
+    const [sendMessageVisible, setSendMessageVisible] = useState(false);
+    const [modActionVisible, setModActionVisible] = useState(false);
+    const [roomVisitsVisible, setRoomVisitsVisible] = useState(false);
 
     useEffect(() =>
     {
@@ -120,6 +126,7 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
     }, [userInfo]);
 
     return (
+        <>
         <NitroCardView className="nitro-mod-tools-user" simple={true}>
             <NitroCardHeaderView headerText={'User Info: ' + (userInfo ? userInfo.userName : '')} onCloseClick={() => onCloseClick()} />
             <NitroCardContentView className="text-black">
@@ -149,13 +156,17 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
                         </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" onClick={ () => setSendMessageVisible(!sendMessageVisible)}>Send Message</button>
-                            <button className="btn btn-sm btn-primary mt-2">Room Visits</button>
+                            <button className="btn btn-sm btn-primary mt-2" onClick={ () => setRoomVisitsVisible(!roomVisitsVisible)}>Room Visits</button>
-                            <button className="btn btn-sm btn-primary mt-2">Mod Action</button>
+                            <button className="btn btn-sm btn-primary mt-2" onClick={ () => setModActionVisible(!modActionVisible)}>Mod Action</button>
                         </div>
                     </div>
                 }
             </NitroCardContentView>
         </NitroCardView>
+        {(sendMessageVisible && userInfo) && <ModToolsSendUserMessageView user={{ userId: userId, username: userInfo.userName }} onCloseClick={ () => setSendMessageVisible(false)}/>}
+        {(userInfo && modActionVisible) && <ModToolsUserModActionView user={{ userId: userId, username: userInfo.userName }} onCloseClick={() => setModActionVisible(false)}/>}
+        {(userInfo && roomVisitsVisible) && <ModToolsUserRoomVisitsView userId={userId} onCloseClick={ () => setRoomVisitsVisible(false)}/>}
+        </>
     );
 }

src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { ModToolsUserModActionViewProps } from './ModToolsUserModActionView.types';
+
+export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = props =>
+{
+    const { user = null, onCloseClick = null } = props;
+
+    return (
+        <NitroCardView className="nitro-mod-tools-user-action" simple={true}>
+            <NitroCardHeaderView headerText={'Mod Action'} onCloseClick={() => onCloseClick()} />
+            <NitroCardContentView className="text-black">
+                {user && <div></div>}
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}

src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts

@@ -0,0 +1,7 @@
+import { ISelectedUser } from '../../../utils/ISelectedUser';
+
+export interface ModToolsUserModActionViewProps
+{
+    user: ISelectedUser;
+    onCloseClick: () => void;
+}

src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.scss

@@ -0,0 +1,14 @@
+.nitro-mod-tools-user-visits {
+    min-width: 300px;
+
+    .user-visits {
+        min-height: 200px;
+
+        .roomvisits-container {
+            div.room-visit {
+                border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+            }
+        }
+        
+    }
+}

src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx

@@ -0,0 +1,66 @@
+import { ModtoolReceivedRoomsUserEvent, ModtoolRequestUserRoomsComposer, ModtoolRoomVisitedData } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
+import { CreateMessageHook, SendMessageHook } from '../../../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { ModToolsUserRoomVisitsViewProps } from './ModToolsUserRoomVisitsView.types';
+
+export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = props =>
+{
+    const { userId = null, onCloseClick = null } = props;
+
+    const [roomVisitData, setRoomVisitData] = useState<ModtoolRoomVisitedData>(null);
+
+    useEffect(() =>
+    {
+        SendMessageHook(new ModtoolRequestUserRoomsComposer(userId));
+    }, [userId]);
+
+    const onModtoolReceivedRoomsUserEvent = useCallback((event: ModtoolReceivedRoomsUserEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser || parser.data.userId !== userId) return;
+
+        setRoomVisitData(parser.data);
+    }, [userId]);
+
+    CreateMessageHook(ModtoolReceivedRoomsUserEvent, onModtoolReceivedRoomsUserEvent);
+
+    const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
+    {
+        const item = roomVisitData.rooms[props.index];
+
+        return (
+        <div style={props.style} key={props.key} className="room-visit">
+            {item.enterHour}:{item.enterMinute} <b>Room:</b> {item.roomName}
+        </div>);
+    }
+
+    return (
+        <NitroCardView className="nitro-mod-tools-user-visits" simple={true}>
+            <NitroCardHeaderView headerText={'User Visits'} onCloseClick={() => onCloseClick()} />
+            <NitroCardContentView className="text-black">
+                {roomVisitData &&
+                <div className="row h-100 w-100 user-visits">
+                    <AutoSizer defaultWidth={400} defaultHeight={200}>
+                    {({ height, width }) => 
+                    {
+                        return (
+                            <List
+                                width={width}
+                                height={height}
+                                rowCount={roomVisitData.rooms.length}
+                                rowHeight={25}
+                                className={'roomvisits-container'}
+                                rowRenderer={RowRenderer}
+                            />
+                        )
+                    }}
+                    </AutoSizer>
+                    </div>
+                }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}

src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts

@@ -0,0 +1,5 @@
+export interface ModToolsUserRoomVisitsViewProps
+{
+    userId: number;
+    onCloseClick: () => void;
+}

src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts

@@ -0,0 +1,7 @@
+import { ISelectedUser } from '../../../utils/ISelectedUser';
+
+export interface ModToolsSendUserMessageViewProps
+{
+    user: ISelectedUser;
+    onCloseClick: () => void;
+}

src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx

@@ -0,0 +1,37 @@
+import { ModMessageMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useState } from 'react';
+import { SendMessageHook } from '../../../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { ModToolsSendUserMessageViewProps } from './ModToolsSendUserMessage.types';
+
+export const ModToolsSendUserMessageView: FC<ModToolsSendUserMessageViewProps> = props =>
+{
+    const { user = null, onCloseClick = null } = props;
+    const [message, setMessage] = useState('');
+
+
+    const sendMessage = useCallback(() =>
+    {
+        if(message.trim().length === 0) return;
+
+        SendMessageHook(new ModMessageMessageComposer(user.userId, message, -999));
+    }, [message, user.userId]);
+
+    return (
+        <NitroCardView className="nitro-mod-tools-user-message" simple={true}>
+            <NitroCardHeaderView headerText={'Send Message'} onCloseClick={() => onCloseClick()} />
+            <NitroCardContentView className="text-black">
+                {user && <>
+                    <div>Message To: {user.username}</div>
+                    <div className="form-group mb-2">
+                        <textarea className="form-control" value={message} onChange={e => setMessage(e.target.value)}></textarea>
+                    </div>
+
+                    <div className="form-group mb-2">
+                        <button type="button" className="btn btn-primary" onClick={ () => sendMessage()}>Send message</button>
+                    </div>
+                </>}
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}