Basic rendering of tracks.

contrib/aura-player/README.md

@@ -17,4 +17,9 @@ Provided components:
 
 ## Run
 
-    npm start
+    npm start
\ No newline at end of file
+
+
+## Resources
+
+* Svelte Docs - https://svelte.dev/docs
\ No newline at end of file

contrib/aura-player/src/App.svelte

 <script>
 	import TrackService from './TrackService.svelte';
 
-	let query = "trackservice/3";
+	let queryTrackservice = "trackservice";
 	let result;
 
-	async function getResult() {
+	async function getData(query) {
 		// FIXME Configure DataURL and Port
 		let response = await fetch(`http://localhost:3333/api/v1/${query}`);
-		let text = await response.text();
-		let data = text;
-		return data;
-	}
+		let data = await response.json();
 
-	function submitHandler() {
-		result = getResult();
-		query = "";
+		if (response.ok) {
+			return data;
+		} else {
+			throw new Error(data)
+		}
 	}
 
-	submitHandler();
+
+	result = getData(queryTrackservice);
+
 </script>
 
 <div class="container mt-5">
@@ -26,30 +27,16 @@
 		<div class="col-md-8 text-center">
 			<h1 class="display-4">Track Service</h1>
 
-
-			{#if result===undefined}
-
-			<p></p>
-
-			{:else}
-
 			{#await result}
-
-			<div class="spinner-border mt-5" role="status">
-    			<span class="sr-only">Loading...</span>
-  			</div>
-
+				<div class="spinner-border mt-5" role="status">
+					<span class="sr-only">Loading...</span>
+				</div>
 			{:then value}
-
-			<TrackService data={value} />
-
+				<TrackService data={value} />
 			{:catch error}
-
-			<TrackService data={error.message}/>
-				
+				<p style="color:red">{error.message}</p>
 			{/await}
 
-			{/if}
 		</div>
 		<div class="col-md"></div>
 	</div>

contrib/aura-player/src/TrackService.svelte

@@ -3,8 +3,11 @@ import { fly } from 'svelte/transition';
 export let data;
 </script>
     
-<div class="card mt-5" transition:fly="{{ y: 150, duration: 300 }}">
-    <div class="card-body">
-        <h5 class="card-title">{data}</h5>
+
+{#each data as track}
+    <div class="card mt-5" transition:fly="{{ y: 150, duration: 500 }}">
+        <div class="card-body">
+            <h5 class="card-title"><b>{track.track_start}</b>: {track.artist} - {track.title} ({track.duration})</h5>
+        </div>
     </div>
-</div>
+{/each}
\ No newline at end of file