data refresh

assets/css/style.css

@@ -45,6 +45,7 @@ body {
     border-radius: 1rem;
     width: 10em;
     flex: 1;
+    font-size: 1.2em;
 }
 
 p {

templates/sk/index.eta

@@ -56,26 +56,59 @@
         <div class="wrapper">
             <h3>vnútorné</h3>
             <div class="values indoor">
-                <p><%~ tempIcon %> <%= it.data?.[0]?.indoorTemp / 100 %> °C</p>
-                <p><%~ pressureIcon %> <%= it.data?.[0]?.indoorPressure / 100 %> hPa</p>
-                <p><%~ humidityIcon %> <%= it.data?.[0]?.indoorHumidity / 100 %>%</p>
-                <p><%~ altitudeIcon %> <%= it.data?.[0]?.indoorAltitude / 100 %>m</p>
+                <p><%~ tempIcon %> <span id="indoorTemp"><%= it.data?.[0]?.indoorTemp / 100 %></span> °C</p>
+                <p><%~ pressureIcon %> <span id="indoorPressure"><%= it.data?.[0]?.indoorPressure / 100 %></span> hPa</p>
+                <p><%~ humidityIcon %> <span id="indoorHumidity"><%= it.data?.[0]?.indoorHumidity / 100 %></span> %</p>
+                <p><%~ altitudeIcon %> <span id="indoorAltitude"><%= it.data?.[0]?.indoorAltitude / 100 %></span> m</p>
             </div>
         </div>
 
         <div class="wrapper">
             <h3>vonkajšie</h3>
             <div class="values outdoor">
-                <p><%~ it.data?.[0]?.outdoorConnected ? `${tickIcon} pripojene` : `${xIcon} odpojene` %></p>
-                <p><%~ tempIcon %> <%= it.data?.[0]?.outdoorTemp / 100 %> °C</p>
-                <p><%~ pressureIcon %> <%= it.data?.[0]?.outdoorPressure / 100 %> hPa</p>
-                <p><%~ humidityIcon %> <%= it.data?.[0]?.outdoorHumidity / 100 %>%</p>
-                <p><%~ altitudeIcon %> <%= it.data?.[0]?.outdoorAltitude / 100 %>m</p>
+                <p id="outdoorConnected"><%~ it.data?.[0]?.outdoorConnected ? `${tickIcon} pripojené` : `${xIcon} odpojené` %></p>
+                <p><%~ tempIcon %> <span id="outdoorTemp"><%= it.data?.[0]?.outdoorTemp / 100 %></span> °C</p>
+                <p><%~ pressureIcon %> <span id="outdoorPressure"><%= it.data?.[0]?.outdoorPressure / 100 %></span> hPa</p>
+                <p><%~ humidityIcon %> <span id="outdoorHumidity"><%= it.data?.[0]?.outdoorHumidity / 100 %></span> %</p>
+                <p><%~ altitudeIcon %> <span id="outdoorAltitude"><%= it.data?.[0]?.outdoorAltitude / 100 %></span> m</p>
             </div>
         </div>
     </div>
 </div>
 
+<script defer>
+    setInterval(() => {
+        const response = await fetch('/currentData')
+        const data = await response.json()
+
+        const indoorTemp = document.querySelector(`#indoorTemp`)
+        const indoorPressure = document.querySelector(`#indoorPressure`)
+        const indoorHumidity = document.querySelector(`#indoorHumidity`)
+        const indoorAltitude = document.querySelector(`#indoorAltitude`)
+
+        const outdoorConnected = document.querySelector(`#outdoorConnected`)
+        const outdoorTemp = document.querySelector(`#outdoorTemp`)
+        const outdoorPressure = document.querySelector(`#outdoorPressure`)
+        const outdoorHumidity = document.querySelector(`#outdoorHumidity`)
+        const outdoorAltitude = document.querySelector(`#outdoorAltitude`)
+
+        indoorTemp.textContent = data?.indoorTemp
+        indoorPressure.textContent = data?.indoorPressure
+        indoorHumidity.textContent = data?.indoorHumidity
+        indoorAltitude.textContent = data?.indoorAltitude
+
+        const tickIcon = `<%= tickIcon %>`
+
+        const xIcon = `<%= xIcon %>`
+
+        outdoorConnected.textContent = data?.outdoorConnected ? `${tickIcon} pripojené` : `${xIcon} odpojené`
+        outdoorTemp.textContent = data?.outdoorTemp
+        outdoorPressure.textContent = data?.outdoorPressure
+        outdoorHumidity.textContent = data?.outdoorHumidity
+        outdoorAltitude.textContent = data?.outdoorAltitude
+    }, 10000)
+</string>
+
 <% /* <h3>dáta</h3>
 
 <% if (it.data?.length) { %>

templates/sk/partials/topbar.eta

@@ -30,7 +30,7 @@
 
             const date = new Date()
 
-            const timeString = `${date.getHours() }:${date.getMinutes()}:${date.getSeconds().toString().padStart(2, `0`)}`
+            const timeString = `${date.getHours().toString().padStart(2, `0`) }:${date.getMinutes().toString().padStart(2, `0`)}:${date.getSeconds().toString().padStart(2, `0`)}`
             const dateString = `${date.getDate() }. ${date.getMonth() + 1 }. ${date.getFullYear()}`
 
             topbarTime.textContent = timeString