From 68174d16c299c87e06c25605c5ad6a44a85b1c3f Mon Sep 17 00:00:00 2001
From: Christian Mueller <christian@cynfo.com>
Date: Tue, 7 Apr 2026 04:05:52 +0200
Subject: [PATCH] feat: edit datapoint label and unit directly in layout editor

No need to switch to Datenpunkte page - rename and set unit
right where you assign the datapoint to a layout element.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 display/frontend/src/pages/Layouts.tsx | 36 ++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/display/frontend/src/pages/Layouts.tsx b/display/frontend/src/pages/Layouts.tsx
index f17bcb1..807c8f1 100644
--- a/display/frontend/src/pages/Layouts.tsx
+++ b/display/frontend/src/pages/Layouts.tsx
@@ -113,6 +113,22 @@ export default function Layouts() {
     } catch (e) { setError((e as Error).message); }
   }
 
+  async function updateDatapointLabel(dpId: number, label: string) {
+    try {
+      await api.put(`/api/datapoints/${dpId}`, { label });
+      loadDatapoints();
+      if (selected) selectLayout(selected.id);
+    } catch (e) { setError((e as Error).message); }
+  }
+
+  async function updateDatapointUnit(dpId: number, unit: string) {
+    try {
+      await api.put(`/api/datapoints/${dpId}`, { unit });
+      loadDatapoints();
+      if (selected) selectLayout(selected.id);
+    } catch (e) { setError((e as Error).message); }
+  }
+
   async function handleDeleteElement(elId: number) {
     if (!selected) return;
     try {
@@ -278,6 +294,26 @@ export default function Layouts() {
                         </div>
                       )}
 
+                      {/* Editable datapoint label + unit (for value with assigned datapoint) */}
+                      {el.type === 'value' && dp && (
+                        <>
+                          <div className="w-40">
+                            <div className="text-[10px] text-gray-400">Anzeigename</div>
+                            <input className="w-full border border-gray-300 rounded px-1.5 py-1 text-xs"
+                              defaultValue={dp.label || dp.name}
+                              onBlur={(e) => { if (e.target.value !== (dp.label || dp.name)) updateDatapointLabel(dp.id, e.target.value); }}
+                              placeholder="Anzeigename" />
+                          </div>
+                          <div className="w-16">
+                            <div className="text-[10px] text-gray-400">Einheit</div>
+                            <input className="w-full border border-gray-300 rounded px-1.5 py-1 text-xs"
+                              defaultValue={dp.unit || ''}
+                              onBlur={(e) => { if (e.target.value !== (dp.unit || '')) updateDatapointUnit(dp.id, e.target.value); }}
+                              placeholder="z.B. W" />
+                          </div>
+                        </>
+                      )}
+
                       {/* Static text (for label) */}
                       {el.type === 'label' && (
                         <div className="flex-1 min-w-48">