added other settings views

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

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 =>
             <NitroCardContentView className="text-black px-4">
                 { currentTab === TABS[0] && <NavigatorRoomSettingsBasicTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
                 { currentTab === TABS[1] && <NavigatorRoomSettingsAccessTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
-                { currentTab === TABS[3] && <NavigatorRoomSettingsVipChatTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save }/> }
+                { currentTab === TABS[2] && <NavigatorRoomSettingsRightsTabView roomSettingsData= {roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
+                { currentTab === TABS[3] && <NavigatorRoomSettingsVipChatTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
+                { currentTab === TABS[4] && <NavigatorRoomSettingsModTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
             </NitroCardContentView>
         </NitroCardView>
     );

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<NavigatorRoomSettingsTabViewProps> = props =>
+{
+    const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props;
+    const [selectedUserId, setSelectedUserId] = useState<number>(-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 (
+        <>
+            <div className="mb-3">{LocalizeText('navigator.roomsettings.moderation.header')}</div>
+            <div className="form-group mb-1" >
+                <div className="fw-bold">{LocalizeText('navigator.roomsettings.moderation.mute.header')}</div>
+                <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="moderation_mute" checked={roomSettingsData.muteState === 0} onChange={(e) => handleChange('moderation_mute', 0)} />
+                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.none')}</label>
+                </div>
+                <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="moderation_mute" checked={roomSettingsData.muteState === 1} onChange={(e) => handleChange('moderation_mute', 1)} />
+                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.rights')}</label>
+                </div>
+            </div>
+            <div className="form-group mb-1" >
+                <div className="fw-bold">{LocalizeText('navigator.roomsettings.moderation.kick.header')}</div>
+                <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="moderation_kick" checked={roomSettingsData.kickState === 0} onChange={(e) => handleChange('moderation_kick', 0)} />
+                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.all')}</label>
+                </div>
+                <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="moderation_kick" checked={roomSettingsData.kickState === 1} onChange={(e) => handleChange('moderation_kick', 1)} />
+                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.rights')}</label>
+                </div>
+                <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="moderation_kick" checked={roomSettingsData.kickState === 2} onChange={(e) => handleChange('moderation_kick', 2)} />
+                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.none')}</label>
+                </div>
+            </div>
+            <div className="form-group mb-1" >
+                <div className="fw-bold">{LocalizeText('navigator.roomsettings.moderation.ban.header')}</div>
+                <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="moderation_ban" checked={roomSettingsData.banState === 0} onChange={(e) => handleChange('moderation_ban', 0)} />
+                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.none')}</label>
+                </div>
+                <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="moderation_ban" checked={roomSettingsData.banState === 1} onChange={(e) => handleChange('moderation_ban', 1)} />
+                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.rights')}</label>
+                </div>
+            </div>
+            <div className="fw-bold mt-3 mb-1">{LocalizeText('navigator.roomsettings.moderation.banned.users')} ({roomSettingsData.bannedUsers.size})</div>
+            <div className="row">
+                <div className="col-6">
+                    <div className="list-container">
+                        {
+                            Array.from(roomSettingsData.bannedUsers.entries()).map(([id, name], index) =>
+                            {
+                                return <div key={index} className={'list-item' + ((id === selectedUserId) ? ' selected' : '')} onClick={e => setSelectedUserId(id)} >
+                                    {name}
+                                </div>
+                            })
+                        }
+                    </div>
+                </div>
+                <div className="col-6">
+                    <button className={'btn btn-primary btn-sm w-100' + ((selectedUserId < 1) ? ' disabled' : '')} onClick={ e => unBanUser(selectedUserId) }>{LocalizeText('navigator.roomsettings.moderation.unban')} {selectedUserId > 0 && roomSettingsData.bannedUsers.get(selectedUserId)}
+                    </button>
+                </div>
+            </div>
+        </>
+    );
+}

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<NavigatorRoomSettingsTabViewProps> = props =>
+{
+    const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props;
+    const [selectedUserId, setSelectedUserId] = useState<number>(-1);
+
+    return (
+        <>
+            <div className="row">
+                <div className="col-6">
+                    <div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.userswithrights', ['displayed', 'total'], [roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString()])}</div>
+                </div>
+                <div className="col-6">
+                    <div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.friends', ['displayed', 'total'], [roomSettingsData.friendsWithoutRights.size.toString(), roomSettingsData.friendsWithoutRights.size.toString()])}</div>
+                </div>
+            </div>
+            <div className="row">
+                <div className="col-6">
+                    <div className="list-container">
+                        {
+                            Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) =>
+                            {
+                                return <div key={index} className={'list-item' + ((id === selectedUserId) ? ' selected' : '')} onClick={e => setSelectedUserId(id)} >
+                                    {name}
+                                </div>
+                            })
+                        }
+                    </div>
+                </div>
+                <div className="col-6">
+                    <div className="list-container">
+                        {
+                            Array.from(roomSettingsData.friendsWithoutRights.entries()).map(([id, name], index) =>
+                            {
+                                return <div key={index} className={'list-item' + ((id === selectedUserId) ? ' selected' : '')} onClick={e => setSelectedUserId(id)} >
+                                    {name}
+                                </div>
+                            })
+                        }
+                    </div>
+                </div >
+            </div >
+        </>
+    );
+}

src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx

@@ -8,7 +8,7 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
 
     const handleChange = useCallback((field: string, value: string | number | boolean) =>
     {
-        const clone =  Object.assign({}, roomSettingsData);
+        const clone = Object.assign({}, roomSettingsData);
         let save = true;
 
         switch(field)
@@ -39,11 +39,11 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
                 save = false;
                 break;
         }
-        
+
         setRoomSettingsData(clone);
 
         if(save) onSave(clone);
-    }, [ roomSettingsData, setRoomSettingsData, onSave ]);
+    }, [roomSettingsData, setRoomSettingsData, onSave]);
 
     return (
         <>
@@ -51,58 +51,58 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
             <div className="mb-3">{LocalizeText('navigator.roomsettings.vip.info')}</div>
             <div className="fw-bold">{LocalizeText('navigator.roomsettings.vip_settings')}</div>
             <div className="form-check">
-                <input className="form-check-input" type="checkbox" checked={ roomSettingsData.hideWalls } onChange={ (e) => handleChange('hide_walls', e.target.checked) } />
+                <input className="form-check-input" type="checkbox" checked={roomSettingsData.hideWalls} onChange={(e) => handleChange('hide_walls', e.target.checked)} />
-                <label className="form-check-label">{ LocalizeText('navigator.roomsettings.hide_walls') }</label>
+                <label className="form-check-label">{LocalizeText('navigator.roomsettings.hide_walls')}</label>
             </div>
             <div className="form-group mb-1">
-                <select className="form-select form-select-sm" value={ roomSettingsData.wallThickness } onChange={ event => handleChange('wall_thickness', event.target.value) }>
+                <select className="form-select form-select-sm" value={roomSettingsData.wallThickness} onChange={event => handleChange('wall_thickness', event.target.value)}>
-                    <option value="0">{ LocalizeText('navigator.roomsettings.wall_thickness.normal') }</option>
+                    <option value="0">{LocalizeText('navigator.roomsettings.wall_thickness.normal')}</option>
-                    <option value="1">{ LocalizeText('navigator.roomsettings.wall_thickness.thick') }</option>
+                    <option value="1">{LocalizeText('navigator.roomsettings.wall_thickness.thick')}</option>
-                    <option value="-1">{ LocalizeText('navigator.roomsettings.wall_thickness.thin') }</option>
+                    <option value="-1">{LocalizeText('navigator.roomsettings.wall_thickness.thin')}</option>
-                    <option value="-2">{ LocalizeText('navigator.roomsettings.wall_thickness.thinnest') }</option>
+                    <option value="-2">{LocalizeText('navigator.roomsettings.wall_thickness.thinnest')}</option>
                 </select>
             </div>
             <div className="form-group mb-1">
-                <select className="form-select form-select-sm" value={ roomSettingsData.floorThickness } onChange={ event => handleChange('floor_thickness', event.target.value) }>
+                <select className="form-select form-select-sm" value={roomSettingsData.floorThickness} onChange={event => handleChange('floor_thickness', event.target.value)}>
-                    <option value="0">{ LocalizeText('navigator.roomsettings.floor_thickness.normal') }</option>
+                    <option value="0">{LocalizeText('navigator.roomsettings.floor_thickness.normal')}</option>
-                    <option value="1">{ LocalizeText('navigator.roomsettings.floor_thickness.thick') }</option>
+                    <option value="1">{LocalizeText('navigator.roomsettings.floor_thickness.thick')}</option>
-                    <option value="-1">{ LocalizeText('navigator.roomsettings.floor_thickness.thin') }</option>
+                    <option value="-1">{LocalizeText('navigator.roomsettings.floor_thickness.thin')}</option>
-                    <option value="-2">{ LocalizeText('navigator.roomsettings.floor_thickness.thinnest') }</option>
+                    <option value="-2">{LocalizeText('navigator.roomsettings.floor_thickness.thinnest')}</option>
                 </select>
             </div>
             <div className="fw-bold">{LocalizeText('navigator.roomsettings.chat_settings')}</div>
             <div className="mb-2">{LocalizeText('navigator.roomsettings.chat_settings.info')}</div>
             <div className="form-group mb-1">
-                <select className="form-select form-select-sm" value={ roomSettingsData.chatBubbleMode } onChange={ event => handleChange('bubble_mode', event.target.value) }>
+                <select className="form-select form-select-sm" value={roomSettingsData.chatBubbleMode} onChange={event => handleChange('bubble_mode', event.target.value)}>
-                    <option value="0">{ LocalizeText('navigator.roomsettings.chat.mode.free.flow') }</option>
+                    <option value="0">{LocalizeText('navigator.roomsettings.chat.mode.free.flow')}</option>
-                    <option value="1">{ LocalizeText('navigator.roomsettings.chat.mode.line.by.line') }</option>
+                    <option value="1">{LocalizeText('navigator.roomsettings.chat.mode.line.by.line')}</option>
                 </select>
             </div>
             <div className="form-group mb-1">
-                <select className="form-select form-select-sm" value={ roomSettingsData.chatBubbleWeight } onChange={ event => handleChange('chat_weight', event.target.value) }>
+                <select className="form-select form-select-sm" value={roomSettingsData.chatBubbleWeight} onChange={event => handleChange('chat_weight', event.target.value)}>
-                    <option value="0">{ LocalizeText('navigator.roomsettings.chat.bubbles.width.normal') }</option>
+                    <option value="0">{LocalizeText('navigator.roomsettings.chat.bubbles.width.normal')}</option>
-                    <option value="1">{ LocalizeText('navigator.roomsettings.chat.bubbles.width.thin') }</option>
+                    <option value="1">{LocalizeText('navigator.roomsettings.chat.bubbles.width.thin')}</option>
-                    <option value="2">{ LocalizeText('navigator.roomsettings.chat.bubbles.width.wide') }</option>
+                    <option value="2">{LocalizeText('navigator.roomsettings.chat.bubbles.width.wide')}</option>
                 </select>
             </div>
             <div className="form-group mb-1">
-                <select className="form-select form-select-sm" value={ roomSettingsData.chatBubbleSpeed } onChange={ event => handleChange('bubble_speed', event.target.value) }>
+                <select className="form-select form-select-sm" value={roomSettingsData.chatBubbleSpeed} onChange={event => handleChange('bubble_speed', event.target.value)}>
-                    <option value="0">{ LocalizeText('navigator.roomsettings.chat.speed.fast') }</option>
+                    <option value="0">{LocalizeText('navigator.roomsettings.chat.speed.fast')}</option>
-                    <option value="1">{ LocalizeText('navigator.roomsettings.chat.speed.normal') }</option>
+                    <option value="1">{LocalizeText('navigator.roomsettings.chat.speed.normal')}</option>
-                    <option value="2">{ LocalizeText('navigator.roomsettings.chat.speed.slow') }</option>
+                    <option value="2">{LocalizeText('navigator.roomsettings.chat.speed.slow')}</option>
                 </select>
             </div>
             <div className="form-group mb-1">
-                <select className="form-select form-select-sm" value={ roomSettingsData.chatFloodProtection } onChange={ event => handleChange('flood_protection', event.target.value) }>
+                <select className="form-select form-select-sm" value={roomSettingsData.chatFloodProtection} onChange={event => handleChange('flood_protection', event.target.value)}>
-                    <option value="0">{ LocalizeText('navigator.roomsettings.chat.flood.loose') }</option>
+                    <option value="0">{LocalizeText('navigator.roomsettings.chat.flood.loose')}</option>
-                    <option value="1">{ LocalizeText('navigator.roomsettings.chat.flood.normal') }</option>
+                    <option value="1">{LocalizeText('navigator.roomsettings.chat.flood.normal')}</option>
-                    <option value="2">{ LocalizeText('navigator.roomsettings.chat.flood.strict') }</option>
+                    <option value="2">{LocalizeText('navigator.roomsettings.chat.flood.strict')}</option>
                 </select>
             </div>
             <div className="form-group mb-0">
-    <label>{ LocalizeText('navigator.roomsettings.chat_settings.hearing.distance') }</label>
+                <label>{LocalizeText('navigator.roomsettings.chat_settings.hearing.distance')}</label>
-    <input type="number" min="0" className="form-control form-control-sm" value={ roomSettingsData.chatDistance } onChange={ event => handleChange('chat_distance', event.target.valueAsNumber) } onBlur={ () => onSave(roomSettingsData) } />
+                <input type="number" min="0" className="form-control form-control-sm" value={roomSettingsData.chatDistance} onChange={event => handleChange('chat_distance', event.target.valueAsNumber)} onBlur={() => onSave(roomSettingsData)} />
-</div>
+            </div>
         </>
     );
 }