☰

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.

目前为 2023-11-21 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        grid organize device values (airthings dashboard)
  3. // @namespace   Violentmonkey Scripts
  4. // @match       https://dashboard.airthings.com/devices
  5. // @grant       GM_addStyle
  6. // @version     1.0
  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 can_disconnect = false;
  53.  
  54.   let devices = document.querySelectorAll('.list-tile__body');
  55.  
  56.   devices.forEach((device) => {
  57.     let sensor_blocks = device.querySelectorAll('.sensor__block');
  58.  
  59.     sensor_blocks.forEach((sensor_block) => {
  60.  
  61.       let sensor_name = sensor_block.querySelector('.sensor__name').innerText.toLowerCase();
  62.  
  63.       if (sensor_name === 'radon') {
  64.         // found element & doing a substitution, we can now
  65.         // disconnect listener at end of processing
  66.         can_disconnect = true;
  67.  
  68.         sensor_block.classList.add('sensor__block--radon');
  69.       }
  70.       if (sensor_name === 'voc') {
  71.         sensor_block.classList.add('sensor__block--voc');
  72.       }
  73.       if (sensor_name === 'co₂') {
  74.         sensor_block.classList.add('sensor__block--co2');
  75.       }
  76.       if (sensor_name === 'humidity') {
  77.         sensor_block.classList.add('sensor__block--humidity');
  78.       }
  79.       if (sensor_name === 'temp') {
  80.         sensor_block.classList.add('sensor__block--temp');
  81.       }
  82.       if (sensor_name === 'pressure') {
  83.         sensor_block.classList.add('sensor__block--pressure');
  84.       }
  85.  
  86.     });
  87.   });
  88.  
  89.   if (can_disconnect) {
  90.     return true;
  91.   }
  92. });
  93.  
  94. // You can also disconnect the observer explicitly when it's not used any more
  95. // disconnect();