chore: removed console logs

kir-dev · Mar 24, 2024 · f688836 · f688836
1 parent 2695e5d
commit f688836
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 17 deletions.
diff --git 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<WidgetName, { name: string; icon: ReactElement }> = {
   weather: { name: 'Időjárás', icon: TbSun({ size: 50 }) },
@@ -68,6 +68,7 @@ export const WidgetDisplay: Record<WidgetName, { name: string; icon: ReactElemen
   qr: { name: 'QR Kód', icon: TbQrcode({ size: 50 }) },
   departures: { name: 'Indulások', icon: TbBus({ size: 50 }) },
   bike: { name: 'Bubi', icon: TbBike({ size: 50 }) },
+  weathercam: { name: 'Időjárás kamera', icon: TbCloudStorm({ size: 50 }) },
 };
 
 type WidgetConfigField = {
@@ -90,6 +91,7 @@ export const WidgetConfigFields: Record<WidgetName, WidgetConfigField[]> = {
     { 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
@@ -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
@@ -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
@@ -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<ImageConfig>('image');
@@ -14,11 +13,3 @@ export function ImageWidget() {
     </Widget>
   );
 }
-
-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
@@ -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<WeatherCamConfig>('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 (
+    <Widget grid={config.grid}>
+      <ContentContainer>
+        <ImageContainer src={src} alt='Nem sikerült betölteni az időjárás kamera képet' />
+        <SponsorText>Forrás: HA5KFU</SponsorText>
+      </ContentContainer>
+    </Widget>
+  );
+}
+
+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
@@ -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 <ImageWidget />;
     case 'text':
       return <TextWidget />;
+    case 'weathercam':
+      return <WeatherCamWidget />;
     default:
       return null;
   }

diff --git 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;