nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 06:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

style changes

Browse Source
This commit is contained in:
dank074 2021-10-19 19:04:58 -05:00
parent c959bbc255
commit e81cc1e7fd
16 changed files with 236 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/mod-tools/ModToolsView.scss
View File

@ -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';

8
src/views/mod-tools/ModToolsView.tsx
View File

@ -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<ModToolsViewProps> = props =>
{

6
src/views/mod-tools/utils/IUserInfo.ts Normal file
View File

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

1
src/views/mod-tools/views/chatlog/ChatlogView.scss
View File

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

6
src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx → src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.tsx
View File

@ -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<ModToolsChatlogViewProps> = props =>

0
src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.types.ts → src/views/mod-tools/views/room/room-chatlog/ModToolsChatlogView.types.ts
View File

0
src/views/mod-tools/views/room/ModToolsRoomView.scss → src/views/mod-tools/views/room/room-tools/ModToolsRoomView.scss
View File

46
src/views/mod-tools/views/room/ModToolsRoomView.tsx → src/views/mod-tools/views/room/room-tools/ModToolsRoomView.tsx
View File

@ -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<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':
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 (
<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" />
<label className="form-check-label" htmlFor="lockRoom">
<input className="form-check-input" type="checkbox" id="roomName" checked={ changeRoomName } onChange={e => setChangeRoomName(e.target.checked)}/>
<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-success w-100">Send Alert only</button>
<button className="btn btn-danger w-100 me-2" onClick={() => handleClick('send_message')}>Send Caution</button>
<button className="btn btn-success w-100" onClick={() => handleClick('alert_only')}>Send Alert only</button>
</div>
</NitroCardContentView>
</NitroCardView>

0
src/views/mod-tools/views/room/ModToolsRoomView.types.ts → src/views/mod-tools/views/room/room-tools/ModToolsRoomView.types.ts
View File

8
src/views/mod-tools/views/user/ModToolsUserView.scss
View File

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

58
src/views/mod-tools/views/user/ModToolsUserView.tsx
View File

@ -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>
);
}

6
src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx → src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.tsx
View File

@ -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<ModToolsUserChatlogViewProps> = props =>

0
src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.types.ts → src/views/mod-tools/views/user/user-chatlog/ModToolsUserChatlogView.types.ts
View File

27
src/views/mod-tools/views/user/user-info/ModToolsUserView.scss Normal file
View File

@ -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;
}
}
}

161
src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx Normal file
View File

@ -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>
);
}

0
src/views/mod-tools/views/user/ModToolsUserView.types.ts → src/views/mod-tools/views/user/user-info/ModToolsUserView.types.ts
View File