<script>
	import { onMount } from "../../../node_modules/svelte/internal";
	import icon from "$lib/images/sauna.svg"

	let backend_url = "https://home.blackfinn.de/sauna/sample";

	let temperature_value = 0.0
	let temperature_unit = "°C"

	function get_temperature() {
		fetch(backend_url)
		.then(response => response.json())
		.then(data => {
			temperature_unit = data.unit
			temperature_value = data.value
		}).catch(error => {
			console.log(error);
			return [];
		});
	}

	setInterval(() => {
		get_temperature();
	}, 1000)

	onMount(async () => {
		get_temperature();
	});
</script>

<svelte:head>
	<title>Sauna</title>
	<meta name="description" content="Sauna"/>
</svelte:head>

<section id='content_id' class='content'>
	<h1>{temperature_value} {temperature_unit}</h1>
	<figure>
		<img src={icon} alt="Sauna" width=150/>
	</figure>
	<h1>Sauna</h1>
</section>
