Commit 99d7e97b authored by David Trattnig's avatar David Trattnig
Browse files

Display show, schedule, error handling, time left.

parent ff982e72
<script>
import { onMount } from 'svelte';
export let apiUrl = "http://localhost:3333/api/v1";
let time = new Date();
let queryCurrent = "/trackservice/current";
let data;
let currentTrack = null;
let timeLeft;
// these automatically update when `time`
// changes, because of the `$:` prefix
......@@ -12,6 +20,13 @@
onMount(() => {
const interval = setInterval(() => {
time = new Date();
timeLeft -= 1;
if (timeLeft == 0) {
currentTrack = null;
data = null;
data = fetchApi(queryCurrent);
}
}, 1000);
......@@ -20,23 +35,83 @@
};
});
let queryTrackservice = "trackservice";
let currentlyPlaying;
async function getData(query) {
// FIXME Configure DataURL and Port
let response = await fetch(`http://localhost:3333/api/v1/trackservice/${query}`);
let data = await response.json();
async function fetchApi(query) {
let response = await fetch(apiUrl+query);
let data;
try {
data = await response.json();
} catch(e) {
console.log("Error while converting response to JSON!", e);
throw new Error(response.statusText);
}
if (response.ok) {
console.log(data);
return data;
} else {
throw new Error(data)
console.log("Error:", data);
throw new Error(data.message);
}
}
currentlyPlaying = getData("current");
function setCurrentTrack(track) {
if (currentTrack == null && track != null && track.track != null) {
currentTrack = track;
let t = time - Date.parse(track.track_start);
t = parseInt(t/1000);
timeLeft = track.track.duration - t;
console.log("TIMELEFT: "+timeLeft);
}
return "";
}
function displayTitle(track) {
if (track != null && track.track != null) {
let artist = "";
if (track.track.artist != "")
artist = track.track.artist + " - ";
return artist + track.track.title;
}
return "";
}
function formatTime(seconds) {
if (seconds != null && Number.isInteger(seconds)) {
let d = new Date(null);
d.setSeconds(seconds);
let s;
if (seconds > 3600)
s = d.toISOString().substr(11, 8);
else
s = d.toISOString().substr(14, 5);
return s;
}
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 + ")";
}
return "";
}
data = fetchApi(queryCurrent);
</script>
......@@ -158,19 +233,32 @@ currentlyPlaying = getData("current");
</div>
<div id="right-column" class="column">
<h2>&#9654; Playing</h2>
{#await currentlyPlaying}
{#await data}
<div class="spinner-border mt-5" role="status">
<span class="sr-only">Loading...</span>
</div>
{:then value}
<h1>{value.show.name}</h1>
<span>Type: {value.show.type}, Host: {value.show.host}</span>
<h3 class="active">{value.track.artist} - {value.track.title}</h3>
{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>
<div id="track-list">
<div id="current-track">
<h1>
<span class="play-icons">&#9654;</span>
<span class="active track-title">{displayTitle(value)}</span>
<span class="track-time-left">({formatTime(timeLeft)})</span>
</h1>
</div>
</div>
<div id="next-schedule">
</div>
{:catch error}
<p style="color:red">{error.message}</p>
<p style="color:red">{error}</p>
{/await}
</div>
</div>
......
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