Visual Console Refactor: fixes

Former-commit-id: b180de5a6a105aa627f15895dc7890a294110db3

pandora_console/include/rest-api/models/VisualConsole/Items/Clock.php

@@ -50,9 +50,11 @@ final class Clock extends Item
             throw new \InvalidArgumentException($e->getMessage());
         }
 
-        $clockData['showClockTimezone'] = static::parseBool(
-            $data['showClockTimezone']
-        );
+        // $clockData['showClockTimezone'] = static::parseBool(
+        // static::issetInArray($data, ['showClockTimezone'])
+        // );
+        // TODO: Remove the true by default when added into the editor.
+        $clockData['showClockTimezone'] = true;
         $clockData['color'] = static::extractColor($data);
         return $clockData;
     }

pandora_console/operation/visual_console/legacy_public_view.php

@@ -141,6 +141,12 @@ ui_require_javascript_file('pandora_visual_console');
 $ignored_params['refr'] = '';
 ?>
 
+<style type="text/css">
+    svg {
+        stroke: none;
+    }
+</style>
+
 <script language="javascript" type="text/javascript">
     $(document).ready(function () {
         var refr = <?php echo (int) $refr; ?>;

pandora_console/operation/visual_console/legacy_view.php

@@ -258,6 +258,12 @@ ui_require_javascript_file('pandora_visual_console');
 $ignored_params['refr'] = '';
 ?>
 
+<style type="text/css">
+    svg {
+        stroke: none;
+    }
+</style>
+
 <script language="javascript" type="text/javascript">
     $(document).ready (function () {
         var refr = <?php echo (int) $refr; ?>;

visual_console_client/src/items/Clock/index.ts

@@ -242,7 +242,8 @@ export default class Clock extends Item<ClockProps> {
     clockFace.append(clockFaceBackground);
 
     // Timezone complication.
-    if (this.props.showClockTimezone) {
+    const city = this.getHumanTimezone();
+    if (city.length > 0) {
       const timezoneComplication = document.createElementNS(svgNS, "text");
       timezoneComplication.setAttribute("text-anchor", "middle");
       timezoneComplication.setAttribute("font-size", "8");
@@ -251,7 +252,7 @@ export default class Clock extends Item<ClockProps> {
         "translate(30 50) rotate(90)" // Rotate to counter the clock rotation.
       );
       timezoneComplication.setAttribute("fill", colors.mark);
-      timezoneComplication.textContent = this.props.clockTimezone;
+      timezoneComplication.textContent = city;
       clockFace.append(timezoneComplication);
     }
 
@@ -509,11 +510,12 @@ export default class Clock extends Item<ClockProps> {
     if (this.props.color) timeElem.style.color = this.props.color;
     element.append(timeElem);
 
-    // Timezone name.
-    if (this.props.showClockTimezone) {
+    // City name.
+    const city = this.getHumanTimezone();
+    if (city.length > 0) {
       const tzElem: HTMLSpanElement = document.createElement("span");
       tzElem.className = "timezone";
-      tzElem.textContent = this.props.clockTimezone;
+      tzElem.textContent = city;
       tzElem.style.fontSize = `${tzFontSize}px`;
       if (this.props.color) tzElem.style.color = this.props.color;
       element.append(tzElem);
@@ -531,6 +533,7 @@ export default class Clock extends Item<ClockProps> {
     const targetTZOffset = this.props.clockTimezoneOffset * 60 * 1000; // In ms.
     const localTZOffset = d.getTimezoneOffset() * 60 * 1000; // In ms.
     const utimestamp = d.getTime() + targetTZOffset + localTZOffset;
+    console.log(targetTZOffset, localTZOffset);
 
     return new Date(utimestamp);
   }
@@ -566,6 +569,15 @@ export default class Clock extends Item<ClockProps> {
     return `${hours}:${minutes}:${seconds}`;
   }
 
+  /**
+   * Extract a human readable city name from the timezone text.
+   * @param timezone Timezone text.
+   */
+  public getHumanTimezone(timezone: string = this.props.clockTimezone): string {
+    const [, city = ""] = timezone.split("/");
+    return city.replace("_", " ");
+  }
+
   /**
    * Generate a element size using the current size and the default values.
    * @return The size.

visual_console_client/src/items/Clock/spec.ts

@@ -72,4 +72,14 @@ describe("Clock item", () => {
       expect(digitalTime).toBe(expected);
     });
   });
+
+  describe("getHumanTimezone function", () => {
+    it("should return a better timezone", () => {
+      expect(clockInstance.getHumanTimezone("America/New_York")).toBe(
+        "New York"
+      );
+      expect(clockInstance.getHumanTimezone("Europe/Madrid")).toBe("Madrid");
+      expect(clockInstance.getHumanTimezone("Asia/Tokyo")).toBe("Tokyo");
+    });
+  });
 });