mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 14:40:50 +01:00
finished chat settings
This commit is contained in:
parent
0aac6f0367
commit
676ecb4a6c
@ -6,6 +6,7 @@ import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, Nitro
|
|||||||
import RoomSettingsData from '../../common/RoomSettingsData';
|
import RoomSettingsData from '../../common/RoomSettingsData';
|
||||||
import { NavigatorRoomSettingsAccessTabView } from './views/tab-access/NavigatorRoomSettingsAccessTabView';
|
import { NavigatorRoomSettingsAccessTabView } from './views/tab-access/NavigatorRoomSettingsAccessTabView';
|
||||||
import { NavigatorRoomSettingsBasicTabView } from './views/tab-basic/NavigatorRoomSettingsBasicTabView';
|
import { NavigatorRoomSettingsBasicTabView } from './views/tab-basic/NavigatorRoomSettingsBasicTabView';
|
||||||
|
import { NavigatorRoomSettingsVipChatTabView } from './views/tab-vipchat/NavigatorRoomSettingsVipChatTabView';
|
||||||
|
|
||||||
const TABS: string[] = [
|
const TABS: string[] = [
|
||||||
'navigator.roomsettings.tab.1',
|
'navigator.roomsettings.tab.1',
|
||||||
@ -37,36 +38,36 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
|
|||||||
|
|
||||||
CreateMessageHook(RoomSettingsEvent, onRoomSettingsEvent);
|
CreateMessageHook(RoomSettingsEvent, onRoomSettingsEvent);
|
||||||
|
|
||||||
const save = useCallback(() =>
|
const save = useCallback((data: RoomSettingsData) =>
|
||||||
{
|
{
|
||||||
SendMessageHook(
|
SendMessageHook(
|
||||||
new SaveRoomSettingsComposer(
|
new SaveRoomSettingsComposer(
|
||||||
roomSettingsData.roomId,
|
data.roomId,
|
||||||
roomSettingsData.roomName,
|
data.roomName,
|
||||||
roomSettingsData.roomDescription,
|
data.roomDescription,
|
||||||
roomSettingsData.lockState,
|
data.lockState,
|
||||||
roomSettingsData.password,
|
data.password,
|
||||||
roomSettingsData.userCount,
|
data.userCount,
|
||||||
roomSettingsData.categoryId,
|
data.categoryId,
|
||||||
roomSettingsData.tags.length,
|
data.tags.length,
|
||||||
roomSettingsData.tags,
|
data.tags,
|
||||||
roomSettingsData.tradeState,
|
data.tradeState,
|
||||||
roomSettingsData.allowPets,
|
data.allowPets,
|
||||||
roomSettingsData.allowPetsEat,
|
data.allowPetsEat,
|
||||||
roomSettingsData.allowWalkthrough,
|
data.allowWalkthrough,
|
||||||
roomSettingsData.hideWalls,
|
data.hideWalls,
|
||||||
roomSettingsData.wallThickness,
|
data.wallThickness,
|
||||||
roomSettingsData.floorThickness,
|
data.floorThickness,
|
||||||
roomSettingsData.muteState,
|
data.muteState,
|
||||||
roomSettingsData.kickState,
|
data.kickState,
|
||||||
roomSettingsData.banState,
|
data.banState,
|
||||||
roomSettingsData.chatBubbleMode,
|
data.chatBubbleMode,
|
||||||
roomSettingsData.chatBubbleWeight,
|
data.chatBubbleWeight,
|
||||||
roomSettingsData.chatBubbleSpeed,
|
data.chatBubbleSpeed,
|
||||||
roomSettingsData.chatDistance,
|
data.chatDistance,
|
||||||
roomSettingsData.chatFloodProtection
|
data.chatFloodProtection
|
||||||
));
|
));
|
||||||
}, [ roomSettingsData ]);
|
}, []);
|
||||||
|
|
||||||
const processAction = useCallback((action: string) =>
|
const processAction = useCallback((action: string) =>
|
||||||
{
|
{
|
||||||
@ -93,6 +94,7 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
|
|||||||
<NitroCardContentView className="text-black px-4">
|
<NitroCardContentView className="text-black px-4">
|
||||||
{ currentTab === TABS[0] && <NavigatorRoomSettingsBasicTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
|
{ currentTab === TABS[0] && <NavigatorRoomSettingsBasicTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
|
||||||
{ currentTab === TABS[1] && <NavigatorRoomSettingsAccessTabView 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>
|
</NitroCardContentView>
|
||||||
</NitroCardView>
|
</NitroCardView>
|
||||||
);
|
);
|
||||||
|
@ -4,5 +4,5 @@ export class NavigatorRoomSettingsTabViewProps
|
|||||||
{
|
{
|
||||||
roomSettingsData: RoomSettingsData;
|
roomSettingsData: RoomSettingsData;
|
||||||
setRoomSettingsData: (roomSettings: RoomSettingsData) => void;
|
setRoomSettingsData: (roomSettings: RoomSettingsData) => void;
|
||||||
onSave: () => void;
|
onSave: (data: RoomSettingsData) => void;
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
import { FC, useCallback } from 'react';
|
import { FC, useCallback } from 'react';
|
||||||
import { LocalizeText } from '../../../../../../api';
|
import { LocalizeText } from '../../../../../../api';
|
||||||
import RoomSettingsData from '../../../../common/RoomSettingsData';
|
|
||||||
import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
|
import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
|
||||||
|
|
||||||
export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
|
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 handleChange = useCallback((field: string, value: string | number | boolean) =>
|
||||||
{
|
{
|
||||||
const roomSettings = ({ ...roomSettingsData } as RoomSettingsData);
|
const roomSettings = Object.assign({}, roomSettingsData);
|
||||||
let save = true;
|
let save = true;
|
||||||
|
|
||||||
switch(field)
|
switch(field)
|
||||||
@ -37,7 +36,7 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
|
|||||||
|
|
||||||
setRoomSettingsData(roomSettings);
|
setRoomSettingsData(roomSettings);
|
||||||
|
|
||||||
if(save) onSave();
|
if(save) onSave(roomSettings);
|
||||||
}, [ roomSettingsData, setRoomSettingsData, onSave ]);
|
}, [ roomSettingsData, setRoomSettingsData, onSave ]);
|
||||||
|
|
||||||
const isPasswordValid = useCallback(() =>
|
const isPasswordValid = useCallback(() =>
|
||||||
@ -47,8 +46,8 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
|
|||||||
|
|
||||||
const trySave = useCallback(() =>
|
const trySave = useCallback(() =>
|
||||||
{
|
{
|
||||||
if(isPasswordValid()) onSave();
|
if(isPasswordValid()) onSave(roomSettingsData);
|
||||||
}, [ isPasswordValid, onSave ]);
|
}, [isPasswordValid, onSave, roomSettingsData]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -43,18 +43,18 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
|
|||||||
|
|
||||||
setRoomSettingsData(roomSettings);
|
setRoomSettingsData(roomSettings);
|
||||||
|
|
||||||
if(save) onSave();
|
if(save) onSave(roomSettings);
|
||||||
}, [ roomSettingsData, setRoomSettingsData, onSave ]);
|
}, [ roomSettingsData, setRoomSettingsData, onSave ]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="form-group mb-1">
|
<div className="form-group mb-1">
|
||||||
<label>{ LocalizeText('navigator.roomname') }</label>
|
<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>
|
||||||
<div className="form-group mb-1">
|
<div className="form-group mb-1">
|
||||||
<label>{ LocalizeText('navigator.roomsettings.desc') }</label>
|
<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>
|
||||||
<div className="form-group mb-1">
|
<div className="form-group mb-1">
|
||||||
<label>{ LocalizeText('navigator.category') }</label>
|
<label>{ LocalizeText('navigator.category') }</label>
|
||||||
|
@ -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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user