iobroker.schedule-switcher/widgets/schedule-switcher/js/Weekdays.js

Switch states over scheduler

(async () => {
    class Weekdays extends HTMLElement {
        constructor() {
            super();
            this.sr = this.createShadowRoot();
            this.weekdays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"].map(s =>
                vis.binds["schedule-switcher"].translate(s),
            );
            this.weekdaysShort = this.weekdays.map(s => s.substr(0, 2).toUpperCase());
            this.addWeekdayElements();
        }

        static get observedAttributes() {
            return ["selected", "edit"];
        }

        connectedCallback() {}

        attributeChangedCallback(attr) {
            if (attr === "selected") {
                this.onSelectedChange();
            } else if (attr === "edit") {
                this.onEditChange();
            }
        }

        get selected() {
            return JSON.parse(this.getAttribute("selected"));
        }

        set selected(val) {
            this.setAttribute("selected", JSON.stringify(val));
        }

        get edit() {
            const attrValue = this.getAttribute("edit");
            return attrValue === "true";
        }

        set edit(value) {
            this.setAttribute("edit", value ? "true" : "false");
        }

        set errors(value) {
            if (value.length === 0) {
                this.removeAttribute("errors");
            } else {
                this.setAttribute("errors", JSON.stringify(value));
            }
        }

        onSelectedChange() {
            this.sr.querySelectorAll(".view span").forEach((e, i) => {
                const correctIndex = i % 7 === 6 ? 0 : i + 1;
                if (this.selected.indexOf(correctIndex) !== -1) {
                    e.classList.add("active");
                } else {
                    e.classList.remove("active");
                }
            });
            this.sr.querySelectorAll(".edit label input").forEach((c, i) => {
                const correctIndex = i % 7 === 6 ? 0 : i + 1;
                c.checked = this.selected.indexOf(correctIndex) !== -1;
            });
            this.verify();
        }

        onEditChange() {
            if (this.edit) {
                this.sr.querySelector(".container.edit").style.display = null;
                this.sr.querySelector(".container.view").style.display = "none";
            } else {
                this.sr.querySelector(".container.edit").style.display = "none";
                this.sr.querySelector(".container.view").style.display = null;
            }
        }

        onWeekdayClick() {
            const selected = [];
            this.sr.querySelectorAll(".edit label input").forEach((c, i) => {
                if (c.checked) {
                    selected.push(i % 7 === 6 ? 0 : i + 1);
                }
            });
            this.selected = selected;
        }

        verify() {
            const errors = [];
            if (this.selected.length === 0) {
                errors.push("One or more weekdays must be selected");
            }
            this.errors = errors;
            this.sr.dispatchEvent(new CustomEvent("errors", { composed: true }));
        }

        createShadowRoot() {
            const shadowRoot = this.attachShadow({ mode: "open" });
            shadowRoot.innerHTML = `
				<link rel="stylesheet" href="widgets/schedule-switcher/css/Weekdays.css"/>
				<link rel="stylesheet" href="widgets/schedule-switcher/css/material-checkbox.css" />
				<div class="container view">
				</div>
				<div class="container edit" style="display: none">
				</div>
			`;
            return shadowRoot;
        }

        addWeekdayElements() {
            if (!this.sr.querySelector(".container.edit span")) {
                let count = 1;
                const today_nr = new Date().getDay();
                this.weekdaysShort.forEach(day => {
                    //const neuB = document.createElement("b");
                    const span = document.createElement("span");
                    span.textContent = ` ${day} `;
                    span.id = `short${count}`;
                    if (count === today_nr) {
                        span.style.fontWeight = "bold";
                    }
                    this.sr.querySelector(".container.view").appendChild(span);
                    ++count;
                });

                count = 1;
                this.weekdays.forEach(day => {
                    const label = document.createElement("label");
                    label.classList.add("pure-material-checkbox");
                    const input = document.createElement("input");
                    input.type = "checkbox";
                    input.onclick = this.onWeekdayClick.bind(this);
                    const text = document.createElement("span");
                    text.textContent = `${day}`;
                    text.id = `long${count}`;
                    if (count === today_nr) {
                        text.style.fontWeight = "bold";
                    }
                    label.appendChild(input);
                    label.appendChild(text);
                    this.sr.querySelector(".container.edit").appendChild(label);
                    ++count;
                });
            }
        }
    }

    customElements.define("app-weekdays-schedule", Weekdays);
})();