worklogger.user.js

// ==UserScript==
// @name         p4u-worklogger
// @description  JIRA work log in UU
// @version      2.10.1
// @namespace    https://uuos9.plus4u.net/
// @homepage     https://github.com/bubblefoil/p4u-worklogger
// @author       bubblefoil
// @license      MIT
// @require      https://code.jquery.com/jquery-3.2.1.min.js
// @grant        GM_xmlhttpRequest
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addStyle
// @connect      jira.unicorn.com
// @match        https://uuos9.plus4u.net/uu-specialistwtmg01-main/*
// @match        https://uuapp.plus4u.net/uu-specialistwtm-maing01/*
// @run-at       document-idle
// ==/UserScript==

//Test issue - FBLI-7870
const jiraComUrl = 'https://jira.unicorn.com';
const jiraRestApiPath = 'rest/api/2';
const jiraIssueKeyPattern = /([A-Z]+-\d+)/;
const jiraIssueProjectPattern = /([A-Z]+)-\d+/;

class PageCheck {

    static isWorkLogFormPage() {
        //Check that the work log page is loaded by querying for some expected elements
        if (document.title !== 'Working Time Management') {
            console.log("Judging by the page title, this does not seem to be the Working Time Management app. Exiting extension script.");
            return false;
        }
        return true;
    }
}

if (!PageCheck.isWorkLogFormPage()) {
    // noinspection JSAnnotator
    return;
} else {
    // language=CSS
    // noinspection JSUnresolvedFunction
    GM_addStyle(`
    /* Widen the month selection button envelope by overriding its fixed width. */
    .uu-specialistwtm-worker-monthly-detail-top-change-month-dropdown {
        min-width: 330px;
    }
    /* Copied from .uu-specialistwtm-worker-monthly-detail-top-back-icon without its padding */
    .wtm-month-switch-button-icon {
        color: #616161;
        font-size: 20px;
        height: fit-content;
    }
    `);

    // Polyfill some syntactic sugar
    Promise.of = Promise.resolve;
}

const jiraIssueLoaderAnimation = `
<style>
    .progress-spinner {
        width: 16px;
        height: 16px;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 1.5s linear infinite;
    }

    /* Safari */
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>
<svg class="progress-spinner" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 75.76 75.76">
    <defs>
        <style>.cls-2 { fill: #2684ff; } .cls-3 { fill: url(#linear-gradient); } .cls-4 { fill: url(#linear-gradient-2); }</style>
        <linearGradient id="linear-gradient" x1="34.64" y1="15.35" x2="19" y2="30.99" gradientUnits="userSpaceOnUse"><stop offset="0.18" stop-color="#0052cc"/><stop offset="1" stop-color="#2684ff"/></linearGradient>
        <linearGradient id="linear-gradient-2" x1="38.78" y1="60.28" x2="54.39" y2="44.67" xlink:href="#linear-gradient"/>
    </defs>
    <title>Connecting to Jira...</title>
    <g id="Layer_2">
        <g id="Blue">
            <path class="cls-2" d="M72.4,35.76,39.8,3.16,36.64,0h0L12.1,24.54h0L.88,35.76A3,3,0,0,0,.88,40L23.3,62.42,36.64,75.76,61.18,51.22l.38-.38L72.4,40A3,3,0,0,0,72.4,35.76ZM36.64,49.08l-11.2-11.2,11.2-11.2,11.2,11.2Z"/>
            <path class="cls-3" d="M36.64,26.68A18.86,18.86,0,0,1,36.56.09L12.05,24.59,25.39,37.93,36.64,26.68Z"/>
            <path class="cls-4" d="M47.87,37.85,36.64,49.08a18.86,18.86,0,0,1,0,26.68h0L61.21,51.19Z"/>
        </g>
    </g>
</svg>
`;

/**
 * Branches off the flow into a supplied function, typically to perform side-effects.
 * Returns the input value.
 *
 * @param {function(*): *} f The dead-end functions, may be impure.
 * @return {function(*): (Promise<*> | Promise<void>)} Resolved Promise of the original input
 */
const tee = (f) => (x) => {
    f(x);
    return Promise.of(x);
};

/**
 * Returns wrapped fn which, when called, delegates the call to fn
 * if and only if pred returns true at the time of invocation.
 * Wrapping function passes args to Both pred and fn.
 *
 * @param pred {Function} predicate
 * @param fn {Function} function to be called conditionally if pred(...args) == true
 * @return {Function}
 */
function when(pred, fn) {
    return function conditionalFn(...args) {
        if (pred(...args)) {
            return fn(...args);
        }
    }
}

/**
 * Returns a function that dispatches calls to one of given functions, based on the first matching predicate.
 * Takes pairs of predicate, function (alternating), tests predicates one by one
 * and when a predicate returns true (strict match), calls following function and returns its result.
 * Each predicate and fn gets arguments passed to the returned dispatching function.
 *
 * Basically a functional if-else.
 *
 * @param pred {Function} Predicate
 * @param fn {Function} Function to call if pred matches.
 * @param more More pred/fn pairs.
 * @return {function(...[*]=)} Dispatching function
 */
function condp(pred, fn, ...more) {
    if (more.length % 2 !== 0) {
        throw new Error('Invalid number of functions. Expected even number of functions, predicate/function pairs.')
    }
    const nonFn = [pred, fn, ...more].find(f => typeof f !== "function");
    if (nonFn) {
        throw new TypeError('Invalid argument. Expected even number of functions, predicate/function pairs, but got this: ' + nonFn);
    }
    return function predMatchingFn(...args) {
        const fns = [pred, fn, ...more];
        for (let i = 0; i < fns.length; i += 2) {
            if (fns[i](...args)) {
                return fns[i + 1](...args);
            }
        }
    };
}

/**
 * Returns pred giving negated result.
 */
function not(pred) {
    return function notPred(...args) {
        return !pred(...args);
    }
}

/**
 * Returns pred giving positive result if all given preds return true.
 */
function and(...preds) {
    return function everyPred(...args) {
        return preds.every(p => {
            if (typeof p !== "function") {
                throw new TypeError('All arguments of function [and] must be functions, not this thing:' + p);
            }
            return p(...args);
        });
    };
}

/**
 * Pure form of attribute assignment.
 * Adds an attribute to an object and returns the updated object.
 *
 * @param o Target object
 * @param k Attribute name
 * @param v Attribute value
 * @return {Object} o with o.k = v
 */
const assoc = (o, k, v) => {
    o[k] = v;
    return o;
};

/**
 * Enhances the work log table.
 */
class LogTableDecorator {

    /**
     * Finds the JIRA issue references in the work descriptions in the work log table
     * and replaces them with links.
     */
    static findAndLinkifyJiraIssues() {
        const logTableNodes = document.querySelectorAll('#table-tsitems td.htsItemStyle div.hts_object');
        const hasTextNodes = (p) => Array.from(p.childNodes).find(n => n.nodeType === 3);
        Array.from(logTableNodes)
            .filter(hasTextNodes)
            .forEach(node => this.replaceIssueByLink(node));
    }

    static replaceIssueByLink(element) {
        const issueKeyPatternGlobal = new RegExp(jiraIssueKeyPattern, "g");
        element.innerHTML = element.innerHTML
            .replace(issueKeyPatternGlobal, `<a href="${jiraComUrl + '/browse'}/$1" target="_blank">$1</a>`);
    }
}

const wtmMessage = {
    cs: {
        'wtm.table.day-range.label': 'ČAS MEZI DNY:',
        'wtm.month.prev.title': 'Předchozí měsíc',
        'wtm.month.next.title': 'Následující měsíc',
    },
    en: {
        'wtm.table.day-range.label': 'TIME BETWEEN DAYS:',
        'wtm.month.prev.title': 'Previous month',
        'wtm.month.next.title': 'Next month',
    }
};

const _t = function (messageCode) {
    if (!messageCode) {
        console.warn('Invalid I18N message code: ', messageCode);
        return '?';
    }
    const getBundle = function () {
        const language = WtmWorktableModel.language();
        if (wtmMessage.hasOwnProperty(language)) {
            return wtmMessage[language];
        }
        return wtmMessage.cs
    };
    const bundle = getBundle();
    if (!bundle.hasOwnProperty(messageCode)) {
        console.warn(`)I18N message "${messageCode}" is not defined for "${WtmWorktableModel.language()}`);
        return messageCode;
    }
    return bundle[messageCode];
};

class WtmDateTime {

    /**
     * Returns parsed date as an array of fields: [day, month, year]. Months are counted from 1.
     * @param {string} selectedDate
     * @return {number[]}
     */
    static parseDate(selectedDate) {
        const dateParts = selectedDate.split(/[.\/]/);
        const dateFields = dateParts.length === 3 && dateParts.map(Number) || [NaN, NaN, NaN];
        if (WtmWorktableModel.language() === 'cs') {
            return dateFields;
        } else {
            const [month, day, year] = dateFields;
            return [day, month, year];
        }
    }

    static parseDateTime(selectedDate, selectedTime) {
        const [day, month, year] = this.parseDate(selectedDate);
        const [hour, minute] = selectedTime.split(':').map(Number);
        return new Date(year, month - 1, day, hour, minute, 0, 0);
    }

    static padToDoubleDigit(num) {
        const norm = Math.floor(Math.abs(num));
        return (norm < 10 ? '0' : '') + norm;
    }

    static addHours(d, h) {
        return this.addMinutes(d, h * 60);
    }

    static addMinutes(d, m) {
        return new Date(d.getTime() + (m * 60 * 1000))
    }
}

/**
 * Access methods to the WTM time table view.
 */
class WtmWorktableModel {

    static language() {
        return document.getElementsByClassName("uu5-bricks-language-selector-code-text")[0].textContent;
    }

    static newItemButton() {
        return document.querySelector('button.uu-specialistwtm-create-timesheet-item-button');
    }

    static monthlyDetailTopTimeColumn() {
        return document.querySelector('.uu5-common-div .uu-specialistwtm-worker-monthly-detail-top-time-column');
    }

    static timeTable() {
        return document.querySelector('table.uu5-bricks-table-table');
    }

    /**
     * Reads the day of month from a time table row.
     * @param {HTMLTableRowElement} tableRow
     * @return {number|NaN} Day of month, 0 - 31, or NaN.
     */
    static getDay(tableRow) {
        const dateCellText = tableRow.cells[1].innerText;
        const dateFields = WtmDateTime.parseDate(dateCellText);
        return dateFields[0];
    }

    static isModalDialogOpened() {
        const modal = document.querySelector('div.uu5-bricks-page-modal');
        const modalStyle = modal && window.getComputedStyle(modal);
        return modalStyle && modalStyle.visibility === 'visible';
    }

    /**
     * Reads logged working time in minutes from a time table row.
     * @param {HTMLTableRowElement} tableRow
     * @return {number|NaN} Minutes of work, or NaN.
     */
    static getTimeInMinutes(tableRow) {
        const dateCellText = tableRow.cells[2].innerText;
        const match = dateCellText.match(/(\d\d)[:](\d\d)/);
        return match && 60 * Number(match[1]) + Number(match[2]) || NaN;
    }

    /**
     * Filters table rows by given range of days of month.
     * @param {number} dayFrom
     * @param {number} dayTo
     * @return {Promise<HTMLTableRowElement[]>}
     */
    static rowsBetweenDays(dayFrom, dayTo) {
        return new Promise(resolve => {
            const timeTable = WtmWorktableModel.timeTable();
            const firstDay = Math.min(dayFrom, dayTo);
            const lastDay = Math.max(dayFrom, dayTo);
            const rowsInRange = [].filter.call(timeTable.rows, (row, idx) => {
                return idx > 0 && firstDay <= WtmWorktableModel.getDay(row) && WtmWorktableModel.getDay(row) <= lastDay;
            });
            resolve(rowsInRange);
        })
    }

    /**
     *
     * @param dayFrom
     * @param dayTo
     * @return {Promise<number>} Sum of time in selected day range in minutes.
     */
    static minutesBetween(dayFrom, dayTo) {
        return this
            .rowsBetweenDays(dayFrom, dayTo)
            .then((rows) => new Promise(resolve => {
                const minutesTotal = rows
                    .map((row) => WtmWorktableModel.getTimeInMinutes(row))
                    .reduce((acc, minutes) => acc + minutes, 0);
                resolve(minutesTotal);
            }));
    }
}

/**
 * Takes care of Time table extension view.
 */
class WtmWorktableView {

    constructor() {
    }

    static worktableSumViewShow() {
        if (document.getElementById('wtt-time-range-form')) {
            console.log('WTM Extension: Work table already enhanced.');
            WtmWorktableView.updateSum();
            return;
        }
        console.log('WTM Extension: enhancing work table');
        const today = new Date();
        const dayOfWeek = (today.getDay() + 6) % 7;
        const lastMonday = Math.max(today.getDate() - dayOfWeek, 1);
        const nextSunday = Math.min(lastMonday + 6, 31);
        WtmWorktableModel.monthlyDetailTopTimeColumn()
            .insertAdjacentHTML(
                'beforeend',
                `
                <div id="wtt-time-range-form" class="uu-specialistwtm-worker-monthly-detail-top-time-column" style="z-index: 10">
                    <!--Move the span to front, because this div is covered by some uu component's width % and the content is hard to select by mouse-->
                    <span class="uu5-bricks-span uu5-bricks-lsi-item uu5-bricks-lsi uu-specialistwtm-worker-monthly-detail-top-total-time-label" style="width: max-content; min-width: 8em;">${_t('wtm.table.day-range.label')}</span>
                    <input class="uu5-bricks-text uu5-common-text uu-specialistwtm-worker-monthly-detail-table-form-date" type="number" id="wtt-day-from" value="${lastMonday}" min="1" max="31" style="width: 4em; margin: 0.25em">
                    <input class="uu5-bricks-text uu5-common-text uu-specialistwtm-worker-monthly-detail-table-form-date" type="number" id="wtt-day-to" value="${nextSunday}" min="1" max="31" style="width: 4em; margin: 0.25em">
                    <span id="wtt-time-in-range-sum" class="uu5-bricks-span uu-specialistwtm-worker-monthly-detail-top-total-time">${WtmWorktableView.formatToHours(0)}</span>
                </div>`
            );
        WtmWorktableView.getDayFromInput().onchange = () => WtmWorktableView.updateSum();
        WtmWorktableView.getDayFromInput().onclick = () => WtmWorktableView.updateSum();
        WtmWorktableView.getDayToInput().onchange = () => WtmWorktableView.updateSum();
        WtmWorktableView.getDayToInput().onclick = () => WtmWorktableView.updateSum();
        WtmWorktableView.updateSum().catch((e) => console.warn(e));
    }

    static getDayToInput() {
        return document.getElementById('wtt-day-to');
    }

    static getDayFromInput() {
        return document.getElementById('wtt-day-from');
    }

    static async updateSum() {
        const dFrom = Number(WtmWorktableView.getDayFromInput().value);
        const dTo = Number(WtmWorktableView.getDayToInput().value);
        document.getElementById('wtt-time-in-range-sum').innerText = '-h';
        const minutesInRange = await WtmWorktableModel.minutesBetween(dFrom, dTo);
        document.getElementById('wtt-time-in-range-sum').innerText = WtmWorktableView.formatToHours(minutesInRange);
    }

    static formatToHours(minutes) {
        return ` ${Number(Math.round(minutes / 60 * 100) / 100).toLocaleString(WtmWorktableModel.language())}h`;
    }
}

class WtmDialog {

    static descArea() {
        return document.getElementsByTagName("textarea")[0];
    }

    static _getNamedInput(elementName) {
        return document.getElementsByName(elementName)[0]
            .lastChild
            .firstChild
            .firstChild;
    }

    static datePicker() {
        return WtmDialog._getNamedInput("date")
    }

    static timeFrom() {
        return WtmDialog._getNamedInput("timeFrom");
    }

    static timeTo() {
        return WtmDialog._getNamedInput("timeTo");
    }

    static artifactField() {
        return WtmDialog._getNamedInput("subject");
    }

    static categoryField() {
        return WtmDialog._getNamedInput("category");
    }

    static dateFrom() {
        return WtmDateTime.parseDateTime(this.datePicker().value, this.timeFrom().value);
    }

    static dateTo() {
        return WtmDateTime.parseDateTime(this.datePicker().value, this.timeTo().value);
    }

    static getDurationSeconds() {
        const dateFrom = WtmDialog.dateFrom();
        const dateTo = WtmDialog.dateTo();
        if (isNaN(dateFrom.getTime()) || isNaN(dateTo.getTime())) {
            return 0;
        }
        const durationMillis = dateTo - dateFrom;
        return durationMillis > 0 ? durationMillis / 1000 : 0;
    }

    /** Returns the OK button. It is an &lt;a&gt; element containing a structure of spans. */
    static buttonNextItem() {
        return WtmDialog.highRateNode().parentElement
            .lastChild
            .firstChild
            .firstChild
            .firstChild;
    }

    /** Returns the 'Next item' button. It is an &lt;a&gt; element containing a structure of spans, or null in case of work log update. */
    static  buttonOk() {
        return WtmDialog.highRateNode().parentElement
            .lastChild
            .lastChild
            .firstChild
            .firstChild;
    }

    static addKeyboardShortcutMnemonics() {
        WtmDialog.buttonOk().title = "Ctrl + Enter";
        WtmDialog.buttonNextItem().title = "Ctrl + Shift + Enter";
    }

    /**
     *
     * @param {HTMLElement} element
     * @param {string} key
     */
    static addMnemonic(element, key) {
        if (element && key && key.length === 1 && element.innerText.indexOf(key) > 0) {
            element.innerHTML = element.innerText.replace(key, `<u>${key}</u>`);
            element.accessKey = key;
        }
    }

    static highRateNode() {
        return document.getElementsByName("highRate")[0];
    }
}

/**
 * Wrap log functions to make them more functional.
 * Cannot be wrapped in a class because FF does not support fields and standard function syntax is horribly bloated.
 */
const log = tee(console.log);
const error = tee(console.error);
const warn = tee(console.warn);
const info = tee(console.info);
const debug = tee(console.debug);
const trace = tee(console.trace);

/**
 * Removes leading and trailing slash '/' character.
 * @param s
 * @return {string}
 */
const stripSlashes = (s) => s
    .replace(/^\//, '')
    .replace(/\/?$/, '');

const addRequestParameter = (parameter) => (value) => (url) => {
    const separator = url.includes('?') ? '&' : '?';
    return `${url}${separator}${parameter}=${value}`;
};

/**
 * @param {...string|string[]} resource path
 * @return {function(*=): Promise<string | Error>}
 */
const getResourceUrl = (...resource) => (domain) => new Promise((resolve, reject) => {
        if (domain && typeof domain === 'string') {
            resolve(`${stripSlashes(domain)}/${resource.flat().map(stripSlashes).join('/')}`);
        } else {
            reject(new TypeError('Invalid url domain :' + domain));
        }
    }
);

/**
 * @param {...string} resourcePath path
 * @return {function(*=): Promise<string | Error>}
 */
const jiraRestApiResource = (...resourcePath) =>
    getResourceUrl([jiraRestApiPath].concat(resourcePath).flat(2));

/**
 * @param {...string} issue JIRA issue key
 * @return {function(string): Promise<string|Error>} Resource url provider which takes domain as the argument.
 */
const jiraRestApiIssueUrl = (issue) => jiraRestApiResource('issue', issue);


/**
 * @param {...string} issue JIRA issue key
 * @return {function(string): Promise<string|Error>} Resource url provider which takes domain as the argument.
 */
const jiraBrowseIssueUrl = (issue) => getResourceUrl('browse', issue);

class InvalidResponse {
    /**
     * @param {HttpResponse} response
     */
    constructor(response) {
        this._url = response.finalUrl;
        this._response = response;
    }

    get response() {
        return this._response;
    }

    get url() {
        return this._url;
    }
}

class InvalidProjectError {

    constructor(projectKey) {
        this._projectKey = projectKey;
    }

    get projectKey() {
        return this._projectKey;
    }
}

class ProjectLoadingError {

    constructor(projectKey) {
        this._projectKey = projectKey;
    }

    get projectKey() {
        return this._projectKey;
    }
}

/**
 * Constructs a base of an HTTP request for json data and GET method.
 *
 * @param {string} url
 * @return {Request} Pre-filled request object for GM_xmlhttpRequest
 */
const getJsonRequest = (url) => ({
    method: 'GET',
    headers: {'Accept': 'application/json'},
    url: url,
    onreadystatechange: function (res) {
        console.debug(`Processing request: [${url}], state: ${res.readyState}`);
    }
});

/**
 * JIRA API connector and utils.
 */
class Jira4U {

    constructor() {
    }

    static tryParseIssue(desc) {
        console.log(`Parsing description: ${desc}`);
        if (typeof desc !== "string") {
            return new WorkDescription();
        }
        return WorkDescription.parse(desc);
    }

    /**
     * @param {string} issueKey
     * @return {Promise<string|TypeError>}
     */
    static getProjectCode(issueKey) {
        if (typeof issueKey !== 'string' || !jiraIssueProjectPattern.test(issueKey)) {
            return Promise.reject(new TypeError(`Invalid argument issueKey: "${issueKey}", expected an issue key`));
        }
        return Promise.of(issueKey.match(jiraIssueProjectPattern)[1]);
    }

    /**
     * @param {Function} onprogress
     * @return {function(Object): Object}
     */
    static setOnProgressCallback(onprogress) {
        return (request) => Object.assign(request, {onreadystatechange: onprogress});
    }
    /**
     * Triggers the actual http request.
     *
     * @typedef HttpResponse
     * @property {number} status
     * @property {string} responseText
     * @property {string} responseHeaders
     * @property {string} finalUrl
     *
     * @param {Request} requestParams
     * @return {Promise<HttpResponse>} A Promise which resolves with the http response.
     */
    static request(requestParams) {
        return new Promise((resolve, reject) => {
            // noinspection JSUnresolvedFunction
            GM_xmlhttpRequest(
                Object.assign(requestParams, {
                    onload: resolve,
                    onerror: reject
                }))
        });
    }

    /**
     * Checks whether http response status is OK (200).
     *
     * @param {HttpResponse} response Http response
     * @return {Promise<HttpResponse|InvalidResponse>}
     */
    static validateStatusOk(response) {
        return (response.status === 200)
            ? Promise.of(response)
            : Promise.reject(new InvalidResponse(response));
    }

    /**
     * @param {HttpResponse} response
     * @return {object}
     */
    static parseResponse(response) {
        return JSON.parse(response.responseText);
    }

    /**
     * Resolve url of the JIRA in which requested project exists.
     * If the project is found at both eu and com domains, com is preferred.
     *
     * @param {string} projectCode Just the project prefix of a JIRA issue.
     * @return {Promise<string|InvalidProjectError|ProjectLoadingError>} JIRA url
     */
    static async getJiraUrlForProject(projectCode) {
        return jiraComUrl;
    }

    /**
     * Fetches raw JIRA issue data.
     * @param {string} key JIRA issue key string
     * @param {?Function} onprogress Optional loading progress callback
     * @return {Promise<HttpResponse|InvalidResponse>}
     */
    static fetchIssue(key, onprogress = () => undefined) {
        return Jira4U.getProjectCode(key)
            .then(Jira4U.getJiraUrlForProject)
            .then(tee(url => debug('project code url: ' + url)))
            .then(jiraRestApiIssueUrl(key))
            .then(tee(url => log(`Resolved JIRA issue url: [${url}]`)))
            .then(getJsonRequest)
            .then(Jira4U.setOnProgressCallback(onprogress))
            .then(Jira4U.request);
    }

    /**
     * Returns a Promise which loads and parses JIRA issue to an object.
     * @param {string} key JIRA issue key string
     * @param {?Function} onprogress Optional loading progress callback
     * @return {Promise<JiraIssue|InvalidResponse|string|InvalidProjectError|ProjectLoadingError>}
     */
    static loadIssue(key, onprogress = () => undefined) {
        return Jira4U.fetchIssue(key)
            .then(tee(_ => log(`Loading of issue ${key} completed.`)))
            //Getting into the onload function does not actually mean the status was OK
            .then(Jira4U.validateStatusOk)
            .then(tee(_ => log(`Issue ${key} loaded successfully.`)))
            .then(Jira4U.parseResponse)
    }

    /**
     * @param {string} workInfo.key JIRA issue key string.
     * @param {Date} workInfo.started The date/time the work on the issue started.
     * @param {number} workInfo.duration in seconds.
     * @param {string} workInfo.comment The work log comment.
     * @param {Function} [workInfo.onReadyStateChange] Callback to be invoked when the request state changes.
     * @return {Promise}
     */
    static logWork(workInfo) {
        console.log(`Sending a work log request. Issue=${workInfo.key}, Time spent=${workInfo.duration}minutes, Comment="${workInfo.comment}"`);
        return Jira4U.getProjectCode(workInfo.key)
            .then(Jira4U.getJiraUrlForProject)
            .then(jiraRestApiResource('issue', workInfo.key, 'worklog'))
            .then(url => (
                {
                    method: 'POST',
                    headers: {
                        "Content-Type": "application/json",
                        //Disable the cross-site request check on the JIRA side
                        "X-Atlassian-Token": "nocheck",
                        //Previous header does not work for requests from a web browser
                        "User-Agent": "xx"
                    },
                    data: JSON.stringify({
                        timeSpentSeconds: workInfo.duration,
                        started: Jira4U._toIsoString(workInfo.started),
                        comment: workInfo.comment,
                    }),
                    url: url,
                    onreadystatechange: workInfo.onReadyStateChange
                })
            )
            .then(Jira4U.request);
    }

    /**
     * Converts a date to a proper ISO formatted string, which contains milliseconds and the zone offset suffix.
     * No other date formats are recognized by JIRA.
     * @param {Date} date Valid Date object to be formatted.
     * @returns {string}
     */
    static _toIsoString(date) {
        const offset = -date.getTimezoneOffset();
        const offsetSign = offset >= 0 ? '+' : '-';
        const pad = WtmDateTime.padToDoubleDigit;
        return date.getFullYear()
            + '-' + pad(date.getMonth() + 1)
            + '-' + pad(date.getDate())
            + 'T' + pad(date.getHours())
            + ':' + pad(date.getMinutes())
            + ':' + pad(date.getSeconds())
            + '.' + String(date.getUTCMilliseconds()).padStart(3, "0").substr(0, 3)
            + offsetSign + pad(offset / 60) + pad(offset % 60);
    }

}

/**
 * JIRA issue visualisation functions.
 *
 * Most of this object is stateless functions
 * with the exception of currently visualised JIRA issue,
 * because it is repeatedly accessed when user changes
 * the working time to update the worklog bar.
 */
class IssueVisual {

    constructor() {
        IssueVisual.init();
    }

    /**
     * Install JIRA issue GUI into the worklog dialog.
     * Checks whether the GUI has already been added before
     * making any DOM changes, so repeated calls have no effect.
     */
    static init() {
        if (document.getElementById('jira-toolbar-envelope')) {
            console.log("JIRA toolbar was already added to form.");
            return;
        }
        IssueVisual.addToForm();
    }

    /**
     * Adds jira issue GUI to the time sheet form.
     */
    static addToForm() {
        console.log("Adding JIRA toolbar into form");

        const transition = "-webkit-transition: width 0.25s; transition-delay: 0.5s;";
        const trackerStyle = "width: 100%; border-collapse: collapse; height: 0.75em; margin-top: 0.4em;";

        //.uu5-forms-label uu5-forms-input-m
        const jiraBarNode = document.createElement('DIV');
        jiraBarNode.id = 'jira-toolbar-envelope';
        jiraBarNode.innerHTML = (`
        <div>
            <div>
                <span id="parsedJiraIssue" class="uu5-forms-input-m"></span>
            </div>
        </div>
        <div>
            <div>
                <table id="jiraWorkTrackerOriginal" style="${trackerStyle}">
                  <tbody>
                    <tr>
                      <td class="workTracker wtl" id="jiraOrigEstimate" title="Původní odhad:" style="background-color: #89AFD7; padding: 0; ${transition} width: 0;"></td>
                      <td class="workTracker wt" style="background-color: #eeeeee; padding: 0; ${transition} width: 100%"></td>
                    </tr>
                  </tbody>
                </table>
                <table id="jiraWorkTrackerLogged" style="${trackerStyle}">
                  <tbody>
                    <tr>
                      <td class="workTracker wtl" id="jiraWorkLogged" title="Vykázáno:" style="background-color: #51a825; padding: 0; ${transition} width: 0;"></td>
                      <td class="workTracker wtn" id="jiraWorkLogging" title="Nový výkaz" style="background-color: #51A82580; padding: 0; /*${transition}*/ width: 0"></td>
                      <td class="workTracker wtr" id="jiraRemainEstimate" title="Zbývající odhad:" style="background-color: #ec8e00; padding: 0; ${transition} width: 0;"></td>
                      <td class="workTracker pad" id="jiraWorkPad" title="Zbývá" style="background-color: #eeeeee; padding: 0; width: 100%"></td>
                    </tr>
                  </tbody>
                </table>
            </div>
            <div>
                <span id="parsedJiraIssue"></span>
            </div>
        </div>
        <div style="margin-top: 10px">
            <button id="jiraLogWorkButton" class="uu5-bricks-button-m uu6-bricks-button-filled" type="button" style="border: none" disabled>
                <span class="uu5-bricks-span uu5-bricks-lsi-item uu5-bricks-lsi">Vykázat na <u>J</u>IRA issue</span>
            </button>
            <span id="jira-issue-work-log-request-progress" style="margin-left: 8px;"></span>
        </div>
        `);
        IssueVisual.insertAfter(jiraBarNode, WtmDialog.highRateNode());
    }


    static insertAfter(newNode, referenceNode) {
        referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    }

    /**
     * Display a loaded JIRA issue in the form as a link
     * and update the time tracker.
     *
     * @param {JiraIssue} issue The JIRA issue object as fetched from JIRA rest API
     */
    static async showIssue(issue) {
        const domain = issue.self.slice(0, issue.self.indexOf(jiraRestApiPath));
        const url = await jiraBrowseIssueUrl(issue.key)(domain);
        //Some projects use this field for a project code, like NBS or FBLI
        const projectCode = P4uWorklogger.mapToHumanJiraIssue(issue).projectCode;
        const projectCodeHtml = projectCode && `<div>Project Code: ${projectCode}</div>` || '';
        IssueVisual.$showInIssueSummary(IssueVisual.linkHtml(url, `${issue.key} - ${issue.fields.summary}`) + projectCodeHtml);
        IssueVisual.trackWorkOf(issue);
        return issue;
    }

    /**
     * Displays some fancy animation at the place of the JIRA issue summary.
     */
    static showIssueLoadingProgress() {
        IssueVisual.$showInIssueSummary(jiraIssueLoaderAnimation);
        IssueVisual.resetWorkTracker();
    }

    /**
     * Sets the currently displayed JIRA issue to null and resets all the visualisation.
     */
    static resetIssue() {
        IssueVisual.resetWorkTracker();
    }

    /**
     * Display a visual work log time tracker of the current JIRA issue in the form.
     */
    static updateWorkTracker() {
        if (IssueVisual._issue) {
            const issue = IssueVisual._issue;
            const orig = issue.fields.timetracking.originalEstimateSeconds || 0;
            const remain = issue.fields.timetracking.remainingEstimateSeconds || 0;
            const logged = issue.fields.timetracking.timeSpentSeconds || 0;
            const added = WtmDialog.getDurationSeconds();
            const totalMax = Math.max(orig, logged + Math.max(added, remain));
            const newRemain = Math.max(remain - added, 0);
            const percentOfTotal = (x) => totalMax > 0 ? x / totalMax * 100 : 0;
            const setWidth = (id, w) => {
                document.getElementById(id).style.width = `${Math.round(w)}%`;
            };
            const setTitle = (id, t) => {
                const e = document.getElementById(id);
                e.title = e.title.split(':')[0] + ': ' + t || "0h";
                e.alt = e.title;
            };
            const toHours = (seconds) => (seconds / 3600).toFixed(2) + 'h';

            setWidth('jiraOrigEstimate', percentOfTotal(orig));
            setTitle('jiraOrigEstimate', issue.fields.timetracking.originalEstimate);
            setWidth('jiraWorkLogged', percentOfTotal(logged));
            setTitle('jiraWorkLogged', issue.fields.timetracking.timeSpent);
            setWidth('jiraWorkLogging', percentOfTotal(added));
            setTitle('jiraWorkLogging', toHours(added));
            setWidth('jiraRemainEstimate', percentOfTotal(newRemain));
            setTitle('jiraRemainEstimate', toHours(newRemain));
            const remainCell = document.getElementById('jiraRemainEstimate');
            remainCell.style.display = (newRemain === 0) ? "none" : null;//Chrome renders zero width as 1px
        }
        else
            IssueVisual.resetWorkTracker();
    }

    /**
     * Sets currently displayed JIRA issue for the time tracker bar.
     * This is the only state held by IssueVisual class.
     *
     * @typedef JiraIssue
     * @property {string} key The key of the JIRA issue, e.g. XYZ-1234
     * @property {string} rawJiraIssue.fields.project.key The project key of the JIRA issue, e.g. XYZ
     * @property {string} fields.summary The JIRA issue summary, i.e. the title of the ticket.
     * @property {string} self JIRA link to this issue.
     * @property {?number} fields.timetracking.originalEstimateSeconds
     * @property {?number} fields.timetracking.remainingEstimateSeconds
     * @property {?number} fields.timetracking.timeSpentSeconds
     * @property {?number} fields.timetracking.originalEstimate
     * @property {?number} fields.timetracking.remainingEstimate
     * @property {?number} fields.timetracking.timeSpent
     * @property {string} rawJiraIssue.fields.issuetype.name Type of the issue, e.g. "Bug"
     * @property {?string} fields.customfield_13908 NBS Project code
     * @property {?string} fields.customfield_10174 FBL Project code
     * @property {?string} fields.customfield_12271 FBL System
     *
     * @param {?JiraIssue} issue
     */
    static trackWorkOf(issue = null) {
        IssueVisual._issue = issue;
        IssueVisual.updateWorkTracker();
    }

    /**
     * No JIRA issue is displayed, no work time is tracked.
     */
    static resetWorkTracker() {
        IssueVisual._issue = null;
        ['jiraOrigEstimate', 'jiraWorkLogged', 'jiraWorkLogging', 'jiraRemainEstimate']
            .forEach(id => document.getElementById(id).style.width = `0%`);
    }

    /**
     * Displays default content when no issue has been loaded.
     */
    static showIssueDefault() {
        IssueVisual.$showInIssueSummary(`<span>Zadejte kód JIRA Issue na začátek Popisu činnosti.</span>`);
        IssueVisual.resetIssue();
    }

    /**
     * Handles JIRA issue loading errors.
     * Updates GUI accordingly.
     *
     * @param {string} key JIRA issue
     * @param {InvalidResponse|InvalidProjectError|ProjectLoadingError|Error} error
     */
    static issueLoadingFailed(key, error) {
        IssueVisual.resetIssue();

        function tryGetProjectUrl() {
            return Jira4U.getProjectCode(key)
                .then(Jira4U.getJiraUrlForProject)
                .then(jiraBrowseIssueUrl(key));
        }

        function getErrorMessages(responseErr) {
            if (/content-type:\sapplication\/json/.test(responseErr.responseHeaders)) {
                let error = JSON.parse(responseErr.responseText);
                return Promise.of(error.errorMessages ? ' Chyba: ' + error.errorMessages.join(', ') : '');
            }
            return Promise.reject(responseErr);
        }

        if (error instanceof InvalidResponse) {
            const status = error.response.status;
            if (status === 401 || status === 403) {
                const renderJiraLink = url => IssueVisual.elem('SPAN',
                    [
                        document.createTextNode('JIRA autentizace selhala. '),
                        IssueVisual.nodeFromHtml(IssueVisual.linkHtml(url, 'Přihlaste se do JIRA')),
                        document.createTextNode(' a '),
                        IssueVisual.clickableSpan(P4uWorklogger.loadAndShowIssueFromDescription, 'zkuste to znovu')
                    ]);
                tryGetProjectUrl()
                    .then(renderJiraLink)
                    .then(IssueVisual.$showInIssueSummary)
                    .catch(_ => {
                        console.error('Failed to resolve url for issue ' + key);
                        IssueVisual.$showInIssueSummary(
                            `JIRA autentizace selhala.<br>
Přihlaste se do ${IssueVisual.linkHtml(jiraComUrl, 'jira.unicorn.com')}.`);
                    });
            } else if (status === 404) {
                getErrorMessages(error.response)
                    .then(msg => IssueVisual.$showInIssueSummary(`<span>Nepodařilo se načíst ${key}.${msg}.</span>`))
                    .catch(err => {
                        console.error(`Failed to load issue ${key}. Response: ${JSON.stringify(err, null, 2)}`);
                        IssueVisual.$showInIssueSummary(`<span>Nepodařilo se načíst ${key}. Chyba: 404</span>`);
                    });
            }
        } else if (error instanceof InvalidProjectError) {
            IssueVisual.$showInIssueSummary(`<span>Projekt ${error.projectKey} neexistje.</span>`);
        } else if (error instanceof ProjectLoadingError) {
            IssueVisual.$showInIssueSummary(`<span>Nepodařilo se načist projekt ${error.projectKey}.</span>`);
        } else {
            const showUnknownError = () => IssueVisual.$showInIssueSummary(`<span>Něco se přihodilo. Budete muset ${IssueVisual.linkHtml(jiraComUrl, 'vykázat do JIRA ručně.')}'</span>`);
            if (error.stack) {
                showUnknownError();
                throw error;
            }
            console.error('Unknown error: ' + error);
            showUnknownError();
        }
    }

    static linkHtml(href, label) {
        return `<a href="${href}" target="_blank">${label}</a>`;
    };

    static elem(name, children = []) {
        const element = document.createElement(name);
        children.forEach(child => element.appendChild(child));
        return element;
    };

    static nodeFromHtml(htmlContent) {
        const element = document.createElement('div');
        element.innerHTML = htmlContent;
        return element.firstChild;
    };

    static clickableSpan(callback, label) {
        const clickableSpan = document.createElement('SPAN');
        clickableSpan.innerText = label;
        clickableSpan.onclick = callback;
        clickableSpan.style.color = 'blue';
        clickableSpan.style.cursor = 'pointer';
        return clickableSpan;
    };

    static $jiraIssueSummary() {
        return $(document.getElementById("parsedJiraIssue"));
    }

    /**
     * Replaces content of the placeholder element for the JIRA issue summary.
     * Returns the element, wrapped as a jQuery object for easier content manipulation.
     *
     * @return {jQuery|HTMLElement}
     */
    static $showInIssueSummary(htmlContent) {
        const issueSummary = IssueVisual.$jiraIssueSummary();
        issueSummary.empty().append(htmlContent);
        return issueSummary;
    }

    /**
     * Display a sign next to the JIRA button
     * to show state of writing the work log record.
     *
     * @param {'loading'|'done'|'error'|'idle'} state Issue loading state.
     * @return {HTMLElement}
     */
    static showJiraIssueWorkLogRequestProgress(state) {
        const stateViews = {
            'loading': jiraIssueLoaderAnimation,
            'done': `✔`,
            'error': `❌`,
            'idle': ``
        };
        const logProgress = document.getElementById("jira-issue-work-log-request-progress");
        logProgress.innerHTML = stateViews[state] || stateViews['idle'];
        return logProgress;
    }

    /**
     * @return {HTMLElement} Log work button
     */
    static jiraLogWorkButton() {
        return document.getElementById('jiraLogWorkButton');
    }

}

/**
 * Container for a JIRA issue key + description.
 * It can construct itself by parsing the issue key from work description.
 */
class WorkDescription {

    constructor(issueKey = null, descriptionText = "") {
        this._issueKey = issueKey;
        this._descriptionText = descriptionText;
    }

    static parse(workDescriptionText) {
        if (typeof workDescriptionText === "string") {
            let segments = workDescriptionText.match(jiraIssueKeyPattern);
            if (segments != null) {
                let key = segments[1];
                return new WorkDescription(key, workDescriptionText.replace(key, "").trim());
            }
        }
        return new WorkDescription();
    }

    get issueKey() {
        return this._issueKey;
    }

    get descriptionText() {
        return this._descriptionText;
    }
}

/**
 * Wraps the rest of the script, mainly the steps that are executed when the document is loaded.
 */
class P4uWorklogger {

    constructor() {
        // Initialize the page decoration.
        this._previousDesctiptionValue = null;
        this._previousIssue = null;
    }

    workLogFormShow() {
        IssueVisual.init();
        this._previousDesctiptionValue = WtmDialog.descArea().value;
        this._previousIssue = Jira4U.tryParseIssue(this._previousDesctiptionValue);
        this.doTheMagic();
    }

    doTheMagic() {
        IssueVisual.showIssueDefault();

        WtmDialog.timeFrom().onblur = IssueVisual.updateWorkTracker;
        WtmDialog.timeTo().onblur = IssueVisual.updateWorkTracker;

        //Chrome fires DOM events for textContent changes even during typing, FF does not.
        //So we add input listener and paranoidly make sure we do not add it more than once.
        const descriptionChangeListener = ev => workLogger.checkWorkDescriptionChanged(ev.target.value);
        WtmDialog.descArea().removeEventListener('input', descriptionChangeListener);
        WtmDialog.descArea().addEventListener('input', descriptionChangeListener);
        //In case of a Work log update, there may already be some work description.
        P4uWorklogger.loadAndShowIssueFromDescription();

        const jiraLogWorkButton = IssueVisual.jiraLogWorkButton();
        jiraLogWorkButton.removeEventListener('click', P4uWorklogger.writeWorkLogToJira);
        jiraLogWorkButton.addEventListener('click', P4uWorklogger.writeWorkLogToJira);
        P4uWorklogger.registerKeyboardShortcuts();
    }

    static loadAndShowIssueFromDescription() {
        if (WtmDialog.descArea().value) {
            const wd = Jira4U.tryParseIssue(WtmDialog.descArea().value);
            P4uWorklogger.loadJiraIssue(wd);
        }
    }

    static loadIssueFromDescription() {
        if (WtmDialog.descArea().value) {
            const wd = Jira4U.tryParseIssue(WtmDialog.descArea().value);
            P4uWorklogger.loadJiraIssue(wd);
        }
    }

    static registerKeyboardShortcuts() {
        WtmDialog.addKeyboardShortcutMnemonics();

        const timeControlTitle = `Použijte šipky ⬆⬇ pro změnu času. Stisknutím 'T' zaměříte vstupní pole času.`;
        WtmDialog.timeFrom().addEventListener('keydown', P4uWorklogger.shiftTime);
        WtmDialog.timeFrom().title = timeControlTitle;
        WtmDialog.timeTo().addEventListener('keydown', P4uWorklogger.shiftTime);
        WtmDialog.timeTo().title = timeControlTitle;
    }

    /**
     * Tries to remember Subject and Category values previously filled for given jira issue.
     * @param rawJiraIssue {JiraIssue}
     */
    static async fillFormFromMemorizedValues(rawJiraIssue) {
        const subjectField = WtmDialog.artifactField();
        const categoryField = WtmDialog.categoryField();
        let jiraIssue = P4uWorklogger.mapToHumanJiraIssue(rawJiraIssue);
        let formValues = WorkloggerFormMemory.remember(jiraIssue);
        if (formValues.subject) {
            await P4uWorklogger.setInputValueWithEvent(subjectField, formValues.subject);
        }
        if (formValues.category) {
            await P4uWorklogger.setInputValueWithEvent(categoryField, formValues.category);
        }
        // Setting Category value shows an autocomplete popup and steals focus.
        // Let the popup render, click the first item in the whisperer and return focus to the Description
        window.requestAnimationFrame(() => {
            const catPopup = document.querySelector('div.uu5-bricks-popover-body a');
            catPopup && catPopup.click();
            setTimeout(() => WtmDialog.descArea().focus(), 0);
            setTimeout(() => WtmDialog.descArea().click(), 20);
        });
    }
    /**
     * @typedef HumanJiraIssue
     * @property projectCode {?string} Optional custom field used by some projects just for the work logs.
     * @property system {string} FBL specific
     * @property type {string} Issue type, like 'Bug'
     * @property issueKeyPrefix {string} Just the project part of the issue key, typically same as jiraIssue.key
     *
     * @param rawJiraIssue {JiraIssue}
     * @return {HumanJiraIssue}
     */
    static mapToHumanJiraIssue(rawJiraIssue) {
        return {
            projectCode: rawJiraIssue.fields.customfield_10174?.value || rawJiraIssue.fields.customfield_13908?.value,
            system: rawJiraIssue.fields.customfield_12271?.value,
            type: rawJiraIssue.fields.issuetype.name,
            issueKeyPrefix: rawJiraIssue.fields.project.key,
        };
    }

    static getTimeAdjustmentDirection(ev) {
        if (ev.key === 'ArrowDown') {
            return -1;
        } else if (ev.key === 'ArrowUp') {
            return 1;
        } else {
            return 0;
        }
    }

    /**
     * Updates selected work log range time based on arrow up|down key press.
     * @param {Event} ev The keyboard event.
     */
    static shiftTime(ev) {
        const input = ev.target;
        if (input.nodeName !== 'INPUT') {
            console.warn('Cannot shift selected time, element is not an input: ', input);
            return;
        }
        const timeAdjustment = P4uWorklogger.getTimeAdjustmentDirection(ev);
        if (timeAdjustment === 0) {
            return;
        }
        ev.preventDefault();
        //If the value is empty, try the other period boundary. This allows just adding time in an empty input.
        const value = input.value || WtmDialog.timeFrom().value || WtmDialog.timeTo().value || '08:00';
        const selectionStart = input.selectionStart;
        const selectionEnd = input.selectionEnd;
        const selectionDirection = input.selectionDirection;
        const cursorPosition = selectionDirection === 'backward' ? selectionStart : selectionEnd;
        const newValue = P4uWorklogger.updateTime(timeAdjustment, cursorPosition, value);
        P4uWorklogger.setInputValueWithEvent(input, newValue)
            .then(() => {
                    //Following are reset when the value changes
                    input.selectionStart = selectionStart;
                    input.selectionEnd = selectionEnd;
                    input.selectionDirection = selectionDirection;
                }
            )
            .then(IssueVisual.updateWorkTracker);
    }

    /**
     * Sets input.value to text in a way that React reacts to the related input event.
     * https://stackoverflow.com/a/46012210/2471106
     * @param input
     * @param text
     * @return {Promise<boolean>}
     */
    static async setInputValueWithEvent(input, text) {
        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
        nativeInputValueSetter.call(input, text);
        const ev2 = new Event('input', {bubbles: true});
        return input.dispatchEvent(ev2);
    }

    /**
     * Updates hours or minutes of time represented as HH:mm string.
     * @param {number} adjustmentDirection Positive or negative number. Should be -1 or 1.
     * @param {number} cursorPosition Index of the caret. Decides whether to change hours or minutes.
     * @param {string} timeInputValue Time string in the input box
     * @return {string} Shifted and formatted time
     */
    static updateTime(adjustmentDirection, cursorPosition, timeInputValue) {
        const timeRegExp = /(\d{1,2}):(\d{1,2})/;
        if (!timeRegExp.test(timeInputValue)) {
            console.debug(`Invalid time format, cannot adjust time "${timeInputValue}"`);
            return timeInputValue;
        }
        const dateTime = WtmDateTime.parseDateTime(WtmDialog.datePicker().value, timeInputValue);
        const pad = WtmDateTime.padToDoubleDigit;
        const formatTime = (date) => pad(date.getHours()) + ':' + pad(date.getMinutes());
        if (cursorPosition <= timeInputValue.indexOf(':')) {
            return formatTime(WtmDateTime.addHours(dateTime, adjustmentDirection));
        } else {
            return formatTime(WtmDateTime.addMinutes(dateTime, 15 * adjustmentDirection));
        }
    }

    static writeWorkLogToJira() {
        console.debug(new Date().toISOString(), 'Adding a work log item.');
        const wd = Jira4U.tryParseIssue(WtmDialog.descArea().value);
        if (!wd.issueKey) {
            return;
        }
        IssueVisual.jiraLogWorkButton().disabled = true;
        const durationSeconds = WtmDialog.getDurationSeconds();
        if (durationSeconds <= 0) {
            return 0;
        }
        const dateFrom = WtmDialog.dateFrom();
        console.log(`Logging ${durationSeconds} minutes of work on ${wd.issueKey}`);
        Jira4U.logWork({
            key: wd.issueKey,
            started: dateFrom,
            duration: durationSeconds,
            comment: wd.descriptionText,
            onReadyStateChange: function (state) {
                console.debug("Log work request state changed to: " + state.readyState);
                if (state === 1) {
                    IssueVisual.showJiraIssueWorkLogRequestProgress('loading');
                }
            }
        }).then(res => {
            console.info("Work was successfully logged to JIRA.", JSON.parse(res.responseText));
            IssueVisual.showJiraIssueWorkLogRequestProgress('done');
            //The buttons are probably refreshed. They loose their enhancements after adding a worklog.
            setTimeout(() => {
                P4uWorklogger.registerKeyboardShortcuts();
                IssueVisual.jiraLogWorkButton().disabled = false;
            }, 500);
        }, err => {
            console.warn("Failed to log work to JIRA. ", err);
            IssueVisual.showJiraIssueWorkLogRequestProgress('error');
            IssueVisual.jiraLogWorkButton().disabled = false;
        });
    }

    checkWorkDescriptionChanged(description) {
        if (this._previousDesctiptionValue !== description) {
            this._previousDesctiptionValue = description;
            this.workDescriptionChanged(description);
        } else console.debug("No description change")
    }

    /**
     * @param {string} description The new work description value
     */
    workDescriptionChanged(description) {
        const wd = Jira4U.tryParseIssue(description);
        if (this._previousIssue.issueKey === null || this._previousIssue.issueKey !== wd.issueKey) {
            this._previousIssue = wd;
            P4uWorklogger.loadJiraIssue(wd);
        }
    }

    static loadJiraIssue(wd) {
        IssueVisual.jiraLogWorkButton().disabled = true;
        IssueVisual.showJiraIssueWorkLogRequestProgress('idle');
        if (!wd.issueKey) {
            IssueVisual.showIssueDefault();
            return;
        }

        let key = wd.issueKey;
        console.debug("JIRA issue key recognized: ", key);
        const showLoadingProgress = progress => {
            console.info(`Loading jira issue ${key}, state: ${progress.readyState}`);
            if (progress.readyState === 1) {
                IssueVisual.showIssueLoadingProgress();
            }
        };

        Jira4U.loadIssue(key, showLoadingProgress)
            .then(tee(IssueVisual.showIssue))
            .then(tee(_ => IssueVisual.jiraLogWorkButton().disabled = false))
            .then(P4uWorklogger.fillFormFromMemorizedValues)
            .catch(responseErr => {
                console.log(`Failed to load issue ${key}. Error: ${JSON.stringify(responseErr, null, 2)}`);
                IssueVisual.issueLoadingFailed(key, responseErr);
            });
    }
}

class WorkloggerFormMemory {

    /**
     * @typedef TimesheetItem
     * @property {string} datetimeFrom "2020-03-30T17:01:00+02:00"
     * @property {string} datetimeTo "2020-03-30T18:01:00+02:00"
     * @property {string} subject "ues:UNI-BT:USYE.NECS~SWA04"
     * @property {string} category "USYE.NECS"
     * @property {string} description "NECS-1234 Pretending to work"
     *
     * @param timesheetItem {TimesheetItem}
     */
    static memorize(timesheetItem) {
        console.debug('Remember form data for autocomplete');

        /**
         * @param {HumanJiraIssue} jiraIssue
         */
        function storeFormDataForProjectCode(jiraIssue) {
            const {subject = "", category = ""} = timesheetItem;
            if (jiraIssue.projectCode) {
                console.debug('Saving form data for project code ', jiraIssue.projectCode);
                GM_setValue(jiraIssue.projectCode, JSON.stringify({subject, category}));
                console.debug(`Form data for project code ${jiraIssue.projectCode} saved.`);
            } else if (jiraIssue.issueKeyPrefix) {
                console.debug('Saving form data for project key ', jiraIssue.issueKeyPrefix);
                GM_setValue(jiraIssue.issueKeyPrefix, JSON.stringify({subject, category}));
                console.debug(`Form data for project key ${jiraIssue.issueKeyPrefix} saved.`);
            }
        }

        if (timesheetItem.description && (timesheetItem.subject || timesheetItem.category)) {
            const workDescription = Jira4U.tryParseIssue(timesheetItem.description);
            if (workDescription.issueKey) {
                console.debug(`Loading JIRA issue '${workDescription.issueKey}' to get project code for form data memorization`);
                Jira4U.loadIssue(workDescription.issueKey)
                    .then(P4uWorklogger.mapToHumanJiraIssue)
                    .then(storeFormDataForProjectCode)
                    .catch(error);
            }
        } else {
            console.debug('No form data to memorize for autocomplete');
        }
    }

    /**
     * @typedef FormValues
     * @property {string} subject "ues:UNI-BT:USYE.NECS~SWA04"
     * @property {string} category "USYE.NECS"
     *
     * @param {HumanJiraIssue} jiraIssue
     * @return {FormValues}
     */
    static remember(jiraIssue) {
        console.log('Loading form data for issue ', jiraIssue);
        const value = GM_getValue(jiraIssue.projectCode) || GM_getValue(jiraIssue.issueKeyPrefix) || `{}`;
        return JSON.parse(value);
    }
}

/**
 * Keyboard shortcuts registration and handling.
 */
class WtmShortcuts {
    /**
     * Registers keyboard shortcuts available throughout WTM.
     * Element titles need to be set in DomObserver because they require the element to exist while this is installed when script loads.
     */
    static install() {
        if (WtmShortcuts.install.done) {
            return;
        }
        WtmShortcuts.install.done = true;
        // New work item - N
        document.addEventListener("keypress",
            condp(
                and(WtmShortcuts.keyCodePred('KeyN'), not(WtmWorktableModel.isModalDialogOpened))
                , WtmShortcuts.clickElement(WtmWorktableModel.newItemButton),
                /* TODO this requires filtering regular typing events (or events from input target elements)
                and(WtmShortcuts.keyCodePred('KeyT'), WtmWorktableModel.isModalDialogOpened)
                , WtmShortcuts.doWithElement(el => el.focus(), WtmDialog.timeFrom),
                and(WtmShortcuts.keyCodePred('KeyD'), WtmWorktableModel.isModalDialogOpened)
                , WtmShortcuts.doWithElement(el => el.focus(), WtmDialog.datePicker),*/
                and(ev => ev.ctrlKey, ev => ev.shiftKey, WtmShortcuts.keyCodePred('Enter'), WtmWorktableModel.isModalDialogOpened)
                , WtmShortcuts.clickElement(WtmDialog.buttonNextItem),
                and(ev => ev.ctrlKey, WtmShortcuts.keyCodePred('Enter'), WtmWorktableModel.isModalDialogOpened)
                , WtmShortcuts.clickElement(WtmDialog.buttonOk)));
    }

    static doWithElement(elementFn, targetElement) {
        return function elementAction() {
            let target = (typeof targetElement === "function") ? targetElement() : targetElement;
            elementFn(target);
        }
    }

    static clickElement(targetElement) {
        const clicker = element => {
            if (element && typeof element.click === "function") {
                element.click();
            } else {
                console.warn('Cannot activate element by shortcut. Element:', element)
            }
        };
        return WtmShortcuts.doWithElement(clicker, targetElement);
    }

    static keyCodePred(code) {
        return function checkIsKey(ev) {
            return ev.code === code;
        };
    }

}

/**
 * Adds month selection buttons.
 */
class MonthSelector {
    static getMonthSelectorContainer() {
        return document.querySelector('.uu-specialistwtm-worker-monthly-detail-top-change-month-dropdown');
    }

    static getMonthSelector() {
        return this.getMonthSelectorContainer().firstElementChild;
    }
    static getMonthSelectorButton() {
        return this.getMonthSelector().querySelector('button');
    }

    static getSelectedMonthValue() {
        return this.getMonthSelectorButton().querySelector('.uu-specialistwtm-worker-monthly-detail-top-month-dropdown-value').innerText;
    }

    install() {
        if (MonthSelector.getMonthSelectorContainer().querySelector('span.wtm-month-switch-button-icon')) {
            return;
        }
        const createArrow = (direction) => {
            const arrow = document.createElement('SPAN');
            arrow.classList.add('wtm-month-switch-button-icon', 'uu5-bricks-button', 'uu5-bricks-button-inverted', 'mdi', 'mdi-chevron-' + direction);
            return arrow;
        };

        /**
         * Creates the month switching callback, which is called after the dropdown menu is shown.
         * The menu is a div containing an UL element. This list is searched for the current month by the displayed text.
         * Index of the selected list item is updated and the neighbor item is clicked.
         *
         * @param selectedMonthText
         * @param monthIndexFn {Function} Returns new month index
         * @return {function(*): Function}
         */
        const createMonthSelector = function (selectedMonthText, monthIndexFn) {
            //This returned fn may recursively call itself to repeat the drop-down click if the menu was not rendered yet.
            return function selectMonth(attempts = 1) {
                const dropDown = MonthSelector.getMonthDropDown();
                if (!dropDown) {
                    if (attempts > 3) {
                        console.warn('Month drop-down menu does not exist. Attempt:', attempts);
                        return false;
                    }
                    MonthSelector.getMonthSelectorButton().click();
                    //Repeat opening the dropdown and wait for rendering.
                    window.requestAnimationFrame(() => selectMonth(++attempts));
                    return false;
                }
                const selectedMonthIndex = Array
                    .from(dropDown.children)
                    .findIndex(li => li.innerText.trim() === selectedMonthText);
                if (selectedMonthIndex < 0) {
                    console.debug('Cannot find selected month:', selectedMonthText);
                    return false;//May leave the menu opened? It may actually be desirable as a fallback scenario.
                }
                const newMonthIndex =
                    Math.max(0,
                        Math.min(dropDown.children.length - 1,
                            monthIndexFn(selectedMonthIndex)))
                    || selectedMonthIndex;
                dropDown.children[newMonthIndex].firstChild.click();//LI contains an A element
                return true;
            }
        };

        const createArrowClickHandler = (monthIdxUpdateFn) => (event) => {
            console.trace('WTM Extension', 'Click:', event);
            //Show the months dropdown
            MonthSelector.getMonthSelectorButton().click();
            //Allow browser to render the menu, then click desired month.
            // Using requestAnimationFrame here always caused the menu to be visible before script clicks an item in it.
            setTimeout(createMonthSelector(MonthSelector.getSelectedMonthValue(), monthIdxUpdateFn), 0);
        };

        const arrowLeft = createArrow('left');
        arrowLeft.onclick = createArrowClickHandler(i => i + 1);//Months are in the reversed order
        arrowLeft.title = _t('wtm.month.prev.title');

        const arrowRight = createArrow('right');
        arrowRight.onclick = createArrowClickHandler(i => i - 1);
        arrowRight.title = _t('wtm.month.next.title');

        const monthSelector = MonthSelector.getMonthSelector();
        monthSelector.insertBefore(arrowLeft, monthSelector.firstChild);
        monthSelector.appendChild(arrowRight);
    }

    static getMonthDropDown() {
        return MonthSelector.getMonthSelectorContainer().querySelector('ul.uu5-bricks-dropdown-menu-list');
    }
}

const workLogger = new P4uWorklogger();
const monthSelector = new MonthSelector();

class WtmDomObserver {

    constructor() {
        this.observeOptions = {
            attributes: false,
            characterData: false,
            childList: true,
            subtree: true,
            attributeOldValue: false,
            characterDataOldValue: false,
        };
        this.mutationObserver = null;
        this.pageReadyMutationOberver = null;
    }

    observe() {
        const hasAddedNodes = (mutation) => mutation.addedNodes.length > 0;
        const isWorkDescription = (mutation) => mutation.target.type === 'textarea' && mutation.target.name === 'description';
        const isWorkLogForm = (mutation) => affectsNodesWithClass(mutation, 'uu5-bricks-modal-body', 'uu-specialistwtm-create-timesheet-item-modal-container');
        const isWorkTable = (mutation) => affectsNodesWithClass(mutation, 'uu-specialistwtm-worker-monthly-detail-container', 'uu-specialistwtm-worker-monthly-detail-table');

        const affectsNodesWithClass = (mutation, targetNodeClass, childNodeClass) => {
            if (!mutation.target.classList.contains(targetNodeClass)) {
                return false;
            }
            for (const childNode of mutation.target.childNodes) {
                if (childNode.classList.contains(childNodeClass)) {
                    return true;
                }
            }
            return false;
        };

        this.mutationObserver = new MutationObserver(function (mutations) {
            mutations
            // .filter(hasAddedNodes)
                .forEach((mutation) => {
                    // console.log(mutation); //I expect to use this functionality frequently
                    if (isWorkDescription(mutation)) {
                        workLogger.checkWorkDescriptionChanged(mutation.target.textContent);
                    }
                    if (isWorkLogForm(mutation)) {
                        workLogger.workLogFormShow();
                    } else if (mutation.target.classList.contains('uu-specialistwtm-create-timesheet-item-buttons-save')) {
                        console.debug('Buttons changed, re-applying extension.');
                        P4uWorklogger.registerKeyboardShortcuts();
                    }
                    if (isWorkTable(mutation)) {
                        WtmWorktableView.worktableSumViewShow();
                    }

                    if (MonthSelector.getMonthSelectorContainer()) {
                        monthSelector.install();
                    }

                    if (WtmWorktableModel.newItemButton()) {
                        WtmWorktableModel.newItemButton().title = '(n)';
                    }
                });
        });

        //During page loading, there are tons of mutations. This observer is active until the main page is added, then it disconnects and activates the actual observer.
        this.pageReadyMutationOberver = new MutationObserver(function (mutations) {
            const isMainPageAddition = (mutation) => hasAddedNodes(mutation) && mutation.type === 'childList' && mutation.target.matches('div.uu5-common-div.uu5-bricks-page-system-layer.plus4u5-app-page-system-layer-wrapper');
            if (mutations.some(isMainPageAddition)) {
                swapObservers();
            }
        });

        let swapObservers = () => {
            if (this.pageReadyMutationOberver) {
                this.pageReadyMutationOberver.disconnect();
            }
            this.mutationObserver.observe(document.body, this.observeOptions);
        };
        this.pageReadyMutationOberver.observe(document.body, this.observeOptions);
    }
}

/**
 * Intercepts XMLHttpRequests and invokes a registered callback.
 * Currently supports just one callback, registering more would probably
 * nest the XMLHttpRequest.open and XMLHttpRequest.send proxy functions.
 */
class RequestListener {

    static onDataSent(urlFilter, callback) {
        // Start with interception of fn XMLHttpRequest.open, which is provided request URL
        (function (open) {
            window.XMLHttpRequest.prototype.open = function (method, url, ...args) {
                // Store the URL on he XMLHttpRequest.send fn because send() gets the request body right after open() is called.
                window.XMLHttpRequest.prototype.send.lastOpenedUrl = url;
                open.apply(this, [method, url, ...args]);
            };
        })(window.XMLHttpRequest.prototype.open);

        // Next, intercept the XMLHttpRequest.send fn, check that the last opened URL is the one to intercept and invoke callback
        (function (send) {
            window.XMLHttpRequest.prototype.send = function (data) {
                const lastOpenedUrl = window.XMLHttpRequest.prototype.send.lastOpenedUrl;
                if (data && lastOpenedUrl && urlFilter(lastOpenedUrl)) {
                    callback(lastOpenedUrl, data)
                }
                send.call(this, data);
            };
        })(window.XMLHttpRequest.prototype.send);
    }

    static isUrlPathName(urlEnding) {
        return function requestEventUrlPathnameFilter(url) {
            try {
                return new URL(url).pathname.endsWith(urlEnding);
            } catch (e) {
                console.warn(`failed to compare URL ending "${urlEnding} with URL ${url}`);
                return false;
            }
        };
    }
}

RequestListener.onDataSent(
    RequestListener.isUrlPathName('/createTimesheetItem'),
    (url, data) => {
        WorkloggerFormMemory.memorize(JSON.parse(data));
    }
);

const brickObserver = new WtmDomObserver();
brickObserver.observe();
WtmShortcuts.install();