Differentiation planned_playlist and playlogs. #2

src/StudioClock.svelte

@@ -93,7 +93,6 @@
 		}
 	}
 
-
 	/* Initialize the component */
 	function initComponent(value) {
 
@@ -124,7 +123,6 @@
 		return "";
 	}
 
-
 	/* Checks if there's an existing, valid timeslot */
 	function hasValidTimeslot(value) {
 		if (value.current_timeslot != null) {
@@ -138,14 +136,22 @@
 		return false;
 	}
 
+	/* Retrieve planned playlist items after the current one */
+	function getFuturePlaylistItems(value) {
+		let items = [];
+		let now = Date();
 
-	/* Checks if there is an existing valid playlist */
-	function hasValidPlaylist(value) {
-		if (value.current_playlist != null)
-			return true;
-		return false;
+		if ("planned_playlist" in value) {
+			if (value.planned_playlist) {				
+				for (let i in items) {
+					let track_start = Date.parse(i.track_start)
+					if (track_start > now)
+						items.push(i);
+				}
+			}
+		}
+		return items;
 	}
-
 
 	/* Display the title of a track */
 	function displayTitle(track) {
@@ -191,7 +197,6 @@
 		return "";
 	}
 
-
 	/* Display the name of a show */
 	function displayShowName(timeslot, defaultText) {
 		let name = ""
@@ -203,7 +208,6 @@
 		return name;
 	}
 
-
 	/* Display the timeslot of a show */
 	function displayShowTimeslot(timeslot) {
 		let str = "";
@@ -235,7 +239,6 @@
 		return "(" + str + ")";
 	}
 
-
 	/* Indicates if some fallback timeslot is playing */
 	function isFallbackTimeslot(value) {
 		if ("current_timeslot" in value)
@@ -624,9 +627,11 @@
 					</div>
 					<div id="playlist">
 
-						{#if hasValidPlaylist(value)}
+						<!-- {#if hasValidPlaylist(value)} -->
 							<ol>
-							{#each value.current_playlist.entries as entry, index}
+
+							<!-- Render playlog currently playing -->
+							{#each value.current_playlogs as entry, index}
 								{#if isActive(entry, value.current_track)}
 								
 								<li id="current-playlist-entry" class="playlist-entry is-active" bind:this={currentTrackElement}>
@@ -639,6 +644,7 @@
 									<span class="track-time-left">{formatTime(timeLeft)}</span>
 								</li>
 
+								<!-- Render playlogs before the one currently playing -->
 								{:else}
 
 								<li class="playlist-entry">
@@ -655,8 +661,23 @@
 								{/if}
 
 							{/each}
+
+							<!-- Render planned playlist items which are in the future -->
+							{#each getFuturePlaylistItems(value) as entry, index}
+								<li class="playlist-entry">
+									<span class="track-title">{displayTitle(entry)}</span>
+									<span class="track-type">{displayType(entry)}</span>
+									{#if isFallbackEntry(value, entry)}	
+										<span class="fallback-indicator">{fallbacktext}</span>
+									{/if}
+									{#if entry.track_duration > 0 }
+										<span class="track-duration">{formatTime(entry.track_duration)}</span>
+									{/if}
+								</li>	
+							{/each}
+
 							</ol>
-						{:else}
+						<!-- {:else}
 							{#if value.current_track}
 								<div id="current-track" class="is-active">
 									<h2>
@@ -666,8 +687,8 @@
 										<span class="track-time-left">{formatTime(timeLeft)}</span>
 									</h2>
 								</div>
-							{/if}								
-						{/if}
+							{/if}								 -->
+						<!-- {/if} -->
 					</div>
 
 				</div>