@jjlmoya/utils-motor 1.3.0 → 1.5.0

package/src/tool/evChargingTimeCostPlanner/ev-charging-time-cost-planner.css

@@ -0,0 +1,598 @@
+:root {
+  --n-ink: #181f27;
+  --n-muted: #5d6770;
+  --n-paper: #f7f5ef;
+  --n-panel: #fffefa;
+  --n-line: #d2d2c9;
+  --n-sun: #eda43c;
+  --n-sun-soft: #ffefcc;
+  --n-teal: #1d817e;
+  --n-teal-soft: #daf1eb;
+  --n-held: #576974;
+  --n-empty: #e6e6dc;
+  --n-shadow: #181f271f;
+}
+
+.theme-dark {
+  --n-ink: #f1efe6;
+  --n-muted: #b3b9b7;
+  --n-paper: #181c1f;
+  --n-panel: #202628;
+  --n-line: #4c5655;
+  --n-sun: #f4b145;
+  --n-sun-soft: #503b1d;
+  --n-teal: #5cd1bc;
+  --n-teal-soft: #1c4643;
+  --n-held: #99abb1;
+  --n-empty: #404949;
+  --n-shadow: #0005;
+}
+
+.evc-tool {
+  --n-ink: #181f27;
+  --n-muted: #5d6770;
+  --n-paper: #f7f5ef;
+  --n-panel: #fffefa;
+  --n-line: #d2d2c9;
+  --n-sun: #eda43c;
+  --n-sun-soft: #ffefcc;
+  --n-teal: #1d817e;
+  --n-teal-soft: #daf1eb;
+  --n-held: #576974;
+  --n-empty: #e6e6dc;
+  --n-shadow: #181f271f;
+
+  background: var(--n-paper);
+  border: 1px solid var(--n-line);
+  border-radius: 1.5rem;
+  box-sizing: border-box;
+  color: var(--n-ink);
+  overflow: hidden;
+  width: 100%;
+  max-width: calc(100vw - 2rem);
+}
+
+.theme-dark .evc-tool {
+  --n-ink: #f1efe6;
+  --n-muted: #b3b9b7;
+  --n-paper: #181c1f;
+  --n-panel: #202628;
+  --n-line: #4c5655;
+  --n-sun: #f4b145;
+  --n-sun-soft: #503b1d;
+  --n-teal: #5cd1bc;
+  --n-teal-soft: #1c4643;
+  --n-held: #99abb1;
+  --n-empty: #404949;
+  --n-shadow: #0005;
+}
+
+.evc-surface {
+  background: var(--n-panel);
+  padding: clamp(1.1rem, 3vw, 2rem);
+}
+
+.evc-header,
+.evc-scenes,
+.evc-runway-heading,
+.evc-battery-legend,
+.evc-result-lead,
+.evc-formula {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.evc-header {
+  border-bottom: 1px solid var(--n-line);
+  padding-bottom: 1.25rem;
+}
+
+.evc-header-copy {
+  max-width: 42rem;
+}
+
+.evc-overline {
+  color: var(--n-teal);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.11em;
+  margin: 0 0 0.45rem;
+  text-transform: uppercase;
+}
+
+.evc-intro {
+  color: var(--n-muted);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.evc-reset,
+.evc-scene-button {
+  background: var(--n-paper);
+  border: 1px solid var(--n-line);
+  color: var(--n-ink);
+  cursor: pointer;
+  font: inherit;
+}
+
+.evc-reset {
+  border-radius: 999px;
+  flex: 0 0 auto;
+  font-size: 0.8rem;
+  font-weight: 750;
+  padding: 0.65rem 0.9rem;
+}
+
+.evc-reset:hover,
+.evc-reset:focus-visible {
+  border-color: var(--n-teal);
+}
+
+.evc-scenes {
+  align-items: stretch;
+  border-bottom: 1px solid var(--n-line);
+  flex-wrap: wrap;
+  padding: 1.25rem 0;
+}
+
+.evc-scenes-label {
+  color: var(--n-muted);
+  flex: 1 0 100%;
+  font-size: 0.78rem;
+  font-weight: 750;
+  margin-bottom: 0.1rem;
+}
+
+.evc-scene-button {
+  border-radius: 0.85rem;
+  display: flex;
+  flex: 1 1 10rem;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-height: 4.5rem;
+  padding: 0.8rem 0.9rem;
+  text-align: left;
+}
+
+.evc-scene-button strong {
+  font-size: 0.9rem;
+}
+
+.evc-scene-button small {
+  color: var(--n-muted);
+  font-size: 0.72rem;
+}
+
+.evc-scene-button:hover,
+.evc-scene-button:focus-visible,
+.evc-scene-button.is-active {
+  border-color: var(--n-sun);
+}
+
+.evc-scene-button.is-active {
+  background: var(--n-sun-soft);
+  box-shadow: inset 0 -0.2rem 0 var(--n-sun);
+}
+
+.evc-main-grid {
+  align-items: start;
+  display: grid;
+  gap: clamp(1.5rem, 4vw, 3rem);
+  grid-template-columns: minmax(16rem, 0.9fr) minmax(20rem, 1.1fr);
+  padding-top: 1.75rem;
+}
+
+.evc-section-heading h2,
+.evc-runway-heading h2 {
+  font-size: clamp(1.05rem, 2vw, 1.35rem);
+  line-height: 1.2;
+  margin: 0;
+}
+
+.evc-soc-row {
+  align-items: center;
+  display: grid;
+  gap: 0.8rem;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  margin: 1.5rem 0;
+}
+
+.evc-window-arrow {
+  color: var(--n-sun);
+  font-size: 1.6rem;
+  font-weight: 800;
+}
+
+.evc-field {
+  display: block;
+  min-width: 0;
+}
+
+.evc-field > span {
+  display: block;
+  font-size: 0.86rem;
+  font-weight: 750;
+}
+
+.evc-field > small {
+  color: var(--n-muted);
+  display: block;
+  font-size: 0.7rem;
+  line-height: 1.35;
+  margin: 0.25rem 0 0.55rem;
+  min-height: 1.9em;
+}
+
+.evc-field strong {
+  align-items: center;
+  background: var(--n-paper);
+  border: 1px solid var(--n-line);
+  border-radius: 0.7rem;
+  display: flex;
+  min-height: 2.9rem;
+  padding: 0 0.7rem;
+}
+
+.evc-field input[type='number'],
+.evc-field input[type='text'] {
+  background: transparent;
+  border: 0;
+  color: var(--n-ink);
+  font: 700 1.05rem ui-monospace, monospace;
+  min-width: 0;
+  outline: 0;
+  padding: 0.45rem 0;
+  width: 100%;
+}
+
+.evc-field em {
+  color: var(--n-muted);
+  flex: 0 0 auto;
+  font-size: 0.72rem;
+  font-style: normal;
+  margin-left: 0.45rem;
+  white-space: nowrap;
+}
+
+.evc-field strong:focus-within {
+  border-color: var(--n-teal);
+  box-shadow: 0 0 0 3px var(--n-teal-soft);
+}
+
+.evc-field input[type='range'] {
+  accent-color: var(--n-teal);
+  display: block;
+  margin: 0.75rem 0 0;
+  width: 100%;
+}
+
+.evc-field-stack {
+  display: grid;
+  gap: 1.05rem;
+}
+
+.evc-currency-panel {
+  background: var(--n-teal-soft);
+  border: 1px solid var(--n-teal);
+  border-radius: 0.85rem;
+  display: grid;
+  gap: 0.65rem;
+  margin: 1.25rem 0 1.05rem;
+  padding: 0.8rem;
+  position: relative;
+}
+
+.evc-currency-panel > div:first-child span,
+.evc-currency-panel > div:first-child small {
+  display: block;
+}
+
+.evc-currency-panel > div:first-child span {
+  color: var(--n-ink);
+  font-size: 0.84rem;
+  font-weight: 800;
+}
+
+.evc-currency-panel > div:first-child small,
+.evc-currency-factor {
+  color: var(--n-muted);
+  font-size: 0.7rem;
+  line-height: 1.35;
+  margin-top: 0.2rem;
+}
+
+.evc-currency-trigger {
+  align-items: center;
+  background: var(--n-paper);
+  border: 1px solid var(--n-line);
+  border-radius: 0.65rem;
+  color: var(--n-ink);
+  cursor: pointer;
+  display: flex;
+  gap: 0.65rem;
+  justify-content: space-between;
+  padding: 0.65rem 0.75rem;
+  text-align: left;
+  width: 100%;
+}
+
+.evc-currency-trigger strong {
+  font-size: 0.9rem;
+}
+
+.evc-currency-trigger span {
+  color: var(--n-muted);
+  flex: 1;
+  font-size: 0.72rem;
+}
+
+.evc-currency-trigger i {
+  border-bottom: 2px solid var(--n-ink);
+  border-right: 2px solid var(--n-ink);
+  display: block;
+  height: 0.45rem;
+  transform: rotate(45deg) translateY(-0.15rem);
+  width: 0.45rem;
+}
+
+.evc-currency-menu {
+  background: var(--n-panel);
+  border: 1px solid var(--n-line);
+  border-radius: 0.7rem;
+  box-shadow: 0 0.8rem 1.5rem var(--n-shadow);
+  display: grid;
+  gap: 0.25rem;
+  left: 0.8rem;
+  max-height: 16rem;
+  overflow-y: auto;
+  padding: 0.35rem;
+  position: absolute;
+  right: 0.8rem;
+  top: calc(100% - 0.35rem);
+  z-index: 2;
+}
+
+.evc-currency-menu[hidden] {
+  display: none;
+}
+
+.evc-currency-menu button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 0.45rem;
+  color: var(--n-ink);
+  cursor: pointer;
+  display: flex;
+  gap: 0.7rem;
+  justify-content: space-between;
+  padding: 0.55rem 0.6rem;
+  text-align: left;
+}
+
+.evc-currency-menu button:hover,
+.evc-currency-menu button:focus-visible,
+.evc-currency-menu button.is-active {
+  background: var(--n-sun-soft);
+}
+
+.evc-currency-menu button strong {
+  font-size: 0.78rem;
+}
+
+.evc-currency-menu button span {
+  color: var(--n-muted);
+  font-size: 0.7rem;
+}
+
+.evc-runway {
+  background: var(--n-paper);
+  border: 1px solid var(--n-line);
+  border-radius: 1rem;
+  box-shadow: 0 1rem 2rem var(--n-shadow);
+  min-width: 0;
+  padding: clamp(1rem, 3vw, 1.5rem);
+}
+
+.evc-runway-heading {
+  align-items: flex-start;
+}
+
+.evc-status {
+  background: var(--n-teal-soft);
+  border-radius: 999px;
+  color: var(--n-teal);
+  flex: 0 0 auto;
+  font-size: 0.7rem;
+  font-weight: 800;
+  padding: 0.45rem 0.65rem;
+}
+
+.evc-tool[data-status='empty'] .evc-status {
+  background: var(--n-empty);
+  color: var(--n-muted);
+}
+
+.evc-tool[data-status='short'] .evc-status {
+  background: var(--n-sun-soft);
+  color: var(--n-ink);
+}
+
+.evc-battery-wrap {
+  margin: 1.25rem -0.6rem 0.5rem;
+}
+
+.evc-battery {
+  display: block;
+  height: auto;
+  overflow: visible;
+  width: 100%;
+}
+
+.evc-battery-shell {
+  fill: var(--n-panel);
+  stroke: var(--n-line);
+  stroke-width: 3;
+}
+
+.evc-battery-terminal {
+  fill: var(--n-line);
+}
+
+.evc-segments rect {
+  fill: var(--n-empty);
+  transition: fill 180ms ease, transform 180ms ease;
+}
+
+.evc-segments rect[data-level='held'] {
+  fill: var(--n-held);
+}
+
+.evc-segments rect[data-level='added'] {
+  fill: var(--n-sun);
+  transform: translateY(-4px);
+}
+
+.evc-energy-line {
+  fill: none;
+  stroke: var(--n-teal);
+  stroke-dasharray: 5 9;
+  stroke-width: 3;
+}
+
+.evc-energy-node {
+  fill: var(--n-teal);
+}
+
+.evc-battery-legend {
+  color: var(--n-muted);
+  font-size: 0.72rem;
+  justify-content: flex-start;
+  padding: 0 0.65rem;
+}
+
+.evc-battery-legend > span {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.3rem;
+}
+
+.evc-battery-legend strong {
+  color: var(--n-ink);
+}
+
+.evc-dot {
+  border-radius: 50%;
+  display: inline-block;
+  height: 0.6rem;
+  width: 0.6rem;
+}
+
+.evc-dot-held {
+  background: var(--n-held);
+}
+
+.evc-dot-added {
+  background: var(--n-sun);
+}
+
+.evc-result-lead {
+  align-items: flex-end;
+  border-top: 1px solid var(--n-line);
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+}
+
+.evc-result-lead span,
+.evc-metrics span {
+  color: var(--n-muted);
+  display: block;
+  font-size: 0.72rem;
+}
+
+.evc-result-lead strong {
+  display: block;
+  font-size: clamp(1.8rem, 5vw, 2.8rem);
+  line-height: 1;
+  margin-top: 0.25rem;
+}
+
+.evc-result-lead small {
+  color: var(--n-teal);
+  font-size: 0.75rem;
+  font-weight: 800;
+}
+
+.evc-metrics {
+  border-bottom: 1px solid var(--n-line);
+  display: grid;
+  gap: 0.9rem 1.25rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding: 1.15rem 0;
+}
+
+.evc-metrics strong {
+  display: block;
+  font-size: 0.98rem;
+  margin-top: 0.2rem;
+}
+
+.evc-summary {
+  color: var(--n-muted);
+  font-size: 0.82rem;
+  line-height: 1.55;
+  margin: 1rem 0 0;
+}
+
+.evc-formula {
+  align-items: flex-start;
+  border-top: 1px solid var(--n-line);
+  color: var(--n-muted);
+  font-size: 0.76rem;
+  line-height: 1.5;
+  margin-top: 1.75rem;
+  padding-top: 1rem;
+}
+
+.evc-formula strong {
+  color: var(--n-ink);
+  flex: 0 0 auto;
+}
+
+.evc-formula span {
+  max-width: 56rem;
+}
+
+.evc-reset:focus-visible,
+.evc-scene-button:focus-visible,
+.evc-currency-trigger:focus-visible,
+.evc-currency-menu button:focus-visible,
+.evc-field input:focus-visible {
+  outline: 3px solid var(--n-sun);
+  outline-offset: 2px;
+}
+
+@media (max-width: 760px) {
+  .evc-main-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .evc-runway {
+    order: -1;
+  }
+}
+
+@media (max-width: 520px) {
+  .evc-header,
+  .evc-formula {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .evc-battery-legend {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}

package/src/tool/evChargingTimeCostPlanner/evaluator.ts

@@ -0,0 +1,10 @@
+import type { ChargingPlan } from './logic';
+
+export type ChargingStatus = 'empty' | 'short' | 'standard' | 'long';
+
+export function evaluateChargingStatus(plan: ChargingPlan): ChargingStatus {
+  if (plan.chargeFraction === 0) return 'empty';
+  if (plan.timeMinutes <= 30) return 'short';
+  if (plan.timeMinutes <= 240) return 'standard';
+  return 'long';
+}

package/src/tool/evChargingTimeCostPlanner/i18n/de.ts

@@ -0,0 +1,22 @@
+import { createLocalizedContent } from './factory';
+
+const content = createLocalizedContent({
+  locale: 'de', currency: 'EUR', slug: 'e-auto-ladezeit-und-kosten-rechner', title: 'Rechner fuer Ladezeit und Kosten von Elektroautos', description: 'Schaetze Ladezeit, Stromkosten, Ladeverluste und die zusaetzliche Reichweite fuer eine Ladesitzung.', faqTitle: 'Haeufige Fragen', bibliographyTitle: 'Bibliografische Quellen',
+  ui: { defaultCurrency: 'EUR', currencyLabel: 'Waehrung', currencyHint: 'Waehle die Waehrung fuer den lokalen Strompreis und die Gesamtkosten.', currencyMenuLabel: 'Waehrung auswaehlen', currencyFactorTemplate: 'Ungefaehrer Offline-Faktor: 1 EUR = {factor} {currency}. Passe den Preis an deinen Tarif an.', presetLabel: 'Mit einer Ladeszene starten', homePreset: 'Zu Hause', publicPreset: 'Oeffentlich', fastPreset: 'Schnell', resetLabel: 'Plan zuruecksetzen', setupLabel: 'Ladefenster festlegen', setupHint: 'Gib an, wie viel nutzbare Batterieenergie du laden moechtest und was der Lader kostet.', chargeWindowLabel: 'Ladefenster', chargeWindowHint: 'Batteriestand vor und nach dieser Sitzung', startSocLabel: 'Startladung', startSocHint: 'Aktueller Batteriestand', endSocLabel: 'Zielladung', endSocHint: 'Batteriestand beim Abstecken', capacityLabel: 'Nutzbare Batteriekapazitaet', chargerPowerLabel: 'Ladeleistung', efficiencyLabel: 'Ladeeffizienz', priceLabel: 'Strompreis', priceHint: 'Ungefaehrer lokaler Preis pro Kilowattstunde. Passe ihn an deinen Tarif an.', consumptionLabel: 'Fahrzeugverbrauch', resultKicker: 'Energie-Reichweite', resultTitle: 'Ein klarer Plan fuer diese Sitzung', startingChargeLabel: 'Bereits gespeichert', targetChargeLabel: 'Zielladung', batteryEnergyLabel: 'Energie in der Batterie', gridEnergyLabel: 'Energie aus dem Netz', lossesLabel: 'Ladeverluste', timeLabel: 'Geschaetzte Zeit', costLabel: 'Geschaetzte Kosten', rangeLabel: 'Zusaetzliche Reichweite', statusEmpty: 'Noch keine Energie geladen', statusShort: 'Kurzes Nachladen', statusStandard: 'Ausgewogene Ladung', statusLong: 'Langes Ladefenster', summaryTemplate: 'Lade {battery} kWh, um etwa {range} km Reichweite zu gewinnen. Bei {power} kW dauert es {time} und kostet {cost}.', formulaLabel: 'So funktioniert die Schaetzung', rangeUnit: 'km' },
+  faq: [
+    { question: 'Wie schaetzt der Rechner die Ladesitzung?', answer: 'Er multipliziert die nutzbare Batteriekapazitaet mit dem Unterschied zwischen Start- und Zielladestand. Danach beruecksichtigt er die Ladeeffizienz und teilt die Netzenergie durch die eingegebene Ladeleistung.' },
+    { question: 'Warum ist die Netzenergie hoeher als die gespeicherte Energie?', answer: 'Laden ist nicht vollstaendig effizient. Die Effizienz beschreibt den Anteil des Stroms, der die Batterie erreicht. Der Rest wird als Ladeverlust ausgewiesen.' },
+    { question: 'Beruecksichtigt das Ergebnis die Ladekurve meines Autos?', answer: 'Nein. Der Rechner nutzt die eingegebene dauerhafte Ladeleistung. Fahrzeuge reduzieren die Leistung bei hohem Ladestand oft.' },
+    { question: 'Wie wird die zusaetzliche Reichweite berechnet?', answer: 'Die hinzugefuegte Batterieenergie wird durch den Verbrauch in Kilowattstunden pro 100 Kilometer geteilt.' },
+    { question: 'Wie aendert der Waehrungswaehler den Preis?', answer: 'Der Wechsel nutzt einen ungefaehren Offline-Faktor zum Euro und rechnet Preis und Gesamtkosten um. Passe den Preis an, wenn dein lokaler Tarif abweicht.' },
+  ],
+  howTo: [ { name: 'Eine Ladeszene waehlen', text: 'Waehle Zu Hause, Oeffentlich oder Schnell, um ein realistisches Beispiel zu laden.' }, { name: 'Das Ladefenster festlegen', text: 'Gib Kapazitaet sowie Start- und Zielladestand ein.' }, { name: 'Die Bedingungen anpassen', text: 'Aendere Ladeleistung, Effizienz, Strompreis, Waehrung und Verbrauch.' }, { name: 'Die Energie-Reichweite lesen', text: 'Vergleiche Batterieenergie, Netzenergie, Zeit, Kosten, Verluste und Reichweite.' } ],
+  seo: { introTitle: 'Die Energie einer Ladesitzung planen', introText: 'Dieser Rechner macht aus einem Ladefenster eine praktische Schaetzung. Gib Kapazitaet, Ladestand, Ladeleistung, Effizienz, Preis und Verbrauch ein, um Netzbedarf, Dauer, Kosten und zusaetzliche Reichweite zu sehen.', formulaTitle: 'Die verwendeten Formeln', formulaText: 'Batterieenergie entspricht Kapazitaet mal Ladefenster. Netzenergie entspricht Batterieenergie geteilt durch die Effizienz. Die Zeit ergibt sich aus Netzenergie geteilt durch Ladeleistung, die Kosten aus Netzenergie mal lokalem Preis.', tableHeaders: ['Eingabe', 'Berechnung', 'Ergebnis'], tableRows: [['Kapazitaet und Ladefenster', 'Kapazitaet × Ladefenster', 'Gespeicherte Energie'], ['Batterieenergie und Effizienz', 'Batterieenergie ÷ Effizienz', 'Netzenergie'], ['Netzenergie und Ladeleistung', 'Netzenergie ÷ Ladeleistung', 'Geschaetzte Zeit'], ['Netzenergie und Preis', 'Netzenergie × Preis', 'Geschaetzte Kosten']], limitsTitle: 'Das Ergebnis ist eine Planungsschaetzung', limitsText: 'Der Rechner modelliert keine Fahrzeug-Ladekurve, Batterietemperatur, Warteschlange, Steuern, Abos oder geteilte Ladeleistung. Nutze die dauerhafte Leistung fuer eine realistischere Planung.', tipTitle: 'Eine dauerhafte Leistung verwenden', tipText: 'Wenn dein Fahrzeug eine Spitzenleistung nur kurz erreicht, gib die Leistung ein, die es ueber den groessten Teil der Sitzung halten kann.', energyStat: 'Batterie- und Netzenergie', timeStat: 'Geschaetzte Sitzungszeit', costStat: 'Kosten bei deinem Tarif' },
+});
+
+content.title = 'Rechner für Ladezeit und Kosten von Elektroautos';
+content.ui.currencyLabel = 'Währung';
+content.ui.currencyHint = 'Wähle die Währung für den lokalen Strompreis und die Gesamtkosten.';
+content.ui.resetLabel = 'Plan zurücksetzen';
+
+export { content };