diff --git a/src/views/mod-tools/ModToolsView.scss b/src/views/mod-tools/ModToolsView.scss index 73b4142d..c340a20f 100644 --- a/src/views/mod-tools/ModToolsView.scss +++ b/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'; diff --git a/src/views/mod-tools/ModToolsView.tsx b/src/views/mod-tools/ModToolsView.tsx index 3c5dec10..71964dc0 100644 --- a/src/views/mod-tools/ModToolsView.tsx +++ b/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 { ModToolsRoomView } from './views/room/ModToolsRoomView'; +import { ModToolsChatlogView } from './views/room/room-chatlog/ModToolsChatlogView'; +import { ModToolsRoomView } from './views/room/room-tools/ModToolsRoomView'; import { ModToolsTicketsView } from './views/tickets/ModToolsTicketsView'; -import { ModToolsUserChatlogView } from './views/user-chatlog/ModToolsUserChatlogView'; -import { ModToolsUserView } from './views/user/ModToolsUserView'; +import { ModToolsUserChatlogView } from './views/user/user-chatlog/ModToolsUserChatlogView'; +import { ModToolsUserView } from './views/user/user-info/ModToolsUserView'; export const ModToolsView: FC = props => { diff --git a/src/views/mod-tools/utils/IUserInfo.ts b/src/views/mod-tools/utils/IUserInfo.ts new file mode 100644 index 00000000..8d49aa74 --- /dev/null +++ b/src/views/mod-tools/utils/IUserInfo.ts @@ -0,0 +1,6 @@ +export interface IUserInfo +{ + nameKey: string; + nameKeyFallback: string; + value: string; +} diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.scss b/src/views/mod-tools/views/chatlog/ChatlogView.scss index 33df955a..0b61e1d1 100644 --- a/src/views/mod-tools/views/chatlog/ChatlogView.scss +++ b/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); } } } diff --git a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx b/src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.tsx similarity index 93% rename from src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx rename to src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.tsx index 2c23264f..77573e30 100644 --- a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx +++ b/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 { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; -import { ChatlogView } from '../chatlog/ChatlogView'; +import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout'; +import { ChatlogView } from '../../chatlog/ChatlogView'; import { ModToolsChatlogViewProps } from './ModToolsChatlogView.types'; export const ModToolsChatlogView: FC = props => diff --git a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.types.ts b/src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.types.ts similarity index 100% rename from src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.types.ts rename to src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.types.ts diff --git a/src/views/mod-tools/views/room/ModToolsRoomView.scss b/src/views/mod-tools/views/room/room-tools/ModToolsRoomView.scss similarity index 100% rename from src/views/mod-tools/views/room/ModToolsRoomView.scss rename to src/views/mod-tools/views/room/room-tools/ModToolsRoomView.scss diff --git a/src/views/mod-tools/views/room/ModToolsRoomView.tsx b/src/views/mod-tools/views/room/room-tools/ModToolsRoomView.tsx similarity index 68% rename from src/views/mod-tools/views/room/ModToolsRoomView.tsx rename to src/views/mod-tools/views/room/room-tools/ModToolsRoomView.tsx index 31d8459f..6a5c69e3 100644 --- a/src/views/mod-tools/views/room/ModToolsRoomView.tsx +++ b/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 { ModToolsOpenRoomChatlogEvent } from '../../../../events/mod-tools/ModToolsOpenRoomChatlogEvent'; -import { dispatchUiEvent } from '../../../../hooks'; -import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages'; -import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; +import { TryVisitRoom } from '../../../../../api'; +import { ModToolsOpenRoomChatlogEvent } from '../../../../../events/mod-tools/ModToolsOpenRoomChatlogEvent'; +import { dispatchUiEvent } from '../../../../../hooks'; +import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout'; import { ModToolsRoomViewProps } from './ModToolsRoomView.types'; export const ModToolsRoomView: FC = props => @@ -20,6 +20,12 @@ export const ModToolsRoomView: FC = 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 = props => switch(action) { - case 'close': - onCloseClick(); + case 'alert_only': + 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 ( - handleClick('close') } /> + onCloseClick() } />
@@ -80,28 +92,28 @@ export const ModToolsRoomView: FC = props =>
- + setKickUsers(e.target.checked)}/>
- + setLockRoom(e.target.checked)}/>
- -
- +
- - + +
diff --git a/src/views/mod-tools/views/room/ModToolsRoomView.types.ts b/src/views/mod-tools/views/room/room-tools/ModToolsRoomView.types.ts similarity index 100% rename from src/views/mod-tools/views/room/ModToolsRoomView.types.ts rename to src/views/mod-tools/views/room/room-tools/ModToolsRoomView.types.ts diff --git a/src/views/mod-tools/views/user/ModToolsUserView.scss b/src/views/mod-tools/views/user/ModToolsUserView.scss deleted file mode 100644 index 05757d6c..00000000 --- a/src/views/mod-tools/views/user/ModToolsUserView.scss +++ /dev/null @@ -1,8 +0,0 @@ -.nitro-mod-tools-user { - width: 240px; - - .username { - color: #1E7295; - text-decoration: underline; - } -} diff --git a/src/views/mod-tools/views/user/ModToolsUserView.tsx b/src/views/mod-tools/views/user/ModToolsUserView.tsx deleted file mode 100644 index 373bd2df..00000000 --- a/src/views/mod-tools/views/user/ModToolsUserView.tsx +++ /dev/null @@ -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 = props => -{ - const { onCloseClick = null, userId = null, simple = true } = props; - const [userInfo, setUserInfo] = useState(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 ( - - onCloseClick()} /> - - {userInfo && - <> - {!simple && -
- -
- } -
-
- Name: {userInfo.userName} -
- -
-
-
- CFHs: {userInfo.cfhCount} -
-
- - } -
-
- ); -} diff --git a/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx b/src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.tsx similarity index 94% rename from src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx rename to src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.tsx index d2ca9bd0..0da179cb 100644 --- a/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx +++ b/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 { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; -import { ChatlogView } from '../chatlog/ChatlogView'; +import { CreateMessageHook, SendMessageHook } from '../../../../../hooks'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout'; +import { ChatlogView } from '../../chatlog/ChatlogView'; import { ModToolsUserChatlogViewProps } from './ModToolsUserChatlogView.types'; export const ModToolsUserChatlogView: FC = props => diff --git a/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.types.ts b/src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.types.ts similarity index 100% rename from src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.types.ts rename to src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.types.ts diff --git a/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss b/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss new file mode 100644 index 00000000..202b92fa --- /dev/null +++ b/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; + } + } +} diff --git a/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx b/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx new file mode 100644 index 00000000..762dcc3d --- /dev/null +++ b/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 = props => +{ + const { onCloseClick = null, userId = null, simple = true } = props; + const [userInfo, setUserInfo] = useState(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 (); + else return (); + }, [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 ( + + onCloseClick()} /> + + {userInfo && +
+ {!simple && +
+ +
+ } +
+ + + {userProperties().map(property => + { + return ( + + + + + ) + })} + +
{property.nameKeyFallback} + {property.value} {(property.nameKey === 'name') && } +
+
+
+ + + + +
+
+ } +
+
+ ); +} diff --git a/src/views/mod-tools/views/user/ModToolsUserView.types.ts b/src/views/mod-tools/views/user/user-info/ModToolsUserView.types.ts similarity index 100% rename from src/views/mod-tools/views/user/ModToolsUserView.types.ts rename to src/views/mod-tools/views/user/user-info/ModToolsUserView.types.ts