| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- <% layout("/en/layout", { title: it.meteostanica.name }) %>
- <%~ include("/en/panel/partials/navbar") %>
- <% const tickIcon = `
- <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
- <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
- <circle cx="12" cy="12" r="10" />
- <path d="m9 12l2 2l4-4" />
- </g>
- </svg>
- ` %>
- <% const xIcon = `
- <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
- <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
- <circle cx="12" cy="12" r="10" />
- <path d="m15 9l-6 6m0-6l6 6" />
- </g>
- </svg>
- ` %>
- <% const tempIcon = `
- <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
- <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0" />
- </svg>
- ` %>
- <% const pressureIcon = `
- <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
- <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 14l4-4M3.34 19a10 10 0 1 1 17.32 0" />
- </svg>
- ` %>
- <% const humidityIcon = `
- <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
- <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5S5 13 5 15a7 7 0 0 0 7 7" />
- </svg>
- ` %>
- <%~ include("/en/panel/stations/partials/details", { meteostanica: it.meteostanica }) %>
- <% if (it.data?.[0]) { %>
- <div id="mainStats">
- <% /* <div class="message error">
- <p>High temperature was detcted!</p>
- <p>High pressure was detcted!</p>
- <p>High humidity was detcted!</p>
- </div> */ %>
- <p><em>last updated: <%= it.data?.[0]?.timestamp %></em></p>
- <div class="stats">
- <div class="wrapper">
- <h2>indoor</h2>
- <div class="values indoor">
- <p><a role="button" href="/en/panel/stations/<%= it.meteostanica.id %>/history/indoorTemp"><%~ tempIcon %></a> <span id="indoorTemp"><%= it.data?.[0]?.indoorTemp / 100 %></span> °C</p>
- <p><a role="button" href="/en/panel/stations/<%= it.meteostanica.id %>/history/indoorPressure"><%~ pressureIcon %></a> <span id="indoorPressure"><%= it.data?.[0]?.indoorPressure / 100 %></span> hPa</p>
- <p><a role="button" href="/en/panel/stations/<%= it.meteostanica.id %>/history/indoorHumidity"><%~ humidityIcon %></a> <span id="indoorHumidity"><%= it.data?.[0]?.indoorHumidity / 100 %></span> %</p>
- </div>
- </div>
- <div class="wrapper">
- <h2>outdoor</h2>
- <div class="values outdoor">
- <p><a role="button" href="/en/panel/stations/<%= it.meteostanica.id %>/history/outdoorConnected" id="outdoorConnectedIcon"><%~ it.data?.[0]?.outdoorConnected ? tickIcon : xIcon %></a> <span id="outdoorConnectedText"><%= it.data?.[0]?.outdoorConnected ? `connected` : `disconnected` %></span></p>
- <p><a role="button" href="/en/panel/stations/<%= it.meteostanica.id %>/history/outdoorTemp"><%~ tempIcon %></a> <span id="outdoorTemp"><%= it.data?.[0]?.outdoorTemp / 100 %></span> °C</p>
- <p><a role="button" href="/en/panel/stations/<%= it.meteostanica.id %>/history/outdoorPressure"><%~ pressureIcon %></a> <span id="outdoorPressure"><%= it.data?.[0]?.outdoorPressure / 100 %></span> hPa</p>
- <p><a role="button" href="/en/panel/stations/<%= it.meteostanica.id %>/history/outdoorHumidity"><%~ humidityIcon %></a> <span id="outdoorHumidity"><%= it.data?.[0]?.outdoorHumidity / 100 %></span> %</p>
- </div>
- </div>
- </div>
- </div>
- <script defer>
- setInterval(async () => {
- const response = await fetch('/panel/stations/<%= it.meteostanica.id %>/currentData')
- const data = await response.json()
- const indoorTemp = document.querySelector(`#indoorTemp`)
- const indoorPressure = document.querySelector(`#indoorPressure`)
- const indoorHumidity = document.querySelector(`#indoorHumidity`)
- const outdoorConnectedIcon = document.querySelector(`#outdoorConnectedIcon`)
- const outdoorConnectedText = document.querySelector(`#outdoorConnectedText`)
- const outdoorTemp = document.querySelector(`#outdoorTemp`)
- const outdoorPressure = document.querySelector(`#outdoorPressure`)
- const outdoorHumidity = document.querySelector(`#outdoorHumidity`)
- indoorTemp.textContent = data?.indoorTemp / 100
- indoorPressure.textContent = data?.indoorPressure / 100
- indoorHumidity.textContent = data?.indoorHumidity / 100
- const tickIcon = `<%~ tickIcon %>`
- const xIcon = `<%~ xIcon %>`
- outdoorConnectedIcon.innerHTML = data?.outdoorConnected ? tickIcon : xIcon
- outdoorConnectedText.textContent = data?.outdoorConnected ? `connected` : `disconnected`
- outdoorTemp.textContent = data?.outdoorTemp / 100
- outdoorPressure.textContent = data?.outdoorPressure / 100
- outdoorHumidity.textContent = data?.outdoorHumidity / 100
- }, 10000)
- </script>
- <% } %>
|