<script>
	import TrackService from './TrackService.svelte';

	let queryTrackservice = "trackservice";
	let result;

	async function getData(query) {
		// FIXME Configure DataURL and Port
		let response = await fetch(`http://localhost:3333/api/v1/${query}`);
		let data = await response.json();

		if (response.ok) {
			return data;
		} else {
			throw new Error(data)
		}
	}


	result = getData(queryTrackservice);

</script>

<div class="container mt-5">
	<div class="row">
		<div class="col-md"></div>
		<div class="col-md-8 text-center">
			<h1 class="display-4">Track Service</h1>

			{#await result}
				<div class="spinner-border mt-5" role="status">
					<span class="sr-only">Loading...</span>
				</div>
			{:then value}
				<TrackService data={value} />
			{:catch error}
				<p style="color:red">{error.message}</p>
			{/await}

		</div>
		<div class="col-md"></div>
	</div>
</div>