Initial displaying of API response.

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