Added landroid-linear-progress element to avoid issue with import `…

…mwc-linear-progress` #269
Barma-lej · Jan 15, 2024 · 4521924 · 4521924
1 parent 41d6064
commit 4521924
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 22 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -6,7 +6,7 @@
     "es6": true
   },
   "parserOptions": {
-    "ecmaVersion": 2020,
+    "ecmaVersion": "latest",
     "sourceType": "module"
   }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,41 @@
 # Changelog
 
+## Version 1.0.3
+
+Please enable sensors at least `sensor.[mower_name]_rssi`, `sensor.[mower_name]_total_worktime` and `sensor.[mower_name]_battery` for correct work.
+
+### PLEASE install it only you have Landroid Cloud version 4.0.0 and above
+
+### Known issues
+
+- Might not working `Time extension` configuration
+- Might not working `Set Zone` configuration
+- Might not working `Raindelay` configuration
+
+### What's Changed
+
+- Added `landroid-linear-progress` element to avoid issue with import `mwc-linear-progress` #269 by @Barma-lej in https://github.com/Barma-lej/landroid-card/pull/271
+
+**Full Changelog**: https://github.com/Barma-lej/landroid-card/compare/1.0.2...1.0.3
+
+## Version 1.0.2
+
+Please enable sensors at least `sensor.[mower_name]_rssi`, `sensor.[mower_name]_total_worktime` and `sensor.[mower_name]_battery` for correct work.
+
+### PLEASE install it only you have Landroid Cloud version 4.0.0 and above
+
+### Known issues
+
+- Might not working `Time extension` configuration
+- Might not working `Set Zone` configuration
+- Might not working `Raindelay` configuration
+
+### What's Changed
+
+- Temporary remove `mwc-linear-progress` import due to conflict #269 by @Barma-lej in https://github.com/Barma-lej/landroid-card/pull/270
+
+**Full Changelog**: https://github.com/Barma-lej/landroid-card/compare/1.0.1...1.0.2
+
 ## Version 1.0.1
 
 Please enable sensors at least `sensor.[mower_name]_rssi`, `sensor.[mower_name]_total_worktime` and `sensor.[mower_name]_battery` for correct work.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "landroid-card",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Landroid lawnmower card for Home Assistant Lovelace UI",
   "main": "dist/landroid-card.js",
   "scripts": {

diff --git a/src/elements/landroid-linear-progress.js b/src/elements/landroid-linear-progress.js
@@ -0,0 +1,48 @@
+class LandroidLinearProgress extends HTMLElement {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' });
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          height: 4px;
+          overflow: hidden;
+        }
+
+        #progress {
+          width: 0;
+          height: 100%;
+          background-color: var(--mdc-theme-primary, #6200ee);
+          transition: width 0.3s ease;
+        }
+      </style>
+      <div id="progress"></div>
+    `;
+
+    this.progressElement = this.shadowRoot.getElementById('progress');
+  }
+
+  static get observedAttributes() {
+    return ['progress'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'progress') {
+      this.setProgressBarWidth(newValue);
+    }
+  }
+
+  setProgressBarWidth(progress) {
+    const parsedProgress = parseFloat(progress);
+    const clampedProgress = isNaN(parsedProgress)
+      ? 0
+      : Math.min(100, Math.max(0, parsedProgress));
+    this.progressElement.style.width = `${clampedProgress}%`;
+  }
+}
+
+customElements.define('landroid-linear-progress', LandroidLinearProgress);
diff --git a/src/landroid-card.js b/src/landroid-card.js
@@ -1,4 +1,3 @@
-// import '@material/mwc-linear-progress';
 import { LitElement, html, nothing } from 'lit';
 import {
   fireEvent,
@@ -16,6 +15,7 @@ import { stopPropagation, isObject, wifiStrenghtToQuality } from './helpers';
 import * as consts from './constants';
 import { DEFAULT_LANG, defaultConfig, defaultAttributes } from './defaults';
 import LandroidCardEditor from './landroid-card-editor';
+import './elements/landroid-linear-progress';
 
 const editorName = 'landroid-card-editor';
 const SENSOR_DEVICE_CLASS_TIMESTAMP = 'timestamp';
@@ -1131,9 +1131,9 @@ class LandroidCard extends LitElement {
       return nothing;
     }
 
-    // const dailyProgress = this.getEntityObject(
-    //   consts.SENSOR_DAILY_PROGRESS_SUFFIX,
-    // );
+    const dailyProgress = this.getEntityObject(
+      consts.SENSOR_DAILY_PROGRESS_SUFFIX,
+    );
 
     return html`
       <div class="toolbar">
@@ -1146,22 +1146,22 @@ class LandroidCard extends LitElement {
         >
           <ha-icon icon="mdi:tools"></ha-icon>
         </ha-icon-button>
+        ${dailyProgress
+          ? html`
+              <landroid-linear-progress
+                title="${dailyProgress.attributes
+                  .friendly_name}: ${this.hass.formatEntityState(
+                  dailyProgress,
+                )}"
+                aria-hidden="true"
+                role="progressbar"
+                progress="${dailyProgress.state || 0}"
+              >
+              </landroid-linear-progress>
+            `
+          : ''}
       </div>
     `;
-    // ${ dailyProgress
-    //   ? html`
-    //       <mwc-linear-progress
-    //         title="${dailyProgress.attributes
-    //           .friendly_name}: ${this.hass.formatEntityState(
-    //           dailyProgress,
-    //         )}"
-    //         aria-hidden="true"
-    //         role="progressbar"
-    //         progress="${dailyProgress.state / 100 || 0}"
-    //       >
-    //       </mwc-linear-progress>
-    //     `
-    //   : ''}
   }
 
   render() {