interier/templates/sk/index.eta

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

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

<% 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>
` %>

<div id="mainStats">
    <% /* <div class="message error">
        <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">
        <div class="wrapper">
            <h2>vnútorné</h2>
            <div class="values indoor">
                <p><a role="button" href="/history/indoorTemp"><%~ it.lang.icons.tempIcon() %></a> <span id="indoorTemp"><%= it.data?.[0]?.indoorTemp / 100 %></span> °C</p>
                <p><a role="button" href="/history/indoorPressure"><%~ it.lang.icons.pressureIcon() %></a> <span id="indoorPressure"><%= it.data?.[0]?.indoorPressure / 100 %></span> hPa</p>
                <p><a role="button" href="/history/indoorHumidity"><%~ it.lang.icons.humidityIcon() %></a> <span id="indoorHumidity"><%= it.data?.[0]?.indoorHumidity / 100 %></span> %</p>
            </div>
        </div>

        <div class="wrapper">
            <h2>vonkajšie</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 ? `pripojené` : `odpojené` %></span></p>
                <p><a role="button" href="/history/outdoorTemp"><%~ it.lang.icons.tempIcon() %></a> <span id="outdoorTemp"><%= it.data?.[0]?.outdoorTemp / 100 %></span> °C</p>
                <p><a role="button" href="/history/outdoorPressure"><%~ it.lang.icons.pressureIcon() %></a> <span id="outdoorPressure"><%= it.data?.[0]?.outdoorPressure / 100 %></span> hPa</p>
                <p><a role="button" href="/history/outdoorHumidity"><%~ it.lang.icons.humidityIcon() %></a> <span id="outdoorHumidity"><%= it.data?.[0]?.outdoorHumidity / 100 %></span> %</p>
            </div>
        </div>
    </div>
</div>

<script defer>
    setInterval(async () => {
        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 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 ? `pripojené` : `odpojené`

        outdoorTemp.textContent = data?.outdoorTemp / 100
        outdoorPressure.textContent = data?.outdoorPressure / 100
        outdoorHumidity.textContent = data?.outdoorHumidity / 100
    }, 10000)
</script>