Display show, schedule, error handling, time left.

src/StudioClock.svelte

 <script>
 	import { onMount } from 'svelte';
+	export let apiUrl = "http://localhost:3333/api/v1";
+
+
+	let time = new Date(); 
+	let queryCurrent = "/trackservice/current";
+
+	let data;
+	let currentTrack = null;
+	let timeLeft;
 
-	let time = new Date();
 
 	// these automatically update when `time`
 	// changes, because of the `$:` prefix
@@ -12,6 +20,13 @@
 	onMount(() => {
 		const interval = setInterval(() => {
 			time = new Date();
+			timeLeft -= 1;
+
+			if (timeLeft == 0) {
+				currentTrack = null;
+				data = null;
+				data = fetchApi(queryCurrent);
+			}
 
 		}, 1000);
 
@@ -20,23 +35,83 @@
 		};
 	});
 
-	let queryTrackservice = "trackservice";
-	let currentlyPlaying;
 
-	async function getData(query) {
-		// FIXME Configure DataURL and Port
-		let response = await fetch(`http://localhost:3333/api/v1/trackservice/${query}`);
-		let data = await response.json();
+	async function fetchApi(query) {
+		let response = await fetch(apiUrl+query);
+		let data;
+
+		try {
+			data = await response.json();
+		} catch(e) {
+			console.log("Error while converting response to JSON!", e);
+			throw new Error(response.statusText);
+		}
 
 		if (response.ok) {
-			console.log(data);
 			return data;
 		} else {
-			throw new Error(data)
+			console.log("Error:", data);
+			throw new Error(data.message);
+		}
+	}
+
+	function setCurrentTrack(track) {
+		if (currentTrack == null && track != null && track.track != null) {
+			currentTrack = track;
+			
+			let t = time - Date.parse(track.track_start);
+			t = parseInt(t/1000);
+
+			timeLeft = track.track.duration - t;
+			console.log("TIMELEFT: "+timeLeft);
+		}
+		return "";
+	}
+
+	function displayTitle(track) {
+		if (track != null && track.track != null) {
+			let artist = "";
+			if (track.track.artist != "")
+				artist = track.track.artist + " - ";
+			return artist + track.track.title;
+		}
+		return "";
+	}
+
+	function formatTime(seconds) {
+		if (seconds != null && Number.isInteger(seconds)) {
+			let d = new Date(null);
+			d.setSeconds(seconds);
+
+			let s;
+			if (seconds > 3600)
+				s = d.toISOString().substr(11, 8);
+			else
+				s = d.toISOString().substr(14, 5);
+			return s;
+		}
+		return "";
+	}
+
+	function displayShowSchedule(track) {
+		if (track.schedule != null) {
+			let scheduleStart = Date.parse(track.schedule_start);
+			let scheduleEnd = Date.parse(track.schedule_end);
+			scheduleStart = date.toLocaleTimeString(navigator.language, {
+				hour: '2-digit',
+				minute:'2-digit'
+			});
+			scheduleEnd = date.toLocaleTimeString(navigator.language, {
+				hour: '2-digit',
+				minute:'2-digit'
+			});
+			return "(" + scheduleStart + " - " + scheduleEnd + ")";
 		}
+		return "";
 	}
 
-currentlyPlaying = getData("current");
+
+	data = fetchApi(queryCurrent);
 	
 </script>
 
@@ -158,19 +233,32 @@ currentlyPlaying = getData("current");
 	</div>
 
 	<div id="right-column" class="column">
-		<h2>&#9654; Playing</h2>
 
-		{#await currentlyPlaying}
+		{#await data}
 			<div class="spinner-border mt-5" role="status">
 				<span class="sr-only">Loading...</span>
 			</div>
 		{:then value}
-			<h1>{value.show.name}</h1>
-			<span>Type: {value.show.type}, Host: {value.show.host}</span>
-			<h3 class="active">{value.track.artist} - {value.track.title}</h3>
+			{setCurrentTrack(value)}
+			<!-- <h2>&#9654; Playing</h2> -->
+			<h2>{value.show.name} {displayShowSchedule(value)}</h2>
+			<div id="current-schedule"><b>Type:</b> {value.show.type}, <b>Host:</b> {value.show.host}</div>
+			<div id="track-list">
+				<div id="current-track">
+					<h1>
+						<span class="play-icons">&#9654;</span>
+						<span class="active track-title">{displayTitle(value)}</span>
+						<span class="track-time-left">({formatTime(timeLeft)})</span>
+					</h1>
+				</div>
+			</div>
+			<div id="next-schedule">
+
+			</div>
 		{:catch error}
-			<p style="color:red">{error.message}</p>
+			<p style="color:red">{error}</p>
 		{/await}
+
 	</div>
 
 </div>