Added feature to close registration form remotely
This commit is contained in:
Kent Joseph T. Palima
+137
-155
@@ -8,178 +8,140 @@ import '../styles/apply.scss';
|
|||||||
<div class="form-container">
|
<div class="form-container">
|
||||||
<h1>Registration Portal</h1>
|
<h1>Registration Portal</h1>
|
||||||
|
|
||||||
<div class="description-text">
|
<!-- LOADING SCREEN -->
|
||||||
<p>UP IECEP is an organization based in the University of the Philippines College of Engineering, catering specifically to <strong>BS Electronics Engineering students</strong>. It is a student chapter affiliated with the Institute of Electronics Engineers of the Philippines NCR North-East Chapter.</p>
|
<div id="loading-status" class="status-panel">
|
||||||
<p class="privacy-notice">In accordance with the Data Privacy Act of 2012, all information you provide will be kept confidential and used exclusively for the organization's internal purposes.</p>
|
<div class="spinner"></div>
|
||||||
|
<p>Checking registration status...</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ELIGIBILITY CHECK -->
|
<!-- CLOSED SCREEN (Hidden by default) -->
|
||||||
<div id="eligibility-section" class="eligibility-card">
|
<div id="closed-message" class="status-panel" style="display: none;">
|
||||||
<h3>Eligibility Check</h3>
|
<h3>Registration is Currently Closed</h3>
|
||||||
<p>Before proceeding, please answer the following questions to confirm your eligibility:</p>
|
<p>Thank you for your interest! Please follow our social media pages for updates on our next application period.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- THE ENTIRE FORM WRAPPER (Hidden by default) -->
|
||||||
|
<div id="registration-content" style="display: none;">
|
||||||
|
|
||||||
<div class="radio-group">
|
<div class="description-text">
|
||||||
<p>Are you currently a BS Electronics Engineering student?</p>
|
<p>UP IECEP is an organization based in the University of the Philippines College of Engineering, catering specifically to <strong>BS Electronics Engineering students</strong>. It is a student chapter affiliated with the Institute of Electronics Engineers of the Philippines NCR North-East Chapter.</p>
|
||||||
<label><input type="radio" name="isBSECE" value="yes" /> Yes</label>
|
<p class="privacy-notice">In accordance with the Data Privacy Act of 2012, all information you provide will be kept confidential and used exclusively for the organization's internal purposes.</p>
|
||||||
<label><input type="radio" name="isBSECE" value="no" /> No</label>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="radio-group">
|
<!-- ELIGIBILITY CHECK -->
|
||||||
<p>Are you graduating this semester?</p>
|
<div id="eligibility-section" class="eligibility-card">
|
||||||
<label><input type="radio" name="isGraduating" value="yes" /> Yes</label>
|
<h3>Eligibility Check</h3>
|
||||||
<label><input type="radio" name="isGraduating" value="no" /> No</label>
|
<p>Before proceeding, please answer the following questions to confirm your eligibility:</p>
|
||||||
|
|
||||||
|
<div class="radio-group">
|
||||||
|
<p>Are you currently a BS Electronics Engineering student?</p>
|
||||||
|
<label><input type="radio" name="isBSECE" value="yes" /> Yes</label>
|
||||||
|
<label><input type="radio" name="isBSECE" value="no" /> No</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="radio-group">
|
||||||
|
<p>Are you graduating this semester?</p>
|
||||||
|
<label><input type="radio" name="isGraduating" value="yes" /> Yes</label>
|
||||||
|
<label><input type="radio" name="isGraduating" value="no" /> No</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" id="check-eligibility-btn" class="submit-btn">Continue</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="button" id="check-eligibility-btn" class="submit-btn">Continue</button>
|
<!-- INELIGIBLE MESSAGE -->
|
||||||
</div>
|
<div id="ineligible-message" class="hidden-message">
|
||||||
|
<p>Unfortunately, you are ineligible to join UP IECEP.</p>
|
||||||
|
<p>We sincerely thank you for your interest in our organization and wish you the best in your academic journey ahead.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- INELIGIBLE MESSAGE (Hidden by default) -->
|
<!-- THE ACTUAL FORM -->
|
||||||
<div id="ineligible-message" class="hidden-message">
|
<form id="apply-form" class="hidden-form">
|
||||||
<p>Unfortunately, you are ineligible to join UP IECEP.</p>
|
<h3>Applicant Details</h3>
|
||||||
<p>We sincerely thank you for your interest in our organization and wish you the best in your academic journey ahead.</p>
|
|
||||||
</div>
|
<div class="input-group">
|
||||||
|
<label for="fullName">Name <span>(Format: DELA CRUZ, Juan M.)</span></label>
|
||||||
|
<input type="text" id="fullName" name="fullName" title="Please follow the format: LASTNAME, First Name M." required placeholder="DELA CRUZ, Juan M." />
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- THE ACTUAL FORM (Hidden by default) -->
|
<div class="input-group">
|
||||||
<!-- REMEMBER TO PASTE YOUR GOOGLE SCRIPT URL IN THE ACTION ATTRIBUTE BELOW -->
|
<label for="nickname">Nickname</label>
|
||||||
<form id="apply-form" class="hidden-form" action="https://script.google.com/macros/s/AKfycby_xG6EGVuLXvgs9ro20rMkK2zSyElPCHeMU_2F2Q_0WE08gtCNzrO-SEyjDAqS46Hr/exec">
|
<input type="text" id="nickname" name="nickname" title="Please enter your preferred nickname" required placeholder="Juan" />
|
||||||
<h3>Applicant Details</h3>
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="studentNumber">Student Number <span>(Format: 20XX-XXXXX)</span></label>
|
||||||
|
<input type="text" id="studentNumber" name="studentNumber" pattern="20[0-9]{2}-[0-9]{5}" title="Please include the dash (e.g., 2022-12345)" required placeholder="202X-XXXXX" />
|
||||||
|
<span class="realtime-error" id="sn-error">Format must be exactly 20XX-XXXXX (Don't forget the dash!)</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="yearStanding">Year Standing</label>
|
||||||
|
<select id="yearStanding" name="yearStanding" title="Please select your current year standing" required>
|
||||||
|
<option value="" disabled selected>Select your year standing</option>
|
||||||
|
<option value="I">I</option>
|
||||||
|
<option value="II">II</option>
|
||||||
|
<option value="III">III</option>
|
||||||
|
<option value="IV">IV</option>
|
||||||
|
<option value="Other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="mobileNumber">Mobile Number <span>(Format: 09XXXXXXXXX)</span></label>
|
||||||
|
<input type="tel" id="mobileNumber" name="mobileNumber" pattern="09[0-9]{9}" title="Please enter an 11-digit mobile number starting with 09" required placeholder="09XXXXXXXXX" />
|
||||||
|
<span class="realtime-error" id="mn-error">Must be an 11-digit number starting with 09</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="email">Email Address</label>
|
||||||
|
<input type="email" id="email" name="email" title="Please enter a valid email address" required placeholder="jdelacruz@up.edu.ph" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="facebookLink">Facebook Profile Link <span>(Format: facebook.com/username)</span></label>
|
||||||
|
<input type="text" id="facebookLink" name="facebookLink" title="Please provide a link to your Facebook profile" required placeholder="facebook.com/IECEPUPD" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="source">How did you learn about UP IECEP?</label>
|
||||||
|
<select id="source" name="source" title="Please select how you found out about our organization" required>
|
||||||
|
<option value="" disabled selected>Select an option</option>
|
||||||
|
<option value="Family">Family</option>
|
||||||
|
<option value="Friends">Friends</option>
|
||||||
|
<option value="Social Media">Social Media</option>
|
||||||
|
<option value="Other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="funActivities">Do you have activities in mind that would add more fun to your application process?</label>
|
||||||
|
<textarea id="funActivities" name="funActivities" rows="4" title="We would love to hear your ideas!" placeholder="Share your ideas here!"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" id="submit-btn" class="submit-btn">Submit Application</button>
|
||||||
|
<p id="loading-msg" style="display:none; text-align:center; margin-top:1rem;">Sending application...</p>
|
||||||
|
</form>
|
||||||
|
|
||||||
<div class="input-group">
|
<!-- SUCCESS MESSAGE -->
|
||||||
<label for="fullName">Name <span>(Format: DELA CRUZ, Juan M.)</span></label>
|
<div id="success-message" class="hidden-message success">
|
||||||
<input
|
<h3>Application Submitted!</h3>
|
||||||
type="text"
|
<p>Thank you for applying to UP IECEP. We have received your details and will be in touch soon.</p>
|
||||||
id="fullName"
|
|
||||||
name="fullName"
|
|
||||||
title="Please follow the format: LASTNAME, First Name M."
|
|
||||||
required
|
|
||||||
placeholder="DELA CRUZ, Juan M."
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-group">
|
</div> <!-- End of Registration Content Wrapper -->
|
||||||
<label for="nickname">Nickname</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="nickname"
|
|
||||||
name="nickname"
|
|
||||||
title="Please enter your preferred nickname"
|
|
||||||
required
|
|
||||||
placeholder="Juan"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<label for="studentNumber">Student Number <span>(Format: 20XX-XXXXX)</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="studentNumber"
|
|
||||||
name="studentNumber"
|
|
||||||
pattern="20[0-9]{2}-[0-9]{5}"
|
|
||||||
title="Please include the dash (e.g., 2022-12345)"
|
|
||||||
required
|
|
||||||
placeholder="202X-XXXXX"
|
|
||||||
/>
|
|
||||||
<span class="realtime-error" id="sn-error">Format must be exactly 20XX-XXXXX (Don't forget the dash!)</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<label for="yearStanding">Year Standing</label>
|
|
||||||
<select
|
|
||||||
id="yearStanding"
|
|
||||||
name="yearStanding"
|
|
||||||
title="Please select your current year standing"
|
|
||||||
required
|
|
||||||
>
|
|
||||||
<option value="" disabled selected>Select your year standing</option>
|
|
||||||
<option value="I">I</option>
|
|
||||||
<option value="II">II</option>
|
|
||||||
<option value="III">III</option>
|
|
||||||
<option value="IV">IV</option>
|
|
||||||
<option value="Other">Other</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<label for="mobileNumber">Mobile Number <span>(Format: 09XXXXXXXXX)</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="mobileNumber"
|
|
||||||
name="mobileNumber"
|
|
||||||
pattern="09[0-9]{9}"
|
|
||||||
title="Please enter an 11-digit mobile number starting with 09 (e.g., 09123456789)"
|
|
||||||
required
|
|
||||||
placeholder="09XXXXXXXXX"
|
|
||||||
/>
|
|
||||||
<span class="realtime-error" id="mn-error">Must be an 11-digit number starting with 09</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<label for="email">Email Address</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
title="Please enter a valid email address"
|
|
||||||
required
|
|
||||||
placeholder="jdelacruz@up.edu.ph"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<label for="facebookLink">Facebook Profile Link <span>(Format: facebook.com/username)</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="facebookLink"
|
|
||||||
name="facebookLink"
|
|
||||||
title="Please provide a link to your Facebook profile"
|
|
||||||
required
|
|
||||||
placeholder="facebook.com/IECEPUPD"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<label for="source">How did you learn about UP IECEP?</label>
|
|
||||||
<select
|
|
||||||
id="source"
|
|
||||||
name="source"
|
|
||||||
title="Please select how you found out about our organization"
|
|
||||||
required
|
|
||||||
>
|
|
||||||
<option value="" disabled selected>Select an option</option>
|
|
||||||
<option value="Family">Family</option>
|
|
||||||
<option value="Friends">Friends</option>
|
|
||||||
<option value="Social Media">Social Media</option>
|
|
||||||
<option value="Other">Other</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<label for="funActivities">Do you have activities in mind that would add more fun to your application process?</label>
|
|
||||||
<textarea
|
|
||||||
id="funActivities"
|
|
||||||
name="funActivities"
|
|
||||||
rows="4"
|
|
||||||
title="We would love to hear your ideas!"
|
|
||||||
placeholder="Share your ideas here!"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" id="submit-btn" class="submit-btn">Submit Application</button>
|
|
||||||
<p id="loading-msg" style="display:none; text-align:center; margin-top:1rem;">Sending application...</p>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- SUCCESS MESSAGE (Hidden by default) -->
|
|
||||||
<div id="success-message" class="hidden-message success">
|
|
||||||
<h3>Application Submitted!</h3>
|
|
||||||
<p>Thank you for applying to UP IECEP. We have received your details and will be in touch soon.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// === PASTE YOUR GOOGLE SCRIPT URL HERE ONCE ===
|
||||||
|
const SCRIPT_URL = 'https://script.google.com/macros/s/AKfycby_xG6EGVuLXvgs9ro20rMkK2zSyElPCHeMU_2F2Q_0WE08gtCNzrO-SEyjDAqS46Hr/exec';
|
||||||
|
|
||||||
// --- ELEMENTS ---
|
// --- ELEMENTS ---
|
||||||
|
const loadingStatus = document.getElementById('loading-status');
|
||||||
|
const closedMessage = document.getElementById('closed-message');
|
||||||
|
const registrationContent = document.getElementById('registration-content');
|
||||||
|
|
||||||
const eligibilitySection = document.getElementById('eligibility-section');
|
const eligibilitySection = document.getElementById('eligibility-section');
|
||||||
const checkBtn = document.getElementById('check-eligibility-btn');
|
const checkBtn = document.getElementById('check-eligibility-btn');
|
||||||
const ineligibleMsg = document.getElementById('ineligible-message');
|
const ineligibleMsg = document.getElementById('ineligible-message');
|
||||||
@@ -188,6 +150,26 @@ import '../styles/apply.scss';
|
|||||||
const loadingMsg = document.getElementById('loading-msg');
|
const loadingMsg = document.getElementById('loading-msg');
|
||||||
const successMsg = document.getElementById('success-message');
|
const successMsg = document.getElementById('success-message');
|
||||||
|
|
||||||
|
// --- STEP 1: CHECK GOOGLE SHEET STATUS ---
|
||||||
|
fetch(SCRIPT_URL)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
loadingStatus.style.display = 'none'; // Hide the spinner
|
||||||
|
|
||||||
|
// Look at the B1 cell value from the Google Sheet
|
||||||
|
if (data.status === 'OPEN') {
|
||||||
|
registrationContent.style.display = 'block'; // Reveal the portal!
|
||||||
|
} else {
|
||||||
|
closedMessage.style.display = 'block'; // Show the closed message
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
// If the internet is down or script fails, fail gracefully by showing closed
|
||||||
|
loadingStatus.style.display = 'none';
|
||||||
|
closedMessage.style.display = 'block';
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
// --- ELIGIBILITY LOGIC ---
|
// --- ELIGIBILITY LOGIC ---
|
||||||
if (checkBtn && eligibilitySection && ineligibleMsg && mainForm) {
|
if (checkBtn && eligibilitySection && ineligibleMsg && mainForm) {
|
||||||
checkBtn.addEventListener('click', () => {
|
checkBtn.addEventListener('click', () => {
|
||||||
@@ -247,7 +229,7 @@ import '../styles/apply.scss';
|
|||||||
submitBtn.style.display = 'none';
|
submitBtn.style.display = 'none';
|
||||||
if(loadingMsg) loadingMsg.style.display = 'block';
|
if(loadingMsg) loadingMsg.style.display = 'block';
|
||||||
|
|
||||||
fetch(mainForm.action, {
|
fetch(SCRIPT_URL, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: new FormData(mainForm)
|
body: new FormData(mainForm)
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -21,6 +21,34 @@
|
|||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Status Panels (Loading & Closed) */
|
||||||
|
.status-panel {
|
||||||
|
text-align: center;
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
background-color: #f9fafb;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border: 1px dashed #d1d5db;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
|
||||||
|
h3 { color: $primary; font-size: 1.5rem; margin-bottom: 1rem; }
|
||||||
|
p { color: #4a4a4a; font-size: 1.1rem; }
|
||||||
|
|
||||||
|
/* Simple CSS Loading Spinner */
|
||||||
|
.spinner {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0 auto 1.5rem auto;
|
||||||
|
border: 4px solid rgba(128, 0, 0, 0.1);
|
||||||
|
border-top-color: $primary;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.description-text {
|
.description-text {
|
||||||
margin-bottom: 2.5rem;
|
margin-bottom: 2.5rem;
|
||||||
p {
|
p {
|
||||||
|
|||||||
Reference in New Issue
Block a user