Consolitated History views.
This commit is contained in:
Jens Luedicke
658
templates/analytics.html
Normal file
658
templates/analytics.html
Normal file
@@ -0,0 +1,658 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="timetrack-container">
|
||||
<div class="analytics-header">
|
||||
<h2>📊 Time Analytics</h2>
|
||||
<div class="mode-switcher">
|
||||
<button class="mode-btn {% if mode == 'personal' %}active{% endif %}"
|
||||
onclick="switchMode('personal')">Personal</button>
|
||||
{% if g.user.team_id and g.user.role.value in ['Team Leader', 'Supervisor', 'Administrator'] %}
|
||||
<button class="mode-btn {% if mode == 'team' %}active{% endif %}"
|
||||
onclick="switchMode('team')">Team</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Unified Filter Panel -->
|
||||
<div class="filter-panel">
|
||||
<div class="filter-row">
|
||||
<div class="filter-group">
|
||||
<label for="start-date">Start Date:</label>
|
||||
<input type="date" id="start-date" value="{{ default_start_date }}">
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="end-date">End Date:</label>
|
||||
<input type="date" id="end-date" value="{{ default_end_date }}">
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="project-filter">Project:</label>
|
||||
<select id="project-filter">
|
||||
<option value="">All Projects</option>
|
||||
<option value="none">No Project Assigned</option>
|
||||
{% for project in available_projects %}
|
||||
<option value="{{ project.id }}">{{ project.code }} - {{ project.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<button id="apply-filters" class="btn btn-primary">Apply Filters</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- View Tabs -->
|
||||
<div class="view-tabs">
|
||||
<button class="tab-btn active" data-view="table">📋 Table View</button>
|
||||
<button class="tab-btn" data-view="graph">📈 Graph View</button>
|
||||
{% if mode == 'team' %}
|
||||
<button class="tab-btn" data-view="team">👥 Team Summary</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Loading Indicator -->
|
||||
<div id="loading-indicator" class="loading" style="display: none;">
|
||||
<div class="spinner"></div>
|
||||
Loading analytics data...
|
||||
</div>
|
||||
|
||||
<!-- Error Display -->
|
||||
<div id="error-display" class="error-message" style="display: none;"></div>
|
||||
|
||||
<!-- Table View -->
|
||||
<div id="table-view" class="view-content active">
|
||||
<div class="view-header">
|
||||
<h3>Detailed Time Entries</h3>
|
||||
<div class="export-buttons">
|
||||
<button class="btn btn-secondary" onclick="exportData('csv', 'table')">Export CSV</button>
|
||||
<button class="btn btn-secondary" onclick="exportData('excel', 'table')">Export Excel</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table id="entries-table" class="time-history">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
{% if mode == 'team' %}
|
||||
<th>User</th>
|
||||
{% endif %}
|
||||
<th>Project</th>
|
||||
<th>Arrival</th>
|
||||
<th>Departure</th>
|
||||
<th>Duration</th>
|
||||
<th>Break</th>
|
||||
<th>Notes</th>
|
||||
{% if mode == 'personal' %}
|
||||
<th>Actions</th>
|
||||
{% endif %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="entries-tbody">
|
||||
<tr>
|
||||
<td colspan="{% if mode == 'team' %}8{% else %}9{% endif %}" class="text-center">
|
||||
Click "Apply Filters" to load data
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Graph View -->
|
||||
<div id="graph-view" class="view-content">
|
||||
<div class="view-header">
|
||||
<h3>Visual Analytics</h3>
|
||||
<div class="chart-controls">
|
||||
<select id="chart-type">
|
||||
<option value="timeSeries">Time Series</option>
|
||||
<option value="projectDistribution">Project Distribution</option>
|
||||
</select>
|
||||
<div class="export-buttons">
|
||||
<button class="btn btn-secondary" onclick="exportChart('png')">Export PNG</button>
|
||||
<button class="btn btn-secondary" onclick="exportChart('pdf')">Export PDF</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="charts-container">
|
||||
<div class="chart-wrapper">
|
||||
<canvas id="main-chart"></canvas>
|
||||
</div>
|
||||
<div class="chart-stats">
|
||||
<div class="stat-card">
|
||||
<h4>Total Hours</h4>
|
||||
<span id="total-hours">0</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h4>Total Days</h4>
|
||||
<span id="total-days">0</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h4>Average Hours/Day</h4>
|
||||
<span id="avg-hours">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team Summary View -->
|
||||
{% if mode == 'team' %}
|
||||
<div id="team-view" class="view-content">
|
||||
<div class="view-header">
|
||||
<h3>Team Hours Summary</h3>
|
||||
<div class="export-buttons">
|
||||
<button class="btn btn-secondary" onclick="exportData('csv', 'team')">Export CSV</button>
|
||||
<button class="btn btn-secondary" onclick="exportData('excel', 'team')">Export Excel</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-summary-container">
|
||||
<table id="team-table" class="time-history">
|
||||
<thead id="team-table-head">
|
||||
<tr>
|
||||
<th>Team Member</th>
|
||||
<th>Total Hours</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="team-tbody">
|
||||
<tr>
|
||||
<td colspan="2" class="text-center">
|
||||
Click "Apply Filters" to load team data
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Edit Modal (for personal mode) -->
|
||||
{% if mode == 'personal' %}
|
||||
<div id="editModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<span class="close">×</span>
|
||||
<h2>Edit Time Entry</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="editForm">
|
||||
<input type="hidden" id="editEntryId">
|
||||
<div class="form-group">
|
||||
<label for="editArrivalTime">Arrival Time:</label>
|
||||
<input type="datetime-local" id="editArrivalTime" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editDepartureTime">Departure Time:</label>
|
||||
<input type="datetime-local" id="editDepartureTime">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editNotes">Notes:</label>
|
||||
<textarea id="editNotes" rows="3"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeEditModal()">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" onclick="saveEntry()">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div id="deleteModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<span class="close">×</span>
|
||||
<h2>Confirm Deletion</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete this time entry? This action cannot be undone.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeDeleteModal()">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" onclick="confirmDelete()">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Chart.js CDN -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
|
||||
<script>
|
||||
// Global analytics state and controller
|
||||
let analyticsController;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
analyticsController = new TimeAnalyticsController();
|
||||
analyticsController.init();
|
||||
});
|
||||
|
||||
class TimeAnalyticsController {
|
||||
constructor() {
|
||||
this.state = {
|
||||
mode: '{{ mode }}',
|
||||
dateRange: {
|
||||
start: '{{ default_start_date }}',
|
||||
end: '{{ default_end_date }}'
|
||||
},
|
||||
selectedProject: '',
|
||||
activeView: 'table',
|
||||
data: null
|
||||
};
|
||||
this.charts = {};
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupEventListeners();
|
||||
// Auto-load data on initialization
|
||||
this.loadData();
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Filter controls
|
||||
document.getElementById('apply-filters').addEventListener('click', () => {
|
||||
this.updateFilters();
|
||||
this.loadData();
|
||||
});
|
||||
|
||||
// Tab switching
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
this.switchView(e.target.dataset.view);
|
||||
});
|
||||
});
|
||||
|
||||
// Chart type switching
|
||||
const chartTypeSelect = document.getElementById('chart-type');
|
||||
if (chartTypeSelect) {
|
||||
chartTypeSelect.addEventListener('change', () => {
|
||||
this.updateChart();
|
||||
});
|
||||
}
|
||||
|
||||
// Modal close handlers
|
||||
document.querySelectorAll('.close').forEach(closeBtn => {
|
||||
closeBtn.addEventListener('click', (e) => {
|
||||
e.target.closest('.modal').style.display = 'none';
|
||||
});
|
||||
});
|
||||
|
||||
// Click outside modal to close
|
||||
window.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('modal')) {
|
||||
e.target.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateFilters() {
|
||||
this.state.dateRange.start = document.getElementById('start-date').value;
|
||||
this.state.dateRange.end = document.getElementById('end-date').value;
|
||||
this.state.selectedProject = document.getElementById('project-filter').value;
|
||||
}
|
||||
|
||||
async loadData() {
|
||||
this.showLoading(true);
|
||||
this.hideError();
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
mode: this.state.mode,
|
||||
view: this.state.activeView,
|
||||
start_date: this.state.dateRange.start,
|
||||
end_date: this.state.dateRange.end
|
||||
});
|
||||
|
||||
if (this.state.selectedProject) {
|
||||
params.append('project_id', this.state.selectedProject);
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/analytics/data?${params}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Failed to load data');
|
||||
}
|
||||
|
||||
this.state.data = data;
|
||||
this.refreshCurrentView();
|
||||
|
||||
} catch (error) {
|
||||
this.showError(error.message);
|
||||
} finally {
|
||||
this.showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
refreshCurrentView() {
|
||||
switch (this.state.activeView) {
|
||||
case 'table':
|
||||
this.updateTableView();
|
||||
break;
|
||||
case 'graph':
|
||||
this.updateGraphView();
|
||||
break;
|
||||
case 'team':
|
||||
this.updateTeamView();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
switchView(viewType) {
|
||||
// Update tab appearance
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
document.querySelector(`[data-view="${viewType}"]`).classList.add('active');
|
||||
|
||||
// Show/hide view content
|
||||
document.querySelectorAll('.view-content').forEach(content => {
|
||||
content.classList.remove('active');
|
||||
});
|
||||
document.getElementById(`${viewType}-view`).classList.add('active');
|
||||
|
||||
this.state.activeView = viewType;
|
||||
|
||||
// Load data for new view if needed
|
||||
if (this.state.data) {
|
||||
this.refreshCurrentView();
|
||||
} else {
|
||||
this.loadData();
|
||||
}
|
||||
}
|
||||
|
||||
updateTableView() {
|
||||
const tbody = document.getElementById('entries-tbody');
|
||||
const entries = this.state.data.entries || [];
|
||||
|
||||
if (entries.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="9" class="text-center">No entries found for the selected criteria</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = entries.map(entry => `
|
||||
<tr>
|
||||
<td>${entry.date}</td>
|
||||
${this.state.mode === 'team' ? `<td>${entry.user_name}</td>` : ''}
|
||||
<td>
|
||||
${entry.project_code ? `<span class="project-tag">${entry.project_code}</span>` : ''}
|
||||
${entry.project_name}
|
||||
</td>
|
||||
<td>${entry.arrival_time}</td>
|
||||
<td>${entry.departure_time}</td>
|
||||
<td>${entry.duration}</td>
|
||||
<td>${entry.break_duration}</td>
|
||||
<td class="notes-preview" title="${entry.notes}">
|
||||
${entry.notes.length > 50 ? entry.notes.substring(0, 50) + '...' : entry.notes}
|
||||
</td>
|
||||
${this.state.mode === 'personal' ? `
|
||||
<td>
|
||||
<button class="btn btn-sm btn-primary" onclick="editEntry(${entry.id})">Edit</button>
|
||||
<button class="btn btn-sm btn-danger" onclick="deleteEntry(${entry.id})">Delete</button>
|
||||
</td>` : ''}
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
updateGraphView() {
|
||||
const data = this.state.data;
|
||||
if (!data) return;
|
||||
|
||||
// Update stats
|
||||
document.getElementById('total-hours').textContent = data.totalHours?.toFixed(1) || '0';
|
||||
document.getElementById('total-days').textContent = data.totalDays || '0';
|
||||
document.getElementById('avg-hours').textContent =
|
||||
data.totalDays > 0 ? (data.totalHours / data.totalDays).toFixed(1) : '0';
|
||||
|
||||
this.updateChart();
|
||||
}
|
||||
|
||||
updateChart() {
|
||||
const chartType = document.getElementById('chart-type').value;
|
||||
const canvas = document.getElementById('main-chart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Destroy existing chart
|
||||
if (this.charts.main) {
|
||||
this.charts.main.destroy();
|
||||
}
|
||||
|
||||
const data = this.state.data;
|
||||
if (!data) return;
|
||||
|
||||
if (chartType === 'timeSeries') {
|
||||
this.charts.main = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: data.timeSeries?.map(d => d.date) || [],
|
||||
datasets: [{
|
||||
label: 'Hours Worked',
|
||||
data: data.timeSeries?.map(d => d.hours) || [],
|
||||
borderColor: '#4CAF50',
|
||||
backgroundColor: 'rgba(76, 175, 80, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Daily Hours Worked'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Hours'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Date'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} else if (chartType === 'projectDistribution') {
|
||||
this.charts.main = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: data.projectDistribution?.map(d => d.project) || [],
|
||||
datasets: [{
|
||||
data: data.projectDistribution?.map(d => d.hours) || [],
|
||||
backgroundColor: [
|
||||
'#4CAF50', '#2196F3', '#FF9800', '#E91E63',
|
||||
'#9C27B0', '#00BCD4', '#8BC34A', '#FFC107'
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Time Distribution by Project'
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
updateTeamView() {
|
||||
const tbody = document.getElementById('team-tbody');
|
||||
const teamData = this.state.data.team_data || [];
|
||||
|
||||
if (teamData.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="2" class="text-center">No team data found</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = teamData.map(member => `
|
||||
<tr>
|
||||
<td>${member.username}</td>
|
||||
<td>${member.total_hours}h</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
showLoading(show) {
|
||||
const indicator = document.getElementById('loading-indicator');
|
||||
indicator.style.display = show ? 'block' : 'none';
|
||||
}
|
||||
|
||||
showError(message) {
|
||||
const errorDiv = document.getElementById('error-display');
|
||||
errorDiv.textContent = message;
|
||||
errorDiv.style.display = 'block';
|
||||
}
|
||||
|
||||
hideError() {
|
||||
document.getElementById('error-display').style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Global functions for mode switching and exports
|
||||
function switchMode(mode) {
|
||||
window.location.href = `/analytics/${mode}`;
|
||||
}
|
||||
|
||||
function exportData(format, viewType) {
|
||||
const params = new URLSearchParams({
|
||||
format: format,
|
||||
view: viewType,
|
||||
mode: analyticsController.state.mode,
|
||||
start_date: analyticsController.state.dateRange.start,
|
||||
end_date: analyticsController.state.dateRange.end
|
||||
});
|
||||
|
||||
if (analyticsController.state.selectedProject) {
|
||||
params.append('project_id', analyticsController.state.selectedProject);
|
||||
}
|
||||
|
||||
window.location.href = `/api/analytics/export?${params}`;
|
||||
}
|
||||
|
||||
function exportChart(format) {
|
||||
const chart = analyticsController.charts.main;
|
||||
if (!chart) return;
|
||||
|
||||
const canvas = chart.canvas;
|
||||
const link = document.createElement('a');
|
||||
|
||||
if (format === 'png') {
|
||||
link.download = 'analytics-chart.png';
|
||||
link.href = canvas.toDataURL('image/png');
|
||||
} else if (format === 'pdf') {
|
||||
// For PDF export, we'd need a library like jsPDF
|
||||
// For now, just export as PNG
|
||||
link.download = 'analytics-chart.png';
|
||||
link.href = canvas.toDataURL('image/png');
|
||||
}
|
||||
|
||||
link.click();
|
||||
}
|
||||
|
||||
// Entry management functions (personal mode only)
|
||||
{% if mode == 'personal' %}
|
||||
function editEntry(entryId) {
|
||||
// Find entry data
|
||||
const entry = analyticsController.state.data.entries.find(e => e.id === entryId);
|
||||
if (!entry) return;
|
||||
|
||||
// Populate modal
|
||||
document.getElementById('editEntryId').value = entryId;
|
||||
document.getElementById('editArrivalTime').value =
|
||||
`${entry.date}T${entry.arrival_time}`;
|
||||
|
||||
if (entry.departure_time !== 'Active') {
|
||||
document.getElementById('editDepartureTime').value =
|
||||
`${entry.date}T${entry.departure_time}`;
|
||||
}
|
||||
|
||||
document.getElementById('editNotes').value = entry.notes;
|
||||
|
||||
// Show modal
|
||||
document.getElementById('editModal').style.display = 'block';
|
||||
}
|
||||
|
||||
function closeEditModal() {
|
||||
document.getElementById('editModal').style.display = 'none';
|
||||
}
|
||||
|
||||
async function saveEntry() {
|
||||
const entryId = document.getElementById('editEntryId').value;
|
||||
const arrivalTime = document.getElementById('editArrivalTime').value;
|
||||
const departureTime = document.getElementById('editDepartureTime').value;
|
||||
const notes = document.getElementById('editNotes').value;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/update/${entryId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
arrival_time: arrivalTime,
|
||||
departure_time: departureTime || null,
|
||||
notes: notes
|
||||
})
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
closeEditModal();
|
||||
analyticsController.loadData(); // Refresh data
|
||||
} else {
|
||||
alert('Error updating entry: ' + result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Error updating entry: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
let entryToDelete = null;
|
||||
|
||||
function deleteEntry(entryId) {
|
||||
entryToDelete = entryId;
|
||||
document.getElementById('deleteModal').style.display = 'block';
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
document.getElementById('deleteModal').style.display = 'none';
|
||||
entryToDelete = null;
|
||||
}
|
||||
|
||||
async function confirmDelete() {
|
||||
if (!entryToDelete) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/delete/${entryToDelete}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
closeDeleteModal();
|
||||
analyticsController.loadData(); // Refresh data
|
||||
} else {
|
||||
alert('Error deleting entry: ' + result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Error deleting entry: ' + error.message);
|
||||
}
|
||||
}
|
||||
{% endif %}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -13,7 +13,7 @@
|
||||
Dashboard
|
||||
{% endif %}
|
||||
</h1>
|
||||
|
||||
|
||||
<!-- Quick Actions section -->
|
||||
<div class="quick-actions">
|
||||
<h2>Quick Actions</h2>
|
||||
@@ -23,13 +23,13 @@
|
||||
<p>Update your personal information and password.</p>
|
||||
<a href="{{ url_for('profile') }}" class="btn btn-secondary">Edit Profile</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="admin-card">
|
||||
<h2>Configuration</h2>
|
||||
<p>Configure work hours and break settings.</p>
|
||||
<a href="{{ url_for('config') }}" class="btn btn-secondary">Work Config</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="admin-card">
|
||||
<h2>Time History</h2>
|
||||
<p>View your complete time tracking history.</p>
|
||||
@@ -61,14 +61,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="admin-panel">
|
||||
<div class="admin-card">
|
||||
<h2>User Management</h2>
|
||||
<p>Manage user accounts, permissions, and roles.</p>
|
||||
<a href="{{ url_for('admin_users') }}" class="btn btn-primary">Manage Users</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="admin-card">
|
||||
<h2>Project Management</h2>
|
||||
<p>Manage projects, assign teams, and track project status.</p>
|
||||
@@ -88,12 +88,12 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<!-- Team Leader and Supervisor sections -->
|
||||
{% if g.user.role in [Role.TEAM_LEADER, Role.SUPERVISOR] or g.user.is_admin %}
|
||||
<div class="team-section">
|
||||
<h2>Team Management</h2>
|
||||
|
||||
|
||||
{% if teams %}
|
||||
<div class="team-stats">
|
||||
<div class="stat-card">
|
||||
@@ -105,14 +105,9 @@
|
||||
<p>Teams Managed</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="admin-panel">
|
||||
<div class="admin-card">
|
||||
<h2>Team Hours</h2>
|
||||
<p>View and monitor team member working hours.</p>
|
||||
<a href="{{ url_for('team_hours') }}" class="btn btn-primary">View Team Hours</a>
|
||||
</div>
|
||||
|
||||
|
||||
{% if g.user.is_admin %}
|
||||
<div class="admin-card">
|
||||
<h2>Team Configuration</h2>
|
||||
@@ -121,7 +116,7 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="team-members">
|
||||
<h3>Your Team Members</h3>
|
||||
{% if team_members %}
|
||||
@@ -152,7 +147,7 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<!-- Recent Activity section for all roles -->
|
||||
{% if recent_entries %}
|
||||
<div class="recent-activity">
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
<ul>
|
||||
{% if g.user %}
|
||||
<li><a href="{{ url_for('home') }}" data-tooltip="Home"><i class="nav-icon">🏠</i><span class="nav-text">Home</span></a></li>
|
||||
<li><a href="{{ url_for('history') }}" data-tooltip="History"><i class="nav-icon">📊</i><span class="nav-text">History</span></a></li>
|
||||
<li><a href="{{ url_for('analytics') }}" data-tooltip="Time Analytics"><i class="nav-icon">📊</i><span class="nav-text">Analytics</span></a></li>
|
||||
|
||||
<!-- Role-based menu items -->
|
||||
{% if g.user.is_admin %}
|
||||
@@ -45,9 +45,6 @@
|
||||
<li><a href="{{ url_for('admin_teams') }}" data-tooltip="Manage Teams"><i class="nav-icon">🏢</i><span class="nav-text">Manage Teams</span></a></li>
|
||||
<li><a href="{{ url_for('admin_projects') }}" data-tooltip="Manage Projects"><i class="nav-icon">📝</i><span class="nav-text">Manage Projects</span></a></li>
|
||||
<li><a href="{{ url_for('admin_settings') }}" data-tooltip="System Settings"><i class="nav-icon">🔧</i><span class="nav-text">System Settings</span></a></li>
|
||||
{% if g.user.team_id %}
|
||||
<li><a href="{{ url_for('team_hours') }}" data-tooltip="Team Hours"><i class="nav-icon">⏰</i><span class="nav-text">Team Hours</span></a></li>
|
||||
{% endif %}
|
||||
{% elif g.user.role in [Role.TEAM_LEADER, Role.SUPERVISOR] %}
|
||||
<li class="nav-divider">{{ g.user.username }}</li>
|
||||
<li><a href="{{ url_for('profile') }}" data-tooltip="Profile"><i class="nav-icon">👤</i><span class="nav-text">Profile</span></a></li>
|
||||
@@ -56,9 +53,6 @@
|
||||
{% if g.user.role == Role.SUPERVISOR %}
|
||||
<li><a href="{{ url_for('admin_projects') }}" data-tooltip="Manage Projects"><i class="nav-icon">📝</i><span class="nav-text">Manage Projects</span></a></li>
|
||||
{% endif %}
|
||||
{% if g.user.team_id %}
|
||||
<li><a href="{{ url_for('team_hours') }}" data-tooltip="Team Hours"><i class="nav-icon">⏰</i><span class="nav-text">Team Hours</span></a></li>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<li class="nav-divider">{{ g.user.username }}</li>
|
||||
<li><a href="{{ url_for('profile') }}" data-tooltip="Profile"><i class="nav-icon">👤</i><span class="nav-text">Profile</span></a></li>
|
||||
|
||||
@@ -1,237 +0,0 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="timetrack-container">
|
||||
<h2>Team Hours</h2>
|
||||
|
||||
<div class="date-filter">
|
||||
<form id="date-range-form" method="GET" action="{{ url_for('team_hours') }}">
|
||||
<div class="form-group">
|
||||
<label for="start-date">Start Date:</label>
|
||||
<input type="date" id="start-date" name="start_date" value="{{ start_date.strftime('%Y-%m-%d') }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="end-date">End Date:</label>
|
||||
<input type="date" id="end-date" name="end_date" value="{{ end_date.strftime('%Y-%m-%d') }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="include-self">
|
||||
<input type="checkbox" id="include-self" name="include_self" {% if request.args.get('include_self') %}checked{% endif %}> Include my hours
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn">Apply Filter</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Export Buttons -->
|
||||
<div class="export-button-container" id="export-buttons" style="display: none;">
|
||||
<h4>Export Team Hours</h4>
|
||||
<div class="quick-export-buttons">
|
||||
<button class="btn" onclick="exportTeamHours('csv')">Export as CSV</button>
|
||||
<button class="btn" onclick="exportTeamHours('excel')">Export as Excel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="team-hours-container">
|
||||
<div id="loading">Loading team data...</div>
|
||||
<div id="team-info" style="display: none;">
|
||||
<h3>Team: <span id="team-name"></span></h3>
|
||||
<p id="team-description"></p>
|
||||
</div>
|
||||
|
||||
<div id="team-hours-table" style="display: none;">
|
||||
<table class="time-history">
|
||||
<thead id="table-header">
|
||||
<tr>
|
||||
<th>Team Member</th>
|
||||
{% for date in date_range %}
|
||||
<th>{{ date.strftime('%a, %b %d') }}</th>
|
||||
{% endfor %}
|
||||
<th>Total Hours</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<!-- Team member data will be added dynamically -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="no-data" style="display: none;">
|
||||
<p>No time entries found for the selected date range.</p>
|
||||
</div>
|
||||
|
||||
<div id="error-message" style="display: none;" class="error-message">
|
||||
<!-- Error messages will be displayed here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="team-hours-details" id="member-details" style="display: none;">
|
||||
<h3>Detailed Entries for <span id="selected-member"></span></h3>
|
||||
<table class="time-history">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Arrival</th>
|
||||
<th>Departure</th>
|
||||
<th>Work Duration</th>
|
||||
<th>Break Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="details-body">
|
||||
<!-- Entry details will be added dynamically -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Load team hours data when the page loads
|
||||
loadTeamHoursData();
|
||||
|
||||
// Handle date filter form submission
|
||||
document.getElementById('date-range-form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
loadTeamHoursData();
|
||||
});
|
||||
|
||||
function loadTeamHoursData() {
|
||||
// Show loading indicator
|
||||
document.getElementById('loading').style.display = 'block';
|
||||
document.getElementById('team-hours-table').style.display = 'none';
|
||||
document.getElementById('team-info').style.display = 'none';
|
||||
document.getElementById('no-data').style.display = 'none';
|
||||
document.getElementById('error-message').style.display = 'none';
|
||||
document.getElementById('member-details').style.display = 'none';
|
||||
|
||||
// Get filter values
|
||||
const startDate = document.getElementById('start-date').value;
|
||||
const endDate = document.getElementById('end-date').value;
|
||||
const includeSelf = document.getElementById('include-self').checked;
|
||||
|
||||
// Build API URL with query parameters
|
||||
const apiUrl = `/api/team/hours_data?start_date=${startDate}&end_date=${endDate}&include_self=${includeSelf}`;
|
||||
|
||||
// Fetch data from API
|
||||
fetch(apiUrl)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(data => {
|
||||
throw new Error(data.message || 'Failed to load team hours data');
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
displayTeamData(data);
|
||||
} else {
|
||||
showError(data.message || 'Failed to load team hours data.');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching team hours data:', error);
|
||||
showError(error.message || 'An error occurred while loading the team hours data.');
|
||||
});
|
||||
}
|
||||
|
||||
function displayTeamData(data) {
|
||||
// Populate team info
|
||||
document.getElementById('team-name').textContent = data.team.name;
|
||||
document.getElementById('team-description').textContent = data.team.description || '';
|
||||
document.getElementById('team-info').style.display = 'block';
|
||||
|
||||
// Populate team hours table
|
||||
const tableHeader = document.getElementById('table-header').querySelector('tr');
|
||||
tableHeader.innerHTML = '<th>Team Member</th>';
|
||||
data.date_range.forEach(dateStr => {
|
||||
const th = document.createElement('th');
|
||||
th.textContent = new Date(dateStr).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
|
||||
tableHeader.appendChild(th);
|
||||
});
|
||||
const totalHoursTh = document.createElement('th');
|
||||
totalHoursTh.textContent = 'Total Hours';
|
||||
tableHeader.appendChild(totalHoursTh);
|
||||
|
||||
const tableBody = document.getElementById('table-body');
|
||||
tableBody.innerHTML = '';
|
||||
data.team_data.forEach(memberData => {
|
||||
const row = document.createElement('tr');
|
||||
|
||||
// Add username cell
|
||||
const usernameCell = document.createElement('td');
|
||||
usernameCell.textContent = memberData.user.username;
|
||||
row.appendChild(usernameCell);
|
||||
|
||||
// Add daily hours cells
|
||||
data.date_range.forEach(dateStr => {
|
||||
const cell = document.createElement('td');
|
||||
cell.textContent = `${memberData.daily_hours[dateStr] || 0}h`;
|
||||
row.appendChild(cell);
|
||||
});
|
||||
|
||||
// Add total hours cell
|
||||
const totalCell = document.createElement('td');
|
||||
totalCell.innerHTML = `<strong>${memberData.total_hours}h</strong>`;
|
||||
row.appendChild(totalCell);
|
||||
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
|
||||
// Populate detailed entries
|
||||
document.getElementById('team-hours-table').style.display = 'block';
|
||||
document.getElementById('export-buttons').style.display = 'block';
|
||||
document.getElementById('loading').style.display = 'none';
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
document.getElementById('error-message').textContent = message;
|
||||
document.getElementById('error-message').style.display = 'block';
|
||||
document.getElementById('loading').style.display = 'none';
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Export function (global scope)
|
||||
function exportTeamHours(format) {
|
||||
console.log('Export function called with format:', format);
|
||||
|
||||
try {
|
||||
// Get current filter values
|
||||
const startDate = document.getElementById('start-date').value;
|
||||
const endDate = document.getElementById('end-date').value;
|
||||
const includeSelf = document.getElementById('include-self').checked;
|
||||
|
||||
console.log('Filter values:', { startDate, endDate, includeSelf });
|
||||
|
||||
// Validate required fields
|
||||
if (!startDate || !endDate) {
|
||||
alert('Please select both start and end dates before exporting.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Build export URL with query parameters
|
||||
const exportUrl = `/download_team_hours_export?format=${format}&start_date=${startDate}&end_date=${endDate}&include_self=${includeSelf}`;
|
||||
|
||||
console.log('Export URL:', exportUrl);
|
||||
|
||||
// Show loading indicator
|
||||
const exportButtons = document.getElementById('export-buttons');
|
||||
const originalHTML = exportButtons.innerHTML;
|
||||
exportButtons.innerHTML = '<h4>Generating export...</h4><p>Please wait...</p>';
|
||||
|
||||
// Trigger download
|
||||
window.location.href = exportUrl;
|
||||
|
||||
// Restore buttons after a short delay
|
||||
setTimeout(() => {
|
||||
exportButtons.innerHTML = originalHTML;
|
||||
}, 2000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error in exportTeamHours:', error);
|
||||
alert('An error occurred while trying to export. Please try again.');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user