https://thg-experten.de/assets/controllers/prereq_checks_controlle…6c31927ef735015b620e5fc3b5f14f36ed896566.js

1import { Controller } from "@hotwired/stimulus";
2
3// Drives the "Gilt mein Ladepunkt?" dialog opened from the pricing section.
4// Toggles a checked state per prerequisite, updates the progress bar/counter,
5// and swaps the footer to a "qualifies" button when all are ticked.
6export default class extends Controller {
7  static targets = ["item", "bar", "count", "defaultFooter", "completeFooter"];
8
9  connect() {
10    this.reset();
11    this.observer = new MutationObserver(() => {
12      if (this.element.open) this.reset();
13    });
14    this.observer.observe(this.element, {
15      attributes: true,
16      attributeFilter: ["open"],
17    });
18  }
19
20  disconnect() {
21    this.observer?.disconnect();
22  }
23
24  toggle(event) {
25    event.currentTarget.classList.toggle("is-checked");
26    this.update();
27  }
28
29  reset() {
30    this.itemTargets.forEach((item) => item.classList.remove("is-checked"));
31    this.update();
32  }
33
34  update() {
35    const total = this.itemTargets.length;
36    const checked = this.itemTargets.filter((i) =>
37      i.classList.contains("is-checked"),
38    ).length;
39    const pct = total === 0 ? 0 : (checked / total) * 100;
40    const allChecked = total > 0 && checked === total;
41
42    this.barTarget.style.width = `${pct}%`;
43    this.barTarget.style.background = allChecked
44      ? "#10B981"
45      : "var(--color-primary)";
46    this.countTarget.textContent = `${checked}/${total}`;
47    this.defaultFooterTarget.hidden = allChecked;
48    this.completeFooterTarget.hidden = !allChecked;
49  }
50};