@jjlmoya/utils-chrono 1.2.0

package/src/tool/watch-accuracy-tracker/client.ts

@@ -0,0 +1,287 @@
+import {
+  formatDrift,
+  getTernaryDriftClass,
+  calculateAverageRate,
+  getExplanationForRate
+} from './utils';
+
+import {
+  getLogs,
+  saveLogs,
+  renderLogsTable,
+  updateOverallStats
+} from './logger';
+import type { LogEntry } from './logger';
+
+import { drawTrendChart } from './chart';
+
+interface Watch {
+  id: string;
+  name: string;
+}
+
+const STORAGE_WATCHES = 'jjlmoya_chrono_watches';
+const STORAGE_LOGS = 'jjlmoya_chrono_logs_';
+
+const mainEl = document.querySelector('.tool-main-card') as HTMLElement;
+const ui = mainEl ? JSON.parse(mainEl.dataset.ui || '{}') : {};
+const statusPass = ui.statusPass || 'Pass';
+const statusFail = ui.statusFail || 'Fail';
+
+const tabButtons = document.querySelectorAll('.tab-btn');
+const tabContents = document.querySelectorAll('.tab-content');
+
+const driftRateInput = document.getElementById('drift-rate-input') as HTMLInputElement;
+const presetBtns = document.querySelectorAll('.preset-btn');
+const projectionTbody = document.getElementById('projection-tbody') as HTMLElement;
+const standardCards = document.querySelectorAll('.standard-card');
+
+const watchSelector = document.getElementById('watch-selector') as HTMLSelectElement;
+const newWatchNameInput = document.getElementById('new-watch-name') as HTMLInputElement;
+const addWatchBtn = document.getElementById('add-watch-btn') as HTMLElement;
+const deleteWatchBtn = document.getElementById('delete-watch-btn') as HTMLElement;
+
+const logFormSection = document.getElementById('log-form-section') as HTMLElement;
+const offsetInput = document.getElementById('offset-input') as HTMLInputElement;
+const positionSelector = document.getElementById('position-selector') as HTMLSelectElement;
+const measurementDateInput = document.getElementById('measurement-date') as HTMLInputElement;
+const useCurrentTimeBtn = document.getElementById('use-current-time-btn') as HTMLElement;
+const saveLogBtn = document.getElementById('save-log-btn') as HTMLElement;
+
+const clearLogsBtn = document.getElementById('clear-logs-btn') as HTMLElement;
+const avgRateVal = document.getElementById('avg-rate-val') as HTMLElement;
+const precisionStatusVal = document.getElementById('precision-status-val') as HTMLElement;
+const totalLogsVal = document.getElementById('total-logs-val') as HTMLElement;
+const logsTbody = document.getElementById('logs-tbody') as HTMLElement;
+const noLogsMsg = document.getElementById('no-logs-msg') as HTMLElement;
+
+const exportCsvBtn = document.getElementById('export-csv-btn') as HTMLElement;
+const avgRateExplanationBox = document.getElementById('avg-rate-explanation-box') as HTMLElement;
+const chartWrapper = document.getElementById('chart-wrapper') as HTMLElement;
+const driftTrendChart = document.getElementById('drift-trend-chart') as HTMLCanvasElement;
+
+let watches: Watch[] = [];
+let currentWatchId = '';
+
+tabButtons.forEach(btn => {
+  btn.addEventListener('click', () => {
+    tabButtons.forEach(b => b.classList.remove('active'));
+    tabContents.forEach(c => c.classList.remove('active'));
+    btn.classList.add('active');
+    const tabId = btn.getAttribute('data-tab');
+    if (tabId) {
+      const el = document.getElementById(tabId);
+      if (el) el.classList.add('active');
+    }
+  });
+});
+
+function updateDriftProjections(rate: number) {
+  if (!projectionTbody) return;
+  projectionTbody.querySelectorAll('tr').forEach(row => {
+    const days = parseFloat(row.getAttribute('data-days') || '0');
+    const valCell = row.querySelector('.drift-val');
+    if (valCell) {
+      valCell.textContent = formatDrift(rate * days);
+      valCell.className = getTernaryDriftClass(rate);
+    }
+  });
+
+  standardCards.forEach(card => {
+    const min = parseFloat(card.getAttribute('data-min') || '0');
+    const max = parseFloat(card.getAttribute('data-max') || '0');
+    const statusSpan = card.querySelector('.std-status');
+    const isPassed = rate >= min && rate <= max;
+    card.className = `standard-card ${isPassed ? 'passed' : 'failed'}`;
+    if (statusSpan) {
+      statusSpan.textContent = isPassed ? statusPass : statusFail;
+    }
+  });
+}
+
+driftRateInput.addEventListener('input', (e) => {
+  const target = e.target as HTMLInputElement;
+  updateDriftProjections(parseFloat(target.value) || 0);
+});
+
+presetBtns.forEach(btn => {
+  btn.addEventListener('click', () => {
+    const val = btn.getAttribute('data-value');
+    if (val) {
+      driftRateInput.value = val;
+      updateDriftProjections(parseFloat(val));
+    }
+  });
+});
+
+function deleteLog(logId: string) {
+  if (!currentWatchId) return;
+  const logs = getLogs(currentWatchId).filter(l => l.id !== logId);
+  saveLogs(currentWatchId, logs);
+  updateLogsDisplay();
+}
+
+function updateStatsAndChart(logs: LogEntry[]) {
+  if (logs.length >= 2) {
+    chartWrapper.style.display = 'block';
+    drawTrendChart(driftTrendChart, logs);
+    const first = logs[0];
+    const last = logs[logs.length - 1];
+    const avgRate = calculateAverageRate(first.offset, last.offset, first.date, last.date);
+    if (avgRate !== null) {
+      avgRateExplanationBox.textContent = getExplanationForRate(avgRate);
+      avgRateExplanationBox.style.display = 'block';
+    } else {
+      avgRateExplanationBox.style.display = 'none';
+    }
+  } else {
+    chartWrapper.style.display = 'none';
+    avgRateExplanationBox.style.display = 'none';
+  }
+}
+
+function updateLogsDisplay() {
+  if (!currentWatchId) return;
+  const logs = getLogs(currentWatchId).sort(
+    (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
+  );
+  totalLogsVal.textContent = logs.length.toString();
+
+  if (logs.length === 0) {
+    noLogsMsg.style.display = 'block';
+    logsTbody.innerHTML = '';
+    updateOverallStats([], avgRateVal, precisionStatusVal, ui);
+    updateStatsAndChart([]);
+    return;
+  }
+
+  noLogsMsg.style.display = 'none';
+  renderLogsTable(logs, logsTbody, deleteLog);
+  updateOverallStats(logs, avgRateVal, precisionStatusVal, ui);
+  updateStatsAndChart(logs);
+}
+
+function resetFields() {
+  avgRateVal.textContent = '--';
+  precisionStatusVal.textContent = '--';
+  precisionStatusVal.className = 'stat-value';
+  totalLogsVal.textContent = '0';
+  logsTbody.innerHTML = '';
+}
+
+function clearUIStats() {
+  logFormSection.classList.add('disabled-form');
+  resetFields();
+  noLogsMsg.style.display = 'block';
+  avgRateExplanationBox.style.display = 'none';
+  chartWrapper.style.display = 'none';
+}
+
+function selectWatch(id: string) {
+  currentWatchId = id;
+  watchSelector.value = id;
+  if (id) {
+    logFormSection.classList.remove('disabled-form');
+    updateLogsDisplay();
+  } else {
+    clearUIStats();
+  }
+}
+
+function updateWatchSelector() {
+  const prevVal = watchSelector.value;
+  watchSelector.innerHTML = `<option value="">-- ${ui.selectWatch || "Select Watch"} --</option>`;
+  watches.forEach(w => {
+    const opt = document.createElement('option');
+    opt.value = w.id;
+    opt.textContent = w.name;
+    watchSelector.appendChild(opt);
+  });
+  if (watches.some(w => w.id === prevVal)) {
+    watchSelector.value = prevVal;
+  } else {
+    watchSelector.value = '';
+    selectWatch('');
+  }
+}
+
+function saveWatches() {
+  localStorage.setItem(STORAGE_WATCHES, JSON.stringify(watches));
+}
+
+function loadWatches() {
+  const data = localStorage.getItem(STORAGE_WATCHES);
+  watches = data ? JSON.parse(data) : [];
+  updateWatchSelector();
+}
+
+watchSelector.addEventListener('change', (e) => {
+  const target = e.target as HTMLSelectElement;
+  selectWatch(target.value);
+});
+
+addWatchBtn.addEventListener('click', () => {
+  const name = newWatchNameInput.value.trim();
+  if (!name) return;
+  const id = 'watch_' + Date.now();
+  watches.push({ id, name });
+  saveWatches();
+  updateWatchSelector();
+  selectWatch(id);
+  newWatchNameInput.value = '';
+});
+
+deleteWatchBtn.addEventListener('click', () => {
+  if (!currentWatchId) return;
+  watches = watches.filter(w => w.id !== currentWatchId);
+  saveWatches();
+  localStorage.removeItem(STORAGE_LOGS + currentWatchId);
+  loadWatches();
+});
+
+function setTimeInputToNow() {
+  const now = new Date();
+  const tzOffset = now.getTimezoneOffset() * 60000;
+  const localISOTime = (new Date(now.getTime() - tzOffset)).toISOString().slice(0, 16);
+  measurementDateInput.value = localISOTime;
+}
+
+useCurrentTimeBtn.addEventListener('click', setTimeInputToNow);
+
+function onSaveLog() {
+  if (!currentWatchId) return;
+  const offset = parseFloat(offsetInput.value);
+  const dateVal = measurementDateInput.value;
+  const posVal = positionSelector.value;
+  if (isNaN(offset) || !dateVal) return;
+
+  const logs = getLogs(currentWatchId);
+  logs.push({
+    id: 'log_' + Date.now(),
+    offset,
+    date: dateVal,
+    position: posVal || undefined
+  });
+  saveLogs(currentWatchId, logs);
+  updateLogsDisplay();
+
+  offsetInput.value = '';
+  positionSelector.value = '';
+  setTimeInputToNow();
+}
+
+saveLogBtn.addEventListener('click', onSaveLog);
+
+clearLogsBtn.addEventListener('click', () => {
+  if (!currentWatchId) return;
+  saveLogs(currentWatchId, []);
+  updateLogsDisplay();
+});
+
+exportCsvBtn.addEventListener('click', () => {
+  if (currentWatchId) exportToCsv(currentWatchId);
+});
+
+setTimeInputToNow();
+loadWatches();
+updateDriftProjections(0);

package/src/tool/watch-accuracy-tracker/component.astro

@@ -0,0 +1,35 @@
+---
+import DriftPredictor from './components/DriftPredictor.astro';
+import AccuracyTracker from './components/AccuracyTracker.astro';
+import LogHistory from './components/LogHistory.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
+  <div class="tabs-header">
+    <button type="button" class="tab-btn active" data-tab="drift-tab">
+      {ui.driftCalculatorTab || "Drift Predictor"}
+    </button>
+    <button type="button" class="tab-btn" data-tab="tracker-tab">
+      {ui.trackerTab || "Rate Logger"}
+    </button>
+  </div>
+
+  <div class="tab-content active" id="drift-tab">
+    <DriftPredictor labels={ui} />
+  </div>
+
+  <div class="tab-content" id="tracker-tab">
+    <div class="tracker-layout">
+      <AccuracyTracker labels={ui} />
+      <LogHistory labels={ui} />
+    </div>
+  </div>
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/watch-accuracy-tracker/components/AccuracyTracker.astro

@@ -0,0 +1,96 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="accuracy-tracker-section">
+  <div class="watch-selection-panel">
+    <div class="select-group">
+      <label class="control-label" for="watch-selector">
+        {labels.selectWatch || "Select Watch"}
+      </label>
+      <div class="watch-row-controls">
+        <select id="watch-selector" class="form-control">
+          <option value="">-- {labels.selectWatch || "Select Watch"} --</option>
+        </select>
+        <button type="button" id="delete-watch-btn" class="btn btn-danger" title={labels.deleteWatch || "Delete Watch"}>
+          <Icon name="mdi:trash-can-outline" width="18" height="18" />
+        </button>
+      </div>
+    </div>
+
+    <div class="add-watch-group">
+      <div class="input-with-button">
+        <input
+          type="text"
+          id="new-watch-name"
+          class="form-control"
+          placeholder={labels.watchPlaceholder || "e.g. Seiko SKX007"}
+        />
+        <button type="button" id="add-watch-btn" class="btn btn-primary">
+          <Icon name="mdi:plus" width="18" height="18" />
+          {labels.addWatch || "Add"}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div id="log-form-section" class="log-form-section disabled-form">
+    <h4>{labels.addLog || "Log New Measurement"}</h4>
+    <div class="form-grid">
+      <div class="input-group">
+        <label class="control-label" for="offset-input">
+          {labels.offsetLabel || "Offset (seconds)"}
+        </label>
+        <input
+          type="number"
+          id="offset-input"
+          class="form-control"
+          placeholder={labels.offsetPlaceholder || "0"}
+          step="any"
+        />
+      </div>
+
+      <div class="input-group">
+        <label class="control-label" for="position-selector">
+          {labels.positionLabel || "Rest Position"}
+        </label>
+        <select id="position-selector" class="form-control">
+          <option value="">-- None --</option>
+          <option value="DU">Dial Up (DU)</option>
+          <option value="DD">Dial Down (DD)</option>
+          <option value="CU">Crown Up (CU)</option>
+          <option value="CD">Crown Down (CD)</option>
+          <option value="CL">Crown Left (CL)</option>
+          <option value="CR">Crown Right (CR)</option>
+        </select>
+      </div>
+
+      <div class="input-group">
+        <div class="label-row">
+          <label class="control-label" for="measurement-date">
+            {labels.dateLabel || "Measurement Time"}
+          </label>
+          <button type="button" id="use-current-time-btn" class="btn-text">
+            {labels.useCurrentTime || "Use Current Time"}
+          </button>
+        </div>
+        <input
+          type="datetime-local"
+          id="measurement-date"
+          class="form-control"
+        />
+      </div>
+    </div>
+
+    <button type="button" id="save-log-btn" class="btn btn-success btn-full">
+      <Icon name="mdi:content-save-outline" width="18" height="18" />
+      {labels.saveLog || "Save Log"}
+    </button>
+  </div>
+</div>

package/src/tool/watch-accuracy-tracker/components/DriftPredictor.astro

@@ -0,0 +1,126 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="drift-predictor-section">
+  <div class="predictor-grid">
+    <div class="input-section">
+      <label class="control-label" for="drift-rate-input">
+        {labels.dailyRateInput || "Daily Rate Deviation (seconds/day)"}
+      </label>
+      <div class="input-with-unit">
+        <input
+          type="number"
+          id="drift-rate-input"
+          class="form-control"
+          placeholder={labels.dailyRatePlaceholder || "e.g. +4.5 or -3"}
+          step="any"
+          value="0"
+        />
+        <span class="unit-badge">{labels.secondsPerDay || "s/d"}</span>
+      </div>
+      <div class="presets-container">
+        <button type="button" class="preset-btn" data-value="2.0">{labels.presetRolex || "Rolex (+2 s/d)"}</button>
+        <button type="button" class="preset-btn" data-value="4.0">{labels.presetCosc || "COSC (+4 s/d)"}</button>
+        <button type="button" class="preset-btn" data-value="15.0">{labels.presetStdMech || "Standard (+15 s/d)"}</button>
+        <button type="button" class="preset-btn" data-value="0.5">{labels.presetQuartz || "Quartz (+0.5 s/d)"}</button>
+      </div>
+    </div>
+
+    <div class="projections-section">
+      <h4>{labels.driftHeading || "Projections"}</h4>
+      <div class="projection-table-wrapper">
+        <table class="projection-table">
+          <thead>
+            <tr>
+              <th>{labels.period || "Period"}</th>
+              <th>{labels.accumulatedDrift || "Projected Drift"}</th>
+            </tr>
+          </thead>
+          <tbody id="projection-tbody">
+            <tr data-days="1">
+              <td>{labels.day || "1 Day"}</td>
+              <td class="drift-val" data-val="0">0.0s</td>
+            </tr>
+            <tr data-days="7">
+              <td>{labels.week || "1 Week"}</td>
+              <td class="drift-val" data-val="0">0.0s</td>
+            </tr>
+            <tr data-days="30">
+              <td>{labels.month || "1 Month"}</td>
+              <td class="drift-val" data-val="0">0.0s</td>
+            </tr>
+            <tr data-days="90">
+              <td>{labels.months3 || "3 Months"}</td>
+              <td class="drift-val" data-val="0">0.0s</td>
+            </tr>
+            <tr data-days="180">
+              <td>{labels.months6 || "6 Months"}</td>
+              <td class="drift-val" data-val="0">0.0s</td>
+            </tr>
+            <tr data-days="365">
+              <td>{labels.year || "1 Year"}</td>
+              <td class="drift-val" data-val="0">0.0s</td>
+            </tr>
+            <tr data-days="1825">
+              <td>{labels.years5 || "5 Years"}</td>
+              <td class="drift-val" data-val="0">0.0s</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <div class="standards-section">
+    <h4>{labels.watchStandardTitle || "Standards Certification"}</h4>
+    <div class="standards-grid">
+      <div class="standard-card" id-std="rolex" data-min="-2" data-max="2">
+        <div class="std-header">
+          <span class="std-name">{labels.stdRolex || "Rolex Superlative"}</span>
+          <span class="std-status"></span>
+        </div>
+        <span class="std-tolerance">{labels.toleranceRolex || "±2 s/d"}</span>
+      </div>
+      <div class="standard-card" id-std="cosc" data-min="-4" data-max="6">
+        <div class="std-header">
+          <span class="std-name">{labels.stdCosc || "COSC Chronometer"}</span>
+          <span class="std-status"></span>
+        </div>
+        <span class="std-tolerance">{labels.toleranceCosc || "-4 / +6 s/d"}</span>
+      </div>
+      <div class="standard-card" id-std="metas" data-min="0" data-max="5">
+        <div class="std-header">
+          <span class="std-name">{labels.stdMetas || "METAS Master"}</span>
+          <span class="std-status"></span>
+        </div>
+        <span class="std-tolerance">{labels.toleranceMetas || "0 / +5 s/d"}</span>
+      </div>
+      <div class="standard-card" id-std="standard-mech" data-min="-15" data-max="25">
+        <div class="std-header">
+          <span class="std-name">{labels.stdStdMech || "Standard Mechanical"}</span>
+          <span class="std-status"></span>
+        </div>
+        <span class="std-tolerance">{labels.toleranceStdMech || "±15 s/d"}</span>
+      </div>
+      <div class="standard-card" id-std="quartz" data-min="-0.5" data-max="0.5">
+        <div class="std-header">
+          <span class="std-name">{labels.stdQuartz || "Standard Quartz"}</span>
+          <span class="std-status"></span>
+        </div>
+        <span class="std-tolerance">{labels.toleranceQuartz || "±0.5 s/d"}</span>
+      </div>
+      <div class="standard-card" id-std="haq" data-min="-0.027" data-max="0.027">
+        <div class="std-header">
+          <span class="std-name">{labels.stdHaq || "High-Precision Quartz"}</span>
+          <span class="std-status"></span>
+        </div>
+        <span class="std-tolerance">{labels.toleranceHaq || "±10 s/year"}</span>
+      </div>
+    </div>
+  </div>
+</div>

package/src/tool/watch-accuracy-tracker/components/LogHistory.astro

@@ -0,0 +1,66 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="log-history-section">
+  <div class="history-header">
+    <h4>{labels.historyTitle || "Measurement History"}</h4>
+    <div class="header-actions-row">
+      <button type="button" id="export-csv-btn" class="btn btn-primary btn-sm">
+        <Icon name="mdi:download-outline" width="16" height="16" />
+        Export CSV
+      </button>
+      <button type="button" id="clear-logs-btn" class="btn btn-danger btn-sm">
+        <Icon name="mdi:history" width="16" height="16" />
+        Clear All
+      </button>
+    </div>
+  </div>
+
+  <div class="chart-card-wrapper" id="chart-wrapper" style="display: none;">
+    <canvas id="drift-trend-chart"></canvas>
+  </div>
+
+  <div class="stats-grid">
+    <div class="stat-box">
+      <span class="stat-label">{labels.avgRate || "Average Daily Rate"}</span>
+      <span id="avg-rate-val" class="stat-value">--</span>
+    </div>
+    <div class="stat-box">
+      <span class="stat-label">{labels.consistency || "Precision Status"}</span>
+      <span id="precision-status-val" class="stat-value">--</span>
+    </div>
+    <div class="stat-box">
+      <span class="stat-label">{labels.totalLogs || "Total Logs"}</span>
+      <span id="total-logs-val" class="stat-value">0</span>
+    </div>
+  </div>
+
+  <div id="avg-rate-explanation-box" class="explanation-box" style="display: none;">
+  </div>
+
+  <div class="table-wrapper">
+    <table class="history-table" id="logs-table">
+      <thead>
+        <tr>
+          <th>{labels.tableDate || "Date & Time"}</th>
+          <th>{labels.tableOffset || "Offset"}</th>
+          <th>{labels.tableRate || "Daily Rate"}</th>
+          <th>{labels.tableActions || "Actions"}</th>
+        </tr>
+      </thead>
+      <tbody id="logs-tbody">
+      </tbody>
+    </table>
+  </div>
+
+  <div id="no-logs-msg" class="no-logs-msg">
+    <p>{labels.noLogs || "No logs recorded for this watch yet. Add at least two logs to calculate accuracy."}</p>
+  </div>
+</div>