04/15 Updated Editing QR code page, QR code name is unchangeable

routes/qr_codes.py

@@ -454,9 +454,11 @@ def edit_qr_code(qr_id):
                 'back_color': getattr(qr_code, 'back_color', '#FFFFFF')
             }
 
-            # Update QR code fields
+            # QR code name is immutable after creation — always retain the existing value.
-            new_name = request.form['name']
+            # The name field in the edit form is rendered read-only; this guard ensures
-            qr_code.name = new_name
+            # the constraint is enforced even if the form is submitted programmatically.
+            new_name = qr_code.name  # do not accept name changes from the form
+            # qr_code.name is intentionally NOT reassigned here
 
             # --- ADDED: for dynamic QR codes, location/address are auto-managed ---
             new_qr_type = request.form.get('qr_type', 'standard')

templates/edit_qr_code.html

@@ -579,9 +579,17 @@
   }
 
   @keyframes pulse {
-    0% { transform: scale(1); }
+    0% {
-    50% { transform: scale(1.05); }
+      transform: scale(1);
-    100% { transform: scale(1); }
+    }
+
+    50% {
+      transform: scale(1.05);
+    }
+
+    100% {
+      transform: scale(1);
+    }
   }
 
   /* Toast notification styles */
@@ -629,24 +637,19 @@
           <div class="form-group">
             <label for="name">
               <i class="fas fa-tag"></i>
-              QR Code Name <span style="color: var(--error-color)">*</span>
+              QR Code Name
+              <span
+                style="margin-left: 0.4rem; font-size: 0.75rem; font-weight: 500; color: var(--gray-500); background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: 4px; padding: 0.1rem 0.4rem;">
+                <i class="fas fa-lock" style="font-size: 0.7rem;"></i> Read-only
+              </span>
             </label>
-            <input
+            <input type="text" id="name" name="name" readonly value="{{ qr_code.name }}"
-              type="text"
-              id="name"
-              name="name"
-              required
-              value="{{ qr_code.name }}"
               data-original="{{ qr_code.name }}"
-              placeholder="e.g., Main Office Entrance, Conference Room A"
+              style="background-color: var(--gray-100); color: var(--gray-600); cursor: not-allowed; border-color: var(--gray-300);" />
-              maxlength="100"
+            <small class="form-help">
-            />
+              <i class="fas fa-info-circle"></i>
-            <small class="form-help"
+              The QR code name cannot be changed after creation.
-              >A unique name to identify this QR code</small
+            </small>
-            >
-            <div class="character-counter">
-              <span id="nameCounter">{{ qr_code.name|length }}/100</span>
-            </div>
           </div>
 
           <!-- ===== ADDED: QR Code Type selector ===== -->
@@ -657,8 +660,10 @@
               <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="standard" {% if qr_code.qr_type !='dynamic' %}selected{% endif %}>Standard — Fixed Location
-              <option value="dynamic" {% if qr_code.qr_type == 'dynamic' %}selected{% endif %}>Dynamic — Employee Selects Location</option>
+              </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>
@@ -674,22 +679,15 @@
                 <i class="fas fa-map-marker-alt"></i>
                 Location Name <span style="color: var(--error-color)">*</span>
               </label>
-            <input
+              <input type="text" id="location" name="location" {% if qr_code.qr_type !='dynamic' %}required{% endif %}
-              type="text"
-              id="location"
-              name="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 }}"
+                data-original="{{ qr_code.location }}" placeholder="e.g., Corporate Headquarters, Branch Office"
-              placeholder="e.g., Corporate Headquarters, Branch Office"
+                maxlength="100" />
-              maxlength="100"
+              <small class="form-help">The name of the physical location where this QR code will be
-            />
+                used</small>
-            <small class="form-help"
-              >The name of the physical location where this QR code will be
-              used</small
-            >
               <div class="character-counter">
-              <span id="locationCounter">{{ qr_code.location|length if qr_code.qr_type != 'dynamic' else '0' }}/100</span>
+                <span id="locationCounter">{{ qr_code.location|length if qr_code.qr_type != 'dynamic' else '0'
+                  }}/100</span>
               </div>
             </div>
           </div><!-- end standardLocationNameGroup -->
@@ -699,7 +697,8 @@
               <i class="fas fa-folder"></i>
               Project (Optional)
             </label>
-            <select id="project_id" name="project_id" class="form-select" data-original="{{ qr_code.project_id or '' }}">
+            <select id="project_id" name="project_id" class="form-select"
+              data-original="{{ qr_code.project_id or '' }}">
               <option value="">Select a project (Optional)</option>
               {% for project in projects %}
               <option value="{{ project.id }}" {% if qr_code.project_id==project.id %}selected{% endif %}>
@@ -731,19 +730,12 @@
                 Complete Address
                 <span style="color: var(--error-color)">*</span>
               </label>
-            <textarea
+              <textarea id="location_address" name="location_address" required
-              id="location_address"
-              name="location_address"
-              required
                 data-original="{{ qr_code.location_address }}"
-              placeholder="Enter the full address including street, city, state, and ZIP code"
+                placeholder="Enter the full address including street, city, state, and ZIP code" rows="3"
-              rows="3"
+                maxlength="500">{{ qr_code.location_address }}</textarea>
-              maxlength="500"
+              <small class="form-help">Include all address details for accurate location
-            >{{ qr_code.location_address }}</textarea>
+                identification</small>
-            <small class="form-help"
-              >Include all address details for accurate location
-              identification</small
-            >
               <div class="character-counter">
                 <span id="addressCounter">{{ qr_code.location_address|length }}/500</span>
               </div>
@@ -780,20 +772,12 @@
                   </div>
 
                   <div class="coordinates-actions">
-                  <button
+                    <button type="button" class="btn-coordinate" id="geocodeBtn">
-                    type="button"
-                    class="btn-coordinate"
-                    id="geocodeBtn"
-                  >
                       <i class="fas fa-search-location"></i>
                       {% if qr_code.has_coordinates %}Update{% else %}Get{% endif %} Coordinates
                     </button>
-                  <button
+                    <button type="button" class="btn-coordinate" id="clearCoordinatesBtn"
-                    type="button"
+                      style="display: {% if qr_code.has_coordinates %}inline-flex{% else %}none{% endif %};">
-                    class="btn-coordinate"
-                    id="clearCoordinatesBtn"
-                    style="display: {% if qr_code.has_coordinates %}inline-flex{% else %}none{% endif %};"
-                  >
                       <i class="fas fa-times"></i>
                       Clear
                     </button>
@@ -815,20 +799,14 @@
               Event or Purpose
               <span style="color: var(--error-color)">*</span>
             </label>
-            <select
+            <select id="location_event" name="location_event" required class="form-control"
-              id="location_event"
+              data-original="{{ qr_code.location_event }}">
-              name="location_event"
-              required
-              class="form-control"
-              data-original="{{ qr_code.location_event }}"
-            >
               <option value="">Select Event Type</option>
               <option value="Check In" {% if qr_code.location_event=='Check In' %}selected{% endif %}>Check In</option>
-              <option value="Check Out" {% if qr_code.location_event == 'Check Out' %}selected{% endif %}>Check Out</option>
+              <option value="Check Out" {% if qr_code.location_event=='Check Out' %}selected{% endif %}>Check Out
+              </option>
             </select>
-            <small class="form-help"
+            <small class="form-help">Select the event type for this QR code</small>
-              >Select the event type for this QR code</small
-            >
           </div>
 
         </div>
@@ -852,13 +830,9 @@
             <select id="style_id" name="style_id" onchange="applyStylePreset()">
               <option value="">Custom Style</option>
               {% for style in styles %}
-              <option 
+              <option value="{{ style.id }}" {% if qr_code.style_id==style.id %}selected{% endif %}
-                value="{{ style.id }}" 
+                data-fill="{{ style.fill_color }}" data-back="{{ style.back_color }}"
-                {% if qr_code.style_id == style.id %}selected{% endif %}
+                data-box-size="{{ style.box_size }}" data-border="{{ style.border }}"
-                data-fill="{{ style.fill_color }}" 
-                data-back="{{ style.back_color }}"
-                data-box-size="{{ style.box_size }}"
-                data-border="{{ style.border }}"
                 data-error-correction="{{ style.error_correction }}">
                 {{ style.name }}
               </option>
@@ -875,21 +849,10 @@
                 QR Code Color
               </label>
               <div class="color-input-group">
-                <input 
+                <input type="color" id="fill_color" name="fill_color" value="{{ qr_code.fill_color or '#000000' }}"
-                  type="color" 
+                  onchange="updatePreview()" />
-                  id="fill_color" 
+                <input type="text" id="fill_color_text" value="{{ qr_code.fill_color or '#000000' }}"
-                  name="fill_color" 
+                  pattern="^#[0-9A-Fa-f]{6}$" placeholder="#000000" onchange="syncColorInput('fill')" />
-                  value="{{ qr_code.fill_color or '#000000' }}"
-                  onchange="updatePreview()"
-                />
-                <input 
-                  type="text" 
-                  id="fill_color_text" 
-                  value="{{ qr_code.fill_color or '#000000' }}" 
-                  pattern="^#[0-9A-Fa-f]{6}$"
-                  placeholder="#000000"
-                  onchange="syncColorInput('fill')"
-                />
               </div>
               <span class="form-help">Color of the QR code modules</span>
             </div>
@@ -900,21 +863,10 @@
                 Background Color
               </label>
               <div class="color-input-group">
-                <input 
+                <input type="color" id="back_color" name="back_color" value="{{ qr_code.back_color or '#FFFFFF' }}"
-                  type="color" 
+                  onchange="updatePreview()" />
-                  id="back_color" 
+                <input type="text" id="back_color_text" value="{{ qr_code.back_color or '#FFFFFF' }}"
-                  name="back_color" 
+                  pattern="^#[0-9A-Fa-f]{6}$" placeholder="#FFFFFF" onchange="syncColorInput('back')" />
-                  value="{{ qr_code.back_color or '#FFFFFF' }}"
-                  onchange="updatePreview()"
-                />
-                <input 
-                  type="text" 
-                  id="back_color_text" 
-                  value="{{ qr_code.back_color or '#FFFFFF' }}" 
-                  pattern="^#[0-9A-Fa-f]{6}$"
-                  placeholder="#FFFFFF"
-                  onchange="syncColorInput('back')"
-                />
               </div>
               <span class="form-help">Background color of the QR code</span>
             </div>
@@ -928,15 +880,8 @@
                 Module Size
               </label>
               <div class="range-input-group">
-                <input 
+                <input type="range" id="box_size" name="box_size" min="5" max="20" value="{{ qr_code.box_size or 10 }}"
-                  type="range" 
+                  oninput="updateRangeValue('box_size'); updatePreview()" />
-                  id="box_size" 
-                  name="box_size" 
-                  min="5" 
-                  max="20" 
-                  value="{{ qr_code.box_size or 10 }}"
-                  oninput="updateRangeValue('box_size'); updatePreview()"
-                />
                 <span class="range-value" id="box_size_value">{{ qr_code.box_size or 10 }}px</span>
               </div>
               <span class="form-help">Size of each QR code module (affects overall size)</span>
@@ -948,15 +893,8 @@
                 Border Size
               </label>
               <div class="range-input-group">
-                <input 
+                <input type="range" id="border" name="border" min="1" max="10" value="{{ qr_code.border or 4 }}"
-                  type="range" 
+                  oninput="updateRangeValue('border'); updatePreview()" />
-                  id="border" 
-                  name="border" 
-                  min="1" 
-                  max="10" 
-                  value="{{ qr_code.border or 4 }}"
-                  oninput="updateRangeValue('border'); updatePreview()"
-                />
                 <span class="range-value" id="border_value">{{ qr_code.border or 4 }} modules</span>
               </div>
               <span class="form-help">White border around the QR code</span>
@@ -972,7 +910,8 @@
             <select id="error_correction" name="error_correction" onchange="updatePreview()">
               <option value="L" {% if qr_code.error_correction=='L' %}selected{% endif %}>Low (7% recovery)</option>
               <option value="M" {% if qr_code.error_correction=='M' %}selected{% endif %}>Medium (15% recovery)</option>
-              <option value="Q" {% if qr_code.error_correction == 'Q' %}selected{% endif %}>Quartile (25% recovery)</option>
+              <option value="Q" {% if qr_code.error_correction=='Q' %}selected{% endif %}>Quartile (25% recovery)
+              </option>
               <option value="H" {% if qr_code.error_correction=='H' %}selected{% endif %}>High (30% recovery)</option>
             </select>
             <span class="form-help">Higher levels allow QR code to work even if partially damaged</span>
@@ -1008,24 +947,12 @@
         </div>
 
         <!-- Hidden coordinate fields for form submission -->
-        <input
+        <input type="hidden" id="address_latitude" name="address_latitude"
-          type="hidden"
+          value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% endif %}" />
-          id="address_latitude"
+        <input type="hidden" id="address_longitude" name="address_longitude"
-          name="address_latitude"
+          value="{% if qr_code.has_coordinates %}{{ qr_code.address_longitude }}{% endif %}" />
-          value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% endif %}"
+        <input type="hidden" id="coordinate_accuracy" name="coordinate_accuracy"
-        />
+          value="{% if qr_code.has_coordinates %}{{ qr_code.coordinate_accuracy }}{% endif %}" />
-        <input
-          type="hidden"
-          id="address_longitude"
-          name="address_longitude"
-          value="{% if qr_code.has_coordinates %}{{ qr_code.address_longitude }}{% endif %}"
-        />
-        <input
-          type="hidden"
-          id="coordinate_accuracy"
-          name="coordinate_accuracy"
-          value="{% if qr_code.has_coordinates %}{{ qr_code.coordinate_accuracy }}{% endif %}"
-        />
 
         <!-- Form Actions -->
         <div class="form-actions">
@@ -1110,9 +1037,11 @@
         <div class="detail-row">
           <strong>Colors:</strong>
           <span>
-            <span style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.fill_color or '#000000' }}; border-radius: 2px; margin-right: 4px;"></span>
+            <span
+              style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.fill_color or '#000000' }}; border-radius: 2px; margin-right: 4px;"></span>
             on
-            <span style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.back_color or '#FFFFFF' }}; border: 1px solid #ccc; border-radius: 2px; margin-left: 4px;"></span>
+            <span
+              style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.back_color or '#FFFFFF' }}; border: 1px solid #ccc; border-radius: 2px; margin-left: 4px;"></span>
           </span>
         </div>
       </div>
@@ -1420,10 +1349,6 @@
   // Initialize on page load
   document.addEventListener('DOMContentLoaded', function () {
     // Set up character counters
-    document.getElementById('name').addEventListener('input', () => {
-      updateCharacterCount('name', 'nameCounter', 100);
-      updateCurrentInfo();
-    });
     document.getElementById('location').addEventListener('input', () => {
       updateCharacterCount('location', 'locationCounter', 100);
       updateCurrentInfo();