Room settings update

src/views/navigator/common/RoomSettingsData.ts

@@ -1,3 +1,5 @@
+import { RoomSettingsParser } from 'nitro-renderer';
+
 export default class RoomSettingsData
 {
     public roomId: number;
@@ -35,40 +37,42 @@ export default class RoomSettingsData
     public bannedUsers: Map<number, string>;
     public selectedUserToUnban: number;
 
-    constructor()
+    constructor(parser: RoomSettingsParser)
     {
-        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;
+        if(!parser) throw new Error('invalid_parser');
 
-        this.lockState              = 0;
-        this.originalLockState      = 0;
+        this.roomId                 = parser.roomId;
+        this.roomName               = parser.name;
+        this.roomOriginalName       = parser.name;
+        this.roomDescription        = parser.description;
+        this.categoryId             = parser.categoryId;
+        this.userCount              = parser.userCount;
+        this.tags                   = parser.tags;
+        this.tradeState             = parser.tradeMode;
+        this.allowWalkthrough       = parser.allowWalkthrough;
+
+        this.lockState              = parser.state;
+        this.originalLockState      = parser.state;
         this.password               = null;
         this.confirmPassword        = null;
-        this.allowPets              = false;
-        this.allowPetsEat           = false;
+        this.allowPets              = parser.allowPets;
+        this.allowPetsEat           = parser.allowPetsEat;
 
         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.hideWalls              = parser.hideWalls;
+        this.wallThickness          = parser.thicknessWall;
+        this.floorThickness         = parser.thicknessFloor;
+        this.chatBubbleMode         = parser.chatSettings.mode;
+        this.chatBubbleWeight       = parser.chatSettings.weight;
+        this.chatBubbleSpeed        = parser.chatSettings.speed;
+        this.chatFloodProtection    = parser.chatSettings.protection;
+        this.chatDistance           = parser.chatSettings.distance;
 
-        this.muteState              = 0;
-        this.kickState              = 0;
-        this.banState               = 0;
+        this.muteState              = parser.moderationSettings.allowMute;
+        this.kickState              = parser.moderationSettings.allowKick;
+        this.banState               = parser.moderationSettings.allowBan;
         this.bannedUsers            = new Map<number, string>();
         this.selectedUserToUnban    = 0;
     }

src/views/navigator/common/RoomSettingsUtils.ts

@@ -0,0 +1,11 @@
+export function GetMaxVisitorsList(): number[]
+{
+    const list: number[] = [];
+
+    for(let i = 10; i <= 100; i = i + 10)
+    {
+        list.push(i);
+    }
+
+    return list;
+}

src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss

@@ -1,3 +1,7 @@
 .nitro-room-settings {
     width: 400px;
+
+    .content-area {
+        height: 350px;
+    }
 }

src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx

@@ -30,70 +30,42 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
     {
         const parser = event.getParser();
 
-        const roomSettingsData = new RoomSettingsData();
+        if(!parser) return;
 
-        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);
+        setRoomSettingsData(new RoomSettingsData(parser));
     }, []);
     
     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);
+        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
+            ));
     }, [ roomSettingsData ]);
 
     const processAction = useCallback((action: string) =>

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

@@ -1,36 +1,20 @@
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../../../../utils/LocalizeText';
-import RoomSettingsData from '../../../../common/RoomSettingsData';
+import { GetMaxVisitorsList } from '../../../../common/RoomSettingsUtils';
 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 [ maxVisitorsList, setMaxVisitorsList ] = useState(GetMaxVisitorsList());
     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);
+        const roomSettings = Object.assign({}, roomSettingsData);
+
         let save = true;
 
         switch(field)
@@ -66,15 +50,15 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
         <>
             <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 } />
+                <input className="form-control form-control-sm" value={ roomSettingsData.roomName } onChange={ event => handleChange('name', event.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() } />
+                <input className="form-control form-control-sm" value={ roomSettingsData.roomDescription } onChange={ event => handleChange('description', event.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) }>
+                <select className="form-select form-select-sm" value={ roomSettingsData.categoryId } onChange={ event => handleChange('category', event.target.value) }>
                     { categories && categories.map(category =>
                         {
                             return <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>
@@ -83,7 +67,7 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
             </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) }>
+                <select className="form-select form-select-sm" value={ roomSettingsData.userCount } onChange={ event => handleChange('max_visitors', event.target.value) }>
                     { maxVisitorsList && maxVisitorsList.map(value =>
                         {
                             return <option key={ value } value={ value }>{ value }</option>
@@ -92,16 +76,21 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
             </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 className="form-select form-select-sm" value={ roomSettingsData.tradeState } onChange={ event => handleChange('trade_state', event.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) } />
+                <input className="form-check-input" type="checkbox" checked={ roomSettingsData.allowWalkthrough } onChange={ event => handleChange('allow_walkthrough', event.target.checked) } />
                 <label className="form-check-label">{ LocalizeText('navigator.roomsettings.allow_walk_through') }</label>
             </div>
+            <div className="form-group d-flex justify-content-center mt-1">
+                <button type="button" className="btn btn-link btn-sm text-danger fw-bold">
+                    <i className="fas fa-times me-1" />
+                    { LocalizeText('navigator.roomsettings.delete') }</button>
+            </div>
         </>
     );
 };