Visual Console Client: added a color property to the digital clock item

Former-commit-id: 1393ecb7abcb612f21ec65848e2426f8433bb00b

visual_console/src/index.ts

@@ -25,7 +25,7 @@ if (container != null) {
     width: 800,
     height: 300,
     backgroundURL: null,
-    backgroundColor: "rgb(154, 154, 154)",
+    backgroundColor: "rgb(86, 86, 86)",
     isFavorite: false
   };
 
@@ -42,8 +42,8 @@ if (container != null) {
     x: 100,
     y: 50,
     // Size props.
-    width: 100,
-    height: 100,
+    width: 70,
+    height: 70,
     // Agent props.
     agentId: null,
     agentName: null,
@@ -52,7 +52,7 @@ if (container != null) {
     moduleName: null,
     // Custom props.
     imageSrc:
-      "https://brutus.artica.lan:8081/uploads/-/system/project/avatar/1/1.png",
+      "http://localhost/pandora_console/images/console/icons/bridge_ok.png",
     showLastValueTooltip: "default"
   };
 
@@ -85,7 +85,7 @@ if (container != null) {
   const digitalClockRawProps = {
     // Generic props.
     id: 3,
-    type: 19, // clock = 19
+    type: 19, // Clock = 19
     label: null,
     isLinkEnabled: false,
     isOnTop: false,
@@ -95,14 +95,15 @@ if (container != null) {
     x: 500,
     y: 100,
     // Size props.
-    width: 300,
-    height: 150,
+    width: 200,
+    height: 100,
     // Custom props.
     clockType: "digital",
     clockFormat: "datetime",
     clockTimezone: "Madrid",
     clockTimezoneOffset: 60,
-    showClockTimezone: true
+    showClockTimezone: true,
+    color: "#82B92E"
   };
 
   try {

visual_console/src/items/Clock.ts

@@ -20,6 +20,7 @@ export type ClockProps = {
   clockTimezone: string;
   clockTimezoneOffset: number; // Offset of the timezone to UTC in seconds.
   showClockTimezone: boolean;
+  color: string | null;
 } & VisualConsoleItemProps &
   LinkedVisualConsoleProps;
 
@@ -81,6 +82,10 @@ export function clockPropsDecoder(data: UnknownObject): ClockProps | never {
     clockTimezone: data.clockTimezone,
     clockTimezoneOffset: parseIntOr(data.clockTimezoneOffset, 0),
     showClockTimezone: parseBoolean(data.showClockTimezone),
+    color:
+      typeof data.color === "string" && data.color.length > 0
+        ? data.color
+        : null,
     ...linkedVCPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
   };
 }
@@ -209,6 +214,7 @@ export default class Clock extends VisualConsoleItem<ClockProps> {
       dateElem.className = "date";
       dateElem.textContent = this.getDigitalDate();
       dateElem.style.fontSize = `${dateFontSize}px`;
+      dateElem.style.color = this.props.color;
       element.append(dateElem);
     }
 
@@ -217,6 +223,7 @@ export default class Clock extends VisualConsoleItem<ClockProps> {
     timeElem.className = "time";
     timeElem.textContent = this.getDigitalTime();
     timeElem.style.fontSize = `${timeFontSize}px`;
+    timeElem.style.color = this.props.color;
     element.append(timeElem);
 
     // Timezone name.
@@ -225,6 +232,7 @@ export default class Clock extends VisualConsoleItem<ClockProps> {
       tzElem.className = "timezone";
       tzElem.textContent = this.props.clockTimezone;
       tzElem.style.fontSize = `${tzFontSize}px`;
+      tzElem.style.color = this.props.color;
       element.append(tzElem);
     }