334 lines
11 KiB
HTML
334 lines
11 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="config-container">
|
|
<h1>User Preferences</h1>
|
|
<p class="description">Configure your personal display preferences and time tracking settings.</p>
|
|
|
|
<!-- Company Policies (Read-only) -->
|
|
{% if company_config %}
|
|
<div class="info-section">
|
|
<h3>Company Work Policies <span class="read-only">(Read-only)</span></h3>
|
|
<p class="section-description">
|
|
These policies are set by your administrator and apply to all employees.
|
|
{% if g.user.role == Role.ADMIN %}
|
|
<a href="{{ url_for('admin_work_policies') }}">Click here to modify these settings</a>.
|
|
{% endif %}
|
|
</p>
|
|
|
|
<div class="policy-info">
|
|
<div class="policy-item">
|
|
<strong>Region:</strong> {{ company_config.region_name }}
|
|
</div>
|
|
<div class="policy-item">
|
|
<strong>Standard Work Day:</strong> {{ company_config.work_hours_per_day }} hours
|
|
</div>
|
|
<div class="policy-item">
|
|
<strong>Break Policy:</strong>
|
|
{% if company_config.mandatory_break_minutes > 0 %}
|
|
{{ company_config.mandatory_break_minutes }} minutes after {{ company_config.break_threshold_hours }} hours
|
|
{% else %}
|
|
No mandatory breaks
|
|
{% endif %}
|
|
</div>
|
|
<div class="policy-item">
|
|
<strong>Additional Break:</strong>
|
|
{% if company_config.additional_break_minutes > 0 %}
|
|
{{ company_config.additional_break_minutes }} minutes after {{ company_config.additional_break_threshold_hours }} hours
|
|
{% else %}
|
|
No additional breaks
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- User Preferences Form -->
|
|
<form method="POST" action="{{ url_for('config') }}" class="config-form">
|
|
|
|
<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 preferences.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 preferences.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">
|
|
Time rounding helps standardize billing and reporting by rounding time entries to specified intervals.
|
|
</p>
|
|
|
|
<div class="form-group">
|
|
<label for="time_rounding_minutes">Time Rounding Interval:</label>
|
|
<select id="time_rounding_minutes" name="time_rounding_minutes">
|
|
{% for value, label in rounding_options %}
|
|
<option value="{{ value }}" {% if preferences.time_rounding_minutes == value %}selected{% endif %}>
|
|
{{ label }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<small>Round time entries to the nearest interval</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="checkbox-group">
|
|
<input type="checkbox"
|
|
id="round_to_nearest"
|
|
name="round_to_nearest"
|
|
{% if preferences.round_to_nearest %}checked{% endif %}>
|
|
<label for="round_to_nearest">Round to nearest interval</label>
|
|
<small>If unchecked, will always round up</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounding-example" id="rounding-example">
|
|
<h4>Example:</h4>
|
|
<div id="example-text">
|
|
<!-- JavaScript will populate this -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">Save Preferences</button>
|
|
</form>
|
|
</div>
|
|
|
|
<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 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;
|
|
|
|
if (interval === 0) {
|
|
exampleDiv.innerHTML = '<em>No rounding applied. Times are recorded exactly as entered.</em>';
|
|
return;
|
|
}
|
|
|
|
const roundingType = roundToNearest ? 'nearest' : 'up';
|
|
const examples = [];
|
|
|
|
if (interval === 15) {
|
|
if (roundToNearest) {
|
|
examples.push('9:07 AM → 9:00 AM');
|
|
examples.push('9:08 AM → 9:15 AM');
|
|
examples.push('9:23 AM → 9:30 AM');
|
|
} else {
|
|
examples.push('9:01 AM → 9:15 AM');
|
|
examples.push('9:16 AM → 9:30 AM');
|
|
examples.push('9:31 AM → 9:45 AM');
|
|
}
|
|
} else if (interval === 30) {
|
|
if (roundToNearest) {
|
|
examples.push('9:14 AM → 9:00 AM');
|
|
examples.push('9:16 AM → 9:30 AM');
|
|
examples.push('9:45 AM → 10:00 AM');
|
|
} else {
|
|
examples.push('9:01 AM → 9:30 AM');
|
|
examples.push('9:31 AM → 10:00 AM');
|
|
examples.push('10:01 AM → 10:30 AM');
|
|
}
|
|
} else if (interval === 60) {
|
|
if (roundToNearest) {
|
|
examples.push('9:29 AM → 9:00 AM');
|
|
examples.push('9:31 AM → 10:00 AM');
|
|
examples.push('10:30 AM → 11:00 AM');
|
|
} else {
|
|
examples.push('9:01 AM → 10:00 AM');
|
|
examples.push('10:01 AM → 11:00 AM');
|
|
examples.push('11:01 AM → 12:00 PM');
|
|
}
|
|
}
|
|
|
|
const exampleText = `Rounding ${roundingType} to ${interval} minute intervals:<br>` +
|
|
examples.map(ex => `• ${ex}`).join('<br>');
|
|
exampleDiv.innerHTML = exampleText;
|
|
}
|
|
|
|
// Update examples when settings change
|
|
dateFormatSelect.addEventListener('change', updateFormatExample);
|
|
timeFormat24hCheckbox.addEventListener('change', updateFormatExample);
|
|
roundingSelect.addEventListener('change', updateRoundingExample);
|
|
roundToNearestCheckbox.addEventListener('change', updateRoundingExample);
|
|
|
|
// Initial examples
|
|
updateFormatExample();
|
|
updateRoundingExample();
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.config-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.description {
|
|
color: #666;
|
|
margin-bottom: 2rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.info-section {
|
|
background: #e8f4fd;
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 2rem;
|
|
border-left: 4px solid #17a2b8;
|
|
}
|
|
|
|
.info-section h3 {
|
|
margin-top: 0;
|
|
color: #0c5460;
|
|
}
|
|
|
|
.read-only {
|
|
font-size: 0.8rem;
|
|
color: #6c757d;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.policy-info {
|
|
background: white;
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.policy-item {
|
|
margin-bottom: 0.5rem;
|
|
color: #495057;
|
|
}
|
|
|
|
.section-description {
|
|
color: #666;
|
|
font-style: italic;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.checkbox-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.checkbox-group input[type="checkbox"] {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
.checkbox-group label {
|
|
margin: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.rounding-example {
|
|
background: #e8f5e9;
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
margin-top: 1rem;
|
|
border-left: 4px solid #4CAF50;
|
|
}
|
|
|
|
.rounding-example h4 {
|
|
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 %} |