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

Initial displaying of API response.

parent f4f92dfd
......@@ -12,15 +12,59 @@
onMount(() => {
const interval = setInterval(() => {
time = new Date();
}, 1000);
return () => {
clearInterval(interval);
};
});
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();
if (response.ok) {
console.log(data);
return data;
} else {
throw new Error(data)
}
}
currentlyPlaying = getData("current");
</script>
<style>
#studio-clock {
width: calc(100% - 200px);
margin:100px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border: 2px solid #333;
flex-direction: row;
}
#left-column {
width: 30%;
padding: 25px;
}
#right-column {
width: 70%;
padding: 25px;
}
.active {
color: green;
}
svg {
width: 100%;
height: 100%;
......@@ -58,7 +102,9 @@
}
</style>
<svg viewBox='-50 -50 100 100'>
<div id="studio-clock">
<div id="left-column" class="column">
<svg viewBox='-50 -50 100 100'>
<circle class='clock-face' r='48'/>
<!-- markers -->
......@@ -101,4 +147,22 @@
<line class='second' y1='10' y2='-38'/>
<line class='second-counterweight' y1='10' y2='2'/>
</g>
</svg>
\ No newline at end of file
</svg>
</div>
<div id="right-column" class="column">
<h2>Playing ></h2>
{#await currentlyPlaying}
<div class="spinner-border mt-5" role="status">
<span class="sr-only">Loading...</span>
</div>
{:then value}
<h1>{value}</h1>
<h3 class="active">{value.track.artist} - {value.track.title}</h3>
{:catch error}
<p style="color:red">{error.message}</p>
{/await}
</div>
</div>
\ No newline at end of file
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