@jjlmoya/utils-chrono 1.17.0 → 1.18.0

package/src/tool/quartz-battery-health/client.ts

@@ -0,0 +1,198 @@
+interface BatteryData {
+  id: string;
+  name: string;
+  capacity: number;
+}
+
+const batteries: BatteryData[] = [
+  { id: 'sr621sw', name: 'SR621SW (364)', capacity: 18 },
+  { id: 'sr626sw', name: 'SR626SW (377)', capacity: 27 },
+  { id: 'sr716sw', name: 'SR716SW (315)', capacity: 25 },
+  { id: 'sr721sw', name: 'SR721SW (361)', capacity: 32 },
+  { id: 'sr920sw', name: 'SR920SW (371)', capacity: 40 },
+  { id: 'sr936sw', name: 'SR936SW (394)', capacity: 55 },
+  { id: 'sr1130sw', name: 'SR1130SW (389)', capacity: 80 },
+  { id: 'sr44', name: 'SR44 (357)', capacity: 150 },
+  { id: 'cr2025', name: 'CR2025', capacity: 165 },
+];
+
+const mainEl = document.querySelector('.tool-main-card') as HTMLElement;
+const ui = mainEl ? JSON.parse(mainEl.dataset.ui || '{}') : {};
+
+const batterySelect = document.getElementById('battery-select') as HTMLSelectElement;
+const customFields = document.getElementById('custom-fields') as HTMLElement;
+const customCapacity = document.getElementById('custom-capacity') as HTMLInputElement;
+const consumptionInput = document.getElementById('consumption-input') as HTMLInputElement;
+const installMonth = document.getElementById('install-month') as HTMLSelectElement;
+const installYear = document.getElementById('install-year') as HTMLInputElement;
+const calcBtn = document.getElementById('calc-btn') as HTMLButtonElement;
+const resultCard = document.getElementById('result-card') as HTMLElement;
+const lifeYears = document.getElementById('life-years') as HTMLElement;
+const lifeMonths = document.getElementById('life-months') as HTMLElement;
+const lifeDays = document.getElementById('life-days') as HTMLElement;
+const gaugeFill = document.getElementById('gauge-fill') as HTMLElement;
+const healthBadge = document.getElementById('health-badge') as HTMLElement;
+const changeDateRow = document.getElementById('change-date-row') as HTMLElement;
+const changeDateValue = document.getElementById('change-date-value') as HTMLElement;
+const changeDateHint = document.getElementById('change-date-hint') as HTMLElement;
+
+const STORAGE_KEY = 'quartz-battery-health-state';
+
+interface SavedState {
+  battery: string;
+  customCapacity: string;
+  consumption: string;
+  month: string;
+  year: string;
+}
+
+function saveState() {
+  const state: SavedState = {
+    battery: batterySelect.value,
+    customCapacity: customCapacity.value,
+    consumption: consumptionInput.value,
+    month: installMonth.value,
+    year: installYear.value,
+  };
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch {}
+}
+
+function setDateDefaults() {
+  installMonth.value = String(new Date().getMonth() + 1);
+  installYear.value = String(new Date().getFullYear());
+}
+
+function restoreState() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) { setDateDefaults(); return; }
+    const state: SavedState = JSON.parse(raw);
+    if (state.battery) batterySelect.value = state.battery;
+    if (state.customCapacity) customCapacity.value = state.customCapacity;
+    if (state.consumption) consumptionInput.value = state.consumption;
+    if (state.month) installMonth.value = state.month;
+    if (state.year) installYear.value = state.year;
+  } catch { setDateDefaults(); }
+}
+
+function parseLocalizedFloat(value: string): number {
+  return parseFloat(value.replace(/,/g, '.')) || 0;
+}
+
+function getBattery(id: string): BatteryData | null {
+  return batteries.find((b) => b.id === id) || null;
+}
+
+function getCapacity(): number {
+  if (batterySelect.value === 'custom') {
+    return parseLocalizedFloat(customCapacity.value) || 40;
+  }
+  const b = getBattery(batterySelect.value);
+  return b ? b.capacity : 40;
+}
+
+function calcValue(input: HTMLInputElement, delta: number) {
+  const step = parseFloat(input.step) || 1;
+  const val = parseLocalizedFloat(input.value);
+  const min = parseFloat(input.min) || 0;
+  const max = parseFloat(input.max) || 100;
+  const next = Math.max(min, Math.min(max, Math.round((val + delta) * (1 / step)) / (1 / step)));
+  input.value = String(next);
+}
+
+function getHealthStatus(pct: number): { label: string; color: string } {
+  if (pct >= 50) return { label: ui.healthGood || 'Good', color: 'var(--color-success, #22c55e)' };
+  if (pct >= 20) return { label: ui.healthModerate || 'Moderate', color: 'var(--color-warning, #f59e0b)' };
+  return { label: ui.healthCritical || 'Critical', color: 'var(--color-danger, #ef4444)' };
+}
+
+function formatDate(d: Date): string {
+  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+function updateHealth(totalDays: number) {
+  const month = parseInt(installMonth.value, 10);
+  const year = parseInt(installYear.value, 10);
+  if (!month || !year) {
+    gaugeFill.style.width = '0%';
+    healthBadge.textContent = '--';
+    changeDateRow.style.display = 'none';
+    changeDateHint.style.display = 'block';
+    return;
+  }
+  const installed = new Date(year, month - 1, 1);
+  const elapsedDays = (Date.now() - installed.getTime()) / 86400000;
+  const remainingPct = Math.max(0, Math.min(100, (1 - elapsedDays / totalDays) * 100));
+
+  gaugeFill.style.width = remainingPct + '%';
+  const health = getHealthStatus(remainingPct);
+  gaugeFill.style.background = `linear-gradient(90deg, ${health.color}, color-mix(in srgb, ${health.color} 70%, #fff 30%))`;
+  healthBadge.textContent = health.label;
+  healthBadge.style.background = health.color;
+
+  const replaceBy = new Date(installed.getTime() + totalDays * 86400000);
+  changeDateValue.textContent = formatDate(replaceBy);
+  changeDateRow.style.display = 'flex';
+  changeDateHint.style.display = 'none';
+}
+
+function calculate() {
+  const capacity = getCapacity();
+  const consumption = parseLocalizedFloat(consumptionInput.value) || 1.5;
+  if (consumption <= 0) return;
+
+  const totalDays = ((capacity * 1000) / consumption) / 24;
+  const totalYears = totalDays / 365.25;
+
+  const years = Math.floor(totalYears);
+  const months = Math.floor((totalYears - years) * 12);
+  const days = Math.floor(totalDays - (years * 365.25 + months * 30.4375));
+
+  lifeYears.textContent = String(years);
+  lifeMonths.textContent = String(months);
+  lifeDays.textContent = String(days);
+
+  updateHealth(totalDays);
+  resultCard.style.display = 'flex';
+}
+
+function toggleCustom() {
+  const show = batterySelect.value === 'custom';
+  customFields.style.display = show ? 'flex' : 'none';
+}
+
+function commit() {
+  saveState();
+  calculate();
+}
+
+batterySelect.addEventListener('change', () => {
+  toggleCustom();
+  commit();
+});
+calcBtn.addEventListener('click', commit);
+
+[customCapacity, consumptionInput, installMonth, installYear].forEach((el) => {
+  el.addEventListener('keydown', (e) => {
+    if ((e as KeyboardEvent).key === 'Enter') commit();
+  });
+  el.addEventListener('input', commit);
+});
+
+document.querySelectorAll('.stepper-btn').forEach((btn) => {
+  btn.addEventListener('click', () => {
+    const target = document.getElementById(btn.getAttribute('data-target') || '') as HTMLInputElement;
+    const dir = parseFloat(btn.getAttribute('data-dir') || '1');
+    if (target) {
+      calcValue(target, dir);
+      commit();
+    }
+  });
+});
+
+restoreState();
+toggleCustom();
+commit();
+
+export {};
+

package/src/tool/quartz-battery-health/component.astro

@@ -0,0 +1,15 @@
+---
+import BatteryHealthPanel from './components/BatteryHealthPanel.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
+  <BatteryHealthPanel labels={ui} />
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/quartz-battery-health/components/BatteryHealthPanel.astro

@@ -0,0 +1,163 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="battery-panel">
+  <div class="panel-section">
+    <div class="section-label">{labels.batteryLabel || "Battery"}</div>
+    <select class="battery-select" id="battery-select">
+      <option value="sr621sw">SR621SW (364) – 18 mAh</option>
+      <option value="sr626sw">SR626SW (377) – 27 mAh</option>
+      <option value="sr716sw">SR716SW (315) – 25 mAh</option>
+      <option value="sr721sw">SR721SW (361) – 32 mAh</option>
+      <option value="sr920sw" selected>SR920SW (371) – 40 mAh</option>
+      <option value="sr936sw">SR936SW (394) – 55 mAh</option>
+      <option value="sr1130sw">SR1130SW (389) – 80 mAh</option>
+      <option value="sr44">SR44 (357) – 150 mAh</option>
+      <option value="cr2025">CR2025 – 165 mAh</option>
+      <option value="custom">{labels.customBattery || "Custom"}</option>
+    </select>
+  </div>
+
+  <div class="panel-section" id="custom-fields" style="display: none;">
+    <div class="section-label">{labels.capacityLabel || "Capacity"}</div>
+    <div class="input-row">
+      <div class="input-group">
+        <label class="input-label" for="custom-capacity">{labels.capacityUnit || "mAh"}</label>
+        <div class="stepper-wrap">
+          <button type="button" class="stepper-btn" data-target="custom-capacity" data-dir="-1">−</button>
+          <input type="number" class="stepper-input" id="custom-capacity" min="1" max="500" value="40" />
+          <button type="button" class="stepper-btn" data-target="custom-capacity" data-dir="1">+</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="panel-section">
+    <div class="section-label">{labels.consumptionLabel || "Consumption"}</div>
+    <div class="input-row">
+      <div class="input-group">
+        <label class="input-label" for="consumption-input">{labels.consumptionUnit || "µA"}</label>
+        <div class="stepper-wrap">
+          <button type="button" class="stepper-btn" data-target="consumption-input" data-dir="-0.1">−</button>
+          <input type="number" class="stepper-input" id="consumption-input" min="0.1" max="200" step="0.1" value="1.5" />
+          <button type="button" class="stepper-btn" data-target="consumption-input" data-dir="0.1">+</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="panel-section">
+    <div class="section-label">
+      {labels.installDateLabel || "Installed on"}
+      <span class="label-optional">{labels.installDateHint || "Optional"}</span>
+    </div>
+    <div class="input-row">
+      <div class="input-group">
+        <label class="input-label" for="install-month">{labels.monthLabel || "Month"}</label>
+        <select class="battery-select" id="install-month">
+          <option value=""></option>
+          <option value="1">1</option>
+          <option value="2">2</option>
+          <option value="3">3</option>
+          <option value="4">4</option>
+          <option value="5">5</option>
+          <option value="6">6</option>
+          <option value="7">7</option>
+          <option value="8">8</option>
+          <option value="9">9</option>
+          <option value="10">10</option>
+          <option value="11">11</option>
+          <option value="12">12</option>
+        </select>
+      </div>
+      <div class="input-group">
+        <label class="input-label" for="install-year">{labels.yearLabel || "Year"}</label>
+        <div class="stepper-wrap">
+          <button type="button" class="stepper-btn" data-target="install-year" data-dir="-1">−</button>
+          <input type="number" class="stepper-input" id="install-year" min="1900" max="2100" value="2025" />
+          <button type="button" class="stepper-btn" data-target="install-year" data-dir="1">+</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <button type="button" class="calc-btn" id="calc-btn">
+    <svg viewBox="0 0 24 24" width="16" height="16">
+      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"></path>
+    </svg>
+    {labels.calculate || "Calculate"}
+  </button>
+
+  <div class="result-card" id="result-card" style="display: none">
+    <div class="result-header">
+      <svg viewBox="0 0 24 24" width="18" height="18">
+        <path d="M13 2.05v2.02c3.95.49 7 3.85 7 7.93 0 4.42-3.58 8-8 8s-8-3.58-8-8c0-4.08 3.05-7.44 7-7.93V2.05C5.05 2.58 2 6.13 2 11c0 5.52 4.48 10 10 10s10-4.48 10-10c0-4.87-3.05-8.42-7-8.95zM12 6v5l4.28 2.54.72-1.21-3.5-2.08V6H12z" fill="currentColor"></path>
+      </svg>
+      <span>{labels.resultLabel || "Estimated Life"}</span>
+    </div>
+
+    <div class="life-stats">
+      <div class="life-stat">
+        <span class="stat-value" id="life-years">--</span>
+        <span class="stat-label">{labels.yearsLabel || "years"}</span>
+      </div>
+      <div class="life-stat">
+        <span class="stat-value" id="life-months">--</span>
+        <span class="stat-label">{labels.monthsLabel || "months"}</span>
+      </div>
+      <div class="life-stat">
+        <span class="stat-value" id="life-days">--</span>
+        <span class="stat-label">{labels.daysLabel || "days"}</span>
+      </div>
+    </div>
+
+    <div class="gauge-wrap">
+      <div class="gauge-track">
+        <div class="gauge-fill" id="gauge-fill"></div>
+      </div>
+      <div class="gauge-marks">
+        <span class="gauge-mark gauge-danger">0</span>
+        <span class="gauge-mark gauge-warning">50</span>
+        <span class="gauge-mark gauge-ok">100%</span>
+      </div>
+    </div>
+
+    <div class="health-row">
+      <span class="health-label">{labels.healthLabel || "Status"}</span>
+      <span class="health-badge" id="health-badge">--</span>
+    </div>
+
+    <div class="change-date-row" id="change-date-row" style="display: none">
+      <span class="change-date-label">{labels.changeDateLabel || "Replace by"}</span>
+      <span class="change-date-value" id="change-date-value">--</span>
+    </div>
+    <div class="change-date-hint" id="change-date-hint">{labels.noDateHint || "Enter install date to see replacement date"}</div>
+  </div>
+
+  <div class="steps-section">
+    <div class="step-row">
+      <div class="step-marker">1</div>
+      <span class="step-text">{labels.step1 || "Choose a common battery or select Custom to enter capacity."}</span>
+    </div>
+    <div class="step-row">
+      <div class="step-marker">2</div>
+      <span class="step-text">{labels.step2 || "Enter the caliber power consumption in microamperes (µA)."}</span>
+    </div>
+    <div class="step-row">
+      <div class="step-marker">3</div>
+      <span class="step-text">{labels.step3 || "Optionally add the installation date, then press Calculate."}</span>
+    </div>
+  </div>
+
+  <div class="tip-row">
+    <svg class="tip-icon" viewBox="0 0 24 24" width="16" height="16">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"></path>
+    </svg>
+    <span class="tip-text">{labels.tipContent || "Always use the consumption value from the official caliber datasheet. Real-world life can be 10-20 % shorter due to temperature and load variations."}</span>
+  </div>
+</div>

package/src/tool/quartz-battery-health/entry.ts

@@ -0,0 +1,57 @@
+import type { ChronoToolEntry, ToolLocaleContent } from '../../types';
+
+export type QuartzBatteryHealthUI = {
+  title: string;
+  batteryLabel: string;
+  selectBattery: string;
+  customBattery: string;
+  capacityLabel: string;
+  capacityUnit: string;
+  consumptionLabel: string;
+  consumptionUnit: string;
+  installDateLabel: string;
+  installDateHint: string;
+  monthLabel: string;
+  yearLabel: string;
+  calculate: string;
+  resultLabel: string;
+  theoreticalLife: string;
+  yearsLabel: string;
+  monthsLabel: string;
+  daysLabel: string;
+  changeDateLabel: string;
+  noDateHint: string;
+  healthLabel: string;
+  healthGood: string;
+  healthModerate: string;
+  healthCritical: string;
+  step1: string;
+  step2: string;
+  step3: string;
+  tipTitle: string;
+  tipContent: string;
+};
+
+export type QuartzBatteryHealthLocaleContent = ToolLocaleContent<QuartzBatteryHealthUI>;
+
+export const quartzBatteryHealth: ChronoToolEntry<QuartzBatteryHealthUI> = {
+  id: 'quartz-battery-health',
+  icons: { bg: 'mdi:battery', fg: 'mdi:heart-pulse' },
+  i18n: {
+    en: () => import('./i18n/en').then((m) => m.content),
+    de: () => import('./i18n/de').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),
+  },
+};