Dashboard: Sort Tiles based on an Attribute Value?

📝 Dashboards Hubitat Dashboard
17

Got it !!!!

image
image3414×1898 196 KB

Thanks to @mbarone and this thread JS injection for Dashboard - :construction: Developers - Hubitat

I was able to inject a simple piece of javascript that did just what I wanted

(function() {0
    function pageStart(){
        //console.log("pageStart called");

        if(window.location.pathname.includes("device/edit")){
            // log to console that the script was injected properly, but stopped becuase we are on the device page
            console.log("JavaScript has been injected!  The script was stopped because it was injected into the device/edit page.  This should work on a dashboard.")
            // stop execution if we are on the device edit page, and not a dashboard.
            return;
        }
        /************************************/
        /* Add custom JavaScript below here */
        /************************************/
       
	    // Create an array containing the tile objects
        let tiles = Array.from(document.querySelectorAll(".tile",".attribute"))
		
		// Create an array containing each tile's id and value.
	    const lastUpdated = tiles.map((tile) => { 
	      return {id: tile.id, value: tile.querySelector(".tile-contents").querySelector(".tile-primary")?.innerText}
		})
        
		// Sort the array of tile ids by value
        lastUpdated.sort((a, b) => { return (a.value > b.value) ? 1 : -1})
		
		// Convert the array of tile objects into an object with the tiles keyed by id
	    tiles = tiles.reduce((object, tile) => { object[tile.id] = tile; return object}, {})
	
		// Remove the grid-area style from each tile and replace it with an order key.
		
     	const oneWeekAgo = new Date()
		oneWeekAgo.setUTCDate(oneWeekAgo.getUTCDate() - 7)
		const compareDate = new Date(oneWeekAgo.getTime() - (oneWeekAgo.getTimezoneOffset() * 60000 ))
		const compareValue = compareDate.toISOString().replace('T',' ').substring(0,19)		  
		
		lastUpdated.forEach((tile,idx) => {
		  const target = tiles[tile.id]
		  target.style.removeProperty('grid-area');
		  if ( tile.value === "" ) {
		    target.style.order = lastUpdated.length + 1
		    target.style.display = "none"
		  }
		  else {
		    target.style.order = idx 
			if (tile.value < compareValue) {
			target.style.setProperty("background-color","red");
			}
		  }
		})
		
	
        //console.log("pageStart ended");
    }
    pageStart();
})();

type or paste code here

4 Likes