hue-callionica-temperature-events.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>Settings</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            border: 0;
            padding: 0;
            margin: 0;
            font-family: inherit;
            font-size: inherit;
        }

        body {
            -webkit-text-size-adjust: 100%;
            width: 100vw;
            
            overflow-x: hidden;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

            --max-width: 30rem;
            --snap: 8rem;
        }

        h1 {
            font-size: 1.4rem;
            padding-top: 0.25rem;
        }
        h2 {
            font-size: 1.2rem;
            padding-top: 0.25rem;
            margin-bottom: 0.5rem;
        }
        h3 {
            font-size: 1.1rem;
            padding-top: 0.25rem;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        p {
            /* padding-top: 0.3rem; */
            line-height: 1.75rem;
        }

        hr {
            overflow: visible; /* For IE */
            padding: 0;
            margin-bottom: 0.4rem;
            margin-top: 0.4rem;
            border: none;
            border-top: medium double #333;
            color: #333;
            text-align: center;
        }

        select, button, input {
            -webkit-appearance: none;
            appearance: none;
            border-style: solid;
            border-width: 0.1rem;
            border-color: inherit;
            border-radius: 0.275rem;
            padding: 0.2rem;
            color: inherit;
            background-color: inherit;
        }

        :root {
            --back-color: 30,30,30;
            --item-color: 45,45,45;
            
            --text-color: 204,204,204;
            --text-color-2: 128,128,128;

            background-color: rgb(var(--back-color));
            color: rgb(var(--text-color));
        }

        input[type='submit'] {
            background-color: rgb(24, 103, 184);
            color: white;
        }

        input[type='submit']:hover {
            background-color: rgb(0, 93, 166);
            color: white;
        }

        button:hover {
            background-color: rgb(0, 93, 166);
            color: white;
        }

        #connection {
            transition: height 0.6s ease, padding 0.6s ease, visibility 0s ease;;

            visibility: hidden;
            height: 0;

            position: sticky;
            top: 0;
            z-index: 10;

            background-color: rgb(var(--back-color));

            padding-bottom: 0rem;
            padding-top: 0rem;
        }

        body[data-show-connection='true'] #connection {
            transition: height 0.6s ease, padding 0.6s ease, visibility 0s ease;;

            visibility: visible;
            height: 2.5rem;

            padding-bottom: 0.5rem;
            padding-top: 0.5rem;
        }

        .small {
            line-height: 1.0rem;
            font-size: 0.75rem;
            color: rgb(var(--text-color-2));
        }

        .T {
            color: rgb(var(--text-color-2));
        }

        *[data-scale='F']:not(:empty)::after {
            content: '℉'
        }

        *[data-scale='C']:not(:empty)::after {
            content: '℃'
        }

        td {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        #content {
            padding: 0.25rem;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .sensor {
            background-color: rgb(var(--item-color));
            padding: 0.7rem;
            border-radius: 0.3rem;
        }

        .buttons {
            padding-top: 1.0rem;
            padding-bottom: 1.0rem;
        }

        #name {
            max-width: 50vw;
        }

        .operators {
            min-width: var(--snap);
        }

        .temperatures {
            min-width: calc(var(--snap)/2);
            text-align: right;
        }

        .groups {
            min-width: var(--snap);
        }

        .scenes {
            min-width: var(--snap);
        }

        .rule-name {
            min-width: 15vw;
            display: inline-block;
            grid-column: 1;
        }

        button {
            margin-left: 4rem;
        }

        .label {
            font-weight: bold;
            line-height: 2.5rem;
            padding-top: 0.5rem;
        }

        form {
            background-color: rgb(55,55,55);
            padding: 0.5rem;
            border-radius: 0.4rem;
            max-width: var(--max-width);
        }

        .snap-grid {
            display: grid;
            --grid-columns: 4;
            --grid-characters: 60;
            grid-template-columns: repeat(auto-fill, var(--snap));
            row-gap: 0.25rem;
            column-gap: 0.5rem;
        }

        li {
            display: grid;
            row-gap: 0.25rem;
            column-gap: 0.5rem;
            grid-template-columns: 1fr var(--snap);
            padding-top: 0.5rem;
            max-width: var(--max-width);
        }

    </style>
    <script type="module">
        import { loadConnection, loadConnections } from "./hue-callionica-connect.js";
        import { getAllPlus, getSensorTriggeredRules, createRule, deleteRule } from "./hue-callionica.js";
        import { optionsTemp, optionsGroup, optionsScene, snapToGrid } from "./hue-callionica-ui.js";

        const app = "Callionica";
        const params = new URLSearchParams(document.location.search);
        const sensor_ = params.get("sensor")?.toLowerCase().trim() ?? undefined;
        const connection = (() => {
            const bridge = params.get("bridge")?.toLowerCase().trim() ?? undefined;
            return (bridge !== undefined) ? loadConnection(app, { id: bridge }) : loadConnections()[0];
        })();

        const paramScale = params.get("scale")?.toUpperCase().trim() ?? undefined;
        const allScale = paramScale ?? sessionStorage.getItem("scale") ?? localStorage.getItem("scale") ?? "C";
        const scale = (allScale.startsWith("F")) ? "F" : "C";
        
        let data;
        let sensor;

        function message(text) {
            document.querySelector("#message").innerText = text;
        }

        function sensorKind(sensor) {
            if (sensor.metadata) {
                return `${sensor.metadata.component} > ${sensor.metadata.property}`.replaceAll(">", "›");
            }
            return sensor.productname || sensor.modelid;
        }

        function temperatureTrigger(sensor, operator, value) {
            const address = `/sensors/${sensor.id}/state/temperature`; 
            return [
                { address, operator, value: `${value}` },
                { address, operator: "dx" },
            ];
        }

        function option(name, value) {
            const e = document.createElement("option");
            e.text = name;
            e.value = value;
            return e;
        }

        function selectOption(select, name) {
            const options = [...select.options];
            const found = options.find(o => o.text === name);
            if (found !== undefined) {
                found.selected = true;
            }
            return found;
        }

        function getRule(sensor, scope) {
            scope = scope || document;

            const operatorsSelect = scope.querySelector(".operators");
            const temperaturesSelect = scope.querySelector(".temperatures");
            const groupsSelect = scope.querySelector(".groups");
            const scenesSelect = scope.querySelector(".scenes");

            const op = operatorsSelect.value;
            // const temp = parseInt(temperaturesSelect.value, 10);
            const temp = temperaturesSelect.value;
            const group = groupsSelect.value;
            const scene = scenesSelect.value;

            const name = `${op === "gt" ? "↑" : "↓"}${temperaturesSelect.selectedOptions[0]?.text}${scale} ${groupsSelect.selectedOptions[0]?.text} ${scenesSelect.selectedOptions[0]?.text}`.substring(0, 30).trim();

            const condition = {
                address: `/sensors/${sensor.id}/state/temperature`,
                operator: op,
                value: temp
            };

            const action = {
                address: `/groups/${group}/action`,
                body: {},
                method: "PUT"
            };

            if (["on", "off"].includes(scene)) {
                action.body.on = (scene === "on") ? true : false;
            } else {
                action.body.scene = scene;
            }

            const rule = {
                name,
                conditions: [ condition ],
                actions: [ action ]
            };

            return rule;
        }

        function updateRules() {
            const rules = Object.values(data.rules);

            const sensorRules = getSensorTriggeredRules(rules, sensor.id);
            const c = document.querySelector("#rules");
            c.innerHTML = "";

            if (sensorRules.length === 0) {
                c.innerHTML = `<p>No existing rules.</p>`;
            }

            for (const sensorRule of sensorRules) {
                const e = document.createElement("li");
                e.innerHTML = `
                <span class="rule-name"></span><button>Delete</button>
                `;
                e.querySelector(".rule-name").innerText = sensorRule.name;
                e.querySelector("button").onclick = ()=>{
                    (async ()=>{
                        const confirmed = confirm(`Permanently delete rule '${sensorRule.name}'?`);
                        if (confirmed) {
                            await deleteRule(connection, sensorRule.id);
                            data = await getAllPlus(connection);
                            sensor = data.sensors[sensor_];
                            updateRules();
                        }
                    })();
                };
                c.append(e);
            }
        }

        async function main() {
            data = await getAllPlus(connection);
            sensor = data.sensors[sensor_];

            const bridgeName = data.config.name;

            updateRules();

            const nam = document.querySelector(".name");
            nam.innerHTML = "";
            const a = document.createElement("a");
            a.href = `hue-callionica-sensor-rename.html?bridge=${data.id}&sensor=${sensor.id}`;
            a.innerText = sensor.name;
            nam.append(a);
            const t = document.querySelector(".T");
            t.innerText = sensor[scale === "C" ? "celsius" : "fahrenheit"] ?? "";
            t.dataset.scale = scale;

            document.querySelector(".description").innerText = sensorKind(sensor);
            document.querySelector(".bridge-name").innerText = bridgeName;
            document.querySelector(".id").innerText = sensor.id;

            const groupsSelect = document.querySelector(".groups");
            const scenesSelect = document.querySelector(".scenes");

            groupsSelect.onchange = () => {
                const oldScene = scenesSelect.selectedOptions[0]?.text;
                console.log(oldScene);

                const group = data.groups[groupsSelect.value];
                scenesSelect.innerHTML = "";
                scenesSelect.append(option("● On", "on"), option("○ Off", "off"));
                scenesSelect.append(...optionsScene(data, group));

                if (oldScene !== undefined) {
                    selectOption(scenesSelect, oldScene);
                }
            };

            groupsSelect.append(...optionsGroup(data));
            groupsSelect.onchange();

            selectOption(groupsSelect, sensor.name);

            document.querySelector(".temperatures").append(...optionsTemp(scale, sensor.state.temperature));

            document.querySelector(".temperatures + *[data-scale]").dataset.scale = scale;

            snapToGrid();

            const e = document.querySelector("form");
            if (e.onsubmit == undefined) {
                e.onsubmit = () => {
                    (async ()=>{
                        try {
                            const rule = getRule(sensor);
                            await createRule(connection, rule);
                            data = await getAllPlus(connection);
                            sensor = data.sensors[sensor_];
                            updateRules();
                        } catch (e) {
                            message("error");
                        }
                    })();
                    return false;
                };
            }
        }

        main().then(x => console.log("Done"));
    </script>
</head>
<body>
    <div id="content">
    <h1>Settings</h1>
    <hr/>

    <div id="sensor" class="sensor">
        
            <p class="small"><span class="bridge-name">...</span> | <span class="id">...</span></p>
            <p class="small"><span class="description">...</span></p>
            <h2><span class="name">...</span> <span class="T" data-scale></span><!-- <span class="fahrenheit"></span>--></h2>
            <hr/>

        <form action="#">
            <div>
            <h3>New Rule</h3>
            <p class="label">Conditions:</p>
            <p class="snap-grid">
            <select class="operators snap-grid-item">
            <option value="gt">Increases above</option>
            <option value="lt">Decreases below</option>
            </select>
            <span class="snap-grid-item"><select class="temperatures">
            </select><span data-scale> </span></span><!-- the space is important -->
            </p>
            <p class="label">Actions:</p>
            <p class="snap-grid">
                <select class="groups snap-grid-item">
                </select>
                <select class="scenes snap-grid-item">
                </select>
            </p>
            </div>

            <p class="buttons">
                <input type="submit" value="Create">
            </p>
        </form>

        <hr/>
        <h3>Rules</h3>
        <ol id="rules">

        </ol>
    </div>
    <p><span id="message"></span></p>
    </div>
</body>
</html>