Implemented weather formatting.

packages/client/src/components/dashboard/controls/DashboardWidgets/WeatherWidget.jsx

@@ -18,7 +18,14 @@ const getWeatherCondition = (code) => {
   return "Unknown";
 };
 
-export const WeatherWidget = ({ widget }) => {
+// Format weather string using template with placeholders
+const formatWeather = (format, data) => {
+  return format.replace(/\{(\w+)\}/g, (match, key) => {
+    return data[key] !== undefined ? data[key] : match;
+  });
+};
+
+export const WeatherWidget = ({ widget, widgetDef }) => {
   const { weatherData } = useWebSocket();
 
   // Get weather data from widget or context
@@ -33,17 +40,22 @@ export const WeatherWidget = ({ widget }) => {
   }
 
   const current = weather.current;
-  const temp = current.temperature_2m?.toFixed(1) || "N/A";
+  
-  const unit = current.temperature_2m !== undefined ? "°C" : "";
+  // Prepare data for formatting
-  const humidity = current.relative_humidity_2m?.toFixed(0) || "N/A";
+  const data = {
-  const windSpeed = current.wind_speed_10m?.toFixed(1) || "N/A";
+    temperature: current.temperature_2m?.toFixed(1) || "N/A",
-  const weatherCode = current.weather_code;
+    humidity: current.relative_humidity_2m?.toFixed(0) || "N/A",
+    windSpeed: current.wind_speed_10m?.toFixed(1) || "N/A",
+    weatherCondition: getWeatherCondition(current.weather_code),
+  };
+
+  const defaultFormat = widgetDef?.properties?.format || "{weatherCondition}, {temperature}°C, {humidity}%";
+  const format = widget.format || defaultFormat;
+  const formattedWeather = formatWeather(format, data);
 
   return (
     <div className="widget-content">
-      <div className="widget-text">
+      <div className="widget-text">{formattedWeather}</div>
-        {getWeatherCondition(weatherCode)}, {temp}{unit}, {humidity}%, {windSpeed}m/s
-      </div>
     </div>
   );
 };

packages/client/src/components/dashboard/controls/Widget.jsx

@@ -9,7 +9,9 @@ import { FaTimes } from "react-icons/fa";
 import { RiPencilFill } from "react-icons/ri";
 import widgets from "./widgets";
 import "./Widget.css";
-import { DateTimeWidget, WeatherWidget } from "./DashboardWidgets";
+
+import DateTimeWidget from "./DashboardWidgets/DateTimeWidget";
+import WeatherWidget from "./DashboardWidgets/WeatherWidget";
 
 export const Widget = ({
   widget,
@@ -142,7 +144,7 @@ export const Widget = ({
       case "dateTime":
         return <DateTimeWidget widget={widget} widgetDef={widgetDef} />;
       case "weather":
-        return <WeatherWidget widget={widget} />;
+        return <WeatherWidget widget={widget} widgetDef={widgetDef} />;
       default:
         return (
           <div className="widget-content">

packages/client/src/components/dashboard/controls/widgets.js

@@ -1,16 +1,19 @@
 const widgets = [
-    {
+  {
-        name: "dateTime",
+    name: "dateTime",
-        label: "Date & Time",
+    label: "Date & Time",
-        properties: {
+    properties: {
-            format: "MM/DD/YYYY HH:mm",
+      format: "MM/DD/YYYY HH:mm",
-        }
     },
-    {
+  },
-        name: "weather",
+  {
-        label: "Weather",
+    name: "weather",
-        properties: {}
+    label: "Weather",
-    }
+    properties: {
-]
+      format:
+        "{weatherCondition}, {temperature}°C, {humidity}%, {windSpeed}m/s",
+    },
+  },
+];
 
-export default widgets;
+export default widgets;