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

added other settings views

Browse Source
This commit is contained in:
dank074 2021-08-17 23:24:21 -05:00
parent 676ecb4a6c
commit bbd892be39
5 changed files with 241 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss
View File

@ -4,4 +4,16 @@
.content-area {
height: 350px;
}
.list-container {
max-height: 150px;
overflow-y: scroll;
.list-item {
&.selected {
background-color: cadetblue;
}
}
}
}

41
src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
View File

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

107
src/views/navigator/views/room-settings/views/tab-mod/NavigatorRoomSettingsModTabView.tsx Normal file
View File

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

48
src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx Normal file
View File

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