Extend the team calendar on "selfservice.officient.io" with a button to filter by YOUR TEAM

selfservice.officient.io-my-team-filter-button.md

This browser userscript will programmatically add a button to the team calendar at "selfservice.officient.io", allowing you to filter the list of employees to only your team under .../daysOff/coworkers => week-calendar. Simply add the names of your team members to TEAM_CONTACTS and you good.

Before

After

let lastUrl = ''
let calendar = null
let buttonGroup = null
let middleButton = null
let teamButton = null

const MATCHING_URL = 'https://selfservice.officient.io/daysOff/coworkers'
const TEAM_CONTACTS = [
    'John Doe',
    'Jane Dot',
    ...
]

const classGroup = {
    default: 'no-underline touch-area font-medium py-10px px-30px border-1px first_rounded-l-4px last_rounded-r-4px',
    active: 'bg-purple-10 text-purple-70 border-purple-70',
    inactive: 'bg-white text-blue-grey-50 border-blue-grey-20 hover_bg-purple-10',
}

const getStyleClasses = (isActive, classNames = '') =>
    `${classGroup.default} ${(isActive ? classGroup.active : classGroup.inactive)} ${classNames}`.trim()

const filterContacts = () => {
    const contacts = $('a.week-calendar-row .leading-none')
    if (!contacts || contacts.length === 0) {
        throw Error('No contacts found!')
    }
    contacts.each(function () {
        const name = $(this).text().trim()
        const parent = $(this).parent().parent().parent()
        if (TEAM_CONTACTS.map(item => item.toLowerCase()).indexOf(name.toLowerCase()) === -1) {
            parent.toggle()
        }
    })
}

const myTeamClickHandler = (event) => {
    event.preventDefault()

    teamButton.attr('class', getStyleClasses(true, 'team-filter-button'))
    middleButton.attr('class', getStyleClasses(false))

    teamButton.off('click', myTeamClickHandler)
    middleButton.on('click', middleButtonClickHandler)

    filterContacts()
}

const middleButtonClickHandler = (event) => {
    event.preventDefault()

    teamButton.attr('class', getStyleClasses(false, 'team-filter-button'))
    middleButton.attr('class', getStyleClasses(true))

    teamButton.on('click', myTeamClickHandler)
    middleButton.off('click', middleButtonClickHandler)

    $('a.week-calendar-row').show()
}

const initMyTeamFilter = () => {
    calendar = $('.content .page')
    if (!calendar) {
        throw Error('Calendar container not found!')
    }

    buttonGroup = $(calendar).children().eq(1)
    middleButton = $(buttonGroup).children().eq(1)

    middleButton.css('cursor', 'pointer')

    teamButton = $('<a/>', {
        'class': getStyleClasses(false, 'team-filter-button'),
        'text': 'My Team',
        'style': 'width: 7.5remcursor:pointer'
    })
        .appendTo(buttonGroup)

    $(teamButton).on('click', myTeamClickHandler)
    $(middleButton).off('click', middleButtonClickHandler)
}

const checkUrl = () => {
    if (window.location.href === MATCHING_URL) {
        lastUrl = MATCHING_URL
        initMyTeamFilter()
    } else {
        lastUrl = window.location.href
    }
}

(async () => {
    window.addEventListener('popstate', () => checkUrl())

    let targetFound = false
    new MutationObserver((mutations) => {
        for (const mutation of mutations) {
            let element = mutation.target
            while (element && !element.classList.contains('week-calendar')) {
                if (element.classList && Array.from(element.classList).some(cls => cls.startsWith('week-calendar'))) {
                    if (!targetFound) {
                        targetFound = true
                        checkUrl()
                        setTimeout(() => {
                            targetFound = false
                        }, 1500)
                    }
                    break
                }
                element = element.parentElement
            }
        }
    })
        .observe(document.querySelector('div[class^="week-calendar"]') || document.body, {
            attributes: true,
            attributeFilter: ['class'],
            subtree: true,
        })
})().catch(err => {
    console.error(err)
})