adds support for covers

remove HA event listeners on shutdown

UIClasses/Base.js

@@ -1,37 +1,39 @@
-class Base  {
-    constructor(id, mm) {
-        this.id = id;
-        this.type = id.split('.')[0]
-        this.name = id;
-        this.mm = mm;
-      }
-    
-      updateState(state) {
-        this.name = (state.attributes || {}).friendly_name || this.id;
-        this.state = state.state;
-        this.render();
-      }
-    
-      getContainer() {
-        const entity = document.createElement("div");
-        entity.classList.add("ha-entity");
-        entity.classList.add(`ha-${this.type}`)
-        entity.id = this.id;
-        entity.innerHTML = "Loading...";
-        return entity;
-      }
-    
-      render() {
-        const container = document.getElementById(this.id);
-        container.className = ""
-        container.classList.add("ha-entity");
-        container.classList.add(`ha-${this.type}`)
+class Base {
+  constructor(id, mm) {
+    this.id = id;
+    this.type = id.split(".")[0];
+    this.name = id;
+    this.mm = mm;
+  }
 
-        const title = document.createElement("span");
-        title.className = "title";
-        title.innerHTML = this.name;
+  updateState(state) {
+    this.name = (state.attributes || {}).friendly_name || this.id;
+    this.state = state.state;
+    this.render();
+  }
 
-        container.innerHTML = "";
-        container.appendChild(title);
-      }
-}
+  getContainer() {
+    const entity = document.createElement("div");
+    entity.classList.add("ha-entity");
+    entity.classList.add(`ha-${this.type}`);
+    entity.id = this.id;
+    entity.innerHTML = "Loading...";
+    return entity;
+  }
+
+  render() {
+    const container = document.getElementById(this.id);
+    if (container) {
+      container.className = "";
+      container.classList.add("ha-entity");
+      container.classList.add(`ha-${this.type}`);
+
+      const title = document.createElement("span");
+      title.className = "title";
+      title.innerHTML = this.name;
+
+      container.innerHTML = "";
+      container.appendChild(title);
+    }
+  }
+}

UIClasses/Cover.js

@@ -0,0 +1,85 @@
+class Cover extends Base {
+  constructor(...params) {
+    super(...params);
+    this.onSliderMove = this.onSliderMove.bind(this);
+    this.removeSlider = this.removeSlider.bind(this);
+  }
+
+  getContainer() {
+    const entity = super.getContainer();
+    entity.onmousedown = (event) => {
+      this.addSlider(event.x, event.y);
+    };
+    entity.onmouseup = () => {
+      this.removeSlider();
+    };
+    return entity;
+  }
+
+  updateState(state) {
+    this.name = (state.attributes || {}).friendly_name || this.id;
+    this.state = state.attributes.current_position;
+    this.render();
+  }
+
+  render() {
+    super.render();
+    const container = document.getElementById(this.id);
+    if (container) {
+      container.classList.add(this.state);
+    }
+  }
+
+  addSlider(offsetX, offsetY) {
+    const slider = document.createElement("div");
+    slider.id = `slider-${this.id}`;
+    slider.classList.add("ha-slider");
+
+    // click location minus height minus margins
+    slider.style.top = `calc(${offsetY}px - 60px - 200px + calc(2px * ${this.state}))`;
+    // click location minus width/2 minus margins
+    slider.style.left = `calc(${offsetX}px - 60px - 1.5rem)`;
+
+    const sliderFill = document.createElement("div");
+    sliderFill.id = `slider-fill-${this.id}`;
+    sliderFill.classList.add("ha-slider-fill");
+    sliderFill.style.height = `${this.state}%`;
+    sliderFill.innerHTML = this.state;
+
+    slider.appendChild(sliderFill);
+    document.body.appendChild(slider);
+
+    document.body.addEventListener("mouseup", this.removeSlider);
+    document.body.addEventListener("mousemove", this.onSliderMove);
+
+    this.sliderStartY = offsetY;
+    this.sliderState = this.state;
+  }
+
+  onSliderMove(event) {
+    const sliderFill = document.getElementById(`slider-fill-${this.id}`);
+    if (sliderFill) {
+      const offset = this.sliderStartY - event.y;
+      this.sliderState = this.state + Math.round((100 / 200) * offset);
+      sliderFill.style.height = `${this.sliderState}%`;
+      sliderFill.innerHTML = this.sliderState;
+    }
+  }
+
+  removeSlider() {
+    const slider = document.getElementById(`slider-${this.id}`);
+    if (slider) {
+      slider.remove();
+    }
+    document.body.removeEventListener("mouseup", this.removeSlider);
+    document.body.removeEventListener("mousemove", this.onSliderMove);
+    this.sendNewState();
+  }
+
+  sendNewState() {
+    this.mm.sendSocketNotification("SET_COVER_POSITION", {
+      entity: this.id,
+      position: this.sliderState,
+    });
+  }
+}

UIClasses/Light.js

@@ -14,8 +14,8 @@ class Light extends Base {
   render() {
     super.render();
     const container = document.getElementById(this.id);
-    container.classList.add(this.state);
-
-    container.appendChild(statusCheckbox);
+    if (container) {
+      container.classList.add(this.state);
+    }
   }
 }

UIClasses/Switch.js

@@ -6,7 +6,7 @@ class Switch extends Base {
     };
     entity.ontouchend = () => {
       this.mm.sendSocketNotification("TOGGLE_STATE", { entity: this.id });
-    }
+    };
 
     return entity;
   }
@@ -14,8 +14,8 @@ class Switch extends Base {
   render() {
     super.render();
     const container = document.getElementById(this.id);
-    container.classList.add(this.state)
-
-    container.appendChild(statusCheckbox);
+    if (container) {
+      container.classList.add(this.state);
+    }
   }
 }