Aipo Highlight Current Time

highlight-current-time.user.js

// ==UserScript==
// @name         Aipo Highlight Current Time
// @namespace    http://senta.me/
// @version      0.0.1
// @description  Highlight Current Time on Calendar View
// @author       @__senta
// @match        https://app.aipo.com/*
// @grant        none
// ==/UserScript==

(function () {
  const HEIGHLIGHT_COLOR = '#FF9700'
  let lastHour = null

  function heighlight(date) {
    const now = ('0' + date.getHours()).substr(-2) + ':00'
    const timeline = Array.prototype.slice.call(document.querySelectorAll('.leftMinute'))

    // reset heighlighted elements
    timeline.forEach(el => {
      el.style.backgroundColor = ''
      el.nextElementSibling.backgroundColor = ''
    });

    // heighlight current time
    const el = timeline.find(
      el => el.innerText === now
    );

    [el, el.nextElementSibling].forEach(el => {
      Object.assign(el.style, {
        backgroundColor: HEIGHLIGHT_COLOR,
        fontWeight: 'bold'
      })
    })
  }

  function tick() {
    const now = new Date()

    if (lastHour !== now.getHours()) {
      heighlight(now)
      lastHour = now.getHours
    }

    setTimeout(tick, 1000 * 6)
  }

  requestAnimationFrame(function toBeReady() {
    if (document.querySelector('.leftMinute')) {
      tick()
    } else {
      requestAnimationFrame(toBeReady)
    }
  })
})()