cloud/templates/en/panel/stations/station.eta

<% layout("/en/layout", { title: it.meteostanica.name }) %>

<%~ include("/en/panel/partials/navbar") %>

<% const backIcon = `
    <svg class="icon" 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 19l-7-7l7-7m7 7H5" />
    </svg>
` %>

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

<% const tempIcon = `
    <svg class="icon" 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 class="icon" 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 class="icon" 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 resetIcon = `
    <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">
            <path d="M3 12a9 9 0 1 0 9-9a9.75 9.75 0 0 0-6.74 2.74L3 8" />
            <path d="M3 3v5h5" />
        </g>
    </svg>
` %>

<% const historyIcon = `
    <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">
            <path d="M3 12a9 9 0 1 0 9-9a9.75 9.75 0 0 0-6.74 2.74L3 8" />
            <path d="M3 3v5h5m4-1v5l4 2" />
        </g>
    </svg>
` %>

<% const editIcon = `
    <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">
            <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
            <path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" />
        </g>
    </svg>
` %>

<% const deleteIcon = `
  <svg class="icon" 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="M10 11v6m4-6v6m5-11v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
  </svg>
` %>

<div class="container-row">
    <a role="button" href="/en/panel/stations"><%~ backIcon %></a>
    <h2><%= it.meteostanica.name %></h2>
</div>

<% if (it.meteostanica.description) { %>
    <p><strong>description:</strong> <%= it.meteostanica.description %></p>
<% } %>

<% if (it.data?.[0]) { %>
    <div id="mainStats">
        <% /* <div class="message error">
            <p>High temperature was detcted!</p>
            <p>High pressure was detcted!</p>
            <p>High humidity was detcted!</p>
        </div> */ %>

        <p><em>last updated: <%= it.data?.[0]?.timestamp %></em></p>

        <div class="stats">
            <div class="wrapper">
                <h2>indoor</h2>
                <div class="values indoor">
                    <p><a role="button" href="/en/panel/stations/<%= it.meteostanica.id %>/history/indoorTemp"><%~ tempIcon %></a> <span id="indoorTemp"><%= it.data?.[0]?.indoorTemp / 100 %></span> °C</p>
                    <p><a role="button" href="/en/panel/stations/<%= it.meteostanica.id %>/history/indoorPressure"><%~ pressureIcon %></a> <span id="indoorPressure"><%= it.data?.[0]?.indoorPressure / 100 %></span> hPa</p>
                    <p><a role="button" href="/en/panel/stations/<%= it.meteostanica.id %>/history/indoorHumidity"><%~ humidityIcon %></a> <span id="indoorHumidity"><%= it.data?.[0]?.indoorHumidity / 100 %></span> %</p>
                </div>
            </div>

            <div class="wrapper">
                <h2>outdoor</h2>
                <div class="values outdoor">
                    <p><a role="button" href="/en/panel/stations/<%= it.meteostanica.id %>/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/panel/stations/<%= it.meteostanica.id %>/history/outdoorTemp"><%~ tempIcon %></a> <span id="outdoorTemp"><%= it.data?.[0]?.outdoorTemp / 100 %></span> °C</p>
                    <p><a role="button" href="/en/panel/stations/<%= it.meteostanica.id %>/history/outdoorPressure"><%~ pressureIcon %></a> <span id="outdoorPressure"><%= it.data?.[0]?.outdoorPressure / 100 %></span> hPa</p>
                    <p><a role="button" href="/en/panel/stations/<%= it.meteostanica.id %>/history/outdoorHumidity"><%~ humidityIcon %></a> <span id="outdoorHumidity"><%= it.data?.[0]?.outdoorHumidity / 100 %></span> %</p>
                </div>
            </div>
        </div>
    </div>

    <script defer>
        setInterval(async () => {
            const response = await fetch('/en/panel/stations/<%= it.meteostanica.id %>/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 outdoorConnectedIcon = document.querySelector(`#outdoorConnectedIcon`)
            const outdoorConnectedText = document.querySelector(`#outdoorConnectedText`)

            const outdoorTemp = document.querySelector(`#outdoorTemp`)
            const outdoorPressure = document.querySelector(`#outdoorPressure`)
            const outdoorHumidity = document.querySelector(`#outdoorHumidity`)
            const outdoorAltitude = document.querySelector(`#outdoorAltitude`)

            indoorTemp.textContent = data?.indoorTemp / 100
            indoorPressure.textContent = data?.indoorPressure / 100
            indoorHumidity.textContent = data?.indoorHumidity / 100
            indoorAltitude.textContent = data?.indoorAltitude / 100

            const tickIcon = `<%~ tickIcon %>`

            const xIcon = `<%~ xIcon %>`

            outdoorConnectedIcon.innerHTML = data?.outdoorConnected ? tickIcon : xIcon
            outdoorConnectedText.textContent = data?.outdoorConnected ? `connected` : `disconnected`

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

<p><strong>created:</strong> <%= it.meteostanica.timestamp %></p>

<div class="container-row">
    <p><strong>websocket key:</strong> <%= it.meteostanica.websocketKey %></p>
    <a role="button" href="/en/panel/stations/<%= it.meteostanica.id %>/resetWebsocketKey"><%~ resetIcon %> reset</a>
</div>

<hr>

<div class="container-row">
    <a role="button" href="/en/panel/stations/<%= it.meteostanica.id %>/history"><%~ historyIcon %> history</a>
    <a role="button" class="primary" href="/en/panel/stations/<%= it.meteostanica.id %>/edit"><%~ editIcon %> edit</a>
    <a role="button" class="danger" href="/en/panel/stations/<%= it.meteostanica.id %>/delete"><%~ deleteIcon %> delete</a>
</div>