mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 14:40:50 +01:00
added other settings views
This commit is contained in:
dank074
parent
676ecb4a6c
commit
bbd892be39
@ -4,4 +4,16 @@
|
||||
.content-area {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
max-height: 150px;
|
||||
overflow-y: scroll;
|
||||
|
||||
.list-item {
|
||||
&.selected {
|
||||
background-color: cadetblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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 >
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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)
|
||||
@ -43,7 +43,7 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
|
||||
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) } />
|
||||
<label className="form-check-label">{ LocalizeText('navigator.roomsettings.hide_walls') }</label>
|
||||
<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>
|
||||
</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) }>
|
||||
<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.thin') }</option>
|
||||
<option value="-2">{ LocalizeText('navigator.roomsettings.wall_thickness.thinnest') }</option>
|
||||
<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="1">{LocalizeText('navigator.roomsettings.wall_thickness.thick')}</option>
|
||||
<option value="-1">{LocalizeText('navigator.roomsettings.wall_thickness.thin')}</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) }>
|
||||
<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.thin') }</option>
|
||||
<option value="-2">{ LocalizeText('navigator.roomsettings.floor_thickness.thinnest') }</option>
|
||||
<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="1">{LocalizeText('navigator.roomsettings.floor_thickness.thick')}</option>
|
||||
<option value="-1">{LocalizeText('navigator.roomsettings.floor_thickness.thin')}</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) }>
|
||||
<option value="0">{ LocalizeText('navigator.roomsettings.chat.mode.free.flow') }</option>
|
||||
<option value="1">{ LocalizeText('navigator.roomsettings.chat.mode.line.by.line') }</option>
|
||||
<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="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) }>
|
||||
<option value="0">{ LocalizeText('navigator.roomsettings.chat.bubbles.width.normal') }</option>
|
||||
<option value="1">{ LocalizeText('navigator.roomsettings.chat.bubbles.width.thin') }</option>
|
||||
<option value="2">{ LocalizeText('navigator.roomsettings.chat.bubbles.width.wide') }</option>
|
||||
<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="1">{LocalizeText('navigator.roomsettings.chat.bubbles.width.thin')}</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) }>
|
||||
<option value="0">{ LocalizeText('navigator.roomsettings.chat.speed.fast') }</option>
|
||||
<option value="1">{ LocalizeText('navigator.roomsettings.chat.speed.normal') }</option>
|
||||
<option value="2">{ LocalizeText('navigator.roomsettings.chat.speed.slow') }</option>
|
||||
<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="1">{LocalizeText('navigator.roomsettings.chat.speed.normal')}</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) }>
|
||||
<option value="0">{ LocalizeText('navigator.roomsettings.chat.flood.loose') }</option>
|
||||
<option value="1">{ LocalizeText('navigator.roomsettings.chat.flood.normal') }</option>
|
||||
<option value="2">{ LocalizeText('navigator.roomsettings.chat.flood.strict') }</option>
|
||||
<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="1">{LocalizeText('navigator.roomsettings.chat.flood.normal')}</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>
|
||||
<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>
|
||||
<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)} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user