My Interactions notification bubble

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

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

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

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

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

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

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

(I already have a user script manager, let me install it!)

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.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         My Interactions notification bubble
// @namespace    https://github.com/nate-kean/
// @version      20251030
// @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() {
    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 having 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.classList.add("header-icon");
            const bubble = document.createElement("div");
                bubble.classList.add("notification-count-holder");
                bubble.setAttribute("style", "visibility: hidden; pointer-events: none;");
                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.removeAttribute("style");
        }
    navIconContainer.prepend(miContainer);

    const newCount = await getMOICount();
    countEl.textContent = newCount;
    if (newCount > 0) {
        bubble.removeAttribute("style");
    }
})();