sosokker/openweathermap-dashboard
1
0
Fork 0
mirror of https://github.com/Sosokker/openweathermap-dashboard.git synced 2025-12-18 21:54:05 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: generate table base on info

Browse Source
This commit is contained in:
Sosokker 2025-02-02 08:34:41 +07:00
parent 69f57767bb
commit 191b1bdbd6
2 changed files with 64 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
nginx/web/index.css
View File

@ -16,6 +16,7 @@
#table-section { #table-section {
overflow-x: auto; overflow-x: auto;
overflow-y: auto;
} }
#map { #map {

147
nginx/web/index.html
View File

@ -22,97 +22,76 @@
<body> <body>
<div id="main-section"> <div id="main-section">
<script>
async function fetchData(scale) {
let url = "http://localhost:8080/api/data";
if (scale === true) {
url += "?scale=true"
}
try {
const res = await fetch(url)
const weatherData = await res.json()
return weatherData
} catch {
console.error(error)
return null
}
}
</script>
<div id="statistic"> <div id="statistic">
<h2>Rainfall Statistics</h2> <h2>Rainfall Statistics</h2>
<p>Today rain/hr.</p> <p>Today rain/hr.</p>
<div id="table-section"> <div id="table-section">
<table> <script>
<tbody> async function renderTable() {
<tr> const res = fetchData(false);
<th rowspan="2"><strong>Location</strong></th> res.then((weatherData) => {
<th colspan="2"><strong>Coordinate</strong></th>
<th rowspan="2"><strong>Rain Per Hour</strong></th> let tableHTML = `
</tr> <table border="1">
<tr> <thead>
<th>Latitude</th> <tr>
<th>Longitude</th> <th rowspan="2"><strong>Location</strong></th>
</tr> <th colspan="2"><strong>Coordinate</strong></th>
<tr> <th rowspan="2"><strong>Rain Per Hour</strong></th>
<td>8</td> </tr>
<td>0.395</td> <tr>
<td>±8</td> <th>Latitude</th>
<td>50.27</td> <th>Longitude</th>
</tr> </tr>
<tr> </thead>
<td>10</td> <tbody>`;
<td>0.617</td>
<td>±6</td> weatherData.forEach((data) => {
<td>78.54</td> console.log(data)
</tr> tableHTML += `
<tr> <tr>
<td>12</td> <td>${data.name || "N/A"}</td>
<td>0.888</td> <td>${data.lat || 0}</td>
<td>±6</td> <td>${data.lon || 0}</td>
<td>113.10</td> <td>${data.rain["1h"] || "N/A"}</td>
</tr> </tr>`;
<tr> });
<td>16</td>
<td>1.580</td> tableHTML += `
<td>±5</td> </tbody>
<td>201.06</td> </table>`;
</tr>
<tr>
<td>20</td> const d = document.getElementById("table-section")
<td>2.470</td> d.innerHTML = tableHTML
<td>±5</td> }).catch((error) => {
<td>314.16</td> const tableHTML = "<p>table not availaible</p>"
</tr> const d = document.getElementById("table-section")
<tr> d.innerHTML = tableHTML
<td>22</td> })
<td>2.984</td> }
<td>±4</td> renderTable();
<td>380.13</td> </script>
</tr>
<tr>
<td>25</td>
<td>3.850</td>
<td>±4</td>
<td>490.88</td>
</tr>
<tr>
<td>28</td>
<td>4.840</td>
<td>±4</td>
<td>615.75</td>
</tr>
<tr>
<td>32</td>
<td>6.310</td>
<td>±4</td>
<td>804.25</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
<div id="map"> <div id="map">
<script>
async function fetchData(scale) {
let url = "http://localhost:8080/api/data";
if (scale === true) {
url += "?scale=true"
}
try {
const res = await fetch(url)
const weatherData = await res.json()
return weatherData
} catch {
console.error(error)
return null
}
}
</script>
<div id="rain-marker"> <div id="rain-marker">
<script> <script>
async function updateRainMarker() { async function updateRainMarker() {