Add a list of training options to create event page

app/controllers/admin/routes.py

@@ -181,13 +181,14 @@ def createEvent(templateid, programid):
             if cohort:
                 bonnerCohorts[year] = cohort
 
-
+    trainingEvents = Event.select().where(Event.isTraining == True).order_by(Event.name)        
     return render_template(f"/events/{template.templateFile}",
                            template = template,
                            eventData = eventData,
                            termList = selectSurroundingTerms(g.current_term, prevTerms=0),
                            requirements = requirements,
                            bonnerCohorts = bonnerCohorts,
+                           trainingEvents = trainingEvents,
                            isProgramManager = isProgramManager)
 
 
@@ -333,6 +334,7 @@ def eventDisplay(eventId):
 
     rule = request.url_rule
 
+    trainingEvents = Event.select().where(Event.isTraining == True).order_by(Event.name)
     # Event Edit
     if 'edit' in rule.rule:
         return render_template("events/createEvent.html",
@@ -344,6 +346,7 @@ def eventDisplay(eventId):
                                 invitedYears = invitedYears, 
                                 userHasRSVPed = userHasRSVPed,
                                 isProgramManager = isProgramManager,
+                                trainingEvents = trainingEvents, 
                                 filepaths = filepaths)
     # Event View
     else:

app/static/js/createEvents.js

@@ -818,6 +818,26 @@ function handleTimeFormatting(timeArray){
 
   setCharacterLimit($("#inputCharacters"), "#remainingCharacters"); 
 
+  // Handle "None Required" checkbox behavior
+  $('#noTrainingRequired').on('change', function() {
+    if ($(this).is(':checked')) {
+      // Uncheck all training checkboxes when "None Required" is selected
+      $('.training-checkbox').prop('checked', false);
+    }
+  });
+
+  // Handle training checkbox behavior
+  $('.training-checkbox').on('change', function() {
+    if ($(this).is(':checked')) {
+      // Uncheck "None Required" when any training is selected
+      $('#noTrainingRequired').prop('checked', false);
+    } else {
+      // If no training checkboxes are checked, check "None Required"
+      if ($('.training-checkbox:checked').length === 0) {
+        $('#noTrainingRequired').prop('checked', true);
+      }
+    }
+  });
 });
 
 

app/templates/events/createEvent.html

@@ -136,6 +136,42 @@ <h1 id="pageTitle">{{page_title}}</h1>
   </div>
 </div>
 
+<!--Required Training-->
+<div class="form-group mb-4">
+  <label class="form-label" for="requiredTraining"><strong>Required Training</strong></label>
+  <div class="border rounded p-3" style="max-height: 200px; overflow-y: auto;">
+    <div class="form-check">
+      <input class="form-check-input" type="checkbox" value="" id="noTrainingRequired" name="requiredTraining[]" 
+             {{"checked" if not eventData.requiredTraining or eventData.requiredTraining == ''}}>
+      <label class="form-check-label" for="noTrainingRequired">
+        <strong>None Required</strong>
+      </label>
+    </div>
+    {% if trainingEvents %}
+      <hr class="my-2">
+      {% set seen_names = {} %}
+      {% for training in trainingEvents %}
+        {% if training.name not in seen_names %}
+          {% set _ = seen_names.update({training.name: training.id}) %}
+          <div class="form-check">
+            <input class="form-check-input training-checkbox" type="checkbox" 
+                   value="{{training.id}}" 
+                   id="training_{{training.id}}" 
+                   name="requiredTraining[]"
+                   {{"checked" if eventData.requiredTraining and training.id|string in eventData.requiredTraining.split(',')}}>
+            <label class="form-check-label" for="training_{{training.id}}">
+              {{training.name}}
+            </label>
+          </div>
+        {% endif %}
+      {% endfor %}
+    {% else %}
+      <p class="text-muted mb-0"><em>No training events available</em></p>
+    {% endif %}
+  </div>
+  <small class="form-text text-muted">Select all trainings required before attending this event</small>
+</div>
+
 <p class="text-danger fw-bold" id="pastDateWarningText"> </p>  <!-- This is the text for the Event to show if it ended. The text will be filled out using JS function. -->
 
 {% endmacro %}