Merge pull request #74 from Dambakk/clock-with-timezone

Add timezone to clock widget

README.md

@@ -643,6 +643,23 @@ Example:
     </li>
 ```
 
+
+#### Clock
+
+Show the time in a specific timezone. Enter the timezone as found in `/usr/share/zoneinfo` on Linux.
+
+Example:
+
+```html
+    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
+      <div data-view="Clock" data-title="UTC" data-timezone="UTC"></div>
+    </li>
+    <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
+      <div data-view="Clock" data-title="New York" data-timezone="America/New_York"></div>
+    </li>
+```
+
+
 ### References
 
 https://www.icinga.com/2016/01/28/awesome-dashing-dashboards-with-icinga-2/

widgets/clock/clock.coffee

@@ -4,15 +4,24 @@ class Dashing.Clock extends Dashing.Widget
     setInterval(@startTime, 500)
 
   startTime: =>
-    today = new Date()
+    zone = @get('timezone')
+    optionsDate = {
+      timeZone: zone,
+      weekday: 'short',
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    };
+    optionsTime = {
+      timeZone: zone,
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    };
 
-    h = today.getHours()
-    m = today.getMinutes()
-    s = today.getSeconds()
-    m = @formatTime(m)
-    s = @formatTime(s)
-    @set('time', h + ":" + m + ":" + s)
-    @set('date', today.toDateString())
+    date = new Date().toLocaleDateString('en-US', optionsDate);
+    time = new Date().toLocaleTimeString('en-US', optionsTime);
 
-  formatTime: (i) ->
-    if i < 10 then "0" + i else i
+    @set('time', time)
+    @set('date', date)
+    @set('title', @get('title'))

widgets/clock/clock.html

@@ -1,2 +1,3 @@
-<h1 data-bind="date"></h1>
-<h2 data-bind="time"></h2>
+<h1 data-bind="title"></h1>
+<h3 data-bind="date"></h3>
+<h2 data-bind="time"></h2>