@jjlmoya/utils-motor 1.4.0 → 1.6.0

package/src/tool/evChargingTimeCostPlanner/dom-views.ts

@@ -0,0 +1,124 @@
+import { CHARGING_PRESETS, getCurrencyOption, type ChargingInputs, type ChargingPlan } from './logic';
+import type { ChargingStatus } from './evaluator';
+import type { EVChargingTimeCostPlannerUI } from './ui';
+
+const numberFormatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
+const priceFormatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 });
+const factorFormatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 4 });
+
+export function formatNumber(value: number): string {
+  return numberFormatter.format(value);
+}
+
+export function formatCurrency(value: number, currency: ChargingInputs['currency']): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+    maximumFractionDigits: 2,
+  }).format(value);
+}
+
+function formatPrice(value: number): string {
+  return priceFormatter.format(value);
+}
+
+function formatFactor(value: number): string {
+  return factorFormatter.format(value);
+}
+
+function formatDuration(minutes: number): string {
+  if (minutes <= 0) return '0 min';
+  const hours = Math.floor(minutes / 60);
+  const remainder = minutes % 60;
+  if (hours === 0) return `${remainder} min`;
+  if (remainder === 0) return `${hours} h`;
+  return `${hours} h ${remainder} min`;
+}
+
+function statusText(ui: EVChargingTimeCostPlannerUI, status: ChargingStatus): string {
+  const labels: Record<ChargingStatus, string> = {
+    empty: ui.statusEmpty,
+    short: ui.statusShort,
+    standard: ui.statusStandard,
+    long: ui.statusLong,
+  };
+  return labels[status];
+}
+
+function updateText(root: HTMLElement, selector: string, value: string): void {
+  const element = root.querySelector<HTMLElement>(selector);
+  if (element) element.textContent = value;
+}
+
+function updateCurrencyContext(root: HTMLElement, ui: EVChargingTimeCostPlannerUI, inputs: ChargingInputs): void {
+  const currency = getCurrencyOption(inputs.currency);
+  updateText(root, '[data-ev-currency-code]', currency.code);
+  updateText(root, '[data-ev-price-unit]', `${currency.symbol} / kWh`);
+  updateText(root, '[data-ev-price-label]', `${ui.priceLabel} (${currency.code})`);
+  updateText(root, '[data-ev-currency-factor]', ui.currencyFactorTemplate
+    .replace('{factor}', formatFactor(currency.unitsPerEur))
+    .replace('{currency}', currency.code));
+  root.querySelectorAll<HTMLElement>('[data-ev-currency-option]').forEach((option) => {
+    const active = option.dataset.evCurrencyOption === currency.code;
+    option.setAttribute('aria-selected', String(active));
+    option.classList.toggle('is-active', active);
+  });
+  root.querySelectorAll<HTMLElement>('[data-ev-preset-meta]').forEach((meta) => {
+    const presetId = meta.dataset.evPresetMeta;
+    const preset = CHARGING_PRESETS.find((item) => item.id === presetId);
+    if (!preset) return;
+    const presetCurrency = getCurrencyOption(preset.inputs.currency);
+    const price = (preset.inputs.pricePerKwh / presetCurrency.unitsPerEur) * currency.unitsPerEur;
+    meta.textContent = ui.presetMetaTemplate
+      .replace('{power}', formatPrice(preset.inputs.chargerPowerKw))
+      .replace('{symbol}', currency.symbol)
+      .replace('{price}', formatPrice(price));
+  });
+}
+
+function getAddedLevel(index: number, endSegment: number): string {
+  return index < endSegment ? 'added' : 'empty';
+}
+
+function updateBattery(root: HTMLElement, startSoc: number, endSoc: number): void {
+  const segments = Array.from(root.querySelectorAll<HTMLElement>('[data-ev-segment]'));
+  const startSegment = Math.round((startSoc / 100) * segments.length);
+  const endSegment = Math.round((endSoc / 100) * segments.length);
+  segments.forEach((segment, index) => {
+    const level = index < startSegment ? 'held' : getAddedLevel(index, endSegment);
+    segment.dataset.level = level;
+  });
+  root.style.setProperty('--ev-start-soc', `${startSoc}%`);
+  root.style.setProperty('--ev-end-soc', `${endSoc}%`);
+}
+
+export function renderChargingPlan(
+  root: HTMLElement,
+  view: {
+    ui: EVChargingTimeCostPlannerUI;
+    inputs: ChargingInputs;
+    plan: ChargingPlan;
+    status: ChargingStatus;
+  },
+): void {
+  const { ui, inputs, plan, status } = view;
+  updateCurrencyContext(root, ui, inputs);
+  updateBattery(root, inputs.startSoc, inputs.endSoc);
+  root.dataset.status = status;
+  updateText(root, '[data-ev-start-soc]', `${formatNumber(inputs.startSoc)}%`);
+  updateText(root, '[data-ev-end-soc]', `${formatNumber(inputs.endSoc)}%`);
+  updateText(root, '[data-ev-battery-energy]', `${formatNumber(plan.batteryEnergyKwh)} kWh`);
+  updateText(root, '[data-ev-grid-energy]', `${formatNumber(plan.gridEnergyKwh)} kWh`);
+  updateText(root, '[data-ev-loss-energy]', `${formatNumber(plan.lossEnergyKwh)} kWh`);
+  updateText(root, '[data-ev-time]', formatDuration(plan.timeMinutes));
+  updateText(root, '[data-ev-cost]', formatCurrency(plan.cost, inputs.currency));
+  updateText(root, '[data-ev-result-range]', `${formatNumber(plan.recoveredRangeKm)} ${ui.rangeUnit}`);
+  updateText(root, '[data-ev-status]', statusText(ui, status));
+  updateText(root, '[data-ev-power]', `${formatNumber(inputs.chargerPowerKw)} kW`);
+  updateText(root, '[data-ev-summary]', ui.summaryTemplate
+    .replace('{battery}', formatNumber(plan.batteryEnergyKwh))
+    .replace('{range}', formatNumber(plan.recoveredRangeKm))
+    .replace('{power}', formatNumber(inputs.chargerPowerKw))
+    .replace('{time}', formatDuration(plan.timeMinutes))
+    .replace('{cost}', formatCurrency(plan.cost, inputs.currency)));
+}

package/src/tool/evChargingTimeCostPlanner/entry.ts

@@ -0,0 +1,30 @@
+import type { MotorToolEntry, ToolLocaleContent } from '../../types';
+import type { EVChargingTimeCostPlannerUI } from './ui';
+
+export type { EVChargingTimeCostPlannerUI };
+export type EVChargingTimeCostPlannerLocaleContent = ToolLocaleContent<EVChargingTimeCostPlannerUI>;
+
+export const evChargingTimeCostPlanner: MotorToolEntry<EVChargingTimeCostPlannerUI> = {
+  id: 'ev-charging-time-cost-planner',
+  icons: {
+    bg: 'mdi:ev-station',
+    fg: 'mdi:flash-outline',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((module) => module.content),
+    en: () => import('./i18n/en').then((module) => module.content),
+    es: () => import('./i18n/es').then((module) => module.content),
+    fr: () => import('./i18n/fr').then((module) => module.content),
+    id: () => import('./i18n/id').then((module) => module.content),
+    it: () => import('./i18n/it').then((module) => module.content),
+    ja: () => import('./i18n/ja').then((module) => module.content),
+    ko: () => import('./i18n/ko').then((module) => module.content),
+    nl: () => import('./i18n/nl').then((module) => module.content),
+    pl: () => import('./i18n/pl').then((module) => module.content),
+    pt: () => import('./i18n/pt').then((module) => module.content),
+    ru: () => import('./i18n/ru').then((module) => module.content),
+    sv: () => import('./i18n/sv').then((module) => module.content),
+    tr: () => import('./i18n/tr').then((module) => module.content),
+    zh: () => import('./i18n/zh').then((module) => module.content),
+  },
+};