367 lines
13 KiB
HTML
367 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Tasks</title>
|
|
<style>
|
|
body {
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f8f9fa;
|
|
color: #333;
|
|
}
|
|
|
|
h1, h2 {
|
|
text-align: center;
|
|
color: #007bff;
|
|
}
|
|
|
|
table {
|
|
width: 90%;
|
|
margin: 10px auto;
|
|
border-collapse: collapse;
|
|
background-color: #fff;
|
|
font-size: 0.85em;
|
|
transition: opacity 0.3s ease-in-out;
|
|
margin-left: 285px;
|
|
}
|
|
|
|
th, td {
|
|
padding: 8px 10px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
th {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
|
|
.main-task-row {
|
|
background-color: #e3f2fd;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.subtask-row td {
|
|
background-color: #fefefe;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.button-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 10px;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.button-container a,
|
|
.button-container button {
|
|
padding: 10px 20px;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
background-color: #007bff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button-container a {
|
|
background-color: green;
|
|
}
|
|
|
|
.top-buttons {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
}
|
|
|
|
.top-buttons button {
|
|
padding: 8px;
|
|
font-size: 12px;
|
|
background-color: #28a745;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.top-buttons button:hover {
|
|
background-color: #218838;
|
|
}
|
|
|
|
.static-text {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
.edit-field {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#searchBox {
|
|
width: 300px;
|
|
padding: 8px;
|
|
margin: 0 auto 10px;
|
|
display: block;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#taskTableWrapper {
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
.spinner {
|
|
margin: 15px auto;
|
|
border: 4px solid #f3f3f3;
|
|
border-top: 4px solid #007bff;
|
|
border-radius: 50%;
|
|
width: 36px;
|
|
height: 36px;
|
|
animation: spin 0.8s linear infinite;
|
|
display: none;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Sidebar Styling */
|
|
.sidebar {
|
|
width: 250px;
|
|
background-color: #f4f4f4;
|
|
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
|
padding: 20px;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.sidebar .logo {
|
|
width: 60px;
|
|
height: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
.sidebar a {
|
|
display: block;
|
|
color: #333;
|
|
text-decoration: none;
|
|
padding: 10px 15px;
|
|
margin: 10px 0;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sidebar a:hover {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
.header {
|
|
width: 100%;
|
|
background-color: #007bff;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 15px 0;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Sidebar -->
|
|
<div class="sidebar">
|
|
<img
|
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA+CAYAAAB3NHh5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4JpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4NkEzOEVGMzEwQTQxMUU4QUFBQkY0QTA2QzlEM0MxNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2QUQzQTIzRDE4NTkxMUU4ODE2Q0IwMTY0RjgxQTVGNyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2QUQzQTIzQzE4NTkxMUU4ODE2Q0IwMTY0RjgxQTVGNyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNS41IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmJhNmE4ZTBmLTI5ZWItNDBlMy05ZWFhLTYzNTdiYjdkMzcwNCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmRhMjgyMWMwLTYwYmQtMTE3Yi04ZGU3LWNjZmQ1MDgzNjUxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrVd/GcAAASESURBVHja7FtrSBRRFL7rrg9MMjUzspTSSqUg6GFBmohh9SeIMOhXhBX0KzL80YN+SBD+qJ+RBhFEQogV0RMLKyuiqIig6GlZRmlRavl2O8c9I7dtZ2adM3d9zB742GHuzpn7zZl7zrnn3nF5vV7hJHEh4aLKaxfgeAXAjee0NoDX7ziCjl2yDsANwHbAsQD3mALYA3ii04e9gEZAP6BM5z9nAA2AKos8FwK+1pcX53noxCJAMuPBzQLEATbotEfpnMeHfIiuSzK4vhnw2KA9GJkryGIoz5hvyjlAr0F7e4BzuYBbdPwG8Mvg+m+APmYfh/qgWbiXqWzQpN3fUSyj19hj8gbYKV7Zwsp9hXS8BHBXIhsqiQglYTf9LgbcGQWywxKqG7cAssiy0aMVkWQLpzGVoYfvMWjvBlQwyKKPiWT2MU628DZACkPZa0CGQXs00zHOBnwBrLF4fTbgnb+X7mJ0qN/EH3iZYUVLfKz2sQMwSSZ8kkKFVTkKOKxw/KF1Zkhx26rUaFb5xFTUpjiWRtmQeHSGMiyNGQkTdgrhVKaeJBvycbM4zE2S/vHSpTRv7beo7CEgXiFh7GwTTSetCE5/f8iEMdOaajJFM5KtgHyFhDcC/gBeMfKEeJnwAcDyMTz0FgAqmTowG6zWxnCrA/zVc9lp9TmAcEgLAOE4HCY8zgoAZuI28RPdiuO45umHw9LuIKoWHPlOiY1RNeIETfI5gkWM6YABv/MZFMeHCWONOAFwWRFhrKjkEPFAshMwB/CReZ9LZn/QCM8ErBe+ZQ9VUid8JdpAclH4llO40kmFjBdmTmsXYL4NFQWzIkGXDt7adA8cGlgZzQrGS+OMpABwW2HVwkrbSAWH5gNBa0nBhCUk3TjOQ9BkIp0phyQ9wl6a+dwb56QTiEOmkNa2IgzyzpWA+zZ2oMNiG0eSydLp/l5aj/Qq4VsLyrXh5jgJz9NpK1Bo6UQqHuCCfbVZ2aSP5smbBW+pYx5gh4FDRM+6D/BZEWksQf2ULVxC5g80L8YqyFPx/xrvSOQUjaUSnfYyevWyFVr6t0wY92AsVXizJJNximnfFuFbAVElGHnyNKfVothjDpr4iyjNAgqlVfbSA+GKR7gAMLEIexzA1SMTjnUA4VjZspsAMQxluGqxVqhbFMetjQcB7xk6umXChUZzyCCkFnBcIeGblI3tZ+h4if3UCJczE49EoXbLA87VcWNLBUMHLvjVamO42YZqxljf8tAcjsNOIuxyGuEMGyoLPQr72SP4Ww/T5LBURZ226rweyWUUC+I2mW9jZ3GTeCnjHk0y4fOCNl8yvHQO4/oBYbzJPIaszKmmdsiEa4R+vSkYwe0IRyxee0X4PkEoNPgPfiKQSsmDVcHaXL5HshBH2i2OsauAdXRstNgWacOcvU12WtyPl6xcf53yb01Ub7sIeQHA6zcZKJ7IiYdMth5QNNpxOJ2pZ5rJGMZcGOvbuEq4WifZSWHoD0bSZS99FvCB6QHRcdXptONOuNP0KuuN+wYiZkV/MPJg6Ck77WPLvwIMAHzX4zyhUFlrAAAAAElFTkSuQmCC"
|
|
alt="LCEPL Logo"
|
|
class="logo"
|
|
/>
|
|
<a href="/">Dashboard</a>
|
|
<a href="/upload_excel">Upload Excel</a>
|
|
<a href="/generate_report_page">Print Report</a>
|
|
<!--<a href="/tasks">Show Tasks</a>-->
|
|
<a href="/filter_tasks">Filter Tasks</a>
|
|
</div>
|
|
<div class="header">LAXMI CIVIL ENGINEERING SERVICES PVT. LTD.</div>
|
|
<h1>Uploaded Tasks</h1>
|
|
|
|
<div class="top-buttons">
|
|
<button onclick="window.location.href='/'">Home Page</button>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<a href="/generate_report_page">Print Task Wise Report</a>
|
|
<button onclick="toggleEditMode()">Edit Tasks</button>
|
|
<button onclick="cancelEditMode()" id="cancelBtn" style="display: none; background-color: #dc3545;">Cancel Edit</button>
|
|
<button onclick="submitChangedFields()">Submit Updates</button>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="text" id="searchBox" placeholder="Search tasks..." />
|
|
</div>
|
|
|
|
{% if work_details %}
|
|
<h2>Work Details</h2>
|
|
<table class="work-details">
|
|
<tr><th>Name of Work</th><td>{{ work_details.name_of_work }}</td></tr>
|
|
<tr><th>Cover Agreement No</th><td>{{ work_details.cover_agreement_no }}</td></tr>
|
|
<tr><th>Name of Contractor</th><td>{{ work_details.name_of_contractor }}</td></tr>
|
|
<tr><th>Name of TPI Agency</th><td>{{ work_details.name_of_tpi_agency }}</td></tr>
|
|
<tr><th>Name of Division</th><td>{{ work_details.name_of_division }}</td></tr>
|
|
<tr><th>Name of District</th><td>{{ work_details.district }}</td></tr>
|
|
<tr><th>Village</th><td>{{ work_details.name_of_village }}</td></tr>
|
|
<tr><th>Block</th><td>{{ work_details.block }}</td></tr>
|
|
<tr><th>Scheme ID</th><td>{{ work_details.scheme_id }}</td></tr>
|
|
<tr><th>Measurement Book</th><td>{{ work_details.measurement_book }}</td></tr>
|
|
<tr><th>Date of Billing</th><td>{{ work_details.date_of_billing }}</td></tr>
|
|
</table>
|
|
{% endif %}
|
|
|
|
<h2>Task Details</h2>
|
|
<div class="spinner" id="loader"></div>
|
|
|
|
<div id="taskTableWrapper" style="opacity: 1;">
|
|
<form id="task-form">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Main Task</th>
|
|
<th>Unit</th>
|
|
<th>Qty</th>
|
|
<th>Rate</th>
|
|
<th>BOQ Amt</th>
|
|
<th>Prev Billed Qty</th>
|
|
<th>Prev Bill Amt</th>
|
|
<th>RA Bill Qty</th>
|
|
<th>RA Bill Amt</th>
|
|
<th>Cum Billed Qty</th>
|
|
<th>Cum Billed Amt</th>
|
|
<th>Var Qty</th>
|
|
<th>Var Amt</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for group in grouped_tasks %}
|
|
<tr class="main-task-row">
|
|
{% for field in ["task_name", "unit", "qty", "rate", "boq_amount", "previous_billed_qty", "previous_billing_amount", "in_this_ra_bill_qty", "in_this_ra_billing_amount", "cumulative_billed_qty", "cumulative_billed_amount", "variation_qty", "variation_amount"] %}
|
|
<td>
|
|
<span class="static-text">{{ group[field] }}</span>
|
|
<input type="text" class="edit-field" name="{{ field }}_{{ group.id }}" value="{{ group[field] }}" data-original-value="{{ group[field] | trim }}" style="display: none;" />
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% for sub in group.subtasks %}
|
|
<tr class="subtask-row">
|
|
{% for field in ["task_name", "unit", "qty", "rate", "boq_amount", "previous_billed_qty", "previous_billing_amount", "in_this_ra_bill_qty", "in_this_ra_billing_amount", "cumulative_billed_qty", "cumulative_billed_amount", "variation_qty", "variation_amount"] %}
|
|
<td>
|
|
<span class="static-text">{{ sub[field] }}</span>
|
|
<input type="text" class="edit-field" name="{{ field }}_{{ sub.id }}" value="{{ sub[field] }}" data-original-value="{{ sub[field] | trim }}" style="display: none;" />
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
|
|
function toggleEditMode() {
|
|
document.querySelectorAll('.static-text').forEach(span => span.style.display = 'none');
|
|
document.querySelectorAll('.edit-field').forEach(input => input.style.display = 'inline-block');
|
|
document.getElementById('cancelBtn').style.display = 'inline-block';
|
|
}
|
|
|
|
function cancelEditMode() {
|
|
document.querySelectorAll('.static-text').forEach(span => span.style.display = 'inline-block');
|
|
document.querySelectorAll('.edit-field').forEach(input => {
|
|
input.style.display = 'none';
|
|
input.value = input.getAttribute('data-original-value');
|
|
});
|
|
document.getElementById('cancelBtn').style.display = 'none';
|
|
}
|
|
|
|
function submitChangedFields() {
|
|
const updates = {};
|
|
document.querySelectorAll('.edit-field').forEach(input => {
|
|
const original = input.getAttribute('data-original-value') || '';
|
|
const current = input.value.trim();
|
|
if (current !== original.trim()) {
|
|
updates[input.name] = current;
|
|
}
|
|
});
|
|
|
|
if (Object.keys(updates).length === 0) {
|
|
alert("No changes made.");
|
|
return;
|
|
}
|
|
|
|
fetch('/update_tasks', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(updates)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
alert(data.message || 'Update complete!');
|
|
window.location.reload();
|
|
})
|
|
.catch(error => {
|
|
console.error('Update error:', error);
|
|
alert('Error updating tasks');
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const searchBox = document.getElementById("searchBox");
|
|
const tableWrapper = document.getElementById("taskTableWrapper");
|
|
const loader = document.getElementById("loader");
|
|
|
|
document.querySelectorAll("tbody tr").forEach(row => {
|
|
const text = Array.from(row.querySelectorAll("td")).map(cell => {
|
|
const span = cell.querySelector(".static-text")?.innerText || '';
|
|
const input = cell.querySelector(".edit-field")?.value || '';
|
|
return (span + " " + input).toLowerCase();
|
|
}).join(" ");
|
|
row.setAttribute("data-search-text", text);
|
|
});
|
|
|
|
let timeout;
|
|
searchBox.addEventListener("input", function () {
|
|
clearTimeout(timeout);
|
|
loader.style.display = "block";
|
|
tableWrapper.style.opacity = "0.3";
|
|
|
|
const term = this.value.toLowerCase();
|
|
|
|
timeout = setTimeout(() => {
|
|
document.querySelectorAll("tbody tr").forEach(row => {
|
|
const searchable = row.getAttribute("data-search-text");
|
|
row.style.display = searchable.includes(term) ? "" : "none";
|
|
});
|
|
loader.style.display = "none";
|
|
tableWrapper.style.opacity = "1";
|
|
}, 150);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|