Weather Dashboard - Copy this React, Tailwind Component to your project
<?php-include_once('esp-database.php');-//-Sanitize-and-validate-'readingsCount'-input-$readings_count-=-20;-//-Default-count-if-(isset($_GET["readingsCount"]))-{-$data-=-filter_input(INPUT_GET,-"readingsCount",-FILTER_SANITIZE_NUMBER_INT);-if-($data-&&-$data->-0)-{-$readings_count-=-$data;-}-}-//-Fetch-last-reading-$last_reading-=-getLastReadings();-if-($last_reading)-{-$last_reading_temp-=-$last_reading["value1"];-$last_reading_humi-=-$last_reading["value2"];-$last_reading_time-=-$last_reading["reading_time"];-}-else-{-$last_reading_temp-=-"--";-$last_reading_humi-=-"--";-$last_reading_time-=-"No-data-available";-}-//-Retrieve-temperature-stats-(min,-max,-avg)-$min_temp-=-minReading($readings_count,-'value1');-$max_temp-=-maxReading($readings_count,-'value1');-$avg_temp-=-avgReading($readings_count,-'value1');-//-Default-values-if-data-retrieval-fails-$min_temp-=-$min_temp-?-$min_temp['min_amount']-:-"--";-$max_temp-=-$max_temp-?-$max_temp['max_amount']-:-"--";-$avg_temp-=-$avg_temp-?-round($avg_temp['avg_amount'],-2)-:-"--";-//-Retrieve-humidity-stats-(min,-max,-avg)-$min_humi-=-minReading($readings_count,-'value2');-$max_humi-=-maxReading($readings_count,-'value2');-$avg_humi-=-avgReading($readings_count,-'value2');-//-Default-values-if-data-retrieval-fails-$min_humi-=-$min_humi-?-$min_humi['min_amount']-:-"--";-$max_humi-=-$max_humi-?-$max_humi['max_amount']-:-"--";-$avg_humi-=-$avg_humi-?-round($avg_humi['avg_amount'],-2)-:-"--";-?>-<!DOCTYPE-html>-<html>-<head>-<meta-http-equiv="Content-Type"-content="text/html;-charset=utf-8">-<link-rel="stylesheet"-type="text/css"-href="esp-style.css">-<meta-name="viewport"-content="width=device-width,-initial-scale=1">-<script-src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-</head>-<body>-<header-class="header">-<h1>📊-ESP-Weather-Station</h1>-<form-method="get">-<input-type="number"-name="readingsCount"-min="1"-placeholder="Number-of-readings-(<?php-echo-htmlspecialchars($readings_count);-?>)">-<input-type="submit"-value="UPDATE">-</form>-</header>-<p>Last-reading:-<?php-echo-htmlspecialchars($last_reading_time);-?></p>-<section-class="content">-<div-class="box-gauge--1">-<h3>TEMPERATURE</h3>-<div-class="mask">-<div-class="semi-circle"></div>-<div-class="semi-circle--mask"></div>-</div>-<p-style="font-size:-30px;"-id="temp">--</p>-<table-cellspacing="5"-cellpadding="5">-<tr>-<th-colspan="3">Temperature-<?php-echo-htmlspecialchars($readings_count);-?>-readings</th>-</tr>-<tr>-<td>Min</td>-<td>Max</td>-<td>Average</td>-</tr>-<tr>-<td><?php-echo-htmlspecialchars($min_temp);-?>-°C</td>-<td><?php-echo-htmlspecialchars($max_temp);-?>-°C</td>-<td><?php-echo-htmlspecialchars($avg_temp);-?>-°C</td>-</tr>-</table>-</div>-<div-class="box-gauge--2">-<h3>HUMIDITY</h3>-<div-class="mask">-<div-class="semi-circle"></div>-<div-class="semi-circle--mask"></div>-</div>-<p-style="font-size:-30px;"-id="humi">--</p>-<table-cellspacing="5"-cellpadding="5">-<tr>-<th-colspan="3">Humidity-<?php-echo-htmlspecialchars($readings_count);-?>-readings</th>-</tr>-<tr>-<td>Min</td>-<td>Max</td>-<td>Average</td>-</tr>-<tr>-<td><?php-echo-htmlspecialchars($min_humi);-?>-%</td>-<td><?php-echo-htmlspecialchars($max_humi);-?>-%</td>-<td><?php-echo-htmlspecialchars($avg_humi);-?>-%</td>-</tr>-</table>-</div>-</section>-<?php-echo-'<h2>-View-Latest-'-.-htmlspecialchars($readings_count)-.-'-Readings</h2>-<table-cellspacing="5"-cellpadding="5"-id="tableReadings">-<tr>-<th>ID</th>-<th>Sensor</th>-<th>Location</th>-<th>Value-1</th>-<th>Value-2</th>-<th>Value-3</th>-<th>Timestamp</th>-</tr>';-$result-=-getAllReadings($readings_count);-if-($result)-{-foreach-($result-as-$row)-{-echo-'<tr>-<td>'-.-htmlspecialchars($row["id"])-.-'</td>-<td>'-.-htmlspecialchars($row["sensor"])-.-'</td>-<td>'-.-htmlspecialchars($row["location"])-.-'</td>-<td>'-.-htmlspecialchars($row["value1"])-.-'</td>-<td>'-.-htmlspecialchars($row["value2"])-.-'</td>-<td>'-.-htmlspecialchars($row["value3"])-.-'</td>-<td>'-.-htmlspecialchars($row["reading_time"])-.-'</td>-</tr>';-}-echo-'</table>';-}-else-{-echo-'</table><p>No-readings-available.</p>';-}-?>-<script>-//-Safely-handle-PHP-variables-and-ensure-they-are-numbers-var-value1-=-<?php-echo-isset($last_reading_temp)-?-json_encode($last_reading_temp)-:-'null';-?>;-var-value2-=-<?php-echo-isset($last_reading_humi)-?-json_encode($last_reading_humi)-:-'null';-?>;-if-(value1-&&-!isNaN(value1))-{-setTemperature(parseFloat(value1));-}-else-{-$("#temp").text("---ºC");-}-if-(value2-&&-!isNaN(value2))-{-setHumidity(parseFloat(value2));-}-else-{-$("#humi").text("---%");-}-function-setTemperature(curVal)-{-var-minTemp-=--5.0;-var-maxTemp-=-38.0;-curVal-=-Math.max(minTemp,-Math.min(maxTemp,-curVal));-var-newVal-=-scaleValue(curVal,-[minTemp,-maxTemp],-[0,-180]);-$('.gauge--1-.semi-circle--mask').attr({-style:-'-webkit-transform:-rotate('-+-newVal-+-'deg);'-+-'-moz-transform:-rotate('-+-newVal-+-'deg);'-+-'transform:-rotate('-+-newVal-+-'deg);'-});-$("#temp").text(curVal-+-'-ºC');-}-function-setHumidity(curVal)-{-var-minHumi-=-0;-var-maxHumi-=-100;-curVal-=-Math.max(minHumi,-Math.min(maxHumi,-curVal));-var-newVal-=-scaleValue(curVal,-[minHumi,-maxHumi],-[0,-180]);-$('.gauge--2-.semi-circle--mask').attr({-style:-'-webkit-transform:-rotate('-+-newVal-+-'deg);'-+-'-moz-transform:-rotate('-+-newVal-+-'deg);'-+-'transform:-rotate('-+-newVal-+-'deg);'-});-$("#humi").text(curVal-+-'-%');-}-function-scaleValue(value,-from,-to)-{-var-scale-=-(to[1]---to[0])-/-(from[1]---from[0]);-var-capped-=-Math.min(from[1],-Math.max(from[0],-value))---from[0];-return-Math.round(capped-*-scale-+-to[0]);-}-</script>-</body>-</html>
