Added power sum per distributionboard

2026-04-30 22:04:08 +02:00
parent 245a5b1485
commit 81d47ce16f
9 changed files with 501 additions and 31 deletions
@@ -1,20 +1,23 @@
 "use client";

-import { Activity, FolderPlus, Plus, RefreshCw, Zap } from "lucide-react";
+import { Activity, FolderPlus, Pencil, Plus, RefreshCw, Save, Trash2, X, Zap } from "lucide-react";
 import { FormEvent, useEffect, useMemo, useState } from "react";
 import {
  createConsumer,
  createDistributionBoard,
  createProject,
+  deleteConsumer,
  listConsumers,
  listDistributionBoards,
  listProjects,
+  updateConsumer,
 } from "../utils/api";
 import type {
  ConsumerWithCalculatedValues,
  CreateConsumerInput,
  DistributionBoardDto,
  ProjectDto,
+  UpdateConsumerInput,
 } from "../types";

 const initialConsumerForm = {
@@ -29,6 +32,19 @@ const initialConsumerForm = {
  note: "",
 };

+interface EditConsumerForm {
+  name: string;
+  category: string;
+  distributionBoardId: string;
+  quantity: string;
+  installedPowerPerUnitKw: string;
+  demandFactor: string;
+  voltageV: string;
+  phaseCount: "1" | "3";
+  powerFactor: string;
+  note: string;
+}
+
 type ConsumerForm = typeof initialConsumerForm;

 function toOptionalNumber(value: string) {
@@ -48,6 +64,21 @@ function formatNumber(value: number | undefined, digits = 2) {
  }).format(value);
 }

+function createEditForm(consumer: ConsumerWithCalculatedValues): EditConsumerForm {
+  return {
+    name: consumer.name,
+    category: consumer.category ?? "",
+    distributionBoardId: consumer.distributionBoardId ?? "",
+    quantity: String(consumer.quantity),
+    installedPowerPerUnitKw: String(consumer.installedPowerPerUnitKw),
+    demandFactor: String(consumer.demandFactor),
+    voltageV: consumer.voltageV !== undefined ? String(consumer.voltageV) : "",
+    phaseCount: consumer.phaseCount === 3 ? "3" : "1",
+    powerFactor: consumer.powerFactor !== undefined ? String(consumer.powerFactor) : "",
+    note: consumer.note ?? "",
+  };
+}
+
 export function PowerBalanceWorkspace() {
  const [projects, setProjects] = useState<ProjectDto[]>([]);
  const [selectedProjectId, setSelectedProjectId] = useState("");
@@ -57,6 +88,8 @@ export function PowerBalanceWorkspace() {
  const [projectName, setProjectName] = useState("");
  const [boardName, setBoardName] = useState("");
  const [consumerForm, setConsumerForm] = useState<ConsumerForm>(initialConsumerForm);
+  const [editingConsumerId, setEditingConsumerId] = useState<string | null>(null);
+  const [editConsumerForm, setEditConsumerForm] = useState<EditConsumerForm | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
@@ -79,6 +112,49 @@ export function PowerBalanceWorkspace() {
      ),
    [visibleConsumers]
  );
+  const totalsByBoard = useMemo(() => {
+    const bucket = new Map<string, { consumerCount: number; installedPowerKw: number; demandPowerKw: number }>();
+    for (const board of distributionBoards) {
+      bucket.set(board.id, { consumerCount: 0, installedPowerKw: 0, demandPowerKw: 0 });
+    }
+    bucket.set("__unassigned__", { consumerCount: 0, installedPowerKw: 0, demandPowerKw: 0 });
+
+    for (const consumer of consumers) {
+      const key = consumer.distributionBoardId ?? "__unassigned__";
+      const entry = bucket.get(key);
+      if (!entry) {
+        continue;
+      }
+      entry.consumerCount += 1;
+      entry.installedPowerKw += consumer.installedPowerKw;
+      entry.demandPowerKw += consumer.demandPowerKw;
+    }
+
+    return [
+      ...distributionBoards.map((board) => ({
+        key: board.id,
+        boardName: board.name,
+        ...bucket.get(board.id)!,
+      })),
+      {
+        key: "__unassigned__",
+        boardName: "Ohne Verteilung",
+        ...bucket.get("__unassigned__")!,
+      },
+    ].filter((item) => item.consumerCount > 0);
+  }, [consumers, distributionBoards]);
+  const projectTotals = useMemo(
+    () =>
+      consumers.reduce(
+        (sum, consumer) => ({
+          consumerCount: sum.consumerCount + 1,
+          installedPowerKw: sum.installedPowerKw + consumer.installedPowerKw,
+          demandPowerKw: sum.demandPowerKw + consumer.demandPowerKw,
+        }),
+        { consumerCount: 0, installedPowerKw: 0, demandPowerKw: 0 }
+      ),
+    [consumers]
+  );

  async function refreshProjects() {
    setError(null);
@@ -116,6 +192,8 @@ export function PowerBalanceWorkspace() {
  }, []);

  useEffect(() => {
+    setEditingConsumerId(null);
+    setEditConsumerForm(null);
    refreshDistributionBoards(selectedProjectId).catch((err: unknown) =>
      setError(err instanceof Error ? err.message : "Verteilungen konnten nicht geladen werden.")
    );
@@ -199,10 +277,74 @@ export function PowerBalanceWorkspace() {
    }
  }

+  async function handleSaveConsumer(consumerId: string) {
+    if (!selectedProjectId || !editConsumerForm) {
+      return;
+    }
+
+    const input: UpdateConsumerInput = {
+      projectId: selectedProjectId,
+      distributionBoardId: editConsumerForm.distributionBoardId || undefined,
+      name: editConsumerForm.name.trim(),
+      category: editConsumerForm.category.trim() || undefined,
+      quantity: Number(editConsumerForm.quantity),
+      installedPowerPerUnitKw: Number(editConsumerForm.installedPowerPerUnitKw),
+      demandFactor: Number(editConsumerForm.demandFactor),
+      voltageV: toOptionalNumber(editConsumerForm.voltageV),
+      phaseCount: editConsumerForm.phaseCount === "3" ? 3 : 1,
+      powerFactor: toOptionalNumber(editConsumerForm.powerFactor),
+      note: editConsumerForm.note.trim() || undefined,
+    };
+
+    setIsSaving(true);
+    setError(null);
+    try {
+      const updated = await updateConsumer(consumerId, input);
+      setConsumers((current) => current.map((item) => (item.id === consumerId ? updated : item)));
+      setEditingConsumerId(null);
+      setEditConsumerForm(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Verbraucher konnte nicht gespeichert werden.");
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  async function handleDeleteConsumer(consumerId: string) {
+    setIsSaving(true);
+    setError(null);
+    try {
+      await deleteConsumer(consumerId);
+      setConsumers((current) => current.filter((item) => item.id !== consumerId));
+      if (editingConsumerId === consumerId) {
+        setEditingConsumerId(null);
+        setEditConsumerForm(null);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Verbraucher konnte nicht geloescht werden.");
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  function startEditConsumer(consumer: ConsumerWithCalculatedValues) {
+    setEditingConsumerId(consumer.id);
+    setEditConsumerForm(createEditForm(consumer));
+  }
+
+  function cancelEditConsumer() {
+    setEditingConsumerId(null);
+    setEditConsumerForm(null);
+  }
+
  function updateConsumerForm(field: keyof ConsumerForm, value: string) {
    setConsumerForm((current) => ({ ...current, [field]: value }));
  }

+  function updateEditConsumerForm(field: keyof EditConsumerForm, value: string) {
+    setEditConsumerForm((current) => (current ? { ...current, [field]: value } : current));
+  }
+
  return (
    <main className="workspace">
      <header className="topbar">
@@ -282,7 +424,7 @@ export function PowerBalanceWorkspace() {
        <form className="consumerForm" onSubmit={handleCreateConsumer}>
          <label>
            Verbraucher
-            <input value={consumerForm.name} onChange={(event) => updateConsumerForm("name", event.target.value)} placeholder="z. B. Steckdosen Büro" />
+            <input value={consumerForm.name} onChange={(event) => updateConsumerForm("name", event.target.value)} placeholder="z. B. Steckdosen Buero" />
          </label>
          <label>
            Kategorie
@@ -293,7 +435,7 @@ export function PowerBalanceWorkspace() {
            <input min="0" type="number" value={consumerForm.quantity} onChange={(event) => updateConsumerForm("quantity", event.target.value)} />
          </label>
          <label>
-            Leistung je Stück [kW]
+            Leistung je Stueck [kW]
            <input min="0" step="0.01" type="number" value={consumerForm.installedPowerPerUnitKw} onChange={(event) => updateConsumerForm("installedPowerPerUnitKw", event.target.value)} />
          </label>
          <label>
@@ -321,7 +463,7 @@ export function PowerBalanceWorkspace() {
          </label>
          <button className="primaryButton" type="submit" disabled={!selectedProjectId || isSaving}>
            <Plus size={17} />
-            Hinzufügen
+            Hinzufuegen
          </button>
        </form>
      </section>
@@ -330,12 +472,51 @@ export function PowerBalanceWorkspace() {
        <div className="tableHeader">
          <div>
            <p className="eyebrow">Aktuelles Projekt</p>
-            <h2>{selectedProject?.name || "Noch kein Projekt ausgewählt"}</h2>
+            <h2>{selectedProject?.name || "Noch kein Projekt ausgewaehlt"}</h2>
            <p className="subline">{selectedBoard ? `Verteilung: ${selectedBoard.name}` : "Alle Verteilungen"}</p>
          </div>
          <div className="statusPill">
            <Activity size={16} />
-            {isLoading ? "Lädt" : "Bereit"}
+            {isLoading ? "Laedt" : "Bereit"}
+          </div>
+        </div>
+
+        <div className="boardTotals">
+          <h3>Summen nach Verteilung</h3>
+          <div className="tableScroll">
+            <table>
+              <thead>
+                <tr>
+                  <th>Verteilung</th>
+                  <th>Verbraucher</th>
+                  <th>Installierte Leistung [kW]</th>
+                  <th>Berechnete Leistung [kW]</th>
+                </tr>
+              </thead>
+              <tbody>
+                {totalsByBoard.map((item) => (
+                  <tr key={item.key}>
+                    <td>{item.boardName}</td>
+                    <td>{item.consumerCount}</td>
+                    <td>{formatNumber(item.installedPowerKw)}</td>
+                    <td>{formatNumber(item.demandPowerKw)}</td>
+                  </tr>
+                ))}
+                {!totalsByBoard.length ? (
+                  <tr>
+                    <td colSpan={4} className="emptyState">
+                      Noch keine Verbraucher fuer eine Summenbildung vorhanden.
+                    </td>
+                  </tr>
+                ) : null}
+                <tr className="totalRow">
+                  <td>Projekt gesamt</td>
+                  <td>{projectTotals.consumerCount}</td>
+                  <td>{formatNumber(projectTotals.installedPowerKw)}</td>
+                  <td>{formatNumber(projectTotals.demandPowerKw)}</td>
+                </tr>
+              </tbody>
+            </table>
          </div>
        </div>

@@ -347,35 +528,131 @@ export function PowerBalanceWorkspace() {
                <th>Verteilung</th>
                <th>Kategorie</th>
                <th>Anzahl</th>
-                <th>Leistung je Stück [kW]</th>
+                <th>Leistung je Stueck [kW]</th>
                <th>Installierte Leistung [kW]</th>
                <th>GZF</th>
                <th>Berechnete Leistung [kW]</th>
                <th>Strom [A]</th>
                <th>Bemerkung</th>
+                <th>Aktionen</th>
              </tr>
            </thead>
            <tbody>
-              {visibleConsumers.map((consumer) => (
-                <tr key={consumer.id}>
-                  <td className="nameCell">
-                    <Zap size={15} />
-                    {consumer.name}
-                  </td>
-                  <td>{consumer.distributionBoardId ? boardNames.get(consumer.distributionBoardId) || "-" : "-"}</td>
-                  <td>{consumer.category || "-"}</td>
-                  <td>{consumer.quantity}</td>
-                  <td>{formatNumber(consumer.installedPowerPerUnitKw)}</td>
-                  <td>{formatNumber(consumer.installedPowerKw)}</td>
-                  <td>{formatNumber(consumer.demandFactor, 2)}</td>
-                  <td>{formatNumber(consumer.demandPowerKw)}</td>
-                  <td>{formatNumber(consumer.currentA)}</td>
-                  <td>{consumer.note || "-"}</td>
-                </tr>
-              ))}
+              {visibleConsumers.map((consumer) => {
+                const isEditing = editingConsumerId === consumer.id && editConsumerForm;
+                return (
+                  <tr key={consumer.id}>
+                    <td className="nameCell">
+                      <Zap size={15} />
+                      {isEditing ? (
+                        <input value={editConsumerForm.name} onChange={(event) => updateEditConsumerForm("name", event.target.value)} />
+                      ) : (
+                        consumer.name
+                      )}
+                    </td>
+                    <td>
+                      {isEditing ? (
+                        <select
+                          value={editConsumerForm.distributionBoardId}
+                          onChange={(event) => updateEditConsumerForm("distributionBoardId", event.target.value)}
+                        >
+                          <option value="">-</option>
+                          {distributionBoards.map((board) => (
+                            <option key={board.id} value={board.id}>
+                              {board.name}
+                            </option>
+                          ))}
+                        </select>
+                      ) : consumer.distributionBoardId ? (
+                        boardNames.get(consumer.distributionBoardId) || "-"
+                      ) : (
+                        "-"
+                      )}
+                    </td>
+                    <td>
+                      {isEditing ? (
+                        <input value={editConsumerForm.category} onChange={(event) => updateEditConsumerForm("category", event.target.value)} />
+                      ) : (
+                        consumer.category || "-"
+                      )}
+                    </td>
+                    <td>
+                      {isEditing ? (
+                        <input min="0" type="number" value={editConsumerForm.quantity} onChange={(event) => updateEditConsumerForm("quantity", event.target.value)} />
+                      ) : (
+                        consumer.quantity
+                      )}
+                    </td>
+                    <td>
+                      {isEditing ? (
+                        <input
+                          min="0"
+                          step="0.01"
+                          type="number"
+                          value={editConsumerForm.installedPowerPerUnitKw}
+                          onChange={(event) => updateEditConsumerForm("installedPowerPerUnitKw", event.target.value)}
+                        />
+                      ) : (
+                        formatNumber(consumer.installedPowerPerUnitKw)
+                      )}
+                    </td>
+                    <td>{formatNumber(consumer.installedPowerKw)}</td>
+                    <td>
+                      {isEditing ? (
+                        <input min="0" max="1" step="0.01" type="number" value={editConsumerForm.demandFactor} onChange={(event) => updateEditConsumerForm("demandFactor", event.target.value)} />
+                      ) : (
+                        formatNumber(consumer.demandFactor)
+                      )}
+                    </td>
+                    <td>{formatNumber(consumer.demandPowerKw)}</td>
+                    <td>
+                      {isEditing ? (
+                        <div className="rowField">
+                          <input min="1" type="number" value={editConsumerForm.voltageV} onChange={(event) => updateEditConsumerForm("voltageV", event.target.value)} />
+                          <select value={editConsumerForm.phaseCount} onChange={(event) => updateEditConsumerForm("phaseCount", event.target.value)}>
+                            <option value="1">1</option>
+                            <option value="3">3</option>
+                          </select>
+                          <input min="0" max="1" step="0.01" type="number" value={editConsumerForm.powerFactor} onChange={(event) => updateEditConsumerForm("powerFactor", event.target.value)} />
+                        </div>
+                      ) : (
+                        formatNumber(consumer.currentA)
+                      )}
+                    </td>
+                    <td>
+                      {isEditing ? (
+                        <input value={editConsumerForm.note} onChange={(event) => updateEditConsumerForm("note", event.target.value)} />
+                      ) : (
+                        consumer.note || "-"
+                      )}
+                    </td>
+                    <td>
+                      <div className="rowActions">
+                        {isEditing ? (
+                          <>
+                            <button className="iconButton small" type="button" title="Speichern" onClick={() => handleSaveConsumer(consumer.id)} disabled={isSaving}>
+                              <Save size={14} />
+                            </button>
+                            <button className="iconButton small muted" type="button" title="Abbrechen" onClick={cancelEditConsumer}>
+                              <X size={14} />
+                            </button>
+                          </>
+                        ) : (
+                          <button className="iconButton small" type="button" title="Bearbeiten" onClick={() => startEditConsumer(consumer)}>
+                            <Pencil size={14} />
+                          </button>
+                        )}
+                        <button className="iconButton small danger" type="button" title="Loeschen" onClick={() => handleDeleteConsumer(consumer.id)} disabled={isSaving}>
+                          <Trash2 size={14} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
              {!visibleConsumers.length ? (
                <tr>
-                  <td colSpan={10} className="emptyState">
+                  <td colSpan={11} className="emptyState">
                    Lege eine Verteilung an oder erfasse den ersten Verbraucher.
                  </td>
                </tr>