nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 13:26:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/hotelview-widget-links' into 'dev'

Browse Source 
add onclick handler to widget buttons

See merge request nitro/nitro-react!41
This commit is contained in:
Bill 2022-03-26 00:14:15 +00:00
commit 43bc90efe6
15 changed files with 59 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/ui-config.json.example
View File

@ -20,19 +20,25 @@
"show.avatar": true,
"widgets": {
"slot.1.widget": "promoarticle",
"slot.1.conf": "",
"slot.1.conf": {},
"slot.2.widget": "widgetcontainer",
"slot.2.conf": "image:${image.library.url}web_promo_small/spromo_Canal_Bundle.png,texts:2021NitroPromo,btnLink:https://google.com",
"slot.2.conf": {
"image": "${image.library.url}web_promo_small/spromo_Canal_Bundle.png",
"texts": "2021NitroPromo",
"btnLink": "https://google.com"
},
"slot.3.widget": "promoarticle",
"slot.3.conf": "",
"slot.3.conf": {},
"slot.4.widget": "",
"slot.4.conf": "",
"slot.4.conf": {},
"slot.5.widget": "",
"slot.5.conf": "",
"slot.5.conf": {},
"slot.6.widget": "achievementcompetition_hall_of_fame",
"slot.6.conf": "",
"slot.6.conf": {
"campaign": "habboFameComp"
},
"slot.7.widget": "",
"slot.7.conf": ""
"slot.7.conf": {}
},
"images": {
"background": "${asset.url}/images/reception/stretch_blue.png",

4
src/components/hotel-view/HotelView.tsx
View File

@ -3,7 +3,7 @@ import { FC, useCallback, useState } from 'react';
import { GetConfiguration, GetConfigurationManager } from '../../api';
import { LayoutAvatarImageView } from '../../common';
import { BatchUpdates, UseMessageEventHook, UseRoomSessionManagerEvent } from '../../hooks';
import { WidgetSlotView } from './views/widget-slot/WidgetSlotView';
import { WidgetSlotView } from './views/widgets/WidgetSlotView';
export const HotelView: FC<{}> = props =>
{
const [isVisible, setIsVisible] = useState(true);
@ -120,7 +120,7 @@ export const HotelView: FC<{}> = props =>
<div className="left position-absolute" style={(left && left.length) ? { backgroundImage: `url(${left})` } : {}} />
<div className="right-repeat position-absolute" style={(rightRepeat && rightRepeat.length) ? { backgroundImage: `url(${rightRepeat})` } : {}} />
<div className="right position-absolute" style={(right && right.length) ? { backgroundImage: `url(${right})` } : {}} />
{GetConfiguration("hotelview")["show.avatar"] && (
{GetConfiguration('hotelview')['show.avatar'] && (
<div className="avatar-image">
<LayoutAvatarImageView figure={userFigure} direction={2} />
</div>

8
src/components/hotel-view/views/widget-slot/WidgetSlotView.types.ts
View File

@ -1,8 +0,0 @@
import { DetailsHTMLAttributes } from 'react';
export interface WidgetSlotViewProps extends DetailsHTMLAttributes<HTMLDivElement>
{
widgetType: string;
widgetSlot: number;
widgetConf: string;
}

8
src/components/hotel-view/views/widgets/GetWidgetLayout.tsx
View File

@ -1,10 +1,16 @@
import { FC } from 'react';
import { BonusRareWidgetView } from './bonus-rare/BonusRareWidgetView';
import { GetWidgetLayoutProps } from './GetWidgetLayout.types';
import { HallOfFameWidgetView } from './hall-of-fame/HallOfFameWidgetView';
import { PromoArticleWidgetView } from './promo-article/PromoArticleWidgetView';
import { WidgetContainerView } from './widget-container/WidgetContainerView';
export interface GetWidgetLayoutProps
{
widgetType: string;
slot: number;
widgetConf: any;
}
export const GetWidgetLayout: FC<GetWidgetLayoutProps> = props =>
{
switch(props.widgetType)

6
src/components/hotel-view/views/widgets/GetWidgetLayout.types.ts
View File

@ -1,6 +0,0 @@
export interface GetWidgetLayoutProps
{
widgetType: string;
slot: number;
widgetConf: string;
}

12
src/components/hotel-view/views/widget-slot/WidgetSlotView.tsx → src/components/hotel-view/views/widgets/WidgetSlotView.tsx
View File

@ -1,6 +1,12 @@
import { FC } from 'react';
import { GetWidgetLayout } from '../widgets/GetWidgetLayout';
import { WidgetSlotViewProps } from './WidgetSlotView.types';
import { DetailsHTMLAttributes, FC } from 'react';
import { GetWidgetLayout } from './GetWidgetLayout';
export interface WidgetSlotViewProps extends DetailsHTMLAttributes<HTMLDivElement>
{
widgetType: string;
widgetSlot: number;
widgetConf: any;
}
export const WidgetSlotView: FC<WidgetSlotViewProps> = props =>
{

4
src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx
View File

@ -2,7 +2,9 @@ import { BonusRareInfoMessageEvent, GetBonusRareInfoMessageComposer } from '@nit
import { FC, useCallback, useEffect, useState } from 'react';
import { SendMessageComposer } from '../../../../../api';
import { UseMessageEventHook } from '../../../../../hooks';
import { BonusRareWidgetViewProps } from './BonusRareWidgetView.types';
export interface BonusRareWidgetViewProps
{}
export const BonusRareWidgetView: FC<BonusRareWidgetViewProps> = props =>
{

2
src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts
View File

@ -1,2 +0,0 @@
export interface BonusRareWidgetViewProps
{}

8
src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
View File

@ -1,7 +1,13 @@
import { HallOfFameEntryData } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { LocalizeFormattedNumber, LocalizeText } from '../../../../../api';
import { LayoutAvatarImageView, UserProfileIconView } from '../../../../../common';
import { HallOfFameItemViewProps } from './HallOfFameItemView.types';
export interface HallOfFameItemViewProps
{
data: HallOfFameEntryData;
level: number;
}
export const HallOfFameItemView: FC<HallOfFameItemViewProps> = props =>
{

7
src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts
View File

@ -1,7 +0,0 @@
import { HallOfFameEntryData } from '@nitrots/nitro-renderer';
export interface HallOfFameItemViewProps
{
data: HallOfFameEntryData;
level: number;
}

5
src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
View File

@ -7,7 +7,7 @@ import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types';
export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
{
const { slot = -1, conf = '' } = props;
const { slot = -1, conf = null } = props;
const [ data, setData ] = useState<CommunityGoalHallOfFameData>(null);
const onCommunityGoalHallOfFameMessageEvent = useCallback((event: CommunityGoalHallOfFameMessageEvent) =>
@ -21,7 +21,8 @@ export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
useEffect(() =>
{
SendMessageComposer(new GetCommunityGoalHallOfFameMessageComposer(conf));
const campaign: string = conf ? conf['campaign'] : '';
SendMessageComposer(new GetCommunityGoalHallOfFameMessageComposer(campaign));
}, [ conf ]);
if(!data) return null;

8
src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx
View File

@ -1,8 +1,10 @@
import { GetPromoArticlesComposer, PromoArticleData, PromoArticlesMessageEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { LocalizeText, SendMessageComposer } from '../../../../../api';
import { LocalizeText, NotificationUtilities, SendMessageComposer } from '../../../../../api';
import { UseMessageEventHook } from '../../../../../hooks';
import { PromoArticleWidgetViewProps } from './PromoArticleWidgetView.types';
export interface PromoArticleWidgetViewProps
{}
export const PromoArticleWidgetView: FC<PromoArticleWidgetViewProps> = props =>
{
@ -46,7 +48,7 @@ export const PromoArticleWidgetView: FC<PromoArticleWidgetViewProps> = props =>
<div className="col-3 d-flex flex-column h-100">
<h3 className="my-0">{articles[index].title}</h3>
<b>{ articles[index].bodyText }</b>
<button className="btn btn-sm mt-auto btn-gainsboro">{ articles[index].buttonText }</button>
<button className="btn btn-sm mt-auto btn-gainsboro" onClick={event => NotificationUtilities.openUrl(articles[index].linkContent)}>{ articles[index].buttonText }</button>
</div>
</div>
}

2
src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts
View File

@ -1,2 +0,0 @@
export interface PromoArticleWidgetViewProps
{}

34
src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx
View File

@ -1,32 +1,18 @@
import { FC, useCallback, useMemo } from 'react';
import { GetConfigurationManager, LocalizeText } from '../../../../../api';
import { WidgetContainerViewProps } from './WidgetContainerView.types';
import { FC, useCallback } from 'react';
import { GetConfigurationManager, LocalizeText, NotificationUtilities } from '../../../../../api';
export interface WidgetContainerViewProps
{
conf: any;
}
export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
{
const { conf = null } = props;
const config = useMemo(() =>
{
const config = {};
if(!conf || !conf.length) return config;
let options = conf.split(',');
options.forEach(option =>
{
let [ key, value ] = option.split(':');
if(key && value) config[key] = value;
});
return config;
}, [ conf ]);
const getOption = useCallback((key: string) =>
{
const option = config[key];
const option = conf[key];
if(!option) return null;
@ -37,7 +23,7 @@ export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
}
return option;
}, [ config ]);
}, [ conf ]);
return (
<div className="widgetcontainer widget d-flex flex-row overflow-hidden">
@ -45,7 +31,7 @@ export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
<div className="d-flex flex-column align-self-center">
<h3 className="my-0">{LocalizeText(`landing.view.${getOption('texts')}.header`)}</h3>
<i>{ LocalizeText(`landing.view.${getOption('texts')}.body`) }</i>
<button className="btn btn-sm btn-gainsboro align-self-start px-3 mt-auto">{ LocalizeText(`landing.view.${getOption('texts')}.button`) }</button>
<button className="btn btn-sm btn-gainsboro align-self-start px-3 mt-auto" onClick={event => NotificationUtilities.openUrl(getOption('btnLink'))}>{ LocalizeText(`landing.view.${getOption('texts')}.button`) }</button>
</div>
</div>
);

4
src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.types.ts
View File

@ -1,4 +0,0 @@
export interface WidgetContainerViewProps
{
conf: string;
}