@jjlmoya/utils-chrono 1.4.0 → 1.6.0

package/src/tool/service-interval-tracker/bibliography.astro

@@ -0,0 +1,16 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { serviceIntervalTracker } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props as Props;
+const loader = serviceIntervalTracker.i18n[locale] || serviceIntervalTracker.i18n.en;
+const content = await loader?.();
+if (!content) return null;
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/service-interval-tracker/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Watch Service Guide: When to Service Your Watch',
+    url: 'https://mccaskillandcompany.com/pages/watch-service-guide-know-when-to-service-your-watch',
+  },
+  {
+    name: 'HOW TO DETERMINE WHETHER OR NOT YOUR WATCH NEEDS A SERVICE',
+    url: 'https://nobswatchmaker.com/blog/the-definitive-guide-to-getting-your-watch-serviced',
+  },
+];

package/src/tool/service-interval-tracker/client.ts

@@ -0,0 +1,233 @@
+import {
+  type Watch,
+  state,
+} from './helpers';
+import { entryHTML } from './renderer';
+
+const UI = JSON.parse((document.querySelector('.svc') as HTMLElement).dataset.ui || '{}');
+
+const KEY = 'chrono-service-intervals';
+const intervals: Record<string, number> = { automatic: 4, manual: 4, quartz: 7, kinetic: 5 };
+
+const roster = document.getElementById('svc-roster') as HTMLElement;
+const empty = document.getElementById('svc-empty') as HTMLElement;
+const emptyBtn = document.getElementById('svc-empty-btn') as HTMLButtonElement;
+const summary = document.getElementById('svc-summary') as HTMLElement;
+const overlay = document.getElementById('svc-overlay') as HTMLElement;
+const modalTitle = document.getElementById('svc-modal-title') as HTMLElement;
+const modalX = document.getElementById('svc-modal-x') as HTMLButtonElement;
+const modalCancel = document.getElementById('svc-modal-cancel') as HTMLButtonElement;
+const modalSave = document.getElementById('svc-modal-save') as HTMLButtonElement;
+const modalErr = document.getElementById('svc-modal-err') as HTMLElement;
+const addBtn = document.getElementById('svc-add') as HTMLButtonElement;
+const nameIn = document.getElementById('svc-name') as HTMLInputElement;
+const movIn = document.getElementById('svc-movement') as HTMLSelectElement;
+const dateIn = document.getElementById('svc-date') as HTMLInputElement;
+const neverIn = document.getElementById('svc-never') as HTMLInputElement;
+
+let ws: Watch[] = [];
+let editingId: string | null = null;
+
+function load() {
+  try {
+    ws = JSON.parse(localStorage.getItem(KEY) || '[]');
+  } catch {
+    ws = [];
+  }
+}
+
+function save() {
+  localStorage.setItem(KEY, JSON.stringify(ws));
+}
+
+function uid(): string {
+  return crypto.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function renderSummary() {
+  const total = ws.length;
+  const h = ws.filter((w) => state(w) === 'healthy').length;
+  const d = ws.filter((w) => state(w) === 'due').length;
+  const o = ws.filter((w) => state(w) === 'overdue').length;
+
+  summary.innerHTML = `
+    <div class="svc-stat-card">
+      <span class="svc-stat-val">${total}</span>
+      <span class="svc-stat-lbl">Collection</span>
+    </div>
+    <div class="svc-stat-card svc-stat-healthy">
+      <span class="svc-stat-val">${h}</span>
+      <span class="svc-stat-lbl">${UI.healthy || 'Healthy'}</span>
+    </div>
+    <div class="svc-stat-card svc-stat-due">
+      <span class="svc-stat-val">${d}</span>
+      <span class="svc-stat-lbl">${UI.due || 'Due'}</span>
+    </div>
+    <div class="svc-stat-card svc-stat-overdue">
+      <span class="svc-stat-val">${o}</span>
+      <span class="svc-stat-lbl">${UI.overdue || 'Overdue'}</span>
+    </div>
+  `;
+}
+
+function openModal(title: string, w?: Watch) {
+  modalTitle.textContent = title;
+  editingId = w ? w.id : null;
+  if (w) {
+    nameIn.value = w.name;
+    movIn.value = w.movement;
+    dateIn.value = w.lastService || '';
+    neverIn.checked = !w.lastService;
+  } else {
+    nameIn.value = '';
+    movIn.value = 'automatic';
+    dateIn.value = '';
+    neverIn.checked = false;
+  }
+  dateIn.disabled = neverIn.checked;
+  modalErr.textContent = '';
+  overlay.classList.add('open');
+  setTimeout(() => nameIn.focus(), 150);
+}
+
+function closeModal() {
+  overlay.classList.remove('open');
+  editingId = null;
+}
+
+function validate(): string | null {
+  if (!nameIn.value.trim()) {
+    return (UI.nameLabel || 'Name') + ' is required';
+  }
+  if (!dateIn.value && !neverIn.checked) {
+    return (UI.dateLabel || 'Date') + ' is required';
+  }
+  return null;
+}
+
+neverIn.addEventListener('change', () => {
+  dateIn.disabled = neverIn.checked;
+  if (neverIn.checked) {
+    dateIn.value = '';
+  }
+});
+
+overlay.addEventListener('click', (e) => {
+  if (e.target === overlay) {
+    closeModal();
+  }
+});
+
+modalX.addEventListener('click', closeModal);
+modalCancel.addEventListener('click', closeModal);
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && overlay.classList.contains('open')) {
+    closeModal();
+  }
+});
+
+modalSave.addEventListener('click', () => {
+  const err = validate();
+  if (err) {
+    modalErr.textContent = err;
+    return;
+  }
+  modalErr.textContent = '';
+
+  const name = nameIn.value.trim();
+  const movement = movIn.value;
+  const interval = intervals[movement] || 4;
+  let lastService: string | null = null;
+  if (!neverIn.checked && dateIn.value) {
+    lastService = dateIn.value;
+  }
+
+  if (editingId) {
+    const idx = ws.findIndex((w) => w.id === editingId);
+    if (idx >= 0) {
+      ws[idx] = { id: editingId, name, movement, lastService, intervalYears: interval };
+    }
+  } else {
+    ws.push({ id: uid(), name, movement, lastService, intervalYears: interval });
+  }
+
+  save();
+  renderAll();
+  closeModal();
+});
+
+addBtn.addEventListener('click', () => openModal(UI.addWatch || 'Add Watch'));
+emptyBtn.addEventListener('click', () => openModal(UI.addWatch || 'Add Watch'));
+
+function handleWatchDelete(id: string) {
+  if (confirm(UI.confirmDelete || 'Remove this watch?')) {
+    ws = ws.filter((x) => x.id !== id);
+    save();
+    renderAll();
+  }
+}
+
+function handleWatchEdit(id: string) {
+  const w = ws.find((x) => x.id === id);
+  if (w) {
+    openModal(UI.editWatch || 'Edit Watch', w);
+  }
+}
+
+function handleCardClick(e: Event) {
+  const t = e.target as HTMLElement;
+  const del = t.closest('.svc-card-del');
+  if (del) {
+    e.stopPropagation();
+    const id = del.getAttribute('data-id');
+    if (id) {
+      handleWatchDelete(id);
+    }
+    return;
+  }
+  const card = t.closest('.svc-card');
+  if (card && !card.classList.contains('svc-card-add-placeholder')) {
+    const id = card.getAttribute('data-id');
+    if (id) {
+      handleWatchEdit(id);
+    }
+  }
+}
+
+document.addEventListener('click', handleCardClick);
+
+function renderAll() {
+  renderSummary();
+  if (!ws.length) {
+    empty.style.display = 'block';
+    roster.style.display = 'none';
+    return;
+  }
+  empty.style.display = 'none';
+  roster.style.display = 'grid';
+  const ord: Record<string, number> = { overdue: 0, due: 1, healthy: 2, unknown: 3 };
+  const sorted = [...ws].sort((a, b) => (ord[state(a)] ?? 4) - (ord[state(b)] ?? 4));
+  
+  const cardsHTML = sorted.map((w) => entryHTML(w, UI)).join('');
+  const addCardHTML = `
+    <div class="svc-card svc-card-add-placeholder" id="svc-card-add-placeholder" tabindex="0" role="button">
+      <div class="svc-card-add-inner">
+        <div class="svc-card-add-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+        </div>
+        <span class="svc-card-add-text">${UI.addWatch || 'Add Watch'}</span>
+      </div>
+    </div>
+  `;
+  
+  roster.innerHTML = cardsHTML + addCardHTML;
+  
+  const addPlaceholder = document.getElementById('svc-card-add-placeholder');
+  if (addPlaceholder) {
+    addPlaceholder.addEventListener('click', () => openModal(UI.addWatch || 'Add Watch'));
+  }
+}
+
+load();
+renderAll();

package/src/tool/service-interval-tracker/component.astro

@@ -0,0 +1,50 @@
+---
+import DashboardHeader from './components/DashboardHeader.astro';
+import EmptyState from './components/EmptyState.astro';
+import AddEditModal from './components/AddEditModal.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="svc" data-ui={JSON.stringify(ui)}>
+  <div class="svc-header-row">
+    <DashboardHeader
+      title={ui.title || "Service Tracker"}
+      collectionHealthLabel={ui.collectionHealth || "Collection health"}
+    />
+    <button class="svc-add-btn-top" id="svc-add" type="button">
+      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+      <span>{ui.addWatch || "Add Watch"}</span>
+    </button>
+  </div>
+
+  <div class="svc-body" id="svc-body">
+    <EmptyState
+      emptyTitle={ui.emptyTitle || "Your collection is empty"}
+      emptyDesc={ui.emptyDesc || "Track service intervals for your watches and never miss a maintenance again."}
+      emptyAction={ui.emptyAction || "Add your first watch"}
+    />
+    <div class="svc-roster" id="svc-roster"></div>
+  </div>
+
+  <AddEditModal
+    addWatch={ui.addWatch || "Add Watch"}
+    cancel={ui.cancel || "Cancel"}
+    save={ui.save || "Save"}
+    nameLabel={ui.nameLabel || "Watch name"}
+    namePlaceholder={ui.namePlaceholder || "e.g. Rolex Submariner"}
+    movementLabel={ui.movementLabel || "Movement type"}
+    movementAuto={ui.movementAuto || "Automatic"}
+    movementManual={ui.movementManual || "Manual"}
+    movementQuartz={ui.movementQuartz || "Quartz"}
+    movementKinetic={ui.movementKinetic || "Kinetic"}
+    dateLabel={ui.dateLabel || "Last service date"}
+    neverServiced={ui.neverServiced || "New or never serviced"}
+  />
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/service-interval-tracker/components/AddEditModal.astro

@@ -0,0 +1,75 @@
+---
+interface Props {
+  addWatch: string;
+  cancel: string;
+  save: string;
+  nameLabel: string;
+  namePlaceholder: string;
+  movementLabel: string;
+  movementAuto: string;
+  movementManual: string;
+  movementQuartz: string;
+  movementKinetic: string;
+  dateLabel: string;
+  neverServiced: string;
+}
+const {
+  addWatch,
+  cancel,
+  save,
+  nameLabel,
+  namePlaceholder,
+  movementLabel,
+  movementAuto,
+  movementManual,
+  movementQuartz,
+  movementKinetic,
+  dateLabel,
+  neverServiced,
+} = Astro.props;
+---
+<div class="svc-overlay" id="svc-overlay">
+  <div class="svc-modal">
+    <div class="svc-modal-top">
+      <span class="svc-modal-title" id="svc-modal-title">{addWatch}</span>
+      <button class="svc-modal-x" id="svc-modal-x" type="button" aria-label="Close modal">
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+      </button>
+    </div>
+
+    <div class="svc-modal-body">
+      <div class="svc-field">
+        <label class="svc-label" for="svc-name">{nameLabel}</label>
+        <input class="svc-input" id="svc-name" type="text" maxlength="60" placeholder={namePlaceholder} autocomplete="off" />
+      </div>
+
+      <div class="svc-field">
+        <label class="svc-label" for="svc-movement">{movementLabel}</label>
+        <div class="svc-select-wrapper">
+          <select class="svc-input svc-select" id="svc-movement">
+            <option value="automatic" selected>{movementAuto}</option>
+            <option value="manual">{movementManual}</option>
+            <option value="quartz">{movementQuartz}</option>
+            <option value="kinetic">{movementKinetic}</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="svc-field">
+        <label class="svc-label" for="svc-date">{dateLabel}</label>
+        <input class="svc-input" id="svc-date" type="date" />
+        <label class="svc-check">
+          <input type="checkbox" id="svc-never" class="svc-checkbox" />
+          <span>{neverServiced}</span>
+        </label>
+      </div>
+
+      <div class="svc-modal-err" id="svc-modal-err"></div>
+    </div>
+
+    <div class="svc-modal-acts">
+      <button class="svc-btn svc-btn-sec" id="svc-modal-cancel" type="button">{cancel}</button>
+      <button class="svc-btn svc-btn-pri" id="svc-modal-save" type="button">{save}</button>
+    </div>
+  </div>
+</div>

package/src/tool/service-interval-tracker/components/DashboardHeader.astro

@@ -0,0 +1,14 @@
+---
+interface Props {
+  title: string;
+  collectionHealthLabel: string;
+}
+const { title, collectionHealthLabel } = Astro.props;
+---
+<div class="svc-dashboard-header">
+  <div class="svc-title-area">
+    <h2 class="svc-h">{title}</h2>
+    <p class="svc-subtitle">{collectionHealthLabel}</p>
+  </div>
+  <div class="svc-stats-summary" id="svc-summary"></div>
+</div>

package/src/tool/service-interval-tracker/components/EmptyState.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+  emptyTitle: string;
+  emptyDesc: string;
+  emptyAction: string;
+}
+const { emptyTitle, emptyDesc, emptyAction } = Astro.props;
+---
+<div class="svc-empty" id="svc-empty">
+  <div class="svc-empty-vis">
+    <div class="svc-empty-glow"></div>
+    <svg class="svc-empty-svg" viewBox="0 0 100 100" fill="none" stroke="currentColor">
+      <circle cx="50" cy="50" r="40" stroke-width="2" stroke-dasharray="6 4" opacity="0.3" />
+      <circle cx="50" cy="50" r="30" stroke-width="1.5" opacity="0.15" />
+      <path d="M50 20v6M50 74v6M20 50h6M74 50h6" stroke-width="2" stroke-linecap="round" opacity="0.4" />
+      <path d="M50 50l12-16M50 50l-8 8" stroke-width="2.5" stroke-linecap="round" />
+      <circle cx="50" cy="50" r="3" fill="currentColor" />
+    </svg>
+  </div>
+  <p class="svc-empty-title">{emptyTitle}</p>
+  <p class="svc-empty-desc">{emptyDesc}</p>
+  <button class="svc-empty-btn" id="svc-empty-btn" type="button">
+    <svg viewBox="0 0 14 14" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M7 1v12M1 7h12"/></svg>
+    <span>{emptyAction}</span>
+  </button>
+</div>

package/src/tool/service-interval-tracker/entry.ts

@@ -0,0 +1,56 @@
+import type { ChronoToolEntry, ToolLocaleContent } from '../../types';
+
+export type ServiceIntervalTrackerUI = {
+  title: string;
+  addWatch: string;
+  editWatch: string;
+  cancel: string;
+  save: string;
+  deleteWatch: string;
+  confirmDelete: string;
+  emptyTitle: string;
+  emptyDesc: string;
+  emptyAction: string;
+  healthy: string;
+  due: string;
+  overdue: string;
+  nameLabel: string;
+  namePlaceholder: string;
+  movementLabel: string;
+  movementAuto: string;
+  movementManual: string;
+  movementQuartz: string;
+  movementKinetic: string;
+  dateLabel: string;
+  neverServiced: string;
+  lastServiceLabel: string;
+  nextServiceLabel: string;
+  serviced: string;
+  newWatch: string;
+  years: string;
+  collectionHealth: string;
+};
+
+export type ServiceIntervalTrackerLocaleContent = ToolLocaleContent<ServiceIntervalTrackerUI>;
+
+export const serviceIntervalTracker: ChronoToolEntry<ServiceIntervalTrackerUI> = {
+  id: 'service-interval-tracker',
+  icons: { bg: 'mdi:wrench-outline', fg: 'mdi:calendar-clock' },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

package/src/tool/service-interval-tracker/helpers.ts

@@ -0,0 +1,82 @@
+export interface Watch {
+  id: string;
+  name: string;
+  movement: string;
+  lastService: string | null;
+  intervalYears: number;
+}
+
+const MS_YEAR = 31536000000;
+const MS_DAY = 86400000;
+const SIX_MO = 180 * MS_DAY;
+
+export function state(w: Watch): string {
+  if (!w.lastService) {
+    return 'unknown';
+  }
+  const n = new Date(w.lastService).getTime() + w.intervalYears * MS_YEAR;
+  if (n < Date.now()) {
+    return 'overdue';
+  }
+  if (n - Date.now() < SIX_MO) {
+    return 'due';
+  }
+  return 'healthy';
+}
+
+export function fmtFull(iso: string): string {
+  return new Date(iso).toLocaleDateString('en-US', { year: 'numeric', month: 'long' });
+}
+
+export function fmtShort(iso: string): string {
+  return new Date(iso).toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
+}
+
+export function nextDate(w: Watch): Date | null {
+  if (!w.lastService) {
+    return null;
+  }
+  return new Date(new Date(w.lastService).getTime() + w.intervalYears * MS_YEAR);
+}
+
+export function nextLabel(w: Watch): { text: string; cls: string } | null {
+  const nd = nextDate(w);
+  if (!nd) {
+    return null;
+  }
+  const left = Math.round((nd.getTime() - Date.now()) / MS_DAY);
+  const s = state(w);
+  if (s === 'overdue') {
+    return { text: `Overdue by ${Math.abs(left).toLocaleString()}d`, cls: 's-o' };
+  }
+  if (s === 'due') {
+    return { text: `${left.toLocaleString()}d left`, cls: 's-d' };
+  }
+  return null;
+}
+
+export function pct(w: Watch): number {
+  if (!w.lastService) {
+    return 0;
+  }
+  return Math.min(100, Math.round((Date.now() - new Date(w.lastService).getTime()) / (w.intervalYears * MS_YEAR) * 100));
+}
+
+export function esc(s: string): string {
+  const d = document.createElement('div');
+  d.textContent = s;
+  return d.innerHTML;
+}
+
+export function getMovementIcon(mov: string): string {
+  if (mov === 'automatic') {
+    return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 10 10"/><path d="M12 12L2.5 7.5"/><circle cx="12" cy="12" r="2"/></svg>`;
+  }
+  if (mov === 'manual') {
+    return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M10 9v10a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V9"/></svg>`;
+  }
+  if (mov === 'kinetic') {
+    return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/><path d="M16 2v4M8 2v4"/></svg>`;
+  }
+  return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="16" height="10" rx="2" ry="2"/><line x1="22" y1="11" x2="22" y2="13"/><line x1="6" y1="12" x2="10" y2="12"/><line x1="8" y1="10" x2="8" y2="14"/></svg>`;
+}