@jjlmoya/utils-aquarium 1.65.0 → 1.67.0

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/controller.ts

@@ -0,0 +1,140 @@
+import {
+  DEFAULT_DOSING_INPUT,
+  type AquariumParameter,
+  type DoseUnit,
+} from "./logic";
+import type { AquariumCalciumAlkalinityDosingCalculatorUI } from "./ui";
+import {
+  readInput,
+  render,
+  updateLabels,
+  writeInput,
+  type DisplayState,
+  type VolumeUnit,
+} from "./dom-views";
+
+interface ControllerOptions {
+  root: HTMLElement;
+  ui: AquariumCalciumAlkalinityDosingCalculatorUI;
+}
+
+const ALKALINITY_DEFAULTS = {
+  currentValue: 7,
+  targetValue: 8.5,
+  productStrengthPerDose: 0.5,
+};
+
+function bindParameterEvents(
+  root: HTMLElement,
+  setState: (state: DisplayState) => void,
+  getState: () => DisplayState,
+  update: () => void,
+): void {
+  root
+    .querySelectorAll<HTMLButtonElement>("[data-parameter-choice]")
+    .forEach((button) =>
+      button.addEventListener("click", () => {
+        const parameter = button.dataset.parameterChoice as AquariumParameter;
+        setState({ ...getState(), parameter });
+        const nextInput =
+          parameter === "alkalinity"
+            ? {
+                ...DEFAULT_DOSING_INPUT,
+                ...ALKALINITY_DEFAULTS,
+                parameter,
+                doseUnit: getState().doseUnit,
+              }
+            : {
+                ...DEFAULT_DOSING_INPUT,
+                parameter,
+                doseUnit: getState().doseUnit,
+              };
+        writeInput(root, nextInput, getState().volumeUnit);
+        update();
+      }),
+    );
+}
+function bindDoseUnitEvents(
+  root: HTMLElement,
+  setState: (state: DisplayState) => void,
+  getState: () => DisplayState,
+  update: () => void,
+): void {
+  root
+    .querySelectorAll<HTMLButtonElement>("[data-dose-unit-choice]")
+    .forEach((button) =>
+      button.addEventListener("click", () => {
+        setState({
+          ...getState(),
+          doseUnit: button.dataset.doseUnitChoice as DoseUnit,
+        });
+        update();
+      }),
+    );
+}
+function bindVolumeUnitEvents(
+  root: HTMLElement,
+  setState: (state: DisplayState) => void,
+  getState: () => DisplayState,
+  update: () => void,
+): void {
+  root
+    .querySelectorAll<HTMLButtonElement>("[data-volume-unit-choice]")
+    .forEach((button) =>
+      button.addEventListener("click", () => {
+        const state = getState();
+        const nextUnit = button.dataset.volumeUnitChoice as VolumeUnit;
+        const input = readInput(root, state);
+        setState({ ...state, volumeUnit: nextUnit });
+        writeInput(root, input, nextUnit);
+        update();
+      }),
+    );
+}
+function bindInputEvents(root: HTMLElement, update: () => void): void {
+  root
+    .querySelectorAll<HTMLInputElement>("input")
+    .forEach((input) => input.addEventListener("input", update));
+}
+function bindResetEvent(
+  root: HTMLElement,
+  setState: (state: DisplayState) => void,
+  update: () => void,
+): void {
+  root.querySelector('[data-action="reset"]')?.addEventListener("click", () => {
+    const state: DisplayState = {
+      parameter: "calcium",
+      doseUnit: "ml",
+      volumeUnit: "litres",
+    };
+    setState(state);
+    writeInput(root, DEFAULT_DOSING_INPUT, state.volumeUnit);
+    update();
+  });
+}
+
+export function startCalciumAlkalinityDosingController({
+  root,
+  ui,
+}: ControllerOptions): void {
+  let state: DisplayState = {
+    parameter: DEFAULT_DOSING_INPUT.parameter,
+    doseUnit: DEFAULT_DOSING_INPUT.doseUnit,
+    volumeUnit: "litres",
+  };
+  const getState = (): DisplayState => state;
+  const setState = (nextState: DisplayState): void => {
+    state = nextState;
+  };
+  const update = (): void => {
+    updateLabels(root, ui, state);
+    render(root, ui, state);
+  };
+  writeInput(root, DEFAULT_DOSING_INPUT, state.volumeUnit);
+  update();
+  bindParameterEvents(root, setState, getState, update);
+  bindDoseUnitEvents(root, setState, getState, update);
+  bindVolumeUnitEvents(root, setState, getState, update);
+  bindInputEvents(root, update);
+  bindResetEvent(root, setState, update);
+}

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

@@ -0,0 +1,246 @@
+import {
+  calculateCalciumAlkalinityDosing,
+  type AquariumParameter,
+  type CalciumAlkalinityDosingInput,
+  type DoseUnit,
+  type DosingAction,
+} from "./logic";
+import type { AquariumCalciumAlkalinityDosingCalculatorUI } from "./ui";
+import {
+  actionText,
+  field,
+  format,
+  numberValue,
+  parameterUnit,
+  renderValuePath,
+  sceneText,
+  setText,
+  summaryText,
+} from "./view-helpers";
+export type VolumeUnit = "litres" | "gallons";
+export interface DisplayState {
+  parameter: AquariumParameter;
+  doseUnit: DoseUnit;
+  volumeUnit: VolumeUnit;
+}
+const US_GALLON_LITRES = 3.785411784;
+export function readInput(
+  root: HTMLElement,
+  state: DisplayState,
+): CalciumAlkalinityDosingInput {
+  const enteredVolume = numberValue(root, "volume");
+  return {
+    parameter: state.parameter,
+    volumeLitres:
+      state.volumeUnit === "litres"
+        ? enteredVolume
+        : enteredVolume * US_GALLON_LITRES,
+    currentValue: numberValue(root, "current"),
+    targetValue: numberValue(root, "target"),
+    productStrengthPerDose: numberValue(root, "strength"),
+    doseUnit: state.doseUnit,
+  };
+}
+export function writeInput(
+  root: HTMLElement,
+  input: CalciumAlkalinityDosingInput,
+  volumeUnit: VolumeUnit,
+): void {
+  const volume =
+    volumeUnit === "litres"
+      ? input.volumeLitres
+      : input.volumeLitres / US_GALLON_LITRES;
+  field(root, "volume").value = String(Number(volume.toFixed(2)));
+  field(root, "current").value = String(input.currentValue);
+  field(root, "target").value = String(input.targetValue);
+  field(root, "strength").value = String(input.productStrengthPerDose);
+}
+function updateChoiceButtons(
+  root: HTMLElement,
+  selector: string,
+  attribute: string,
+  active: string,
+): void {
+  root.querySelectorAll<HTMLButtonElement>(selector).forEach((button) => {
+    const selected = button.dataset[attribute] === active;
+    button.classList.toggle("is-active", selected);
+    button.setAttribute("aria-pressed", String(selected));
+  });
+}
+export function updateLabels(
+  root: HTMLElement,
+  ui: AquariumCalciumAlkalinityDosingCalculatorUI,
+  state: DisplayState,
+): void {
+  updateLabelText(root, ui, state);
+  updateSelections(root, state);
+  updateValueRanges(root, state);
+}
+function updateLabelText(
+  root: HTMLElement,
+  ui: AquariumCalciumAlkalinityDosingCalculatorUI,
+  state: DisplayState,
+): void {
+  const unit = parameterUnit(ui, state.parameter);
+  const volumeLabel =
+    state.volumeUnit === "litres" ? ui.litresLabel : ui.gallonsLabel;
+  const doseLabel =
+    state.doseUnit === "ml" ? ui.millilitresLabel : ui.gramsLabel;
+  const parameterShort =
+    state.parameter === "calcium"
+      ? ui.calciumShortLabel
+      : ui.alkalinityShortLabel;
+  setText(root, '[data-output="value-unit"]', unit);
+  setText(root, '[data-output="value-unit-target"]', unit);
+  setText(root, '[data-output="volume-unit"]', volumeLabel);
+  setText(root, '[data-output="parameter-short"]', parameterShort);
+  setText(root, '[data-output="parameter-unit"]', unit);
+  setText(
+    root,
+    '[data-output="strength-unit"]',
+    `${unit} / ${doseLabel} / 100 L`,
+  );
+}
+function updateSelections(root: HTMLElement, state: DisplayState): void {
+  updateChoiceButtons(
+    root,
+    "[data-parameter-choice]",
+    "parameterChoice",
+    state.parameter,
+  );
+  updateChoiceButtons(
+    root,
+    "[data-dose-unit-choice]",
+    "doseUnitChoice",
+    state.doseUnit,
+  );
+  updateChoiceButtons(
+    root,
+    "[data-volume-unit-choice]",
+    "volumeUnitChoice",
+    state.volumeUnit,
+  );
+}
+function updateValueRanges(root: HTMLElement, state: DisplayState): void {
+  const maximum = state.parameter === "calcium" ? "1000" : "40";
+  field(root, "current").max = maximum;
+  field(root, "target").max = maximum;
+}
+function amountText(
+  ui: AquariumCalciumAlkalinityDosingCalculatorUI,
+  state: DisplayState,
+  output: {
+    action: DosingAction;
+    doseAmount: number;
+    estimatedWaterChangePercent: number;
+  },
+): string {
+  if (output.action === "reduce")
+    return `${format(output.estimatedWaterChangePercent, 1)} ${ui.unitPercent}`;
+  const unit = state.doseUnit === "ml" ? ui.millilitresLabel : ui.gramsLabel;
+  return `${format(output.doseAmount)} ${unit}`;
+}
+function renderInvalid(
+  root: HTMLElement,
+  ui: AquariumCalciumAlkalinityDosingCalculatorUI,
+): void {
+  root.querySelector<HTMLElement>("[data-error]")!.hidden = false;
+  setText(root, '[data-output="action"]', ui.invalidState);
+  setText(root, '[data-output="action-detail"]', "—");
+  setText(root, '[data-output="dose"]', "—");
+  setText(root, '[data-output="dose-chip"]', "—");
+  setText(root, '[data-output="current-value"]', "—");
+  setText(root, '[data-output="target-value"]', "—");
+  setText(root, '[data-output="summary"]', ui.invalidState);
+  setText(root, '[data-output="current-target"]', "—");
+  setText(root, '[data-output="difference"]', "—");
+  setText(root, '[data-output="water-change"]', "—");
+}
+function renderPrimary(
+  root: HTMLElement,
+  ui: AquariumCalciumAlkalinityDosingCalculatorUI,
+  state: DisplayState,
+  output: {
+    action: DosingAction;
+    doseAmount: number;
+    estimatedWaterChangePercent: number;
+  },
+): void {
+  const action = actionText(ui, output.action);
+  const label = output.action === "reduce" ? ui.waterChangeLabel : ui.doseLabel;
+  setText(root, '[data-output="action"]', action);
+  setText(root, '[data-output="action-detail"]', action);
+  setText(root, '[data-output="dose-label"]', label);
+  setText(root, '[data-output="dose-label-chip"]', label);
+  setText(root, '[data-output="dose-label-answer"]', label);
+  setText(root, '[data-output="dose"]', amountText(ui, state, output));
+  setText(root, '[data-output="dose-chip"]', amountText(ui, state, output));
+  setText(root, '[data-output="summary"]', summaryText(ui, output.action));
+}
+function renderStats(
+  root: HTMLElement,
+  ui: AquariumCalciumAlkalinityDosingCalculatorUI,
+  state: DisplayState,
+  output: {
+    action: DosingAction;
+    estimatedWaterChangePercent: number;
+    difference: number;
+    input: CalciumAlkalinityDosingInput;
+  },
+): void {
+  const unit = parameterUnit(ui, state.parameter);
+  const sign = output.difference > 0 ? "+" : "";
+  const waterChange =
+    output.action === "reduce"
+      ? `${format(output.estimatedWaterChangePercent, 1)} ${ui.unitPercent}`
+      : "—";
+  renderValuePath(root, output.input, unit);
+  setText(
+    root,
+    '[data-output="current-target"]',
+    `${format(output.input.currentValue)} → ${format(output.input.targetValue)} ${unit}`,
+  );
+  setText(
+    root,
+    '[data-output="difference"]',
+    `${sign}${format(output.difference)} ${unit}`,
+  );
+  setText(root, '[data-output="water-change"]', waterChange);
+}
+function renderScene(
+  root: HTMLElement,
+  ui: AquariumCalciumAlkalinityDosingCalculatorUI,
+  action: DosingAction,
+): void {
+  const scene = root.querySelector<HTMLElement>('[data-output="scene"]');
+  scene?.classList.remove("is-add", "is-reduce", "is-target");
+  scene?.classList.add(`is-${action}`);
+  scene?.setAttribute("aria-label", sceneText(ui, action));
+}
+function renderValid(
+  root: HTMLElement,
+  ui: AquariumCalciumAlkalinityDosingCalculatorUI,
+  state: DisplayState,
+  result: Extract<
+    ReturnType<typeof calculateCalciumAlkalinityDosing>,
+    { ok: true }
+  >,
+): void {
+  const output = result.value;
+  root.querySelector<HTMLElement>("[data-error]")!.hidden = true;
+  renderPrimary(root, ui, state, output);
+  renderStats(root, ui, state, output);
+  renderScene(root, ui, output.action);
+}
+export function render(
+  root: HTMLElement,
+  ui: AquariumCalciumAlkalinityDosingCalculatorUI,
+  state: DisplayState,
+): void {
+  const result = calculateCalciumAlkalinityDosing(readInput(root, state));
+  if (!result.ok) {
+    renderInvalid(root, ui);
+    return;
+  }
+  renderValid(root, ui, state, result);
+}

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/entry.ts

@@ -0,0 +1,27 @@
+import type { AquariumToolEntry, ToolLocaleContent } from '../../types';
+import type { AquariumCalciumAlkalinityDosingCalculatorUI } from './ui';
+
+export type { AquariumCalciumAlkalinityDosingCalculatorUI };
+export type AquariumCalciumAlkalinityDosingCalculatorLocaleContent = ToolLocaleContent<AquariumCalciumAlkalinityDosingCalculatorUI>;
+
+export const aquariumCalciumAlkalinityDosingCalculator: AquariumToolEntry<AquariumCalciumAlkalinityDosingCalculatorUI> = {
+  id: 'aquarium-calcium-alkalinity-dosing-calculator',
+  icons: { bg: 'mdi:fishbowl-outline', fg: 'mdi:eyedropper-variant' },
+  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/aquariumCalciumAlkalinityDosingCalculator/i18n/de.ts

@@ -0,0 +1,2 @@
+import { localizedContents } from './translations';
+export const content = localizedContents.de;

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/i18n/en.ts

@@ -0,0 +1,3 @@
+import { localizedContents } from './translations';
+
+export const content = localizedContents.en;

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/i18n/es.ts

@@ -0,0 +1,2 @@
+import { localizedContents } from './translations';
+export const content = localizedContents.es;

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/i18n/fr.ts

@@ -0,0 +1,2 @@
+import { localizedContents } from './translations';
+export const content = localizedContents.fr;

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/i18n/id.ts

@@ -0,0 +1,2 @@
+import { localizedContents } from './translations';
+export const content = localizedContents.id;

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/i18n/it.ts

@@ -0,0 +1,2 @@
+import { localizedContents } from './translations';
+export const content = localizedContents.it;

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/i18n/ja.ts

@@ -0,0 +1,2 @@
+import { localizedContents } from './translations';
+export const content = localizedContents.ja;

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/i18n/ko.ts

@@ -0,0 +1,2 @@
+import { localizedContents } from './translations';
+export const content = localizedContents.ko;

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/i18n/nl.ts

@@ -0,0 +1,2 @@
+import { localizedContents } from './translations';
+export const content = localizedContents.nl;

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/i18n/pl.ts

@@ -0,0 +1,2 @@
+import { localizedContents } from './translations';
+export const content = localizedContents.pl;

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/i18n/pt.ts

@@ -0,0 +1,2 @@
+import { localizedContents } from './translations';
+export const content = localizedContents.pt;

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/i18n/ru.ts

@@ -0,0 +1,2 @@
+import { localizedContents } from './translations';
+export const content = localizedContents.ru;

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/i18n/shared.ts

@@ -0,0 +1,63 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import type { SEOSection } from '../../../types';
+import type { BibliographyEntry, HowToStep, ToolLocaleContent } from '../../../types';
+import type { AquariumCalciumAlkalinityDosingCalculatorUI } from '../ui';
+
+export interface LocalizedCopy {
+  language: string;
+  slug: string;
+  title: string;
+  description: string;
+  ui: AquariumCalciumAlkalinityDosingCalculatorUI;
+  seo: SEOSection[];
+  faq: { question: string; answer: string }[];
+  howTo: HowToStep[];
+  bibliography: BibliographyEntry[];
+}
+
+export function buildContent(copy: LocalizedCopy): ToolLocaleContent<AquariumCalciumAlkalinityDosingCalculatorUI> {
+  const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    inLanguage: copy.language,
+    mainEntity: copy.faq.map((item) => ({
+      '@type': 'Question',
+      name: item.question,
+      acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+  };
+  const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    inLanguage: copy.language,
+    name: copy.title,
+    description: copy.description,
+    step: copy.howTo.map((step, index) => ({
+      '@type': 'HowToStep',
+      position: index + 1,
+      name: step.name,
+      text: step.text,
+    })),
+  };
+  const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: copy.title,
+    description: copy.description,
+    applicationCategory: 'UtilityApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: copy.language,
+  };
+  return {
+    slug: copy.slug,
+    title: copy.title,
+    description: copy.description,
+    ui: copy.ui,
+    faq: copy.faq,
+    howTo: copy.howTo,
+    bibliography: copy.bibliography,
+    seo: copy.seo,
+    schemas: [faqSchema, howToSchema, appSchema],
+  };
+}

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/i18n/sv.ts

@@ -0,0 +1,2 @@
+import { localizedContents } from './translations';
+export const content = localizedContents.sv;

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/i18n/tr.ts

@@ -0,0 +1,2 @@
+import { localizedContents } from './translations';
+export const content = localizedContents.tr;