05/11 Update: add contract selection when start an inspection

app/templates/inspections/start.html

@@ -17,9 +17,22 @@
             {% for e in form.template_id.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
           </div>
 
+          <div class="mb-3">
+            {{ form.project_id.label(class="form-label fw-semibold") }}
+            {{ form.project_id(class="form-select" + (" is-invalid" if form.project_id.errors else ""), id="projectSelect") }}
+            {% for e in form.project_id.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
+          </div>
+
           <div class="mb-3">
             {{ form.facility_id.label(class="form-label fw-semibold") }}
-            {{ form.facility_id(class="form-select", id="facilitySelect") }}
+            {{ form.facility_id(class="form-select" + (" is-invalid" if form.facility_id.errors else ""), id="facilitySelect") }}
+            {% for e in form.facility_id.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
+            <div id="facilitySpinner" class="form-text text-muted d-none">
+              <span class="spinner-border spinner-border-sm" role="status"></span> Loading facilities…
+            </div>
+            <div id="facilityEmpty" class="form-text text-warning d-none">
+              No active facilities found for this contract.
+            </div>
           </div>
 
           <div class="d-grid">
@@ -32,4 +45,61 @@
     </div>
   </div>
 </div>
-{% endblock %}
+
+<script>
+(function () {
+  const projectSel  = document.getElementById('projectSelect');
+  const facilitySel = document.getElementById('facilitySelect');
+  const spinner     = document.getElementById('facilitySpinner');
+  const emptyMsg    = document.getElementById('facilityEmpty');
+
+  function loadFacilities(projectId, selectedFacilityId) {
+    if (!projectId) return;
+    spinner.classList.remove('d-none');
+    emptyMsg.classList.add('d-none');
+    facilitySel.disabled = true;
+
+    fetch(`{{ url_for('inspections.facilities_for_project', project_id=0) }}`.replace('/0', '/' + projectId))
+      .then(r => r.json())
+      .then(data => {
+        facilitySel.innerHTML = '';
+        if (data.length === 0) {
+          emptyMsg.classList.remove('d-none');
+          facilitySel.innerHTML = '<option value="">— no facilities —</option>';
+        } else {
+          data.forEach(f => {
+            const opt = document.createElement('option');
+            opt.value = f.id;
+            opt.textContent = f.name;
+            if (selectedFacilityId && f.id === selectedFacilityId) opt.selected = true;
+            facilitySel.appendChild(opt);
+          });
+        }
+      })
+      .catch(() => {
+        facilitySel.innerHTML = '<option value="">— error loading facilities —</option>';
+      })
+      .finally(() => {
+        spinner.classList.add('d-none');
+        facilitySel.disabled = false;
+      });
+  }
+
+  projectSel.addEventListener('change', function () {
+    loadFacilities(this.value, null);
+  });
+
+  // On page load: if project already selected (e.g. validation error or reinspect),
+  // reload facility list preserving the currently selected facility value.
+  const initProject  = projectSel.value;
+  const initFacility = facilitySel.value ? parseInt(facilitySel.value, 10) : null;
+  if (initProject) {
+    // Only reload if facility list looks like a placeholder (no real numeric id in options)
+    const hasRealOptions = Array.from(facilitySel.options).some(o => parseInt(o.value, 10) > 0);
+    if (!hasRealOptions) {
+      loadFacilities(initProject, initFacility);
+    }
+  }
+})();
+</script>
+{% endblock %}