salience / Projus- Styling & UX extras

// ==UserScript==
// @name         Projus- Styling & UX extras
// @namespace    http://tampermonkey.net/
// @version      1.2.8
// @description  Generic quality-of-life extras and styling in SDVK Projus
// @author       salience
// @copyright    2021, salience (https://openuserjs.org/users/salience)
// @license      MIT
// @match        https://projus.sandvik.com/TimeReport/Index*
// @require      https://code.jquery.com/jquery-3.5.1.slim.min.js
// @grant        none
// ==/UserScript==


/* -------------------------------------------------------------------------- */
/* Projus- Style and UX */
/* -------------------------------------------------------------------------- */
jQuery.noConflict();
(function($) {
    var projus = [
        $('#divSumMa > label'),
        $('#divSumTi > label'),
        $('#divSumOn > label'),
        $('#divSumTo > label'),
        $('#divSumFr > label'),
        $('#divSumLoSo > label'),
        $('#divSum > label')
    ];
    var timeKey = [
        $('#divIFSMa > label'),
        $('#divIFSTi > label'),
        $('#divIFSOn > label'),
        $('#divIFSTo > label'),
        $('#divIFSFr > label'),
        $('#divIFSLoSO > label'),
        $('#divIFSSum > label')
    ];
    var days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], day, weekendDay, weekendDates = [];
    var today = new Date();

    var timereportHeader = $('#timereportcommand');
    var internalTimeContainer = $('<div id="internalTime"><div id="internalTimeGoal">Non-INTERNAL Goal: 85%</div><div id="internalTimeResult"></div></div>');
    timereportHeader.append(internalTimeContainer);
    var internals, hours;

    window.setInterval(function() {
        update();
    }, 1000);

    function update () {
        weekendDay = projus[5].parent().prev();

        var projusTime, timeKeyTime;

        for (var i = 0; i < projus.length; i++) {
            // Reset some classes and define elements
            timeKey[i].css('color', '');
            timeKey[i].parent().addClass('timekey');
            day = projus[i].parent().prev();

            // Set day date text and Projus date highlight
            if (i < 5) {
                today = getStartDate(); // Set start day of week
                today.setDate(today.getDate() + i); // Set iterated day to start day + i
                day.text(days[i] + ' ' + today.getDate().toString().padStart(2, '0'));

                // If Projus report day, highlight it
                if (today.getDate() === 20) {
                    day.addClass('highlight');
                } else if (today.getDate() >= 18 && today.getDate() < 20 && i === 4) {
                    weekendDay.addClass('highlight');
                } else {
                    day.removeClass('highlight');
                    weekendDay.removeClass('highlight');
                }

                // Set dates for weekend
                if (i === 4) {
                    today = getStartDate();
                    today.setDate(today.getDate() + i + 1);
                    weekendDates[0] = today.getDate().toString().padStart(2, '0');
                    today.setDate(today.getDate() + 1);
                    weekendDates[1] = today.getDate().toString().padStart(2, '0');
                    weekendDay.text('Sa/Su ' + weekendDates[0] + '/' + weekendDates[1]);
                }
            }

            // Get registered hours for Projus and TimeKey
            projusTime = Number(projus[i].text());
            timeKeyTime = Number(timeKey[i].text());

            if (projusTime > 0) {
                day.addClass('active-day');
            } else {
                day.removeClass('active-day');
            }
            $('#divSum').prev().html('Sum Week');

            // Set classes for valid and invalid registrations
            if (timeKeyTime > 0 && projusTime === timeKeyTime) {
                projus[i].parent().addClass('projus-valid').removeClass('projus-invalid');
                timeKey[i].parent().addClass('timekey-valid').removeClass('timekey-invalid');
            } else if (projusTime + timeKeyTime === 0) {
                projus[i].parent().removeClass('projus-valid projus-invalid');
                timeKey[i].parent().removeClass('timekey-valid timekey-invalid');
            } else {
                projus[i].parent().removeClass('projus-valid').addClass('projus-invalid');
                timeKey[i].parent().removeClass('timekey-valid').addClass('timekey-invalid');
            }
        }

        // Calculate internal time
        internals = $('#reporttable tr td:nth-child(2) > input');

        var hour, hourSum = 0;
        internals.each(function () {
            if (this.value === 'INTERNAL') {
                for (var j = 5; j <= 10; j++) {
                    hour = $(this).parent().parent().find('td:nth-child(' + j + ') > input').val();
                    hourSum = hour !== '' ? hourSum + Number(hour) : hourSum;
                }
            }
        });
        $('#internalTimeResult').text('Non-INTERNAL Result: ' + (100 - (Math.round(hourSum / Number(projus[6].text()) * 1000) / 10)) + '%');
    }

    function getStartDate() {
        var dateString = $('#hiddenstartdate')[0].value + 'T00:00:00';
        return new Date(dateString);
    }
})(jQuery);


/* -------------------------------------------------------------------------- */
/* CSS */
/* -------------------------------------------------------------------------- */
jQuery.noConflict();
(function($) {
$('body').after(`<style type="text/css">

#tblTr {
    border-spacing: 0;
}

#tblTr th {
    border: solid 1px #fff !important;
}

#reporttable tr:nth-child(odd) {
    background-color: #dae6ff;
}

#reporttable tr:nth-child(odd) input.k-autocomplete.k-header {
    background-color: #f0f6ff !important;
}

#reporttable td {
    padding: 2px 1px !important;
}

#reporttable .highlight td {
    BACKGROUND-COLOR: #ffd800;
}

#reporttable .highlight td input.k-autocomplete.k-header {
    BACKGROUND-COLOR: #fff9d6 !important;
}


input[name^="txtSpecification"] {
    font-family: Consolas, monospace;
    font-weight: bold;
    font-size: 14px;
    width: 22em !important;
}

#divSearchTimeReportLevel1 {
    min-height: 0px !important;
    max-height: 35vh !important;
}

#divSearchTimeReportLevel2 {
    min-height: 0px !important;
    max-height: 500px !important;
}

#divSearchTimeReportLevel3 {
    min-height: 0px !important;
    max-height: 500px !important;
}

#tblTr th:nth-child(11) {
    background-color: #1d4d7d;
}

#tblTr th:nth-child(4) div:nth-child(2),
#tblTr th:nth-child(11) div:nth-child(3),
#divIFSMa, #divSumMa,
#divIFSTi, #divSumTi,
#divIFSOn, #divSumOn,
#divIFSTo, #divSumTo,
#divIFSFr, #divSumFr,
#divIFSLoSO, #divSumLoSo,
#divSum {
    border-top: 1px dotted white;
}

#tblTr th:nth-child(4) div:nth-child(2) {
    //color: #bfbfbf !important;
    display: none;
}

.tblheader {
    padding: 2px;
}
.active-day {
    color: black;
    background-color: white;
}
.timekey {
    //color: #bfbfbf;
    //background-color: #3f4e6c;
    display: none;
}
.projus-invalid label,
.timekey-invalid label {
    color: white !important;
}
.projus-invalid {
    background-color: hsl(212, 100%, 20%);
}

/*
.projus-invalid label,
.timekey-invalid label {
    color: #ffeaea !important;
}
.projus-invalid {
    background-color: hsl(0, 50%, 45%);
}
*/
.timekey-invalid {
    background-color: hsl(0, 50%, 35%) !important;
}

.projus-valid label,
.timekey-valid label {
    color: hsl(120, 35%, 90%) !important;
}
.projus-valid {
    background-color: hsl(120, 30%, 35%);
}
.timekey-valid {
    background-color: hsl(120, 30%, 25%) !important;
}

.highlight {
    BACKGROUND-COLOR: #ffd800;
}

#timereportcommand {
    position: relative;
}

#internalTime {
    position: absolute;
    top: 0;
    right: 0;
}

</style>`);
})(jQuery);