Improve logging features (edit and delete).
This commit is contained in:
Jens Luedicke
@@ -1,22 +0,0 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<section class="contact">
|
||||
<h1>Contact Us</h1>
|
||||
<form method="POST" action="{{ url_for('contact') }}">
|
||||
<div class="form-group">
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message">Message:</label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
</div>
|
||||
<button type="submit">Send Message</button>
|
||||
</form>
|
||||
</section>
|
||||
{% endblock %}
|
||||
234
templates/history.html
Normal file
234
templates/history.html
Normal file
@@ -0,0 +1,234 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="timetrack-container">
|
||||
<h2>Complete Time Entry History</h2>
|
||||
|
||||
<div class="history-section">
|
||||
{% if entries %}
|
||||
<table class="time-history">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Arrival</th>
|
||||
<th>Departure</th>
|
||||
<th>Work Duration</th>
|
||||
<th>Break Duration</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for entry in entries %}
|
||||
<tr data-entry-id="{{ entry.id }}">
|
||||
<td>{{ entry.arrival_time.strftime('%Y-%m-%d') }}</td>
|
||||
<td>{{ entry.arrival_time.strftime('%H:%M:%S') }}</td>
|
||||
<td>{{ entry.departure_time.strftime('%H:%M:%S') if entry.departure_time else 'Active' }}</td>
|
||||
<td>{{ '%d:%02d:%02d'|format(entry.duration//3600, (entry.duration%3600)//60, entry.duration%60) if entry.duration is not none else 'In progress' }}</td>
|
||||
<td>{{ '%d:%02d:%02d'|format(entry.total_break_duration//3600, (entry.total_break_duration%3600)//60, entry.total_break_duration%60) if entry.total_break_duration is not none else '00:00:00' }}</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>
|
||||
{% else %}
|
||||
<p>No time entries recorded yet.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<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.trim();
|
||||
const arrivalTimeStr = cells[1].textContent.trim();
|
||||
const departureTimeStr = cells[2].textContent.trim();
|
||||
|
||||
// Set values in the form
|
||||
document.getElementById('edit-entry-id').value = entryId;
|
||||
document.getElementById('edit-arrival-date').value = dateStr;
|
||||
|
||||
// Format time for input (HH:MM format)
|
||||
document.getElementById('edit-arrival-time').value = arrivalTimeStr.substring(0, 5);
|
||||
|
||||
if (departureTimeStr && departureTimeStr !== 'Active') {
|
||||
document.getElementById('edit-departure-date').value = dateStr;
|
||||
document.getElementById('edit-departure-time').value = departureTimeStr.substring(0, 5);
|
||||
} 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 || '';
|
||||
|
||||
// Ensure we have seconds in the time strings
|
||||
const arrivalTimeWithSeconds = arrivalTime.includes(':') ?
|
||||
(arrivalTime.split(':').length === 2 ? arrivalTime + ':00' : arrivalTime) :
|
||||
arrivalTime + ':00:00';
|
||||
|
||||
// Format datetime strings for the API (YYYY-MM-DD HH:MM:SS)
|
||||
const arrivalDateTime = `${arrivalDate} ${arrivalTimeWithSeconds}`;
|
||||
let departureDateTime = null;
|
||||
|
||||
if (departureDate && departureTime) {
|
||||
const departureTimeWithSeconds = departureTime.includes(':') ?
|
||||
(departureTime.split(':').length === 2 ? departureTime + ':00' : departureTime) :
|
||||
departureTime + ':00:00';
|
||||
departureDateTime = `${departureDate} ${departureTimeWithSeconds}`;
|
||||
}
|
||||
|
||||
// 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 => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(data => {
|
||||
throw new Error(data.message || 'Server error');
|
||||
});
|
||||
}
|
||||
return 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: ' + error.message);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -53,16 +53,21 @@
|
||||
<th>Departure</th>
|
||||
<th>Work Duration</th>
|
||||
<th>Break Duration</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for entry in history %}
|
||||
<tr>
|
||||
<tr data-entry-id="{{ entry.id }}">
|
||||
<td>{{ entry.arrival_time.strftime('%Y-%m-%d') }}</td>
|
||||
<td>{{ entry.arrival_time.strftime('%H:%M:%S') }}</td>
|
||||
<td>{{ entry.departure_time.strftime('%H:%M:%S') }}</td>
|
||||
<td>{{ '%d:%02d:%02d'|format(entry.duration//3600, (entry.duration%3600)//60, entry.duration%60) }}</td>
|
||||
<td>{{ '%d:%02d:%02d'|format(entry.total_break_duration//3600, (entry.total_break_duration%3600)//60, entry.total_break_duration%60) }}</td>
|
||||
<td>{{ entry.departure_time.strftime('%H:%M:%S') if entry.departure_time else 'Active' }}</td>
|
||||
<td>{{ '%d:%02d:%02d'|format(entry.duration//3600, (entry.duration%3600)//60, entry.duration%60) if entry.duration is not none else 'In progress' }}</td>
|
||||
<td>{{ '%d:%02d:%02d'|format(entry.total_break_duration//3600, (entry.total_break_duration%3600)//60, entry.total_break_duration%60) if entry.total_break_duration is not none else '00:00:00' }}</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>
|
||||
@@ -91,4 +96,207 @@
|
||||
<p>No complicated setup or configuration needed. Start tracking right away!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<small>Format: YYYY-MM-DD</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-arrival-time">Arrival Time (24h):</label>
|
||||
<input type="time" id="edit-arrival-time" required step="1">
|
||||
<small>Format: HH:MM (24-hour)</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-departure-date">Departure Date:</label>
|
||||
<input type="date" id="edit-departure-date">
|
||||
<small>Format: YYYY-MM-DD</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-departure-time">Departure Time (24h):</label>
|
||||
<input type="time" id="edit-departure-time" step="1">
|
||||
<small>Format: HH:MM (24-hour)</small>
|
||||
</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>
|
||||
|
||||
<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.trim();
|
||||
const arrivalTimeStr = cells[1].textContent.trim();
|
||||
const departureTimeStr = cells[2].textContent.trim();
|
||||
|
||||
// Set values in the form
|
||||
document.getElementById('edit-entry-id').value = entryId;
|
||||
document.getElementById('edit-arrival-date').value = dateStr;
|
||||
|
||||
// Format time for input (HH:MM format)
|
||||
document.getElementById('edit-arrival-time').value = arrivalTimeStr.substring(0, 5);
|
||||
|
||||
if (departureTimeStr && departureTimeStr !== 'Active') {
|
||||
document.getElementById('edit-departure-date').value = dateStr;
|
||||
document.getElementById('edit-departure-time').value = departureTimeStr.substring(0, 5);
|
||||
} 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 || '';
|
||||
|
||||
// Ensure we have seconds in the time strings
|
||||
const arrivalTimeWithSeconds = arrivalTime.includes(':') ?
|
||||
(arrivalTime.split(':').length === 2 ? arrivalTime + ':00' : arrivalTime) :
|
||||
arrivalTime + ':00:00';
|
||||
|
||||
// Format datetime strings for the API (YYYY-MM-DD HH:MM:SS)
|
||||
const arrivalDateTime = `${arrivalDate} ${arrivalTimeWithSeconds}`;
|
||||
let departureDateTime = null;
|
||||
|
||||
if (departureDate && departureTime) {
|
||||
const departureTimeWithSeconds = departureTime.includes(':') ?
|
||||
(departureTime.split(':').length === 2 ? departureTime + ':00' : departureTime) :
|
||||
departureTime + ':00:00';
|
||||
departureDateTime = `${departureDate} ${departureTimeWithSeconds}`;
|
||||
}
|
||||
|
||||
console.log('Sending update:', {
|
||||
arrival_time: arrivalDateTime,
|
||||
departure_time: departureDateTime
|
||||
});
|
||||
|
||||
// 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 => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(data => {
|
||||
throw new Error(data.message || 'Server error');
|
||||
});
|
||||
}
|
||||
return 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: ' + error.message);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
@@ -11,10 +11,9 @@
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="{{ url_for('home') }}">Home</a></li>
|
||||
<li><a href="{{ url_for('about') }}">About</a></li>
|
||||
<li><a href="{{ url_for('contact') }}">Contact</a></li>
|
||||
<!-- Add this to your navigation menu -->
|
||||
<li><a href="{{ url_for('history') }}">Complete History</a></li>
|
||||
<li><a href="{{ url_for('config') }}" {% if title == 'Configuration' %}class="active"{% endif %}>Configuration</a></li>
|
||||
<li><a href="{{ url_for('about') }}">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
@@ -24,7 +23,7 @@
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2023 TimeTrack</p>
|
||||
<p>© 2025 TimeTrack</p>
|
||||
</footer>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
|
||||
|
||||
@@ -22,30 +22,212 @@
|
||||
|
||||
<div class="history-section">
|
||||
<h2>Time Entry History</h2>
|
||||
{% if history %}
|
||||
<table class="time-history">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Arrival</th>
|
||||
<th>Departure</th>
|
||||
<th>Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for entry in history %}
|
||||
<tr>
|
||||
<td>{{ entry.arrival_time.strftime('%Y-%m-%d') }}</td>
|
||||
<td>{{ entry.arrival_time.strftime('%H:%M:%S') }}</td>
|
||||
<td>{{ entry.departure_time.strftime('%H:%M:%S') }}</td>
|
||||
<td>{{ '%d:%02d:%02d'|format(entry.duration//3600, (entry.duration%3600)//60, entry.duration%60) }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<p>No time entries recorded yet.</p>
|
||||
{% endif %}
|
||||
<!-- 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 }}">
|
||||
<td>{{ entry.arrival_time.strftime('%Y-%m-%d') }}</td>
|
||||
<td>{{ entry.arrival_time.strftime('%H:%M:%S') }}</td>
|
||||
<td>{{ entry.departure_time.strftime('%H:%M:%S') if entry.departure_time else 'Active' }}</td>
|
||||
<td>{{ (entry.duration // 3600)|string + 'h ' + ((entry.duration % 3600) // 60)|string + 'm' 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 : '';
|
||||
|
||||
// Parse date and time
|
||||
const arrivalDate = new Date(`${dateStr}T${arrivalTimeStr}`);
|
||||
|
||||
// Set values in the form
|
||||
document.getElementById('edit-entry-id').value = entryId;
|
||||
document.getElementById('edit-arrival-date').value = dateStr;
|
||||
document.getElementById('edit-arrival-time').value = arrivalTimeStr;
|
||||
|
||||
if (departureTimeStr) {
|
||||
const departureDate = new Date(`${dateStr}T${departureTimeStr}`);
|
||||
document.getElementById('edit-departure-date').value = dateStr;
|
||||
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
|
||||
const arrivalDateTime = `${arrivalDate} ${arrivalTime}:00`;
|
||||
let departureDateTime = null;
|
||||
|
||||
if (departureDate && departureTime) {
|
||||
departureDateTime = `${departureDate} ${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 %}
|
||||
Reference in New Issue
Block a user