Added assets and fixed the membership form

This commit is contained in:
2025-04-18 10:48:41 -05:00
parent b1e372ff9d
commit 636cf3d45d
4 changed files with 196 additions and 89 deletions

View File

@@ -4,7 +4,6 @@
} }
body { body {
padding-top: 56px;
} }
section { section {

View File

@@ -3,21 +3,42 @@
{% block pagetitle %} {% block pagetitle %}
<title>Stonehedge Community Homeowners Association</title> <title>Stonehedge Community Homeowners Association</title>
<style type="text/css">
.hero-section {
background: url({% static 'images/header.gif' %});
height: 60vh;
display: flex;
background-repeat:no-repeat;
background-position: center center;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<!-- Hero Section --> <!-- Hero Section -->
<section id="home" class="py-5 bg-success bg-opacity-10"> <section id="home" class="py-5 bg-success bg-opacity-10">
<div class="container py-5"> <div class="container py-5">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-lg-8 mb-4 mb-lg-0"> <div class="col-lg-8 mb-4 mb-lg-0">
<h1 class="display-4 fw-bold mb-3">Welcome to Stonehedge Community Homeowners Association</h1>
<h1 class="display-4 fw-bold mb-3">Welcome to Stonehedge Community Homeowners Association</h1>
<p class="lead mb-4">A premier community dedicated to maintaining beautiful homes, safe neighborhoods, and a high quality of life for all residents.</p> <p class="lead mb-4">A premier community dedicated to maintaining beautiful homes, safe neighborhoods, and a high quality of life for all residents.</p>
<a href="{% url 'about_us2' %}" class="btn btn-success btn-lg px-4">Learn More</a> <a href="{% url 'about_us2' %}" class="btn btn-success btn-lg px-4">Learn More</a>
</div>
<div class="col-lg-4"> </div>
<img src='{% static "images/bricks.jpg" %}' alt="Stonehedge Community Homeowners Association" class="img-fluid rounded-circle shadow">
</div>
<!-- <div class="col-lg-4">
<img src="{% static 'images/header.gif' %}" alt="Stonehedge Community Homeowners Association" class="img-fluid rounded-circle shadow">
</div> -->
</div> </div>
</div> </div>
</section> </section>

View File

@@ -74,7 +74,8 @@
<h2 class="h4 mb-0">New Member Information</h2> <h2 class="h4 mb-0">New Member Information</h2>
</div> </div>
<div class="card-body"> <div class="card-body">
<form id="membershipForm" class="needs-validation" novalidate> <form id="membershipForm" method="POST" action='{% url "membership_form2" %}' class="needs-validation" novalidate>
{% csrf_token %}
<!-- Household Information --> <!-- Household Information -->
<fieldset class="mb-4"> <fieldset class="mb-4">
<legend class="h5 text-success border-bottom pb-2">Household Information</legend> <legend class="h5 text-success border-bottom pb-2">Household Information</legend>
@@ -83,30 +84,27 @@
<div class="row g-3 mb-4"> <div class="row g-3 mb-4">
<div class="col-md-6"> <div class="col-md-6">
<label for="streetAddress" class="form-label">Street Address*</label> <label for="streetAddress" class="form-label">Street Address*</label>
<input type="text" class="form-control" id="streetAddress" required> <input type="text" class="form-control" id="streetAddress" name="streetAddress" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide your street address. Please provide your street address.
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="unit" class="form-label">Unit/Apt #</label> <label for="unit" class="form-label">Unit/Apt #</label>
<input type="text" class="form-control" id="unit"> <input type="text" class="form-control" id="unit" name="unit">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label for="city" class="form-label">City*</label> <label for="city" class="form-label">City*</label>
<input type="text" class="form-control" id="city" required> <input type="text" class="form-control" id="city" name="city" value="Wheaton" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide your city. Please provide your city.
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label for="state" class="form-label">State*</label> <label for="state" class="form-label">State*</label>
<select class="form-select" id="state" required> <select class="form-select" id="state" name="state" value="Illinois" required>
<option value="" selected disabled>Choose...</option> <option value="" selected disabled>Choose...</option>
<option>Alabama</option> <option>IL</option>
<option>Alaska</option>
<!-- Add all states -->
<option>Wyoming</option>
</select> </select>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please select your state. Please select your state.
@@ -114,7 +112,7 @@
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label for="zipCode" class="form-label">ZIP Code*</label> <label for="zipCode" class="form-label">ZIP Code*</label>
<input type="text" class="form-control" id="zipCode" required> <input type="text" class="form-control" id="zipCode" value="zipCode" value="60189" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide your ZIP code. Please provide your ZIP code.
</div> </div>
@@ -128,28 +126,28 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="firstName1" class="form-label">First Name*</label> <label for="firstName1" class="form-label">First Name*</label>
<input type="text" class="form-control" id="firstName1" required> <input type="text" class="form-control" id="firstName1" name="firstName1" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide first name. Please provide first name.
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="lastName1" class="form-label">Last Name*</label> <label for="lastName1" class="form-label">Last Name*</label>
<input type="text" class="form-control" id="lastName1" required> <input type="text" class="form-control" id="lastName1" name="lastName1" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide last name. Please provide last name.
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="email1" class="form-label">Email*</label> <label for="email1" class="form-label">Email*</label>
<input type="email" class="form-control" id="email1" required> <input type="email" class="form-control" id="email1" name="email1" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid email. Please provide a valid email.
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="phone1" class="form-label">Phone*</label> <label for="phone1" class="form-label">Phone*</label>
<input type="tel" class="form-control" id="phone1" required> <input type="tel" class="form-control" id="phone1" name="phone1" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide phone number. Please provide phone number.
</div> </div>
@@ -174,19 +172,19 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="firstName2" class="form-label">First Name</label> <label for="firstName2" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName2"> <input type="text" class="form-control" id="firstName2" name="firstName2">
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="lastName2" class="form-label">Last Name</label> <label for="lastName2" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName2"> <input type="text" class="form-control" id="lastName2" name="lastName2">
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="email2" class="form-label">Email</label> <label for="email2" class="form-label">Email</label>
<input type="email" class="form-control" id="email2"> <input type="email" class="form-control" id="email2" name="email2">
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="phone2" class="form-label">Phone</label> <label for="phone2" class="form-label">Phone</label>
<input type="tel" class="form-control" id="phone2"> <input type="tel" class="form-control" id="phone2" name="phone2">
</div> </div>
</div> </div>
</fieldset> </fieldset>
@@ -199,50 +197,82 @@
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="form-check mb-2"> <div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="socialCommittee"> <input class="form-check-input" type="checkbox" id="block_captain" for="block_captain" name="block_captain">
<label class="form-check-label" for="socialCommittee"> <label class="form-check-label" id="block_captain">
Social & Events Committee BlockCaptain
</label> </label>
</div> </div>
<div class="form-check mb-2"> <div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="landscapeCommittee"> <input class="form-check-input" type="checkbox" id="coordinator" for="coordinator" name="coordinator">
<label class="form-check-label" for="landscapeCommittee"> <label class="form-check-label" id="coordinator">
Landscape & Maintenance Committee Coordinator
</label> </label>
</div> </div>
<div class="form-check mb-2"> <div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="safetyCommittee"> <input class="form-check-input" type="checkbox" id="egg_hunt" for="egg_hunt" name="egg_hunt">
<label class="form-check-label" for="safetyCommittee"> <label class="form-check-label" id="egg_hunt">
Safety & Neighborhood Watch Easter Egg Hunt
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="spring_garage_sale" for="spring_garage_sale" name="spring_garage_sale">
<label class="form-check-label" id="spring_garage_sale">
Spring Garage Sale
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="golf_outing" for="golf_outing" name="golf_outing">
<label class="form-check-label" id="golf_outing">
Golf Outing
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="ice_cream_social" for="ice_cream_social" name="ice_cream_social">
<label class="form-check-label" id="ice_cream_social">
Ice Creame Social
</label> </label>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-check mb-2"> <div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="architecturalCommittee"> <input class="form-check-input" type="checkbox" id="fall_garage_sale" for="fall_garage_sale" name="fall_garage_sale">
<label class="form-check-label" for="architecturalCommittee"> <label class="form-check-label" id="fall_garage_sale">
Architectural Review Committee Fall Garage Sale
</label> </label>
</div> </div>
<div class="form-check mb-2"> <div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="communicationsCommittee"> <input class="form-check-input" type="checkbox" id="halloween_party" for="halloween_party" name="halloween_party">
<label class="form-check-label" for="communicationsCommittee"> <label class="form-check-label" id="halloween_party">
Communications Committee Halloween Party
</label> </label>
</div> </div>
<div class="form-check mb-2"> <div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="welcomingCommittee"> <input class="form-check-input" type="checkbox" id="santa_visit" for="santa_visit" name="santa_visit">
<label class="form-check-label" for="welcomingCommittee"> <label class="form-check-label" id="santa_visit">
Welcoming Committee Santa Visits
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="civic_affair" for="civic_affair" name="civic_affair">
<label class="form-check-label" id="civic_affair">
Civic Affairs Journalist
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="phone_directory" for="phone_directory" name="phone_directory">
<label class="form-check-label" id="phone_directory">
Annual Phone Director
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="no_preference" for="no_preference" name="no_preference">
<label class="form-check-label" id="no_preference">
No Preference
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<div class="mt-3">
<label for="otherCommitteeInterest" class="form-label">Other interests or skills you'd like to contribute:</label>
<textarea class="form-control" id="otherCommitteeInterest" rows="2"></textarea>
</div>
</fieldset> </fieldset>
<!-- Services Section --> <!-- Services Section -->
@@ -253,44 +283,54 @@
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="form-check mb-2"> <div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="babysitting"> <input class="form-check-input" type="checkbox" id="babysitting" for="babysitting" name="babysitting">
<label class="form-check-label" for="babysitting"> <label class="form-check-label" for="babysitting">
Babysitting Babysitting
</label> </label>
</div> </div>
<div class="form-check mb-2"> <div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="lawnMowing"> <input class="form-check-input" type="checkbox" id="lawn_mowing" for="lawn_mowing" name="lawn_mowing">
<label class="form-check-label" for="lawnMowing"> <label class="form-check-label" for="lawn_mowing">
Lawn Mowing Lawn Mowing
</label> </label>
</div> </div>
<div class="form-check mb-2"> <div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="snowShoveling"> <input class="form-check-input" type="checkbox" id="snow_shoveling" for="snow_shoveling" name="snow_shoveling">
<label class="form-check-label" for="snowShoveling"> <label class="form-check-label" for="snow_shoveling">
Snow Shoveling Snow Shoveling
</label> </label>
</div> </div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="leaf_raking" for="leaf_raking" name="leaf_raking">
<label class="form-check-label" for="leaf_raking">
Lead Raking
</label>
</div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-check mb-2"> <div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="houseSitting"> <input class="form-check-input" type="checkbox" id="house_sitting" for="house_sitting" name="house_sitting">
<label class="form-check-label" for="houseSitting"> <label class="form-check-label" for="house_sitting">
House Sitting House Sitting
</label> </label>
</div> </div>
<div class="form-check mb-2"> <div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="petCare"> <input class="form-check-input" type="checkbox" id="petsitting" for="petsitting" name="petsitting">
<label class="form-check-label" for="petCare"> <label class="form-check-label" for="petsitting">
Pet Care Pet Sitting
</label> </label>
</div> </div>
<div class="form-check mb-2"> <div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="otherService"> <input class="form-check-input" type="checkbox" id="other" for="other" name="other">
<label class="form-check-label" for="otherService"> <label class="form-check-label" for="other">
Other (please specify) Other (please specify)
</label> </label>
</div> </div>
</div> </div>
<div class="mt-3">
<label for="other_desc" class="form-label">Other interests or skills you'd like to contribute:</label>
<textarea class="form-control" id="other_desc" for="other_desc" name="other_desc" rows="2"></textarea>
</div>
</div> </div>
<div class="mt-3" id="otherServiceSpecify" style="display: none;"> <div class="mt-3" id="otherServiceSpecify" style="display: none;">
@@ -313,6 +353,9 @@
</div> </div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end"> <div class="d-grid gap-2 d-md-flex justify-content-md-end">
{% if captchaForm %}
{{ captchaForm }}
{% endif %}
<button class="btn btn-outline-secondary me-md-2" type="reset">Reset Form</button> <button class="btn btn-outline-secondary me-md-2" type="reset">Reset Form</button>
<button class="btn btn-success" type="submit">Submit Membership</button> <button class="btn btn-success" type="submit">Submit Membership</button>
</div> </div>

View File

@@ -1,5 +1,5 @@
from django.shortcuts import render, redirect from django.shortcuts import render, redirect
from .models import UsefulLinks, CalendarEvent, MembershipPerson, Payments, SCHAOfficer from .models import UsefulLinks, CalendarEvent, MembershipPerson, Payments, SCHAOfficer, Membership
from .forms import ( from .forms import (
ChildrenForm, ChildrenForm,
AddressForm, AddressForm,
@@ -168,6 +168,8 @@ def dues2(request):
def membership_form2(request): def membership_form2(request):
print(request)
print(request.POST)
def sanitize_phone_number(data): def sanitize_phone_number(data):
if len(data) > 0: if len(data) > 0:
data = data.replace("-", "") data = data.replace("-", "")
@@ -178,40 +180,84 @@ def membership_form2(request):
if request.method == "POST": if request.method == "POST":
# before we pass in the data we want to sanitize the phone numbers # before we pass in the data we want to sanitize the phone numbers
post_data = request.POST.copy() address_data = {
post_data.update( "address_1": request.POST.get("streetAddress", ""),
{ "address_2": request.POST.get("unit", ""),
"person1-phone_number": sanitize_phone_number( "city": request.POST.get("city", "60189"),
post_data["person1-phone_number"] "state": request.POST.get("state", "IL"),
) "zip_code": request.POST.get("zipCode", "60189"),
} }
) print(address_data)
post_data.update( addressForm = AddressForm(address_data)
{ print(f"is addressForm valid: {addressForm.is_valid()}")
"person2-phone_number": sanitize_phone_number( if not addressForm.is_valid():
post_data["person2-phone_number"] print(f"addressForm Errors: {addressForm.errors}")
)
} services_data = {
) "babysitting": True if request.POST.get("babysitting", "") == "on" else False,
membershipForm = ChildrenForm(post_data) "lawn_mowing": True if request.POST.get("lawn_mowing", "") == "on" else False,
addressForm = AddressForm(post_data) "snow_shoveling": True if request.POST.get("snow_shoveling", "") == "on" else False,
peopleForm1 = PeopleForm(post_data, prefix="person1") "leaf_raking": True if request.POST.get("leaf_raking", "") == "on" else False,
peopleForm2 = PeopleForm(post_data, prefix="person2") "petsitting": True if request.POST.get("petsitting", "") == "on" else False,
servicesForm = ServicesForm(post_data) "house_sitting": True if request.POST.get("house_sitting", "") == "on" else False,
committeeForm = CommitteeForm(post_data) "other": True if request.POST.get("other", "") == "on" else False,
"other_desc": True if request.POST.get("other_desc", "") == "on" else False,
}
committee_data = {
"block_captain": True if request.POST.get("block_captain", "") == "on" else False,
"coordinator": True if request.POST.get("coordinator", "") == "on" else False,
"egg_hunt": True if request.POST.get("egg_hunt", "") == "on" else False,
"spring_garage_sale": True if request.POST.get("spring_garage_sale", "") == "on" else False,
"golf_outing": True if request.POST.get("golf_outing", "") == "on" else False,
"ice_cream_social": True if request.POST.get("ice_cream_social", "") == "on" else False,
"fall_garage_sale": True if request.POST.get("fall_garage_sale", "") == "on" else False,
"halloween_party": True if request.POST.get("halloween_party", "") == "on" else False,
"santa_visit": True if request.POST.get("santa_visit", "") == "on" else False,
"website": True if request.POST.get("website", "") == "on" else False,
"civic_affair": True if request.POST.get("civic_affair", "") == "on" else False,
"phone_directory": True if request.POST.get("phone_directory", "") == "on" else False,
"no_preference": True if request.POST.get("no_preference", "") == "on" else False,
}
servicesForm = ServicesForm(services_data)
committeeForm = CommitteeForm(committee_data)
person1_data = {
"first_name": request.POST.get("firstName1"),
"last_name": request.POST.get("lastName1"),
"email": request.POST.get("email1"),
"phone_number": sanitize_phone_number(request.POST.get("phone1")),
}
person2_data = {
"frist_name": request.POST.get("firstName2"),
"last_name": request.POST.get("lastName2"),
"email": request.POST.get("email2"),
"phone_number": sanitize_phone_number(request.POST.get("phone2")),
}
peopleForm1 = PeopleForm(person1_data)
peopleForm2 = PeopleForm(person2_data)
print(peopleForm1)
breakpoint()
for form in [addressForm, servicesForm, committeeForm, peopleForm1, peopleForm2]:
print(f"is form valid: {form.is_valid()}")
if not form.is_valid():
print(f"form Errors: {form.errors}")
# captchaForm = CaptchaForm(post_data) # captchaForm = CaptchaForm(post_data)
if ( if (
membershipForm.is_valid() addressForm.is_valid()
and addressForm.is_valid()
and committeeForm.is_valid() and committeeForm.is_valid()
and (peopleForm1.is_valid() or peopleForm2.is_valid()) and (peopleForm1.is_valid() or peopleForm2.is_valid())
and servicesForm.is_valid() and servicesForm.is_valid()
): # and captchaForm.is_valid(): ): # and captchaForm.is_valid():
with transaction.atomic(): with transaction.atomic():
membershipForm = ChildrenForm({**post_data}) membership = Membership.objects.create()
membership = membershipForm.save(commit=False)
membership.save()
if peopleForm1.is_valid(): if peopleForm1.is_valid():
people1_obj = peopleForm1.save(commit=False) people1_obj = peopleForm1.save(commit=False)
@@ -235,14 +281,13 @@ def membership_form2(request):
address_obj.membership = membership address_obj.membership = membership
address_obj.save() address_obj.save()
return redirect("index") return redirect("index2")
else: else:
return render( return render(
request, request,
"schasite/membership_form2.html", "schasite/membership_form2.html",
{ {
"membershipForm": ChildrenForm,
"peopleForm1": peopleForm1, "peopleForm1": peopleForm1,
"peopleForm2": peopleForm2, "peopleForm2": peopleForm2,
"addressForm": addressForm, "addressForm": addressForm,
@@ -256,7 +301,6 @@ def membership_form2(request):
request, request,
"schasite/membership_form2.html", "schasite/membership_form2.html",
{ {
"membershipForm": ChildrenForm(),
"peopleForm1": PeopleForm(prefix="person1"), "peopleForm1": PeopleForm(prefix="person1"),
"peopleForm2": PeopleForm(prefix="person2"), "peopleForm2": PeopleForm(prefix="person2"),
"committeeForm": CommitteeForm(), "committeeForm": CommitteeForm(),