changes

fusion_clock/static/src/js/fusion_clock_portal.js

@@ -79,6 +79,37 @@ export class FusionClockPortal extends Interaction {
             });
         }
 
+        const reasonSubmitBtn = document.getElementById("fclk-reason-submit");
+        if (reasonSubmitBtn) {
+            reasonSubmitBtn.addEventListener("click", () => this._submitReason());
+        }
+
+        const leaveBtn = document.getElementById("fclk-leave-btn");
+        if (leaveBtn) {
+            leaveBtn.addEventListener("click", () => {
+                const modal = document.getElementById("fclk-leave-modal");
+                if (modal) modal.style.display = "flex";
+            });
+        }
+
+        const leaveSubmitBtn = document.getElementById("fclk-leave-submit");
+        if (leaveSubmitBtn) {
+            leaveSubmitBtn.addEventListener("click", () => this._submitLeave());
+        }
+
+        const clockoutConfirmBtn = document.getElementById("fclk-clockout-confirm-btn");
+        if (clockoutConfirmBtn) {
+            clockoutConfirmBtn.addEventListener("click", () => this._confirmClockOut());
+        }
+
+        document.querySelectorAll("[data-dismiss]").forEach((btn) => {
+            btn.addEventListener("click", () => {
+                const targetId = btn.dataset.dismiss;
+                const modal = document.getElementById(targetId);
+                if (modal) modal.style.display = "none";
+            });
+        });
+
         document.querySelectorAll(".fclk-modal-item").forEach((item) => {
             item.addEventListener("click", () => {
                 this.selectedLocationId = parseInt(item.dataset.id);
@@ -100,9 +131,54 @@ export class FusionClockPortal extends Interaction {
         e.preventDefault();
         const btn = document.getElementById("fclk-clock-btn");
         if (!btn || btn.disabled) return;
+
+        if (this.isCheckedIn) {
+            this._showClockOutConfirmation();
+            return;
+        }
+
+        this._beginClockAction();
+    }
+
+    _showClockOutConfirmation() {
+        const modal = document.getElementById("fclk-clockout-confirm-modal");
+        if (!modal) {
+            this._beginClockAction();
+            return;
+        }
+
+        const checkinEl = document.getElementById("fclk-confirm-checkin-time");
+        const durationEl = document.getElementById("fclk-confirm-duration");
+
+        if (checkinEl && this.checkInTime) {
+            const h = this.checkInTime.getHours();
+            const m = this.checkInTime.getMinutes();
+            const ampm = h >= 12 ? "PM" : "AM";
+            const hour12 = h % 12 || 12;
+            checkinEl.textContent = hour12 + ":" + (m < 10 ? "0" : "") + m + " " + ampm;
+        }
+
+        if (durationEl && this.checkInTime) {
+            const diff = Math.max(0, Math.floor((new Date() - this.checkInTime) / 1000));
+            const dh = Math.floor(diff / 3600);
+            const dm = Math.floor((diff % 3600) / 60);
+            durationEl.textContent = dh + "h " + dm + "m";
+        }
+
+        modal.style.display = "flex";
+    }
+
+    _confirmClockOut() {
+        const modal = document.getElementById("fclk-clockout-confirm-modal");
+        if (modal) modal.style.display = "none";
+        this._beginClockAction();
+    }
+
+    _beginClockAction() {
+        const btn = document.getElementById("fclk-clock-btn");
+        if (!btn || btn.disabled) return;
         btn.disabled = true;
 
-        // Ripple effect
         const ripple = btn.querySelector(".fclk-btn-ripple");
         if (ripple) {
             ripple.classList.remove("fclk-ripple-active");
@@ -150,6 +226,11 @@ export class FusionClockPortal extends Interaction {
             this._hideGPSOverlay();
             if (btn) btn.disabled = false;
 
+            if (result.requires_reason) {
+                this._showReasonModal();
+                return;
+            }
+
             if (result.error) {
                 this._showToast(result.error, "error");
                 this._shakeButton();
@@ -413,6 +494,75 @@ export class FusionClockPortal extends Interaction {
         } catch (e) {}
     }
 
+    // =========================================================================
+    // Reason Modal & Leave Request
+    // =========================================================================
+
+    _showReasonModal() {
+        const modal = document.getElementById("fclk-reason-modal");
+        if (modal) modal.style.display = "flex";
+    }
+
+    async _submitReason() {
+        const reasonEl = document.getElementById("fclk-reason-text");
+        const timeEl = document.getElementById("fclk-reason-time");
+        const reason = reasonEl ? reasonEl.value.trim() : "";
+        const depTime = timeEl ? timeEl.value.trim() : "";
+
+        if (!reason) {
+            this._showToast("Please provide a reason.", "error");
+            return;
+        }
+
+        try {
+            const result = await rpc("/fusion_clock/submit_reason", {
+                reason: reason,
+                departure_time: depTime,
+            });
+            if (result.success) {
+                const modal = document.getElementById("fclk-reason-modal");
+                if (modal) modal.style.display = "none";
+                this._showToast(result.message, "success");
+                if (reasonEl) reasonEl.value = "";
+                if (timeEl) timeEl.value = "";
+            } else {
+                this._showToast(result.error || "Failed to submit.", "error");
+            }
+        } catch (e) {
+            this._showToast("Network error.", "error");
+        }
+    }
+
+    async _submitLeave() {
+        const dateEl = document.getElementById("fclk-leave-date");
+        const reasonEl = document.getElementById("fclk-leave-reason");
+        const leaveDate = dateEl ? dateEl.value : "";
+        const reason = reasonEl ? reasonEl.value.trim() : "";
+
+        if (!leaveDate || !reason) {
+            this._showToast("Please provide both a date and reason.", "error");
+            return;
+        }
+
+        try {
+            const result = await rpc("/fusion_clock/request_leave", {
+                leave_date: leaveDate,
+                reason: reason,
+            });
+            if (result.success) {
+                const modal = document.getElementById("fclk-leave-modal");
+                if (modal) modal.style.display = "none";
+                this._showToast(result.message, "success");
+                if (dateEl) dateEl.value = "";
+                if (reasonEl) reasonEl.value = "";
+            } else {
+                this._showToast(result.error || "Failed to submit.", "error");
+            }
+        } catch (e) {
+            this._showToast("Network error.", "error");
+        }
+    }
+
     // =========================================================================
     // Sync on visibility change
     // =========================================================================