Add option to configure grid cell height

dan-danache · Aug 14, 2024 · b0f0016 · b0f0016
1 parent b7a4665
commit b0f0016
Show file tree

Hide file tree

Showing 7 changed files with 154 additions and 28 deletions.
diff --git a/watchtower-app/CHANGELOG.md b/watchtower-app/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.3.0] - 2024-08-15
 ### Added
 - Hub Info tile: add platform update available and alerts notifications - `@amithalp`
+- Add option to configure grid cell height
 
 ### Changed
 - Hub Info tile: add more hub details and make the widget configurable - `@amithalp`

diff --git a/watchtower-app/packageManifest.json b/watchtower-app/packageManifest.json
@@ -1,7 +1,7 @@
 {
     "packageName": "Watchtower",
     "version": "1.3.0",
-    "releaseNotes": "v1.3.0\n - Added: Hub Info tile: add platform update available and alerts notifications - @amithalp\n - Changed: Hub Info tile: add more hub details and make the widget configurable - @amithalp\n - Fixed: Fix Iframe tile margins - @amithalp",
+    "releaseNotes": "v1.3.0\n - Added: Hub Info tile: add platform update available and alerts notifications - @amithalp\n - Added: Add option to configure grid cell height\n - Changed: Hub Info tile: add more hub details and make the widget configurable - @amithalp\n - Fixed: Fix Iframe tile margins - @amithalp",
     "minimumHEVersion": "2.1.9",
     "author": "Dan Danache (@dandanache)",
     "dateReleased": "2024-08-15",

diff --git a/watchtower-app/src/components/dashboard-grid.js b/watchtower-app/src/components/dashboard-grid.js
@@ -168,6 +168,10 @@ export class DashboardGrid extends LitElement {
         this.renderRoot.querySelectorAll('device-panel, attribute-panel').forEach(panel => panel.setYScale(yScale))
     }
 
+    setCellHeight(cellHeight) {
+        this.grid.cellHeight(cellHeight, true)
+    }
+
     addPanel(config, w = 2, h = 1, x = undefined, y = undefined) {
         const content = `
             <div class="panel-container">

diff --git a/watchtower-app/src/components/dashboard-menu.js b/watchtower-app/src/components/dashboard-menu.js
@@ -66,15 +66,15 @@ export class DashboardMenu extends LitElement {
             display: block;
             width: 100%;
             margin-bottom: 5px;
-            padding: .5em;
+            height: 30px;
             background-color: var(--bg-color-darker);
             color: var(--text-color);
             border: 1px var(--border-color) solid;
             border-radius: 5px;
         }
         select:focus, button:focus {
             outline: 1px var(--Blue) solid;
-            border-color: var(--Blue)
+            border-color: var(--Blue);
         }
         aside {
             color: var(--text-color-darker);
@@ -85,13 +85,57 @@ export class DashboardMenu extends LitElement {
             user-select: none;
             font-size: .75rem;
         }
+        form {
+            border: 1px solid grey;
+            padding: 0;
+            background-color: var(--bg-color-darker);
+            color: var(--text-color);
+            border: 1px var(--border-color) solid;
+            border-radius: 5px;
+            position: relative;
+            display: block;
+            width: 100%;
+        }
+        form input[type="text"] {
+            box-sizing: border-box;
+            border: none;
+            color: var(--text-color);
+            background-color: transparent;
+            padding-right: 30px;
+            padding-left: 5px;
+            width: 100%;
+            height: 28px;
+        }
+        form input:focus {
+            outline: none;
+        }
+        form:focus-within {
+            border-color: var(--Blue);
+            outline: 1px solid var(--Blue); 
+        }
+        form:invalid {
+            border-color: var(--Red);
+            outline: 1px solid var(--Red);
+        }
+        form input[type="submit"] {
+            border: none;
+            color: var(--text-color);
+            background-color: transparent;
+            position: absolute;
+            top: 50%;
+            right: 0px;
+            transform: translateY(-50%);
+            cursor: pointer;
+            width: 30px;
+        }
     `;
 
     static properties = {
         open: { type: Boolean, reflect: true },
         refreshInterval: { type: String, state: true },
         theme: { type: String, state: true },
         yScale: { type: String, state: true },
+        cellHeight: { type: Number, state: true },
         mobileView: { type: Boolean, state: true }
     }
 
@@ -101,6 +145,7 @@ export class DashboardMenu extends LitElement {
         this.refreshInterval = '0'
         this.theme = 'light'
         this.yScale = 'auto'
+        this.cellHeight = 206
     }
 
     render() {
@@ -129,6 +174,14 @@ export class DashboardMenu extends LitElement {
                     <option value="auto">auto</option>
                     <option value="fixed">fixed</option>
                 </select>
+                <label>Cell height</label>
+                <form @submit=${this.changeCellHeight}>
+                    <input type="text" name="cellHeight" autocomplete="off"
+                        pattern="[1-3][0-9]{2}"
+                        .value="${this.cellHeight}"
+                    >
+                    <input type="submit" value="↩" title="Apply cell height">
+                </form>
                 ${this.mobileView ? nothing: html`
                     <hr>
                     <button @click=${this.saveDashboard} title="Save current dashboard layout">✓ Save dashboard</button>
@@ -162,6 +215,7 @@ export class DashboardMenu extends LitElement {
             theme: this.theme,
             refresh: this.refreshInterval,
             yScale: this.yScale,
+            cellHeight: this.cellHeight,
         }}))
     }
 
@@ -178,6 +232,12 @@ export class DashboardMenu extends LitElement {
         this.yScale = event.target.value
         this.dispatchEvent(new CustomEvent('changeYScale', { detail: this.yScale }))
     }
+    changeCellHeight(event) {
+        event.preventDefault()
+        const formProps = Object.fromEntries(new FormData(event.target))
+        this.cellHeight = parseInt(formProps.cellHeight)
+        this.dispatchEvent(new CustomEvent('changeCellHeight', { detail: this.cellHeight }))
+    }
 
     setTheme(theme) {
         this.theme = theme

diff --git a/watchtower-app/src/components/watchtower-app.js b/watchtower-app/src/components/watchtower-app.js
@@ -58,8 +58,9 @@ export class WatchtowerApp extends LitElement {
                 <dashboard-menu
                     @add=${this.showAddDialog}
                     @compact=${this.compactPanels}
-                    @changeRefreshInterval=${this.changeRefreshInterval}
-                    @changeYScale=${this.changeYScale}
+                    @changeRefreshInterval=${this.applyRefreshInterval}
+                    @changeYScale=${this.applyYScale}
+                    @changeCellHeight=${this.applyCellHeight}
                     @save=${this.saveDashboard}
                 ></dashboard-menu>
                 <dashboard-add-dialog @done=${this.addDashboardPanel}></dashboard-add-dialog>
@@ -81,6 +82,7 @@ export class WatchtowerApp extends LitElement {
         const refreshInterval = layout.refresh ? parseInt(layout.refresh) : 0
         const theme = layout.theme === 'dark' ? 'dark' : 'light'
         const yScale = layout.yScale == 'fixed' ? 'fixed' : 'auto'
+        const cellHeight = layout.cellHeight ? parseInt(layout.cellHeight) : 206
 
         // Show menu if dashboard contains no panels
         if (layout.panels.length === 0) this.menuElm.open = true
@@ -90,10 +92,12 @@ export class WatchtowerApp extends LitElement {
         this.gridElm.init(layout.panels)
         this.gridElm.setRefreshInterval(refreshInterval)
         this.gridElm.setYScale(yScale)
+        this.gridElm.setCellHeight(cellHeight)
 
         // Update menu
         this.menuElm.refreshInterval = refreshInterval
         this.menuElm.yScale = yScale
+        this.menuElm.cellHeight = cellHeight
         this.menuElm.setTheme(theme)
 
         // Apply mobile view
@@ -137,12 +141,16 @@ export class WatchtowerApp extends LitElement {
         this.gridElm.addPanel(event.detail)
     }
 
-    changeRefreshInterval(event) {
+    applyRefreshInterval(event) {
         const refreshInterval = parseInt(event.detail)
         this.gridElm.setRefreshInterval(refreshInterval)
     }
 
-    changeYScale(event) {
+    applyYScale(event) {
         this.gridElm.setYScale(event.detail)
     }
+
+    applyCellHeight(event) {
+        this.gridElm.setCellHeight(event.detail)
+    }
 }
diff --git a/watchtower-app/watchtower.groovy b/watchtower-app/watchtower.groovy
@@ -663,6 +663,7 @@ Map changelog() {
             paragraph '''\
                 <ul>
                     <li><b>Added</b>: Hub Info tile: add platform update available and alerts notifications - @amithalp
+                    <li><b>Added</b>: Add option to configure grid cell height
                     <li><b>Changed</b>: Hub Info tile: add more hub details and make the widget configurable - @amithalp
                     <li><b>Fixed</b>: Fix Iframe tile margins - @amithalp
                 </ul>

diff --git a/watchtower-app/watchtower.js b/watchtower-app/watchtower.js