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

Initial displaying of API response.

parent f4f92dfd
...@@ -12,15 +12,59 @@ ...@@ -12,15 +12,59 @@
onMount(() => { onMount(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
time = new Date(); time = new Date();
}, 1000); }, 1000);
return () => { return () => {
clearInterval(interval); 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> </script>
<style> <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 { svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -58,47 +102,67 @@ ...@@ -58,47 +102,67 @@
} }
</style> </style>
<svg viewBox='-50 -50 100 100'> <div id="studio-clock">
<circle class='clock-face' r='48'/> <div id="left-column" class="column">
<svg viewBox='-50 -50 100 100'>
<!-- markers --> <circle class='clock-face' r='48'/>
{#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
<line <!-- markers -->
class='major' {#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
y1='35' <line
y2='45' class='major'
transform='rotate({30 * minute})' y1='35'
/> y2='45'
transform='rotate({30 * minute})'
/>
{#each [1, 2, 3, 4] as offset}
<line
class='minor'
y1='42'
y2='45'
transform='rotate({6 * (minute + offset)})'
/>
{/each}
{/each}
<!-- hour hand -->
<line
class='hour'
y1='2'
y2='-20'
transform='rotate({30 * hours + minutes / 2})'
/>
{#each [1, 2, 3, 4] as offset} <!-- minute hand -->
<line <line
class='minor' class='minute'
y1='42' y1='4'
y2='45' y2='-30'
transform='rotate({6 * (minute + offset)})' transform='rotate({6 * minutes + seconds / 10})'
/> />
{/each}
{/each} <!-- second hand -->
<g transform='rotate({6 * seconds})'>
<!-- hour hand --> <line class='second' y1='10' y2='-38'/>
<line <line class='second-counterweight' y1='10' y2='2'/>
class='hour' </g>
y1='2' </svg>
y2='-20' </div>
transform='rotate({30 * hours + minutes / 2})'
/> <div id="right-column" class="column">
<h2>Playing ></h2>
<!-- minute hand -->
<line {#await currentlyPlaying}
class='minute' <div class="spinner-border mt-5" role="status">
y1='4' <span class="sr-only">Loading...</span>
y2='-30' </div>
transform='rotate({6 * minutes + seconds / 10})' {:then value}
/> <h1>{value}</h1>
<h3 class="active">{value.track.artist} - {value.track.title}</h3>
<!-- second hand --> {:catch error}
<g transform='rotate({6 * seconds})'> <p style="color:red">{error.message}</p>
<line class='second' y1='10' y2='-38'/> {/await}
<line class='second-counterweight' y1='10' y2='2'/> </div>
</g>
</svg> </div>
\ No newline at end of file \ 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