SalaryAnalysisBookmarkLet.js

javascript: (function () {
  const requiredUrl =
    "http://dev.topofstacksoftware.com/timetrack/user-calendar.php";
  if (!window.location.href.startsWith(requiredUrl)) {
    alert(`This is not the real Calender URL. Please go here: 
${requiredUrl}`);
    return;
  }

  const datalist = document.querySelectorAll(".fc-event");
  function getMyMonthlyHours(monthlyHours) {
    let totalHours = 0;
    let totalMins = 0;
    datalist.forEach((box) => {
      const timestamp = box.querySelector(".fc-event-title").innerText;
      const [hour, mins] = timestamp.split(":");
      totalHours += parseInt(hour);
      totalMins += parseInt(mins);
    });
    totalHours += parseInt(totalMins / 60);
    totalMins = parseInt(totalMins % 60);
    const timeLeft = Math.abs(
      monthlyHours * 60 - (totalHours * 60 + totalMins)
    );
    return { timeLeft, totalHours, totalMins };
  }
  const getBox = ({ title, value }) => {
    return `<div style="border-left: 5px solid #368ee0 !important; border: 1px solid rgba(128, 128, 128, 0.403); border-radius: 0 5px 5px 0; padding: 10px; display: flex; flex-direction: column; gap: 5px;"><span style="color: #368ee0; font-size: smaller">${title}</span><span style="font-size: 10px">${value}</span></div>`;
  };

  function handleSubmit(event) {
    event.preventDefault();
    const result = document.querySelector("#result");
    const monthYear = document.querySelector(".fc-header-title").innerText;
    const salary = parseInt(document.getElementById("salary").value);
    const workHours = parseInt(document.getElementById("workHour").value);
    const { totalHours, totalMins, timeLeft } = getMyMonthlyHours(workHours);
    const salaryGenerated =
      (totalHours * (salary / workHours) +
      totalMins * (salary / (workHours * 60))).toFixed(2);
    const resultHtml = `
    ${getBox({
      title: "Total Worked",
      value: `${datalist.length} Days`,
    })}
    ${getBox({
      title: "Total Hours Spent",
      value: `${totalHours} Hours ${totalMins} Mins`,
    })}
    ${getBox({
      title: totalHours >= workHours ? "Bonus Hours" : "Hours Left",
      value:
        totalHours >= workHours
          ? `${parseInt(timeLeft / 60)} Hours ${timeLeft % 60} Mins Bonus`
          : `${parseInt(timeLeft / 60)} Hours ${timeLeft % 60} Mins Left`,
    })}
    ${getBox({
      title: "Salary Generated",
      value: `${salaryGenerated} BDT`,
    })}
    ${getBox({
      title: "Overtimes & Bonus",
      value:
        salaryGenerated > salary
          ? `${salaryGenerated - salary} BDT`
          : `No Bonus Yet`,
    })}`;
    result.innerHTML = `
    <h4 style="text-align: center; color: #368ee0">${monthYear}</h4>
        <div
          style="
            display: flex;
            justify-content: space-between;
            font-size: small;
          "
        >
          <span>Total 25 Working Days (${workHours} Work Hours)</span>
          <span id="salaryShow">Salary ${salary}</span>
        </div>
        <hr />
        <div
          style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px"
        >${datalist.length > 0 ? resultHtml : "No results found"}
        </div>
    `;
  }
  let htmlForm =  `<div style="border-radius: 10px; padding: 10px; position: fixed; bottom: 10px; right: 10px; z-index: 999; background-color: #fff; border: 1px solid rgba(96, 96, 96, 0.342); font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; max-width: 400px; width: 100%;"><div><form id="salaryForm"><label for="salary" style="font-size: x-small">Your Salary</label><input type="number" min="5000" required name="salary" placeholder="Enter your current Salary" style="padding: 20px 10px; width: 100%; box-sizing: border-box; margin: 3px 0;" id="salary" /><label for="workHour" style="font-size: x-small">Monthly Work Hours</label><input type="number" min="0" required placeholder="Enter your work hours" style="padding: 20px 10px; width: 100%; box-sizing: border-box; margin: 3px 0;" name="workHour" id="workHour" value="200" /><button type="submit" style="margin-top: 10px; padding:10px; background-color: #368ee0; color: white; border: none; width: 100%;">Calculate</button></form></div><div id="result"></div></div>`;
  document.body.insertAdjacentHTML("beforeend", htmlForm);
  document
    .getElementById("salaryForm")
    .addEventListener("submit", handleSubmit);
})();