interier/templates/sk/index.eta

<% layout("/sk/layout") %>

<%~ include("/sk/partials/topbar") %>

<% const tickIcon = `
    <svg 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 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 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 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 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>
` %>

<% const altitudeIcon = `
    <svg 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="m16 12l-4-4l-4 4m4 4V8" />
        </g>
    </svg>
` %>

<div id="mainStats">
    <% /* <div class="message">
        <p>oops</p>
    </div> */ %>

    <div class="stats">
        <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>
            </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>
            </div>
        </div>
    </div>
</div>

<% /* <h3>dáta</h3>

<% if (it.data?.length) { %>
    <div>
        <table>
            <tr>
                <th>čas</th>
                <th>vnútorné</th>
                <th>vonkajšie</th>
            </tr>
            <% for (const item of it.data) { %>
                <tr>
                    <td><%= item.timestamp %></td>
                    <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>
                    <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>
                </tr>
            <% } %>
        </table>
    </div>
<% } else { %>
    <p>zatiaľ žiadne dáta. :(</p>
<% } %> */ %>