Adds the decimal time count to the project page on Toggl

TogglHourDecimalCalc.user.js

// ==UserScript==
// @name         Toggl Hour Decimal Calculator
// @namespace    https://trev.app
// @version      0.1
// @description  Show hour decimal on Toggl project page
// @author       trev.app
// @match        https://track.toggl.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    let lastUrl = location.href;
    new MutationObserver(() => {
        const url = location.href;
        if (url !== lastUrl) {
            lastUrl = url;
            onUrlChange();
        }
    }).observe(document, {subtree: true, childList: true});
})();


function onUrlChange() {
    //console.log('URL changed!', location.href);
    const projMatch = /https:\/\/track\.toggl\.com\/\d+\/projects\/\d+\/team/g;
    if (location.href.match(projMatch)) {
        const element = document.querySelector('.css-ap5op8-DurationText');
        waitUntilReady(element);
    }
}

function waitUntilReady(element) {
    if(element.textContent === "0:00:00") {
       window.setTimeout(function() { waitUntilReady(element); }, 250);
    } else {
        const text = element.textContent;
        calculateAndAddDecimal(text);
    }
}

function calculateAndAddDecimal(timeText) {
    const timeSplit = timeText.split(':');

    const hour = parseInt(timeSplit[0]);
    const minute = parseInt(timeSplit[1]);
    const second = parseInt(timeSplit[2]);

    let finalTime = hour;
    finalTime += minute / 60;
    finalTime += (second / 60) / 60;
    finalTime = finalTime.toFixed(2);

    const summaryElement = document.querySelector('.css-1tci228-SummaryContainer');
    const newSummaryElement = summaryElement.cloneNode(true);
    summaryElement.appendChild(newSummaryElement);

    const title = newSummaryElement.querySelector('.css-17yz24w-Label-label').firstElementChild;
    title.textContent = 'Decimal';
    const count = newSummaryElement.querySelector('.css-ap5op8-DurationText');
    count.textContent = finalTime;
}