Skip to content

Commit

Permalink
Merge pull request #1296 from BCStudentSoftwareDevTeam/eventtoggles
Browse files Browse the repository at this point in the history 
Create Events Page: Split the toggle buttons into 2 sections, and make one of 3 toggles required
  • Loading branch information
@BrianRamsay
BrianRamsay committed Jul 25, 2024
2 parents b85faed + dc379b6 commit dff423f
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 25 deletions.
14 changes: 14 additions & 0 deletions app/static/css/createEvent.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.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
}
.columnDivide{
flex: 1;
border-left: 2px solid grey;
margin-left: 10px;
margin-right: -30px;
}
24 changes: 22 additions & 2 deletions app/static/js/createEvents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ($("#checkBonners")) {
$("#checkBonners").prop('checked', true);
}
}
// Initialize datepicker with proper options
$.datepicker.setDefaults({
dateFormat: 'yy/mm/dd', // Ensures compatibility across browsers
Expand Down Expand Up @@ -98,10 +104,24 @@ $(document).ready(function () {
$("#limitGroup").hide();
}
});
// Determine which checkbox was clicked and its current checked status, uncheck others
$("#checkIsTraining, #checkServiceHours, #checkBonners").on('click', function (event) {
$("#checkIsTraining, #checkServiceHours, #checkBonners").not($(event.target)).prop('checked', false);
});

// 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 () {
Expand Down
51 changes: 28 additions & 23 deletions app/templates/admin/createEvent.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -233,35 +231,42 @@ <h1>{{page_title}}</h1>
</div>
{% 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="row">
<div class="form-group col-xl-5">
<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>
</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 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>
<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>
<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="col-xl-1 columnDivide"></div>
<div class="form-group col-xl-6">
<label class="label required toggleHeader">(Must Select One)</label>
<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>
<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>
{% if eventData['program'].isBonnerScholars %}
<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>
{% endif %}
</div>
</div>
</div>
Expand Down

0 comments on commit dff423f

Please sign in to comment.