Added Min PTO

Emmennater · Nov 17, 2023 · a5ee35b · a5ee35b
1 parent 15284d3
commit a5ee35b
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -96,6 +96,10 @@ <h2 class="header">Settings</h2>
                         <div class="label">MAX PTO</div>
                         <input id="setting-max">
                     </div>
+                    <div class="line">
+                        <div class="label">MIN PTO</div>
+                        <input id="setting-min">
+                    </div>
                     <div class="line">
                         <div class="label">MAX CARRY</div>
                         <input id="setting-carry">
@@ -203,6 +207,9 @@ <h2>Info</h2>
                         <div class="label">MAX PTO DAY</div>
                         <div class="info" id="max-date">???</div>
                     </div>
+                    <div class="line">
+                        <div class="label warning" id="min-pto-warning" style="display:none;">MINIMUM PTO EXCEEDED</div>
+                    </div>
                 </div>
             </div>
         </main>

diff --git a/src/actions.js b/src/actions.js
@@ -62,6 +62,7 @@ function dayClicked(e, day, i) {
     if (dayObject === undefined) return;
 
     if (button == "left") {
+        Settings.setMinPTOWarning(false);
         dayObject.toggleSub();
         updatePTO();
     }
@@ -99,7 +100,8 @@ function updateDayElem(i) {
 
     // Set time off
     dayElem.children[1].innerText = rnd(monthDay.getTimeOff(), Settings.getSetting("round"));
-    let timeOffRatio = monthDay.getTimeOff() / Settings.getSetting("max");
+    const dayTimeOff = monthDay.getTimeOff();
+    let timeOffRatio = dayTimeOff / Settings.getSetting("max");
     timeOffRatio = Math.max(Math.min(timeOffRatio, 1), 0);
     dayElem.setAttribute("style", `--pto-ratio: ${timeOffRatio};`);
 
@@ -121,8 +123,10 @@ function updateDayElem(i) {
         dayElem.classList.remove("starting-day");
 
     // Hit max
-    if (timeOffRatio == 1) {
+    if (dayTimeOff >= Settings.getSetting("max") ||
+        dayTimeOff < Settings.getSetting("min")) {
         dayElem.classList.add("hit-max");
+        dayElem.setAttribute("style", `--pto-ratio: 1;`);
     } else {
         dayElem.classList.remove("hit-max");
     }
@@ -144,6 +148,7 @@ function updatePTO() {
 
 function updateAllPTO() {
     Settings.maxPTO = null;
+    // Settings.setMinPTOWarning(false);
     const initMonth = currentMonth;
     while (true) {
         if (!currentMonth.lastMonth) break;
@@ -201,6 +206,7 @@ function saveData() {
         add: Settings.getSetting("add"),
         sub: Settings.getSetting("sub"),
         max: Settings.getSetting("max"),
+        min: Settings.getSetting("min"),
         carry: Settings.getSetting("carry"),
         start: Settings.getSetting("start")
     };

diff --git a/src/dropdowns.js b/src/dropdowns.js
@@ -9,6 +9,8 @@ class DropDowns {
             if (e.button !== 0) return;
             DropDowns.hideAllDropDowns();
         });
+
+        DropDowns.initStyles();
     }
 
     static hideAllDropDowns() {
@@ -33,25 +35,40 @@ class DropDowns {
             saveChanges();
         }
     }
+
+    static initStyles() {
+        const payrolls = Array.from(document.getElementById("payroll-options").children);
+        const weeks = Array.from(document.getElementById("week-selection").children);
+        const days = Array.from(document.getElementById("day-selection").children);
+        const children = [...payrolls, ...weeks, ...days];
+        for (const elem of children) {
+            elem.addEventListener('mousemove', (e) => {
+                // const x = e.clientX / elem.offsetWidth;
+                const bounds = elem.getBoundingClientRect();
+                const x = (e.clientX - bounds.x) / bounds.width;
+                elem.style.setProperty('--start', x);
+            });
+        }
+    }
 }
 
-function setDaySelectionByPayroll(payroll) {
+function setDaySelectionByPayroll(payroll, accrue = true) {
     switch (payroll) {
-        case "Weekly": setDaySelectionToWeek(); break;
-        case "Bi-Weekly": setDaySelectionToWeek(); break;
-        case "Bi-Monthly": setDaySelectionToDay(); break;
-        case "Monthly": setDaySelectionToDay(); break;
+        case "Weekly": setDaySelectionToWeek(accrue); break;
+        case "Bi-Weekly": setDaySelectionToWeek(accrue); break;
+        case "Bi-Monthly": setDaySelectionToDay(accrue); break;
+        case "Monthly": setDaySelectionToDay(accrue); break;
     }
 }
 
-function setDaySelectionToWeek() {
+function setDaySelectionToWeek(accrue = true) {
     const weekOpts = document.getElementById("week-selection");
     const dayOpts = document.getElementById("day-selection");
     dayOpts.setAttribute("style", "display: none;");
     weekOpts.setAttribute("style", "display: block;");
 
     // Automatically select last selected week
-    Settings.setPayrollWeek(Settings.payrollWeek, true);
+    Settings.setPayrollWeek(Settings.payrollWeek, accrue);
 }
 
 function setDaySelectionToDay() {

diff --git a/src/main.js b/src/main.js
@@ -8,6 +8,7 @@ function initListeners() {
     const addSettingElem = document.getElementById("setting-add");
     const subSettingElem = document.getElementById("setting-sub");
     const maxSettingElem = document.getElementById("setting-max");
+    const minSettingElem = document.getElementById("setting-min");
     const carrySettingElem = document.getElementById("setting-carry");
     const startPTOElem = document.getElementById("setting-start");
     const startMonthElem = document.getElementById("pto-start-month");
@@ -31,6 +32,11 @@ function initListeners() {
         updateAllPTO();
         saveChanges();
     });
+    minSettingElem.addEventListener("change", ()=>{
+        Settings.setSetting("min", parseFloat(minSettingElem.value));
+        updateAllPTO();
+        saveChanges();
+    });
     carrySettingElem.addEventListener("change", ()=>{
         Settings.setSetting("carry", parseFloat(carrySettingElem.value));
         Settings.unknownMaxDate();
@@ -113,6 +119,7 @@ class Month {
 
         let cumulativePTO = startingPTO;
         const maxPTO = Settings.getSetting("max");
+        const minPTO = Settings.getSetting("min");
         let hitMax = startingPTO >= maxPTO;
         for (const day of this.days) {
             cumulativePTO += day.getLocalTimeOff();
@@ -126,6 +133,11 @@ class Month {
                 }
             }
 
+            // Min PTO
+            // if (cumulativePTO < minPTO) {
+            //     Settings.setMinPTOWarning(true);
+            // }
+
             day.setTimeOff(cumulativePTO);
         }
     }

diff --git a/src/settings.js b/src/settings.js
@@ -3,6 +3,7 @@ class Settings {
     static add = 0;
     static sub = 0;
     static max = 0;
+    static min = 0;
     static carry = 0;
     static round = 1;
     static start = 0;
@@ -15,9 +16,11 @@ class Settings {
         Settings.setSetting("add", 4);
         Settings.setSetting("sub", 8);
         Settings.setSetting("max", 120);
+        Settings.setSetting("min", -40);
         Settings.setSetting("carry", 120);
         Settings.setSetting("start", 0);
-
+        setDaySelectionByPayroll(Settings.payroll, false);
+
         // Current day
         const currentDay = new Date();
         Settings.setStartDate(currentDay.getMonth(), 1, currentDay.getFullYear());
@@ -90,4 +93,10 @@ class Settings {
         const elem = document.getElementById("max-date");
         elem.innerText = `???`;
     }
+
+    static setMinPTOWarning(bool) {
+        const warningElem = document.getElementById("min-pto-warning");
+        const display = bool ? "block;" : "none;";
+        warningElem.setAttribute("style", "display:" + display);
+    }
 }
diff --git a/style/dropdown.css b/style/dropdown.css
@@ -30,9 +30,9 @@
     min-width: 160px;
     max-height: 200px;
     top: 19px;
-    background: #111;
+    background: #eee; /* #111 */
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-    border: solid 1px var(--c2);
+    /* border: solid 1px gray; */
     z-index: 1;
     overflow: auto;
 }
@@ -41,14 +41,22 @@
 .dropdown-content a {
     display: block;
     padding: 4px 6px;
-    color: var(--c1);
+    color: #111;
     font-size: 16px;
     text-decoration: none;
 }
 
 /* Change color of dropdown links on hover */
 .dropdown-content a:hover {
-    background-color: #222;
+    --start: 1;
+    background: linear-gradient(
+        to right,
+        #eee calc(var(--start) * 100% - 100%),
+        #bbccff calc(var(--start) * 100% - 10%),
+        #bbccff calc(var(--start) * 100% + 10%),
+        #eee calc(var(--start) * 100% + 100%)
+    );
+    /* background: linear-gradient(to left, #88aaff, #eee 120%); */
 }
 
 /* Show the dropdown menu on hover */

diff --git a/style/sidebar.css b/style/sidebar.css
@@ -88,6 +88,11 @@
     font-size: 14px;
 }
 
-.clipboard-string {
-    display: none;
+.sidebar .warning {
+    flex: 1;
+    color: #fff;
+    background-color: #ff0000;
+    background-clip: padding-box;
+    margin-right: 4px;
+    text-align: center;
 }