started hotelview widgets

src/views/hotel-view/HotelView.scss

@@ -73,4 +73,58 @@
         background-repeat: no-repeat;
 		background-position: right top;
 	}
+
+	.widget-slot {
+		position:absolute;
+		z-index: 4;
+		overflow: hidden;
+	}
+
+	.slot-0 {
+		top: 5px;
+		width: 600px;
+		height: 100px;
+	}
+
+	.slot-1 {
+		top: 100px;
+		left: 100px;
+		width: 100px;
+		height:100px;
+	}
+
+	.slot-2 {
+		top: 300px;
+		left: 100px;
+		width: 100px;
+		height: 100px;
+	}
+
+	.slot-3 {
+		top: 100px;
+		left: 600px;
+		width: 100px;
+		height: 100px;
+	}
+
+	.slot-4 {
+		top: 300px;
+		left: 600px;
+		width: 100px;
+		height: 100px;
+	}
+
+	.slot-5 {
+		bottom: 5px;
+		width: 600px;
+		height: 100px;
+	}
+
+	.slot-6 {
+		width: 100px;
+		height: 600px;
+		right: 5px;
+	}
 }
+
+@import './views/widgets/promo-article/PromoArticleWidgetView.scss';

src/views/hotel-view/HotelView.tsx

@@ -3,10 +3,12 @@ import { FC, useCallback, useState } from 'react';
 import { GetConfiguration } from '../../api';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { HotelViewProps } from './HotelView.types';
+import { WidgetSlotView } from './views/widget-slot/WidgetSlotView';
 
 export const HotelView: FC<HotelViewProps> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(true);
+    const widgetSlotCount = 7;
 
     const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
     {
@@ -36,6 +38,8 @@ export const HotelView: FC<HotelViewProps> = props =>
 
     return (
         <div className="nitro-hotel-view" style={ (backgroundColor && backgroundColor) ? { background: backgroundColor } : {} }>
+            {Array.from(Array(widgetSlotCount)).map((x, index) => <WidgetSlotView slot={index} 
+            widgetType={GetConfiguration('hotelview')['widgets']['slot.' + index]} />)}
             <div className="background position-absolute" style={ (background && background.length) ? { backgroundImage: `url(${ background })` } : {} } />
             <div className="sun position-absolute" style={ (sun && sun.length) ? { backgroundImage: `url(${ sun })` } : {} } />
             <div className="drape position-absolute" style={ (drape && drape.length) ? { backgroundImage: `url(${ drape })` } : {} } />

src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { GetWidgetLayout } from '../widgets/GetWidgetLayout';
+import { WidgetSlotViewProps } from './WidgetSlotView.types';
+
+export const WidgetSlotView: FC<WidgetSlotViewProps> = props =>
+{
+  return (
+    <div className={"widget-slot slot-" + props.slot}>
+      <GetWidgetLayout widgetType={props.widgetType} />
+    </div>
+  );
+}

src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts

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

src/views/hotel-view/views/widgets/GetWidgetLayout.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { GetWidgetLayoutProps } from './GetWidgetLayout.types';
+import { HallOfFameWidgetView } from './hall-of-fame/HallOfFameWidgetView';
+import { PromoArticleWidgetView } from './promo-article/PromoArticleWidgetView';
+
+export const GetWidgetLayout: FC<GetWidgetLayoutProps> = props =>
+{
+  switch(props.widgetType)
+  {
+    case "news":
+      return <PromoArticleWidgetView/>;
+    case "hof":
+      return <HallOfFameWidgetView/>;
+    default:
+      return null;
+  }
+}

src/views/hotel-view/views/widgets/GetWidgetLayout.types.ts

@@ -0,0 +1,4 @@
+export interface GetWidgetLayoutProps
+{
+  widgetType: string;
+}

src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types';
+
+export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
+{
+  return (
+    <div className="hall-of-fame widget"></div>
+  );
+}

src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts

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

src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss

@@ -0,0 +1,4 @@
+.promo-article {
+  top: 50px;
+  left: 50px;
+}

src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx

@@ -0,0 +1,49 @@
+import { GetPromoArticlesComposer, PromoArticleData, PromoArticlesMessageEvent } from 'nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { Carousel } from 'react-bootstrap';
+import { CreateMessageHook, SendMessageHook } from '../../../../../hooks';
+import { PromoArticleWidgetViewProps } from './PromoArticleWidgetView.types';
+
+export const PromoArticleWidgetView: FC<PromoArticleWidgetViewProps> = props =>
+{
+  const [ articles, setArticles ] = useState<PromoArticleData[]>(null);
+  const [index, setIndex] = useState(0);
+
+  const handleSelect = (selectedIndex, e) => 
+  {
+    setIndex(selectedIndex);
+  };
+  
+  useEffect(() =>
+  {
+    SendMessageHook(new GetPromoArticlesComposer());
+  }, []);
+
+  const onPromoArticlesMessageEvent = useCallback((event: PromoArticlesMessageEvent) =>
+  {
+    const parser = event.getParser();
+    setArticles(parser.articles);
+  }, []);
+
+  CreateMessageHook(PromoArticlesMessageEvent, onPromoArticlesMessageEvent);
+
+  return (
+    <div className="promo-article widget">
+      <Carousel activeIndex={index} onSelect={handleSelect}>
+        { articles && (articles.length > 0) && articles.map(article => 
+            <Carousel.Item>
+        <img
+          className="d-block"
+          src= {article.imageUrl}
+          alt= {article.title}
+        />
+        <Carousel.Caption>
+          <h3>{article.title}</h3>
+          <p>{article.bodyText}</p>
+        </Carousel.Caption>
+      </Carousel.Item>
+        ) }
+      </Carousel>
+    </div>
+  );
+}

src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts

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