Configurar el Client
Ahora, configuremos el componente client. El directorio del client contiene:
- El archivo index.html que contiene el código HTML para la aplicación frontend
- El archivo main.css que contiene el código CSS para la aplicación frontend
- El archivo main.js que contiene el código JavaScript
- El archivo de configuración client-package.json
Codificaremos index.html, main.css y main.js.
Copie el código a continuación y péguelo en los archivos respectivos ubicados en el directorio client/directory de su proyecto usando un IDE y guarde los archivos.
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js"></script>
<link
rel="stylesheet"
type="text/css"
href="main.css"/>
<script>
window.addEventListener("DOMContentLoaded", function () {
// Obtener los elementos de entrada
var basicSalaryInput = document.getElementById("basicSalary");
var allowancesInput = document.getElementById("allowances");
var deductionsInput = document.getElementById("deductions");
var netSalaryInput = document.getElementById("netSalary");
// Agregar event listeners a los campos de entrada
basicSalaryInput.addEventListener("input", calculateNetSalary);
allowancesInput.addEventListener("input", calculateNetSalary);
deductionsInput.addEventListener("input", calculateNetSalary);
// Función para calcular el salario neto
function calculateNetSalary() {
// Obtener valores de los campos de entrada
var basicSalary = parseFloat(basicSalaryInput.value) || 0;
var allowances = parseFloat(allowancesInput.value) || 0;
var deductions = parseFloat(deductionsInput.value) || 0;
// Calcular el salario neto
var netSalary = basicSalary + allowances - deductions;
// Actualizar el campo de entrada del salario neto
netSalaryInput.value = netSalary.toFixed(2);
}
});
</script>
</head>
<body>
<div class="container mt-5 mb-5">
<h2>Payslip Generator</h2>
<form onsubmit="generatePayslip();return false;">
<div class="row">
<div class="form-group col-md-6">
<label for="employeeName">Employee Name:</label>
<input type="text" id="employeeName" name="employeeName" required />
</div>
<div class="form-group col-md-6">
<label for="employeeId">Employee ID:</label>
<input type="text" id="employeeId" name="employeeId" required />
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="designation">Employee Designation:</label>
<input type="text" id="designation" name="designation" required />
</div>
<div class="form-group col-md-6">
<label for="employeeEmail">Employee Email:</label>
<input
type="text"
id="employeeEmail"
name="employeeEmail"
required
/>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="basicSalary">Basic Salary:</label>
<input type="number" id="basicSalary" name="basicSalary" min="0" oninput="validity.valid||(value='');" required />
</div>
<div class="form-group col-md-6">
<label for="allowances">Allowances:</label>
<input type="number" id="allowances" name="allowances" min="0" oninput="validity.valid||(value='');" required />
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="deductions">Deductions:</label>
<input type="number" id="deductions" name="deductions" min="0" oninput="validity.valid||(value='');" required />
</div>
<div class="form-group col-md-6">
<label for="netSalary">Net Salary:</label>
<input type="number" id="netSalary" name="netSalary" readonly />
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="paymentMethod">Payment Method:</label>
<select id="paymentMethod" name="paymentMethod" required>
<option value="">Select</option>
<option value="Bank Transfer">Bank Transfer</option>
<option value="Cheque">Cheque</option>
<option value="Cash">Cash</option>
</select>
</div>
</div>
<input
type="submit"
value="Submit"
/>
</form>
</div>
</body>
</html>
.container {
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
padding: 40px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
background: linear-gradient(to right, #4caf50, #45a049);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
margin-bottom: 40px;
}
/* Styling for the form labels */
label {
transition: color 0.3s ease; /* Add a subtle animation on hover */
}
label:hover {
/* Change the color on hover */
color: #4caf50;
}
/* Styling for the form input fields */
input[type=“text”],
input[type=“number”],
select {
/* Increase the height of the input fields */
height: 40px;
/* Add a subtle box shadow */
}
/* Styling for the form input groups */
.form-group {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.form-group label {
flex: 0 0 200px; /* Set a fixed width for the labels */
margin-right: 10px; /* Add some spacing between label and input */
}
.form-group input,
.form-group select {
flex: 1; /* Allow the inputs to take up remaining space */
}
/* Styling for the submit button */
input[type=“submit”] {
/* Add a gradient background */
background-image: linear-gradient(to right, #4caf50, #45a049);
/* Add a box shadow */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
margin-top: 15px;
width: 150px;
margin-left: 600px;
}
input[type=“submit”]:hover {
/* Darken the background on hover */
background-image: linear-gradient(to right, #45a049, #398e3d);
}
function generatePayslip() {
// Recuperar valores del formulario
const employeeName = document.getElementById('employeeName').value;
const employeeId = document.getElementById('employeeId').value;
const designation = document.getElementById('designation').value;
const paymentMethod = document.getElementById('paymentMethod').value;
const employeeEmail = document.getElementById('employeeEmail').value;
const basicSalary = parseFloat(document.getElementById('basicSalary').value);
const allowances = parseFloat(document.getElementById('allowances').value);
const deductions = parseFloat(document.getElementById('deductions').value);
$.ajax({
url: '/server/payslip_generator_function/generatepayslip', //proporcione aquí el endpoint de su función
type: 'post',
contentType: 'application/json',
data: JSON.stringify({
employeeName,
employeeId,
basicSalary,
allowances,
deductions,
designation,
paymentMethod,
employeeEmail
}),
success: function (data) {
alert(data);
window.location.reload();
},
error: function (error) {
console.log(error);
alert(error.responseText);
window.location.reload();
}
});
}
El directorio del client está ahora configurado.
Repasemos el funcionamiento del código de la función y el client:
-
El usuario final ingresa los detalles del empleado en el lado del client. Cuando el usuario final hace clic en Submit, una llamada POST en main.js activa el endpoint API /generatepayslip y los datos se pasan a la función en formato JSON.
-
La función activa el SDK de PDF & Screenshot y se pasa el cuerpo de la solicitud y se genera el documento PDF. El PDF se almacena entonces en una ubicación temporal.
-
Se activa el SDK de Send Mail y el documento PDF se lee desde la ubicación temporal y se adjunta al correo electrónico. El correo electrónico se envía al empleado desde el ID de correo electrónico configurado usando el componente Mail.
-
Se mostrará una respuesta con el mensaje de confirmación en el lado del client, después de que el documento PDF haya sido enviado por correo electrónico.
Última actualización 2026-03-24 17:38:39 +0530 IST