mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-01-01 01:01:24 -06:00
9a1603cfd8
feat(core/auth/ui): proxy-aware config, optional OIDC, i18n v4, health checks
- core: add ProxyFix, robust logging setup, rate-limit defaults; mask DB URL in logs
- db: prefer Postgres when POSTGRES_* envs present; initialization helpers and safe task table migration check
- i18n: upgrade to Flask-Babel v4 with locale selector; compile catalogs; add set-language route
- auth: optional OIDC via Authlib (login, callback, logout); login rate limiting; profile language and theme persistence; ensure admin promotion
- admin: branding logo upload/serve; PDF layout editor with preview/reset; backup/restore with progress; system info; license-server controls
- ui: new base layout with improved nav, mobile tab bar, theme/density toggles, CSRF meta + auto-injection, DataTables/Chart.js, Socket.IO boot
- ops: add /_health and /_ready endpoints; Docker healthcheck targets /_health; enable top-level templates via ChoiceLoader
- deps: update/add Authlib, Flask-Babel 4, and related security/util packages
Refs: app/__init__.py, app/config.py, app/routes/{auth,admin,main}.py, app/templates/base.html, Dockerfile, requirements.txt, templates/*
438 lines
26 KiB
HTML
438 lines
26 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ _('Edit Time Entry') }} - {{ app_name }}{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
{% if current_user.is_admin %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const projectSelect = document.getElementById('project_id');
|
|
const taskSelect = document.getElementById('task_id');
|
|
const form = document.querySelector('form');
|
|
|
|
if (projectSelect && taskSelect) {
|
|
projectSelect.addEventListener('change', function() {
|
|
const projectId = this.value;
|
|
|
|
// Clear current tasks
|
|
taskSelect.innerHTML = '<option value="">No Task</option>';
|
|
|
|
if (projectId) {
|
|
// Fetch tasks for the selected project
|
|
fetch(`/api/projects/${projectId}/tasks`, { credentials: 'same-origin' })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.tasks) {
|
|
data.tasks.forEach(task => {
|
|
const option = document.createElement('option');
|
|
option.value = task.id;
|
|
option.textContent = task.name;
|
|
taskSelect.appendChild(option);
|
|
});
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching tasks:', error);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Add form submission confirmation for admin users (custom modal)
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
// If we already confirmed, let it proceed
|
|
if (form.dataset.confirmed === '1') {
|
|
delete form.dataset.confirmed;
|
|
return true;
|
|
}
|
|
|
|
const originalProject = '{{ timer.project.name }}';
|
|
const selectedProject = projectSelect.options[projectSelect.selectedIndex].text;
|
|
const originalStart = '{{ timer.start_time.strftime("%Y-%m-%d %H:%M") }}';
|
|
const originalEnd = '{{ timer.end_time.strftime("%Y-%m-%d %H:%M") if timer.end_time else "Running" }}';
|
|
const originalNotes = {{ (timer.notes or '')|tojson }};
|
|
const originalTags = {{ (timer.tags or '')|tojson }};
|
|
const originalBillable = {{ 'true' if timer.billable else 'false' }};
|
|
|
|
const startDate = document.getElementById('start_date').value;
|
|
const startTime = document.getElementById('start_time').value;
|
|
const endDate = document.getElementById('end_date').value;
|
|
const endTime = document.getElementById('end_time').value;
|
|
const notesVal = document.getElementById('notes').value || '';
|
|
const tagsVal = document.getElementById('tags').value || '';
|
|
const billableVal = document.getElementById('billable').checked;
|
|
|
|
const newStart = startDate && startTime ? `${startDate} ${startTime}` : originalStart;
|
|
const newEnd = endDate && endTime ? `${endDate} ${endTime}` : originalEnd;
|
|
|
|
const changes = [];
|
|
if (originalProject !== selectedProject) changes.push({ label: 'Project', from: originalProject, to: selectedProject });
|
|
if (originalStart !== newStart) changes.push({ label: 'Start', from: originalStart, to: newStart });
|
|
if (originalEnd !== newEnd) changes.push({ label: 'End', from: originalEnd, to: newEnd });
|
|
if (originalNotes !== notesVal) changes.push({ label: 'Notes', from: originalNotes || '—', to: notesVal || '—' });
|
|
if (originalTags !== tagsVal) changes.push({ label: 'Tags', from: originalTags || '—', to: tagsVal || '—' });
|
|
if ((originalBillable ? true : false) !== billableVal) changes.push({ label: 'Billable', from: originalBillable ? 'Yes' : 'No', to: billableVal ? 'Yes' : 'No' });
|
|
|
|
if (changes.length > 0) {
|
|
e.preventDefault();
|
|
|
|
const modalEl = document.getElementById('confirmChangesModal');
|
|
const summaryEl = document.getElementById('confirmChangesSummary');
|
|
const confirmBtn = document.getElementById('confirmChangesConfirmBtn');
|
|
|
|
summaryEl.innerHTML = changes.map(ch => `
|
|
<div class="mb-2">
|
|
<div class="small text-muted">${ch.label}</div>
|
|
<div><span class="text-danger">${ch.from}</span> <i class="fas fa-arrow-right mx-2"></i> <span class="text-success">${ch.to}</span></div>
|
|
</div>
|
|
`).join('');
|
|
|
|
confirmBtn.onclick = function() {
|
|
const inst = bootstrap.Modal.getInstance(modalEl);
|
|
if (inst) inst.hide();
|
|
form.dataset.confirmed = '1';
|
|
if (typeof form.requestSubmit === 'function') {
|
|
form.requestSubmit();
|
|
} else {
|
|
form.submit();
|
|
}
|
|
};
|
|
|
|
// Ensure modal is attached to body to avoid stacking/pointer issues
|
|
try {
|
|
if (modalEl.parentElement !== document.body) {
|
|
document.body.appendChild(modalEl);
|
|
}
|
|
} catch (e) {}
|
|
const bsModal = new bootstrap.Modal(modalEl, { backdrop: 'static', keyboard: false });
|
|
bsModal.show();
|
|
// Focus confirm button when modal is shown
|
|
modalEl.addEventListener('shown.bs.modal', function onShown() {
|
|
confirmBtn.focus();
|
|
modalEl.removeEventListener('shown.bs.modal', onShown);
|
|
});
|
|
// Handle Enter/Escape keys inside modal
|
|
modalEl.addEventListener('keydown', (ev) => {
|
|
if (ev.key === 'Enter') {
|
|
ev.preventDefault();
|
|
confirmBtn.click();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Ensure admin save button programmatically submits the form (avoids any other JS interference)
|
|
const adminSaveBtn = document.getElementById('adminEditSaveBtn');
|
|
if (adminSaveBtn && form) {
|
|
adminSaveBtn.addEventListener('click', function(ev) {
|
|
ev.preventDefault();
|
|
if (typeof form.checkValidity === 'function' && !form.checkValidity()) {
|
|
if (typeof form.reportValidity === 'function') form.reportValidity();
|
|
return;
|
|
}
|
|
if (typeof form.requestSubmit === 'function') {
|
|
form.requestSubmit();
|
|
} else {
|
|
form.submit();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Live update duration when date/time fields change (admin form)
|
|
const startDate = document.getElementById('start_date');
|
|
const startTime = document.getElementById('start_time');
|
|
const endDate = document.getElementById('end_date');
|
|
const endTime = document.getElementById('end_time');
|
|
const durationLabel = document.getElementById('adminEditDuration');
|
|
function updateDuration() {
|
|
if (!startDate || !startTime || !endDate || !endTime || !durationLabel) return;
|
|
const sd = startDate.value;
|
|
const st = startTime.value;
|
|
const ed = endDate.value;
|
|
const et = endTime.value;
|
|
if (!sd || !st || !ed || !et) {
|
|
durationLabel.textContent = '--:--:--';
|
|
return;
|
|
}
|
|
const s = new Date(`${sd}T${st}`);
|
|
const e = new Date(`${ed}T${et}`);
|
|
const diff = Math.max(0, Math.floor((e - s) / 1000));
|
|
const h = Math.floor(diff / 3600);
|
|
const m = Math.floor((diff % 3600) / 60);
|
|
const srem = diff % 60;
|
|
durationLabel.textContent = `${h.toString().padStart(2,'0')}:${m.toString().padStart(2,'0')}:${srem.toString().padStart(2,'0')}`;
|
|
}
|
|
if (startDate && startTime && endDate && endTime) {
|
|
startDate.addEventListener('change', updateDuration);
|
|
startTime.addEventListener('change', updateDuration);
|
|
endDate.addEventListener('change', updateDuration);
|
|
endTime.addEventListener('change', updateDuration);
|
|
}
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="card">
|
|
<div class="card-header d-flex align-items-center justify-content-between">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-edit me-2 text-primary"></i>
|
|
<h5 class="mb-0">{{ _('Edit Time Entry') }}</h5>
|
|
</div>
|
|
{% if current_user.is_admin %}
|
|
<span class="badge bg-warning text-dark">
|
|
<i class="fas fa-shield-alt me-1"></i>{{ _('Admin Mode') }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-4">
|
|
{% if current_user.is_admin %}
|
|
<!-- Admin view with editable fields -->
|
|
<div class="alert alert-info mb-3">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
<strong>{{ _('Admin Mode:') }}</strong> {{ _('You can edit all fields of this time entry, including project, task, start/end times, and source.') }}
|
|
</div>
|
|
<form method="POST" action="{{ url_for('timer.edit_timer', timer_id=timer.id) }}">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-6">
|
|
<label for="project_id" class="form-label fw-semibold">
|
|
<i class="fas fa-project-diagram me-1"></i>{{ _('Project') }}
|
|
</label>
|
|
<select class="form-select" id="project_id" name="project_id" required>
|
|
{% for project in projects %}
|
|
<option value="{{ project.id }}" {% if project.id == timer.project_id %}selected{% endif %}>
|
|
{{ project.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<div class="form-text">{{ _('Select the project this time entry belongs to') }}</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="task_id" class="form-label fw-semibold">
|
|
<i class="fas fa-tasks me-1"></i>{{ _('Task (Optional)') }}
|
|
</label>
|
|
<select class="form-select" id="task_id" name="task_id">
|
|
<option value="">No Task</option>
|
|
{% for task in tasks %}
|
|
<option value="{{ task.id }}" {% if task.id == timer.task_id %}selected{% endif %}>
|
|
{{ task.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<div class="form-text">{{ _('Select a specific task within the project') }}</div>
|
|
</div>
|
|
</div>
|
|
<!-- Confirm Changes Modal (Admin) -->
|
|
<div class="modal fade" id="confirmChangesModal" tabindex="-1" role="dialog" aria-modal="true" data-bs-backdrop="static" data-bs-keyboard="false" style="z-index:1085;">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title"><i class="fas fa-exclamation-triangle text-warning me-2"></i>{{ _('Confirm Changes') }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="mb-3">{{ _('You are about to apply the following changes:') }}</p>
|
|
<div id="confirmChangesSummary"></div>
|
|
<div class="alert alert-warning mt-3 mb-0">
|
|
<i class="fas fa-info-circle me-1"></i>
|
|
{{ _('These updates will modify this time entry permanently.') }}
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
<i class="fas fa-times me-1"></i>{{ _('Cancel') }}
|
|
</button>
|
|
<button type="button" class="btn btn-primary" id="confirmChangesConfirmBtn">
|
|
<i class="fas fa-check me-1"></i>{{ _('Confirm & Save') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-6">
|
|
<label for="start_date" class="form-label fw-semibold">
|
|
<i class="fas fa-clock me-1"></i>{{ _('Start Date') }}
|
|
</label>
|
|
<input type="date" class="form-control" id="start_date" name="start_date"
|
|
value="{{ timer.start_time.strftime('%Y-%m-%d') }}" required>
|
|
<div class="form-text">{{ _('When the work started') }}</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="start_time" class="form-label fw-semibold">
|
|
<i class="fas fa-clock me-1"></i>{{ _('Start Time') }}
|
|
</label>
|
|
<input type="time" class="form-control" id="start_time" name="start_time"
|
|
value="{{ timer.start_time.strftime('%H:%M') }}" required>
|
|
<div class="form-text">{{ _('Time the work started') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-6">
|
|
<label for="end_date" class="form-label fw-semibold">
|
|
<i class="fas fa-stop-circle me-1"></i>{{ _('End Date') }}
|
|
</label>
|
|
<input type="date" class="form-control" id="end_date" name="end_date"
|
|
value="{{ timer.end_time.strftime('%Y-%m-%d') if timer.end_time else '' }}">
|
|
<div class="form-text">{{ _('When the work ended (leave empty if still running)') }}</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="end_time" class="form-label fw-semibold">
|
|
<i class="fas fa-stop-circle me-1"></i>{{ _('End Time') }}
|
|
</label>
|
|
<input type="time" class="form-control" id="end_time" name="end_time"
|
|
value="{{ timer.end_time.strftime('%H:%M') if timer.end_time else '' }}">
|
|
<div class="form-text">{{ _('Time the work ended') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-4">
|
|
<label for="source" class="form-label fw-semibold">
|
|
<i class="fas fa-tag me-1"></i>{{ _('Source') }}
|
|
</label>
|
|
<select class="form-select" id="source" name="source">
|
|
<option value="manual" {% if timer.source == 'manual' %}selected{% endif %}>{{ _('Manual') }}</option>
|
|
<option value="auto" {% if timer.source == 'auto' %}selected{% endif %}>{{ _('Automatic') }}</option>
|
|
</select>
|
|
<div class="form-text">{{ _('How this entry was created') }}</div>
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-center">
|
|
<div class="form-check form-switch mt-4">
|
|
<input class="form-check-input" type="checkbox" id="billable" name="billable" {% if timer.billable %}checked{% endif %}>
|
|
<label class="form-check-label fw-semibold" for="billable">
|
|
<i class="fas fa-dollar-sign me-1"></i>{{ _('Billable') }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-control-plaintext">
|
|
<strong>{{ _('Duration:') }}</strong> <span id="adminEditDuration">{{ timer.duration_formatted }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<!-- Regular user view (read-only) -->
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<div class="form-control-plaintext">
|
|
<strong>{{ _('Project:') }}</strong> {{ timer.project.name }}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-control-plaintext">
|
|
<strong>{{ _('Start:') }}</strong> {{ timer.start_time.strftime('%Y-%m-%d %H:%M') }}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-control-plaintext">
|
|
<strong>{{ _('End:') }}</strong>
|
|
{% if timer.end_time %}
|
|
{{ timer.end_time.strftime('%Y-%m-%d %H:%M') }}
|
|
{% else %}
|
|
<span class="text-warning">{{ _('Running') }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2">
|
|
<span class="badge bg-primary">{{ _('Duration:') }} {{ timer.duration_formatted }}</span>
|
|
{% if timer.source == 'manual' %}
|
|
<span class="badge bg-secondary">{{ _('Manual') }}</span>
|
|
{% else %}
|
|
<span class="badge bg-info">{{ _('Automatic') }}</span>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if current_user.is_admin %}
|
|
<!-- Admin form fields -->
|
|
<div class="mb-4">
|
|
<label for="notes" class="form-label fw-semibold">
|
|
<i class="fas fa-sticky-note me-1"></i>{{ _('Notes') }}
|
|
</label>
|
|
<textarea class="form-control" id="notes" name="notes" rows="3" placeholder="{{ _('Describe what you worked on') }}">{{ timer.notes or '' }}</textarea>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="mb-4">
|
|
<label for="tags" class="form-label fw-semibold">
|
|
<i class="fas fa-tags me-1"></i>{{ _('Tags') }}
|
|
</label>
|
|
<input type="text" class="form-control" id="tags" name="tags" placeholder="{{ _('tag1, tag2') }}" value="{{ timer.tags or '' }}">
|
|
<div class="form-text">{{ _('Separate tags with commas') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<a href="{{ url_for('main.dashboard') }}" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left me-1"></i>{{ _('Back') }}
|
|
</a>
|
|
<button type="submit" class="btn btn-primary" id="adminEditSaveBtn">
|
|
<i class="fas fa-save me-2"></i>{{ _('Save Changes') }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
{% else %}
|
|
<!-- Regular user form -->
|
|
<form method="POST" action="{{ url_for('timer.edit_timer', timer_id=timer.id) }}">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<div class="mb-4">
|
|
<label for="notes" class="form-label fw-semibold">
|
|
<i class="fas fa-sticky-note me-1"></i>{{ _('Notes') }}
|
|
</label>
|
|
<textarea class="form-control" id="notes" name="notes" rows="3" placeholder="{{ _('Describe what you worked on') }}">{{ timer.notes or '' }}</textarea>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="mb-4">
|
|
<label for="tags" class="form-label fw-semibold">
|
|
<i class="fas fa-tags me-1"></i>{{ _('Tags') }}
|
|
</label>
|
|
<input type="text" class="form-control" id="tags" name="tags" placeholder="{{ _('tag1, tag2') }}" value="{{ timer.tags or '' }}">
|
|
<div class="form-text">{{ _('Separate tags with commas') }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-center">
|
|
<div class="form-check form-switch mt-4">
|
|
<input class="form-check-input" type="checkbox" id="billable" name="billable" {% if timer.billable %}checked{% endif %}>
|
|
<label class="form-check-label fw-semibold" for="billable">
|
|
<i class="fas fa-dollar-sign me-1"></i>{{ _('Billable') }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<a href="{{ url_for('main.dashboard') }}" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left me-1"></i>{{ _('Back') }}
|
|
</a>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save me-2"></i>{{ _('Save Changes') }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
|