duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
DuckieTM 2024-04-02 20:46:23 +02:00
parent fb6272379c
commit 826ca22d9f
23 changed files with 0 additions and 3339 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2158
src/components/hotel-view1/HotelView.scss
View File

File diff suppressed because it is too large Load Diff

46
src/components/hotel-view1/HotelView.tsx
View File

@ -1,46 +0,0 @@
import { RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useState, useCallback } from 'react';
import { useRoomSessionManagerEvent, useSessionInfo } from '../../hooks';
import { HotelDay } from './views/widgets/hoteldayview/HotelDay';
import { HotelEvening } from './views/widgets/hoteldayview/HotelEvening';
import { HotelMorning } from './views/widgets/hoteldayview/HotelMorning';
import { HotelNight } from './views/widgets/hoteldayview/HotelNight';
import { HotelSunset } from './views/widgets/hoteldayview/HotelSunset';
import { WidgetView } from './WidgetView';
const widgetSlotCount = 7;
export const HotelView: FC<{}> = () => {
const [isVisible, setIsVisible] = useState(true);
const { userFigure = null } = useSessionInfo();
const now = new Date();
const currentHour = now.getHours();
const isMorning = currentHour > 5 && currentHour <= 9;
const isDay = currentHour > 9 && currentHour <= 16;
const isSunset = currentHour > 16 && currentHour <= 19;
const isEvening = currentHour > 19 && currentHour <= 23;
const isNight = currentHour > 23 || currentHour <= 5;
useRoomSessionManagerEvent<RoomSessionEvent>(
[RoomSessionEvent.CREATED, RoomSessionEvent.ENDED],
event => {
setIsVisible(
event.type === RoomSessionEvent.CREATED ? false : event.openLandingView
);
}
);
if (!isVisible) return null;
return (
<div>
<WidgetView />
{isMorning && <HotelMorning />}
{isDay && <HotelDay />}
{isSunset && <HotelSunset />}
{isEvening && <HotelEvening />}
{isNight && <HotelNight />}
</div>
);
};

58
src/components/hotel-view1/WidgetView.tsx
View File

@ -1,58 +0,0 @@
import { GetConfiguration, NitroConfiguration, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useState, useCallback } from 'react';
import { GetConfigurationValue } from '../../api';
import { useNitroEvent, useSessionInfo } from '../../hooks';
import { WidgetSlotView } from './views/widgets/WidgetSlotView';
const widgetSlotCount = 7;
export const WidgetView: FC<{}> = () => {
const [isVisible, setIsVisible] = useState(true);
useNitroEvent<RoomSessionEvent>(
[RoomSessionEvent.CREATED, RoomSessionEvent.ENDED],
(event) => {
switch (event.type) {
case RoomSessionEvent.CREATED:
setIsVisible(false);
return;
case RoomSessionEvent.ENDED:
setIsVisible(event.openLandingView);
return;
}
}
);
if (!isVisible) return null;
const assetUrl = GetConfiguration<string>('asset.url');
const backgroundColor = GetConfigurationValue('hotelview')['images']['background.colour'];
const renderWidgetSlot = (slot: number) => (
<WidgetSlotView
key={slot}
widgetSlot={slot}
widgetType={GetConfigurationValue('hotelview')['widgets'][`slot.${slot}.widget`]}
widgetConf={GetConfigurationValue('hotelview')['widgets'][`slot.${slot}.conf`]}
className={slot === 6 ? 'mt-auto' : slot % 2 === 0 ? 'col-5' : 'col-7'}
/>
);
const widgetSlots = [1, 2, 3, 4, 5, 6, 7].map((slot) => renderWidgetSlot(slot));
return (
<div className="nitro-hotel-view" style={backgroundColor ? { background: backgroundColor } : {}}>
<div className="container h-100 py-3 overflow-hidden landing-widgets">
<div className="row h-100">
<div className="col-9 h-100 d-flex flex-column">
{widgetSlots.slice(0, 6)}
</div>
<div className="col-3 h-100">
{widgetSlots[6]}
</div>
</div>
</div>
</div>
);
};

29
src/components/hotel-view1/views/widgets/GetWidgetLayout.tsx
View File

@ -1,29 +0,0 @@
import { FC } from 'react';
import { BonusRareWidgetView } from './bonus-rare/BonusRareWidgetView';
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)
{
case 'promoarticle':
return <PromoArticleWidgetView />;
case 'achievementcompetition_hall_of_fame':
return <HallOfFameWidgetView slot={ props.slot } conf={ props.widgetConf } />;
case 'bonusrare':
return <BonusRareWidgetView />;
case 'widgetcontainer':
return <WidgetContainerView conf={ props.widgetConf } />
default:
return null;
}
}

4
src/components/hotel-view1/views/widgets/HotelViewWidgets.scss
View File

@ -1,4 +0,0 @@
@import './bonus-rare/BonusRareWidgetView';
@import './hall-of-fame/HallOfFameWidgetView';
@import './promo-article/PromoArticleWidgetView';
@import './widget-container/WidgetContainerView';

20
src/components/hotel-view1/views/widgets/WidgetSlotView.tsx
View File

@ -1,20 +0,0 @@
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 =>
{
const { widgetType = null, widgetSlot = 0, widgetConf = null, className= '', ...rest } = props;
return (
<div className={ `widget-slot slot-${ widgetSlot } ${ (className || '') }` } { ...rest }>
<GetWidgetLayout widgetType={ widgetType } slot={ widgetSlot } widgetConf={ widgetConf } />
</div>
);
}

10
src/components/hotel-view1/views/widgets/bonus-rare/BonusRareWidgetView.scss
View File

@ -1,10 +0,0 @@
.bonus-rare {
height: 100px;
justify-content: center;
.bonus-bar-container {
height: 30px;
width: 300px;
border: 2px ridge #e2e2e2;
}
}

42
src/components/hotel-view1/views/widgets/bonus-rare/BonusRareWidgetView.tsx
View File

@ -1,42 +0,0 @@
import { BonusRareInfoMessageEvent, GetBonusRareInfoMessageComposer } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { SendMessageComposer } from '../../../../../api';
import { useMessageEvent } from '../../../../../hooks';
export interface BonusRareWidgetViewProps
{}
export const BonusRareWidgetView: FC<BonusRareWidgetViewProps> = props =>
{
const [ productType, setProductType ] = useState<string>(null);
const [ productClassId, setProductClassId ] = useState<number>(null);
const [ totalCoinsForBonus, setTotalCoinsForBonus ] = useState<number>(null);
const [ coinsStillRequiredToBuy, setCoinsStillRequiredToBuy ] = useState<number>(null);
useMessageEvent<BonusRareInfoMessageEvent>(BonusRareInfoMessageEvent, event =>
{
const parser = event.getParser();
setProductType(parser.productType);
setProductClassId(parser.productClassId);
setTotalCoinsForBonus(parser.totalCoinsForBonus);
setCoinsStillRequiredToBuy(parser.coinsStillRequiredToBuy);
});
useEffect(() =>
{
SendMessageComposer(new GetBonusRareInfoMessageComposer());
}, []);
if(!productType) return null;
return (
<div className="bonus-rare widget d-flex">
{ productType }
<div className="bg-light-dark rounded overflow-hidden position-relative bonus-bar-container">
<div className="d-flex justify-content-center align-items-center w-100 h-100 position-absolute small top-0">{ (totalCoinsForBonus - coinsStillRequiredToBuy) + '/' + totalCoinsForBonus }</div>
<div className="small bg-info rounded position-absolute top-0 h-100" style={ { width: ((totalCoinsForBonus - coinsStillRequiredToBuy) / totalCoinsForBonus) * 100 + '%' } }></div>
</div>
</div>
);
}

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

@ -1,27 +0,0 @@
import { HallOfFameEntryData } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { LocalizeFormattedNumber, LocalizeText } from '../../../../../api';
import { LayoutAvatarImageView, UserProfileIconView } from '../../../../../common';
export interface HallOfFameItemViewProps
{
data: HallOfFameEntryData;
level: number;
}
export const HallOfFameItemView: FC<HallOfFameItemViewProps> = props =>
{
const { data = null, level = 0 } = props;
return (
<div className="hof-user-container">
<div className="hof-tooltip">
<div className="hof-header">
{ level }. { data.userName } <UserProfileIconView userId={ data.userId } />
</div>
<div className="small text-center text-white">{ LocalizeText('landing.view.competition.hof.points', [ 'points' ], [ LocalizeFormattedNumber(data.currentScore).toString() ]) }</div>
</div>
<LayoutAvatarImageView figure={ data.figure } direction={ 2 } />
</div>
);
}

70
src/components/hotel-view1/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
View File

@ -1,70 +0,0 @@
.hall-of-fame {
background-color: rgba($black,.3);
border-radius: $border-radius;
justify-content: center;
.hof-user-container {
display:inline-flex;
height: 100%;
position: relative;
&:hover {
.hof-tooltip {
display: block;
}
}
.hof-tooltip {
position: absolute;
display: none;
width: 125px;
max-width: 125px;
padding: 2px;
background-color: $gable-green;
border: 2px solid rgba($white, 0.5);
border-radius: $border-radius;
font-size: $font-size-sm;
z-index: $context-menu-zindex;
pointer-events: all;
left: -15px;
bottom: calc(100% - 10px);
.hof-header {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
background-color: $william;
color: $white;
min-width: 117px;
height: 25px;
max-height: 25px;
font-size: 16px;
margin-bottom: 2px;
}
&:after {
content: '';
position: absolute;
bottom: -7px;
left: 0;
right: 0;
margin: auto;
height: 10px;
width: 10px;
transform: rotate(45deg);
border-color: transparent rgba($white, 0.5) rgba($white, 0.5) transparent;
border-style: solid;
border-width: 5px;
}
}
.avatar-image {
position:relative;
display:inline;
left:0;
top:0;
z-index: 1;
}
}
}

37
src/components/hotel-view1/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
View File

@ -1,37 +0,0 @@
import { CommunityGoalHallOfFameData, CommunityGoalHallOfFameMessageEvent, GetCommunityGoalHallOfFameMessageComposer } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { SendMessageComposer } from '../../../../../api';
import { useMessageEvent } from '../../../../../hooks';
import { HallOfFameItemView } from '../hall-of-fame-item/HallOfFameItemView';
import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types';
export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
{
const { slot = -1, conf = null } = props;
const [ data, setData ] = useState<CommunityGoalHallOfFameData>(null);
useMessageEvent<CommunityGoalHallOfFameMessageEvent>(CommunityGoalHallOfFameMessageEvent, event =>
{
const parser = event.getParser();
setData(parser.data);
});
useEffect(() =>
{
const campaign: string = conf ? conf['campaign'] : '';
SendMessageComposer(new GetCommunityGoalHallOfFameMessageComposer(campaign));
}, [ conf ]);
if(!data) return null;
return (
<div className="hall-of-fame d-flex">
{ data.hof && (data.hof.length > 0) && data.hof.map((entry, index) =>
{
return <HallOfFameItemView key={ index } data={ entry } level={ (index + 1) } />;
}
) }
</div>
);
}

5
src/components/hotel-view1/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts
View File

@ -1,5 +0,0 @@
export interface HallOfFameWidgetViewProps
{
slot: number;
conf: string;
}

38
src/components/hotel-view1/views/widgets/hoteldayview/HotelDay.tsx
View File

@ -1,38 +0,0 @@
import { FC } from "react";
import { GetConfigurationValue } from "../../../../../api";
import { RoomWidgetViewNight } from "./../../../views/widgets/rooms/RoomWidgetViewNight";
import { RoomWidgetView } from "./../../../views/widgets/rooms/RoomWidgetView";
export const HotelDay: FC<{}> = () => {
const backgroundColor = GetConfigurationValue('hotelview')['images']['background.colour'];
const now = new Date();
const hour = now.getHours();
const minutes = now.getMinutes();
const backgroundStyle = backgroundColor ? { background: backgroundColor } : {};
const renderView = (elements: React.ReactNode) => (
<div className="nitro-hotel-view" style={backgroundStyle}>
{elements}
</div>
);
return (
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue position-relative" />
<div className="back-e-alt-ii position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
</div>
</div>
</>
)
);
};

71
src/components/hotel-view1/views/widgets/hoteldayview/HotelEvening.tsx
View File

@ -1,71 +0,0 @@
import { FC, useEffect, useState } from 'react';
import { GetConfigurationValue } from "../../../../../api";
import { RoomWidgetViewNight } from '../rooms/RoomWidgetViewNight';
export const HotelEvening: FC<{}> = (props) => {
const backgroundColor = GetConfigurationValue('hotelview')['images']['background.colour'];
const [show, setShow] = useState(false);
const [landing, setLanding] = useState(false);
useEffect(() => {
setTimeout(() => setShow(true), 7000);
setTimeout(() => setLanding(true), 0);
}, []);
const now = new Date();
const currentTime = now.getHours() * 60 + now.getMinutes();
const timeRanges = [
{ start: 18 * 60, end: 18 * 60 + 30 },
{ start: 19 * 60, end: 19 * 60 + 30 },
{ start: 20 * 60, end: 20 * 60 + 30 },
{ start: 21 * 60, end: 21 * 60 + 30 },
{ start: 22 * 60, end: 22 * 60 + 30 },
{ start: 23 * 60, end: 23 * 60 + 30 },
];
const shouldRender = timeRanges.some((range) => currentTime >= range.start && currentTime <= range.end);
if (shouldRender) {
return (
<div className="nitro-hotel-view" style={(backgroundColor && backgroundColor) ? { background: backgroundColor } : {}}>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue-night position-relative" />
<div className="back-c-alt position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-night position-relative" />
<RoomWidgetViewNight />
<div className="light-i position-absolute" />
<div className="door position-absolute" />
<div className="door-b position-absolute" />
</div>
</div>
</div>
);
}
return (
<div className="nitro-hotel-view" style={(backgroundColor && backgroundColor) ? { background: backgroundColor } : {}}>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue-night position-relative" />
<div className="back-c-alt position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-night position-relative" />
<RoomWidgetViewNight />
<div className="light-i position-absolute" />
<div className="door position-absolute" />
<div className="door-b position-absolute" />
</div>
</div>
</div>
);
};

248
src/components/hotel-view1/views/widgets/hoteldayview/HotelMorning.tsx
View File

@ -1,248 +0,0 @@
import { FC } from "react";
import { GetConfigurationValue } from "../../../../../api";
import { RoomWidgetViewNight } from "./../../../views/widgets/rooms/RoomWidgetViewNight";
import { RoomWidgetView } from "./../../../views/widgets/rooms/RoomWidgetView";
export const HotelMorning: FC<{}> = () => {
const backgroundColor = GetConfigurationValue('hotelview')['images']['background.colour'];
const now = new Date();
const hour = now.getHours();
const minutes = now.getMinutes();
const backgroundStyle = backgroundColor && backgroundColor ? { background: backgroundColor } : {};
const renderDefaultView = () => (
<div className="nitro-hotel-view" style={backgroundStyle}>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue position-relative" />
<div className="back-e-alt-ii position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
</div>
</div>
</div>
);
const renderView = (elements: React.ReactNode) => (
<div className="nitro-hotel-view" style={backgroundStyle}>
{elements}
</div>
);
return (
<>
{hour === 6 &&
minutes <= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue-night position-relative" />
<div className="back-a position-absolute" />
<div className="back-a position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-night position-relative" />
<RoomWidgetViewNight />
<div className="light-a position-absolute" />
<div className="light-a position-absolute" />
</div>
</div>
</>,
)}
{hour === 6 &&
minutes >= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue-night position-relative" />
<div className="back-a-alt position-absolute" />
<div className="back-b position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="front-a position-absolute" />
<div className="light-a position-absolute" />
</div>
</div>
</>,
)}
{hour === 7 &&
minutes <= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue-night position-relative" />
<div className="back-a-alt position-absolute" />
<div className="back-c-alt position-absolute" />
<div className="back-b position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="front-c position-absolute" />
<div className="front-b position-absolute" />
<div className="light-b position-absolute" />
</div>
</div>
</>,
)}
{hour === 7 &&
minutes >= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue position-relative" />
<div className="back-d position-absolute" />
<div className="back-c position-absolute" />
<div className="back-b position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="front-c position-absolute" />
<div className="front-b position-absolute" />
<div className="light-d position-absolute" />
</div>
</div>
</>,
)}
{hour === 8 &&
minutes <= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue position-relative" />
<div className="back-d position-absolute" />
<div className="back-e-alt-ii position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="front-c position-absolute" />
<div className="front-c position-absolute" />
<div className="front-c position-absolute" />
<div className="front-c position-absolute" />
<div className="light-e position-absolute" />
</div>
</div>
</>,
)}
{hour === 8 &&
minutes >= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue position-relative" />
<div className="back-e-alt-iii position-absolute" />
<div className="back-d position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="front-c position-absolute" />
<div className="front-c position-absolute" />
<div className="front-c position-absolute" />
<div className="light-f position-absolute" />
</div>
</div>
</>,
)}
{hour === 9 &&
minutes <= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue position-relative" />
<div className="back-e-alt-iv position-absolute" />
<div className="back-d position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="front-d position-absolute" />
<div className="light-gg-alt position-absolute" />
<div className="light-g position-absolute" />
<div className="light-g position-absolute" />
</div>
</div>
</>,
)}
{hour === 9 &&
minutes >= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue position-relative" />
<div className="back-e position-absolute" />
<div className="back-e-alt-v position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="light-gg-alt position-absolute" />
<div className="light-g position-absolute" />
</div>
</div>
</>,
)}
{hour === 10 &&
minutes <= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue position-relative" />
<div className="back-e-alt-ii position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="light-i position-absolute" />
</div>
</div>
</>,
)}
</>
);
};

36
src/components/hotel-view1/views/widgets/hoteldayview/HotelNight.tsx
View File

@ -1,36 +0,0 @@
import { FC, useEffect, useState } from 'react';
import { GetConfigurationValue } from "../../../../../api";
import { RoomWidgetView } from '../rooms/RoomWidgetView';
import { RoomWidgetViewNight } from '../rooms/RoomWidgetViewNight';
export const HotelNight: FC<{}> = props =>
{
const [show, setShow] = useState(false)
const backgroundColor = GetConfigurationValue('hotelview')['images']['background.colour'];
const now = new Date();
useEffect(() => {
setTimeout(() => setShow(true), 15000);
}, []);
return (
<div className="nitro-hotel-view" style={ (backgroundColor && backgroundColor) ? { background: backgroundColor } : {} }>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue-night position-relative"/>
<div className="back-c-alt position-absolute"/>
</div>
</div>
<div className="drape position-absolute"/>
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-night position-relative"/>
<RoomWidgetViewNight/>
<div className="light-i position-absolute"/>
<div className="door position-absolute"/><
/div>
</div>
</div>
);
}

239
src/components/hotel-view1/views/widgets/hoteldayview/HotelSunset.tsx
View File

@ -1,239 +0,0 @@
import { FC } from "react";
import { GetConfigurationValue } from "../../../../../api";
import { RoomWidgetViewNight } from "./../../../views/widgets/rooms/RoomWidgetViewNight";
import { RoomWidgetView } from "./../../../views/widgets/rooms/RoomWidgetView";
export const HotelSunset: FC<{}> = () => {
const backgroundColor = GetConfigurationValue('hotelview')['images']['background.colour'];
const now = new Date();
const hour = now.getHours();
const minutes = now.getMinutes();
const backgroundStyle = backgroundColor && backgroundColor ? { background: backgroundColor } : {};
const renderView = (elements: React.ReactNode) => (
<div className="nitro-hotel-view" style={backgroundStyle}>
{elements}
</div>
);
return (
<>
{hour === 16 &&
minutes <= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue-af-1 position-relative" />
<div className="back-f-alt position-absolute" />
<div className="back-f position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="front-j position-absolute" />
<div className="light-j position-absolute" />
<div className="light-j position-absolute" />
</div>
</div>
</>,
)}
{hour === 16 &&
minutes >= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue-af-2 position-relative" />
<div className="back-g-alt position-absolute" />
<div className="back-g position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="light-l position-absolute" />
<div className="light-l-alt position-absolute" />
</div>
</div>
</>,
)}
{hour === 17 &&
minutes <= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue-af-3 position-relative" />
<div className="back-h-alt position-absolute" />
<div className="back-h position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="light-m position-absolute" />
<div className="light-m-alt position-absolute" />
</div>
</div>
</>,
)}
{hour === 17 &&
minutes >= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue-af-4 position-relative" />
<div className="back-h position-absolute" />
</div>
</div>
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="light-n position-absolute" />
<div className="light-n-alt position-absolute" />
</div>
</div>
</>,
)}
{hour === 18 &&
minutes <= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue-af-5 position-relative" />
<div className="back-h position-absolute" />
<div className="back-n position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="front-k position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="light-n position-absolute" />
<div className="light-n-alt-iii position-absolute" />
</div>
</div>
</>,
)}
{hour === 18 &&
minutes >= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue-af-6 position-relative" />
<div className="back-h position-absolute" />
<div className="back-n position-absolute" />
<div className="back-k-final position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="front-k position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="light-o position-absolute" />
<div className="light-o-alt position-absolute" />
<div className="light-o-alt-ii position-absolute" />
</div>
</div>
</>,
)}
{hour === 19 &&
minutes <= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue-night position-relative" />
<div className="back-c-alt position-absolute" />
<div className="back-c-alt position-absolute" />
<div className="back-h position-absolute" />
<div className="back-k-alt position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="front-m position-absolute" />
<div className="front-m position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="front-j position-absolute" />
<div className="light-p position-absolute" />
<div className="light-p-alt position-absolute" />
<div className="light-p-alt-ii position-absolute" />
</div>
</div>
</>,
)}
{hour === 19 &&
minutes >= 30 &&
renderView(
<>
<div className="left position-absolute">
<div className="hotelview-back position-relative">
<div className="stretch-blue-night position-relative" />
<div className="back-e position-absolute" />
<div className="back-k-final position-absolute" />
<div className="back-l position-absolute" />
<div className="back-l position-absolute" />
</div>
</div>
<div className="drape position-absolute" />
<div className="left position-absolute">
<div className="hotelview position-relative">
<div className="hotelview-orange position-relative" />
<RoomWidgetView />
<div className="front-a position-absolute" />
<div className="light-q position-absolute" />
<div className="light-q-alt-ii position-absolute" />
</div>
</div>
</>,
)}
</>
);
};

27
src/components/hotel-view1/views/widgets/promo-article/PromoArticleWidgetView.scss
View File

@ -1,27 +0,0 @@
.promo-articles {
width: 100%;
height: 100%;
.promo-articles-bullet {
border-radius: 50%;
background-color: $white;
border: 1px solid $white;
height: 13px;
width: 13px;
margin-right: 3px;
&.promo-articles-bullet-active {
background: $black;
}
}
.promo-article {
.promo-article-image {
width: 150px;
height: 150px;
margin-right: 10px;
background-repeat: no-repeat;
background-position: top center;
}
}
}

46
src/components/hotel-view1/views/widgets/promo-article/PromoArticleWidgetView.tsx
View File

@ -1,46 +0,0 @@
import { GetPromoArticlesComposer, PromoArticleData, PromoArticlesMessageEvent } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { LocalizeText, OpenUrl, SendMessageComposer } from '../../../../../api';
import { useMessageEvent } from '../../../../../hooks';
export const PromoArticleWidgetView: FC<{}> = props =>
{
const [ articles, setArticles ] = useState<PromoArticleData[]>(null);
const [ index, setIndex ] = useState(0);
useMessageEvent<PromoArticlesMessageEvent>(PromoArticlesMessageEvent, event =>
{
const parser = event.getParser();
setArticles(parser.articles);
});
useEffect(() =>
{
SendMessageComposer(new GetPromoArticlesComposer());
}, []);
if(!articles) return null;
return (
<div className="promo-articles widget mb-2">
<div className="d-flex flex-row align-items-center w-100 mb-1">
<small className="flex-shrink-0 pe-1">{ LocalizeText('landing.view.promo.article.header') }</small>
<hr className="w-100 my-0"/>
</div>
<div className="d-flex flex-row mb-1">
{ articles && (articles.length > 0) && articles.map((article, ind) =>
<div className={ 'promo-articles-bullet cursor-pointer ' + (article === articles[index] ? 'promo-articles-bullet-active' : '') } key={ article.id } onClick={ event => setIndex(ind) } />
) }
</div>
{ articles && articles[index] &&
<div className="promo-article d-flex flex-row row mx-0">
<div className="promo-article-image" style={ { backgroundImage: `url(${ articles[index].imageUrl })` } }/>
<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" onClick={ event => OpenUrl(articles[index].linkContent) }>{ articles[index].buttonText }</button>
</div>
</div> }
</div>
);
}

40
src/components/hotel-view1/views/widgets/rooms/RoomWidgetView.tsx
View File

@ -1,40 +0,0 @@
import { CreateLinkEvent, GetConfiguration } from '@nitrots/nitro-renderer';
import React, { FC } from 'react';
import { Base, Flex } from '../../../../../common';
interface Room {
id: string;
className: string;
}
const rooms: Room[] = [
{ id: 'room.rooftop', className: 'rooftop-orange' },
{ id: 'room.rooftop.pool', className: 'rooftop-pool-orange' },
{ id: 'room.pool', className: 'pool-orange' },
{ id: 'room.picnic', className: 'picnic-orange' },
{ id: 'room.peaceful', className: 'peaceful-orange' },
{ id: 'room.infobus', className: 'infobus-orange' },
{ id: 'room.lobby', className: 'lobby' },
];
export const RoomWidgetView: FC<{}> = () => {
const hotelViewConfig = GetConfiguration('hotelview');
const handleRoomClick = (roomId: string) => {
CreateLinkEvent(`navigator/goto/${roomId}`);
};
return (
<Flex>
{rooms.map((room) => (
<Base
key={room.id}
className={`position-absolute ${room.className}`}
onClick={() => handleRoomClick(hotelViewConfig[room.id])}
>
<i className="active-arrow arrow" />
</Base>
))}
</Flex>
);
};

40
src/components/hotel-view1/views/widgets/rooms/RoomWidgetViewNight.tsx
View File

@ -1,40 +0,0 @@
import { CreateLinkEvent, GetConfiguration } from '@nitrots/nitro-renderer';
import React, { FC } from 'react';
import { Base, Flex } from '../../../../../common';
interface Room {
id: string;
className: string;
}
const rooms: Room[] = [
{ id: 'room.rooftop', className: 'rooftop-night' },
{ id: 'room.rooftop.pool', className: 'rooftop-pool-night' },
{ id: 'room.picnic', className: 'picnic-night' },
{ id: 'room.peaceful', className: 'peaceful-night' },
{ id: 'room.pool', className: 'pool-night' },
{ id: 'room.infobus', className: 'infobus-night' },
{ id: 'room.lobby', className: 'lobby-night' },
];
export const RoomWidgetViewNight: FC<{}> = () => {
const hotelViewConfig = GetConfiguration('hotelview');
const handleRoomClick = (roomId: string) => {
CreateLinkEvent(`navigator/goto/${roomId}`);
};
return (
<Flex>
{rooms.map((room) => (
<Base
key={room.id}
className={`position-absolute ${room.className}`}
onClick={() => handleRoomClick(hotelViewConfig[room.id])}
>
<i className="active-arrow arrow" />
</Base>
))}
</Flex>
);
};

9
src/components/hotel-view1/views/widgets/widget-container/WidgetContainerView.scss
View File

@ -1,9 +0,0 @@
.widgetcontainer {
.widgetcontainer-image {
width: 150px;
height: 150px;
margin-right: 10px;
background-repeat: no-repeat;
background-position: top center;
}
}

39
src/components/hotel-view1/views/widgets/widget-container/WidgetContainerView.tsx
View File

@ -1,39 +0,0 @@
import { GetConfiguration } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { LocalizeText, OpenUrl } from '../../../../../api';
export interface WidgetContainerViewProps
{
conf: any;
}
export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
{
const { conf = null } = props;
const getOption = (key: string) =>
{
const option = conf[key];
if(!option) return null;
switch(key)
{
case 'image':
return GetConfiguration().interpolate(option);
}
return option;
}
return (
<div className="widgetcontainer widget d-flex flex-row overflow-hidden">
<div className="widgetcontainer-image flex-shrink-0" style={ { backgroundImage: `url(${ getOption('image') })` } } />
<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" onClick={ event => OpenUrl(getOption('btnLink')) }>{ LocalizeText(`landing.view.${ getOption('texts') }.button`) }</button>
</div>
</div>
);
}