preserve schedule timezones and show current time + event timezone on the website (#117)

3 files changed, 56 insertions, 17 deletions

diff --git a/assets/css/_schedule.less b/assets/css/_schedule.less
index fe512a9..852d5a4 100644
--- a/assets/css/_schedule.less
+++ b/assets/css/_schedule.less
@@ -16,19 +16,21 @@ body .schedule {
 
 	.now {
 		position: absolute;
-		left: 0;
-		width: 150px;
-		height: 100%;
-		background-color: @schedule-now-bg;
-		font-size: 14px;
 		pointer-events: none;
-
+		height: 100%;
+		display: flex;
+		left: 0;
 		z-index: 5;
 
-		span {
-			display: block;
-			position: absolute;
-			right: -28px;
+		.overlay {
+			width: 150px;
+			height: 100%;
+			background-color: @schedule-now-bg;
+		}
+
+		.label {
+			font-size: 14px;
+			padding-left: 5px;
 			color: @schedule-now;
 		}
 	}
@@ -50,7 +52,7 @@ body .schedule {
 
 		.inner {
 			display: block;
-			padding: 10px;
+			padding: 15px;
 			height: 100%;
 		}
 
diff --git a/assets/css/_structure.less b/assets/css/_structure.less
index bf9e3b1..eeb1b23 100644
--- a/assets/css/_structure.less
+++ b/assets/css/_structure.less
@@ -55,6 +55,11 @@ nav {
 		}
 	}
 
+	.navbar-time {
+		line-height: 27px;
+		padding: 10px 10px;
+	}
+
 	.button-wrapper > .btn {
 		width: 40px;
 	}
diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js
index 67ecd04..b1664f3 100644
--- a/assets/js/lustiges-script.js
+++ b/assets/js/lustiges-script.js
@@ -127,6 +127,7 @@ $(function() {
 $(function() {
 	var
 		$schedule = $('body .schedule'),
+		$time = $('.navbar-time'),
 		$now = $schedule.find('.now'),
 		scrollLock = false,
 		rewindTimeout,
@@ -154,6 +155,23 @@ $(function() {
 		}
 	});
 
+	function formatLocalTime(timestamp, offset) {
+		const d = new Date(timestamp * 1000);
+
+		// js timezone offset is negative
+		const diff = -d.getTimezoneOffset() - offset;
+		d.setUTCMinutes(d.getUTCMinutes() - diff);
+
+		return String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
+	}
+
+	function formatOffset(offset) {
+		const sign = offset < 0 ? "-" : "+";
+		const hours = String(Math.floor(Math.abs(offset)/60)).padStart(2, '0');
+		const minutes = String(Math.abs(offset)%60).padStart(2, '0');
+		return sign + hours + ":" + minutes;
+	}
+
 	// schedule now-marker & scrolling
 	function updateProgramView(initial) {
 		var
@@ -167,12 +185,22 @@ $(function() {
 			.find('.room')
 			.first()
 			.find('.block')
-			.filter(function(i, el) { 
+			.filter(function(i, el) {
 				return $(this).data('start') < now;
 			}).last();
 
-		if($block.length == 0)
-			return $now.css('width', 0);
+		// if we are yet to start find first block as reference
+		if (!$block.length)
+			$block = $schedule
+				.find('.room').first()
+				.find('.block').first();
+
+		// still no luck
+		if(!$block.length) {
+			$now.find('.overlay').css('width', 0);
+			$now.find('.label').text('now');
+			return;
+		}
 
 		var
 			// start & end-timestamp
@@ -195,15 +223,19 @@ $(function() {
 			px_in_display = px - scrollx;
 
 		//console.log($block.get(0), new Date(start*1000), new Date(now*1000), new Date(end*1000), normalized, px);
-		$now.css('width', px);
+		const eventOffset = parseFloat($block.data('offset')) || 0;
+		const eventTime = formatLocalTime(now, eventOffset);
+		$now.find('.overlay').css('width', px);
+		$now.find('.label').text("now (" + eventTime + ")");
+		$time.text(eventTime + " (" + formatOffset(eventOffset) + ")");
 
 		// scrolling is locked by manual interaction
-		if(scrollLock)
+		if (scrollLock)
 			return;
 
 		if(
 			// now marker is > 2/3 of the schedule-display-width
-			px_in_display > (displayw * 2/3) || 
+			px_in_display > (displayw * 2/3) ||
 
 			// now marker is <1/7 of the schedule-display-width
 			px_in_display < (displayw/7)