☰

Keka Log Duration by Jp

try to take over the world

目前为 2024-03-01 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Keka Log Duration by Jp
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.2
  5. // @description  try to take over the world
  6. // @author       You
  7. // @match        https://ezeetechnosys.keka.com/
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=keka.com
  9. // @grant        none
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.     'use strict';
  15.     const channel = new BroadcastChannel('keka-duration');
  16.     let fistDuration;
  17.     let secondDuration;
  18.     let thirdDuration;
  19.     let fourthDuration;
  20.     let fifthDuration;
  21.     function parseTime(timeStr) {
  22.         const parts = timeStr.split(':');
  23.         return parseInt(parts[0]) * 3600000 + parseInt(parts[1]) * 60000 + parseInt(parts[2]) * 1000;
  24.     }
  25.     let lastLogIndex=0;
  26.  
  27.     function calculateTotalDuration(duration1Str, duration2Str, duration3Str, duration4Str, duration5Str) {
  28.         // Initialize total hours and minutes
  29.         let totalHours = 0;
  30.         let totalMinutes = 0;
  31.  
  32.         // Array of all duration strings
  33.         const durations = [duration1Str, duration2Str, duration3Str, duration4Str, duration5Str];
  34.  
  35.         // Loop through each duration string
  36.         durations.forEach(durationStr => {
  37.             if (durationStr) { // Check if the duration string is not empty
  38.                 const [hours, minutes] = durationStr.match(/\d+/g).map(Number);
  39.                 totalHours += hours;
  40.                 totalMinutes += minutes;
  41.             }
  42.         });
  43.  
  44.         // Add overflow from minutes to hours
  45.         totalHours += Math.floor(totalMinutes / 60);
  46.         totalMinutes = totalMinutes % 60;
  47.  
  48.         // Format the total duration string
  49.         const totalDurationStr = `${totalHours} Hr ${totalMinutes} Min`;
  50.  
  51.         return totalDurationStr;
  52.     }
  53.  
  54.  
  55.     function calculateDuration(startTimeSpan, endTimeSpan) {
  56.         const startTimeStr = startTimeSpan.textContent.trim();
  57.         const endTimeStr = endTimeSpan.textContent.trim();
  58.  
  59.         // If end time is empty, use current time
  60.         const endTime = endTimeStr != "MISSING" ? endTimeStr : new Date().toLocaleTimeString('en-US', { hour12: true });
  61.         console.log("TIMES", startTimeStr, endTime);
  62.         // Parse time strings into Date objects
  63.         const startTime = new Date(`2023-12-27 ${startTimeStr}`); // Assuming today's date
  64.         const endTimeDate = new Date(`2023-12-27 ${endTime}`);
  65.  
  66.         // Calculate duration in milliseconds
  67.         const durationMillis = endTimeDate.getTime() - startTime.getTime();
  68.  
  69.         // Convert milliseconds to hours and minutes
  70.         const durationHours = Math.floor(durationMillis / (3600 * 1000));
  71.         const durationMinutes = Math.floor((durationMillis % (3600 * 1000)) / (60 * 1000));
  72.  
  73.         // Formatted duration string
  74.         const durationStr = `${durationHours} Hr ${durationMinutes} Min`;
  75.  
  76.         return durationStr;
  77.     }
  78.  
  79.     function watchForModals() {
  80.         const modals = document.querySelectorAll('body > modal-container > div.modal-dialog.small-modal > div > attendance-adjustment-request > div.modal-body > form > div.mt-20 > div > div:nth-child(2) > div');
  81.         console.log("Modals", modals)
  82.  
  83.         modals.forEach(modal => {
  84.  
  85.             const modalsArray = Array.from(modals);
  86.             const dayIndex = modalsArray.indexOf(modal) + 1; // Determine the day index (1, 2, or 3)
  87.  
  88.             const displaySpanXPath = `/html/body/modal-container/div[2]/div/attendance-adjustment-request/div[2]/form/div[2]/div/div[2]/div/div/div/div[1]/span[1]`;
  89.             const displaySpan = document.evaluate(
  90.                 displaySpanXPath,
  91.                 modal,
  92.                 null,
  93.                 XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  94.                 null
  95.             ).snapshotItem(0);
  96.  
  97.             const startTimeSpan = document.evaluate(
  98.                 '/html/body/modal-container/div[2]/div/attendance-adjustment-request/div[2]/form/div[2]/div/div[2]/div/div/div[1]/div[1]/div[2]/span[2]',
  99.                 modal,
  100.                 null,
  101.                 XPathResult.FIRST_ORDERED_NODE_TYPE,
  102.                 null
  103.             ).singleNodeValue;
  104.  
  105.             const endTimeSpan = document.evaluate(
  106.                 '/html/body/modal-container/div[2]/div/attendance-adjustment-request/div[2]/form/div[2]/div/div[2]/div/div/div[1]/div[1]/div[3]/span[2]',
  107.                 modal,
  108.                 null,
  109.                 XPathResult.FIRST_ORDERED_NODE_TYPE,
  110.                 null
  111.             ).singleNodeValue;
  112.  
  113.             const startTimeSpan1 = document.evaluate(
  114.                 '/html/body/modal-container/div[2]/div/attendance-adjustment-request/div[2]/form/div[2]/div/div[2]/div/div/div[2]/div[1]/div[2]/span[2]',
  115.                 modal,
  116.                 null,
  117.                 XPathResult.FIRST_ORDERED_NODE_TYPE,
  118.                 null
  119.             ).singleNodeValue;
  120.  
  121.             const endTimeSpan1 = document.evaluate(
  122.                 '/html/body/modal-container/div[2]/div/attendance-adjustment-request/div[2]/form/div[2]/div/div[2]/div/div/div[2]/div[1]/div[3]/span[2]',
  123.                 modal,
  124.                 null,
  125.                 XPathResult.FIRST_ORDERED_NODE_TYPE,
  126.                 null
  127.             ).singleNodeValue;
  128.  
  129.             const startTimeSpan2 = document.evaluate(
  130.                 '/html/body/modal-container/div[2]/div/attendance-adjustment-request/div[2]/form/div[2]/div/div[2]/div/div/div[3]/div[1]/div[2]/span[2]',
  131.                 modal,
  132.                 null,
  133.                 XPathResult.FIRST_ORDERED_NODE_TYPE,
  134.                 null
  135.             ).singleNodeValue;
  136.  
  137.             const endTimeSpan2 = document.evaluate(
  138.                 '/html/body/modal-container/div[2]/div/attendance-adjustment-request/div[2]/form/div[2]/div/div[2]/div/div/div[3]/div[1]/div[3]/span[2]',
  139.                 modal,
  140.                 null,
  141.                 XPathResult.FIRST_ORDERED_NODE_TYPE,
  142.                 null
  143.             ).singleNodeValue;
  144.  
  145.             const startTimeSpan3 = document.evaluate(
  146.                 '/html/body/modal-container/div[2]/div/attendance-adjustment-request/div[2]/form/div[2]/div/div[2]/div/div/div[4]/div[1]/div[2]/span[2]',
  147.                 modal,
  148.                 null,
  149.                 XPathResult.FIRST_ORDERED_NODE_TYPE,
  150.                 null
  151.             ).singleNodeValue;
  152.  
  153.             const endTimeSpan3 = document.evaluate(
  154.                 '/html/body/modal-container/div[2]/div/attendance-adjustment-request/div[2]/form/div[2]/div/div[2]/div/div/div[4]/div[1]/div[3]/span[2]',
  155.                 modal,
  156.                 null,
  157.                 XPathResult.FIRST_ORDERED_NODE_TYPE,
  158.                 null
  159.             ).singleNodeValue;
  160.  
  161.             const startTimeSpan4 = document.evaluate(
  162.                 '/html/body/modal-container/div[2]/div/attendance-adjustment-request/div[2]/form/div[2]/div/div[2]/div/div/div[5]/div[1]/div[2]/span[2]',
  163.                 modal,
  164.                 null,
  165.                 XPathResult.FIRST_ORDERED_NODE_TYPE,
  166.                 null
  167.             ).singleNodeValue;
  168.  
  169.             const endTimeSpan4 = document.evaluate(
  170.                 '/html/body/modal-container/div[2]/div/attendance-adjustment-request/div[2]/form/div[2]/div/div[2]/div/div/div[5]/div[1]/div[3]/span[2]',
  171.                 modal,
  172.                 null,
  173.                 XPathResult.FIRST_ORDERED_NODE_TYPE,
  174.                 null
  175.             ).singleNodeValue;
  176.  
  177.  
  178.  
  179.  
  180.             
  181.  
  182.             if (startTimeSpan && endTimeSpan) {
  183.                 const durationStr = calculateDuration(startTimeSpan, endTimeSpan);
  184.                 fistDuration = durationStr
  185.                 const durationDisplaySpan = document.querySelector('.d-flex.align-items-center.ml-10');
  186.  
  187.                 window.postMessage({ type: 'duration', value: durationStr }, '*');
  188.                 console.log("POSTED-DURATION")
  189.                 // Check for existing duration span:
  190.                 const existingDurationSpan = durationDisplaySpan.querySelector('.duration-span-1');
  191.                 if (!existingDurationSpan) {
  192.                     // Create span only if it doesn't exist
  193.                     const durationSpan = document.createElement('span');
  194.                     durationSpan.classList.add('duration-span-1'); // Add class for identification
  195.                     durationSpan.textContent = durationStr;
  196.                     durationSpan.style.fontWeight = 'bold';
  197.                     durationSpan.style.paddingLeft = '17px';
  198.                     durationSpan.style.color = 'darkred';
  199.                     durationDisplaySpan.insertAdjacentElement('afterend', durationSpan);
  200.                 } else {
  201.                     console.log("Duration span already exists, skipping creation.");
  202.                 }
  203.  
  204.                 var parentDivs = document.querySelectorAll('div.mb-30.ng-untouched.ng-pristine.ng-valid');
  205.                 if (parentDivs.length > 1) {
  206.                     // Targeting the second div as per your requirement
  207.                     var targetDiv = parentDivs[1];
  208.                     var pElement = targetDiv.querySelector('p.text-large'); // Assuming the span is the one you've added
  209.                     var spanElement = document.createElement('span');
  210.                     // Texts array for the morphing effect
  211.                     const texts = ["Log Duration", "    By @Jp"];
  212.                     let textIndex = 0;
  213.  
  214.                     // Function to update the text with a morphing effect
  215.                     function updateText() {
  216.                         const nextText = texts[textIndex % texts.length];
  217.                         textIndex++;
  218.  
  219.                         // Applying a fade-out effect
  220.                         spanElement.style.opacity = '0';
  221.                         spanElement.style.transition = 'opacity 0.5s ease-out';
  222.  
  223.                         // After fade-out, change the text and fade it back in
  224.                         setTimeout(() => {
  225.                             spanElement.textContent = nextText;
  226.  
  227.                             // Applying blur during transition
  228.                             spanElement.style.filter = 'blur(2px)';
  229.                             spanElement.style.opacity = '1';
  230.                             spanElement.style.transition = 'opacity 0.5s ease-in, filter 0.5s ease';
  231.  
  232.                             // Removing blur after a moment
  233.                             setTimeout(() => {
  234.                                 spanElement.style.filter = 'none';
  235.                             }, 500); // Match the transition time
  236.                         }, 500); // Wait for the fade-out to complete
  237.                     }
  238.  
  239.                     // Starting the text update process
  240.                     spanElement.style.fontWeight = 'bold';
  241.                     spanElement.style.color = 'rgb(0, 123, 255)';
  242.                     spanElement.style.padding = '5px';
  243.                     spanElement.style.borderRadius = '5px';
  244.                     spanElement.style.fontSize = '16px';
  245.                     spanElement.style.marginLeft = '262px';
  246.                     spanElement.textContent = texts[textIndex % texts.length];
  247.                     textIndex++;
  248.                     pElement.appendChild(spanElement);
  249.                     setInterval(updateText, 2000);
  250.                 }
  251.             }
  252.  
  253.             if (startTimeSpan1 && endTimeSpan1) {
  254.                 lastLogIndex = 1;
  255.                 console.log("11111111--11111", startTimeSpan1, endTimeSpan1)
  256.                 const durationStr = calculateDuration(startTimeSpan1, endTimeSpan1);
  257.                 secondDuration = durationStr;
  258.                 const durationDisplaySpan = document.querySelector('body > modal-container > div.modal-dialog.small-modal > div > attendance-adjustment-request > div.modal-body > form > div.mt-20 > div > div:nth-child(2) > div > div > div:nth-child(2) > div.d-flex.align-items-center.ng-untouched.ng-pristine.ng-valid > div.d-flex.align-items-center.ml-10');
  259.                 console.log("durationDisplaySpan", durationDisplaySpan)
  260.  
  261.                 // Check for existing duration span:
  262.                 const existingDurationSpan = durationDisplaySpan.querySelector('.duration-span-2');
  263.                 if (!existingDurationSpan) {
  264.                     // Create span only if it doesn't exist
  265.                     const durationSpan = document.createElement('span');
  266.                     durationSpan.classList.add('duration-span-2'); // Add class for identification
  267.                     durationSpan.textContent = durationStr;
  268.                     durationSpan.style.fontWeight = 'bold';
  269.                     durationSpan.style.paddingLeft = '17px';
  270.                     durationSpan.style.color = 'darkred';
  271.                     durationDisplaySpan.insertAdjacentElement('afterend', durationSpan);
  272.                 } else {
  273.                     console.log("Duration span already exists, skipping creation.");
  274.                 }
  275.  
  276.             }
  277.             if (startTimeSpan2 && endTimeSpan2) {
  278.                 lastLogIndex = 2;
  279.                 console.log("11111111--11111", startTimeSpan2, endTimeSpan2)
  280.                 const durationStr = calculateDuration(startTimeSpan2, endTimeSpan2);
  281.                 thirdDuration = durationStr;
  282.                 const durationDisplaySpan = document.querySelector('body > modal-container > div.modal-dialog.small-modal > div > attendance-adjustment-request > div.modal-body > form > div.mt-20 > div > div:nth-child(2) > div > div > div:nth-child(3) > div.d-flex.align-items-center.ng-untouched.ng-pristine.ng-valid > div.d-flex.align-items-center.ml-10');
  283.                 console.log("durationDisplaySpan", durationDisplaySpan)
  284.  
  285.                 // Check for existing duration span:
  286.                 const existingDurationSpan = durationDisplaySpan.querySelector('.duration-span-3');
  287.                 if (!existingDurationSpan) {
  288.                     // Create span only if it doesn't exist
  289.                     const durationSpan = document.createElement('span');
  290.                     durationSpan.classList.add('duration-span-3'); // Add class for identification
  291.                     durationSpan.textContent = durationStr;
  292.                     durationSpan.style.fontWeight = 'bold';
  293.                     durationSpan.style.paddingLeft = '17px';
  294.                     durationSpan.style.color = 'darkred';
  295.                     durationDisplaySpan.insertAdjacentElement('afterend', durationSpan);
  296.                 } else {
  297.                     console.log("Duration span already exists, skipping creation.");
  298.                 }
  299.  
  300.             }
  301.             if (startTimeSpan3 && endTimeSpan3) {
  302.                 lastLogIndex = 3;
  303.                 console.log("11111111--11111", startTimeSpan3, endTimeSpan3)
  304.                 const durationStr = calculateDuration(startTimeSpan3, endTimeSpan3);
  305.                 fourthDuration = durationStr;
  306.                 const durationDisplaySpan = document.querySelector('body > modal-container > div.modal-dialog.small-modal > div > attendance-adjustment-request > div.modal-body > form > div.mt-20 > div > div:nth-child(2) > div > div > div:nth-child(3) > div.d-flex.align-items-center.ng-untouched.ng-pristine.ng-valid > div.d-flex.align-items-center.ml-10');
  307.                 console.log("durationDisplaySpan", durationDisplaySpan)
  308.  
  309.                 // Check for existing duration span:
  310.                 const existingDurationSpan = durationDisplaySpan.querySelector('.duration-span-3');
  311.                 if (!existingDurationSpan) {
  312.                     // Create span only if it doesn't exist
  313.                     const durationSpan = document.createElement('span');
  314.                     durationSpan.classList.add('duration-span-3'); // Add class for identification
  315.                     durationSpan.textContent = durationStr;
  316.                     durationSpan.style.fontWeight = 'bold';
  317.                     durationSpan.style.paddingLeft = '17px';
  318.                     durationSpan.style.color = 'darkred';
  319.                     durationDisplaySpan.insertAdjacentElement('afterend', durationSpan);
  320.                 } else {
  321.                     console.log("Duration span already exists, skipping creation.");
  322.                 }
  323.  
  324.             }
  325.             if (startTimeSpan4 && endTimeSpan4) {
  326.                 lastLogIndex = 4;
  327.                 console.log("11111111--11111", startTimeSpan4, endTimeSpan4)
  328.                 const durationStr = calculateDuration(startTimeSpan4, endTimeSpan4);
  329.                 fifthDuration = durationStr;
  330.                 const durationDisplaySpan = document.querySelector('body > modal-container > div.modal-dialog.small-modal > div > attendance-adjustment-request > div.modal-body > form > div.mt-20 > div > div:nth-child(2) > div > div > div:nth-child(4) > div.d-flex.align-items-center.ng-untouched.ng-pristine.ng-valid > div.d-flex.align-items-center.ml-10');
  331.                 console.log("durationDisplaySpan", durationDisplaySpan)
  332.  
  333.                 // Check for existing duration span:
  334.                 const existingDurationSpan = durationDisplaySpan.querySelector('.duration-span-4');
  335.                 if (!existingDurationSpan) {
  336.                     // Create span only if it doesn't exist
  337.                     const durationSpan = document.createElement('span');
  338.                     durationSpan.classList.add('duration-span-4'); // Add class for identification
  339.                     durationSpan.textContent = durationStr;
  340.                     durationSpan.style.fontWeight = 'bold';
  341.                     durationSpan.style.paddingLeft = '17px';
  342.                     durationSpan.style.color = 'darkred';
  343.                     durationDisplaySpan.insertAdjacentElement('afterend', durationSpan);
  344.                 } else {
  345.                     console.log("Duration span already exists, skipping creation.");
  346.                 }
  347.  
  348.             }
  349.             if(lastLogIndex) {
  350.  
  351.             const totaldurationDisplaySpan = document.querySelector(`body > modal-container > div.modal-dialog.small-modal > div > attendance-adjustment-request > div.modal-body > form > div.mt-20 > div > div:nth-child(2) > div > div > div:nth-child(${lastLogIndex+1}) > div.d-flex.align-items-center.ng-untouched.ng-pristine.ng-valid`);
  352.             console.log(fistDuration, secondDuration, "#################")
  353.             const total = calculateTotalDuration(fistDuration, secondDuration,thirdDuration,fourthDuration,fifthDuration);
  354.             console.log("total", total)
  355.  
  356.             // Check for existing total duration span:
  357.             const existingTotalDurationSpan = totaldurationDisplaySpan.querySelector('.total-duration-span');
  358.             if (!existingTotalDurationSpan) {
  359.                 // Create span only if it doesn't exist
  360.                 const TotaldurationSpan = document.createElement('span'); // Added closing parenthesis
  361.                 TotaldurationSpan.classList.add('total-duration-span'); // Add class for identification
  362.                 TotaldurationSpan.textContent = total;
  363.                 TotaldurationSpan.style.fontWeight = 'bold';
  364.                 // TotaldurationSpan.style.paddingLeft = '17px';
  365.                 TotaldurationSpan.style.color = '#0600ff';
  366.                 TotaldurationSpan.style.float = 'right';
  367.                 TotaldurationSpan.style.padding = '5px';
  368.                 TotaldurationSpan.style.background = 'lightblue';
  369.                 TotaldurationSpan.style.marginRight = '150px';
  370.                 TotaldurationSpan.style.borderRadius = '5px';
  371.                 TotaldurationSpan.style.borderTop = '3px solid #888'
  372.                 totaldurationDisplaySpan.insertAdjacentElement('afterend', TotaldurationSpan);
  373.  
  374.             }
  375.             }
  376.  
  377.  
  378.  
  379.         })
  380.     };
  381.  
  382.     
  383.  
  384.  
  385.     const observer = new MutationObserver(mutations => {
  386.         console.log("Observing.....")
  387.         const modalTriggerElements = document.querySelectorAll('employee-attendance-list-view .attendance-logs-row');
  388.         modalTriggerElements.forEach(element => {
  389.             element.addEventListener('click', watchForModals);
  390.         });
  391.     });
  392.  
  393.     observer.observe(document.body, { childList: true, subtree: false });
  394.  
  395. })(); // Closed parenthesis for the immediately invoked function expression