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

Display current and next schedule.

parent 99d7e97b
......@@ -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, {
function displayShowName(show) {
let name = ""
if (show == null || show.name == null) {
name = '<span class="error">No show scheduled!</span>';
} else {
name = show.name;
}
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'
});
scheduleEnd = date.toLocaleTimeString(navigator.language, {
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'
});
return "(" + scheduleStart + " - " + scheduleEnd + ")";
str = str + " - " + scheduleEnd + ")";
} else {
str += ")";
}
return "";
}
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}
......
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