hue-callionica-identify-my-scene.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>Identify My Scene</title>
    <link rel="stylesheet" href="hue-callionica.css">
    <style>
        .name {
            font-weight: bold;
        }
        .dateTime {
            color: gray;
        }
        .numeric {
            text-align: right;
        }
        td:first-of-type {
            padding: 0;
        }
        thead {
            font-weight: bold;
        }
    </style>
    <script type="module">
        import { loadCurrentBridge, loadConnection } from "./hue-callionica-connect.js";
        import { sortBy, getAllPlus } from "./hue-callionica.js";
        import { localizeDateTime } from "./hue-callionica-ui.js";

        let bridge;
        let connection;

        async function main() {
            const e = document.getElementById("instructions");
            
            e.innerHTML = `<p>Please wait while we connect to the bridge...</p>`;

            bridge = loadCurrentBridge();
            connection = await loadConnection("Callionica", bridge);

            const data = await getAllPlus(connection);

            function grp(scene) {
                if (scene.group !== undefined) {
                    return data.groups[scene.group].name;
                }
                return "";
            }

            function lgt(scene) {
                return scene.lights.map(id => data.lights[id].name).join(", ");
            }

            e.innerHTML = `<p>Please wait while we read the scenes...</p>`;

            const scenes = Object.values(data.scenes);

            e.innerHTML = `<p>Please wait while we analyze the lighting...</p>`;

            const possibleScenes = scenes.filter(scene => scene.active);

            e.innerHTML = `<p>Please wait while we present the results...</p>`;

            const rows = possibleScenes.map(scene => `<tr><td>${scene.name}</td><td>${grp(scene)}</td><td>${lgt(scene)}</td></tr>`).join("\n");

            const msg = (possibleScenes.length === 0) ? `<tr><td colspan="3">No matching scenes found</td></tr>` : "";

            e.innerHTML = `
            <table>
                <thead>
                <tr><td>Scene</td><td>Room/Zone</td><td>Lights</td></tr>
                </thead>
                ${rows}
                ${msg}
            </table>
            `;
        }

        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>Identify My Scene</h1>
    <p>Here you can see the scenes that are compatible with the current lighting.</p>
    <hr/>
    <div id="connection"></div>
    <div id="instructions">
        <p>Please wait while we analyze the lighting...</p>
    </div>
</body>
</html>