Add iframe widgets (#22)

Author: albi005

packages/admin/src/types/kiosk.types.ts

@@ -2,6 +2,7 @@ import { ReactElement } from 'react';
 import {
   TbAlignLeft,
   TbBike,
+  TbBrowserPlus,
   TbBus,
   TbCalendarEvent,
   TbCloudStorm,
@@ -79,7 +80,8 @@ export type WidgetName =
   | 'bike'
   | 'weathercam'
   | 'map'
-  | 'cmschEvents';
+  | 'cmschEvents'
+  | 'iframe';
 
 export const WidgetDisplay: Record<WidgetName, { name: string; icon: ReactElement }> = {
   weather: { name: 'Időjárás', icon: TbSun({ size: 50 }) },
@@ -92,6 +94,7 @@ export const WidgetDisplay: Record<WidgetName, { name: string; icon: ReactElemen
   weathercam: { name: 'Időjárás kamera', icon: TbCloudStorm({ size: 50 }) },
   map: { name: 'Térkép', icon: TbMap({ size: 50 }) },
   cmschEvents: { name: 'CMSch események', icon: TbCalendarEvent({ size: 50 }) },
+  iframe: { name: 'Iframe', icon: TbBrowserPlus({ size: 50 }) },
 };
 
 type WidgetConfigField = {
@@ -120,6 +123,7 @@ export const WidgetConfigFields: Record<WidgetName, WidgetConfigField[]> = {
     { name: 'radius', type: 'number', label: 'Hatósugár' },
   ],
   cmschEvents: [{ name: 'baseUrl', type: 'text', label: 'Szerver Hoszt' }],
+  iframe: [{ name: 'url', type: 'text', label: 'Iframe URL címe' }],
 };
 
 export type WidgetConfigBase = {
@@ -177,6 +181,11 @@ export interface CMSchEventsConfig extends WidgetConfigBase {
   baseUrl: string;
 }
 
+export interface IframeConfig extends WidgetConfigBase {
+  name: 'iframe';
+  url: string;
+}
+
 export type GridSettings = {
   column: Axis;
   row: Axis;
@@ -199,4 +208,5 @@ export type WidgetConfig =
   | BikeConfig
   | WeatherCamConfig
   | MapConfig
-  | CMSchEventsConfig;
+  | CMSchEventsConfig
+  | IframeConfig;

packages/backend/Dockerfile

@@ -1,5 +1,5 @@
 # Use the official Node.js LTS (Long Term Support) image as the base image
-FROM node:20-alpine
+FROM node:24-alpine
 
 # Set the working directory inside the container
 WORKDIR /usr/src/app

packages/backend/src/types/kiosk.types.ts

@@ -63,7 +63,8 @@ export type WidgetName =
   | 'bike'
   | 'weathercam'
   | 'map'
-  | 'cmschEvents';
+  | 'cmschEvents'
+  | 'iframe';
 
 export type WidgetConfigBase = {
   name: WidgetName;
@@ -121,6 +122,11 @@ export interface CMSchEventsConfig extends WidgetConfigBase {
   baseUrl: string;
 }
 
+export interface IframeConfig extends WidgetConfigBase {
+  name: 'iframe';
+  url: string;
+}
+
 export type GridSettings = {
   column: Axis;
   row: Axis;
@@ -141,7 +147,8 @@ export type WidgetConfig =
   | BikeConfig
   | WeatherCamConfig
   | MapConfig
-  | CMSchEventsConfig;
+  | CMSchEventsConfig
+  | IframeConfig;
 
 export enum KioskRoles {
   VISITOR,

packages/client/src/components/widgets/IframeWidget.tsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+import { Widget } from '@/layout/Widget';
+import { IframeConfig } from '@/types/widget.type.ts';
+import { useWidgetConfig } from '@/utils/useWidgetConfig.ts';
+
+export function IframeWidget() {
+  const config = useWidgetConfig<IframeConfig>('iframe');
+  return (
+    <Widget grid={config.grid} style={{ padding: 0 }}>
+      <StyledIframe src={config.url} title='Iframe widget' />
+    </Widget>
+  );
+}
+
+const StyledIframe = styled.iframe`
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: inherit;
+`;

packages/client/src/layout/WidgetDistributor.tsx

@@ -1,4 +1,5 @@
 import { CmschEventsWidget } from '@/components/widgets/CmschEventsWidget.tsx';
+import { IframeWidget } from '@/components/widgets/IframeWidget.tsx';
 
 import { BikeWidget } from '../components/widgets/BikeWidget';
 import { Departures } from '../components/widgets/departures/Departures';
@@ -37,6 +38,8 @@ export function WidgetDistributor({ config }: WidgetDistributorProps) {
       return <MapWidget />;
     case 'cmschEvents':
       return <CmschEventsWidget />;
+    case 'iframe':
+      return <IframeWidget />;
     default:
       return null;
   }

packages/client/src/types/widget.type.ts

@@ -8,7 +8,8 @@ export type WidgetName =
   | 'bike'
   | 'weathercam'
   | 'map'
-  | 'cmschEvents';
+  | 'cmschEvents'
+  | 'iframe';
 
 export type WidgetConfigBase = {
   name: WidgetName;
@@ -65,6 +66,11 @@ export interface CMSchEventsConfig extends WidgetConfigBase {
   baseUrl: string;
 }
 
+export interface IframeConfig extends WidgetConfigBase {
+  name: 'iframe';
+  url: string;
+}
+
 export type GridSettings = {
   column: Axis;
   row: Axis;
@@ -85,4 +91,5 @@ export type WidgetConfig =
   | BikeConfig
   | WeatherCamConfig
   | MapConfig
-  | CMSchEventsConfig;
+  | CMSchEventsConfig
+  | IframeConfig;