Im making a simple web app using google app script for a simple time attendance. my problem is after clicking the submit button to check or verify the email . the time in button disappear after 2 seconds. or if not press it will not function. can anyone guide me the correct direction for this
CODE GS SCRIPT
// Function to include external CSS or JavaScript files in the HTML output
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
// Function to check employee details
function checkEmployee(email) {
var empSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Employee list');
if (!empSheet) {
return { status: 'Error', message: 'Employee list not found.' };
}
var empData = empSheet.getDataRange().getValues();
var authorizedEmployee = empData.find(row => row[3].trim().toLowerCase() === email.trim().toLowerCase());
if (!authorizedEmployee) {
return { status: 'Unauthorized', message: 'Employee not found.' };
}
var firstName = authorizedEmployee[0];
var lastName = authorizedEmployee[1];
var lob = authorizedEmployee[2];
var currentDateTime = new Date().toLocaleString();
return {
status: 'Success',
firstName: firstName,
lastName: lastName,
lob: lob,
currentDateTime: currentDateTime,
email: email
};
}
// Function to handle form submission
function onFormSubmit(email, location, action) {
Logger.log('onFormSubmit called with email: ' + email + ', location: ' + location + ', action: ' + action);
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Attendance');
var empSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Employee list');
if (!sheet || !empSheet) {
Logger.log('Sheet or Employee list not found');
return { status: 'Error', message: 'Sheet or Employee list not found.' };
}
var empData = empSheet.getDataRange().getValues();
Logger.log('Employee Data: ' + JSON.stringify(empData));
var authorizedEmployee = empData.find(row => row[3].trim().toLowerCase() === email.trim().toLowerCase());
if (!authorizedEmployee) {
Logger.log('Employee not found for email: ' + email);
return { status: 'Unauthorized', message: 'Employee not found.' };
}
var firstName = authorizedEmployee[0];
var lastName = authorizedEmployee[1];
var lob = authorizedEmployee[2];
var currentDateTime = new Date().toLocaleString();
if (action === 'TIME IN') {
var newRow = [firstName, lastName, lob, email, location, currentDateTime, '', ''];
sheet.appendRow(newRow);
// Send email confirmation for TIME IN
sendConfirmationEmail(email, firstName, lastName, currentDateTime, '', '');
return {
status: 'Success',
message: 'Time In recorded successfully.',
buttonLabel: 'TIME OUT',
firstName: firstName,
lastName: lastName,
lob: lob,
currentDateTime: currentDateTime
};
}
else if (action === 'TIME OUT') {
var lastRow = sheet.getLastRow();
var rowData = sheet.getRange(lastRow, 1, 1, 8).getValues()[0];
if (rowData[3] === email && rowData[6] === '') {
var endTime = currentDateTime;
sheet.getRange(lastRow, 7).setValue(endTime);
var totalHours = calculateTotalHours(rowData[5], endTime);
sheet.getRange(lastRow, 8).setValue(totalHours);
// Send confirmation email with details
sendConfirmationEmail(email, firstName, lastName, rowData[5], endTime, totalHours);
return {
status: 'Success',
message: 'Time Out recorded successfully.',
buttonLabel: 'TIME IN',
firstName: firstName,
lastName: lastName,
lob: lob,
currentDateTime: currentDateTime,
timeIn: rowData[5],
timeOut: endTime,
totalHours: totalHours
};
} else {
return {
status: 'Error',
message: 'No valid Time In found for today.',
buttonLabel: 'TIME OUT',
firstName: firstName,
lastName: lastName,
lob: lob,
currentDateTime: currentDateTime
};
}
}
else {
return {
status: 'Error',
message: 'Invalid action.',
buttonLabel: 'TIME OUT',
firstName: firstName,
lastName: lastName,
lob: lob,
currentDateTime: currentDateTime
};
}
}
// Function to calculate total hours between two timestamps
function calculateTotalHours(startTime, endTime) {
var start = new Date(startTime);
var end = new Date(endTime);
var diff = (end - start) / 1000; // difference in seconds
var hours = Math.floor(diff / 3600);
var minutes = Math.floor((diff % 3600) / 60);
return hours + '.' + (minutes / 60).toFixed(2).slice(-2);
}
// Function to send confirmation email
function sendConfirmationEmail(email, firstName, lastName, timeIn, timeOut, totalHours) {
var subject = 'Time Tracking Confirmation';
var message = 'Dear ' + firstName + ' ' + lastName + ',nn' +
'Your time tracking has been recorded.nn' +
(timeIn ? 'Time In: ' + timeIn + 'n' : '') +
(timeOut ? 'Time Out: ' + timeOut + 'n' : '') +
(totalHours ? 'Total Hours: ' + totalHours + 'n' : '') +
'Thank you.';
MailApp.sendEmail(email, subject, message);
}
// Function to handle GET requests (used for HTML content)
function doGet() {
return HtmlService.createTemplateFromFile('Page')
.evaluate()
.setTitle('Attendance Form')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
// Function to get the last entry for a user to determine the button label
function getLastEntry(email) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Attendance');
var data = sheet.getDataRange().getValues();
var lastEntry = data.reverse().find(row => row[3] === email);
if (lastEntry) {
if (lastEntry[6] === '') {
return { status: 'TIME IN' };
} else {
return { status: 'TIME OUT' };
}
}
return { status: 'TIME IN' }; // Default to TIME IN if no previous entry
}
Page.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
<style>
#buttonContainer {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
#timeInButton, #timeOutButton {
flex: 1;
margin: 5px;
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>ENFRAUSA WAH BIOMETRICS</h2>
<div>
<label for="email">Enter your Gmail:</label>
<input type="text" id="email" name="email">
<button id="submitEmailButton" onclick="submitEmail()">Submit</button>
<br>
<div id="employeeDetails"></div>
<br>
<select id="location" style="display:none;">
<option value="WAH">Work at Home (WAH)</option>
<option value="ONSITE">On-site</option>
<option value="MAKATI">Makati</option>
</select>
<br>
<div id="buttonContainer">
<button id="timeInButton" onclick="submitTime('TIME IN')">TIME IN</button>
<button id="timeOutButton" onclick="submitTime('TIME OUT')">TIME OUT</button>
</div>
</div>
<script>
function submitEmail() {
var email = document.getElementById('email').value;
google.script.run.withSuccessHandler(showEmployeeDetails).checkEmployee(email);
}
function showEmployeeDetails(response) {
var detailsDiv = document.getElementById('employeeDetails');
var locationSelect = document.getElementById('location');
if (response.status === 'Unauthorized') {
detailsDiv.innerHTML = '<p>' + response.message + '</p>';
locationSelect.style.display = 'none';
} else if (response.status === 'Success') {
detailsDiv.innerHTML = '<p>Full Name: ' + response.firstName + ' ' + response.lastName + '</p>' +
'<p>LOB: ' + response.lob + '</p>' +
'<p>Current Time: ' + response.currentDateTime + '</p>';
locationSelect.style.display = 'block';
// Ensure buttons are visible
document.getElementById('timeInButton').style.display = 'block';
document.getElementById('timeOutButton').style.display = 'block';
// Check last entry to update button labels if needed
google.script.run.withSuccessHandler(function(entry) {
if (entry.status === 'TIME IN') {
document.getElementById('timeInButton').style.display = 'none';
} else {
document.getElementById('timeInButton').style.display = 'block';
document.getElementById('timeOutButton').style.display = 'block';
}
}).getLastEntry(response.email);
}
}
function submitTime(action) {
var email = document.getElementById('email').value;
var location = document.getElementById('location').value;
google.script.run.withSuccessHandler(function(response) {
var detailsDiv = document.getElementById('employeeDetails');
if (action === 'TIME IN') {
detailsDiv.innerHTML = '<p>' + response.message + '</p>' +
'<p>Full Name: ' + response.firstName + ' ' + response.lastName + '</p>' +
'<p>LOB: ' + response.lob + '</p>' +
'<p>Time In: ' + response.currentDateTime + '</p>';
} else if (action === 'TIME OUT') {
detailsDiv.innerHTML = '<p>' + response.message + '</p>' +
'<p>Full Name: ' + response.firstName + ' ' + response.lastName + '</p>' +
'<p>LOB: ' + response.lob + '</p>' +
'<p>Time In: ' + (response.timeIn || 'N/A') + '</p>' +
'<p>Time Out: ' + (response.timeOut || 'N/A') + '</p>';
}
}).onFormSubmit(email, location, action);
}
</script>
</body>
</html>
already revised the code block for last entry probably it is the main suspect but still having problems
New contributor
En- Nino is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
The code line that make dissapears the button is
document.getElementById('timeInButton').style.display = 'none'
The quick fix is to remove this line.