julle/zynktime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add total hour for event

Browse Source
This commit is contained in:
julle
2026-04-29 18:04:46 +02:00
parent a3f76c05d6
commit 75e51dacdc
3 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/style.css
+10
View File
@@ -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;
static/index.html
+3 -2
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
</head>
<body>
@@ -112,6 +112,7 @@
<div class="approval-actions">
<button class="btn btn-secondary" id="loadEvents">Load Events</button>
<button class="btn btn-primary" id="approveEvents">Approve Events</button>
<div id="eventsTotal" class="events-total" style="display: none;"></div>
</div>
<div class="events-list" id="eventsList">
<div class="loading">No events loaded yet</div>
@@ -154,6 +155,6 @@
<p>Processing your request...</p>
</div>
<script src="/static/js/app.js"></script>
<script src="/static/js/app.js?v=2"></script>
</body>
</html>
static/js/app.js
+10 -1
View File
@@ -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 = '<div class="loading">No events found for range</div>';
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 = `
<div>
<div class="project-name">${event.date || 'Unknown date'}</div>
<div class="event-meta">
<span>Hours: ${event.hours ?? '-'}</span>
<span>Hours: ${hours.toFixed(2)}</span>
<span>Activity: ${event.activity?.id ?? '-'}</span>
<span>Project: ${event["client-project"]?.id ?? '-'}</span>
</div>
@@ -375,6 +381,9 @@ function renderEvents(events) {
`;
eventsList.appendChild(item);
});
eventsTotal.innerHTML = `Total Hours: <strong>${totalHours.toFixed(2)}</strong>`;
eventsTotal.style.display = 'block';
}
function getDateRange() {