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

Navigator Doorbell (requester) and Password

Browse Source
This commit is contained in:
Batman 2021-04-21 06:04:56 -03:00
parent d49e3bd18c
commit f3fb01fc5c
16 changed files with 272 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,13 @@
import { NavigatorCategoriesComposer, NavigatorMetadataEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomDataParser, RoomForwardEvent, RoomInfoComposer, RoomInfoEvent, RoomInfoOwnerEvent, UserInfoEvent } from 'nitro-renderer';
import { GenericErrorEvent, NavigatorCategoriesComposer, NavigatorMetadataEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomDataParser, RoomDoorbellAcceptedEvent, RoomDoorbellEvent, RoomForwardEvent, RoomInfoComposer, RoomInfoEvent, RoomInfoOwnerEvent, UserInfoEvent } from 'nitro-renderer';
import { useCallback } from 'react';
import { GetRoomSessionManager, GetSessionDataManager } from '../../api';
import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
import { NavigatorLockViewStage } from './lock/NavigatorLockView.types';
import { NavigatorMessageHandlerProps } from './NavigatorMessageHandler.types';
export function NavigatorMessageHandler(props: NavigatorMessageHandlerProps): JSX.Element
{
const { setTopLevelContext = null, setTopLevelContexts = null, setSearchResults = null } = props;
const { setTopLevelContext = null, setTopLevelContexts = null, setSearchResults = null, showLock = null, hideLock = null } = props;
const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
{
@ -48,7 +49,6 @@ export function NavigatorMessageHandler(props: NavigatorMessageHandlerProps): JS
// this._data.createdRoomId = 0;
}
else if(parser.roomForward)
{
if((parser.data.ownerName !== GetSessionDataManager().userName) && !parser.isGroupMember)
@ -56,17 +56,14 @@ export function NavigatorMessageHandler(props: NavigatorMessageHandlerProps): JS
switch(parser.data.doorMode)
{
case RoomDataParser.DOORBELL_STATE:
console.log('open doorbell');
return;
case RoomDataParser.PASSWORD_STATE:
console.log('open password');
showLock();
return;
}
}
GetRoomSessionManager().createSession(parser.data.roomId);
}
else
{
// this._data.enteredGuestRoom = parser.data;
@ -74,6 +71,50 @@ export function NavigatorMessageHandler(props: NavigatorMessageHandlerProps): JS
}
}, []);
const onRoomDoorbellEvent = useCallback((event: RoomDoorbellEvent) =>
{
if(!event) return;
const parser = event.getParser();
if(!parser) return;
if(!parser.userName || (parser.userName.length === 0))
{
showLock(NavigatorLockViewStage.WAITING);
}
}, []);
const onRoomDoorbellAcceptedEvent = useCallback((event: RoomDoorbellAcceptedEvent) =>
{
if(!event) return;
const parser = event.getParser();
if(!parser) return;
if(!parser.userName || (parser.userName.length === 0))
{
hideLock();
}
}, []);
const onGenericErrorEvent = useCallback((event: GenericErrorEvent) =>
{
if(!event) return;
const parser = event.getParser();
if(!parser) return;
switch(parser.errorCode)
{
case -100002:
showLock(NavigatorLockViewStage.FAILED);
break;
}
}, []);
const onNavigatorMetadataEvent = useCallback((event: NavigatorMetadataEvent) =>
{
const parser = event.getParser();
@ -96,6 +137,9 @@ export function NavigatorMessageHandler(props: NavigatorMessageHandlerProps): JS
CreateMessageHook(new RoomForwardEvent(onRoomForwardEvent));
CreateMessageHook(new RoomInfoOwnerEvent(onRoomInfoOwnerEvent));
CreateMessageHook(new RoomInfoEvent(onRoomInfoEvent));
CreateMessageHook(new RoomDoorbellEvent(onRoomDoorbellEvent));
CreateMessageHook(new RoomDoorbellAcceptedEvent(onRoomDoorbellAcceptedEvent));
CreateMessageHook(new GenericErrorEvent(onGenericErrorEvent));
CreateMessageHook(new NavigatorMetadataEvent(onNavigatorMetadataEvent));
CreateMessageHook(new NavigatorSearchEvent(onNavigatorSearchEvent));

3
src/views/navigator/NavigatorMessageHandler.types.ts
View File

@ -1,8 +1,11 @@
import { NavigatorSearchResultList, NavigatorTopLevelContext } from 'nitro-renderer';
import { NavigatorLockViewStage } from './lock/NavigatorLockView.types';
export interface NavigatorMessageHandlerProps
{
setTopLevelContext: (context: NavigatorTopLevelContext) => void;
setTopLevelContexts: (contexts: NavigatorTopLevelContext[]) => void;
setSearchResults: (results: NavigatorSearchResultList[]) => void;
showLock: (stage?: NavigatorLockViewStage) => void;
hideLock: () => void;
}

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

@ -2,5 +2,6 @@
width: 400px;
}
@import './lock/NavigatorLockView';
@import './result-lists/NavigatorResultListsView';
@import './tabs/NavigatorTabsView';

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

@ -1,26 +1,35 @@
import { NavigatorInitComposer, NavigatorSearchComposer, NavigatorSearchResultList, NavigatorTopLevelContext, RoomSessionEvent } from 'nitro-renderer';
import { MouseEvent, useCallback, useEffect, useState } from 'react';
import { NavigatorInitComposer, NavigatorSearchComposer, NavigatorSearchResultList, NavigatorTopLevelContext, RoomDataParser, RoomInfoComposer, RoomSessionEvent } from 'nitro-renderer';
import React, { MouseEvent, useCallback, useEffect, useState } from 'react';
import { GetRoomSessionManager } from '../../api';
import { NavigatorEvent } from '../../events';
import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
import { useUiEvent } from '../../hooks/events/ui/ui-event';
import { SendMessageHook } from '../../hooks/messages/message-event';
import { LocalizeText } from '../../utils/LocalizeText';
import { NavigatorLockView } from './lock/NavigatorLockView';
import { NavigatorLockViewStage } from './lock/NavigatorLockView.types';
import { NavigatorMessageHandler } from './NavigatorMessageHandler';
import { NavigatorViewProps } from './NavigatorView.types';
import { INavigatorContext, NavigatorViewProps } from './NavigatorView.types';
import { NavigatorResultListsView } from './result-lists/NavigatorResultListsView';
import { NavigatorTabsView } from './tabs/NavigatorTabsView';
export const NavigatorContext = React.createContext<INavigatorContext>(null);
export function NavigatorView(props: NavigatorViewProps): JSX.Element
{
const [ isVisible, setIsVisible ] = useState(false);
const [ isLoaded, setIsLoaded ] = useState(false);
const [ isLoading, setIsLoading ] = useState(false);
const [ isSearching, setIsSearching ] = useState(false);
const [ isVisible, setIsVisible ] = useState(false);
const [ isLoaded, setIsLoaded ] = useState(false);
const [ isLoading, setIsLoading ] = useState(false);
const [ isSearching, setIsSearching ] = useState(false);
const [ isLockVisible, setIsLockVisible ] = useState(false);
const [ lockStage, setLockStage ] = useState<NavigatorLockViewStage>(NavigatorLockViewStage.INIT);
const [ lastRoomVisited, setLastRoomVisited ] = useState<RoomDataParser>(null);
const [ topLevelContexts, setTopLevelContexts ] = useState<NavigatorTopLevelContext[]>(null);
const [ topLevelContext, setTopLevelContext ] = useState<NavigatorTopLevelContext>(null);
const [ searchResults, setSearchResults ] = useState<NavigatorSearchResultList[]>(null);
const [ topLevelContext, setTopLevelContext ] = useState<NavigatorTopLevelContext>(null);
const [ searchResults, setSearchResults ] = useState<NavigatorSearchResultList[]>(null);
function hideNavigator(event: MouseEvent = null): void
{
@ -29,6 +38,31 @@ export function NavigatorView(props: NavigatorViewProps): JSX.Element
setIsVisible(false);
}
function hideLock(): void
{
setIsLockVisible(false);
setLockStage(NavigatorLockViewStage.INIT);
}
function showLock(stage: NavigatorLockViewStage = NavigatorLockViewStage.INIT)
{
setLockStage(stage);
setIsLockVisible(true);
}
function visitRoom(roomId: number, password: string = null): void
{
setIsLockVisible(false);
GetRoomSessionManager().createSession(roomId, password);
}
function tryVisitRoom(room: RoomDataParser): void
{
setIsLockVisible(false);
setLastRoomVisited(room);
SendMessageHook(new RoomInfoComposer(room.roomId, false, true));
}
const onNavigatorEvent = useCallback((event: NavigatorEvent) =>
{
switch(event.type)
@ -94,19 +128,22 @@ export function NavigatorView(props: NavigatorViewProps): JSX.Element
return (
<>
<NavigatorMessageHandler setTopLevelContext={ setTopLevelContext } setTopLevelContexts={ setTopLevelContexts } setSearchResults={ setSearchResults } />
{ isVisible && <DraggableWindow handle=".drag-handler">
<div className="nitro-navigator d-flex flex-column bg-primary border border-black shadow rounded position-absolute">
<div className="drag-handler d-flex justify-content-between align-items-center px-3 pt-3">
<div className="h6 m-0">{ LocalizeText((isLoading || isSearching) ? 'navigator.title.is.busy' : 'navigator.title') }</div>
<button type="button" className="close" onClick={ hideNavigator }>
<i className="fas fa-times"></i>
</button>
<NavigatorContext.Provider value={{ onTryVisitRoom: tryVisitRoom }}>
<NavigatorMessageHandler setTopLevelContext={ setTopLevelContext } setTopLevelContexts={ setTopLevelContexts } setSearchResults={ setSearchResults } showLock={ showLock } hideLock={ hideLock } />
{ isVisible && <DraggableWindow handle=".drag-handler">
<div className="nitro-navigator d-flex flex-column bg-primary border border-black shadow rounded position-absolute">
<div className="drag-handler d-flex justify-content-between align-items-center px-3 pt-3">
<div className="h6 m-0">{ LocalizeText((isLoading || isSearching) ? 'navigator.title.is.busy' : 'navigator.title') }</div>
<button type="button" className="close" onClick={ hideNavigator }>
<i className="fas fa-times"></i>
</button>
</div>
<NavigatorTabsView topLevelContext={ topLevelContext } topLevelContexts={ topLevelContexts } setTopLevelContext={ setTopLevelContext } />
<NavigatorResultListsView resultLists={ searchResults } />
</div>
<NavigatorTabsView topLevelContext={ topLevelContext } topLevelContexts={ topLevelContexts } setTopLevelContext={ setTopLevelContext } />
<NavigatorResultListsView resultLists={ searchResults } />
</div>
</DraggableWindow> }
</DraggableWindow> }
{ isLockVisible && <NavigatorLockView roomData={ lastRoomVisited } stage={ lockStage } onHideLock={ hideLock } onVisitRoom={ visitRoom }></NavigatorLockView> }
</NavigatorContext.Provider>
</>
);
}

6
src/views/navigator/NavigatorView.types.ts
View File

@ -1,4 +1,8 @@
import { RoomDataParser } from 'nitro-renderer';
export interface NavigatorViewProps
{}
export interface INavigatorContext
{
onTryVisitRoom: (roomData: RoomDataParser) => void;
}

3
src/views/navigator/lock/NavigatorLockView.scss Normal file
View File

@ -0,0 +1,3 @@
.nitro-navigator-lock {
width: 250px;
}

38
src/views/navigator/lock/NavigatorLockView.tsx Normal file
View File

@ -0,0 +1,38 @@
import { RoomDataParser } from 'nitro-renderer';
import { DraggableWindow } from '../../../hooks/draggable-window/DraggableWindow';
import { LocalizeText } from '../../../utils/LocalizeText';
import { NavigatorLockDoorbellView } from './doorbell/NavigatorLockDoorbellView';
import { NavigatorLockViewProps } from './NavigatorLockView.types';
import { NavigatorLockPasswordView } from './password/NavigatorLockPasswordView';
export function NavigatorLockView(props: NavigatorLockViewProps): JSX.Element
{
const { roomData = null, stage = null, onHideLock = null, onVisitRoom = null } = props;
function visitRoom(password?: string): void
{
onVisitRoom(roomData.roomId, password);
}
return (
<>
<DraggableWindow handle=".drag-handler">
<div className="nitro-navigator-lock d-flex flex-column bg-primary border border-black shadow rounded position-absolute">
<div className="drag-handler d-flex justify-content-between align-items-center px-3 pt-3">
<div className="h6 m-0">{ LocalizeText(roomData.doorMode === RoomDataParser.PASSWORD_STATE ? 'navigator.password.title' : 'navigator.doorbell.title') }</div>
<button type="button" className="close" onClick={ onHideLock }>
<i className="fas fa-times"></i>
</button>
</div>
<div className="p-3">
{ roomData && <>
<h5>{ roomData.roomName }</h5>
{ roomData.doorMode && roomData.doorMode === RoomDataParser.DOORBELL_STATE && <NavigatorLockDoorbellView stage={stage} onVisitRoom={ visitRoom } onHideLock={ onHideLock } /> }
{ roomData.doorMode && roomData.doorMode === RoomDataParser.PASSWORD_STATE && <NavigatorLockPasswordView stage={stage} onVisitRoom={ visitRoom } onHideLock={ onHideLock } /> }
</> }
</div>
</div>
</DraggableWindow>
</>
);
}

16
src/views/navigator/lock/NavigatorLockView.types.ts Normal file
View File

@ -0,0 +1,16 @@
import { RoomDataParser } from 'nitro-renderer';
export interface NavigatorLockViewProps
{
roomData: RoomDataParser;
stage: NavigatorLockViewStage;
onHideLock: () => void;
onVisitRoom: (roomId: number, password?: string) => void;
}
export enum NavigatorLockViewStage
{
INIT = 'navigator_lock_view_stage_init',
WAITING = 'navigator_lock_view_stage_waiting',
FAILED = 'navigator_lock_view_stage_failed'
}

22
src/views/navigator/lock/doorbell/NavigatorLockDoorbellView.tsx Normal file
View File

@ -0,0 +1,22 @@
import { LocalizeText } from '../../../../utils/LocalizeText';
import { NavigatorLockViewStage } from '../NavigatorLockView.types';
import { NavigatorLockDoorbellViewProps } from './NavigatorLockDoorbellView.types';
export function NavigatorLockDoorbellView(props: NavigatorLockDoorbellViewProps): JSX.Element
{
const { stage = null, onVisitRoom = null, onHideLock = null } = props;
return (
<>
{ stage && <div className="mb-3">
{ stage === NavigatorLockViewStage.INIT && LocalizeText('navigator.doorbell.info') }
{ stage === NavigatorLockViewStage.WAITING && LocalizeText('navigator.doorbell.waiting') }
{ stage === NavigatorLockViewStage.FAILED && LocalizeText('navigator.doorbell.no.answer') }
</div> }
<div className="d-flex justify-content-between">
<button type="button" className="btn btn-secondary" onClick={ () => onHideLock() }>{ LocalizeText('generic.cancel') }</button>
{ stage === NavigatorLockViewStage.INIT && <button type="button" className="btn btn-primary" onClick={ () => onVisitRoom() }>{ LocalizeText('navigator.doorbell.button.ring') }</button> }
</div>
</>
);
}

8
src/views/navigator/lock/doorbell/NavigatorLockDoorbellView.types.ts Normal file
View File

@ -0,0 +1,8 @@
import { NavigatorLockViewStage } from '../NavigatorLockView.types';
export interface NavigatorLockDoorbellViewProps
{
stage: NavigatorLockViewStage;
onVisitRoom: (password?: string) => void;
onHideLock: () => void;
}

28
src/views/navigator/lock/password/NavigatorLockPasswordView.tsx Normal file
View File

@ -0,0 +1,28 @@
import { useState } from 'react';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { NavigatorLockViewStage } from '../NavigatorLockView.types';
import { NavigatorLockPasswordViewProps } from './NavigatorLockPasswordView.types';
export function NavigatorLockPasswordView(props: NavigatorLockPasswordViewProps): JSX.Element
{
const { stage = null, onVisitRoom = null, onHideLock = null } = props;
const [ password, setPassword ] = useState<string>(null);
return (
<>
{ stage && <div className="mb-2">
{ stage === NavigatorLockViewStage.INIT && LocalizeText('navigator.password.info') }
{ stage === NavigatorLockViewStage.FAILED && LocalizeText('navigator.password.retryinfo') }
</div> }
<div className="form-group mb-3">
<label>{ LocalizeText('navigator.password.enter') }</label>
<input autoComplete="off" type="password" className="form-control form-control-sm" placeholder="*****" value={ password } onChange={ (event) => setPassword(event.target.value) } />
</div>
<div className="d-flex justify-content-between">
<button type="button" className="btn btn-secondary" onClick={ () => onHideLock() }>{ LocalizeText('generic.cancel') }</button>
<button type="button" className="btn btn-primary" onClick={ () => onVisitRoom(password) }>{ LocalizeText('navigator.password.button.try') }</button>
</div>
</>
);
}

8
src/views/navigator/lock/password/NavigatorLockPasswordView.types.ts Normal file
View File

@ -0,0 +1,8 @@
import { NavigatorLockViewStage } from '../NavigatorLockView.types';
export interface NavigatorLockPasswordViewProps
{
stage: NavigatorLockViewStage;
onVisitRoom: (password?: string) => void;
onHideLock: () => void;
}

2
src/views/navigator/result-lists/NavigatorResultListsView.tsx
View File

@ -9,7 +9,7 @@ export function NavigatorResultListsView(props: NavigatorResultListsViewProps):
<div className="nitro-navigator-result-lists px-3 pb-3">
{ resultLists && resultLists.length && resultLists.map((resultList, index) =>
{
return <NavigatorResultListView key={ index } resultList={ resultList } />
return <NavigatorResultListView key={ index } resultList={ resultList } isLast={ index + 1 === resultLists.length } />
})
}
</div>

6
src/views/navigator/result-lists/result-list/NavigatorResultListView.tsx
View File

@ -6,7 +6,7 @@ import { NavigatorResultView } from './result/NavigatorResultView';
export function NavigatorResultListView(props: NavigatorResultListViewProps): JSX.Element
{
const { resultList = null } = props;
const { resultList = null, isLast = false } = props;
const [ isExtended, setIsExtended ] = useState(true);
@ -37,7 +37,7 @@ export function NavigatorResultListView(props: NavigatorResultListViewProps): JS
}
return (
<div className="mb-2">
<div>
<div className="d-flex">
<div className=" mr-2" onClick={ toggleList }><i className={classNames({ 'fas': true, 'fa-plus': !isExtended, 'fa-minus': isExtended })}></i></div>
<div className="align-self-center w-100">{ LocalizeText(getListCode()) }</div>
@ -47,7 +47,7 @@ export function NavigatorResultListView(props: NavigatorResultListViewProps): JS
return <NavigatorResultView key={ index } result={ room } />
})
}
<hr />
{ !isLast && <hr className="mb-2" /> }
</div>
);
}

1
src/views/navigator/result-lists/result-list/NavigatorResultListView.types.ts
View File

@ -3,4 +3,5 @@ import { NavigatorSearchResultList } from 'nitro-renderer';
export interface NavigatorResultListViewProps
{
resultList: NavigatorSearchResultList;
isLast: boolean;
}

53
src/views/navigator/result-lists/result-list/result/NavigatorResultView.tsx
View File

@ -1,7 +1,7 @@
import classNames from 'classnames';
import { RoomDataParser, RoomInfoComposer } from 'nitro-renderer';
import { RoomDataParser } from 'nitro-renderer';
import React from 'react';
import { SendMessageHook } from '../../../../../hooks/messages/message-event';
import { NavigatorContext } from '../../../NavigatorView';
import { NavigatorResultViewProps } from './NavigatorResultView.types';
export function NavigatorResultView(props: NavigatorResultViewProps): JSX.Element
@ -36,32 +36,31 @@ export function NavigatorResultView(props: NavigatorResultViewProps): JSX.Elemen
console.log('info');
}
function enterRoom(): void
{
SendMessageHook(new RoomInfoComposer(result.roomId, false, true));
}
return (
<div className="nitro-navigator-result rounded mt-1 py-1 px-2" onClick={ enterRoom }>
<div className="d-flex">
<div className="mr-2 align-self-center">
<div className={'badge badge-sm ' + getUserCounterColor() }><i className="fas fa-user"></i> { result.userCount }</div>
</div>
<div className="w-100 align-self-center">{ result.roomName }</div>
{ result.doorMode !== RoomDataParser.OPEN_STATE &&
<div className="ml-2 small align-self-center">
<i className={classNames({'fas': true, 'fa-lock': result.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': result.doorMode === RoomDataParser.PASSWORD_STATE})}></i>
<NavigatorContext.Consumer>
{ navigatorContext => {
return <div className="nitro-navigator-result rounded mt-1 py-1 px-2" onClick={ () => navigatorContext.onTryVisitRoom(result) }>
<div className="d-flex">
<div className="mr-2 align-self-center">
<div className={'badge badge-sm ' + getUserCounterColor() }><i className="fas fa-user"></i> { result.userCount }</div>
</div>
<div className="w-100 align-self-center">{ result.roomName }</div>
{ result.doorMode !== RoomDataParser.OPEN_STATE &&
<div className="ml-2 small align-self-center">
<i className={classNames({'fas': true, 'fa-lock': result.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': result.doorMode === RoomDataParser.PASSWORD_STATE})}></i>
</div>
}
{ result.habboGroupId > 0 &&
<div className="ml-2 small align-self-center">
<i className="fas fa-users"></i>
</div>
}
<div className="ml-2 small align-self-center" onClick={ openInfo }>
<i className="fas fa-info-circle"></i>
</div>
</div>
</div>
}
{ result.habboGroupId > 0 &&
<div className="ml-2 small align-self-center">
<i className="fas fa-users"></i>
</div>
}
<div className="ml-2 small align-self-center" onClick={ openInfo }>
<i className="fas fa-info-circle"></i>
</div>
</div>
</div>
}}
</NavigatorContext.Consumer>
);
}