☰

grid organize device values (airthings dashboard)

11/21/2023, 2:01:51 PM add some classes and re-style the dashboard that shows device sensor data, using CSS grid.

  1. // ==UserScript==
  2. // @name        grid organize device values (airthings dashboard)
  3. // @namespace   Violentmonkey Scripts
  4. // @match       https://dashboard.airthings.com/*
  5. // @grant       GM_addStyle
  6. // @version     1.2
  7. // @author      popular-software
  8. // @description 11/21/2023, 2:01:51 PM add some classes and re-style the dashboard that shows device sensor data, using CSS grid.
  9. // @require https://cdn.jsdelivr.net/npm/@violentmonkey/dom@2
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13.  
  14. let styleElement = GM_addStyle(`
  15. @media screen and (min-width: 1286px) {
  16.     .list-tile__body {
  17.         display: grid;
  18.         grid-template-columns: repeat(6, 1fr);
  19.     }
  20.  
  21.     .list-tile__body .sensor__block--radon {
  22.         grid-column-start: 1;
  23.         grid-row-start: 1;
  24.     }
  25.     .list-tile__body .sensor__block--co2 {
  26.         grid-column-start: 2;
  27.         grid-row-start: 1;
  28.     }
  29.     .list-tile__body .sensor__block--voc {
  30.         grid-column-start: 3;
  31.         grid-row-start: 1;
  32.     }
  33.     .list-tile__body .sensor__block--temp {
  34.         grid-column-start: 4;
  35.         grid-row-start: 1;
  36.     }
  37.     .list-tile__body .sensor__block--humidity {
  38.         grid-column-start: 5;
  39.         grid-row-start: 1;
  40.     }
  41.     .list-tile__body .sensor__block--pressure {
  42.         grid-column-start: 6;
  43.         grid-row-start: 1;
  44.     }
  45. }
  46. `);
  47.  
  48. const disconnect = VM.observe(document.body, () => {
  49.  
  50.   console.log('RUN grid organize device values')
  51.  
  52.   let devices = document.querySelectorAll('.list-tile__body');
  53.  
  54.   devices.forEach((device) => {
  55.     let sensor_blocks = device.querySelectorAll('.sensor__block');
  56.  
  57.     sensor_blocks.forEach((sensor_block) => {
  58.  
  59.       let sensor_name = sensor_block.querySelector('.sensor__name').innerText.toLowerCase();
  60.  
  61.       if (sensor_name === 'radon') {
  62.         sensor_block.classList.add('sensor__block--radon');
  63.       }
  64.       if (sensor_name === 'voc') {
  65.         sensor_block.classList.add('sensor__block--voc');
  66.       }
  67.       if (sensor_name === 'co₂') {
  68.         sensor_block.classList.add('sensor__block--co2');
  69.       }
  70.       if (sensor_name === 'humidity') {
  71.         sensor_block.classList.add('sensor__block--humidity');
  72.       }
  73.       if (sensor_name === 'temp') {
  74.         sensor_block.classList.add('sensor__block--temp');
  75.       }
  76.       if (sensor_name === 'pressure') {
  77.         sensor_block.classList.add('sensor__block--pressure');
  78.       }
  79.  
  80.     });
  81.   });
  82.  
  83. });