Baseline: The current state of the mess

assets/ktc-app.js~

@@ -0,0 +1,157 @@
+
+function ktc_open_edit_modal(id, ts, isToday) { 
+	document.getElementById("ktc_edit_id").value=id; 
+	const origTimeDisplay = document.getElementById("ktc_modal_orig_time");
+  if (origTimeDisplay) { origTimeDisplay.innerText = "Original: " + ts; }
+	document.getElementById("ktc_edit_modal").style.display="block"; 
+}
+    
+// --- Guardrail 1: Punch Lockout ---
+document.addEventListener('DOMContentLoaded', function() {
+    const btn = document.getElementById('ktc-punch-button');
+    const timerDiv = document.getElementById('ktc-timer');
+    const countdown = document.getElementById('ktc-countdown');
+    const form = document.getElementById('ktc-punch-form');
+
+    function updateTimer() {
+        const expiry = localStorage.getItem('ktc_lockout_expiry');
+        if (expiry) {
+            const now = Date.now();
+            const timeLeft = Math.ceil((expiry - now) / 1000);
+
+            if (timeLeft > 0) {
+                btn.disabled = true;
+                btn.style.opacity = '0.5';
+                btn.style.cursor = 'not-allowed';
+                timerDiv.style.display = 'block';
+                countdown.innerText = timeLeft;
+                setTimeout(updateTimer, 1000); // Check again in 1s
+            } else {
+                btn.disabled = false;
+                btn.style.opacity = '1';
+                btn.style.cursor = 'pointer';
+                timerDiv.style.display = 'none';
+                localStorage.removeItem('ktc_lockout_expiry');
+            }
+        }
+    }
+
+    // Initial check on page load
+    updateTimer();
+
+    form?.addEventListener('submit', function(e) {
+        // Set expiry for 60 seconds from now
+        const expiryTime = Date.now() + 60000;
+        localStorage.setItem('ktc_lockout_expiry', expiryTime);
+        // The page will now refresh, and updateTimer() will catch it on reload
+    });
+});
+
+// --- Guardrail 2: Modal Future-Time Validation ---
+document.getElementById('ktc_proposed_time')?.addEventListener('input', function() {
+    const submitBtn = this.form.querySelector('button[type="submit"]');
+    // If the input has a 'max' attribute and value exceeds it
+    if (this.max && this.value > this.max) {
+        this.style.borderColor = 'red';
+        this.style.backgroundColor = '#fff0f0';
+        submitBtn.disabled = true;
+        submitBtn.style.opacity = '0.5';
+    } else {
+        this.style.borderColor = '#ccc';
+        this.style.backgroundColor = '#fff';
+        submitBtn.disabled = false;
+        submitBtn.style.opacity = '1';
+    }
+});
+
+function ktc_open_edit_modal(id, ts, isToday) {
+    document.getElementById("ktc_edit_id").value = id;
+    document.getElementById("ktc_modal_orig_time").innerText = "Original: " + ts;
+    
+    const timeInput = document.getElementById("ktc_proposed_time");
+    if (isToday) {
+        // Set max to current Chicago time (HH:MM)
+        const now = new Date().toLocaleTimeString('en-GB', { 
+            timeZone: ktcSovereignTZ, 
+            hour: '2-digit', 
+            minute: '2-digit' 
+        });
+        timeInput.setAttribute('max', now);
+    } else {
+        timeInput.removeAttribute('max');
+    }
+    
+    document.getElementById("ktc_edit_modal").style.display = "block";
+}
+
+// --- Guardrail 3: The Live Heartbeat ---
+function ktc_start_heartbeat() {
+    const elapsedElement = document.getElementById('ktc-live-elapsed');
+    if (!elapsedElement) return;
+
+    // Pull the initial seconds we injected via PHP
+    let totalSeconds = parseInt(elapsedElement.getAttribute('data-seconds'));
+
+    setInterval(() => {
+        totalSeconds++;
+        
+        // Math to format seconds into "Xh Ym Zs" or "Xh Ym"
+        const hours = Math.floor(totalSeconds / 3600);
+        const minutes = Math.floor((totalSeconds % 3600) / 60);
+        const seconds = totalSeconds % 60;
+
+        // Update the display (Adding seconds for that "Live" feel)
+        elapsedElement.innerText = `${hours}h ${minutes}m ${seconds}s`;
+    }, 1000);
+}
+
+function ktc_run_digital_clock() {
+    const clockElement = document.getElementById('ktc-digital-clock');
+    if (!clockElement) return;
+
+    setInterval(() => {
+        const now = new Date().toLocaleTimeString('en-US', { 
+            timeZone: typeof ktcSovereignTZ !== 'undefined' ? ktcSovereignTZ : 'America/Chicago',
+            hour12: true,
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+        });
+        clockElement.innerText = now;
+    }, 1000);
+}
+document.addEventListener('DOMContentLoaded', ktc_run_digital_clock);
+
+function updateDigitalClock() {
+    const clock = document.getElementById('ktc-digital-clock');
+    if (!clock) return;
+
+    const tz = typeof ktcSovereignTZ !== 'undefined' ? ktcSovereignTZ : 'America/Chicago';
+    const timeString = new Date().toLocaleTimeString('en-US', { 
+        timeZone: tz, 
+        hour12: true, 
+        hour: '2-digit', 
+        minute: '2-digit', 
+        second: '2-digit' 
+    });
+
+    clock.innerText = timeString;
+
+    // Teleport to Page Title (h1) if not already there
+    const pageTitle = document.querySelector('.entry-title, h1.page-title');
+    if (pageTitle && !document.getElementById('ktc-clock-target')) {
+        const target = document.createElement('span');
+        target.id = 'ktc-clock-target';
+        target.style.marginLeft = '20px';
+        target.style.fontSize = '0.6em';
+        target.style.verticalAlign = 'middle';
+        pageTitle.appendChild(target);
+        target.appendChild(clock); // Moves the element in the DOM
+        document.getElementById('ktc-clock-teleport-source').remove();
+    }
+}
+
+// Initialize on load
+document.addEventListener('DOMContentLoaded', ktc_start_heartbeat);
+
+