https://www.aev-panther.de/assets/ea/controllers/active-toggle_controller-JF_wdyd.js

1import {Controller} from '@hotwired/stimulus';
2
3export default class extends Controller {
4    static targets = ['input', 'badge'];
5    static values  = { url: String, active: Boolean };
6
7    toggle() {
8        const newValue = this.inputTarget.checked;
9
10        fetch(`${this.urlValue}&newValue=${newValue}`, {
11            method: 'PATCH',
12            headers: { 'X-Requested-With': 'XMLHttpRequest' },
13        }).then(r => {
14            if (r.ok) {
15                this.activeValue = newValue;
16                this.#syncBadge(newValue);
17            } else {
18                this.#revert();
19            }
20        }).catch(() => this.#revert());
21    }
22
23    #syncBadge(active) {
24        this.badgeTarget.textContent = active ? 'Aktiv' : 'Inaktiv';
25        this.badgeTarget.className   = `badge ${active ? 'text-bg-success' : 'text-bg-danger'}`;
26    }
27
28    #revert() {
29        this.inputTarget.checked = !this.inputTarget.checked;
30    }
31}