grafy test

assets/css/style.css

@@ -3,10 +3,10 @@ body {
     margin: 0;
     display: flex;
     flex-direction: column;
-    /* font-size: 1.2rem; */
     padding-inline: 10%;
     font-family: sans-serif;
     line-height: 1.3;
+    font-size: 1.2em;
 }
 
 #mainStats {
@@ -16,12 +16,13 @@ body {
     margin: auto;
     justify-content: center;
     align-items: center;
-    padding-inline: 1rem;
+    padding: 1em;
 }
 
 .message {
-    padding: 0.5rem 2rem;
-    border-radius: 1rem;
+    padding: 0.5em 1em;
+    border-radius: 1em;
+    font-size: 1.1em;
     background-color: rgba(50, 50, 50, 0.3);
     border: 2px solid rgb(50, 50, 50);
     color: rgb(50, 50, 50);
@@ -61,8 +62,8 @@ body {
 
 #mainStats .stats .values {
     background-color: rgba(0, 0, 0, 0.1);
-    padding: 0.5rem 2rem;
-    border-radius: 1rem;
+    padding: 0.5em 1em;
+    border-radius: 1em;
     width: 10em;
     flex: 1;
     font-size: 1.2em;
@@ -93,7 +94,7 @@ header > * {
 }
 
 header .end {
-    font-size: 1.2em;
+    font-size: 1.3em;
     display: flex;
     gap: 1em;
     align-items: center;
@@ -108,12 +109,15 @@ input, button {
 [role="button"], button {
     background-color: rgba(0, 0, 0, 0.1);
     border-radius: 0.5em;
-    padding: 0.3em 1em;
+    padding: 0.5em 1em;
     text-decoration: none;
     color: initial;
     border: none;
     width: max-content;
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
 }
 
 input {

routes/include/history.js

@@ -0,0 +1,22 @@
+import { Elysia } from 'elysia'
+
+import { Eta } from "eta"
+import Meteostanica from '../../utils/meteostanica'
+const eta = new Eta({ views: "./templates" })
+
+export default (langName, lang) => new Elysia({ prefix: `/history` })
+  .get('/', ({ set }) => {
+    set.headers['content-type'] = 'text/html; charset=utf8'
+    return eta.render(`${langName}/history/index`, {  })
+  })
+  .get(`/:property`, ({ params: { property }, set }) => {
+    const data = Meteostanica.getDataProperty(property)
+
+    if (!data) {
+        set.headers['content-type'] = 'text/html; charset=utf8'
+        return eta.render(`${langName}/history/notFound`, { property })
+    }
+
+    set.headers['content-type'] = 'text/html; charset=utf8'
+    return eta.render(`${langName}/history/property`, { lang, property, data })
+  })

routes/lang/en.js

@@ -1,8 +1,10 @@
 import { Elysia } from 'elysia'
 
 import mainRoutes from '../include/main'
+import historyRoutes from '../include/history'
 
 import lang from "../../lang/en"
 
 export default new Elysia({ prefix: "/en" })
-  .use(mainRoutes("en", lang))
+  .use(mainRoutes("en", lang))
+  .use(historyRoutes("en", lang))

routes/lang/sk.js

@@ -1,8 +1,10 @@
 import { Elysia } from 'elysia'
 
 import mainRoutes from '../include/main'
+import historyRoutes from '../include/history'
 
 import lang from "../../lang/sk"
 
 export default new Elysia()
-  .use(mainRoutes("sk", lang))
+  .use(mainRoutes("sk", lang))
+  .use(historyRoutes("sk", lang))

templates/en/index.eta

@@ -58,21 +58,21 @@
         <div class="wrapper">
             <h2>indoor</h2>
             <div class="values indoor">
-                <p><a role="button" href="/history/indoorTemp"><%~ tempIcon %></a> <span id="indoorTemp"><%= it.data?.[0]?.indoorTemp / 100 %></span> °C</p>
-                <p><a role="button" href="/history/indoorPressure"><%~ pressureIcon %></a> <span id="indoorPressure"><%= it.data?.[0]?.indoorPressure / 100 %></span> hPa</p>
-                <p><a role="button" href="/history/indoorHumidity"><%~ humidityIcon %></a> <span id="indoorHumidity"><%= it.data?.[0]?.indoorHumidity / 100 %></span> %</p>
-                <p><a role="button" href="/history/indoorAltitude"><%~ altitudeIcon %></a> <span id="indoorAltitude"><%= it.data?.[0]?.indoorAltitude / 100 %></span> m</p>
+                <p><a role="button" href="/en/history/indoorTemp"><%~ tempIcon %></a> <span id="indoorTemp"><%= it.data?.[0]?.indoorTemp / 100 %></span> °C</p>
+                <p><a role="button" href="/en/history/indoorPressure"><%~ pressureIcon %></a> <span id="indoorPressure"><%= it.data?.[0]?.indoorPressure / 100 %></span> hPa</p>
+                <p><a role="button" href="/en/history/indoorHumidity"><%~ humidityIcon %></a> <span id="indoorHumidity"><%= it.data?.[0]?.indoorHumidity / 100 %></span> %</p>
+                <p><a role="button" href="/en/history/indoorAltitude"><%~ altitudeIcon %></a> <span id="indoorAltitude"><%= it.data?.[0]?.indoorAltitude / 100 %></span> m</p>
             </div>
         </div>
 
         <div class="wrapper">
             <h2>outdoor</h2>
             <div class="values outdoor">
-                <p><a role="button" href="/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="/history/outdoorTemp"><%~ tempIcon %></a> <span id="outdoorTemp"><%= it.data?.[0]?.outdoorTemp / 100 %></span> °C</p>
-                <p><a role="button" href="/history/outdoorPressure"><%~ pressureIcon %></a> <span id="outdoorPressure"><%= it.data?.[0]?.outdoorPressure / 100 %></span> hPa</p>
-                <p><a role="button" href="/history/outdoorHumidity"><%~ humidityIcon %></a> <span id="outdoorHumidity"><%= it.data?.[0]?.outdoorHumidity / 100 %></span> %</p>
-                <p><a role="button" href="/history/outdoorAltitude"><%~ altitudeIcon %></a> <span id="outdoorAltitude"><%= it.data?.[0]?.outdoorAltitude / 100 %></span> m</p>
+                <p><a role="button" href="/en/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/history/outdoorTemp"><%~ tempIcon %></a> <span id="outdoorTemp"><%= it.data?.[0]?.outdoorTemp / 100 %></span> °C</p>
+                <p><a role="button" href="/en/history/outdoorPressure"><%~ pressureIcon %></a> <span id="outdoorPressure"><%= it.data?.[0]?.outdoorPressure / 100 %></span> hPa</p>
+                <p><a role="button" href="/en/history/outdoorHumidity"><%~ humidityIcon %></a> <span id="outdoorHumidity"><%= it.data?.[0]?.outdoorHumidity / 100 %></span> %</p>
+                <p><a role="button" href="/en/history/outdoorAltitude"><%~ altitudeIcon %></a> <span id="outdoorAltitude"><%= it.data?.[0]?.outdoorAltitude / 100 %></span> m</p>
             </div>
         </div>
     </div>

templates/sk/history/index.eta

@@ -0,0 +1,6 @@
+<% layout("/sk/history/layout") %>
+
+<%~ include("/sk/partials/topbar") %>
+
+<h2>história</h2>
+

templates/sk/history/layout.eta

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="sk">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><%= it.title ? `${it.title} — meteostanica` : "meteostanica" %></title>
+    <link rel="stylesheet" href="/assets/css/charts.css">
+    <link rel="stylesheet" href="/assets/css/style.css">
+</head>
+<body>
+    <%~ it.body %>
+</body>
+</html>

templates/sk/history/notFound.eta

@@ -0,0 +1,6 @@
+<% layout("/sk/history/layout") %>
+
+<%~ include("/sk/partials/topbar") %>
+
+<h2>história nenájdená</h2>
+

templates/sk/history/property.eta

@@ -0,0 +1,32 @@
+<% layout("/sk/history/layout") %>
+
+<%~ include("/sk/partials/topbar") %>
+
+<h2>história <%= it?.property %></h2>
+
+<% if (it?.data?.length) { %>
+
+<%= JSON.stringify(it.data[0]) %>
+
+<table class="charts-css column show-primary-axis show-data-axes">
+    <% for (let i = 0; i < it.data.length; i++) { %>
+        <% const item = it.data?.[i] %>
+        
+        <% if (it.property === "outdoorConnected") { %>
+            <% item.value = item?.[it.property] %>
+            <% item.size = item.value %>
+        <% } else { %>
+            <% item.value = item?.[it.property] / 100 %>
+            <% item.size = item.value / 100 %>
+        <% } %>
+
+        <tr>
+            <td style="--size: <%= item.size %>;">
+                <span class="tooltip"> <%= item.value %> </span>
+            </td>
+            <% /* <td style="--size: <%= item.size %>;"> </td> */ %>
+        </tr>
+    <% } %>
+</table>
+
+<% } %>

templates/sk/index.eta

@@ -49,9 +49,9 @@
 
 <div id="mainStats">
     <% /* <div class="message error">
-        <p>Bola zistená vysoká teplota!</p>
-        <p>Bol zistený vysoký tlak!</p>
-        <p>Bola zistená vysoká vlhkosť!</p>
+        <p><%~ tempIcon %> Bola zistená vysoká vnútorná teplota!</p>
+        <p><%~ pressureIcon %> Bol zistený vysoký vnútorný tlak!</p>
+        <p><%~ humidityIcon %> Bola zistená vysoká vnútorná vlhkosť!</p>
     </div> */ %>
 
     <div class="stats">

utils/meteostanica.js

@@ -29,4 +29,21 @@ export default class Meteostanica {
 
         return result
     }
+
+    static getDataProperty(property) {
+        const tableNames = meteostanicaDB.prepare(`PRAGMA table_info('data');`).all()
+
+        if (!tableNames.find(i => i.name === property)) return null
+
+        const statement = meteostanicaDB.prepare(`
+            SELECT ${property}
+            FROM data
+            ORDER BY timestamp DESC
+            LIMIT 10;
+        `)
+
+        const result = statement.all();
+
+        return result
+    }
 }