From 75e51dacdcfcab2938f05ce2d1bc1a5ade2ae405 Mon Sep 17 00:00:00 2001 From: julle Date: Wed, 29 Apr 2026 18:04:46 +0200 Subject: [PATCH] add total hour for event --- static/css/style.css | 10 ++++++++++ static/index.html | 5 +++-- static/js/app.js | 11 ++++++++++- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 936e517..0198f83 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -496,6 +496,16 @@ input:focus { 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 { grid-column: 1 / -1; display: grid; diff --git a/static/index.html b/static/index.html index 08f28e8..a9312c5 100644 --- a/static/index.html +++ b/static/index.html @@ -4,7 +4,7 @@ ZynkTime - Time Reporting - + @@ -112,6 +112,7 @@
+
No events loaded yet
@@ -154,6 +155,6 @@

Processing your request...

- + diff --git a/static/js/app.js b/static/js/app.js index b918f8e..eaf59b9 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -25,6 +25,7 @@ const endDateInput = document.getElementById('endDate'); const loadEventsBtn = document.getElementById('loadEvents'); const approveEventsBtn = document.getElementById('approveEvents'); const eventsList = document.getElementById('eventsList'); +const eventsTotal = document.getElementById('eventsTotal'); // Initialize document.addEventListener('DOMContentLoaded', () => { @@ -352,19 +353,24 @@ projectSelect.addEventListener('change', updateSubmitButton); function renderEvents(events) { if (!events || events.length === 0) { eventsList.innerHTML = '
No events found for range
'; + eventsTotal.style.display = 'none'; return; } + let totalHours = 0; eventsList.innerHTML = ''; events.forEach(event => { const approved = event.approved; + const hours = parseFloat(event.hours) || 0; + totalHours += hours; + const item = document.createElement('div'); item.className = 'event-item'; item.innerHTML = `
${event.date || 'Unknown date'}
- Hours: ${event.hours ?? '-'} + Hours: ${hours.toFixed(2)} Activity: ${event.activity?.id ?? '-'} Project: ${event["client-project"]?.id ?? '-'}
@@ -375,6 +381,9 @@ function renderEvents(events) { `; eventsList.appendChild(item); }); + + eventsTotal.innerHTML = `Total Hours: ${totalHours.toFixed(2)}`; + eventsTotal.style.display = 'block'; } function getDateRange() {