trackops 1.0.0 → 1.0.1

package/ui/js/theme.js

@@ -0,0 +1,100 @@
+/**
+ * theme.js — Gestor de tema claro / oscuro
+ * Persiste en localStorage. Si no hay preferencia guardada, usa tema claro.
+ */
+
+const STORAGE_KEY = 'trackops-theme';
+const THEMES = { dark: 'dark', light: 'light' };
+
+/** Inicializa el tema aplicando el guardado o el preferido por el sistema */
+export function init() {
+  const saved = localStorage.getItem(STORAGE_KEY);
+  apply(saved || THEMES.light, false);
+}
+
+/** Aplica un tema
+ * @param {'dark'|'light'} theme
+ * @param {boolean} [save=true] - persistir en localStorage
+ */
+export function apply(theme, save = true) {
+  const root = document.documentElement;
+
+  if (theme === THEMES.light) {
+    root.setAttribute('data-theme', 'light');
+  } else {
+    root.removeAttribute('data-theme');
+  }
+
+  if (save) {
+    localStorage.setItem(STORAGE_KEY, theme);
+  }
+
+  // Actualizar icono del botón del topbar
+  _updateButton(theme);
+}
+
+/** Alterna entre claro y oscuro */
+export function toggle() {
+  const current = document.documentElement.getAttribute('data-theme') === 'light'
+    ? THEMES.light
+    : THEMES.dark;
+  apply(current === THEMES.light ? THEMES.dark : THEMES.light);
+}
+
+/** Obtiene el tema activo */
+export function current() {
+  return document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+}
+
+/** Renderiza el botón toggle para el topbar */
+export function renderButton() {
+  const isDark = current() === 'dark';
+  return `
+    <button
+      class="btn btn-ghost btn-sm btn-icon theme-toggle"
+      id="theme-toggle-btn"
+      type="button"
+      aria-label="${isDark ? 'Cambiar a tema claro' : 'Cambiar a tema oscuro'}"
+      title="${isDark ? 'Tema claro' : 'Tema oscuro'}"
+    >
+      ${isDark ? _iconSun() : _iconMoon()}
+    </button>
+  `;
+}
+
+/** Vincula el botón toggle (llamar tras renderizar el topbar) */
+export function bindButton() {
+  const btn = document.getElementById('theme-toggle-btn');
+  btn?.addEventListener('click', toggle);
+}
+
+// ─────────────────────────────── PRIVADO ────────────────────────────────────
+
+function _updateButton(theme) {
+  const btn = document.getElementById('theme-toggle-btn');
+  if (!btn) return;
+  const isDark = theme === 'dark';
+  btn.setAttribute('aria-label', isDark ? 'Cambiar a tema claro' : 'Cambiar a tema oscuro');
+  btn.setAttribute('title', isDark ? 'Tema claro' : 'Tema oscuro');
+  btn.innerHTML = isDark ? _iconSun() : _iconMoon();
+}
+
+function _iconSun() {
+  return `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <circle cx="12" cy="12" r="5"/>
+    <line x1="12" y1="1" x2="12" y2="3"/>
+    <line x1="12" y1="21" x2="12" y2="23"/>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+    <line x1="1" y1="12" x2="3" y2="12"/>
+    <line x1="21" y1="12" x2="23" y2="12"/>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+  </svg>`;
+}
+
+function _iconMoon() {
+  return `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+  </svg>`;
+}

package/ui/js/time-tracker.js

@@ -0,0 +1,248 @@
+/**
+ * time-tracker.js — Cronómetro de tiempo por tarea
+ * Integración con la API de time tracking del backend.
+ */
+
+import * as state from './state.js';
+import * as api from './api.js';
+import { formatDuration } from './utils.js';
+import { flash } from './views/flash.js';
+
+let _interval = null;
+let _startMs  = null;
+
+// ─────────────────────────────── PÚBLICO ────────────────────────────────────
+
+/**
+ * Inicia el timer para una tarea
+ * @param {string} taskId
+ * @param {string} taskTitle
+ */
+export async function start(taskId, taskTitle) {
+  // Si hay uno en curso, detenerlo primero
+  if (state.get('activeEntry')) {
+    await stop();
+  }
+
+  try {
+    const result = await api.startTimeEntry(taskId, taskTitle);
+    const entry = {
+      id:        result.entry?.id || `local-${Date.now()}`,
+      taskId,
+      taskTitle,
+      startedAt: result.entry?.startedAt || new Date().toISOString(),
+    };
+    state.update('activeEntry', entry);
+    _startMs = Date.now() - (result.entry?.elapsedMs || 0);
+    _startInterval();
+    _updateTopbarTimer();
+    flash(`Timer iniciado: ${taskTitle}`, 'success');
+  } catch (err) {
+    // Fallback local si el backend no tiene el endpoint todavía
+    const entry = {
+      id:        `local-${Date.now()}`,
+      taskId,
+      taskTitle,
+      startedAt: new Date().toISOString(),
+    };
+    state.update('activeEntry', entry);
+    _startMs = Date.now();
+    _startInterval();
+    _updateTopbarTimer();
+  }
+}
+
+/**
+ * Pausa el timer (detiene el interval pero conserva el entry)
+ */
+export function pause() {
+  _stopInterval();
+  _updateTopbarTimer();
+}
+
+/**
+ * Reanuda el timer
+ */
+export function resume() {
+  if (!state.get('activeEntry')) return;
+  _startInterval();
+  _updateTopbarTimer();
+}
+
+/**
+ * Detiene el timer y persiste en el backend
+ */
+export async function stop() {
+  const entry = state.get('activeEntry');
+  if (!entry) return;
+
+  _stopInterval();
+  const elapsed = _startMs ? Date.now() - _startMs : 0;
+
+  try {
+    const result = await api.stopTimeEntry(entry.id);
+    const timeEntries = state.get('timeEntries');
+    timeEntries.unshift({
+      ...entry,
+      stoppedAt: new Date().toISOString(),
+      durationMs: result.entry?.durationMs || elapsed,
+    });
+    state.update('timeEntries', timeEntries.slice(0, 50)); // Máximo 50 entries
+  } catch {
+    // Guardar localmente si el backend no está disponible
+    const timeEntries = state.get('timeEntries');
+    timeEntries.unshift({
+      ...entry,
+      stoppedAt: new Date().toISOString(),
+      durationMs: elapsed,
+    });
+    state.update('timeEntries', timeEntries.slice(0, 50));
+  }
+
+  state.update('activeEntry', null);
+  _startMs = null;
+  _updateTopbarTimer();
+}
+
+/**
+ * Obtiene el tiempo transcurrido actual en ms
+ */
+export function getElapsed() {
+  if (!state.get('activeEntry') || !_startMs) return 0;
+  return Date.now() - _startMs;
+}
+
+/**
+ * Obtiene el total de tiempo registrado para una tarea (en ms)
+ * @param {string} taskId
+ */
+export function getTotalForTask(taskId) {
+  return state.get('timeEntries')
+    .filter(e => e.taskId === taskId)
+    .reduce((acc, e) => acc + (e.durationMs || 0), 0);
+}
+
+/**
+ * Carga los time entries del backend
+ */
+export async function loadEntries() {
+  try {
+    const result = await api.getTimeEntries();
+    state.update('timeEntries', result.entries || []);
+  } catch {
+    // Si el endpoint no existe aún, usar array vacío
+    state.update('timeEntries', []);
+  }
+}
+
+// ─────────────────────────────── PRIVADO ────────────────────────────────────
+
+function _startInterval() {
+  _stopInterval();
+  _interval = setInterval(() => {
+    _updateTimerDisplays();
+  }, 1000);
+}
+
+function _stopInterval() {
+  if (_interval) {
+    clearInterval(_interval);
+    _interval = null;
+  }
+  state.update('timerInterval', null);
+}
+
+function _updateTimerDisplays() {
+  const elapsed = getElapsed();
+  const formatted = formatDuration(elapsed);
+
+  // Topbar timer
+  const topbarDisplay = document.getElementById('topbar-timer-display');
+  if (topbarDisplay) topbarDisplay.textContent = formatted;
+
+  // Widget grande (si está visible en Overview)
+  const bigDisplay = document.querySelector('.timer-display');
+  if (bigDisplay) bigDisplay.textContent = formatted;
+}
+
+function _updateTopbarTimer() {
+  const entry = state.get('activeEntry');
+  const topbarTimer = document.getElementById('topbar-timer');
+  if (!topbarTimer) return;
+
+  if (entry) {
+    topbarTimer.classList.add('is-running');
+    const dot = topbarTimer.querySelector('.topbar-timer-dot');
+    const display = document.getElementById('topbar-timer-display');
+    if (display) display.textContent = formatDuration(getElapsed());
+  } else {
+    topbarTimer.classList.remove('is-running');
+    const display = document.getElementById('topbar-timer-display');
+    if (display) display.textContent = '00:00:00';
+  }
+}
+
+/**
+ * Renderiza el widget grande del timer (para overview.js)
+ * @param {string|null} taskId - tarea preseleccionada
+ * @returns {string} HTML
+ */
+export function renderWidget(taskId = null) {
+  const entry     = state.get('activeEntry');
+  const isRunning = !!entry && (!taskId || entry.taskId === taskId);
+  const elapsed   = isRunning ? getElapsed() : 0;
+  const totalMs   = taskId ? getTotalForTask(taskId) : 0;
+
+  const taskTitle = entry?.taskTitle || 'Sin tarea seleccionada';
+
+  return `
+    <div class="time-tracker-card" id="time-tracker-widget">
+      <div class="section-header" style="margin-bottom:var(--space-2)">
+        <div class="section-header-left">
+          <p class="eyebrow">Time Tracker</p>
+        </div>
+      </div>
+
+      <p class="timer-task-name" id="timer-task-name">${isRunning ? taskTitle : (taskId ? 'Clic en Iniciar para comenzar' : 'Selecciona una tarea en el board')}</p>
+
+      <div class="timer-display ${isRunning ? 'is-running' : ''}" id="timer-display">
+        ${formatDuration(elapsed)}
+      </div>
+
+      <div class="timer-controls">
+        ${isRunning ? `
+          <button class="timer-btn timer-btn-stop" id="timer-stop" type="button" aria-label="Detener timer" title="Detener">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
+          </button>
+          <button class="timer-btn timer-btn-pause timer-btn-play" id="timer-pause" type="button" aria-label="Pausar timer" title="Pausar">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
+          </button>
+        ` : `
+          <button class="timer-btn timer-btn-play" id="timer-play" type="button" aria-label="Iniciar timer" title="Iniciar" ${!taskId ? 'disabled' : ''}>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+          </button>
+        `}
+      </div>
+
+      ${totalMs > 0 ? `<p class="timer-total">Total registrado: <strong>${formatDuration(totalMs)}</strong></p>` : ''}
+    </div>
+  `;
+}
+
+/**
+ * Vincula los eventos del widget del timer al DOM
+ * @param {string|null} taskId
+ * @param {string|null} taskTitle
+ */
+export function bindWidget(taskId, taskTitle) {
+  const playBtn  = document.getElementById('timer-play');
+  const pauseBtn = document.getElementById('timer-pause');
+  const stopBtn  = document.getElementById('timer-stop');
+
+  playBtn?.addEventListener('click', () => start(taskId, taskTitle));
+  pauseBtn?.addEventListener('click', () => {
+    if (_interval) pause();
+    else resume();
+  });
+  stopBtn?.addEventListener('click', stop);
+}

package/ui/js/utils.js

@@ -0,0 +1,172 @@
+/**
+ * utils.js — Funciones de utilidad globales
+ */
+
+/**
+ * Escapa caracteres HTML para prevenir XSS
+ * @param {*} value
+ * @returns {string}
+ */
+export function esc(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+/**
+ * Formatea una fecha ISO a formato legible según locale
+ * @param {string} value - ISO date string
+ * @param {'date'|'datetime'|'time'} style
+ * @returns {string}
+ */
+export function formatDate(value, style = 'datetime') {
+  if (!value) return '—';
+  try {
+    const date = new Date(value);
+    if (isNaN(date.getTime())) return value;
+    if (style === 'date') {
+      return new Intl.DateTimeFormat('es-ES', { dateStyle: 'medium' }).format(date);
+    }
+    if (style === 'time') {
+      return new Intl.DateTimeFormat('es-ES', { timeStyle: 'short' }).format(date);
+    }
+    return new Intl.DateTimeFormat('es-ES', { dateStyle: 'medium', timeStyle: 'short' }).format(date);
+  } catch {
+    return value;
+  }
+}
+
+/**
+ * Formatea duración en ms a HH:MM:SS
+ * @param {number} ms - milisegundos
+ * @returns {string}
+ */
+export function formatDuration(ms) {
+  if (!ms || ms < 0) return '00:00:00';
+  const totalSeconds = Math.floor(ms / 1000);
+  const hours   = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  return [hours, minutes, seconds]
+    .map(n => String(n).padStart(2, '0'))
+    .join(':');
+}
+
+/**
+ * Formatea duración en ms a string legible (ej: "2h 15m")
+ * @param {number} ms
+ * @returns {string}
+ */
+export function formatDurationShort(ms) {
+  if (!ms || ms < 0) return '0m';
+  const totalMinutes = Math.floor(ms / 60000);
+  const hours   = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  if (hours === 0) return `${minutes}m`;
+  if (minutes === 0) return `${hours}h`;
+  return `${hours}h ${minutes}m`;
+}
+
+/**
+ * Debounce: retrasa la ejecución de una función hasta que deja de llamarse
+ * @param {Function} fn
+ * @param {number} wait - ms
+ * @returns {Function}
+ */
+export function debounce(fn, wait = 250) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), wait);
+  };
+}
+
+/**
+ * Genera array de los últimos N días (YYYY-MM-DD)
+ * @param {number} count
+ * @returns {string[]}
+ */
+export function lastDays(count = 10) {
+  return Array.from({ length: count }, (_, i) => {
+    const d = new Date();
+    d.setDate(d.getDate() - (count - i - 1));
+    return d.toISOString().slice(0, 10);
+  });
+}
+
+/**
+ * Divide un string multilínea o separado por comas en array de strings
+ * @param {string} value
+ * @returns {string[]}
+ */
+export function splitLines(value) {
+  return String(value || '')
+    .split(/\r?\n|,/)
+    .map(s => s.trim())
+    .filter(Boolean);
+}
+
+/**
+ * Slugifica un string (minúsculas, sin acentos, sin caracteres especiales)
+ * @param {string} value
+ * @returns {string}
+ */
+export function slugify(value) {
+  return String(value || '')
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 48);
+}
+
+/**
+ * Extrae el historial de todas las tareas ordenado desc por fecha
+ * @param {Array} tasks
+ * @returns {Array}
+ */
+export function extractHistory(tasks) {
+  return (tasks || [])
+    .flatMap(t => (t.history || []).map(e => ({ ...e, taskId: t.id, taskTitle: t.title })))
+    .sort((a, b) => (a.at < b.at ? 1 : -1));
+}
+
+/**
+ * Genera un número de color consistente desde un string
+ * @param {string} str
+ * @returns {string} hsl color
+ */
+export function stringToColor(str) {
+  let hash = 0;
+  for (const ch of (str || '')) {
+    hash = ch.charCodeAt(0) + ((hash << 5) - hash);
+  }
+  const hue = ((hash % 360) + 360) % 360;
+  return `hsl(${hue}, 60%, 65%)`;
+}
+
+/**
+ * Clamp: limita valor entre min y max
+ */
+export function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * Crea un elemento <div> con clases opcionales e innerHTML
+ * (helper para generación de DOM sin frameworks)
+ * @param {string} tag
+ * @param {string} [className]
+ * @param {string} [innerHTML]
+ * @returns {HTMLElement}
+ */
+export function el(tag = 'div', className = '', innerHTML = '') {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  if (innerHTML) element.innerHTML = innerHTML;
+  return element;
+}