document.addEventListener('DOMContentLoaded', function() {//When user clicks add Household Button ("(+)" BUTTON in center )
const addHouseholdBtn = document.getElementById('addHousehold');
const popup_prompt_menu = document.getElementById('add-household-prompt');
const householdForm = document.getElementById('add-household-form');
const addDriverFormBackBtn = document.getElementById('add-driver-cancel-btn');
const addDriverForm = document.getElementById('add-driver-form-form');
const addDriverFormBorder = document.getElementById('add-driver-form');
addDriverForm.style.display = "none";
popup_prompt_menu.style.display = "none";
householdForm.style.display = "none";
addHouseholdBtn.addEventListener('click', (event) => {
event.stopPropagation(); // Prevent the click event from propagating to the document
popup_prompt_menu.style.display = popup_prompt_menu.style.display === 'block' ? 'none' : 'block';
});
//When User clicks submit button in add-household-prompt
const submitPrompt = document.getElementById('submit-prompt');
const driverCheckBox = document.getElementById('add_driver');
const householdCheckBox = document.getElementById('add_household');
const vehicleCheckBox = document.getElementById('add_vehicle');
const policyCheckBox = document.getElementById('add_policy');
const editHousehold = document.getElementById('edit_household');
const errorMessage = document.getElementById('error-message');
//Submit's the prompt that is displayed when clicking the addhousehold button
submitPrompt.addEventListener('click', (event) => {
if (driverCheckBox.checked && householdCheckBox.checked && vehicleCheckBox.checked && policyCheckBox.checked) {
errorMessage.style.display = 'none';
popup_prompt_menu.style.display = "none";
householdForm.style.display = 'block'; // Show the form when all checkboxes are checked
} else if (!editHousehold.checked) {
errorMessage.innerText = "Error: Each entry must have driver, household, vehicle and a policy! ";
errorMessage.style.display = 'block';
errorMessage.style.color = 'red';
} else if (editHousehold.checked) {
errorMessage.style.display = 'none';
popup_prompt_menu.style.display = "none";
householdForm.style.display = 'none'; // Hide the form if only editHousehold is checked
}
});
//Returns back to the prompt from the add household form
const backToPrompt = document.getElementById('back-to-prompt');
backToPrompt.addEventListener('click', (event) => {
householdForm.style.display = "none";
popup_prompt_menu.style.display = "block";
})
// For back button when prompt is activated
const backToMain = document.getElementById('back-to-main');
backToMain.addEventListener('click', (event) => {
householdForm.style.display = "none";
popup_prompt_menu.style.display = "none";
})
});
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
margin: 0px;
padding: 0px;
font-family: roboto;
}
date-wrapper input[type="date"] {
/* Optional: Reset default input styles */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* Optional: Add any additional styling */
/* Add padding, border, etc. */
}
.household-info {
text-align: center;
}
.customer-card {
padding: 50px;
}
.form-wrapper {
display: flex;
padding: 20px;
}
.first-half-customers {
display: flex;
justify-content: space-between;
}
.second-half-customers {
display: flex;
justify-content: space-between;
}
.main-container {
margin: 20px;
background-color: #f0f0f0;
;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.date-wrapper {
display: flex;
justify-content: center;
margin-top: 0px;
}
.left-labels {
display: flex;
flex-direction: column;
margin-right: 20px;
margin-top: 30px;
margin-left: 10px;
}
input {
margin-top: 4.5px;
}
p {
margin-top: 5px;
font-size: 16px;
}
label {
padding-bottom: 2px;
padding-top: 1.2px;
font-size: 16px;
font-weight: bold;
}
.control {
display: flex;
align-items: center;
flex-direction: column;
}
#next {
margin-top: 150px;
}
#add-household-prompt {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: white;
}
.pop-up-menu-border {
padding: 50px;
display: flex;
flex-direction: column;
gap: 10px;
width: 200px;
font-size: 15px;
}
#submit-prompt {
text-align: center;
background-color: #13AA52;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
color: white;
padding: 2px;
border-radius: 10px;
font-size: 15px;
}
#submit-prompt:hover {
background-color: #40aa6c;
}
.add-household-form {
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 10px;
font-size: 18px;
}
.add-household-form-border {
padding: 40px;
}
.add-household-form-inputs {
width: 100%;
border-radius: 10px;
outline: none;
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
font-size: 17px;
}
#submit-form-btn {
margin-top: 10px;
width: 100%;
height: 30px;
background-color: #13AA52;
color: white;
border-radius: 17px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
#back-to-prompt {
margin-top: 10px;
background-color: black;
color: white;
width: 100%;
height: 30px;
border-radius: 17px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
#back-to-main {
text-align: center;
background-color: black;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
color: white;
padding: 3px;
border-radius: 10px;
font-size: 15px;
}
.householdControl-container {
padding: 10px;
margin: 20px;
background-color: #f0f0f0;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.add-driver-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
.add-driver-form-border {
padding: 20px;
}
.section-d {
display: flex;
flex-direction: column;
}
.add-driver-form-labels,
.add-driver-inputs {
display: inline-block;
}
#add-driver-submit-btn {
background-color: #13AA52;
width: 50px;
margin-left: 50px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
color: white;
}
#add-driver-cancel-btn {
display: block;
background-color: black;
width: 50px;
margin-left: 50px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheets/center.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<script src="javascripts/slider-function.js" defer></script>
</head>
<div class="main-container">
<div class="household-info">
<h1> Household Information</h1>
<div class="form-wrapper">
<div class = 'first-half-customers'>
<% selectedHouseholdCustomers.slice(0, 5).forEach(customer => { %>
<%- include('customer-card', { customer: customer }) %>
<% }); %>
</div>
<div class ='second-half-customers'>
<% selectedHouseholdCustomers.slice(5, 10).forEach(customer => { %>
<%- include('customer-card', { customer: customer }) %>
<% }); %>
</div>
<div class="control">
<span class="material-symbols-outlined" id="addHousehold">add_circle</span>
<span class="material-symbols-outlined" id="next">arrow_forward_ios</span>
<span class="material-symbols-outlined" id ="previous">arrow_back_ios</span>
</div>
</div>
</div>
</div>
<div class = "householdControl-container"> <%- include ('householdControl', { SelectedHouseholdData: SelectedHouseholdData }) -%></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const firstHalfCustomers = document.querySelector('.first-half-customers');
const secondHalfCustomers = document.querySelector('.second-half-customers');
// Hide the second half of customers initially
secondHalfCustomers.style.display = 'none';
const nextButton = document.getElementById('next');
const previousButton = document.getElementById('previous');
nextButton.addEventListener('click', function() {
firstHalfCustomers.style.display = 'none';
secondHalfCustomers.style.display = 'flex';
secondHalfCustomers.style.justifyContent = 'space-between';
});
previousButton.addEventListener('click', function() {
firstHalfCustomers.style.display = 'flex';
firstHalfCustomers.style.justifyContent = 'space-between';
secondHalfCustomers.style.display = 'none';
});
});
</script>
<div class = "add-driver-form">
<div class = "add-driver-form-border">
<form action = "/add-driver" method = "post" id = "add-driver-form-form">
<div class = "section-d">
<label for = "full_name" class = "add-driver-form-labels">Driver Full Name: </label>
<input type="text" id="full_name" name="name" class="add-driver-form-inputs">
</div>
<div class = "section-d">
<label for = "dob" class = "add-driver-form-labels"> Driver DOB: </label>
<input type="date" id="dateOfBirth" name="dateOfBirth" class="add-driver-form-inputs">
</div>
<div class = "section-d">
<label for = "relation" class = "add-driver-form-labels">Driver Realation: </label>
<select id="relation" name="relation">
<option value="self">self</option>
<option value="spouse">spouse</option>
<option value="child">child</option>
<option value="parent">parent</option>
<option value="sibling">sibling</option>
<option value="other">other</option>
</select>
</div>
<div class = "section-d">
<label for = "year" class = "add-driver-form-labels"> Vehicle Year: </label>
<input type = "text" id = "year" class = "add-driver-form-inputs" name = "year">
</div>
<div class = "section-d">
<label for = "make" class = "add-driver-form-labels">Vehicle Make: </label>
<input type = "text" id = "make" class = "add-driver-form-inputs" name = "make">
</div>
<div class = "section-d">
<label for = "model" class = "add-driver-form-labels">Vehicle Model: </label>
<input type = "text" id = "model" class = "add-driver-form-inputs" name = "model">
</div>
<div class = "section-d">
<label for = "vin" class = "add-driver-form-labels">Vehicle VIN: </label>
<input type = "text" id = "vin" class = "add-driver-form-inputs" name = "vin">
</div>
<div class = "section-d">
<label for = "policyNumber" class = "add-driver-form-labels">Policy number: </label>
<input type = "text" id = "policyNumber" class = "add-driver-form-inputs" name = "policyNumber">
</div>
<button type ="submit" id ="add-driver-submit-btn">Submit </button>
<button type ="button" id ="add-driver-cancel-btn" >Back </button>
</form>
</div>
</div>
<!-- Add Household Prompt menu-->
<div class="pop-up-menu" id="add-household-prompt" enctype="multipart/form-data">
<div class="pop-up-menu-border" id="add-household-prompt-border">
<div class="pop-up-menu-section">
<input type="checkbox" id="add_driver" name="addDriver" class="checkboxs">
<label for="add_driver" class="labels">Create Driver</label>
</div>
<div class="pop-up-menu-section">
<input type="checkbox" id="add_household" name="addHousehold" class="checkboxs">
<label for="add_household" class="labels">Create Household</label>
</div>
<div class="pop-up-menu-section">
<input type="checkbox" id="add_vehicle" name="addVehicle" class="checkboxs">
<label for="add_vehicle" class="labels">Create Vehicle</label>
</div>
<div class="pop-up-menu-section">
<input type="checkbox" id="add_policy" name="addPolicy" class="checkboxs">
<label for="add_policy" class="labels">Create Policy</label>
</div>
<div class="pop-up-menu-section">
<input type="checkbox" id="add_driver" name="add_driver" class="checkboxs">
<label for="add_driver" class="labels">Add Driver </label>
</div>
<div class="pop-up-menu-section">
<input type="checkbox" id="remove_driver" name="remove_driver" class="checkboxs">
<label for="add_driver" class="labels">Remove Driver</label>
</div>
<buttton type="submit" id="submit-prompt">Submit</buttton>
<button id="back-to-main">Back </button>
<p id="error-message">
<p>
</div>
</div>
<!-- Add Household Form-->
<div class="add-household-form" id="add-household-form">
<div class="add-household-form-border">
<h1> New Household</h1>
<form action="/add_household" method="post">
<div class="section">
<label for="upload_picture" class="add-household-form-labels">Upload Profile Picture</label>
<input type="file" id="upload_picture" name="upload_picture" class="add-household-form-inputs">
</div>
<div class="section">
<label for="full_name" class="add-household-form-labels">Full Name:</label>
<input type="text" id="full_name" name="full_name" class="add-household-form-inputs">
</div>
<div class="section">
<label for="date_of_birth" class="add-household-form-labels">Date Of Birth:</label>
<input type="date" id="date_of_birth" name="date_of_birth" class="add-household-form-inputs">
</div>
<div class="section">
<label for="relation" class="add-household-form-labels">Full Name: </label>
<select id="relation" name="relation" class="add-household-form-inputs">
<option value="self">Self</option>
<option value="spouse">Spouse</option>
<option value="child">Child</option>
<option value="parent">Parent</option>
<option value="sibling">Sibling</option>
<option value="other">Other</option>
</select>
</div>
<div class="section">
<label for="year" class="add-household-form-labels">Year:</label>
<input type="text" id="year" name="year" class="add-household-form-inputs">
</div>
<div class="section">
<label for="make" class="add-household-form-labels">Make:</label>
<input type="text" id="make" name="make" class="add-household-form-inputs">
</div>
<div class="section">
<label for="model" class="add-household-form-labels">Model:</label>
<input type="text" id="model" name="model" class="add-household-form-inputs">
</div>
<div class="section">
<label for="vin" class="add-household-form-labels">VIN#: </label>
<input type="text" id="vin" name="vin" class="add-household-form-inputs">
</div>
<div class="section">
<label for="cell_phone" class="add-household-form-labels">Cell Phone: </label>
<input type="text" id="cell_phone" name="cell_phone" class="add-household-form-inputs">
</div>
<div class="section">
<label for="address" class="add-household-form-labels">Address: </label>
<input type="text" id="address" name="address" class="add-household-form-inputs">
</div>
<div class="section">
<label for="work_phone" class="add-household-form-labels">Work Phone: </label>
<input type="text" id="work_phone" name="work_phone" class="add-household-form-inputs">
</div>
<div class="section">
<label for="city" class="add-household-form-labels">City: </label>
<input type="text" id="city" name="city" class="add-household-form-inputs">
</div>
<div class="section">
<label for="zip_code" class="add-household-form-labels">Zip Code: </label>
<input type="text" id="zip_code" name="zip_code" class="add-household-form-inputs">
</div>
<div class="section">
<label for="policy_number" class="add-household-form-labels">Policy Number: </label>
<input type="text" id="policy_number" name="policy_number" class="add-household-form-inputs">
</div>
<button type="submit" id="submit-form-btn"> Add Household Member </button>
</form>
<button id="back-to-prompt">Back </button>
</div>
</div>
<!-- Edit Household Form -->
<div class = "add-driver-form">
<div class = "add-driver-form-border">
<form action = "/add-driver" method = "post" id = "add-driver-form-form">
<div class = "section-d">
<label for = "full_name" class = "add-driver-form-labels">Driver Full Name: </label>
<input type="text" id="full_name" name="name" class="add-driver-form-inputs">
</div>
<div class = "section-d">
<label for = "dob" class = "add-driver-form-labels"> Driver DOB: </label>
<input type="date" id="dateOfBirth" name="dateOfBirth" class="add-driver-form-inputs">
</div>
<div class = "section-d">
<label for = "relation" class = "add-driver-form-labels">Driver Realation: </label>
<select id="relation" name="relation">
<option value="self">self</option>
<option value="spouse">spouse</option>
<option value="child">child</option>
<option value="parent">parent</option>
<option value="sibling">sibling</option>
<option value="other">other</option>
</select>
</div>
<div class = "section-d">
<label for = "year" class = "add-driver-form-labels"> Vehicle Year: </label>
<input type = "text" id = "year" class = "add-driver-form-inputs" name = "year">
</div>
<div class = "section-d">
<label for = "make" class = "add-driver-form-labels">Vehicle Make: </label>
<input type = "text" id = "make" class = "add-driver-form-inputs" name = "make">
</div>
<div class = "section-d">
<label for = "model" class = "add-driver-form-labels">Vehicle Model: </label>
<input type = "text" id = "model" class = "add-driver-form-inputs" name = "model">
</div>
<div class = "section-d">
<label for = "vin" class = "add-driver-form-labels">Vehicle VIN: </label>
<input type = "text" id = "vin" class = "add-driver-form-inputs" name = "vin">
</div>
<div class = "section-d">
<label for = "policyNumber" class = "add-driver-form-labels">Policy number: </label>
<input type = "text" id = "policyNumber" class = "add-driver-form-inputs" name = "policyNumber">
</div>
<button type ="submit" id ="add-driver-submit-btn">Submit </button>
<button type ="button" id ="add-driver-cancel-btn" >Back </button>
</form>
</div>
</div>
