changes

fusion_clock/static/src/js/fusion_clock_systray.js

@@ -23,6 +23,11 @@ export class FusionClockFAB extends Component {
             weekHours: "0.0",
             loading: false,
             error: "",
+            showReasonDialog: false,
+            showClockoutConfirm: false,
+            reasonText: "",
+            reasonTime: "",
+            reasonSubmitting: false,
         });
 
         this._timerInterval = null;
@@ -95,6 +100,23 @@ export class FusionClockFAB extends Component {
     }
 
     async onClockAction() {
+        if (this.state.isCheckedIn) {
+            this.state.showClockoutConfirm = true;
+            return;
+        }
+        await this._executeClockAction();
+    }
+
+    async confirmClockOut() {
+        this.state.showClockoutConfirm = false;
+        await this._executeClockAction();
+    }
+
+    cancelClockOut() {
+        this.state.showClockoutConfirm = false;
+    }
+
+    async _executeClockAction() {
         this.state.loading = true;
         this.state.error = "";
 
@@ -126,6 +148,14 @@ export class FusionClockFAB extends Component {
                 source: "backend_fab",
             });
 
+            if (result.requires_reason) {
+                this.state.loading = false;
+                this.state.showReasonDialog = true;
+                this.state.reasonText = "";
+                this.state.reasonTime = "";
+                return;
+            }
+
             if (result.error) {
                 this.state.error = result.error;
                 this.state.loading = false;
@@ -153,6 +183,60 @@ export class FusionClockFAB extends Component {
         this.state.loading = false;
     }
 
+    onReasonTextInput(ev) {
+        this.state.reasonText = ev.target.value;
+    }
+
+    onReasonTimeInput(ev) {
+        this.state.reasonTime = ev.target.value;
+    }
+
+    cancelReason() {
+        this.state.showReasonDialog = false;
+        this.state.reasonText = "";
+        this.state.reasonTime = "";
+    }
+
+    async submitReason() {
+        if (!this.state.reasonText.trim()) {
+            this.state.error = "Please provide a reason.";
+            return;
+        }
+        this.state.reasonSubmitting = true;
+        try {
+            await rpc("/fusion_clock/submit_reason", {
+                reason: this.state.reasonText.trim(),
+                departure_time: this.state.reasonTime || "",
+            });
+            this.state.showReasonDialog = false;
+            this.state.reasonText = "";
+            this.state.reasonTime = "";
+            this.state.reasonSubmitting = false;
+            await this._executeClockAction();
+        } catch (e) {
+            this.state.error = "Failed to submit reason.";
+            this.state.reasonSubmitting = false;
+        }
+    }
+
+    get confirmCheckinDisplay() {
+        if (!this.state.checkInTime) return "--";
+        const d = this.state.checkInTime;
+        let h = d.getHours();
+        const m = d.getMinutes();
+        const ampm = h >= 12 ? "PM" : "AM";
+        h = h % 12 || 12;
+        return h + ":" + (m < 10 ? "0" : "") + m + " " + ampm;
+    }
+
+    get confirmDurationDisplay() {
+        if (!this.state.checkInTime) return "--";
+        const diff = Math.max(0, Math.floor((new Date() - this.state.checkInTime) / 1000));
+        const dh = Math.floor(diff / 3600);
+        const dm = Math.floor((diff % 3600) / 60);
+        return dh + "h " + dm + "m";
+    }
+
     _startTimer() {
         this._stopTimer();
         this._updateTimer();