jens/TimeTrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add date/time formatting options.

Browse Source
This commit is contained in:
Jens Luedicke
2025-07-02 16:36:23 +02:00
committed by Jens Luedicke
parent 197ffde545
commit f641be6026
5 changed files with 356 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
templates/config.html
View File

@@ -46,6 +46,43 @@
</div>
</div>
<div class="form-section">
<h3>Display Format Settings</h3>
<p class="section-description">
Customize how dates and times are displayed throughout the application.
</p>
<div class="form-group">
<label for="date_format">Date Format:</label>
<select id="date_format" name="date_format">
{% for value, label, example in date_format_options %}
<option value="{{ value }}" {% if config.date_format == value %}selected{% endif %}>
{{ label }}
</option>
{% endfor %}
</select>
<small>Choose how dates are displayed</small>
</div>
<div class="form-group">
<div class="checkbox-group">
<input type="checkbox"
id="time_format_24h"
name="time_format_24h"
{% if config.time_format_24h %}checked{% endif %}>
<label for="time_format_24h">Use 24-hour time format</label>
<small>If unchecked, will use 12-hour format with AM/PM</small>
</div>
</div>
<div class="format-example" id="format-example">
<h4>Example:</h4>
<div id="format-example-text">
<!-- JavaScript will populate this -->
</div>
</div>
</div>
<div class="form-section">
<h3>Time Rounding Settings</h3>
<p class="section-description">
@@ -89,11 +126,59 @@
<script>
document.addEventListener('DOMContentLoaded', function() {
const dateFormatSelect = document.getElementById('date_format');
const timeFormat24hCheckbox = document.getElementById('time_format_24h');
const formatExampleDiv = document.getElementById('format-example-text');
const roundingSelect = document.getElementById('time_rounding_minutes');
const roundToNearestCheckbox = document.getElementById('round_to_nearest');
const exampleDiv = document.getElementById('example-text');
function updateExample() {
function updateFormatExample() {
const dateFormat = dateFormatSelect.value;
const timeFormat24h = timeFormat24hCheckbox.checked;
// Create a sample date for demonstration
const sampleDate = new Date(2024, 11, 25, 14, 30, 45); // Dec 25, 2024, 2:30:45 PM
let dateExample = '';
let timeExample = '';
// Format date examples
switch(dateFormat) {
case 'ISO':
dateExample = '2024-12-25';
break;
case 'US':
dateExample = '12/25/2024';
break;
case 'EU':
case 'UK':
dateExample = '25/12/2024';
break;
case 'Readable':
dateExample = 'Dec 25, 2024';
break;
case 'Full':
dateExample = 'December 25, 2024';
break;
}
// Format time examples
if (timeFormat24h) {
timeExample = '14:30:45';
} else {
timeExample = '2:30:45 PM';
}
formatExampleDiv.innerHTML = `
<strong>Date:</strong> ${dateExample}<br>
<strong>Time:</strong> ${timeExample}<br>
<strong>Combined:</strong> ${dateExample} ${timeExample}
`;
}
function updateRoundingExample() {
const interval = parseInt(roundingSelect.value);
const roundToNearest = roundToNearestCheckbox.checked;
@@ -142,12 +227,15 @@ document.addEventListener('DOMContentLoaded', function() {
exampleDiv.innerHTML = exampleText;
}
// Update example when settings change
roundingSelect.addEventListener('change', updateExample);
roundToNearestCheckbox.addEventListener('change', updateExample);
// Update examples when settings change
dateFormatSelect.addEventListener('change', updateFormatExample);
timeFormat24hCheckbox.addEventListener('change', updateFormatExample);
roundingSelect.addEventListener('change', updateRoundingExample);
roundToNearestCheckbox.addEventListener('change', updateRoundingExample);
// Initial example
updateExample();
// Initial examples
updateFormatExample();
updateRoundingExample();
});
</script>
@@ -186,5 +274,18 @@ document.addEventListener('DOMContentLoaded', function() {
margin-top: 0;
color: #2e7d32;
}
.format-example {
background: #e3f2fd;
padding: 1rem;
border-radius: 6px;
margin-top: 1rem;
border-left: 4px solid #2196f3;
}
.format-example h4 {
margin-top: 0;
color: #1976d2;
}
</style>
{% endblock %}

20
templates/index.html
View File

@@ -19,7 +19,7 @@ Please <a href="{{ url_for('login') }}">login</a> or <a href="{{ url_for('regist
{% if active_entry %}
<div class="active-timer">
<h3>Currently Working</h3>
<p>Started at: {{ active_entry.arrival_time.strftime('%Y-%m-%d %H:%M:%S') }}</p>
<p>Started at: {{ active_entry.arrival_time|format_datetime }}</p>
{% if active_entry.project %}
<p class="project-info">Project: <strong>{{ active_entry.project.code }} - {{ active_entry.project.name }}</strong></p>
{% endif %}
@@ -29,11 +29,11 @@ Please <a href="{{ url_for('login') }}">login</a> or <a href="{{ url_for('regist
data-paused="{{ 'true' if active_entry.is_paused else 'false' }}">00:00:00</div>
{% if active_entry.is_paused %}
<p class="break-info">On break since {{ active_entry.pause_start_time.strftime('%H:%M:%S') }}</p>
<p class="break-info">On break since {{ active_entry.pause_start_time|format_time }}</p>
{% endif %}
{% if active_entry.total_break_duration > 0 %}
<p class="break-total">Total break time: {{ '%d:%02d:%02d'|format(active_entry.total_break_duration//3600, (active_entry.total_break_duration%3600)//60, active_entry.total_break_duration%60) }}</p>
<p class="break-total">Total break time: {{ active_entry.total_break_duration|format_duration }}</p>
{% endif %}
<div class="button-group">
@@ -85,7 +85,7 @@ Please <a href="{{ url_for('login') }}">login</a> or <a href="{{ url_for('regist
<tbody>
{% for entry in history %}
<tr data-entry-id="{{ entry.id }}">
<td>{{ entry.arrival_time.strftime('%Y-%m-%d') }}</td>
<td>{{ entry.arrival_time|format_date }}</td>
<td>
{% if entry.project %}
<span class="project-tag">{{ entry.project.code }}</span>
@@ -94,10 +94,10 @@ Please <a href="{{ url_for('login') }}">login</a> or <a href="{{ url_for('regist
<em>No project</em>
{% endif %}
</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>{{ 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 is not none else 'In progress' }}</td>
<td>{{ entry.total_break_duration|format_duration if entry.total_break_duration is not none else '0m' }}</td>
<td>
{% if entry.departure_time and not active_entry %}
<button class="resume-work-btn" data-id="{{ entry.id }}">Resume Work</button>
@@ -298,8 +298,8 @@ Please <a href="{{ url_for('login') }}">login</a> or <a href="{{ url_for('regist
// 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();
const arrivalTimeStr = cells[2].textContent.trim(); // arrival time is now in column 2
const departureTimeStr = cells[3].textContent.trim(); // departure time is now in column 3
// Set values in the form
document.getElementById('edit-entry-id').value = entryId;