Compare Changes at consolidate

2026-02-26 16:18:45 +01:00
parent c8309832f7
commit 6190d707bb
8 changed files with 214 additions and 56 deletions
--- a/manifest.xml
+++ b/manifest.xml
@@ -6,17 +6,17 @@
  <DefaultLocale>de-DE</DefaultLocale>
  <DisplayName DefaultValue="SAT - Kabelliste Generator"/>
  <Description DefaultValue="Konsolidiert strukturierte Kabelzugdaten aus mehreren Tabellenblättern in eine Gesamtliste."/>
-  <IconUrl DefaultValue="https://kabel.casademm.de/assets/icon-32.png"/>
-  <HighResolutionIconUrl DefaultValue="https://kabel.casademm.de/assets/icon-64.png"/>
-  <SupportUrl DefaultValue="https://kabel.casademm.de"/>
+  <IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png"/>
+  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/icon-64.png"/>
+  <SupportUrl DefaultValue="https://localhost:3000/"/>
  <AppDomains>
-    <AppDomain>https://kabel.casademm.de</AppDomain>
+    <AppDomain>https://localhost:3000/</AppDomain>
  </AppDomains>
  <Hosts>
    <Host Name="Workbook"/>
  </Hosts>
  <DefaultSettings>
-    <SourceLocation DefaultValue="https://kabel.casademm.de/taskpane.html"/>
+    <SourceLocation DefaultValue="https://localhost:3000/taskpane.html"/>
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
@@ -62,14 +62,14 @@
    </Hosts>
    <Resources>
      <bt:Images>
-        <bt:Image id="Icon.16x16" DefaultValue="https://kabel.casademm.de/assets/icon-16.png"/>
-        <bt:Image id="Icon.32x32" DefaultValue="https://kabel.casademm.de/assets/icon-32.png"/>
-        <bt:Image id="Icon.80x80" DefaultValue="https://kabel.casademm.de/assets/icon-80.png"/>
+        <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
+        <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
+        <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
      </bt:Images>
      <bt:Urls>
-        <bt:Url id="GetStarted.LearnMoreUrl" DefaultValue="https://kabel.casademm.de/help"/>
-        <bt:Url id="Commands.Url" DefaultValue="https://kabel.casademm.de/commands.html"/>
-        <bt:Url id="Taskpane.Url" DefaultValue="https://kabel.casademm.de/taskpane.html"/>
+        <bt:Url id="GetStarted.LearnMoreUrl" DefaultValue="https://localhost:3000/help"/>
+        <bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html"/>
+        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="GetStarted.Title" DefaultValue="Willkommen zum Kabel-Konsolidierungs-Tool!"/>
--- a/src/taskpane/components/App.tsx
+++ b/src/taskpane/components/App.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState, useEffect } from "react";
 import { makeStyles } from "@fluentui/react-components";
-import { SheetInfo, SheetMappingStatus } from "../models";
+import { SheetInfo, SheetMappingStatus, ConsolidateSettings } from "../models";
 import SheetSelector from "./SheetSelector";
 import ColumnMapper from "./ColumnMapper";
 import StatusNotifier from "./StatusNotifier";
@@ -11,6 +11,8 @@ interface AppProps {
  title: string;
 }

+declare const DEV_MODE: boolean;
+
 const useStyles = makeStyles({
  root: {
    minHeight: "100vh",
@@ -33,6 +35,12 @@ const App: React.FC<AppProps> = () => {
  const [statusMessage, setStatusMessage] = useState("");
  const [isConsolidating, setIsConsolidating] = useState(false);

+  const [settings, setSettings] = useState<ConsolidateSettings>({
+    colorNew: "#d4edda",     // light green
+    colorChanged: "#fff3cd", // light yellow/orange
+    colorDeleted: "#f8d7da", // light red
+  });
+
  useEffect(() => {
    // Load internal sheets on mount
    getAvailableSheets().then(setSheets).catch(err => {
@@ -91,7 +99,7 @@ const App: React.FC<AppProps> = () => {
    setIsConsolidating(true);
    setStatus("idle");
    try {
-      const rowsCount = await consolidateData(sheetMappings);
+      const rowsCount = await consolidateData(sheetMappings, settings);
      setStatus("success");
      setStatusMessage(`Erfolgreich! Es wurden ${rowsCount} Zeilen aus ${sheetMappings.length} Blättern zusammengefasst.`);
      setStep("done");
@@ -105,6 +113,11 @@ const App: React.FC<AppProps> = () => {

  return (
    <div className={styles.root}>
+      {typeof DEV_MODE !== "undefined" && DEV_MODE && (
+        <div style={{ backgroundColor: "#ffc107", color: "#000", textAlign: "center", padding: "4px", fontWeight: "bold", fontSize: "12px" }}>
+          DEV ENVIRONMENT
+        </div>
+      )}
      <StatusNotifier status={status} message={statusMessage} />

      {step === "select_sheets" && (
@@ -120,6 +133,8 @@ const App: React.FC<AppProps> = () => {
      {step === "map_columns" && (
        <ColumnMapper
          sheetMappings={sheetMappings}
+          settings={settings}
+          onSettingsChange={setSettings}
          onHeaderRowChange={handleHeaderRowChange}
          onMappingChange={handleMappingChange}
          onBack={() => setStep("select_sheets")}
--- a/src/taskpane/components/ColumnMapper.tsx
+++ b/src/taskpane/components/ColumnMapper.tsx
@@ -13,7 +13,7 @@ import {
    Label,
    Spinner,
 } from "@fluentui/react-components";
-import { SheetMappingStatus, TARGET_COLUMNS } from "../models";
+import { SheetMappingStatus, TARGET_COLUMNS, ConsolidateSettings } from "../models";

 interface ColumnMapperProps {
    sheetMappings: SheetMappingStatus[];
@@ -22,6 +22,8 @@ interface ColumnMapperProps {
    onBack: () => void;
    onConsolidate: () => void;
    isConsolidating: boolean;
+    settings: ConsolidateSettings;
+    onSettingsChange: (settings: ConsolidateSettings) => void;
 }

 const ColumnMapper: React.FC<ColumnMapperProps> = ({
@@ -31,6 +33,8 @@ const ColumnMapper: React.FC<ColumnMapperProps> = ({
    onBack,
    onConsolidate,
    isConsolidating,
+    settings,
+    onSettingsChange,
 }) => {
    return (
        <div style={{ display: "flex", flexDirection: "column", gap: "15px", padding: "10px" }}>
@@ -119,6 +123,36 @@ const ColumnMapper: React.FC<ColumnMapperProps> = ({
                })}
            </Accordion>

+            <div style={{ marginTop: "20px", padding: "10px", backgroundColor: "#f3f2f1", borderRadius: "4px" }}>
+                <Text weight="semibold">Hervorhebungen (Farben)</Text>
+                <div style={{ display: "flex", gap: "20px", marginTop: "10px" }}>
+                    <Field label="Neue Kabel">
+                        <input
+                            type="color"
+                            value={settings.colorNew}
+                            onChange={(e) => onSettingsChange({ ...settings, colorNew: e.target.value })}
+                            style={{ width: "60px", padding: "0", cursor: "pointer", height: "30px", border: "none" }}
+                        />
+                    </Field>
+                    <Field label="Geänderte Werte">
+                        <input
+                            type="color"
+                            value={settings.colorChanged}
+                            onChange={(e) => onSettingsChange({ ...settings, colorChanged: e.target.value })}
+                            style={{ width: "60px", padding: "0", cursor: "pointer", height: "30px", border: "none" }}
+                        />
+                    </Field>
+                    <Field label="Entfallene Kabel">
+                        <input
+                            type="color"
+                            value={settings.colorDeleted}
+                            onChange={(e) => onSettingsChange({ ...settings, colorDeleted: e.target.value })}
+                            style={{ width: "60px", padding: "0", cursor: "pointer", height: "30px", border: "none" }}
+                        />
+                    </Field>
+                </div>
+            </div>
+
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: "20px" }}>
                <Button onClick={onBack} disabled={isConsolidating}>Zurück</Button>
                <Button
--- a/src/taskpane/excelLogic.ts
+++ b/src/taskpane/excelLogic.ts
@@ -1,5 +1,5 @@
 /* global Excel, console */
-import { SheetInfo, SheetMappingStatus, TARGET_COLUMNS } from "./models";
+import { SheetInfo, SheetMappingStatus, TARGET_COLUMNS, ConsolidateSettings } from "./models";

 /**
 * Holt alle sichtbaren Arbeitsblätter des aktuellen Workbooks, außer "Gesamtliste".
@@ -126,9 +126,9 @@ function buildSheetMappingStatus(sheetInfo: SheetInfo, headerRow: any[], rowInde

 /**
 * Führt die eigentliche Konsolidierung aus allen Arbeitsblättern durch und schreibt
- * das Ergebnis in das Blatt "Gesamtliste".
+ * das Ergebnis in das Blatt "Gesamtliste" (jetzt "Kabelliste").
 */
-export async function consolidateData(mappings: SheetMappingStatus[]): Promise<number> {
+export async function consolidateData(mappings: SheetMappingStatus[], settings: ConsolidateSettings): Promise<number> {
    return Excel.run(async (context) => {
        let rowsConsolidated = 0;
        const finalData: any[][] = [];
@@ -197,59 +197,153 @@ export async function consolidateData(mappings: SheetMappingStatus[]): Promise<n
            }
        }

-        // Kabelliste erstellen oder überschreiben
+        // Prüfen, ob "Kabelliste" existiert
        let targetSheet: Excel.Worksheet;
+        let listExists = false;
        try {
            targetSheet = context.workbook.worksheets.getItem("Kabelliste");
-            // Falls sie existiert, zuerst löschen, um sie neu zu erstellen
-            targetSheet.delete();
+            targetSheet.load("name");
            await context.sync();
+            listExists = true;
        } catch (e) {
-            // Ignorieren (Blatt existiert noch nicht)
+            listExists = false;
        }

-        try {
-            targetSheet = context.workbook.worksheets.add("Kabelliste");
+        const fullHeaders = [...TARGET_COLUMNS.map(tc => tc.id), "Länge", "gezogen am", "von (Monteur)"];

-            // Header Zeile schreiben
-            const fullHeaders = [...TARGET_COLUMNS.map(tc => tc.id), "Länge", "gezogen am", "von (Monteur)"];
+        if (listExists) {
+            try {
+                // Existierende Liste aktualisieren
+                const table = targetSheet.tables.getItem("KonsolidierteKabel");
+                const bodyRange = table.getDataBodyRange();
+                bodyRange.load("values, rowCount, columnCount");
+                await context.sync();

-            // finalData hat fullHeaders.length Spalten
-            const totalRowsCount = finalData.length + 1; // +1 für Header
-            const totalColsCount = fullHeaders.length;
+                const existingValues = bodyRange.values;

-            const targetRange = targetSheet.getRangeByIndexes(0, 0, totalRowsCount, totalColsCount);
+                const formatChangedQueue: { row: number, col: number }[] = [];
+                const formatDeletedQueue: number[] = [];

-            const allValues = [fullHeaders, ...finalData];
+                const incomingMap = new Map<string, any[]>();
+                for (const row of finalData) {
+                    const kNr = String(row[0] || "").trim();
+                    if (kNr) {
+                        incomingMap.set(kNr, row);
+                    }
+                }

-            // Formatiere die Zielzellen als Text ("@"), BEVOR die Werte reingeschrieben werden, 
-            // damit Excel nicht versucht, Datumsstrings als numerische Datumsformate umzuwandeln.
-            const formatArray: string[][] = [];
-            for (let i = 0; i < totalRowsCount; i++) {
-                formatArray.push(new Array(totalColsCount).fill("@"));
+                const newRows: any[][] = [];
+
+                // Update existing & mark deleted
+                for (let r = 0; r < existingValues.length; r++) {
+                    const row = existingValues[r];
+                    const kNr = String(row[0] || "").trim();
+
+                    if (!kNr) continue;
+
+                    if (incomingMap.has(kNr)) {
+                        // Geändert prüfen
+                        const inVals = incomingMap.get(kNr)!;
+                        for (let c = 0; c < TARGET_COLUMNS.length; c++) {
+                            const oldVal = String(row[c] || "").trim();
+                            const newVal = String(inVals[c] || "").trim();
+                            if (oldVal !== newVal) {
+                                existingValues[r][c] = newVal;
+                                formatChangedQueue.push({ row: r, col: c });
+                            }
+                        }
+                        incomingMap.delete(kNr);
+                    } else {
+                        // Entfallen
+                        // Optional die Zeile einfärben
+                        formatDeletedQueue.push(r);
+                    }
+                }
+
+                // Verbleibend = Neue Kabel
+                incomingMap.forEach((newRow) => {
+                    newRows.push(newRow);
+                });
+
+                // Werte in die bestehende Tabelle zurückschreiben
+                if (existingValues.length > 0) {
+                    bodyRange.values = existingValues;
+                }
+
+                // Neue Zeilen anhängen
+                let newRowsStartIndex = existingValues.length;
+                if (newRows.length > 0) {
+                    table.rows.add(null as any, newRows);
+                }
+
+                await context.sync();
+
+                // Formate anwenden
+                const currentBody = table.getDataBodyRange();
+
+                // Geänderte Zellen markieren
+                for (const cell of formatChangedQueue) {
+                    currentBody.getCell(cell.row, cell.col).format.fill.color = settings.colorChanged;
+                }
+
+                // Entfallene Zeilen markieren
+                for (const rowIndex of formatDeletedQueue) {
+                    currentBody.getRow(rowIndex).format.fill.color = settings.colorDeleted;
+                    //Zellen durchgestrichen
+                    currentBody.getRow(rowIndex).format.font.strikethrough = true;
+                }
+
+                // Neue Zeilen markieren
+                for (let i = 0; i < newRows.length; i++) {
+                    currentBody.getRow(newRowsStartIndex + i).format.fill.color = settings.colorNew;
+                }
+
+                table.getRange().format.autofitColumns();
+                await context.sync();
+
+                targetSheet.activate();
+                return rowsConsolidated;
+            } catch (error) {
+                console.error("Fehler beim Aktualisieren der Kabelliste:", error);
+                throw new Error("Fehler beim Aktualisieren der 'Kabelliste'.");
            }
+        } else {
+            try {
+                // Neu erstellen (wie bisher)
+                targetSheet = context.workbook.worksheets.add("Kabelliste");

-            targetRange.numberFormat = formatArray;
-            targetRange.values = allValues;
+                const totalRowsCount = finalData.length + 1; // +1 für Header
+                const totalColsCount = fullHeaders.length;

-            await context.sync();
+                const targetRange = targetSheet.getRangeByIndexes(0, 0, totalRowsCount, totalColsCount);
+                const allValues = [fullHeaders, ...finalData];

-            // Als Tabelle formatieren
-            const table = targetSheet.tables.add(targetRange, true /* hasHeaders */);
-            table.name = "KonsolidierteKabel";
-            table.style = "TableStyleLight9";
-            table.showFilterButton = true;
+                const formatArray: string[][] = [];
+                for (let i = 0; i < totalRowsCount; i++) {
+                    formatArray.push(new Array(totalColsCount).fill("@"));
+                }

-            // Spaltenbreite anpassen (AutoFit)
-            targetRange.format.autofitColumns();
-            await context.sync();
+                targetRange.numberFormat = formatArray;
+                targetRange.values = allValues;

-            targetSheet.activate();
+                await context.sync();

-            return rowsConsolidated;
-        } catch (error) {
-            console.error("Fehler beim Erstellen der Kabelliste:", error);
-            throw new Error("Fehler beim Erstellen der 'Kabelliste'. Möglicherweise ist die Arbeitsmappe schreibgeschützt.");
+                const table = targetSheet.tables.add(targetRange, true /* hasHeaders */);
+                table.name = "KonsolidierteKabel";
+                table.style = "TableStyleLight9";
+                table.showFilterButton = true;
+
+                // Markiere komplett neu entfernt auf Userwunsch
+
+                targetRange.format.autofitColumns();
+                await context.sync();
+
+                targetSheet.activate();
+                return rowsConsolidated;
+            } catch (error) {
+                console.error("Fehler beim Erstellen der Kabelliste:", error);
+                throw new Error("Fehler beim Erstellen der 'Kabelliste'. Möglicherweise ist die Arbeitsmappe schreibgeschützt.");
+            }
        }
    });
 }
--- a/src/taskpane/index.tsx
+++ b/src/taskpane/index.tsx
@@ -5,7 +5,13 @@ import { FluentProvider, webLightTheme } from "@fluentui/react-components";

 /* global document, Office, module, require, HTMLElement */

-const title = "SAT - Kabelliste Generator";
+declare const DEV_MODE: boolean;
+
+//if dev server is running set title to "SAT - Kabelliste Generator (Dev)"
+let title = "SAT - Kabelliste Generator";
+if (typeof DEV_MODE !== "undefined" && DEV_MODE) {
+  title = "SAT - Kabelliste Generator (Dev)";
+}

 const rootElement: HTMLElement | null = document.getElementById("container");
 const root = rootElement ? createRoot(rootElement) : undefined;
--- a/src/taskpane/models.ts
+++ b/src/taskpane/models.ts
@@ -25,6 +25,12 @@ export interface TargetColumnDef {
  aliases: string[]; // e.g. ["k-nr.", "kabelnummer", "nr."]
 }

+export interface ConsolidateSettings {
+  colorNew: string;
+  colorChanged: string;
+  colorDeleted: string;
+}
+
 export const TARGET_COLUMNS: TargetColumnDef[] = [
  { id: "K-Nr.", aliases: ["k-nr.", "k-nr", "kabelnummer", "kabel", "nummer", "nr.", "nr"] },
  { id: "Bezeichnung", aliases: ["bezeichnung", "name", "titel", "beschreibung"] },
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,7 +5,7 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const webpack = require("webpack");

-const urlDev = "https://localhost:3037/";
+const urlDev = "https://localhost:3000/";
 const urlProd = "https://kabel.casademm.de/"; // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION

 async function getHttpsOptions() {
@@ -93,6 +93,9 @@ module.exports = async (env, options) => {
      new webpack.ProvidePlugin({
        Promise: ["es6-promise", "Promise"],
      }),
+      new webpack.DefinePlugin({
+        DEV_MODE: JSON.stringify(dev),
+      }),
    ],
    devServer: {
      hot: true,