Create Events Page: Split the toggle buttons into 2 sections, and make one of 3 toggles required

app/static/css/createEvent.css

@@ -0,0 +1,16 @@
+.columnDivide{
+    flex: 1;
+    border-left: 2px solid grey;
+    padding-left: 25px;
+}
+.toggleHeader{
+    padding-bottom: 10px;
+    font-weight: bold;  
+    text-align: center;
+    margin-left: 50%; /* Position the header at 50% of the viewport width */
+    transform: translateX(-50%);  
+    width: 200px
+}
+.wideText{
+    width: 250px;
+}

app/static/js/createEvents.js

@@ -59,6 +59,12 @@ function calculateRecurringEventFrequency(){
   }
 
 $(document).ready(function () {
+  //makes sure bonners toggle will stay on between event pages
+  if (window.location.pathname == '/event/' + $('#newEventID').val() + '/edit') {
+    if (!$("#checkIsTraining").is(":checked") && !$("#checkServiceHours").is(":checked")){
+      $("#checkBonners").prop('checked', true);
+    }
+  }
   // Initialize datepicker with proper options
   $.datepicker.setDefaults({
     dateFormat: 'yy/mm/dd', // Ensures compatibility across browsers
@@ -98,10 +104,32 @@ $(document).ready(function () {
       $("#limitGroup").hide();
     }
   });
+  //Ensure only one toggle will be selected in the select one section
+  $("#checkIsTraining, #checkServiceHours, #checkBonners").on('click', function (event) {
+    let trainingStatus = $("#checkIsTraining").is(":checked")
+    let serviceHourStatus = $("#checkServiceHours").is(":checked")
+    let bonnersStatus = $("#checkBonners").is(":checked")
+
+    if (trainingStatus && serviceHourStatus || serviceHourStatus && bonnersStatus || trainingStatus && bonnersStatus){
+      msgFlash("You may only toggle one selection from event is a training, event earns service hours, or is a Bonners Scholars event!", "danger");
+      $(event.target).prop('checked', false);
+      return;
+    }
+  });
 
-  // Disable button when we are ready to submit
   $("#saveEvent").on('submit', function (event) {
-    $(this).find("input[type=submit]").prop("disabled", true);
+    let trainingStatus = $("#checkIsTraining").is(":checked")
+    let serviceHourStatus = $("#checkServiceHours").is(":checked")
+    let bonnersStatus = $("#checkBonners").is(":checked")
+    //check if user has selected a toggle, cancel form submission if not
+    if(trainingStatus || serviceHourStatus || bonnersStatus){
+      // Disable button when we are ready to submit
+      $(this).find("input[type=submit]").prop("disabled", true);
+    }
+    else {
+      msgFlash("You must toggle event is a training, event earns service hours, or is a Bonners Scholars event!", "danger");
+      event.preventDefault();
+    } 
   });
 
   $("#checkIsRecurring").click(function () {

app/templates/admin/createEvent.html

@@ -37,6 +37,7 @@
 {% block styles %}
     {{super()}}
     <link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
+    <link rel="stylesheet" href="/static/css/createEvent.css">
 {% endblock %}
 
 {% block app_content %}
@@ -59,10 +60,7 @@ <h1>{{page_title}}</h1>
 
     <div class="form-group mb-4">
       <label class="required form-label" for='inputEventLocation-{{pageLocation}}'><strong>Location</strong></label>
-      <input class="form-control" id='inputEventLocation-{{pageLocation}}' placeholder="Enter location" name="location" required>
-        {% if eventData.location %}
-          value="{{eventData.location}}"
-        {% endif %}
+      <input class="form-control" id='inputEventLocation-{{pageLocation}}' placeholder="Enter location" name="location" value="{{eventData.location}}" required>
     </div>
     <!-- Start and End Datepickers -->
     <div class="row col-md-12">
@@ -134,7 +132,7 @@ <h1>{{page_title}}</h1>
     <div class="row p-2">
         <div class="col-md-6">
             {% if eventData.id %}
-                <input type="hidden" name="id" value="{{eventData.id}}">
+                <input type="hidden" id="newEventID" name="id" value="{{eventData.id}}">
             {% endif %}
         <div class="form-group mb-4">
           <label class="required form-label" for='inputEventName'><strong>Event Name</strong></label>
@@ -234,34 +232,42 @@ <h1>{{page_title}}</h1>
             {% if page_title != 'Create All Volunteer Training' %}
             <div class="pt-4 mb-4">
               <div class="row col-md-12">
-                <div class="form-group col-md-6">
+                <div class="form-group col-md-6 wideText">
+                  <label class="label toggleHeader">(Optional)</label>
                   <div class="form-check form-switch mb-2">
                     <label class="custom-control-label" for='checkRSVP'><strong>This event requires RSVP.</strong></label>
                     <input class="form-check-input" type="checkbox" id="checkRSVP" name="isRsvpRequired" {{"checked" if eventData.isRsvpRequired}}/>
                   </div>
-                </div>
-                <div class="form-group col-md-6">
-                  <div class="form-check form-switch ">
-                    <label class="custom-control-label" for="checkIsTraining"><strong>This event is a training.</strong></label>
-                    <input class="form-check-input" type="checkbox" id="checkIsTraining" name="isTraining" {{"checked" if eventData.isTraining}}/>
+                  <div class="form-group col-md-6 mb-3 wideText">
+                    <div class="form-check form-switch">
+                      {% set hide = "" if eventData.isRsvpRequired else "display: none" %}
+                      <div class="form-group" id="limitGroup" style= "{{hide}}">
+                        <label class="form-label mt-2" for='limitRsvp'><strong>Attendance Limit</strong></label>
+                        <input class="form-control mb-2" type="number" id="limitRsvp" name="rsvpLimit" value="{{eventData.rsvpLimit}}" min="0" placeholder="No Limit" pattern="^[0-9]+$"></input>
+                      </div>
+                      <label class="custom-control-label" for="checkFood"><strong>This event will provide food.</strong></label>
+                      <input class="form-check-input" type="checkbox" id="checkFood" name="isFoodProvided" {{"checked" if eventData.isFoodProvided}}/>
+                    </div>
                   </div>
                 </div>
-                <div class="form-group col-md-6 mb-3">
-                  <div class="form-check form-switch">
-                    {% set hide = "" if eventData.isRsvpRequired else "display: none" %}
-                    <div class="form-group" id="limitGroup" style= "{{hide}}">
-                      <label class="form-label mt-2" for='limitRsvp'><strong>Attendance Limit</strong></label>
-                      <input class="form-control mb-2" type="number" id="limitRsvp" name="rsvpLimit" value="{{eventData.rsvpLimit}}" min="0" placeholder="No Limit" pattern="^[0-9]+$"></input>
+                <div class="form-group col-md-6 columnDivide">
+                  <label class="label required toggleHeader">(Must Select One)</label>
+                  <div class="form-group col-md-6 wideText">
+                    <div class="form-check form-switch">
+                      <label class="custom-control-label" for="checkIsTraining"><strong>This event is a training.</strong></label>
+                      <input class="form-check-input" type="checkbox" id="checkIsTraining" name="isTraining" {{"checked" if eventData.isTraining}}/>
                     </div>
-                    <label class="custom-control-label" for="checkFood"><strong>This event will provide food.</strong></label>
-                    <input class="form-check-input" type="checkbox" id="checkFood" name="isFoodProvided" {{"checked" if eventData.isFoodProvided}}/>
                   </div>
-                </div>
-                <div class="form-group col-md-6">
                   <div class="form-check form-switch">
                     <label class="custom-control-label" for='checkServiceHours'><strong>This event earns service hours.</strong></label>
                     <input class="form-check-input" type="checkbox" id="checkServiceHours" name="isService" {{"checked" if eventData.isService}}/>
                   </div>
+                  <div class="form-group col-md-6 wideText">
+                    <div class="form-check form-switch">
+                      <label class="custom-control-label" for='checkBonners'><strong>This is a Bonner Scholars event.</strong></label>
+                      <input class="form-check-input" type="checkbox" id="checkBonners" name="isBonnersChecked" {{"checked" if eventData['program'].isBonnerScholars and not eventData.isService and not eventData.isTraining}}/> 
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>

app/templates/eventView.html

@@ -117,6 +117,12 @@ <h3>Description</h3><p>{{eventData.description|urlize}}</p><br>
                         <p>This event is a training.</p>
                     {% endif %}
 
+                    {% if not eventData.isTraining and not eventData.isService or eventData['program'].isBonnerScholars %}
+                        <p>This is a Bonner Scholars event.</p>
+                    {% else %}
+                        <p>This is not a Bonner Scholars event.</p>
+                    {% endif %}
+
                     {% if eventData['certRequirement'] %}
                         <p>This event satisfies the {{eventData['certRequirement'].name}} requirement for the Bonner program.</p>
                     {% endif %}