hue-callionica-batteries.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hue Batteries</title>
    <link rel="stylesheet" href="hue-callionica.css">
    <style>
        .limit {
            color: lightgray;
        }
        .numeric {
            text-align: right;
        }
        td:first-of-type {
            padding: 0;
        }
    </style>
    <script type="module">
        import { loadCurrentBridge, loadConnection } from "./hue-callionica-connect.js";
        import { sortBy, getAll, getCapabilities, getSensorTriggeredRules } from "./hue-callionica.js";
        import { localizeDateTime } from "./hue-callionica-ui.js";

        let bridge;
        let connection;

        function batteryHTML(item, type) {
            const link = type === "sensor" ? `<a href="hue-callionica-sensor.html?bridge=${bridge.id}&sensor=${item.id}">➲</a>` : ""
            return `<tr id="${type}-${item.id}" title="ID: ${item.id} (${type})"><td>${item.name}</td><td class="numeric">${item.config.battery}</td><td>${link}</td></tr>`;
        }

        async function main() {
            bridge = loadCurrentBridge();
            connection = await loadConnection("Callionica", bridge);

            const data = await getAll(connection);
            const capabilities = await getCapabilities(connection);

            const o = {};
            ["sensors", "components", "rules", "schedules", "groups", "lights", "scenes"].forEach(n => o[n] = Object.values(data[n]));

            const lights = o.lights.filter(light => light?.config?.battery !== undefined);
            const sensors = o.sensors.filter(sensor => sensor?.config?.battery !== undefined).sort((a,b) => a.name.localeCompare(b.name));

            const html = `<h1>${connection.bridge.name}</h1>
            <h2>Batteries</h2>
            <table>` 
            + lights.map(item => batteryHTML(item, "light")).join("\n")
            + sensors.map(item => batteryHTML(item, "sensor")).join("\n")
            + `</table>`
            ;
            document.getElementById("batteries").innerHTML = html;
        }

        async function _main() {
            try {
                await main();
                delete document.body.dataset.showConnection;

                // setTimeout(()=> _main(), 60*1000);

            } catch (error) {
                document.body.dataset.showConnection = true;

                const e = document.querySelector("#connection");

                if ((bridge === undefined) || (connection === undefined)) {
                    e.innerHTML = `<a href="hue-callionica-connect.html">Connect to your Hue bridge</a>`;
                } else {
                    e.innerHTML = `<a href="https://${connection.bridge.ip}/api/unauthenticated/config">Refresh your Hue bridge connection</a>`;
                }

                setTimeout(()=> _main(), 3*1000);
            }
        }

        _main().then(x => console.log("Done"));
    </script>
</head>
<body>
    <h1>Hue Batteries</h1>
    <p>Here you can see battery status for devices attached to the current bridge.</p>
    <hr/>
    <div id="connection"></div>
    <div id="batteries"></div>
</body>
</html>