From 35d3211615423592ae25f3582dcef2fb7d1e4180 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20Erbsh=C3=A4u=C3=9Fer?= <tobias@tesoft.dev>
Date: Sun, 24 May 2026 09:22:38 +0200
Subject: [PATCH] make buttons disablable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
---
 frontend/src/components/button.njk | 12 ++++++++----
 frontend/src/components/button.ts  | 12 ++++++++++--
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/button.njk b/frontend/src/components/button.njk
index 3bc190d..e35d7b8 100644
--- a/frontend/src/components/button.njk
+++ b/frontend/src/components/button.njk
@@ -27,13 +27,17 @@
             font-weight: 800;
         }
 
-        button:focus, a:focus {
+        :host([disabled]) button, :host([disabled]) a {
+            color: var(--gray);
+        }
+
+        :host(:not([disabled])) button:focus, :host(:not([disabled])) a:focus {
             outline-color: var(--gold);
             outline-offset: 0.2rem;
             outline-style: solid;
         }
 
-        button:hover, a:hover {
+        :host(:not([disabled])) button:hover, :host(:not([disabled])) a:hover {
             background-color: var(--gold) !important;
             color: var(--gray);
             cursor: pointer;
@@ -43,11 +47,11 @@
             fill: var(--light-gray);
         }
 
-        :host([selected]) ::slotted(svg) {
+        :host([selected]) ::slotted(svg), :host([disabled]) ::slotted(svg) {
             fill: var(--gray);
         }
 
-        button:hover ::slotted(svg), a:hover ::slotted(svg) {
+        :host(:not([disabled])) button:hover ::slotted(svg), :host(:not([disabled])) a:hover ::slotted(svg) {
             fill: var(--gray);
         }
     </style>
diff --git a/frontend/src/components/button.ts b/frontend/src/components/button.ts
index 8e330d2..cc12654 100644
--- a/frontend/src/components/button.ts
+++ b/frontend/src/components/button.ts
@@ -1,7 +1,7 @@
 import {TesoftComponent} from "../scripts/main.ts";
 
 export class TesoftButton extends TesoftComponent {
-    static observedAttributes = ["href", "selected"];
+    static observedAttributes = ["disabled", "href", "selected"];
 
     private readonly rootDiv: HTMLDivElement;
 
@@ -19,7 +19,15 @@ export class TesoftButton extends TesoftComponent {
 
     // noinspection JSUnusedGlobalSymbols
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
-        if (name === "href") {
+        if (name === "disabled") {
+            if (newValue === null) {
+                this.rootDiv.onclick = null;
+            } else {
+                this.rootDiv.onclick = (e) => {
+                    e.stopPropagation();
+                };
+            }
+        } else if (name === "href") {
             this.rootDiv.innerHTML = "";
 
             let linkOrButton: HTMLElement;