Apr 06 2026: enhanced - update the dynamic QR code

2026-04-06 09:28:58 -04:00
parent 28bcd13c7f
commit f9aa07716b
12 changed files with 727 additions and 74 deletions
@@ -33,7 +33,7 @@
            <li><strong>QR Code Location</strong> - Location identifier</li>
            <li><strong>Project</strong> - Project name (must exist)</li>
            <li><strong>Location Address</strong> - Complete address</li>
-            <li><strong>Event</strong> - Check IN or Check OUT</li>
+            <li><strong>Event</strong> - Check In or Check Out</li>
          </ul>
        </div>

@@ -90,7 +90,7 @@
                <td>Main Building</td>
                <td>Corporate HQ</td>
                <td>123 Main St, Springfield, IL 62701</td>
-                <td>Check IN</td>
+                <td>Check In</td>
                <td>39.781721</td>
                <td>-89.650148</td>
              </tr>
@@ -99,7 +99,7 @@
                <td>Main Building</td>
                <td>Corporate HQ</td>
                <td>123 Main St, Springfield, IL 62701</td>
-                <td>Check OUT</td>
+                <td>Check Out</td>
                <td>39.781721</td>
                <td>-89.650148</td>
              </tr>
@@ -108,7 +108,7 @@
                <td>Construction Site A</td>
                <td>Construction Projects</td>
                <td>456 Oak Ave, Chicago, IL 60601</td>
-                <td>Check IN</td>
+                <td>Check In</td>
                <td></td>
                <td></td>
              </tr>
@@ -595,6 +595,26 @@
              </div>
            </div>

+            <!-- ===== ADDED: QR Code Type selector — shown first so user picks type before entering location ===== -->
+            <div class="form-group">
+              <label for="qr_type">
+                <i class="fas fa-qrcode"></i>
+                QR Code Type
+                <span style="color: var(--error-color)">*</span>
+              </label>
+              <select id="qr_type" name="qr_type" class="form-control" onchange="toggleQRTypeSection()">
+                <option value="standard" selected>Standard — Fixed Location</option>
+                <option value="dynamic">Dynamic — Employee Selects Location</option>
+              </select>
+              <small class="form-help">
+                <strong>Standard:</strong> employee checks in at one fixed location.<br>
+                <strong>Dynamic:</strong> employee picks a location from a list when scanning.
+              </small>
+            </div>
+            <!-- ===== END ADDED ===== -->
+
+            <!-- ADDED: wrapper to hide/show standard-only location field -->
+            <div id="standardLocationNameGroup">
            <div class="form-group">
              <label for="location">
                <i class="fas fa-map-marker-alt"></i>
@@ -616,6 +636,7 @@
                <span id="locationCounter">0/100</span>
              </div>
            </div>
+            </div><!-- end standardLocationNameGroup -->

            <div class="form-group">
              <label for="project_id">
@@ -637,7 +658,8 @@
            </div>
          </div>

-          <!-- Location Details Section -->
+          <!-- Location Details Section — hidden when Dynamic QR type is selected -->
+          <div id="standardLocationDetailsSection">
          <div class="form-section">
            <div class="section-header">
              <h3>
@@ -721,6 +743,11 @@
              </div>
            </div>

+          </div>
+          </div><!-- end standardLocationDetailsSection -->
+
+          <!-- Event or Purpose — always visible for both Standard and Dynamic QR -->
+          <div class="form-section">
            <div class="form-group">
              <label for="location_event">
                <i class="fas fa-calendar-alt"></i>
@@ -741,6 +768,7 @@
                >Select the event type for this QR code</small
              >
            </div>
+
          </div>

          <!-- QR Code Customization Section -->
@@ -1404,5 +1432,29 @@
        clearBtn.addEventListener('click', clearCoordinates);
      });
    </script>
+
+    <!-- ===== Dynamic QR Type Toggle ===== -->
+    <script>
+      function toggleQRTypeSection() {
+        var type      = document.getElementById('qr_type').value;
+        var stdName   = document.getElementById('standardLocationNameGroup');
+        var stdDetails= document.getElementById('standardLocationDetailsSection');
+        var locInput  = document.getElementById('location');
+        var addrInput = document.getElementById('location_address');
+
+        if (type === 'dynamic') {
+          if (stdName)   stdName.style.display    = 'none';
+          if (stdDetails)stdDetails.style.display = 'none';
+          if (locInput)  locInput.removeAttribute('required');
+          if (addrInput) addrInput.removeAttribute('required');
+        } else {
+          if (stdName)   stdName.style.display    = 'block';
+          if (stdDetails)stdDetails.style.display = 'block';
+          if (locInput)  locInput.setAttribute('required', '');
+          if (addrInput) addrInput.setAttribute('required', '');
+        }
+      }
+    </script>
+    <!-- ===== END Dynamic QR Type Toggle ===== -->
  </body>
 </html>
@@ -649,6 +649,26 @@
            </div>
          </div>

+          <!-- ===== ADDED: QR Code Type selector ===== -->
+          <div class="form-group">
+            <label for="qr_type">
+              <i class="fas fa-qrcode"></i>
+              QR Code Type
+              <span style="color: var(--error-color)">*</span>
+            </label>
+            <select id="qr_type" name="qr_type" class="form-control" onchange="toggleQRTypeSection()">
+              <option value="standard" {% if qr_code.qr_type != 'dynamic' %}selected{% endif %}>Standard — Fixed Location</option>
+              <option value="dynamic" {% if qr_code.qr_type == 'dynamic' %}selected{% endif %}>Dynamic — Employee Selects Location</option>
+            </select>
+            <small class="form-help">
+              <strong>Standard:</strong> employee checks in at one fixed location.<br>
+              <strong>Dynamic:</strong> employee picks a location from a list when scanning.
+            </small>
+          </div>
+          <!-- ===== END ADDED ===== -->
+
+          <!-- ADDED: wrapper to hide/show for standard QR only -->
+          <div id="standardLocationNameGroup" {% if qr_code.qr_type == 'dynamic' %}style="display:none;"{% endif %}>
          <div class="form-group">
            <label for="location">
              <i class="fas fa-map-marker-alt"></i>
@@ -658,8 +678,8 @@
              type="text"
              id="location"
              name="location"
-              required
-              value="{{ qr_code.location }}"
+              {% if qr_code.qr_type != 'dynamic' %}required{% endif %}
+              value="{{ qr_code.location if qr_code.qr_type != 'dynamic' else '' }}"
              data-original="{{ qr_code.location }}"
              placeholder="e.g., Corporate Headquarters, Branch Office"
              maxlength="100"
@@ -669,9 +689,10 @@
              used</small
            >
            <div class="character-counter">
-              <span id="locationCounter">{{ qr_code.location|length }}/100</span>
+              <span id="locationCounter">{{ qr_code.location|length if qr_code.qr_type != 'dynamic' else '0' }}/100</span>
            </div>
          </div>
+          </div><!-- end standardLocationNameGroup -->

          <div class="form-group">
            <label for="project_id">
@@ -693,7 +714,8 @@
          </div>
        </div>

-        <!-- Location Details Section -->
+        <!-- Location Details Section — hidden when Dynamic QR type is selected -->
+        <div id="standardLocationDetailsSection" {% if qr_code.qr_type == 'dynamic' %}style="display:none;"{% endif %}>
        <div class="form-section">
          <div class="section-header">
            <h3>
@@ -782,6 +804,11 @@
            </div>
          </div>

+        </div>
+        </div><!-- end standardLocationDetailsSection -->
+
+        <!-- Event or Purpose — always visible for both Standard and Dynamic QR -->
+        <div class="form-section">
          <div class="form-group">
            <label for="location_event">
              <i class="fas fa-calendar-alt"></i>
@@ -803,6 +830,7 @@
              >Select the event type for this QR code</small
            >
          </div>
+
        </div>

        <!-- QR Code Customization Section -->
@@ -1451,4 +1479,32 @@
    clearBtn.addEventListener('click', clearCoordinates);
  });
 </script>
+
+<!-- ===== Dynamic QR Type Toggle ===== -->
+<script>
+  function toggleQRTypeSection() {
+    var type      = document.getElementById('qr_type').value;
+    var stdName   = document.getElementById('standardLocationNameGroup');
+    var stdDetails= document.getElementById('standardLocationDetailsSection');
+    var locInput  = document.getElementById('location');
+    var addrInput = document.getElementById('location_address');
+
+    if (type === 'dynamic') {
+      if (stdName)   stdName.style.display    = 'none';
+      if (stdDetails)stdDetails.style.display = 'none';
+      if (locInput)  locInput.removeAttribute('required');
+      if (addrInput) addrInput.removeAttribute('required');
+    } else {
+      if (stdName)   stdName.style.display    = 'block';
+      if (stdDetails)stdDetails.style.display = 'block';
+      if (locInput)  locInput.setAttribute('required', '');
+      if (addrInput) addrInput.setAttribute('required', '');
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', function() {
+    toggleQRTypeSection();
+  });
+</script>
+<!-- ===== END Dynamic QR Type Toggle ===== -->
 {% endblock %}
@@ -1068,7 +1068,67 @@
      </div>

      <!-- Check-in Form with Dynamic Styling and Color-Coded Instructions -->
-      <div class="checkin-card fade-transition active">
+
+      <!-- ===== Step 1 — Location Dropdown Selector (Dynamic QR only) ===== -->
+      {% if qr_code.qr_type == 'dynamic' %}
+      <div class="checkin-card fade-transition active" id="locationSelectCard">
+        <div class="checkin-header">
+          <div class="bilingual-container">
+            <p>
+              <span class="english-text">
+                <i class="fas fa-map-marker-alt"></i> Please select your work location.
+              </span>
+              <span class="language-separator">/</span>
+              <span class="spanish-text">Por favor seleccione su ubicación de trabajo.</span>
+            </p>
+          </div>
+        </div>
+
+        <div class="form-group" style="margin-top:1rem;">
+          <select id="locationDropdown" class="form-control"
+                  style="font-size:1rem;padding:0.75rem;height:auto;">
+            <option value="">-- Select a location / Seleccione una ubicación --</option>
+            {% for loc in locations %}
+            <option
+              value="{{ loc.location | e }}"
+              data-address="{{ (loc.location_address or '') | e }}"
+            >{{ loc.location }}</option>
+            {% else %}
+            <option value="" disabled>No locations configured</option>
+            {% endfor %}
+          </select>
+        </div>
+
+        <button type="button" class="btn btn-primary"
+                id="confirmLocationBtn"
+                style="width:100%;margin-top:0.75rem;padding:0.9rem;font-size:1rem;"
+                onclick="confirmLocationSelection()">
+          <i class="fas fa-check" style="margin-right:0.5rem;"></i>
+          <span class="english-text">Confirm Location</span>
+          <span class="language-separator">/</span>
+          <span class="spanish-text">Confirmar Ubicación</span>
+        </button>
+
+        <div id="locationSelectError" style="display:none;margin-top:0.5rem;">
+          <div class="bilingual-container" style="background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.3);">
+            <p style="margin:0;color:#dc2626;">
+              <i class="fas fa-exclamation-circle"></i>
+              <span class="english-text">Please select a location before continuing.</span>
+              <span class="language-separator">/</span>
+              <span class="spanish-text">Por favor seleccione una ubicación.</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      {% endif %}
+      <!-- ===== END Step 1 ===== -->
+
+      <!-- Step 2 (or sole step for Standard QR): Employee ID form -->
+      <div
+        class="checkin-card fade-transition {% if qr_code.qr_type != 'dynamic' %}active{% endif %}"
+        id="checkinFormCard"
+        {% if qr_code.qr_type == 'dynamic' %}style="display:none;"{% endif %}
+      >
        <div class="checkin-header">
          <div class="bilingual-container">
            <p>
@@ -1082,6 +1142,34 @@
        </div>

        <form id="checkinForm" onsubmit="return false;">
+          <!-- ADDED: carries the employee-selected location to the backend -->
+          <input type="hidden" id="selected_location_name" name="selected_location_name" value="" />
+          <input type="hidden" id="selected_location_address" name="selected_location_address" value="" />
+
+          <!-- ADDED: selected location confirmation badge (dynamic QR only) -->
+          {% if qr_code.qr_type == 'dynamic' %}
+          <div id="selectedLocationBadge"
+               class="bilingual-container"
+               style="display:none;margin-bottom:1rem;background:rgba(37,99,235,0.07);border:1px solid rgba(37,99,235,0.28);">
+            <p style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.5rem;margin:0;">
+              <span>
+                <i class="fas fa-map-marker-alt" style="color:#2563eb;"></i>
+                <strong id="selectedLocationDisplay" style="margin-left:0.4rem;"></strong>
+              </span>
+              <button
+                type="button"
+                onclick="backToLocationSelect()"
+                style="background:none;border:1px solid #2563eb;color:#2563eb;border-radius:4px;padding:3px 12px;cursor:pointer;font-size:0.85rem;"
+              >
+                <i class="fas fa-arrow-left"></i>
+                <span class="english-text">Change</span>
+                <span class="language-separator">/</span>
+                <span class="spanish-text">Cambiar</span>
+              </button>
+            </p>
+          </div>
+          {% endif %}
+
          <div class="form-group">
            <label for="employee_id">
              <i class="fas fa-id-card"></i>
@@ -1456,6 +1544,20 @@
        const employeeId = document.getElementById("employee_id").value.trim();
        const submitButton = document.getElementById("submitButton");

+        // FIX 2: For dynamic QR codes, block submission if no location was selected
+        var selLocField = document.getElementById("selected_location_name");
+        var locationSelectCard = document.getElementById("locationSelectCard");
+        if (locationSelectCard && selLocField && !selLocField.value.trim()) {
+          // No location selected — send employee back to Step 1
+          document.getElementById("checkinFormCard").style.display = "none";
+          locationSelectCard.style.display = "block";
+          showStatusMessage(
+            "Please select a location first / Por favor seleccione una ubicación primero",
+            "error"
+          );
+          return;
+        }
+
        if (!employeeId) {
          showStatusMessage(
            "Please enter your Employee ID / Por favor ingrese su ID de empleado",
@@ -1495,6 +1597,16 @@
        const formData = new FormData();
        formData.append("employee_id", employeeId);

+        // ADDED: forward employee-selected location for dynamic QR check-in
+        const selLocName = document.getElementById("selected_location_name");
+        const selLocAddr = document.getElementById("selected_location_address");
+        if (selLocName && selLocName.value) {
+          formData.append("selected_location_name", selLocName.value);
+        }
+        if (selLocAddr && selLocAddr.value) {
+          formData.append("selected_location_address", selLocAddr.value);
+        }
+
        // Add location data to form submission
        if (currentUserLocation.latitude !== null) {
          formData.append("latitude", currentUserLocation.latitude.toString());
@@ -1594,44 +1706,38 @@

      // Enhanced success display with bilingual details (renamed to avoid conflicts)
      function showEnhancedSuccessCard(data) {
-        const successCard = document.getElementById("successCard");
-        const checkinCard = document.querySelector(".checkin-card");
+        const successCard    = document.getElementById("successCard");
+        const checkinCard    = document.querySelector(".checkin-card");
        const successDetails = document.getElementById("successDetails");

-        // Hide check-in form
-        checkinCard.style.display = "none";
+        // Hide the check-in form card
+        if (checkinCard) checkinCard.style.display = "none";

-        // Get employee ID from form input (since data.employee_id might be undefined)
+        // Employee ID — prefer server response, fall back to input field
        const employeeIdInput = document.getElementById("employee_id");
        const employeeId =
-          data.employee_id ||
+          (data.data && data.data.employee_id) ||
          (employeeIdInput ? employeeIdInput.value.trim() : "N/A");

-        // Use QR code location instead of GPS address for main location display
-        const qrLocationElement = document.querySelector(".location-info");
-        let qrLocationName = "Unknown Location";
-        if (qrLocationElement) {
-          // Extract text content, removing the icon
-          const locationText =
-            qrLocationElement.textContent || qrLocationElement.innerText;
-          qrLocationName = locationText.trim();
+        // Location name — prefer server response (handles dynamic QR correctly),
+        // fall back to the .location-info element shown on the page header.
+        let qrLocationName = (data.data && data.data.location) || null;
+        if (!qrLocationName) {
+          const el = document.querySelector(".location-info");
+          if (el) qrLocationName = el.textContent.trim();
        }
+        if (!qrLocationName) qrLocationName = "Unknown Location";

-        // Get location event (Check In or Check Out)
-        const isCheckOut = document.body.classList.contains("check-out");
-        const locationEvent = isCheckOut ? "Check Out" : "Check In";
-        const locationEventSpanish = isCheckOut ? "Salida" : "Entrada";
+        // Location event — prefer server response (handles dynamic QR correctly),
+        // fall back to body class set by Jinja for standard QR codes.
+        const serverEvent    = (data.data && data.data.event) || null;
+        const isCheckOut     = document.body.classList.contains("check-out");
+        const locationEvent  = serverEvent || (isCheckOut ? "Check Out" : "Check In");
+        const locationEventSpanish = (locationEvent === "Check Out") ? "Salida" : "Entrada";

-        // Alternative: try to get from page title or header
-        if (qrLocationName === "Unknown Location") {
-          const headerElement = document.querySelector(
-            ".destination-header h1"
-          );
-          if (headerElement) {
-            // Extract just the location event part (Check In/Check Out)
-            qrLocationName = data.location || "Check-in Location";
-          }
-        }
+        // Build success detail rows
+        const checkInTime = (data.data && data.data.check_in_time) || new Date().toLocaleTimeString();
+        const checkInDate = (data.data && data.data.check_in_date) || new Date().toLocaleDateString();

        successDetails.innerHTML = `
          <div class="detail-row">
@@ -1654,15 +1760,21 @@
              <span class="spanish-text">${locationEventSpanish}</span>
            </span>
          </div>
+          <div class="detail-row">
+            <span class="detail-label">
+              <span class="english-text">Date</span>
+              <span class="language-separator">/</span>
+              <span class="spanish-text">Fecha</span>
+            </span>
+            <span class="detail-value">${checkInDate}</span>
+          </div>
          <div class="detail-row">
            <span class="detail-label">
              <span class="english-text">Time</span>
              <span class="language-separator">/</span>
              <span class="spanish-text">Hora</span>
            </span>
-            <span class="detail-value">${
-              data.timestamp || new Date().toLocaleString()
-            }</span>
+            <span class="detail-value">${checkInTime}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">
@@ -1677,6 +1789,72 @@
        // Show success card
        successCard.classList.add("show");
      }
+
+      // ===== Dynamic QR location step handlers =====
+      function confirmLocationSelection() {
+        var dropdown = document.getElementById("locationDropdown");
+        var errorDiv = document.getElementById("locationSelectError");
+
+        // Validate a location has been chosen
+        if (!dropdown || !dropdown.value) {
+          if (errorDiv) errorDiv.style.display = "block";
+          return;
+        }
+        if (errorDiv) errorDiv.style.display = "none";
+
+        var name    = dropdown.value;
+        var selOpt  = dropdown.options[dropdown.selectedIndex];
+        var address = selOpt ? (selOpt.getAttribute("data-address") || "") : "";
+
+        // Store selection in hidden fields
+        document.getElementById("selected_location_name").value    = name;
+        document.getElementById("selected_location_address").value = address;
+
+        // FIX 1: Update the page header .location-info to show the selected location
+        var locationInfoEl = document.querySelector(".location-info");
+        if (locationInfoEl) {
+          locationInfoEl.innerHTML = "<i class=\"fas fa-map-marker-alt\"></i> " + name;
+        }
+
+        // Show the selected location badge on the ID form
+        var display = document.getElementById("selectedLocationDisplay");
+        var badge   = document.getElementById("selectedLocationBadge");
+        if (display) display.textContent = name;
+        if (badge)   badge.style.display = "block";
+
+        // Transition: hide Step 1, show Step 2
+        document.getElementById("locationSelectCard").style.display = "none";
+        var formCard = document.getElementById("checkinFormCard");
+        formCard.style.display = "block";
+        formCard.classList.add("active");
+
+        // Auto-focus Employee ID input for faster mobile entry
+        var empInput = document.getElementById("employee_id");
+        if (empInput) { setTimeout(function () { empInput.focus(); }, 120); }
+      }
+
+      function backToLocationSelect() {
+        // Clear selection
+        document.getElementById("selected_location_name").value    = "";
+        document.getElementById("selected_location_address").value = "";
+        var badge = document.getElementById("selectedLocationBadge");
+        if (badge) badge.style.display = "none";
+
+        // Reset dropdown
+        var dropdown = document.getElementById("locationDropdown");
+        if (dropdown) dropdown.value = "";
+
+        // Reset header back to blank while no location is selected
+        var locationInfoEl = document.querySelector(".location-info");
+        if (locationInfoEl) {
+          locationInfoEl.innerHTML = "<i class=\"fas fa-map-marker-alt\"></i> ";
+        }
+
+        // Transition: hide Step 2, show Step 1
+        document.getElementById("checkinFormCard").style.display  = "none";
+        document.getElementById("locationSelectCard").style.display = "block";
+      }
+      // ===== END Dynamic QR location step handlers =====
    </script>
  </body>
 </html>