mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-01-06 19:51:25 -06:00
77aec94b86
Major Features: - Add project costs feature with full CRUD operations - Implement toast notification system for better user feedback - Enhance analytics dashboard with improved visualizations - Add OIDC authentication improvements and debug tools Improvements: - Enhance reports with new filtering and export capabilities - Update command palette with additional shortcuts - Improve mobile responsiveness across all pages - Refactor UI components for consistency Removals: - Remove license server integration and related dependencies - Clean up unused license-related templates and utilities Technical Changes: - Add new migration 018 for project_costs table - Update models: Project, Settings, User with new relationships - Refactor routes: admin, analytics, auth, invoices, projects, reports - Update static assets: CSS improvements, new JS modules - Enhance templates: analytics, admin, projects, reports Documentation: - Add comprehensive documentation for project costs feature - Document toast notification system with visual guides - Update README with new feature descriptions - Add migration instructions and quick start guides - Document OIDC improvements and Kanban enhancements Files Changed: - Modified: 56 files (core app, models, routes, templates, static assets) - Deleted: 6 files (license server integration) - Added: 28 files (new features, documentation, migrations)
606 lines
33 KiB
HTML
606 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{ current_locale or 'en' }}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="theme-color" content="#3b82f6" id="meta-theme-color">
|
|
<meta id="user-theme-pref" data-user-theme="{{ current_user.theme_preference if current_user.is_authenticated else '' }}">
|
|
<title>{% block title %}{{ app_name }}{% endblock %}</title>
|
|
{% if csrf_token %}
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
{% endif %}
|
|
|
|
<!-- Favicon -->
|
|
{% if settings and settings.has_logo() %}
|
|
<link rel="icon" type="image/x-icon" href="{{ settings.get_logo_url() }}">
|
|
{% else %}
|
|
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='images/drytrix-logo.svg') }}">
|
|
{% endif %}
|
|
|
|
<!-- Persist compact density ASAP to avoid flicker across pages -->
|
|
<script>
|
|
(function(){
|
|
try {
|
|
var d = localStorage.getItem('tt-density');
|
|
if (d === 'compact') { document.documentElement.classList.add('compact'); }
|
|
} catch(e) {}
|
|
})();
|
|
</script>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Font Awesome -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<!-- Custom CSS (cache-busted with app_version) -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='base.css') }}?v={{ app_version }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='mobile.css') }}?v={{ app_version }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='ui.css') }}?v={{ app_version }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='loading-states.css') }}?v={{ app_version }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='micro-interactions.css') }}?v={{ app_version }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='empty-states.css') }}?v={{ app_version }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='enhanced-search.css') }}?v={{ app_version }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='keyboard-shortcuts.css') }}?v={{ app_version }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='enhanced-tables.css') }}?v={{ app_version }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='toast-notifications.css') }}?v={{ app_version }}">
|
|
<link rel="manifest" href="{{ url_for('static', filename='manifest.webmanifest') }}">
|
|
|
|
{% block extra_css %}{% endblock %}
|
|
{% block head_extra %}{% endblock %}
|
|
<script>
|
|
(function() {
|
|
try {
|
|
const storageKey = 'tt-theme';
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
const saved = localStorage.getItem(storageKey);
|
|
const userMeta = document.getElementById('user-theme-pref');
|
|
const serverPrefRaw = userMeta ? (userMeta.getAttribute('data-user-theme') || '').trim().toLowerCase() : '';
|
|
const serverPref = (serverPrefRaw === 'light' || serverPrefRaw === 'dark') ? serverPrefRaw : null;
|
|
const theme = serverPref || saved || (prefersDark ? 'dark' : 'light');
|
|
const root = document.documentElement;
|
|
root.setAttribute('data-theme', theme);
|
|
if (serverPref) {
|
|
root.setAttribute('data-theme-locked', 'user');
|
|
} else if (saved) {
|
|
root.setAttribute('data-theme-locked', 'local');
|
|
}
|
|
const meta = document.getElementById('meta-theme-color');
|
|
if (meta) meta.setAttribute('content', theme === 'dark' ? '#0b1220' : '#3b82f6');
|
|
} catch (e) {}
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<a class="skip-link" href="#main-content">{{ _('Skip to content') }}</a>
|
|
<!-- Modern Toast Notification Container -->
|
|
<div id="toast-notification-container"></div>
|
|
<!-- Legacy toast container for backwards compatibility -->
|
|
<div id="toast-container" class="toast-container position-fixed top-0 end-0 p-3" style="display: none;"></div>
|
|
<!-- Enhanced Navigation -->
|
|
<nav class="navbar navbar-expand-lg navbar-light sticky-top">
|
|
<div class="container-fluid px-3">
|
|
<a class="navbar-brand" href="{{ url_for('main.dashboard') }}">
|
|
{% if settings and settings.has_logo() %}
|
|
<img src="{{ settings.get_logo_url() }}" alt="Company Logo" width="36" height="36">
|
|
{% else %}
|
|
<img src="{{ url_for('static', filename='images/drytrix-logo.svg') }}" alt="DryTrix Logo" width="36" height="36">
|
|
{% endif %}
|
|
<span class="text-dark fw-bold ms-2 d-none d-md-inline">{{ _('Time Tracker') }}</span>
|
|
</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
{% if current_user.is_authenticated %}
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.endpoint == 'main.dashboard' %}active{% endif %}" {% if request.endpoint == 'main.dashboard' %}aria-current="page"{% endif %} href="{{ url_for('main.dashboard') }}">
|
|
<i class="fas fa-tachometer-alt"></i>{{ _('Dashboard') }}
|
|
</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle {% if request.endpoint and ('projects.' in request.endpoint or 'clients.' in request.endpoint or 'tasks.' in request.endpoint or 'timer.' in request.endpoint) %}active{% endif %}"
|
|
href="#" id="workDropdown" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
|
|
<i class="fas fa-briefcase"></i>{{ _('Work') }}
|
|
</a>
|
|
<ul class="dropdown-menu" aria-labelledby="workDropdown">
|
|
<li><a class="dropdown-item" href="{{ url_for('projects.list_projects') }}"><i class="fas fa-project-diagram me-2"></i>{{ _('Projects') }}</a></li>
|
|
<li><a class="dropdown-item" href="{{ url_for('clients.list_clients') }}"><i class="fas fa-building me-2"></i>{{ _('Clients') }}</a></li>
|
|
<li><a class="dropdown-item" href="{{ url_for('tasks.list_tasks') }}"><i class="fas fa-tasks me-2"></i>{{ _('Tasks') }}</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="{{ url_for('timer.manual_entry') }}"><i class="fas fa-plus me-2"></i>{{ _('Log Time') }}</a></li>
|
|
<li><a class="dropdown-item" href="{{ url_for('timer.bulk_entry') }}"><i class="fas fa-calendar-plus me-2"></i>{{ _('Bulk Time Entry') }}</a></li>
|
|
<li><a class="dropdown-item" href="{{ url_for('timer.calendar_view') }}"><i class="fas fa-calendar-alt me-2"></i>{{ _('Calendar') }}</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle {% if request.endpoint and ('reports.' in request.endpoint or 'invoices.' in request.endpoint or 'analytics.' in request.endpoint) %}active{% endif %}"
|
|
href="#" id="insightsDropdown" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
|
|
<i class="fas fa-chart-line"></i>{{ _('Insights') }}
|
|
</a>
|
|
<ul class="dropdown-menu" aria-labelledby="insightsDropdown">
|
|
<li><a class="dropdown-item" href="{{ url_for('reports.reports') }}"><i class="fas fa-chart-bar me-2"></i>{{ _('Reports') }}</a></li>
|
|
<li><a class="dropdown-item" href="{{ url_for('invoices.list_invoices') }}"><i class="fas fa-file-invoice-dollar me-2"></i>{{ _('Invoices') }}</a></li>
|
|
<li><a class="dropdown-item" href="{{ url_for('analytics.analytics_dashboard') }}"><i class="fas fa-chart-line me-2"></i>{{ _('Analytics') }}</a></li>
|
|
</ul>
|
|
</li>
|
|
{% if current_user.is_admin %}
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.endpoint and 'admin.' in request.endpoint %}active{% endif %}" {% if request.endpoint and 'admin.' in request.endpoint %}aria-current="page"{% endif %} href="{{ url_for('admin.admin_dashboard') }}">
|
|
<i class="fas fa-cog"></i>{{ _('Admin') }}
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
|
|
<ul class="navbar-nav ms-auto">
|
|
<!-- Global Search (desktop) -->
|
|
<li class="nav-item d-none d-xl-flex align-items-center me-2">
|
|
<form class="navbar-search" role="search" action="{{ url_for('main.search') }}" method="get">
|
|
<input name="q" type="search" placeholder="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-enhanced-search='{"endpoint": "/api/search", "minChars": 2, "maxResults": 10}' data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ _('Search') }} ({{ _('Ctrl') }}+K)">
|
|
</form>
|
|
</li>
|
|
|
|
<!-- Command Palette Launcher (desktop) -->
|
|
<li class="nav-item d-none d-xl-flex align-items-center me-2">
|
|
<button id="commandPaletteBtn" class="btn btn-quiet nav-control" type="button" onclick="try{ window.keyboardShortcuts?.openCommandPalette(); }catch(e){}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ _('Open Command Palette') }} (?)">
|
|
<i class="fas fa-terminal"></i>
|
|
</button>
|
|
</li>
|
|
|
|
<!-- Visual divider between actions and account -->
|
|
<li class="nav-item d-none d-xl-flex align-items-center nav-divider" aria-hidden="true"></li>
|
|
|
|
<!-- Language Switcher -->
|
|
<li class="nav-item dropdown me-2 d-flex align-items-center">
|
|
<a class="nav-link dropdown-toggle d-flex align-items-center nav-control nav-quiet"
|
|
href="#"
|
|
id="langDropdown"
|
|
role="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
title="{{ _('Language') }}: {{ current_language_label }}">
|
|
<i class="fas fa-globe me-1"></i>
|
|
<span class="d-none d-lg-inline">{{ current_language_label }}</span>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-end shadow-sm" aria-labelledby="langDropdown">
|
|
<li class="dropdown-header">{{ _('Language') }}</li>
|
|
{% for code, label in config['LANGUAGES'].items() %}
|
|
<li>
|
|
<a class="dropdown-item {% if current_language_code == code %}active{% endif %}"
|
|
href="{{ url_for('main.set_language') }}?lang={{ code }}"
|
|
{% if current_language_code == code %}aria-current="true"{% endif %}>
|
|
{% if current_language_code == code %}<i class="fas fa-check me-2"></i>{% endif %}{{ label }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</li>
|
|
{% if current_user.is_authenticated %}
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
|
|
<div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 36px; height: 36px;">
|
|
<i class="fas fa-user text-primary"></i>
|
|
</div>
|
|
<span class="d-none d-xl-inline">{{ current_user.display_name }}</span>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li>
|
|
<a class="dropdown-item" href="#" onclick="try{ window.keyboardShortcuts?.openCommandPalette(); }catch(e){}">
|
|
<i class="fas fa-keyboard me-2"></i>{{ _('Keyboard Shortcuts') }}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item d-none" id="installAppMenuItem" href="#">
|
|
<i class="fas fa-download me-2"></i>{{ _('Install App') }}
|
|
</a>
|
|
</li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="{{ url_for('auth.profile') }}">
|
|
<i class="fas fa-user-circle me-2"></i>{{ _('Profile') }}
|
|
</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">
|
|
<i class="fas fa-sign-out-alt me-2"></i>{{ _('Logout') }}
|
|
</a></li>
|
|
</ul>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Enhanced Main Content -->
|
|
<main id="main-content" class="container-fluid mt-4 px-3 px-md-4">
|
|
<!-- Flash Messages (converted to toast notifications by JS) -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div id="flash-messages-container" style="display: none;">
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ 'danger' if category == 'error' else category }}" role="alert" data-toast-message="{{ message }}" data-toast-type="{{ 'error' if category == 'error' else category }}">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<!-- Enhanced Page Content -->
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- Mobile Bottom Tab Bar -->
|
|
{% if current_user.is_authenticated %}
|
|
<div class="mobile-tabbar d-lg-none">
|
|
<a href="{{ url_for('main.dashboard') }}" class="tab-item {% if request.endpoint == 'main.dashboard' %}active{% endif %}" aria-label="{{ _('Dashboard') }}">
|
|
<i class="fas fa-tachometer-alt tab-icon"></i>
|
|
<span>{{ _('Home') }}</span>
|
|
</a>
|
|
<a href="{{ url_for('timer.manual_entry') }}" class="tab-item {% if request.endpoint and 'timer.' in request.endpoint %}active{% endif %}" aria-label="{{ _('Log Time') }}">
|
|
<i class="fas fa-plus tab-icon"></i>
|
|
<span>{{ _('Log') }}</span>
|
|
</a>
|
|
<a href="{{ url_for('tasks.list_tasks') }}" class="tab-item {% if request.endpoint and 'tasks.' in request.endpoint %}active{% endif %}" aria-label="{{ _('Tasks') }}">
|
|
<i class="fas fa-tasks tab-icon"></i>
|
|
<span>{{ _('Tasks') }}</span>
|
|
</a>
|
|
<a href="{{ url_for('reports.reports') }}" class="tab-item {% if request.endpoint and 'reports.' in request.endpoint %}active{% endif %}" aria-label="{{ _('Reports') }}">
|
|
<i class="fas fa-chart-bar tab-icon"></i>
|
|
<span>{{ _('Reports') }}</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Enhanced Footer -->
|
|
<footer class="footer mt-auto">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6">
|
|
<p class="mb-0 text-muted">
|
|
© 2025 <strong>DryTrix</strong>. {{ _('All rights reserved.') }}
|
|
</p>
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<div class="d-flex justify-content-md-end gap-3 align-items-center">
|
|
<small class="text-muted">{{ app_version }}</small>
|
|
<small><a href="{{ url_for('main.about') }}" class="text-decoration-none">{{ _('About') }}</a></small>
|
|
<small><a href="{{ url_for('main.help') }}" class="text-decoration-none">{{ _('Help') }}</a></small>
|
|
<small>
|
|
<a href="https://buymeacoffee.com/DryTrix" target="_blank" rel="noopener" class="text-decoration-none">
|
|
<i class="fas fa-mug-hot me-1"></i> {{ _('Buy me a coffee') }}
|
|
</a>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Command Palette is created dynamically by keyboard-shortcuts.js -->
|
|
|
|
<!-- Global Confirm Modal -->
|
|
<div class="modal" id="globalConfirmModal" tabindex="-1" aria-hidden="true" aria-labelledby="globalConfirmTitle">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="globalConfirmTitle">{{ _('Please confirm') }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ _('Close') }}"></button>
|
|
</div>
|
|
<div class="modal-body" id="globalConfirmMessage"></div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _('Cancel') }}</button>
|
|
<button type="button" class="btn btn-danger" id="globalConfirmOk">{{ _('Confirm') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script type="application/json" id="i18n-json">
|
|
{
|
|
"close": {{ _('Close')|tojson }},
|
|
"timer_started_for": {{ _('Timer started for')|tojson }},
|
|
"timer_stopped_duration": {{ _('Timer stopped. Duration:')|tojson }},
|
|
"switch_to_light_mode": {{ _('Switch to light mode')|tojson }},
|
|
"switch_to_dark_mode": {{ _('Switch to dark mode')|tojson }},
|
|
"light_mode": {{ _('Light mode')|tojson }},
|
|
"dark_mode": {{ _('Dark mode')|tojson }}
|
|
}
|
|
</script>
|
|
<script>
|
|
// Parse i18n JSON into a global variable
|
|
var i18n = (function(){
|
|
try {
|
|
var el = document.getElementById('i18n-json');
|
|
return el ? JSON.parse(el.textContent) : {};
|
|
} catch (e) { return {}; }
|
|
})();
|
|
|
|
// Global helpers available on all pages
|
|
function formatDuration(seconds) {
|
|
const total = Number(seconds) || 0;
|
|
const hours = Math.floor(total / 3600);
|
|
const minutes = Math.floor((total % 3600) / 60);
|
|
const secs = total % 60;
|
|
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
// Legacy showToast function - redirects to new toast system
|
|
// Will be overridden by toast-notifications.js when it loads
|
|
function showToast(message, type = 'info') {
|
|
// Temporary implementation until toast-notifications.js loads
|
|
console.log('Toast:', type, message);
|
|
}
|
|
|
|
// Navbar scrolled shadow behavior
|
|
document.addEventListener('scroll', function() {
|
|
const nav = document.querySelector('.navbar');
|
|
if (!nav) return;
|
|
if (window.scrollY > 4) {
|
|
nav.classList.add('scrolled');
|
|
} else {
|
|
nav.classList.remove('scrolled');
|
|
}
|
|
}, { passive: true });
|
|
|
|
// Use Bootstrap's default dropdown behavior; no custom backdrop
|
|
</script>
|
|
<!-- Global theme toggle logic -->
|
|
<script>
|
|
(function(){
|
|
try {
|
|
const storageKey = 'tt-theme';
|
|
const btn = document.getElementById('theme-toggle-global');
|
|
const meta = document.getElementById('meta-theme-color');
|
|
const root = document.documentElement;
|
|
const updateUrl = btn ? btn.getAttribute('data-update-theme-url') : null;
|
|
|
|
function currentTheme(){
|
|
return root.getAttribute('data-theme') || 'light';
|
|
}
|
|
|
|
function updateIcon(theme){
|
|
if (!btn) return;
|
|
const icon = btn.querySelector('i');
|
|
if (icon) icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
|
|
if (typeof i18n !== 'undefined') {
|
|
btn.setAttribute('aria-label', theme === 'dark' ? i18n.switch_to_light_mode : i18n.switch_to_dark_mode);
|
|
btn.title = theme === 'dark' ? i18n.light_mode : i18n.dark_mode;
|
|
} else {
|
|
btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
|
|
btn.title = theme === 'dark' ? 'Light mode' : 'Dark mode';
|
|
}
|
|
}
|
|
|
|
function applyTheme(theme, persist){
|
|
root.setAttribute('data-theme', theme);
|
|
if (meta) meta.setAttribute('content', theme === 'dark' ? '#0b1220' : '#3b82f6');
|
|
updateIcon(theme);
|
|
if (persist) {
|
|
try { localStorage.setItem(storageKey, theme); } catch(e) {}
|
|
if (updateUrl) {
|
|
try {
|
|
fetch(updateUrl, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ theme })
|
|
}).catch(function(){});
|
|
} catch(e) {}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (btn) {
|
|
// Initialize icon to current theme
|
|
updateIcon(currentTheme());
|
|
btn.addEventListener('click', function(){
|
|
const next = currentTheme() === 'dark' ? 'light' : 'dark';
|
|
applyTheme(next, true);
|
|
});
|
|
// Enable tooltip if available
|
|
try { new bootstrap.Tooltip(btn); } catch(e) {}
|
|
try { var cp = document.getElementById('commandPaletteBtn'); if (cp) { new bootstrap.Tooltip(cp); } } catch(e) {}
|
|
}
|
|
|
|
// Keep icon in sync if theme changes elsewhere
|
|
try {
|
|
new MutationObserver(function(){ updateIcon(currentTheme()); })
|
|
.observe(root, { attributes: true, attributeFilter: ['data-theme'] });
|
|
} catch(e) {}
|
|
} catch(e) {}
|
|
})();
|
|
</script>
|
|
|
|
{% if current_user.is_authenticated %}
|
|
<!-- Socket.IO only for authenticated users -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
|
|
{% endif %}
|
|
<!-- Toast Notification System -->
|
|
<script src="{{ url_for('static', filename='toast-notifications.js') }}?v={{ app_version }}"></script>
|
|
{% if request.endpoint != 'auth.login' %}
|
|
<!-- Custom JS (disabled on login to avoid interference) -->
|
|
<script src="{{ url_for('static', filename='mobile.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='interactions.js') }}?v={{ app_version }}"></script>
|
|
<script src="{{ url_for('static', filename='enhanced-search.js') }}?v={{ app_version }}"></script>
|
|
<script src="{{ url_for('static', filename='keyboard-shortcuts.js') }}?v={{ app_version }}"></script>
|
|
<script src="{{ url_for('static', filename='enhanced-tables.js') }}?v={{ app_version }}"></script>
|
|
<script src="{{ url_for('static', filename='idle.js') }}?v={{ app_version }}"></script>
|
|
{% endif %}
|
|
{% if current_user.is_authenticated %}
|
|
<script>
|
|
// Initialize Socket.IO only when logged in
|
|
try {
|
|
const socket = io();
|
|
socket.on('connect', () => console.log('Connected to server'));
|
|
socket.on('disconnect', () => console.log('Disconnected from server'));
|
|
socket.on('timer_started', (data) => {
|
|
if (window.toastManager) {
|
|
window.toastManager.success(`{{ _('Timer started for') }} ${data.project_name}`, '{{ _('Timer Started') }}');
|
|
}
|
|
if (typeof updateTimerDisplay === 'function') updateTimerDisplay();
|
|
});
|
|
socket.on('timer_stopped', (data) => {
|
|
if (window.toastManager) {
|
|
window.toastManager.info(`{{ _('Timer stopped. Duration:') }} ${data.duration}`, '{{ _('Timer Stopped') }}');
|
|
}
|
|
if (typeof updateTimerDisplay === 'function') updateTimerDisplay();
|
|
});
|
|
console.log('Base template initialized - Socket.IO and global functions ready');
|
|
} catch (e) {
|
|
console.warn('Socket.IO init failed:', e);
|
|
}
|
|
</script>
|
|
{% endif %}
|
|
|
|
{% block scripts_extra %}{% endblock %}
|
|
{% block extra_js %}{% endblock %}
|
|
<script>
|
|
// Service Worker registration and PWA install UI
|
|
(function(){
|
|
try {
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/service-worker.js').catch(function(){});
|
|
}
|
|
var deferredPrompt = null;
|
|
var installItem = document.getElementById('installAppMenuItem');
|
|
window.addEventListener('beforeinstallprompt', function(e){
|
|
try { e.preventDefault(); } catch(_) {}
|
|
deferredPrompt = e;
|
|
if (installItem) installItem.classList.remove('d-none');
|
|
});
|
|
if (installItem) {
|
|
installItem.addEventListener('click', async function(ev){
|
|
ev.preventDefault();
|
|
if (!deferredPrompt) return;
|
|
try {
|
|
deferredPrompt.prompt();
|
|
await deferredPrompt.userChoice;
|
|
} catch (_) {}
|
|
deferredPrompt = null;
|
|
installItem.classList.add('d-none');
|
|
});
|
|
}
|
|
window.addEventListener('appinstalled', function(){ try { showToast('{{ _('App installed') }}', 'success'); } catch(_) {} });
|
|
} catch(e) {}
|
|
})();
|
|
</script>
|
|
<script>
|
|
// Promise-based global confirm helper
|
|
(function(){
|
|
try {
|
|
window.showConfirm = function(message, options){
|
|
return new Promise(function(resolve){
|
|
try {
|
|
var modalEl = document.getElementById('globalConfirmModal');
|
|
if (!modalEl) return resolve(confirm(message));
|
|
var msgEl = document.getElementById('globalConfirmMessage');
|
|
var okBtn = document.getElementById('globalConfirmOk');
|
|
if (msgEl) msgEl.textContent = message || '';
|
|
var bsModal = bootstrap.Modal.getOrCreateInstance(modalEl);
|
|
function cleanup(){
|
|
okBtn.removeEventListener('click', onOk);
|
|
modalEl.removeEventListener('hidden.bs.modal', onHide);
|
|
}
|
|
function onOk(){ cleanup(); bsModal.hide(); resolve(true); }
|
|
function onHide(){ cleanup(); resolve(false); }
|
|
okBtn.addEventListener('click', onOk);
|
|
modalEl.addEventListener('hidden.bs.modal', onHide, { once:true });
|
|
bsModal.show();
|
|
} catch(e) { resolve(confirm(message)); }
|
|
});
|
|
}
|
|
} catch(e) {}
|
|
})();
|
|
</script>
|
|
<!-- Mobile FAB: Log Time -->
|
|
{% if current_user.is_authenticated %}
|
|
<a href="{{ url_for('timer.manual_entry') }}" class="fab-log-time d-lg-none" aria-label="{{ _('Log time') }}">
|
|
<i class="fas fa-plus"></i>
|
|
</a>
|
|
{% endif %}
|
|
<script>
|
|
// Compact density toggle
|
|
(function(){
|
|
try {
|
|
const key = 'tt-density';
|
|
const saved = localStorage.getItem(key);
|
|
if (saved === 'compact') document.documentElement.classList.add('compact');
|
|
window.toggleDensity = function(){
|
|
const root = document.documentElement;
|
|
const isCompact = root.classList.toggle('compact');
|
|
localStorage.setItem(key, isCompact ? 'compact' : 'comfortable');
|
|
};
|
|
} catch (e) {}
|
|
})();
|
|
</script>
|
|
<script>
|
|
// CSRF auto-injection for forms and AJAX/fetch
|
|
(function(){
|
|
try {
|
|
var meta = document.querySelector('meta[name="csrf-token"]');
|
|
var token = meta ? meta.getAttribute('content') : '';
|
|
if (!token) return;
|
|
|
|
// Add hidden CSRF inputs to all POST forms that lack one
|
|
document.querySelectorAll('form[method="post"]:not([data-no-csrf-auto])').forEach(function(form){
|
|
if (!form.querySelector('input[name="csrf_token"]')) {
|
|
var input = document.createElement('input');
|
|
input.type = 'hidden';
|
|
input.name = 'csrf_token';
|
|
input.value = token;
|
|
form.insertBefore(input, form.firstChild);
|
|
}
|
|
});
|
|
|
|
// jQuery AJAX: attach header automatically for same-origin, non-GET
|
|
if (window.$ && $.ajaxSetup) {
|
|
$.ajaxSetup({
|
|
beforeSend: function(xhr, settings){
|
|
try {
|
|
var method = (settings.type || '').toUpperCase();
|
|
var url = settings.url || '';
|
|
var sameOrigin = url.indexOf('http://') !== 0 && url.indexOf('https://') !== 0 || url.indexOf(location.origin) === 0;
|
|
if (sameOrigin && ['GET','HEAD','OPTIONS','TRACE'].indexOf(method) === -1) {
|
|
xhr.setRequestHeader('X-CSRFToken', token);
|
|
}
|
|
} catch(e) {}
|
|
}
|
|
});
|
|
}
|
|
|
|
// fetch(): wrap to add CSRF header automatically for same-origin, non-GET
|
|
if (window.fetch) {
|
|
var _origFetch = window.fetch;
|
|
window.fetch = function(input, init){
|
|
try {
|
|
var req = new Request(input, init);
|
|
var url = new URL(req.url, window.location.origin);
|
|
var sameOrigin = url.origin === window.location.origin;
|
|
var method = (req.method || '').toUpperCase();
|
|
if (sameOrigin && ['GET','HEAD','OPTIONS','TRACE'].indexOf(method) === -1) {
|
|
var headers = new Headers(req.headers || {});
|
|
if (!headers.has('X-CSRFToken')) headers.set('X-CSRFToken', token);
|
|
return _origFetch(new Request(req, { headers: headers }));
|
|
}
|
|
return _origFetch(req);
|
|
} catch(e) {
|
|
return _origFetch(input, init);
|
|
}
|
|
};
|
|
}
|
|
} catch(e) {}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|