Add colors in RHPI holidays dashboard
// ==UserScript== // @name RHPI+ // @namespace http://tampermonkey.net/ // @version 1.0.0 // @description Add colors in RHPI holidays dashboard // @author Victor Ros // @match https://*.com/webplace/ceg.jsp* // @icon https://img.icons8.com/color/512/sunbathe.png // @grant none // @license MIT // ==/UserScript== /* jshint esversion:10 */ (async function() { "use strict"; const log = (_msg, ..._args) => { if (typeof _msg === "object") { console.log("[RHPI+]", _msg, ..._args); } else { console.log(`[RHPI+] ${_msg}`, ..._args); } }; // Constants const ABSENCES_REGEX = /Planning individuel des absences/; // Label to detect if script can be run const EVTS = [ {label: "Congés payés", color: "#03a9f4"}, {label: "Jour de repos", color: "#ab47bc"}, {label: "Télétravail", color: "#ff9800"}, ]; /** * Returns days with EVTs. * In RHPI, there are 3 elements with class "planning_evt" per EVT. * @returns {Set} */ function findDaysWithEvts() { log("Look for days with EVTs"); const daysEvts = Array.from(document.querySelectorAll("table.planning tr.planning_jour > td > table.planning_evt")); return daysEvts.reduce((_acc, _elt, _idx) => { const parentElt = _elt.parentElement; if (!_acc.has(parentElt)) { _acc.add(parentElt); } return _acc; }, new Set()); } /** * Get EVT kind based on title (the only data we have). * @param {string} _title Title (tooltip). * @returns {string} EVT kind. */ function getEvtKind(_title) { return EVTS.find((_evt) => _title.startsWith(_evt.label)); } /** * Get EVTs infos for specific day. * @param {HTMLElement} _dayEvts A day with EVTs. * @returns {object} EVTs infos. */ function getInfos(_dayEvts) { const evts = Array.from(_dayEvts.querySelectorAll("table.planning_evt td[title]")); const infos = evts.map((_evt) => { return { evt: _evt, label: _evt.title, onclick: _evt.onclick, kind: getEvtKind(_evt.title), }; }); log(infos); return infos; } /** * Update colors. * @param {object} _infos EVTs infos. * @returns {void} Nothing. */ function updateColors(_infos) { _infos.forEach((_info) => { _info.evt.style.backgroundColor = _info.kind?.color; }); } /** * Add EVT in legend. * @param {string} _color Color to of the event. * @param {string} _text Text to display. * @returns {void} Nothing. */ function addLegend(_color, _text) { log(`Add ${_text} to legend!`); const legendPanel = document.getElementById("planning_legende"); const brTabIndex = document.createElement("br"); brTabIndex.setAttribute("tabindex", "-1"); const spanTabIndex = document.createElement("span"); spanTabIndex.setAttribute("style", `background-color:${_color}`); spanTabIndex.setAttribute("tabindex", "-1"); spanTabIndex.innerHTML = " "; const legend = document.createElement("span"); legend.innerHTML = ` ${_text}`; const firstElt = document.getElementById("planning_legende").firstChild; const emptySpan = document.createElement("span"); emptySpan.innerHTML = " "; legendPanel.insertBefore(brTabIndex, firstElt); legendPanel.insertBefore(emptySpan, firstElt); legendPanel.insertBefore(spanTabIndex, firstElt); legendPanel.insertBefore(legend, firstElt); legendPanel.insertBefore(brTabIndex.cloneNode(), firstElt); } /** * Update Legend. * @returns {void} Nothing. */ function updateLegend() { log("Update legend..."); EVTS.forEach((_evt) => { addLegend(_evt.color, _evt.label); }); log("Legend updated!"); } function run() { const planning = Array.from(document.querySelectorAll(".planning")); if (planning.length > 0) { log("Start RHPI+ script!"); updateLegend(); const daysEvts = findDaysWithEvts(); daysEvts.forEach((_dayEvts) => { const infos = getInfos(_dayEvts); updateColors(infos); }); log("Finish RHPI+ script!"); } else { log("Not in Absences page."); } } run(); })();