Display fallbacks on timeslot and entry level. #2

src/StudioClock.svelte

@@ -232,19 +232,35 @@
 			}
 
 		}
-		return str;
+		return "(" + str + ")";
 	}
 	
 
-	/* Indicates if some fallback is playing */
-	function isFallback(value) {
+	/* Indicates if some fallback timeslot is playing */
+	function isFallbackTimeslot(value) {
 		if ("current_timeslot" in value)
+			if (value.current_timeslot == null)
+				return true;
+			if (value.current_timeslot.fallback_type > 0)
+				return true;
+		return false;
+	}
+
+	/* Indicates if some fallback entry is playing */
+	function isFallbackEntry(value, entry) {
+
+		/* If the whole timeslot is a fallback, then don't indicate this on entries again */
+		if (isFallbackTimeslot(value))
+			return false;
+		/* If it's a fallback without a valid playlist, with a valid timeslot, let's indicate it */
+		else if (entry.playlist_id == -1)
 			return true;
-		if (current_timeslot.fallback_type > 0)
+		/* If the playlist id doesn't match the planned playlist, let's display it as fallback */
+		else if (entry.playlist_id != value.current_timeslot.playlist_id)
 			return true;
 		return false;
 	}
-
+	
 
 	/* Check if the given track is currently playing */
 	function isActive(entry, currentTrack) {
@@ -346,7 +362,6 @@
 	}
 
 	#current-timeslot .timeslot-title {
-		text-align: center;
 		height: 100px;
     	overflow: revert;		
 	}
@@ -356,7 +371,7 @@
 		font-size: 2.8em;		
 		position: relative;
 		top: 30%;
-		transform: translateY(-50%);		
+		padding-left: 50px;
 	}
 
 	#next-timeslot .timeslot-title {
@@ -372,6 +387,7 @@
 		display: flex;
 	   	align-items: center;
 		border-top: 1px solid #333;
+		width: 99%;
 	}
 
 	#playlist::-webkit-scrollbar-track
@@ -397,6 +413,7 @@
 	#playlist ol {
 		margin-left: 33px;
 		height: 95%;
+		width: 90%;
 	}
 
 	.playlist-entry {
@@ -414,11 +431,12 @@
 		border-radius: 25px;		
 		padding: 5px 33px;		  
 		border: 1px solid gray;
+		float: right;
 	}
 	.track-time-left {
-		margin: 25px 50px;
-		border-radius: 25px;		
-		padding: 5px 33px;		  
+		padding: 5px 33px;
+		float: right;
+		border-radius: 25px;				
 		border: 1px solid gray;
 	}
 
@@ -457,7 +475,10 @@
 	.is-active .track-time-left {
 		color: rgb(43, 241, 36);
 		background-color: #222;
-		padding: 5px 15px;
+	}
+
+	.red {
+		color:red;
 	}
 
 	.error {
@@ -586,16 +607,20 @@
 
 				<div id="current-timeslot">
 					<div class="timeslot-title">
+					<div style="width: 70%; float: left; text-align: left">
 						<h1>
 							{#if hasValidTimeslot(value)}						
 								{@html displayShowName(value.current_timeslot, nocurrenttimeslot)} {displayShowTimeslot(value.current_timeslot)}
 							{:else}
-								<span class="error">{nocurrenttimeslot}</span>
-							{/if}													
-							{#if isFallback(value)}	
-								<span class="fallback-indicator">{fallbacktext}</span>
-							{/if}								
+								<span class="red">{nocurrenttimeslot}</span>
+							{/if}																				
 						</h1>
+						</div>						
+						<div style="width: 30%; float: right; text-align: right;">
+							{#if isFallbackTimeslot(value)}	
+								<h1><span class="fallback-indicator">{fallbacktext}</span></h1>
+							{/if}
+						</div>					
 					</div>
 					<div id="playlist">
 
@@ -608,6 +633,9 @@
 									<!-- <span class="play-icon">&#9654;</span> -->
 									<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}									
 									<span class="track-time-left">{formatTime(timeLeft)}</span>
 								</li>
 
@@ -616,6 +644,9 @@
 								<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}
@@ -630,7 +661,8 @@
 								<div id="current-track" class="is-active">
 									<h2>
 										<span class="track-title">{displayTitle(value.current_track)}</span>
-										<span class="track-type">{displayType(value.current_track)}</span>
+										<span class="track-type">{displayType(value.current_track)}</span>									
+										<span class="fallback-indicator">{fallbacktext}</span>									
 										<span class="track-time-left">{formatTime(timeLeft)}</span>
 									</h2>
 								</div>
@@ -642,7 +674,7 @@
 
 
 
-			{#if value.current_timeslot}
+			{#if value.next_timeslot}
 				<div id="next-timeslot">
 					<h3 class="timeslot-title">{@html displayShowName(value.next_timeslot, nonexttimeslot)} {displayShowTimeslot(value)}</h3>
 				</div>