From f68883668f22ae58ad6ef4ca3c6571fab6d0df3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1lint=20Berente?= <30603208+berenteb@users.noreply.github.com> Date: Sun, 24 Mar 2024 13:16:56 +0100 Subject: [PATCH] chore: removed console logs --- packages/admin/src/types/kiosk.types.ts | 13 ++++- packages/backend/src/types/kiosk.types.ts | 9 ++- .../client/src/components/ImageContainer.tsx | 11 ++++ .../src/components/widgets/ImageWidget.tsx | 11 +--- .../components/widgets/WeatherCamWidget.tsx | 56 +++++++++++++++++++ .../client/src/layout/WidgetDistributor.tsx | 3 + packages/client/src/types/widget.type.ts | 9 ++- 7 files changed, 95 insertions(+), 17 deletions(-) create mode 100644 packages/client/src/components/ImageContainer.tsx create mode 100644 packages/client/src/components/widgets/WeatherCamWidget.tsx diff --git a/packages/admin/src/types/kiosk.types.ts b/packages/admin/src/types/kiosk.types.ts index 6c7b6a0..97ac93a 100644 --- a/packages/admin/src/types/kiosk.types.ts +++ b/packages/admin/src/types/kiosk.types.ts @@ -1,5 +1,5 @@ import { ReactElement } from 'react'; -import { TbAlignLeft, TbBike, TbBus, TbCup, TbPhoto, TbQrcode, TbSun } from 'react-icons/tb'; +import { TbAlignLeft, TbBike, TbBus, TbCloudStorm, TbCup, TbPhoto, TbQrcode, TbSun } from 'react-icons/tb'; export type Kiosk = { _id: string; @@ -58,7 +58,7 @@ export type ColorModeColor = { dark: string; }; -export type WidgetName = 'weather' | 'schpincer' | 'text' | 'image' | 'qr' | 'departures' | 'bike'; +export type WidgetName = 'weather' | 'schpincer' | 'text' | 'image' | 'qr' | 'departures' | 'bike' | 'weathercam'; export const WidgetDisplay: Record = { weather: { name: 'Időjárás', icon: TbSun({ size: 50 }) }, @@ -68,6 +68,7 @@ export const WidgetDisplay: Record = { { name: 'title', type: 'text', label: 'Cím' }, { name: 'subtitle', type: 'text', label: 'Alcím' }, ], + weathercam: [], }; export type WidgetConfigBase = { @@ -133,6 +135,10 @@ export interface BikeConfig extends WidgetConfigBase { name: 'bike'; } +export interface WeatherCamConfig extends WidgetConfigBase { + name: 'weathercam'; +} + export type GridSettings = { column: Axis; row: Axis; @@ -152,4 +158,5 @@ export type WidgetConfig = | ImageConfig | QRConfig | DeparturesConfig - | BikeConfig; + | BikeConfig + | WeatherCamConfig; diff --git a/packages/backend/src/types/kiosk.types.ts b/packages/backend/src/types/kiosk.types.ts index 231e5de..67326c7 100644 --- a/packages/backend/src/types/kiosk.types.ts +++ b/packages/backend/src/types/kiosk.types.ts @@ -53,13 +53,17 @@ export type ColorModeColor = { dark: string; }; -export type WidgetName = 'weather' | 'schpincer' | 'text' | 'image' | 'qr' | 'departures' | 'bike'; +export type WidgetName = 'weather' | 'schpincer' | 'text' | 'image' | 'qr' | 'departures' | 'bike' | 'weathercam'; export type WidgetConfigBase = { name: WidgetName; grid: GridSettings; }; +export interface WeatherCamConfig extends WidgetConfigBase { + name: 'weathercam'; +} + export interface WeatherConfig extends WidgetConfigBase { name: 'weather'; apiKey: string; @@ -113,7 +117,8 @@ export type WidgetConfig = | ImageConfig | QRConfig | DeparturesConfig - | BikeConfig; + | BikeConfig + | WeatherCamConfig; export enum KioskRoles { VISITOR, diff --git a/packages/client/src/components/ImageContainer.tsx b/packages/client/src/components/ImageContainer.tsx new file mode 100644 index 0000000..682a71c --- /dev/null +++ b/packages/client/src/components/ImageContainer.tsx @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +import { GlobalSize, Size } from '../utils/theme'; + +export const ImageContainer = styled.img` + height: 100%; + width: 100%; + object-fit: cover; + object-position: center; + border-radius: calc(${GlobalSize.borderRadius} - ${Size.xs}); +`; diff --git a/packages/client/src/components/widgets/ImageWidget.tsx b/packages/client/src/components/widgets/ImageWidget.tsx index acb52d7..817c101 100644 --- a/packages/client/src/components/widgets/ImageWidget.tsx +++ b/packages/client/src/components/widgets/ImageWidget.tsx @@ -1,10 +1,9 @@ import React from 'react'; -import styled from 'styled-components'; import { Widget } from '../../layout/Widget'; import { ImageConfig } from '../../types/widget.type'; -import { GlobalSize, Size } from '../../utils/theme'; import { useWidgetConfig } from '../../utils/useWidgetConfig'; +import { ImageContainer } from '../ImageContainer'; export function ImageWidget() { const config = useWidgetConfig('image'); @@ -14,11 +13,3 @@ export function ImageWidget() { ); } - -const ImageContainer = styled.img` - height: 100%; - width: 100%; - object-fit: cover; - object-position: center; - border-radius: calc(${GlobalSize.borderRadius} - ${Size.xs}); -`; diff --git a/packages/client/src/components/widgets/WeatherCamWidget.tsx b/packages/client/src/components/widgets/WeatherCamWidget.tsx new file mode 100644 index 0000000..000249b --- /dev/null +++ b/packages/client/src/components/widgets/WeatherCamWidget.tsx @@ -0,0 +1,56 @@ +import React, { useEffect, useMemo, useState } from 'react'; +import styled from 'styled-components'; + +import { Widget } from '../../layout/Widget'; +import { WeatherCamConfig } from '../../types/widget.type'; +import { useWidgetConfig } from '../../utils/useWidgetConfig'; +import { ImageContainer } from '../ImageContainer'; + +const weatherImageSrc = 'https://ha5kfu.hu/idokep/kamera.php'; + +export function WeatherCamWidget() { + const [camId, setCamId] = useState(1); + const config = useWidgetConfig('weathercam'); + + useEffect(() => { + const interval = setInterval(() => { + setCamId((prev) => (prev % 2) + 1); + }, 5000); + return () => clearInterval(interval); + }, []); + + const src = useMemo(() => { + const url = new URL(weatherImageSrc); + url.searchParams.set('id', camId.toString()); + url.searchParams.set('t', new Date().getTime().toString()); + return url.toString(); + }, [camId]); + + return ( + + + + Forrás: HA5KFU + + + ); +} + +const ContentContainer = styled.div` + height: 100%; + width: 100%; + position: relative; + overflow: hidden; +`; + +const SponsorText = styled.p` + background-color: rgba(0, 0, 0, 0.5); + color: white; + border-top-left-radius: 10px; + border-bottom-right-radius: 10px; + padding: 5px; + position: absolute; + bottom: 0; + right: 0; + margin: 0; +`; diff --git a/packages/client/src/layout/WidgetDistributor.tsx b/packages/client/src/layout/WidgetDistributor.tsx index c73a568..96fdf7b 100644 --- a/packages/client/src/layout/WidgetDistributor.tsx +++ b/packages/client/src/layout/WidgetDistributor.tsx @@ -6,6 +6,7 @@ import { ImageWidget } from '../components/widgets/ImageWidget'; import { QrWidget } from '../components/widgets/QrWidget'; import { SchPincerWidget } from '../components/widgets/SchPincerWidget'; import { TextWidget } from '../components/widgets/TextWidget'; +import { WeatherCamWidget } from '../components/widgets/WeatherCamWidget'; import { WeatherWidget } from '../components/widgets/WeatherWidget'; import { WidgetConfig } from '../types/widget.type'; @@ -29,6 +30,8 @@ export function WidgetDistributor({ config }: WidgetDistributorProps) { return ; case 'text': return ; + case 'weathercam': + return ; default: return null; } diff --git a/packages/client/src/types/widget.type.ts b/packages/client/src/types/widget.type.ts index 2e5f40a..c364d6f 100644 --- a/packages/client/src/types/widget.type.ts +++ b/packages/client/src/types/widget.type.ts @@ -1,4 +1,4 @@ -export type WidgetName = 'weather' | 'schpincer' | 'text' | 'image' | 'qr' | 'departures' | 'bike'; +export type WidgetName = 'weather' | 'schpincer' | 'text' | 'image' | 'qr' | 'departures' | 'bike' | 'weathercam'; export type WidgetConfigBase = { name: WidgetName; @@ -41,6 +41,10 @@ export interface BikeConfig extends WidgetConfigBase { name: 'bike'; } +export interface WeatherCamConfig extends WidgetConfigBase { + name: 'weathercam'; +} + export type GridSettings = { column: Axis; row: Axis; @@ -58,4 +62,5 @@ export type WidgetConfig = | ImageConfig | QRConfig | DeparturesConfig - | BikeConfig; + | BikeConfig + | WeatherCamConfig;