234 lines
9.8 KiB
HTML
234 lines
9.8 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="timetrack-container">
|
|
<h1>Time Tracking</h1>
|
|
|
|
<div class="timer-section">
|
|
{% if active_entry %}
|
|
<div class="active-timer">
|
|
<h2>Currently Working</h2>
|
|
<p>Started at: {{ active_entry.arrival_time|format_datetime }}</p>
|
|
<div id="timer" data-start="{{ active_entry.arrival_time.timestamp() }}">00:00:00</div>
|
|
<button id="leave-btn" class="leave-btn" data-id="{{ active_entry.id }}">Leave</button>
|
|
</div>
|
|
{% else %}
|
|
<div class="inactive-timer">
|
|
<h2>Not Currently Working</h2>
|
|
<button id="arrive-btn" class="arrive-btn">Arrive</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="history-section">
|
|
<h2>Time Entry History</h2>
|
|
<!-- Time history table -->
|
|
<table class="time-history">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Arrival</th>
|
|
<th>Departure</th>
|
|
<th>Duration</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="time-history-body">
|
|
{% for entry in history %}
|
|
<tr data-entry-id="{{ entry.id }}" data-iso-date="{{ entry.arrival_time.strftime('%Y-%m-%d') }}">
|
|
<td>{{ entry.arrival_time|format_date }}</td>
|
|
<td>{{ entry.arrival_time|format_time }}</td>
|
|
<td>{{ entry.departure_time|format_time if entry.departure_time else 'Active' }}</td>
|
|
<td>{{ entry.duration|format_duration if entry.duration else 'N/A' }}</td>
|
|
<td>
|
|
<button class="edit-entry-btn" data-id="{{ entry.id }}">Edit</button>
|
|
<button class="delete-entry-btn" data-id="{{ entry.id }}">Delete</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Edit Entry Modal -->
|
|
<div id="edit-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close">×</span>
|
|
<h3>Edit Time Entry</h3>
|
|
<form id="edit-entry-form">
|
|
<input type="hidden" id="edit-entry-id">
|
|
<div class="form-group">
|
|
<label for="edit-arrival-date">Arrival Date:</label>
|
|
<input type="date" id="edit-arrival-date" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-arrival-time">Arrival Time:</label>
|
|
<input type="time" id="edit-arrival-time" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-departure-date">Departure Date:</label>
|
|
<input type="date" id="edit-departure-date">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-departure-time">Departure Time:</label>
|
|
<input type="time" id="edit-departure-time">
|
|
</div>
|
|
<button type="submit" class="btn">Save Changes</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<div id="delete-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close">×</span>
|
|
<h3>Confirm Deletion</h3>
|
|
<p>Are you sure you want to delete this time entry? This action cannot be undone.</p>
|
|
<input type="hidden" id="delete-entry-id">
|
|
<div class="modal-actions">
|
|
<button id="confirm-delete" class="btn btn-danger">Delete</button>
|
|
<button id="cancel-delete" class="btn">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Edit entry functionality
|
|
document.querySelectorAll('.edit-entry-btn').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const entryId = this.getAttribute('data-id');
|
|
const row = document.querySelector(`tr[data-entry-id="${entryId}"]`);
|
|
const cells = row.querySelectorAll('td');
|
|
|
|
// Get date and time from the row
|
|
const dateStr = cells[0].textContent;
|
|
const arrivalTimeStr = cells[1].textContent;
|
|
const departureTimeStr = cells[2].textContent !== 'Active' ? cells[2].textContent : '';
|
|
|
|
// For edit form, we need ISO format (YYYY-MM-DD)
|
|
// Parse the displayed date back to ISO format
|
|
const entryRow = document.querySelector(`tr[data-entry-id="${entryId}"]`);
|
|
const isoDate = entryRow.dataset.isoDate || dateStr;
|
|
|
|
// Set values in the form
|
|
document.getElementById('edit-entry-id').value = entryId;
|
|
document.getElementById('edit-arrival-date').value = isoDate;
|
|
document.getElementById('edit-arrival-time').value = arrivalTimeStr;
|
|
|
|
if (departureTimeStr) {
|
|
document.getElementById('edit-departure-date').value = isoDate;
|
|
document.getElementById('edit-departure-time').value = departureTimeStr;
|
|
} else {
|
|
document.getElementById('edit-departure-date').value = '';
|
|
document.getElementById('edit-departure-time').value = '';
|
|
}
|
|
|
|
// Show the modal
|
|
document.getElementById('edit-modal').style.display = 'block';
|
|
});
|
|
});
|
|
|
|
// Delete entry functionality
|
|
document.querySelectorAll('.delete-entry-btn').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const entryId = this.getAttribute('data-id');
|
|
document.getElementById('delete-entry-id').value = entryId;
|
|
document.getElementById('delete-modal').style.display = 'block';
|
|
});
|
|
});
|
|
|
|
// Close modals when clicking the X
|
|
document.querySelectorAll('.close').forEach(closeBtn => {
|
|
closeBtn.addEventListener('click', function() {
|
|
this.closest('.modal').style.display = 'none';
|
|
});
|
|
});
|
|
|
|
// Close modals when clicking outside
|
|
window.addEventListener('click', function(event) {
|
|
if (event.target.classList.contains('modal')) {
|
|
event.target.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Cancel delete
|
|
document.getElementById('cancel-delete').addEventListener('click', function() {
|
|
document.getElementById('delete-modal').style.display = 'none';
|
|
});
|
|
|
|
// Confirm delete
|
|
document.getElementById('confirm-delete').addEventListener('click', function() {
|
|
const entryId = document.getElementById('delete-entry-id').value;
|
|
|
|
fetch(`/api/delete/${entryId}`, {
|
|
method: 'DELETE',
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Remove the row from the table
|
|
document.querySelector(`tr[data-entry-id="${entryId}"]`).remove();
|
|
// Close the modal
|
|
document.getElementById('delete-modal').style.display = 'none';
|
|
// Show success message
|
|
alert('Entry deleted successfully');
|
|
} else {
|
|
alert('Error: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('An error occurred while deleting the entry');
|
|
});
|
|
});
|
|
|
|
// Submit edit form
|
|
document.getElementById('edit-entry-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const entryId = document.getElementById('edit-entry-id').value;
|
|
const arrivalDate = document.getElementById('edit-arrival-date').value;
|
|
const arrivalTime = document.getElementById('edit-arrival-time').value;
|
|
const departureDate = document.getElementById('edit-departure-date').value;
|
|
const departureTime = document.getElementById('edit-departure-time').value;
|
|
|
|
// Format datetime strings as ISO 8601
|
|
const arrivalDateTime = `${arrivalDate}T${arrivalTime}:00`;
|
|
let departureDateTime = null;
|
|
|
|
if (departureDate && departureTime) {
|
|
departureDateTime = `${departureDate}T${departureTime}:00`;
|
|
}
|
|
|
|
// Send update request
|
|
fetch(`/api/update/${entryId}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
arrival_time: arrivalDateTime,
|
|
departure_time: departureDateTime
|
|
}),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Close the modal
|
|
document.getElementById('edit-modal').style.display = 'none';
|
|
// Refresh the page to show updated data
|
|
location.reload();
|
|
} else {
|
|
alert('Error: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('An error occurred while updating the entry');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |