add total hour for event
This commit is contained in:
@@ -496,6 +496,16 @@ input:focus {
|
|||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.events-total {
|
||||||
|
margin-left: auto;
|
||||||
|
background: rgba(15, 118, 110, 0.1);
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
border: 1px solid var(--primary-light);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
.events-list {
|
.events-list {
|
||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|||||||
+3
-2
@@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>ZynkTime - Time Reporting</title>
|
<title>ZynkTime - Time Reporting</title>
|
||||||
<link rel="stylesheet" href="/static/css/style.css">
|
<link rel="stylesheet" href="/static/css/style.css?v=2">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -112,6 +112,7 @@
|
|||||||
<div class="approval-actions">
|
<div class="approval-actions">
|
||||||
<button class="btn btn-secondary" id="loadEvents">Load Events</button>
|
<button class="btn btn-secondary" id="loadEvents">Load Events</button>
|
||||||
<button class="btn btn-primary" id="approveEvents">Approve Events</button>
|
<button class="btn btn-primary" id="approveEvents">Approve Events</button>
|
||||||
|
<div id="eventsTotal" class="events-total" style="display: none;"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="events-list" id="eventsList">
|
<div class="events-list" id="eventsList">
|
||||||
<div class="loading">No events loaded yet</div>
|
<div class="loading">No events loaded yet</div>
|
||||||
@@ -154,6 +155,6 @@
|
|||||||
<p>Processing your request...</p>
|
<p>Processing your request...</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="/static/js/app.js"></script>
|
<script src="/static/js/app.js?v=2"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+10
-1
@@ -25,6 +25,7 @@ const endDateInput = document.getElementById('endDate');
|
|||||||
const loadEventsBtn = document.getElementById('loadEvents');
|
const loadEventsBtn = document.getElementById('loadEvents');
|
||||||
const approveEventsBtn = document.getElementById('approveEvents');
|
const approveEventsBtn = document.getElementById('approveEvents');
|
||||||
const eventsList = document.getElementById('eventsList');
|
const eventsList = document.getElementById('eventsList');
|
||||||
|
const eventsTotal = document.getElementById('eventsTotal');
|
||||||
|
|
||||||
// Initialize
|
// Initialize
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
@@ -352,19 +353,24 @@ projectSelect.addEventListener('change', updateSubmitButton);
|
|||||||
function renderEvents(events) {
|
function renderEvents(events) {
|
||||||
if (!events || events.length === 0) {
|
if (!events || events.length === 0) {
|
||||||
eventsList.innerHTML = '<div class="loading">No events found for range</div>';
|
eventsList.innerHTML = '<div class="loading">No events found for range</div>';
|
||||||
|
eventsTotal.style.display = 'none';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let totalHours = 0;
|
||||||
eventsList.innerHTML = '';
|
eventsList.innerHTML = '';
|
||||||
events.forEach(event => {
|
events.forEach(event => {
|
||||||
const approved = event.approved;
|
const approved = event.approved;
|
||||||
|
const hours = parseFloat(event.hours) || 0;
|
||||||
|
totalHours += hours;
|
||||||
|
|
||||||
const item = document.createElement('div');
|
const item = document.createElement('div');
|
||||||
item.className = 'event-item';
|
item.className = 'event-item';
|
||||||
item.innerHTML = `
|
item.innerHTML = `
|
||||||
<div>
|
<div>
|
||||||
<div class="project-name">${event.date || 'Unknown date'}</div>
|
<div class="project-name">${event.date || 'Unknown date'}</div>
|
||||||
<div class="event-meta">
|
<div class="event-meta">
|
||||||
<span>Hours: ${event.hours ?? '-'}</span>
|
<span>Hours: ${hours.toFixed(2)}</span>
|
||||||
<span>Activity: ${event.activity?.id ?? '-'}</span>
|
<span>Activity: ${event.activity?.id ?? '-'}</span>
|
||||||
<span>Project: ${event["client-project"]?.id ?? '-'}</span>
|
<span>Project: ${event["client-project"]?.id ?? '-'}</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -375,6 +381,9 @@ function renderEvents(events) {
|
|||||||
`;
|
`;
|
||||||
eventsList.appendChild(item);
|
eventsList.appendChild(item);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
eventsTotal.innerHTML = `Total Hours: <strong>${totalHours.toFixed(2)}</strong>`;
|
||||||
|
eventsTotal.style.display = 'block';
|
||||||
}
|
}
|
||||||
|
|
||||||
function getDateRange() {
|
function getDateRange() {
|
||||||
|
|||||||
Reference in New Issue
Block a user