From 72c626f993ea10ab6709fb60e74f8ef48524d0b5 Mon Sep 17 00:00:00 2001
From: David Trattnig <david.trattnig@o94.at>
Date: Mon, 9 Mar 2020 15:22:24 +0100
Subject: [PATCH] Initial displaying of API response.
---
contrib/aura-clock/src/StudioClock.svelte | 146 ++++++++++++++++------
1 file changed, 105 insertions(+), 41 deletions(-)
diff --git a/contrib/aura-clock/src/StudioClock.svelte b/contrib/aura-clock/src/StudioClock.svelte
index 49d3a7f8..5dad818d 100644
--- a/contrib/aura-clock/src/StudioClock.svelte
+++ b/contrib/aura-clock/src/StudioClock.svelte
@@ -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,47 +102,67 @@
}
</style>
-<svg viewBox='-50 -50 100 100'>
- <circle class='clock-face' r='48'/>
-
- <!-- markers -->
- {#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
- <line
- class='major'
- y1='35'
- y2='45'
- transform='rotate({30 * minute})'
- />
+<div id="studio-clock">
+ <div id="left-column" class="column">
+ <svg viewBox='-50 -50 100 100'>
+ <circle class='clock-face' r='48'/>
+
+ <!-- markers -->
+ {#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
+ <line
+ class='major'
+ 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
- class='minor'
- y1='42'
- y2='45'
- transform='rotate({6 * (minute + offset)})'
+ class='minute'
+ y1='4'
+ y2='-30'
+ transform='rotate({6 * minutes + seconds / 10})'
/>
- {/each}
- {/each}
-
- <!-- hour hand -->
- <line
- class='hour'
- y1='2'
- y2='-20'
- transform='rotate({30 * hours + minutes / 2})'
- />
-
- <!-- minute hand -->
- <line
- class='minute'
- y1='4'
- y2='-30'
- transform='rotate({6 * minutes + seconds / 10})'
- />
-
- <!-- second hand -->
- <g transform='rotate({6 * seconds})'>
- <line class='second' y1='10' y2='-38'/>
- <line class='second-counterweight' y1='10' y2='2'/>
- </g>
-</svg>
\ No newline at end of file
+
+ <!-- second hand -->
+ <g transform='rotate({6 * seconds})'>
+ <line class='second' y1='10' y2='-38'/>
+ <line class='second-counterweight' y1='10' y2='2'/>
+ </g>
+ </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
--
GitLab