05/26 Add contract information to issues related pages

app/templates/issues/form.html

@@ -10,13 +10,34 @@
       <div class="card-body">
         <form method="post" enctype="multipart/form-data">
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-          {% for field in [form.facility_id, form.severity, form.description, form.photo, form.assigned_to] %}
+
+          {# Contract selector — UI only; narrows the facility list via AJAX #}
+          <div class="mb-3">
+            <label class="form-label fw-semibold" for="contract_select">Contract</label>
+            <select id="contract_select" class="form-select">
+              <option value="">— Select Contract —</option>
+              {% for p in projects %}
+              <option value="{{ p.id }}">{{ p.name }}</option>
+              {% endfor %}
+            </select>
+          </div>
+
+          {# Facility — populated by JS once a contract is chosen #}
+          <div class="mb-3">
+            {{ form.facility_id.label(class="form-label fw-semibold") }}
+            {{ form.facility_id(class="form-select", id="facility_id") }}
+            {% for e in form.facility_id.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
+          </div>
+
+          {# Remaining fields #}
+          {% for field in [form.severity, form.description, form.photo, form.assigned_to] %}
           <div class="mb-3">
             {{ field.label(class="form-label fw-semibold") }}
             {{ field(class="form-select" if field.type == 'SelectField' else "form-control", rows=4 if field.type == 'TextAreaField' else none) }}
             {% for e in field.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
           </div>
           {% endfor %}
+
           <div class="d-flex gap-2">
             <button type="submit" class="btn btn-danger">Log Issue</button>
             <a href="{{ url_for('issues.index') }}" class="btn btn-outline-secondary">Cancel</a>
@@ -27,3 +48,60 @@
   </div>
 </div>
 {% endblock %}
+
+{% block extra_js %}
+<script>
+(function () {
+  'use strict';
+  var contractSel   = document.getElementById('contract_select');
+  var facilitySel   = document.getElementById('facility_id');
+  var FACILITIES_URL = '{{ url_for("inspections.facilities_for_project", project_id=0) }}'.replace('/0', '/');
+
+  // Values injected from the route (non-null only after a POST validation error)
+  var preProjectId    = {{ selected_project_id | tojson }};
+  var preFacilityId   = {{ form.facility_id.data | tojson }};
+
+  function setPlaceholder() {
+    facilitySel.innerHTML = '<option value="">— Select a Contract first —</option>';
+    facilitySel.disabled  = true;
+  }
+
+  function loadFacilities(projectId, restoreFacilityId) {
+    facilitySel.disabled  = true;
+    facilitySel.innerHTML = '<option value="">Loading…</option>';
+    fetch(FACILITIES_URL + projectId)
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        facilitySel.innerHTML = '<option value="">— Select Facility —</option>';
+        data.forEach(function (f) {
+          var opt = document.createElement('option');
+          opt.value       = f.id;
+          opt.textContent = f.name;
+          if (restoreFacilityId && f.id === restoreFacilityId) { opt.selected = true; }
+          facilitySel.appendChild(opt);
+        });
+        facilitySel.disabled = false;
+      })
+      .catch(function () {
+        facilitySel.innerHTML = '<option value="">Could not load facilities</option>';
+      });
+  }
+
+  contractSel.addEventListener('change', function () {
+    if (this.value) {
+      loadFacilities(this.value, null);
+    } else {
+      setPlaceholder();
+    }
+  });
+
+  // Restore state after a POST validation error
+  if (preProjectId) {
+    contractSel.value = String(preProjectId);
+    loadFacilities(preProjectId, preFacilityId);
+  } else {
+    setPlaceholder();
+  }
+}());
+</script>
+{% endblock %}