add total hour for event

This commit is contained in:
2026-04-29 18:04:46 +02:00
parent a3f76c05d6
commit 75e51dacdc
3 changed files with 23 additions and 3 deletions
+10
View File
@@ -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
View File
@@ -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
View File
@@ -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() {