diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss index 44e545c0..3b9c28c0 100644 --- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss @@ -4,4 +4,16 @@ .content-area { height: 350px; } + + .list-container { + max-height: 150px; + overflow-y: scroll; + + .list-item { + &.selected { + background-color: cadetblue; + } + } + } + } diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx index 3b906c83..ebf71612 100644 --- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx @@ -1,4 +1,4 @@ -import { RoomSettingsEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer'; +import { RoomBannedUsersComposer, RoomBannedUsersEvent, RoomSettingsEvent, RoomUsersWithRightsComposer, RoomUsersWithRightsEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer'; import { FC, useCallback, useState } from 'react'; import { LocalizeText } from '../../../../api'; import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages'; @@ -6,6 +6,8 @@ import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, Nitro import RoomSettingsData from '../../common/RoomSettingsData'; import { NavigatorRoomSettingsAccessTabView } from './views/tab-access/NavigatorRoomSettingsAccessTabView'; import { NavigatorRoomSettingsBasicTabView } from './views/tab-basic/NavigatorRoomSettingsBasicTabView'; +import { NavigatorRoomSettingsModTabView } from './views/tab-mod/NavigatorRoomSettingsModTabView'; +import { NavigatorRoomSettingsRightsTabView } from './views/tab-rights/NavigatorRoomSettingsRightsTabView'; import { NavigatorRoomSettingsVipChatTabView } from './views/tab-vipchat/NavigatorRoomSettingsVipChatTabView'; const TABS: string[] = [ @@ -23,7 +25,6 @@ export const NavigatorRoomSettingsView: FC<{}> = props => const updateSettings = useCallback((roomSettings: RoomSettingsData) => { - console.log('update', roomSettings); setRoomSettingsData(roomSettings); }, [ setRoomSettingsData ]); @@ -34,9 +35,43 @@ export const NavigatorRoomSettingsView: FC<{}> = props => if(!parser) return; setRoomSettingsData(new RoomSettingsData(parser)); + SendMessageHook(new RoomUsersWithRightsComposer(parser.roomId)); + SendMessageHook(new RoomBannedUsersComposer(parser.roomId)); }, []); - + + const onRoomUsersWithRightsEvent = useCallback((event: RoomUsersWithRightsEvent) => + { + const parser = event.getParser(); + + if(!parser || !roomSettingsData) return; + + if(roomSettingsData.roomId !== parser.roomId) return; + + const data = Object.assign({}, roomSettingsData); + + data.usersWithRights = new Map(parser.users); + + setRoomSettingsData(data); + }, [roomSettingsData]); + + const onRoomBannedUsersEvent = useCallback((event: RoomBannedUsersEvent) => + { + const parser = event.getParser(); + + if(!parser || !roomSettingsData) return; + + if(roomSettingsData.roomId !== parser.roomId) return; + + const data = Object.assign({}, roomSettingsData); + + data.bannedUsers = new Map(parser.users); + + setRoomSettingsData(data); + }, [roomSettingsData]); + CreateMessageHook(RoomSettingsEvent, onRoomSettingsEvent); + CreateMessageHook(RoomUsersWithRightsEvent, onRoomUsersWithRightsEvent); + CreateMessageHook(RoomBannedUsersEvent, onRoomBannedUsersEvent); const save = useCallback((data: RoomSettingsData) => { @@ -94,7 +129,9 @@ export const NavigatorRoomSettingsView: FC<{}> = props => { currentTab === TABS[0] && } { currentTab === TABS[1] && } - { currentTab === TABS[3] && } + { currentTab === TABS[2] && } + { currentTab === TABS[3] && } + { currentTab === TABS[4] && } ); diff --git a/src/views/navigator/views/room-settings/views/tab-mod/NavigatorRoomSettingsModTabView.tsx b/src/views/navigator/views/room-settings/views/tab-mod/NavigatorRoomSettingsModTabView.tsx new file mode 100644 index 00000000..0a288a0e --- /dev/null +++ b/src/views/navigator/views/room-settings/views/tab-mod/NavigatorRoomSettingsModTabView.tsx @@ -0,0 +1,107 @@ +import { RoomUnbanUserComposer } from '@nitrots/nitro-renderer'; +import { FC, useCallback, useState } from 'react'; +import { LocalizeText } from '../../../../../../api'; +import { SendMessageHook } from '../../../../../../hooks'; +import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types'; + +export const NavigatorRoomSettingsModTabView: FC = props => +{ + const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props; + const [selectedUserId, setSelectedUserId] = useState(-1); + + const handleChange = useCallback((field: string, value: string | number | boolean) => + { + const clone = Object.assign({}, roomSettingsData); + let save = true; + + switch(field) + { + case 'moderation_mute': + clone.muteState = Number(value); + break; + case 'moderation_kick': + clone.kickState = Number(value); + break; + case 'moderation_ban': + clone.banState = Number(value); + break; + } + + setRoomSettingsData(clone); + + if(save) onSave(clone); + }, [roomSettingsData, setRoomSettingsData, onSave]); + + const unBanUser = useCallback((userId: number) => + { + const clone = Object.assign({}, roomSettingsData); + + clone.bannedUsers.delete(userId); + setRoomSettingsData(clone); + + SendMessageHook(new RoomUnbanUserComposer(userId, roomSettingsData.roomId)); + setSelectedUserId(-1); + }, [roomSettingsData, setRoomSettingsData]); + + return ( + <> +
{LocalizeText('navigator.roomsettings.moderation.header')}
+
+
{LocalizeText('navigator.roomsettings.moderation.mute.header')}
+
+ handleChange('moderation_mute', 0)} /> + +
+
+ handleChange('moderation_mute', 1)} /> + +
+
+
+
{LocalizeText('navigator.roomsettings.moderation.kick.header')}
+
+ handleChange('moderation_kick', 0)} /> + +
+
+ handleChange('moderation_kick', 1)} /> + +
+
+ handleChange('moderation_kick', 2)} /> + +
+
+
+
{LocalizeText('navigator.roomsettings.moderation.ban.header')}
+
+ handleChange('moderation_ban', 0)} /> + +
+
+ handleChange('moderation_ban', 1)} /> + +
+
+
{LocalizeText('navigator.roomsettings.moderation.banned.users')} ({roomSettingsData.bannedUsers.size})
+
+
+
+ { + Array.from(roomSettingsData.bannedUsers.entries()).map(([id, name], index) => + { + return
setSelectedUserId(id)} > + {name} +
+ }) + } +
+
+
+ +
+
+ + ); +} diff --git a/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx new file mode 100644 index 00000000..1e681a21 --- /dev/null +++ b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx @@ -0,0 +1,48 @@ +import { FC, useState } from 'react'; +import { LocalizeText } from '../../../../../../api'; +import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types'; + +export const NavigatorRoomSettingsRightsTabView: FC = props => +{ + const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props; + const [selectedUserId, setSelectedUserId] = useState(-1); + + return ( + <> +
+
+
{LocalizeText('navigator.flatctrls.userswithrights', ['displayed', 'total'], [roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString()])}
+
+
+
{LocalizeText('navigator.flatctrls.friends', ['displayed', 'total'], [roomSettingsData.friendsWithoutRights.size.toString(), roomSettingsData.friendsWithoutRights.size.toString()])}
+
+
+
+
+
+ { + Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) => + { + return
setSelectedUserId(id)} > + {name} +
+ }) + } +
+
+
+
+ { + Array.from(roomSettingsData.friendsWithoutRights.entries()).map(([id, name], index) => + { + return
setSelectedUserId(id)} > + {name} +
+ }) + } +
+
+
+ + ); +} diff --git a/src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx b/src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx index e87b788c..60a03539 100644 --- a/src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx +++ b/src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx @@ -8,7 +8,7 @@ export const NavigatorRoomSettingsVipChatTabView: FC { - const clone = Object.assign({}, roomSettingsData); + const clone = Object.assign({}, roomSettingsData); let save = true; switch(field) @@ -39,11 +39,11 @@ export const NavigatorRoomSettingsVipChatTabView: FC @@ -51,58 +51,58 @@ export const NavigatorRoomSettingsVipChatTabView: FC{LocalizeText('navigator.roomsettings.vip.info')}
{LocalizeText('navigator.roomsettings.vip_settings')}
- handleChange('hide_walls', e.target.checked) } /> - + handleChange('hide_walls', e.target.checked)} /> +
- handleChange('wall_thickness', event.target.value)}> + + + +
- handleChange('floor_thickness', event.target.value)}> + + + +
{LocalizeText('navigator.roomsettings.chat_settings')}
{LocalizeText('navigator.roomsettings.chat_settings.info')}
- handleChange('bubble_mode', event.target.value)}> + +
- handleChange('chat_weight', event.target.value)}> + + +
- handleChange('bubble_speed', event.target.value)}> + + +
- handleChange('flood_protection', event.target.value)}> + + +
- - handleChange('chat_distance', event.target.valueAsNumber) } onBlur={ () => onSave(roomSettingsData) } /> -
+ + handleChange('chat_distance', event.target.valueAsNumber)} onBlur={() => onSave(roomSettingsData)} /> + ); }