☰

KAAUH Lab PatientID TD Counter (Inline Colorful)

Inline colorful sample counter next to the close button in modal

As of 2025-05-08. See the latest version.

// ==UserScript==
// @name         KAAUH Lab PatientID TD Counter (Inline Colorful)
// @namespace    Violentmonkey Scripts
// @version      1.3
// @description  Inline colorful sample counter next to the close button in modal
// @match        https://his.kaauh.org/lab/*
// @author       Hamad AlShegifi
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const counterId = 'inline-patientid-counter';

    function createInlineCounter(container) {
        if (document.getElementById(counterId)) return;

        const wrapper = document.createElement('span');
        wrapper.id = counterId;
        wrapper.style.marginLeft = '12px';
        wrapper.style.fontSize = '18px';
        wrapper.style.fontWeight = 'bold';
        wrapper.style.display = 'inline-flex';
        wrapper.style.alignItems = 'center';

        const label = document.createElement('span');
        label.textContent = 'SAMPLES COUNT: ';
        label.style.marginRight = '6px';
        label.style.color = '#333';

        const badge = document.createElement('span');
        badge.className = 'sample-count-badge';
        badge.textContent = '0';
        badge.style.backgroundColor = '#6c757d'; // gray by default
        badge.style.color = '#fff';
        badge.style.padding = '2px 8px';
        badge.style.borderRadius = '12px';
        badge.style.fontSize = '18px';
        badge.style.minWidth = '24px';
        badge.style.textAlign = 'center';

        wrapper.appendChild(label);
        wrapper.appendChild(badge);
        container.appendChild(wrapper);
    }

    function updateCounter() {
        const badge = document.querySelector('#' + counterId + ' .sample-count-badge');
        if (!badge) return;

        const inputs = document.querySelectorAll(
            'modal-container.show td input[formcontrolname="PatientID"]'
        );
        const count = inputs.length;
        badge.textContent = count;

        // Change color based on count
        badge.style.backgroundColor = count > 0 ? '#28a745' : '#6c757d'; // green if > 0
    }

    function observeModal() {
        const observer = new MutationObserver(() => {
            const closeBtn = document.getElementById('closebtn-smplrecieve');
            const modal = document.querySelector('modal-container.show');

            if (closeBtn && modal && !document.getElementById(counterId)) {
                createInlineCounter(closeBtn.parentElement);
                updateCounter();

                const interval = setInterval(() => {
                    if (!document.body.contains(modal)) {
                        clearInterval(interval);
                        const existing = document.getElementById(counterId);
                        if (existing) existing.remove();
                    } else {
                        updateCounter();
                    }
                }, 800);
            }
        });

        observer.observe(document.body, { childList: true, subtree: true });
    }

    window.addEventListener('load', observeModal);
})();