My Interactions notification bubble

Add a notification bubble to the navbar for outstanding Interactions assigned to you.

K instalaci tototo skriptu si budete muset nainstalovat rozšíření jako Tampermonkey, Greasemonkey nebo Violentmonkey.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat manažer uživatelských skriptů.

(Už mám manažer uživatelských skriptů, nechte mě ho nainstalovat!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Už mám manažer uživatelských stylů, nechte mě ho nainstalovat!)

// ==UserScript==
// @name         My Interactions notification bubble
// @namespace    https://github.com/nate-kean/
// @version      20251123
// @description  Add a notification bubble to the navbar for outstanding Interactions assigned to you.
// @author       Nate Kean
// @match        https://jamesriver.fellowshiponego.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=fellowshiponego.com
// @grant        none
// @license      MIT
// ==/UserScript==

(async function() {
        document.head.insertAdjacentHTML("beforeend", `
        <style id="nates-notification-bubble-click-passthrough">
            .notification-count-holder {
                pointer-events: none;
            }
        </style>
    `);

    async function getMOICount() {
        if (window.location.pathname === "/interactions") {
            // Don't request the My Interactions page if you're already there
            return parseInt(document.querySelector(".group-grand-total").textContent);
        }

        const response = await fetch("https://jamesriver.fellowshiponego.com/interactions");
        if (response.status !== 200) {
            return 0;
        }
        const htmlText = await response.text();
        const indexStart = htmlText.indexOf('group-grand-total">') + 'group-grand-total">'.length;
        if (indexStart === -1) {
            console.error("Failed to parse My Interactions page: couldn't find start of count.");
            return 0;
        }
        const indexEnd = htmlText.indexOf("</span>", indexStart);
        if (indexEnd === -1 || indexEnd - indexStart > 3) {
            // Assuming, hopefully, that it looking like there are more than 999 outstanding
            // interactions assigned to you would always be an error
            console.error("Failed to parse My Interactions page: couldn't find end of count.");
            return 0;
        }
        const count = parseInt(htmlText.substring(indexStart, indexEnd));
        window.localStorage.setItem("ndkMyOutstandingInteractionsCount", count);
        return count;
    }

    const cachedCount = window.localStorage.getItem("ndkMyOutstandingInteractionsCount") ?? 0;

    const navIconContainer = document.querySelector("header .desktop-icons");
        const miContainer = document.createElement("div");
        miContainer.id = "nates-my-interactions-notification-icon";
        miContainer.classList.add("header-icon");
            const bubble = document.createElement("div");
                bubble.classList.add("notification-count-holder", "invisible");
                const countEl = document.createElement("div");
                    countEl.classList.add("notification-count");
                    countEl.textContent = cachedCount;
                bubble.appendChild(countEl);
            miContainer.appendChild(bubble);
            const a = document.createElement("a");
            a.href = "/interactions";
                const icon = document.createElement("i");
                icon.classList.add("fas", "fa-comments-alt");
                icon.setAttribute("data-placement", "bottom");
                icon.setAttribute("data-original-title", "My Interactions");
                icon.setAttribute("data-toggle", "tooltip");
                $(icon).tooltip();
            a.appendChild(icon);
        miContainer.appendChild(a);

        if (cachedCount > 0) {
            bubble.classList.remove("invisible");
        }
    navIconContainer.prepend(miContainer);

    const newCount = await getMOICount();
    countEl.textContent = newCount;
    if (newCount > 0) {
        bubble.classList.remove("invisible");
    } else {
        bubble.classList.add("invisible");
    }
})();