openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(settings): add time format preference

Browse Source
This commit is contained in:
Rafael Foster
2026-04-30 13:48:35 -03:00
parent f1050e1fdb
commit 8c9a5c6aa2
8 changed files with 180 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/i18n.js
+81
View File
@@ -9,7 +9,10 @@ const SUPPORTED_LOCALES = ['de', 'en', 'es', 'fr', 'it', 'sv', 'el', 'ru', 'tr',
const DEFAULT_LOCALE = 'de';
const STORAGE_KEY = 'oikos-locale';
const DATE_FORMAT_KEY = 'oikos-date-format';
const TIME_FORMAT_KEY = 'oikos-time-format';
const DEFAULT_DATE_FORMAT = 'dmy';
const DEFAULT_TIME_FORMAT = '24h';
const VALID_TIME_FORMATS = ['24h', '12h'];
let currentLocale = DEFAULT_LOCALE;
let translations = {};
@@ -93,6 +96,15 @@ export function getDateFormat() {
return getDateFormatPreference();
}
function getTimeFormatPreference() {
const stored = localStorage.getItem(TIME_FORMAT_KEY);
return VALID_TIME_FORMATS.includes(stored) ? stored : DEFAULT_TIME_FORMAT;
}
export function getTimeFormat() {
return getTimeFormatPreference();
}
function formatDateParts(date, useUtc = false) {
const d = date instanceof Date ? date : new Date(date);
if (isNaN(d.getTime())) return '';
@@ -176,9 +188,78 @@ export function formatTime(date) {
if (date == null) return '';
const d = date instanceof Date ? date : new Date(date);
if (isNaN(d.getTime())) return '';
if (getTimeFormatPreference() === '12h') {
const hour = d.getHours();
const minute = String(d.getMinutes()).padStart(2, '0');
const displayHour = hour % 12 || 12;
return `${displayHour}:${minute} ${hour >= 12 ? 'PM' : 'AM'}`;
}
return new Intl.DateTimeFormat(currentLocale, {
hour: '2-digit',
minute: '2-digit',
hour12: false,
}).format(d);
}
function toTimeParts(value) {
if (value == null || value === '') return null;
if (value instanceof Date) {
if (isNaN(value.getTime())) return null;
return { hour: value.getHours(), minute: value.getMinutes() };
}
const raw = String(value).trim();
if (!raw) return null;
if (/^\d{1,2}:\d{2}$/.test(raw)) {
const [hour, minute] = raw.split(':').map(Number);
if (hour >= 0 && hour < 24 && minute >= 0 && minute < 60) {
return { hour, minute };
}
return null;
}
const ampmMatch = raw.match(/^(\d{1,2})(?::(\d{2}))?\s*([ap]m)$/i);
if (ampmMatch) {
let hour = Number(ampmMatch[1]);
const minute = Number(ampmMatch[2] ?? 0);
const meridiem = ampmMatch[3].toLowerCase();
if (!Number.isInteger(hour) || !Number.isInteger(minute) || minute < 0 || minute >= 60) return null;
if (hour < 1 || hour > 12) return null;
if (meridiem === 'pm' && hour !== 12) hour += 12;
if (meridiem === 'am' && hour === 12) hour = 0;
return { hour, minute };
}
return null;
}
export function formatTimeInput(value) {
const parts = toTimeParts(value);
if (!parts) return '';
const hour = String(parts.hour).padStart(2, '0');
const minute = String(parts.minute).padStart(2, '0');
if (getTimeFormatPreference() === '12h') {
const isPm = parts.hour >= 12;
const displayHour = parts.hour % 12 || 12;
return `${displayHour}:${minute} ${isPm ? 'PM' : 'AM'}`;
}
return `${hour}:${minute}`;
}
export function parseTimeInput(value) {
const raw = String(value || '').trim();
if (!raw) return '';
const parts = toTimeParts(raw);
if (!parts) return '';
return `${String(parts.hour).padStart(2, '0')}:${String(parts.minute).padStart(2, '0')}`;
}
export function isTimeInputValid(value) {
return !String(value || '').trim() || !!parseTimeInput(value);
}
export function timeInputPlaceholder() {
return getTimeFormatPreference() === '12h' ? 'h:mm AM/PM' : 'HH:MM';
}
public/locales/de.json
+3
View File
@@ -632,6 +632,9 @@
"dateFormatLabel": "Bevorzugtes Datumsformat",
"dateFormatHint": "Wähle, wie Daten in der App angezeigt werden.",
"dateFormatSavedToast": "Datumsformat gespeichert.",
"timeFormatLabel": "Zeitformat",
"timeFormatHours": "Stunden",
"timeFormatSavedToast": "Zeitformat gespeichert.",
"themeSystem": "System",
"themeSysLabel": "System-Einstellung verwenden",
"themeLight": "Hell",
public/locales/en.json
+3
View File
@@ -607,6 +607,9 @@
"dateFormatLabel": "Preferred date format",
"dateFormatHint": "Choose how dates are displayed throughout the app.",
"dateFormatSavedToast": "Date format saved.",
"timeFormatLabel": "Time format",
"timeFormatHours": "hours",
"timeFormatSavedToast": "Time format saved.",
"themeSystem": "System",
"themeSysLabel": "Use system setting",
"themeLight": "Light",
public/pages/calendar.js
+21 -5
View File
@@ -8,7 +8,7 @@ import { api } from '/api.js';
import { renderRRuleFields, bindRRuleEvents, getRRuleValues } from '/rrule-ui.js';
import { openModal as openSharedModal, closeModal } from '/components/modal.js';
import { stagger } from '/utils/ux.js';
import { t, formatDate as formatPreferredDate, formatTime, dateInputPlaceholder, formatDateInput, parseDateInput, isDateInputValid } from '/i18n.js';
import { t, formatDate as formatPreferredDate, formatTime, dateInputPlaceholder, formatDateInput, parseDateInput, isDateInputValid, formatTimeInput, parseTimeInput, timeInputPlaceholder } from '/i18n.js';
import { esc, fmtLocation } from '/utils/html.js';
import { refresh as refreshReminders } from '/reminders.js';
@@ -1204,6 +1204,15 @@ function renderCalendarReminderSection(reminder = null, event = null) {
</div>`;
}
function bindTimeInputs(root) {
root.querySelectorAll('.js-time-input').forEach((input) => {
input.addEventListener('blur', () => {
const parsed = parseTimeInput(input.value);
if (parsed) input.value = formatTimeInput(parsed);
});
});
}
// --------------------------------------------------------
// Event-Modal (Erstellen / Bearbeiten)
// --------------------------------------------------------
@@ -1265,6 +1274,7 @@ function openEventModal({ mode, event = null, date = null, reminder = null }) {
if (isEdit && event?.all_day) { timeFields.style.display = 'none'; alldayFields.style.display = ''; }
bindDateInputs(panel);
bindTimeInputs(panel);
const iconInput = panel.querySelector('#modal-icon');
const iconTrigger = panel.querySelector('#modal-icon-trigger');
@@ -1455,7 +1465,7 @@ function buildEventModalContent({ mode, event, date, reminder = null }) {
</div>
<div class="form-group">
<label class="form-label" for="modal-start-time">${t('calendar.startTimeLabel')}</label>
<input type="time" class="form-input" id="modal-start-time" value="${startTime}">
<input type="text" class="form-input js-time-input" id="modal-start-time" value="${formatTimeInput(startTime)}" placeholder="${timeInputPlaceholder()}">
</div>
</div>
<div class="modal-grid modal-grid--2">
@@ -1465,7 +1475,7 @@ function buildEventModalContent({ mode, event, date, reminder = null }) {
</div>
<div class="form-group">
<label class="form-label" for="modal-end-time">${t('calendar.endTimeLabel')}</label>
<input type="time" class="form-input" id="modal-end-time" value="${endTime}">
<input type="text" class="form-input js-time-input" id="modal-end-time" value="${formatTimeInput(endTime)}" placeholder="${timeInputPlaceholder()}">
</div>
</div>
</div>
@@ -1573,9 +1583,15 @@ async function saveEvent(overlay, mode, eventId, existingReminder = null, attach
end_datetime = end_datetime || null;
} else {
const sd = readDateInput(overlay, '#modal-start-date');
const st = overlay.querySelector('#modal-start-time').value;
const stRaw = overlay.querySelector('#modal-start-time').value;
const st = parseTimeInput(stRaw);
const ed = readDateInput(overlay, '#modal-end-date');
const et = overlay.querySelector('#modal-end-time').value;
const etRaw = overlay.querySelector('#modal-end-time').value;
const et = parseTimeInput(etRaw);
if ((stRaw && !st) || (etRaw && !et)) {
window.oikos?.showToast(t('calendar.invalidDate'), 'error');
return;
}
start_datetime = st ? `${sd}T${st}` : sd;
end_datetime = ed ? (et ? `${ed}T${et}` : ed) : null;
}
public/pages/settings.js
+23 -1
View File
@@ -199,7 +199,7 @@ export async function render(container, { user }) {
let users = [];
let googleStatus = { configured: false, connected: false, lastSync: null };
let appleStatus = { configured: false, lastSync: null };
let prefs = { visible_meal_types: ['breakfast', 'lunch', 'dinner', 'snack'], currency: 'EUR', date_format: 'mdy', app_name: DEFAULT_APP_NAME };
let prefs = { visible_meal_types: ['breakfast', 'lunch', 'dinner', 'snack'], currency: 'EUR', date_format: 'mdy', time_format: '24h', app_name: DEFAULT_APP_NAME };
let categories = [];
let icsSubscriptions = [];
let apiTokens = [];
@@ -226,6 +226,9 @@ export async function render(container, { user }) {
if (prefs.date_format) {
try { localStorage.setItem('oikos-date-format', prefs.date_format); } catch (_) {}
}
if (prefs.time_format) {
try { localStorage.setItem('oikos-time-format', prefs.time_format); } catch (_) {}
}
if (prefs.app_name) {
try { localStorage.setItem(APP_NAME_STORAGE_KEY, prefs.app_name); } catch (_) {}
}
@@ -338,6 +341,11 @@ export async function render(container, { user }) {
<option value="dmy"${prefs.date_format === 'dmy' ? ' selected' : ''}>DD/MM/YYYY</option>
<option value="ymd"${prefs.date_format === 'ymd' ? ' selected' : ''}>YYYY-MM-DD</option>
</select>
<label class="form-label" for="time-format-select" style="margin-top:var(--space-3)">${t('settings.timeFormatLabel')}</label>
<select class="form-input" id="time-format-select">
<option value="24h"${prefs.time_format === '24h' ? ' selected' : ''}>24 ${t('settings.timeFormatHours')}</option>
<option value="12h"${prefs.time_format === '12h' ? ' selected' : ''}>AM/PM</option>
</select>
</div>
</section>
@@ -858,6 +866,20 @@ function bindEvents(container, user, users, categories, icsSubscriptions, apiTok
});
}
const timeFormatSelect = container.querySelector('#time-format-select');
if (timeFormatSelect) {
timeFormatSelect.addEventListener('change', async () => {
try {
await api.put('/preferences', { time_format: timeFormatSelect.value });
try { localStorage.setItem('oikos-time-format', timeFormatSelect.value); } catch (_) {}
window.dispatchEvent(new CustomEvent('time-format-changed', { detail: { timeFormat: timeFormatSelect.value } }));
window.oikos?.showToast(t('settings.timeFormatSavedToast'), 'success');
} catch (err) {
window.oikos?.showToast(err.message ?? t('common.errorGeneric'), 'danger');
}
});
}
const appNameForm = container.querySelector('#app-name-form');
if (appNameForm) {
appNameForm.addEventListener('submit', async (e) => {
public/pages/tasks.js
+19 -4
View File
@@ -8,7 +8,7 @@ import { api } from '/api.js';
import { renderRRuleFields, bindRRuleEvents, getRRuleValues } from '/rrule-ui.js';
import { openModal as openSharedModal, closeModal, wireBlurValidation, validateAll, btnSuccess, btnError, promptModal } from '/components/modal.js';
import { stagger, vibrate } from '/utils/ux.js';
import { t, formatDate, formatTime, dateInputPlaceholder, formatDateInput, parseDateInput, isDateInputValid } from '/i18n.js';
import { t, formatDate, formatTime, dateInputPlaceholder, formatDateInput, parseDateInput, isDateInputValid, formatTimeInput, parseTimeInput, timeInputPlaceholder } from '/i18n.js';
import { esc } from '/utils/html.js';
import { refresh as refreshReminders } from '/reminders.js';
@@ -361,8 +361,8 @@ function renderModalContent({ task = null, users = [], reminder = null } = {}) {
</div>
<div class="form-group">
<label class="label" for="task-due-time">${t('tasks.dueTimeLabel')}</label>
<input class="input" type="time" id="task-due-time" name="due_time"
value="${task?.due_time ?? ''}">
<input class="input js-time-input" type="text" id="task-due-time" name="due_time"
value="${formatTimeInput(task?.due_time ?? '')}" placeholder="${timeInputPlaceholder()}">
</div>
</div>
@@ -566,6 +566,12 @@ function openTaskModal({ task = null, users = [], reminder = null } = {}, contai
if (parsed) input.value = formatDateInput(parsed);
});
});
panel.querySelectorAll('.js-time-input').forEach((input) => {
input.addEventListener('blur', () => {
const parsed = parseTimeInput(input.value);
if (parsed) input.value = formatTimeInput(parsed);
});
});
// Form-Events
panel.querySelector('#task-form')
@@ -614,11 +620,20 @@ async function handleFormSubmit(e, container) {
priority: form.priority.value,
category: form.category.value,
due_date: dueDate || null,
due_time: form.due_time?.value || null,
assigned_to: form.assigned_to.value ? Number(form.assigned_to.value) : null,
is_recurring: rrule.is_recurring ? 1 : 0,
recurrence_rule: rrule.recurrence_rule,
};
const dueTimeRaw = form.due_time?.value || '';
const dueTime = parseTimeInput(dueTimeRaw);
if (dueTimeRaw && !dueTime) {
errorEl.textContent = t('calendar.invalidDate');
errorEl.hidden = false;
submitBtn.disabled = false;
submitBtn.textContent = originalLabel;
return;
}
body.due_time = dueTime || null;
if (form.status) body.status = form.status.value;
try {
public/router.js
+15
View File
@@ -300,6 +300,10 @@ async function syncPreferencesOnce() {
if (dateFormat) {
localStorage.setItem('oikos-date-format', dateFormat);
}
const timeFormat = res?.data?.time_format;
if (timeFormat) {
localStorage.setItem('oikos-time-format', timeFormat);
}
if (res?.data?.app_name) {
setAppName(res.data.app_name);
updateBranding();
@@ -1332,6 +1336,17 @@ window.addEventListener('app-name-changed', () => {
updateBranding(currentPath || '/');
});
function refreshCurrentRoute() {
if (!currentPath) return;
setTimeout(() => {
if (!currentPath) return;
navigate(currentPath, false);
}, 0);
}
window.addEventListener('date-format-changed', refreshCurrentRoute);
window.addEventListener('time-format-changed', refreshCurrentRoute);
// --------------------------------------------------------
// Virtuelle Tastatur: FAB ausblenden wenn Keyboard offen
// Erkennung via visualViewport - Höhe < 75% des Fensters = Keyboard aktiv.
server/routes/preferences.js
+14 -1
View File
@@ -22,6 +22,8 @@ const DEFAULT_APP_NAME = 'Oikos';
const VALID_DATE_FORMATS = ['mdy', 'dmy', 'ymd'];
const DEFAULT_DATE_FORMAT = 'mdy';
const VALID_TIME_FORMATS = ['24h', '12h'];
const DEFAULT_TIME_FORMAT = '24h';
const VALID_WIDGET_IDS = ['tasks', 'calendar', 'birthdays', 'budget', 'family', 'weather', 'shopping', 'meals', 'notes'];
const DEFAULT_WIDGET_CONFIG = JSON.stringify(VALID_WIDGET_IDS.map((id) => ({ id, visible: true })));
@@ -88,6 +90,7 @@ router.get('/', (req, res) => {
const visibleMealTypes = raw.split(',').filter((t) => VALID_MEAL_TYPES.includes(t));
const currency = cfgGet('currency') ?? DEFAULT_CURRENCY;
const dateFormat = VALID_DATE_FORMATS.includes(cfgGet('date_format')) ? cfgGet('date_format') : DEFAULT_DATE_FORMAT;
const timeFormat = VALID_TIME_FORMATS.includes(cfgGet('time_format')) ? cfgGet('time_format') : DEFAULT_TIME_FORMAT;
const appName = cfgGet('app_name') ?? DEFAULT_APP_NAME;
const dashboardWidgets = parseWidgetConfig(cfgGet('dashboard_widgets'));
@@ -96,6 +99,7 @@ router.get('/', (req, res) => {
visible_meal_types: visibleMealTypes,
currency,
date_format: dateFormat,
time_format: timeFormat,
app_name: appName,
dashboard_widgets: dashboardWidgets,
},
@@ -115,7 +119,7 @@ router.get('/', (req, res) => {
router.put('/', (req, res) => {
try {
const { visible_meal_types, currency, date_format, app_name, dashboard_widgets } = req.body;
const { visible_meal_types, currency, date_format, time_format, app_name, dashboard_widgets } = req.body;
if (visible_meal_types !== undefined) {
if (!Array.isArray(visible_meal_types)) {
@@ -142,6 +146,13 @@ router.put('/', (req, res) => {
cfgSet('date_format', date_format);
}
if (time_format !== undefined) {
if (!VALID_TIME_FORMATS.includes(time_format)) {
return res.status(400).json({ error: `Ungültiges Zeitformat. Erlaubt: ${VALID_TIME_FORMATS.join(', ')}`, code: 400 });
}
cfgSet('time_format', time_format);
}
if (app_name !== undefined) {
const vAppName = str(app_name, 'Application name', { max: MAX_SHORT, required: false });
if (vAppName.error) return res.status(400).json({ error: vAppName.error, code: 400 });
@@ -161,6 +172,7 @@ router.put('/', (req, res) => {
const savedMealTypes = rawMealTypes.split(',').filter((t) => VALID_MEAL_TYPES.includes(t));
const savedCurrency = cfgGet('currency') ?? DEFAULT_CURRENCY;
const savedDateFormat = VALID_DATE_FORMATS.includes(cfgGet('date_format')) ? cfgGet('date_format') : DEFAULT_DATE_FORMAT;
const savedTimeFormat = VALID_TIME_FORMATS.includes(cfgGet('time_format')) ? cfgGet('time_format') : DEFAULT_TIME_FORMAT;
const savedAppName = cfgGet('app_name') ?? DEFAULT_APP_NAME;
const savedWidgets = parseWidgetConfig(cfgGet('dashboard_widgets'));
@@ -169,6 +181,7 @@ router.put('/', (req, res) => {
visible_meal_types: savedMealTypes,
currency: savedCurrency,
date_format: savedDateFormat,
time_format: savedTimeFormat,
app_name: savedAppName,
dashboard_widgets: savedWidgets,
},