<html
<head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<style>
	body{
		font-family: arial;
	}
	td{
		border: solid 1px #ccc;
	}
</style>
</head>
<body>
	<table id="weather-data">
		<tr>
			<td>date</td>
			<td>name</td>
			<td>latitude</td>
			<td>longitude</td>
			<td>temp</td>
			<td>temp_min</td>
			<td>temp_max</td>
			<td>pressure</td>
			<td>humidity</td>
		</tr>
	</table>
</body>
</html>

<script>
$().ready(function(){
	var location = "<?php echo $_GET['name']; ?>";
    fetchWeatherData(location);
})

function fetchWeatherData(location){
	$.get( "http://de1.winder.nom.za:10182/felmo/felmo-weather-app/public/weather/fetch/" + location, function( weatherData ) {
		$(weatherData).each(function(){
			console.log(this.name);
			var html = "<tr>"
			+"<td>" + this.created_at + "</td>"
			+"<td>" + this.name + "</td>"
			+"<td>" + this.latitude + "</td>"
			+"<td>" + this.longitude + "</td>"
			+"<td>" + this.temp + "</td>"
			+"<td>" + this.temp_min + "</td>"
			+"<td>" + this.temp_max + "</td>"
			+"<td>" + this.pressure + "</td>"
			+"<td>" + this.humidity + "</td>"
			+"</td>";
			$("#weather-data").append(html);
		});
	});
}
</script>
