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

finished chat settings

Browse Source
This commit is contained in:
dank074 2021-08-17 19:10:31 -05:00
parent 0aac6f0367
commit 676ecb4a6c
5 changed files with 144 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,7 @@ 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 { NavigatorRoomSettingsVipChatTabView } from './views/tab-vipchat/NavigatorRoomSettingsVipChatTabView';
const TABS: string[] = [
'navigator.roomsettings.tab.1',
@ -37,36 +38,36 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
CreateMessageHook(RoomSettingsEvent, onRoomSettingsEvent);
const save = useCallback(() =>
const save = useCallback((data: RoomSettingsData) =>
{
SendMessageHook(
new SaveRoomSettingsComposer(
roomSettingsData.roomId,
roomSettingsData.roomName,
roomSettingsData.roomDescription,
roomSettingsData.lockState,
roomSettingsData.password,
roomSettingsData.userCount,
roomSettingsData.categoryId,
roomSettingsData.tags.length,
roomSettingsData.tags,
roomSettingsData.tradeState,
roomSettingsData.allowPets,
roomSettingsData.allowPetsEat,
roomSettingsData.allowWalkthrough,
roomSettingsData.hideWalls,
roomSettingsData.wallThickness,
roomSettingsData.floorThickness,
roomSettingsData.muteState,
roomSettingsData.kickState,
roomSettingsData.banState,
roomSettingsData.chatBubbleMode,
roomSettingsData.chatBubbleWeight,
roomSettingsData.chatBubbleSpeed,
roomSettingsData.chatDistance,
roomSettingsData.chatFloodProtection
data.roomId,
data.roomName,
data.roomDescription,
data.lockState,
data.password,
data.userCount,
data.categoryId,
data.tags.length,
data.tags,
data.tradeState,
data.allowPets,
data.allowPetsEat,
data.allowWalkthrough,
data.hideWalls,
data.wallThickness,
data.floorThickness,
data.muteState,
data.kickState,
data.banState,
data.chatBubbleMode,
data.chatBubbleWeight,
data.chatBubbleSpeed,
data.chatDistance,
data.chatFloodProtection
));
}, [ roomSettingsData ]);
}, []);
const processAction = useCallback((action: string) =>
{
@ -93,6 +94,7 @@ 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 }/> }
</NitroCardContentView>
</NitroCardView>
);

2
src/views/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts
View File

@ -4,5 +4,5 @@ export class NavigatorRoomSettingsTabViewProps
{
roomSettingsData: RoomSettingsData;
setRoomSettingsData: (roomSettings: RoomSettingsData) => void;
onSave: () => void;
onSave: (data: RoomSettingsData) => void;
}

9
src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx
View File

@ -1,6 +1,5 @@
import { FC, useCallback } from 'react';
import { LocalizeText } from '../../../../../../api';
import RoomSettingsData from '../../../../common/RoomSettingsData';
import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
@ -9,7 +8,7 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
const handleChange = useCallback((field: string, value: string | number | boolean) =>
{
const roomSettings = ({ ...roomSettingsData } as RoomSettingsData);
const roomSettings = Object.assign({}, roomSettingsData);
let save = true;
switch(field)
@ -37,7 +36,7 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
setRoomSettingsData(roomSettings);
if(save) onSave();
if(save) onSave(roomSettings);
}, [ roomSettingsData, setRoomSettingsData, onSave ]);
const isPasswordValid = useCallback(() =>
@ -47,8 +46,8 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
const trySave = useCallback(() =>
{
if(isPasswordValid()) onSave();
}, [ isPasswordValid, onSave ]);
if(isPasswordValid()) onSave(roomSettingsData);
}, [isPasswordValid, onSave, roomSettingsData]);
return (
<>

6
src/views/navigator/views/room-settings/views/tab-basic/NavigatorRoomSettingsBasicTabView.tsx
View File

@ -43,18 +43,18 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
setRoomSettingsData(roomSettings);
if(save) onSave();
if(save) onSave(roomSettings);
}, [ roomSettingsData, setRoomSettingsData, onSave ]);
return (
<>
<div className="form-group mb-1">
<label>{ LocalizeText('navigator.roomname') }</label>
<input className="form-control form-control-sm" value={ roomSettingsData.roomName } onChange={ event => handleChange('name', event.target.value) } onBlur={ onSave } />
<input className="form-control form-control-sm" value={ roomSettingsData.roomName } onChange={ event => handleChange('name', event.target.value) } onBlur={ () => onSave(roomSettingsData) } />
</div>
<div className="form-group mb-1">
<label>{ LocalizeText('navigator.roomsettings.desc') }</label>
<input className="form-control form-control-sm" value={ roomSettingsData.roomDescription } onChange={ event => handleChange('description', event.target.value) } onBlur={ onSave } />
<input className="form-control form-control-sm" value={ roomSettingsData.roomDescription } onChange={ event => handleChange('description', event.target.value) } onBlur={ () => onSave(roomSettingsData) } />
</div>
<div className="form-group mb-1">
<label>{ LocalizeText('navigator.category') }</label>

108
src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx Normal file
View File

@ -0,0 +1,108 @@
import { FC, useCallback } from 'react';
import { LocalizeText } from '../../../../../../api';
import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
{
const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props;
const handleChange = useCallback((field: string, value: string | number | boolean) =>
{
const clone = Object.assign({}, roomSettingsData);
let save = true;
switch(field)
{
case 'hide_walls':
clone.hideWalls = Boolean(value);
break;
case 'wall_thickness':
clone.wallThickness = Number(value);
break;
case 'floor_thickness':
clone.floorThickness = Number(value);
break;
case 'bubble_mode':
clone.chatBubbleMode = Number(value);
break;
case 'chat_weight':
clone.chatBubbleWeight = Number(value);
break;
case 'bubble_speed':
clone.chatBubbleSpeed = Number(value);
break;
case 'flood_protection':
clone.chatFloodProtection = Number(value);
break;
case 'chat_distance':
clone.chatDistance = Number(value);
save = false;
break;
}
setRoomSettingsData(clone);
if(save) onSave(clone);
}, [ roomSettingsData, setRoomSettingsData, onSave ]);
return (
<>
<div className="fw-bold">{LocalizeText('navigator.roomsettings.vip.caption')}</div>
<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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</>
);
}