Commit d3650337 authored by David Trattnig's avatar David Trattnig
Browse files

Display current and next schedule.

parent 99d7e97b
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
let time = new Date(); let time = new Date();
let queryCurrent = "/trackservice/current"; let queryCurrent = "/clock";
let data; let data;
let currentTrack = null; let currentTrack = null;
...@@ -17,12 +17,15 @@ ...@@ -17,12 +17,15 @@
$: minutes = time.getMinutes(); $: minutes = time.getMinutes();
$: seconds = time.getSeconds(); $: seconds = time.getSeconds();
data = fetchApi(queryCurrent);
onMount(() => { onMount(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
time = new Date(); time = new Date();
timeLeft -= 1; timeLeft -= 1;
if (timeLeft == 0) { if (timeLeft <= 0 || data == null) {
currentTrack = null; currentTrack = null;
data = null; data = null;
data = fetchApi(queryCurrent); data = fetchApi(queryCurrent);
...@@ -55,25 +58,24 @@ ...@@ -55,25 +58,24 @@
} }
} }
function setCurrentTrack(track) { function setCurrentTrack(info) {
if (currentTrack == null && track != null && track.track != null) { if (currentTrack == null && info != null && info.track != null) {
currentTrack = track; currentTrack = info;
let t = time - Date.parse(track.track_start); let t = time - Date.parse(info.track_start);
t = parseInt(t/1000); t = parseInt(t/1000);
timeLeft = track.track.duration - t; timeLeft = info.track.duration - t - 4;
console.log("TIMELEFT: "+timeLeft);
} }
return ""; return "";
} }
function displayTitle(track) { function displayTitle(info) {
if (track != null && track.track != null) { if (info != null && info.track != null) {
let artist = ""; let artist = "";
if (track.track.artist != "") if (info.track.artist != "")
artist = track.track.artist + " - "; artist = info.track.artist + " - ";
return artist + track.track.title; return artist + info.track.title;
} }
return ""; return "";
} }
...@@ -93,25 +95,48 @@ ...@@ -93,25 +95,48 @@
return ""; return "";
} }
function displayShowSchedule(track) { function displayShowName(show) {
if (track.schedule != null) { let name = ""
let scheduleStart = Date.parse(track.schedule_start); if (show == null || show.name == null) {
let scheduleEnd = Date.parse(track.schedule_end); name = '<span class="error">No show scheduled!</span>';
scheduleStart = date.toLocaleTimeString(navigator.language, { } else {
hour: '2-digit', name = show.name;
minute:'2-digit'
});
scheduleEnd = date.toLocaleTimeString(navigator.language, {
hour: '2-digit',
minute:'2-digit'
});
return "(" + scheduleStart + " - " + scheduleEnd + ")";
} }
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> </script>
...@@ -136,6 +161,22 @@ ...@@ -136,6 +161,22 @@
padding: 25px; 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 { .active {
color: green; color: green;
} }
...@@ -241,20 +282,31 @@ ...@@ -241,20 +282,31 @@
{:then value} {:then value}
{setCurrentTrack(value)} {setCurrentTrack(value)}
<!-- <h2>&#9654; Playing</h2> --> <!-- <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="track-list">
<div id="current-track"> <div id="current-track">
<h1> <h2>
<span class="play-icons">&#9654;</span> <span class="play-icon">&#9654;</span>
<span class="active track-title">{displayTitle(value)}</span> <span class="active track-title">{displayTitle(value)}</span>
<span class="track-time-left">({formatTime(timeLeft)})</span> <span class="track-time-left">({formatTime(timeLeft)})</span>
</h1> </h2>
</div> </div>
</div> </div>
<div id="next-schedule"> <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> </div>
{/if}
{:catch error} {:catch error}
<p style="color:red">{error}</p> <p style="color:red">{error}</p>
{/await} {/await}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment