Verbesserte IVon in den Tabellen

src/main/java/com/tsystems/inwo/vgl/service/HtmlRenderingService.java

@@ -69,22 +69,38 @@ public class HtmlRenderingService {
         
         if (isAddition) {
             // Field was added (alt was empty, now has value)
-            return "<span class='cell-added'>" + escape(newVal) + 
-                   "<div class='old'>hinzugefügt</div></span>";
+            return buildDiffContentHtml("added", "fa-plus", newVal, "hinzugefügt", oldVal);
         } else if (isDeletion) {
             // Field was deleted (alt had value, now is empty)
-            return "<span class='cell-deleted'>leer" + 
-                   "<div class='old'>gelöscht (war: " + escape(oldVal) + ")" +
-                   buildCopyButton(oldVal) + "</div></span>";
+            return buildDiffContentHtml("deleted", "fa-minus", "leer", "war: " + escape(oldVal), oldVal);
         } else {
             // Field was changed (both old and new have values)
             String displayOldVal = (oldVal == null || oldVal.trim().isEmpty()) ? "leer" : oldVal;
-            return "<span class='cell-changed'>" + escape(newVal) + 
-                   "<div class='old'>geändert (war: " + escape(displayOldVal) + ")" +
-                   buildCopyButton(oldVal) + "</div></span>";
+            return buildDiffContentHtml("changed", "fa-exclamation", newVal, "geändert (war: " + escape(displayOldVal) + ")", oldVal);
         }
     }
     
+    /**
+     * Builds the new icon-based diff content HTML structure
+     */
+    private String buildDiffContentHtml(String changeType, String iconClass, String currentValue, String statusText, String oldValue) {
+        StringBuilder html = new StringBuilder();
+        html.append("<span class='cell-").append(changeType).append("'>");
+        html.append("<div class='diff-content'>");
+        html.append("<div class='diff-icon ").append(changeType).append("'>");
+        html.append("<i class='fas ").append(iconClass).append("'></i>");
+        html.append("</div>");
+        html.append("<div class='diff-text'>");
+        html.append("<span class='diff-current-value'>").append(escape(currentValue)).append("</span>");
+        html.append("<span class='diff-status-text'>").append(statusText);
+        html.append(buildCopyButton(oldValue));
+        html.append("</span>");
+        html.append("</div>");
+        html.append("</div>");
+        html.append("</span>");
+        return html.toString();
+    }
+    
     /**
      * Builds a copy button for copying the old value to clipboard
      */

src/main/resources/static/css/global.css

@@ -265,51 +265,90 @@ th {
   background: var(--rot-hell);
 }
 
-.cell-changed,
-td:has(.cell-changed) {
-  background: var(--gelb-hell);
-}
-
-.cell-changed:not(.sym)::before {
-  content: "! ";
-  color: var(--gelb);
-  font-weight: bold;
-  font-size: 0.9em;
-  margin-right: 4px;
-}
+/* =============================================================================
+   NEUE ICON-BASIERTE DIFF-DARSTELLUNG
+   ============================================================================= */
 
-.cell-added,
-td:has(.cell-added) {
-  background: var(--gruen-hell);
+/* Container für den neuen Icon+Text Layout */
+.diff-content {
+  display: flex;
+  align-items: flex-start;
+  min-height: 2.4em;
+  gap: 2px;
 }
 
-.cell-added:not(.sym)::before {
-  content: "+ ";
-  color: var(--gruen);
-  font-weight: bold;
-  font-size: 0.9em;
-  margin-right: 4px;
+.diff-icon {
+  flex-shrink: 0;
+  width: 18px; /* Größeres Icon */
+  height: 18px; /* Größeres Icon */
+  font-size: 16px; /* Größere Schrift für das Icon */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.1em; /* Kleinerer Abstand oben */
+  position: relative;
 }
 
-.cell-deleted,
-td:has(.cell-deleted) {
-  background: var(--rot-hell);
+.diff-text {
+  flex: 1;
+  line-height: 1.3;
+  min-width: 0; /* Verhindert Overflow-Probleme */
 }
 
-.cell-deleted:not(.sym)::before {
-  content: "− ";
-  color: var(--rot);
-  font-weight: bold;
-  font-size: 0.9em;
-  margin-right: 4px;
+.diff-current-value {
+  display: block;
+  font-weight: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
-.old {
+.diff-status-text {
   display: block;
   font-size: 0.85em;
-  margin-top: 0.2rem;
+  margin-top: 0.3rem;
   opacity: 0.9;
   font-style: italic;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+/* Icon-spezifische Farben mit besserer Sichtbarkeit */
+.diff-icon.changed {
+  color: var(--gelb);
+}
+
+.diff-icon.added {
+  color: var(--gruen);
+}
+
+.diff-icon.deleted {
+  color: var(--rot);
+}
+
+/* FontAwesome Icons in Diff-Icons */
+.diff-icon i.fas {
+  font-family: "Font Awesome 6 Free";
+  font-weight: 900;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  line-height: 1;
+}
+
+/* Hintergrundfarben für die Zellen */
+.cell-changed,
+td:has(.cell-changed) {
+  background: var(--gelb-hell);
+}
+
+.cell-added,
+td:has(.cell-added) {
+  background: var(--gruen-hell);
+}
+
+.cell-deleted,
+td:has(.cell-deleted) {
+  background: var(--rot-hell);
 }
 
 /* =============================================================================
@@ -366,8 +405,8 @@ td:has(.cell-deleted) {
   opacity: 1;
 }
 
-/* Sicherstellen, dass Kopier-Buttons in der old-Zeile richtig angezeigt werden */
-.old .copy-btn {
+/* Kopier-Buttons im neuen Diff-Layout */
+.diff-status-text .copy-btn {
   font-style: normal;
 }
 

src/main/resources/static/css/miete.css

@@ -175,3 +175,4 @@
 .wohnung-grid-table .value-cell.cell-deleted {
   background: var(--rot-hell) !important;
 }
+

src/main/resources/static/js/ui-updater-miete.js

@@ -233,10 +233,10 @@ function updateUntermieterTable(untermieterZeilen) {
     // Symbol-Spalte
     const symbolTd = document.createElement('td');
     symbolTd.className = 'sym ' + (zeile.symbolClass || '');
-    symbolTd.textContent = zeile.symbol || '';
-    const ariaLabel = zeile.symbol === '+' ? 'Hinzugefügt' : 
-                     (zeile.symbol === '-' ? 'Gelöscht' : 
-                     (zeile.symbol === '!' ? 'Geändert' : 'Unverändert'));
+    symbolTd.innerHTML = zeile.symbol || '';
+    const ariaLabel = zeile.symbol && zeile.symbol.includes('fa-plus') ? 'Hinzugefügt' : 
+                     (zeile.symbol && zeile.symbol.includes('fa-minus') ? 'Gelöscht' : 
+                     (zeile.symbol && zeile.symbol.includes('fa-exclamation') ? 'Geändert' : 'Unverändert'));
     symbolTd.setAttribute('aria-label', ariaLabel);
     tr.appendChild(symbolTd);
     
@@ -269,10 +269,10 @@ function updateMitbewohnerTable(mitbewohnerZeilen) {
     // Symbol-Spalte
     const symbolTd = document.createElement('td');
     symbolTd.className = 'sym ' + (zeile.symbolClass || '');
-    symbolTd.textContent = zeile.symbol || '';
-    const ariaLabel = zeile.symbol === '+' ? 'Hinzugefügt' : 
-                     (zeile.symbol === '-' ? 'Gelöscht' : 
-                     (zeile.symbol === '!' ? 'Geändert' : 'Unverändert'));
+    symbolTd.innerHTML = zeile.symbol || '';
+    const ariaLabel = zeile.symbol && zeile.symbol.includes('fa-plus') ? 'Hinzugefügt' : 
+                     (zeile.symbol && zeile.symbol.includes('fa-minus') ? 'Gelöscht' : 
+                     (zeile.symbol && zeile.symbol.includes('fa-exclamation') ? 'Geändert' : 'Unverändert'));
     symbolTd.setAttribute('aria-label', ariaLabel);
     tr.appendChild(symbolTd);