Scribd
Upload
7 views6 pages

Emptimesheet

The document is a PHP script that manages a professional timesheet for logged-in users, retrieving employee details from a database. It includes HTML and JavaScript for rendering a user interface where employees can input their work hours and project details for each day of a selected month. The script also features styling for the layout and interactive elements, such as dynamically generating rows for each day and calculating total hours worked.

Uploaded by

ramanan Loganathan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views6 pages

Emptimesheet

The document is a PHP script that manages a professional timesheet for logged-in users, retrieving employee details from a database. It includes HTML and JavaScript for rendering a user interface where employees can input their work hours and project details for each day of a selected month. The script also features styling for the layout and interactive elements, such as dynamically generating rows for each day and calculating total hours worked.

Uploaded by

ramanan Loganathan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<?

php
// Start the session to access logged-in user details
session_start();

if (!isset($_SESSION['username'])) {
die("You must be logged in to view this page.");
}

// // Assuming the username is stored in the session variable


// $username = $_SESSION['username']; // Adjust this according to how your
login system stores the username

include_once "../config/dbconnect.php";

// Assuming the username is stored in the session variable


$username = $_SESSION['username']; // Adjust this according to how your
login system stores the username

// Fetch all necessary data


$query = "SELECT first_name, last_name, employee_id, reporting_manager FROM
employee_details WHERE first_name = '$username'"; // Filter by first_name instead
of username
$result = $conn->query($query);

// Check if there's at least one employee


if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
$first_name = $row['first_name'];
$last_name = $row['last_name'];
$employee_id = $row['employee_id'];
$reporting_manager = $row['reporting_manager'];

// while ($row = $result->fetch_assoc()) {


// echo "Employee ID: " . $row['employee_id'] . "<br>";
// }
} else {
$employee_id = "No Employee ID Found";
// echo "No employee ID found.";
}

// Default to placeholder if no profile image exists

?>

<script src="https://kit.fontawesome.com/a076d05399.js"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
></script>
<script src="https://smtpjs.com/v3/smtp.js"></script> <!-- Correct placement of the
SMTP.js script -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Professional Timesheet</title>

<form action="./controller/submit_timesheet.php" method="post">

<style>
/* Styling the submit button */
button {
background-color: lightgreen; /* Light green color */
color: white; /* Text color */
border: none; /* Remove border */
padding: 10px 20px; /* Increase padding for width and height */
font-size: 16px; /* Font size */
cursor: pointer; /* Change cursor to pointer on hover */
width: 100px; /* Set button width */
}

/* Add hover effect */


button:hover {
background-color: #32cd32; /* Darker green on hover */
}
</style>

<style>
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Roboto', sans-serif;
background: #ffffff;
color: #1e1d1d;
padding: 20px;
}

.timesheet-container {
max-width: 1200px;
margin: 0 auto;
background: #ffffff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
overflow-y:auto;
}

h2 {
text-align: left;
font-weight: 700;
color:rgb(8, 2, 92);
margin-bottom: 20px;
}

/* Header Inputs */
.header {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 20px;
}

.header label {
display: flex;
flex-direction: column;
font-size: 14px;
font-weight: 500;
color: #555;
}

.header input, .header select {


padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
background: #f9f9f9;
margin-top: 5px;
}
#timesheet-body{
overflow-y: auto;
}
/* Table Styling */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
text-align: left;
}

table th {
background-color:rgb(24, 30, 102);
color: #ffffff;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
padding: 10px;
border: 1px solid #ddd;
}

table td {
padding: 10px;
border: 1px solid #ddd;
font-size: 14px;
background-color: #fefefe;
}

table tr:nth-child(even) td {
background-color: #f7f7f7;
}

.weekend td {
background-color:rgb(156, 255, 164);
}

.input-box {
width: 30%;
margin-right: 10px;
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 12px;
}

.add-button {
background-color: #4CAF50;
color: white;
border: none;
padding: 5px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}

.add-button:hover {
background-color: #45a049;
}

.totals {
margin-top: 20px;
display: flex;
justify-content: flex-end;
font-size: 14px;
font-weight: 500;
color: #333;
}

.totals div {
margin-left: 20px;
}

.project-container .entry-row {
display: flex;
align-items: center;
margin-bottom: 5px;
}

</style>
</head>
<body>
<div class="timesheet-container">

<!-- Header Section -->


<div class="header">
<tr>
<th> Name:11
<input type="text" id="name" placeholder="<?php echo $first_name,"
", $last_name ?>"> </th>

<th> EMP ID:


<input type="text" id="emp-id" placeholder="<?php echo $employee_id ?>">
</th>
<!-- placeholder="Enter EMP ID"> -->
<th>
Reporting Manager:
<!-- <select id="reporting-manager">
<option value="">Select Manager</option>
<option value="Navin">Navin</option>
<option value="Loganathan">Loganathan</option>
<option value="Deepak">Deepak</option>
<option value="Raja">Raja</option>
</select> -->
</th>
<input type="text" id="reporting_manager" value="<?php echo
$reporting_manager ?>">

<th>
Month:
<input type="month" id="month" onchange="updateDates()">
</th>
</div>

<!-- Table Section -->


<table>
<thead>
<tr align="center">
<th style="width: 150px;"><b>Date</b></th>
<th><b>Details</b</th>
</tr>
</thead>
<tbody id="timesheet-body">
<!-- Rows will be dynamically generated here -->
</tbody>
</table>
<button type="submit">Submit</button>

<!-- Totals -->


<div class="totals">
<div>Total Hours Worked: <span id="total-hours">0</span></div>
</div>
</div>
<div class="footer">
&copy; GenNext PLM
</div>

<script>
function updateDates() {
const monthInput = document.getElementById('month').value;
if (!monthInput) return;

const [year, month] = monthInput.split('-').map(Number);


const daysInMonth = new Date(year, month, 0).getDate();

const tableBody = document.getElementById('timesheet-body');


tableBody.innerHTML = ''; // Clear previous rows

for (let day = 1; day <= daysInMonth; day++) {


const date = new Date(year, month - 1, day);
const dayOfWeek = date.getDay();
const weekendClass = (dayOfWeek === 0 || dayOfWeek === 6) ?
'weekend' : '';
const row = `
<tr class="${weekendClass}">
<td>${day.toString().padStart(2, '0')}/$
{month.toString().padStart(2, '0')}/${year}</td>
<td>
<div class="project-container">
${generateEntryRow()}
</div>
</td>
</tr>
`;
tableBody.insertAdjacentHTML('beforeend', row);
}
}

function generateEntryRow() {
return `
<div class="entry-row">
<input type="text" class="input-box" placeholder="Enter
project">
<input type="text" class="input-box" placeholder="Enter task">
<input type="number" class="input-box hours-input"
placeholder="Enter no of hours worked" min="0" onchange="updateTotalHours()">
<button class="add-button" onclick="addRow(this)">+</button>
</div>
`;
}

function addRow(button) {
const projectContainer = button.closest('.project-container');
projectContainer.insertAdjacentHTML('beforeend', generateEntryRow());
}

function updateTotalHours() {
let totalHours = 0;
document.querySelectorAll('.hours-input').forEach(input => {
totalHours += Number(input.value) || 0;
});
document.getElementById('total-hours').textContent = totalHours;
}
</script>

</form>

</body>
</html>

You might also like