Display current and next schedule.

src/StudioClock.svelte

@@ -4,7 +4,7 @@
 
 
 	let time = new Date(); 
-	let queryCurrent = "/trackservice/current";
+	let queryCurrent = "/clock";
 
 	let data;
 	let currentTrack = null;
@@ -17,12 +17,15 @@
 	$: minutes = time.getMinutes();
 	$: seconds = time.getSeconds();
 
+	data = fetchApi(queryCurrent);
+
+
 	onMount(() => {
 		const interval = setInterval(() => {
 			time = new Date();
 			timeLeft -= 1;
 
-			if (timeLeft == 0) {
+			if (timeLeft <= 0 || data == null) {
 				currentTrack = null;
 				data = null;
 				data = fetchApi(queryCurrent);
@@ -55,25 +58,24 @@
 		}
 	}
 
-	function setCurrentTrack(track) {
-		if (currentTrack == null && track != null && track.track != null) {
-			currentTrack = track;
+	function setCurrentTrack(info) {
+		if (currentTrack == null && info != null && info.track != null) {
+			currentTrack = info;
 			
-			let t = time - Date.parse(track.track_start);
+			let t = time - Date.parse(info.track_start);
 			t = parseInt(t/1000);
 
-			timeLeft = track.track.duration - t;
-			console.log("TIMELEFT: "+timeLeft);
+			timeLeft = info.track.duration - t - 4;
 		}
 		return "";
 	}
 
-	function displayTitle(track) {
-		if (track != null && track.track != null) {
+	function displayTitle(info) {
+		if (info != null && info.track != null) {
 			let artist = "";
-			if (track.track.artist != "")
-				artist = track.track.artist + " - ";
-			return artist + track.track.title;
+			if (info.track.artist != "")
+				artist = info.track.artist + " - ";
+			return artist + info.track.title;
 		}
 		return "";
 	}
@@ -93,25 +95,48 @@
 		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 + ")";
+	function displayShowName(show) {
+		let name = ""
+		if (show == null || show.name == null) {
+			name = '<span class="error">No show scheduled!</span>';
+		} else {
+			name = show.name;
 		}
-		return "";
+		return name;
+	}
+
+	function displayShowSchedule(schedule) {
+		let str = "";
+
+		if (schedule != null && schedule.schedule_start != null) {
+			let scheduleStart = ""
+			let scheduleEnd = "";
+
+			if (schedule.schedule_start != null) {
+				let scheduleStart = new Date(Date.parse(schedule.schedule_start));
+				scheduleStart = scheduleStart.toLocaleTimeString(navigator.language, {
+					hour: '2-digit',
+					minute:'2-digit'
+				});
+				str = "(" + scheduleStart;
+			}
+			if (schedule.schedule_end != null) {
+				scheduleEnd = new Date(Date.parse(schedule.schedule_end));
+				scheduleEnd = scheduleEnd.toLocaleTimeString(navigator.language, {
+					hour: '2-digit',
+					minute:'2-digit'
+				});
+				str = str + " - " + scheduleEnd + ")";
+			} else {
+				str += ")";
+			}
+
+		}
+		return str;
 	}
 
 
-	data = fetchApi(queryCurrent);
+	
 	
 </script>
 
@@ -136,6 +161,22 @@
 		padding: 25px;
 	}
 
+	#current-schedule,
+	#next-schedule {
+		margin: 0 0 40px 20px;
+	}
+
+	#track-list {
+		border: 2px solid #333;
+		margin: 20px 20px 40px 20px;
+		padding: 10px;
+	}
+
+	.play-icon,
+	.track-time-left {
+		margin: 12px;
+	}
+
 	.active {
 		color: green;
 	}
@@ -241,20 +282,31 @@
 		{:then value}
 			{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>
+			
+			{#if value.current.show}
+
+			<div id="current-schedule">
+				<h1 class="schedule-title">{@html displayShowName(value.current.show)} {displayShowSchedule(value.current)}</h1>
+				<div class="schedule-details">
+					<b>Type:</b> {value.current.type}, <b>Host:</b> {value.current.host}</div>
+				</div>
 			<div id="track-list">
 				<div id="current-track">
-					<h1>
-						<span class="play-icons">&#9654;</span>
+					<h2>
+						<span class="play-icon">&#9654;</span>
 						<span class="active track-title">{displayTitle(value)}</span>
 						<span class="track-time-left">({formatTime(timeLeft)})</span>
-					</h1>
+					</h2>
 				</div>
 			</div>
 			<div id="next-schedule">
-
+				<h2 class="schedule-title">Next: {@html displayShowName(value.next.show)} {displayShowSchedule(value)}</h2>
+				<div class="schedule-details">
+					<b>Type:</b> {value.next.type}, <b>Host:</b> {value.next.host}
+				</div>
 			</div>
+
+			{/if}
 		{:catch error}
 			<p style="color:red">{error}</p>
 		{/await}