From 6c611770e07c935576f1fd8d9aba90e257c98d7b Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Tue, 1 Jan 2019 13:15:14 +1100
Subject: [PATCH] Implement clock

---
 virtual_metro/__init__.py          |  1 +
 virtual_metro/static/template.svg  |  4 +--
 virtual_metro/templates/index.html | 55 ++++++++++++++++++++++--------
 3 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/virtual_metro/__init__.py b/virtual_metro/__init__.py
index 8c14b7a..484ccb2 100755
--- a/virtual_metro/__init__.py
+++ b/virtual_metro/__init__.py
@@ -47,6 +47,7 @@ def index():
 def latest():
 	timenow = pytz.utc.localize(datetime.utcnow()).astimezone(timezone)
 	result = {}
+	result['time_offset'] = timenow.utcoffset().total_seconds()
 	
 	departures = do_request('/v3/departures/route_type/{}/stop/{}'.format(ROUTE_TYPE, flask.request.args['stop_id']), {'platform_numbers': flask.request.args['plat_id'], 'max_results': '5', 'expand': 'all'})
 	departures['departures'].sort(key=lambda x: x['scheduled_departure_utc'])
diff --git a/virtual_metro/static/template.svg b/virtual_metro/static/template.svg
index 90f6103..6e58d12 100644
--- a/virtual_metro/static/template.svg
+++ b/virtual_metro/static/template.svg
@@ -29,7 +29,7 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="0.7"
-     inkscape:cx="989.80651"
+     inkscape:cx="1809.3071"
      inkscape:cy="258.31501"
      inkscape:document-units="mm"
      inkscape:current-layer="layer2"
@@ -517,7 +517,7 @@
          id="tspan970"
          sodipodi:role="line">{{min}}</tspan></text>
     <text
-       id="text994"
+       id="time"
        y="266.71338"
        x="543.94397"
        style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:27.3508606px;line-height:1.25;font-family:'Arial';-inkscape-font-specification:'Arial, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;display:inline;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.13961673"
diff --git a/virtual_metro/templates/index.html b/virtual_metro/templates/index.html
index 61dc9fd..d15fa72 100644
--- a/virtual_metro/templates/index.html
+++ b/virtual_metro/templates/index.html
@@ -46,25 +46,50 @@
 			var stop_id = parseInt(getQueryVariable("stop_id", 1099));
 			var plat_id = parseInt(getQueryVariable("plat_id", 1));
 			
+			var svg = null;
+			var svg_time = null;
+			var template = null;
+			var time_offset = null;
+			
 			function start() {
-				var svg = document.getElementById("mainsvg").getSVGDocument().querySelector("svg");
-				var template = svg.innerHTML;
+				svg = document.getElementById("mainsvg").getSVGDocument().querySelector("svg");
+				template = svg.innerHTML;
 				
 				svg.innerHTML = nunjucks.renderString(template, {"dest": "Loading..."});
 				
-				function tick() {
-					var xhr = new XMLHttpRequest();
-					xhr.addEventListener("load", function() {
-						var result = JSON.parse(xhr.responseText);
-						svg.innerHTML = nunjucks.renderString(template, result);
-						document.getElementById("stopinfo").innerText = stop_id + " (" + result.stop_name + ")";
-					});
-					xhr.open("GET", "latest?stop_id=" + stop_id + "&plat_id=" + plat_id);
-					xhr.send();
-				}
-				
-				tick();
-				window.setInterval(tick, 30000);
+				tickTrains();
+				window.setInterval(tickTrains, 30000);
+			}
+			
+			function tickTrains() {
+				var xhr = new XMLHttpRequest();
+				xhr.addEventListener("load", function() {
+					var result = JSON.parse(xhr.responseText);
+					
+					svg.innerHTML = nunjucks.renderString(template, result);
+					svg_time = document.getElementById("mainsvg").getSVGDocument().querySelector("#time tspan");
+					
+					document.getElementById("stopinfo").innerText = stop_id + " (" + result.stop_name + ")";
+					
+					if (time_offset === null) {
+						time_offset = result.time_offset;
+						tickTime();
+						window.setInterval(tickTime, 1000);
+					}
+				});
+				xhr.open("GET", "latest?stop_id=" + stop_id + "&plat_id=" + plat_id);
+				xhr.send();
+			}
+			
+			function tickTime() {
+				var time = new Date(new Date().getTime() + time_offset * 1000);
+				var hour = time.getUTCHours() % 12;
+				if (hour === 0) hour = 12;
+				var minute = time.getUTCMinutes();
+				if (minute < 10) minute = "0" + minute;
+				var second = time.getUTCSeconds();
+				if (second < 10) second = "0" + second;
+				svg_time.innerHTML = hour + ":" + minute + ":" + second;
 			}
 			
 			function changePlatform() {