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>
This commit is contained in:
Christian Mueller 2026-04-07 04:05:52 +02:00
parent 8a5031649a
commit 68174d16c2

View File

@ -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">