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

RoomSettings

Browse Source
This commit is contained in:
MyNameIsBatman 2021-07-05 00:44:15 -03:00
parent 5eeeb2bed8
commit 4afad291a8
14 changed files with 488 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/events/navigator/NavigatorEvent.ts
View File

@ -7,6 +7,7 @@ export class NavigatorEvent extends NitroEvent
public static TOGGLE_NAVIGATOR: string = 'NE_TOGGLE_NAVIGATOR';
public static TOGGLE_ROOM_INFO: string = 'NE_TOGGLE_ROOM_INFO';
public static TOGGLE_ROOM_LINK: string = 'NE_TOGGLE_ROOM_LINK';
public static TOGGLE_ROOM_SETTINGS: string = 'NE_TOGGLE_ROOM_SETTINGS';
private _roomId: number;
private _password: string;

8
src/events/room-widgets/thumbnail/RoomWidgetThumbnailEvent.ts Normal file
View File

@ -0,0 +1,8 @@
import { RoomWidgetUpdateEvent } from '../../../views/room/events/RoomWidgetUpdateEvent';
export class RoomWidgetThumbnailEvent extends RoomWidgetUpdateEvent
{
public static SHOW_THUMBNAIL: string = 'NE_SHOW_THUMBNAIL';
public static HIDE_THUMBNAIL: string = 'NE_HIDE_THUMBNAIL';
public static TOGGLE_THUMBNAIL: string = 'NE_TOGGLE_THUMBNAIL';
}

1
src/events/room-widgets/thumbnail/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './RoomWidgetThumbnailEvent';

10
src/views/navigator/NavigatorMessageHandler.tsx
View File

@ -1,4 +1,4 @@
import { GenericErrorEvent, NavigatorCategoriesComposer, NavigatorCategoriesEvent, NavigatorHomeRoomEvent, NavigatorMetadataEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomCreatedEvent, RoomDataParser, RoomDoorbellAcceptedEvent, RoomDoorbellEvent, RoomForwardEvent, RoomInfoComposer, RoomInfoEvent, RoomInfoOwnerEvent, UserInfoEvent } from 'nitro-renderer';
import { GenericErrorEvent, NavigatorCategoriesComposer, NavigatorCategoriesEvent, NavigatorHomeRoomEvent, NavigatorMetadataEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomCreatedEvent, RoomDataParser, RoomDoorbellAcceptedEvent, RoomDoorbellEvent, RoomForwardEvent, RoomInfoComposer, RoomInfoEvent, RoomInfoOwnerEvent, RoomSettingsUpdatedEvent, UserInfoEvent } from 'nitro-renderer';
import { FC, useCallback } from 'react';
import { GetRoomSessionManager, GetSessionDataManager } from '../../api';
import { VisitRoom } from '../../api/navigator/VisitRoom';
@ -174,6 +174,13 @@ export const NavigatorMessageHandler: FC<NavigatorMessageHandlerProps> = props =
});
}, [ dispatchNavigatorState ]);
const onRoomSettingsUpdatedEvent = useCallback((event: RoomSettingsUpdatedEvent) =>
{
const parser = event.getParser();
SendMessageHook(new RoomInfoComposer(parser.roomId, false, false));
}, []);
CreateMessageHook(UserInfoEvent, onUserInfoEvent);
CreateMessageHook(RoomForwardEvent, onRoomForwardEvent);
CreateMessageHook(RoomInfoOwnerEvent, onRoomInfoOwnerEvent);
@ -186,6 +193,7 @@ export const NavigatorMessageHandler: FC<NavigatorMessageHandlerProps> = props =
CreateMessageHook(NavigatorCategoriesEvent, onNavigatorCategoriesEvent);
CreateMessageHook(RoomCreatedEvent, onRoomCreatedEvent);
CreateMessageHook(NavigatorHomeRoomEvent, onNavigatorHomeRoomEvent);
CreateMessageHook(RoomSettingsUpdatedEvent, onRoomSettingsUpdatedEvent);
return null;
}

2
src/views/navigator/NavigatorView.tsx
View File

@ -13,6 +13,7 @@ import { initialNavigator, NavigatorActions, NavigatorReducer } from './reducers
import { NavigatorRoomCreatorView } from './views/creator/NavigatorRoomCreatorView';
import { NavigatorRoomInfoView } from './views/room-info/NavigatorRoomInfoView';
import { NavigatorRoomLinkView } from './views/room-link/NavigatorRoomLinkView';
import { NavigatorRoomSettingsView } from './views/room-settings/NavigatorRoomSettingsView';
import { NavigatorSearchResultSetView } from './views/search-result-set/NavigatorSearchResultSetView';
import { NavigatorSearchView } from './views/search/NavigatorSearchView';
@ -124,6 +125,7 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
</NitroCardView> }
{ isRoomInfoOpen && <NavigatorRoomInfoView onCloseClick={ () => setRoomInfoOpen(false) } /> }
{ isRoomLinkOpen && <NavigatorRoomLinkView onCloseClick={ () => setRoomLinkOpen(false) } /> }
<NavigatorRoomSettingsView />
</NavigatorContextProvider>
);
}

95
src/views/navigator/common/RoomSettingsData.ts Normal file
View File

@ -0,0 +1,95 @@
export default class RoomSettingsData
{
public roomId: number;
public roomName: string;
public roomOriginalName: string;
public roomDescription: string;
public categoryId: number;
public userCount: number;
public tags: string[];
public tradeState: number;
public allowWalkthrough: boolean;
public lockState: number;
public originalLockState: number;
public password: string;
public confirmPassword: string;
public allowPets: boolean;
public allowPetsEat: boolean;
public usersWithRights: Map<number, string>;
public friendsWithoutRights: Map<number, string>;
public hideWalls: boolean;
public wallThickness: number;
public floorThickness: number;
public chatBubbleMode: number;
public chatBubbleWeight: number;
public chatBubbleSpeed: number;
public chatFloodProtection: number;
public chatDistance: number;
public muteState: number;
public kickState: number;
public banState: number;
public bannedUsers: Map<number, string>;
public selectedUserToUnban: number;
constructor()
{
this.roomId = 0;
this.roomName = null;
this.roomOriginalName = null;
this.roomDescription = null;
this.categoryId = 0;
this.userCount = 0;
this.tags = [];
this.tradeState = 0;
this.allowWalkthrough = false;
this.lockState = 0;
this.originalLockState = 0;
this.password = null;
this.confirmPassword = null;
this.allowPets = false;
this.allowPetsEat = false;
this.usersWithRights = new Map<number, string>();
this.friendsWithoutRights = new Map<number, string>();
this.hideWalls = false;
this.wallThickness = 0;
this.floorThickness = 0;
this.chatBubbleMode = 0;
this.chatBubbleWeight = 0;
this.chatBubbleSpeed = 0;
this.chatFloodProtection = 0;
this.chatDistance = 0;
this.muteState = 0;
this.kickState = 0;
this.banState = 0;
this.bannedUsers = new Map<number, string>();
this.selectedUserToUnban = 0;
}
public selectUserToUnban(userId: number): void
{
if(this.selectedUserToUnban === userId)
{
this.selectedUserToUnban = 0;
}
else
{
this.selectedUserToUnban = userId;
}
}
public get selectedUsernameToUnban(): string
{
if(this.selectedUserToUnban > 0)
return this.bannedUsers.get(this.selectedUserToUnban);
return null;
}
}

1
src/views/navigator/views/NavigatorViews.scss
View File

@ -4,3 +4,4 @@
@import './search-result-item/NavigatorSearchResultItemView';
@import './room-info/NavigatorRoomInfoView';
@import './room-link/NavigatorRoomLinkView';
@import './room-settings/NavigatorRoomSettingsView';

11
src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx
View File

@ -1,8 +1,9 @@
import classNames from 'classnames';
import { RoomMuteComposer, RoomStaffPickComposer, UserHomeRoomComposer } from 'nitro-renderer';
import { RoomMuteComposer, RoomSettingsComposer, RoomStaffPickComposer, UserHomeRoomComposer } from 'nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { GetConfiguration } from '../../../../api';
import { NavigatorEvent } from '../../../../events';
import { RoomWidgetThumbnailEvent } from '../../../../events/room-widgets/thumbnail';
import { dispatchUiEvent } from '../../../../hooks/events';
import { SendMessageHook } from '../../../../hooks/messages';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
@ -61,12 +62,16 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
case 'navigator_search_tag':
return;
case 'open_room_thumbnail_camera':
dispatchUiEvent(new RoomWidgetThumbnailEvent(RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL));
return;
case 'open_group_info':
return;
case 'toggle_room_link':
dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK));
return;
case 'open_room_settings':
SendMessageHook(new RoomSettingsComposer(roomInfoData.enteredGuestRoom.roomId));
return;
case 'toggle_pick':
setIsRoomPicked(value => !value);
SendMessageHook(new RoomStaffPickComposer(roomInfoData.enteredGuestRoom.roomId));
@ -115,7 +120,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
</div>
<div>{ roomInfoData.enteredGuestRoom.description }</div>
<div className="room-thumbnail border mt-1 mb-2">
<i className="icon icon-camera-small position-absolute b-0 r-0 m-1 cursor-pointer" />
<i className="icon icon-camera-small position-absolute b-0 r-0 m-1 cursor-pointer" onClick={ () => processAction('open_room_thumbnail_camera') } />
{ roomThumbnail && <img alt="" src={ roomThumbnail } /> }
</div>
{ roomInfoData.enteredGuestRoom.habboGroupId > 0 && <div className="d-flex align-items-center mb-2 cursor-pointer" onClick={ () => processAction('open_group_info') }>
@ -130,7 +135,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
<i className="icon icon-arrows me-1" />
<span>{ LocalizeText('navigator.embed.caption') }</span>
</div>
<button className="btn btn-sm btn-primary w-100 mb-1" disabled={ true }>{ LocalizeText('navigator.room.popup.info.room.settings') }</button>
<button className="btn btn-sm btn-primary w-100 mb-1" onClick={ () => processAction('open_room_settings') }>{ LocalizeText('navigator.room.popup.info.room.settings') }</button>
<button className="btn btn-sm btn-primary w-100 mb-1" disabled={ true }>{ LocalizeText('open.floor.plan.editor') }</button>
<button className="btn btn-sm btn-primary w-100 mb-1" onClick={ () => processAction('toggle_pick') }>{ LocalizeText(isRoomPicked ? 'navigator.staffpicks.unpick' : 'navigator.staffpicks.pick') }</button>
<button className="btn btn-sm btn-danger w-100 mb-1" disabled={ true }>{ LocalizeText('help.emergency.main.report.room') }</button>

3
src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss Normal file
View File

@ -0,0 +1,3 @@
.nitro-room-settings {
width: 400px;
}

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

@ -1,6 +1,127 @@
import { FC } from 'react';
import { RoomSettingsEvent, SaveRoomSettingsComposer } from 'nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
import { LocalizeText } from '../../../../utils/LocalizeText';
import RoomSettingsData from '../../common/RoomSettingsData';
import { NavigatorRoomSettingsAccessTabView } from './views/tab-access/NavigatorRoomSettingsAccessTabView';
import { NavigatorRoomSettingsBasicTabView } from './views/tab-basic/NavigatorRoomSettingsBasicTabView';
const TABS: string[] = [
'navigator.roomsettings.tab.1',
'navigator.roomsettings.tab.2',
'navigator.roomsettings.tab.3',
'navigator.roomsettings.tab.4',
'navigator.roomsettings.tab.5'
];
export const NavigatorRoomSettingsView: FC<{}> = props =>
{
return null;
const [ roomSettingsData, setRoomSettingsData ] = useState<RoomSettingsData>(null);
const [ currentTab, setCurrentTab ] = useState(TABS[0]);
const updateSettings = useCallback((roomSettings: RoomSettingsData) =>
{
console.log('update', roomSettings);
setRoomSettingsData(roomSettings);
}, [ setRoomSettingsData ]);
const onRoomSettingsEvent = useCallback((event: RoomSettingsEvent) =>
{
const parser = event.getParser();
const roomSettingsData = new RoomSettingsData();
roomSettingsData.roomId = parser.roomId;
roomSettingsData.roomName = parser.name;
roomSettingsData.roomOriginalName = parser.name;
roomSettingsData.roomDescription = parser.description;
roomSettingsData.categoryId = parser.categoryId;
roomSettingsData.userCount = parser.userCount;
roomSettingsData.tradeState = parser.tradeMode;
roomSettingsData.allowWalkthrough = parser.allowWalkthrough;
roomSettingsData.lockState = parser.state;
roomSettingsData.originalLockState = parser.state;
roomSettingsData.allowPets = parser.allowPets;
roomSettingsData.hideWalls = parser.hideWalls;
roomSettingsData.wallThickness = parser.thicknessWall;
roomSettingsData.floorThickness = parser.thicknessFloor;
roomSettingsData.chatBubbleMode = parser.chatSettings.mode;
roomSettingsData.chatBubbleWeight = parser.chatSettings.weight;
roomSettingsData.chatBubbleSpeed = parser.chatSettings.speed;
roomSettingsData.chatFloodProtection = parser.chatSettings.protection;
roomSettingsData.chatDistance = parser.chatSettings.distance;
roomSettingsData.muteState = parser.moderationSettings.allowMute;
roomSettingsData.kickState = parser.moderationSettings.allowKick;
roomSettingsData.banState = parser.moderationSettings.allowBan;
setRoomSettingsData(roomSettingsData);
}, []);
CreateMessageHook(RoomSettingsEvent, onRoomSettingsEvent);
const save = useCallback(() =>
{
console.log('save', roomSettingsData)
const composer = 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
);
SendMessageHook(composer);
}, [ roomSettingsData ]);
const processAction = useCallback((action: string) =>
{
switch(action)
{
case 'close':
setRoomSettingsData(null);
setCurrentTab(TABS[0]);
return;
}
}, [ setRoomSettingsData ]);
if(!roomSettingsData) return null;
return (
<NitroCardView className="nitro-room-settings">
<NitroCardHeaderView headerText={ LocalizeText('navigator.roomsettings') } onCloseClick={ () => processAction('close') } />
<NitroCardTabsView>
{ TABS.map(tab =>
{
return <NitroCardTabsItemView key={ tab } isActive={ currentTab === tab } onClick={ event => setCurrentTab(tab) }>{ LocalizeText(tab) }</NitroCardTabsItemView>
}) }
</NitroCardTabsView>
<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 } /> }
</NitroCardContentView>
</NitroCardView>
);
};

8
src/views/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts Normal file
View File

@ -0,0 +1,8 @@
import RoomSettingsData from '../../common/RoomSettingsData';
export class NavigatorRoomSettingsTabViewProps
{
roomSettingsData: RoomSettingsData;
setRoomSettingsData: (roomSettings: RoomSettingsData) => void;
onSave: () => void;
}

96
src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx Normal file
View File

@ -0,0 +1,96 @@
import { FC, useCallback } from 'react';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
import RoomSettingsData from '../../../../common/RoomSettingsData';
import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
{
const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props;
const handleChange = useCallback((field: string, value: string | number | boolean) =>
{
const roomSettings = ({...roomSettingsData} as RoomSettingsData);
let save = true;
switch(field)
{
case 'lock_state':
roomSettings.lockState = Number(value);
if(Number(value) === 3) save = false;
break;
case 'password':
roomSettings.password = String(value);
save = false;
break;
case 'confirm_password':
roomSettings.confirmPassword = String(value);
save = false;
break;
case 'allow_pets':
roomSettings.allowPets = Boolean(value);
break;
case 'allow_pets_eat':
roomSettings.allowPetsEat = Boolean(value);
break;
}
setRoomSettingsData(roomSettings);
if(save) onSave();
}, [ roomSettingsData, setRoomSettingsData, onSave ]);
const isPasswordValid = useCallback(() =>
{
return (roomSettingsData.password && roomSettingsData.password.length > 0 && roomSettingsData.password === roomSettingsData.confirmPassword);
}, [ roomSettingsData ]);
const trySave = useCallback(() =>
{
if(isPasswordValid()) onSave();
}, [ isPasswordValid, onSave ]);
return (
<>
<div className="fw-bold">{ LocalizeText('navigator.roomsettings.doormode') }</div>
<div className="form-check">
<input className="form-check-input" type="radio" name="lockState" checked={ roomSettingsData.lockState === 0 } onChange={ (e) => handleChange('lock_state', 0) } />
<label className="form-check-label">{ LocalizeText('navigator.roomsettings.doormode.open') }</label>
</div>
<div className="form-check">
<input className="form-check-input" type="radio" name="lockState" checked={ roomSettingsData.lockState === 1 } onChange={ (e) => handleChange('lock_state', 1) } />
<label className="form-check-label">{ LocalizeText('navigator.roomsettings.doormode.doorbell') }</label>
</div>
<div className="form-check">
<input className="form-check-input" type="radio" name="lockState" checked={ roomSettingsData.lockState === 2 } onChange={ (e) => handleChange('lock_state', 2) } />
<label className="form-check-label">{ LocalizeText('navigator.roomsettings.doormode.invisible') }</label>
</div>
<div className="form-check">
<input className="form-check-input" type="radio" name="lockState" checked={ roomSettingsData.lockState === 3 } onChange={ (e) => handleChange('lock_state', 3) } />
<label className="form-check-label">{ LocalizeText('navigator.roomsettings.doormode.password') }</label>
</div>
{ roomSettingsData.lockState === 3 && <>
<div className="form-group mt-2">
<label>{ LocalizeText('navigator.roomsettings.password') }</label>
<input type="password" className="form-control form-control-sm" value={ roomSettingsData.password ?? '' } onChange={ (e) => handleChange('password', e.target.value) } onBlur={ trySave } placeholder="*****" />
</div>
<div className="form-group">
<label>{ LocalizeText('navigator.roomsettings.passwordconfirm') }</label>
<input type="password" className="form-control form-control-sm" value={ roomSettingsData.confirmPassword ?? '' } onChange={ (e) => handleChange('confirm_password', e.target.value) } onBlur={ trySave } placeholder="*****" />
{ !isPasswordValid() && <small className="text-danger fw-bold">
{ LocalizeText('navigator.roomsettings.invalidconfirm') }
</small> }
</div>
</> }
<div className="fw-bold mt-2">{ LocalizeText('navigator.roomsettings.pets') }</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" checked={ roomSettingsData.allowPets } onChange={ (e) => handleChange('allow_pets', e.target.checked) } />
<label className="form-check-label">{ LocalizeText('navigator.roomsettings.allowpets') }</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" checked={ roomSettingsData.allowPetsEat } onChange={ (e) => handleChange('allow_pets_eat', e.target.checked) } />
<label className="form-check-label">{ LocalizeText('navigator.roomsettings.allowfoodconsume') }</label>
</div>
</>
);
};

107
src/views/navigator/views/room-settings/views/tab-basic/NavigatorRoomSettingsBasicTabView.tsx Normal file
View File

@ -0,0 +1,107 @@
import { FC, useCallback, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
import RoomSettingsData from '../../../../common/RoomSettingsData';
import { useNavigatorContext } from '../../../../context/NavigatorContext';
import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
{
const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props;
const { navigatorState = null } = useNavigatorContext();
const { categories = null } = navigatorState;
const [ maxVisitorsList, setMaxVisitorsList ] = useState(null);
useEffect(() =>
{
if(!maxVisitorsList)
{
const list = [];
for(let i = 10; i <= 100; i = i + 10)
{
list.push(i);
}
setMaxVisitorsList(list);
}
}, [ maxVisitorsList ]);
const handleChange = useCallback((field: string, value: string | number | boolean) =>
{
const roomSettings = ({...roomSettingsData} as RoomSettingsData);
let save = true;
switch(field)
{
case 'name':
roomSettings.roomName = String(value);
save = false;
break;
case 'description':
roomSettings.roomDescription = String(value);
save = false;
break;
case 'category':
roomSettings.categoryId = Number(value);
break;
case 'max_visitors':
roomSettings.userCount = Number(value);
break;
case 'trade_state':
roomSettings.tradeState = Number(value);
break;
case 'allow_walkthrough':
roomSettings.allowWalkthrough = Boolean(value);
break;
}
setRoomSettingsData(roomSettings);
if(save) onSave();
}, [ 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={ e => handleChange('name', e.target.value) } onBlur={ onSave } />
</div>
<div className="form-group mb-1">
<label>{ LocalizeText('navigator.roomsettings.desc') }</label>
<input className="form-control form-control-sm" value={ roomSettingsData.roomDescription } onChange={ e => handleChange('description', e.target.value) } onBlur={ () => onSave() } />
</div>
<div className="form-group mb-1">
<label>{ LocalizeText('navigator.category') }</label>
<select className="form-select form-select-sm" value={ roomSettingsData.categoryId } onChange={ (e) => handleChange('category', e.target.value) }>
{ categories && categories.map(category =>
{
return <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>
}) }
</select>
</div>
<div className="form-group mb-1">
<label>{ LocalizeText('navigator.maxvisitors') }</label>
<select className="form-select form-select-sm" value={ roomSettingsData.userCount } onChange={ (e) => handleChange('max_visitors', e.target.value) }>
{ maxVisitorsList && maxVisitorsList.map(value =>
{
return <option key={ value } value={ value }>{ value }</option>
}) }
</select>
</div>
<div className="form-group mb-1">
<label>{ LocalizeText('navigator.tradesettings') }</label>
<select className="form-select form-select-sm" value={ roomSettingsData.tradeState } onChange={ (e) => handleChange('trade_state', e.target.value) }>
<option value="0">{ LocalizeText('${navigator.roomsettings.trade_not_allowed}') }</option>
<option value="1">{ LocalizeText('${navigator.roomsettings.trade_not_with_Controller}') }</option>
<option value="2">{ LocalizeText('${navigator.roomsettings.trade_allowed}') }</option>
</select>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" checked={ roomSettingsData.allowWalkthrough } onChange={ (e) => handleChange('allow_walkthrough', e.target.checked) } />
<label className="form-check-label">{ LocalizeText('navigator.roomsettings.allow_walk_through') }</label>
</div>
</>
);
};

26
src/views/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx
View File

@ -1,4 +1,6 @@
import { FC, useCallback, useState } from 'react';
import { RoomWidgetThumbnailEvent } from '../../../../events/room-widgets/thumbnail';
import { useUiEvent } from '../../../../hooks/events';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { RoomThumbnailWidgetViewProps } from './RoomThumbnailView.types';
@ -11,6 +13,30 @@ export const RoomThumbnailWidgetView: FC<RoomThumbnailWidgetViewProps> = props =
const [ isBuilderVisible, setIsBuilderVisible ] = useState(false);
const [ isCameraVisible, setIsCameraVisible ] = useState(false);
const onNitroEvent = useCallback((event: RoomWidgetThumbnailEvent) =>
{
switch(event.type)
{
case RoomWidgetThumbnailEvent.SHOW_THUMBNAIL:
setIsSelectorVisible(true);
return;
case RoomWidgetThumbnailEvent.HIDE_THUMBNAIL:
setIsSelectorVisible(false);
setIsBuilderVisible(false);
setIsCameraVisible(false);
return;
case RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL:
setIsSelectorVisible(value => !value);
setIsBuilderVisible(false);
setIsCameraVisible(false);
return;
}
}, []);
useUiEvent(RoomWidgetThumbnailEvent.SHOW_THUMBNAIL, onNitroEvent);
useUiEvent(RoomWidgetThumbnailEvent.HIDE_THUMBNAIL, onNitroEvent);
useUiEvent(RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL, onNitroEvent);
const handleAction = useCallback((action: string) =>
{
switch(action)