Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Jul 25, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
9eabe11
added headers for toggle section of create event
JohnCox2211 Jul 23, 2024
15d1b64
added additional css formatting, added bonners
JohnCox2211 Jul 23, 2024
f715399
You may only toggle one event in the must select
JohnCox2211 Jul 24, 2024
d2db38c
Shortened form submission toggle check code.
JohnCox2211 Jul 24, 2024
c1c2d2e
fixed code improperly displaying location on
JohnCox2211 Jul 24, 2024
cefdd44
added event class isbonners boolean field
JohnCox2211 Jul 24, 2024
52a7667
reformatted toggle headers to stay with their
JohnCox2211 Jul 24, 2024
db07472
the is bonners toggle will now auto toggle when
JohnCox2211 Jul 24, 2024
14759a9
working prototype. You can have a bonners event
JohnCox2211 Jul 24, 2024
ff441bc
toggles will now behave correctly between pages.
JohnCox2211 Jul 24, 2024
9304e7b
Fixed grammar (changed bonners to bonner), view
JohnCox2211 Jul 25, 2024
f640281
reformatting toggle switch code to allow only one
JohnCox2211 Jul 25, 2024
1b05967
Divide line is now formatted to disappear once the
JohnCox2211 Jul 25, 2024
1e5cca6
fixed line width, ready for new PR
JohnCox2211 Jul 25, 2024
8d8edd6
Merge branch 'development' into eventtoggles
BrianRamsay Jul 25, 2024
dc379b6
Made specified changes: col size now xl. Removed
JohnCox2211 Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions app/static/css/createEvent.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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