index.eta 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <% layout("/sk/layout") %>
  2. <%~ include("/sk/partials/topbar") %>
  3. <% const tickIcon = `
  4. <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  5. <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
  6. <circle cx="12" cy="12" r="10" />
  7. <path d="m9 12l2 2l4-4" />
  8. </g>
  9. </svg>
  10. ` %>
  11. <% const xIcon = `
  12. <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  13. <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
  14. <circle cx="12" cy="12" r="10" />
  15. <path d="m15 9l-6 6m0-6l6 6" />
  16. </g>
  17. </svg>
  18. ` %>
  19. <% const tempIcon = `
  20. <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  21. <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" />
  22. </svg>
  23. ` %>
  24. <% const pressureIcon = `
  25. <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  26. <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" />
  27. </svg>
  28. ` %>
  29. <% const humidityIcon = `
  30. <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  31. <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" />
  32. </svg>
  33. ` %>
  34. <% const altitudeIcon = `
  35. <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  36. <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
  37. <circle cx="12" cy="12" r="10" />
  38. <path d="m16 12l-4-4l-4 4m4 4V8" />
  39. </g>
  40. </svg>
  41. ` %>
  42. <div id="mainStats">
  43. <% /* <div class="message error">
  44. <p>Bola zistená vysoká teplota!</p>
  45. <p>Bol zistený vysoký tlak!</p>
  46. <p>Bola zistená vysoká vlhkosť!</p>
  47. </div> */ %>
  48. <div class="stats">
  49. <div class="wrapper">
  50. <h2>vnútorné</h2>
  51. <div class="values indoor">
  52. <p><a role="button" href="/history/indoorTemp"><%~ tempIcon %></a> <span id="indoorTemp"><%= it.data?.[0]?.indoorTemp / 100 %></span> °C</p>
  53. <p><a role="button" href="/history/indoorPressure"><%~ pressureIcon %></a> <span id="indoorPressure"><%= it.data?.[0]?.indoorPressure / 100 %></span> hPa</p>
  54. <p><a role="button" href="/history/indoorHumidity"><%~ humidityIcon %></a> <span id="indoorHumidity"><%= it.data?.[0]?.indoorHumidity / 100 %></span> %</p>
  55. <p><a role="button" href="/history/indoorAltitude"><%~ altitudeIcon %></a> <span id="indoorAltitude"><%= it.data?.[0]?.indoorAltitude / 100 %></span> m</p>
  56. </div>
  57. </div>
  58. <div class="wrapper">
  59. <h2>vonkajšie</h2>
  60. <div class="values outdoor">
  61. <p><a role="button" href="/history/outdoorConnected" id="outdoorConnectedIcon"><%~ it.data?.[0]?.outdoorConnected ? tickIcon : xIcon %></a> <span id="outdoorConnectedText"><%= it.data?.[0]?.outdoorConnected ? `pripojené` : `odpojené` %></span></p>
  62. <p><a role="button" href="/history/outdoorTemp"><%~ tempIcon %></a> <span id="outdoorTemp"><%= it.data?.[0]?.outdoorTemp / 100 %></span> °C</p>
  63. <p><a role="button" href="/history/outdoorPressure"><%~ pressureIcon %></a> <span id="outdoorPressure"><%= it.data?.[0]?.outdoorPressure / 100 %></span> hPa</p>
  64. <p><a role="button" href="/history/outdoorHumidity"><%~ humidityIcon %></a> <span id="outdoorHumidity"><%= it.data?.[0]?.outdoorHumidity / 100 %></span> %</p>
  65. <p><a role="button" href="/history/outdoorAltitude"><%~ altitudeIcon %></a> <span id="outdoorAltitude"><%= it.data?.[0]?.outdoorAltitude / 100 %></span> m</p>
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. <script defer>
  71. setInterval(async () => {
  72. const response = await fetch('/currentData')
  73. const data = await response.json()
  74. const indoorTemp = document.querySelector(`#indoorTemp`)
  75. const indoorPressure = document.querySelector(`#indoorPressure`)
  76. const indoorHumidity = document.querySelector(`#indoorHumidity`)
  77. const indoorAltitude = document.querySelector(`#indoorAltitude`)
  78. const outdoorConnectedIcon = document.querySelector(`#outdoorConnectedIcon`)
  79. const outdoorConnectedText = document.querySelector(`#outdoorConnectedText`)
  80. const outdoorTemp = document.querySelector(`#outdoorTemp`)
  81. const outdoorPressure = document.querySelector(`#outdoorPressure`)
  82. const outdoorHumidity = document.querySelector(`#outdoorHumidity`)
  83. const outdoorAltitude = document.querySelector(`#outdoorAltitude`)
  84. indoorTemp.textContent = data?.indoorTemp / 100
  85. indoorPressure.textContent = data?.indoorPressure / 100
  86. indoorHumidity.textContent = data?.indoorHumidity / 100
  87. indoorAltitude.textContent = data?.indoorAltitude / 100
  88. const tickIcon = `<%~ tickIcon %>`
  89. const xIcon = `<%~ xIcon %>`
  90. outdoorConnectedIcon.innerHTML = data?.outdoorConnected ? tickIcon : xIcon
  91. outdoorConnectedText.textContent = data?.outdoorConnected ? `pripojené` : `odpojené`
  92. outdoorTemp.textContent = data?.outdoorTemp / 100
  93. outdoorPressure.textContent = data?.outdoorPressure / 100
  94. outdoorHumidity.textContent = data?.outdoorHumidity / 100
  95. outdoorAltitude.textContent = data?.outdoorAltitude / 100
  96. }, 10000)
  97. </script>
  98. <% /* <h3>dáta</h3>
  99. <% if (it.data?.length) { %>
  100. <div>
  101. <table>
  102. <tr>
  103. <th>čas</th>
  104. <th>vnútorné</th>
  105. <th>vonkajšie</th>
  106. </tr>
  107. <% for (const item of it.data) { %>
  108. <tr>
  109. <td><%= item.timestamp %></td>
  110. <td><strong>teplota:</strong> <%= item.indoorTemp / 100 %> °C, <strong>tlak:</strong> <%= item.indoorPressure / 100 %> hPa, <strong>vlhkosť:</strong> <%= item.indoorHumidity / 100 %>%, <strong>nadmorská výška:</strong> <%= item.indoorAltitude / 100 %>m</td>
  111. <td><strong>pripojené:</strong> <%= item.outdoorConnected %>, <strong>teplota:</strong> <%= item.outdoorTemp / 100 %> °C, <strong>tlak:</strong> <%= item.outdoorPressure / 100%>hPa, <strong>vlhkosť:</strong> <%= item.outdoorHumidity / 100 %>%, <strong>nadmorská výška:</strong> <%= item.outdoorAltitude / 100 %>m</td>
  112. </tr>
  113. <% } %>
  114. </table>
  115. </div>
  116. <% } else { %>
  117. <p>zatiaľ žiadne dáta. :(</p>
  118. <% } %> */ %>