fix view

app/views/entries/index.html.erb

@@ -1,3 +1,37 @@
+<style>
+    /* Farbige Unterscheidung der Ausbildungstypen in der Kombinationsübersicht */
+    #combinationOverviewTable tbody tr.type-propaedeutikum {
+        --bs-table-bg: rgba(13, 110, 253, 0.06);
+        --bs-table-striped-bg: rgba(13, 110, 253, 0.10);
+    }
+
+    #combinationOverviewTable tbody tr.type-fachspezifikum {
+        --bs-table-bg: rgba(25, 135, 84, 0.06);
+        --bs-table-striped-bg: rgba(25, 135, 84, 0.10);
+    }
+
+    #combinationOverviewTable tbody tr.type-mediation {
+        --bs-table-bg: rgba(253, 126, 20, 0.07);
+        --bs-table-striped-bg: rgba(253, 126, 20, 0.11);
+    }
+
+    #combinationOverviewTable tbody tr.type-propaedeutikum > td:first-child {
+        border-left: 4px solid #0d6efd;
+    }
+
+    #combinationOverviewTable tbody tr.type-fachspezifikum > td:first-child {
+        border-left: 4px solid #198754;
+    }
+
+    #combinationOverviewTable tbody tr.type-mediation > td:first-child {
+        border-left: 4px solid #fd7e14;
+    }
+
+    #combinationOverviewTable tbody tr:hover {
+        filter: brightness(0.98);
+    }
+</style>
+
 <h1 class="mb-4">Meine Einträge</h1>
 
 <!-- 🧭 Tabs-Navigation -->
@@ -22,16 +56,30 @@
       <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
         <h4 class="mb-0">📊 Übersicht je Kombination</h4>
 
-        <div class="form-check form-switch">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            role="switch"
-            id="showAllCombinations"
-          >
-          <label class="form-check-label" for="showAllCombinations">
-            Erledigte anzeigen
-          </label>
+        <div class="d-flex flex-wrap align-items-center gap-3">
+          <div class="form-check form-switch mb-0">
+            <input
+              class="form-check-input"
+              type="checkbox"
+              role="switch"
+              id="showZeroPercentCombinations"
+            >
+            <label class="form-check-label" for="showZeroPercentCombinations">
+              0 % anzeigen
+            </label>
+          </div>
+
+          <div class="form-check form-switch mb-0">
+            <input
+              class="form-check-input"
+              type="checkbox"
+              role="switch"
+              id="showAllCombinations"
+            >
+            <label class="form-check-label" for="showAllCombinations">
+              Erledigte anzeigen
+            </label>
+          </div>
         </div>
       </div>
 
@@ -74,9 +122,32 @@
                 has_remaining = remaining.positive?
               %>
 
+              <% percent = @completion_percent_by_typ_art[[typ, art]] %>
+              <% zero_percent = percent.to_i.zero? && soll.positive? %>
+
+              <%
+                type_class =
+                  case typ
+                    when "propädeutikum"
+                      "type-propaedeutikum"
+                    when "fachspezifikum"
+                      "type-fachspezifikum"
+                    when "mediation"
+                      "type-mediation"
+                    else
+                      ""
+                  end
+
+                row_classes = [
+                                type_class,
+                                ("d-none" unless has_remaining && !zero_percent)
+                              ].compact.reject(&:blank?).join(" ")
+              %>
+
               <tr
                 data-has-remaining="<%= has_remaining %>"
-                class="<%= 'd-none' unless has_remaining %>"
+                data-zero-percent="<%= zero_percent %>"
+                class="<%= row_classes %>"
               >
                 <td><%= typ.capitalize %></td>
 
@@ -117,7 +188,6 @@
                 </td>
 
                 <td>
-                  <% percent = @completion_percent_by_typ_art[[typ, art]] %>
                   <%= percent.nil? ? "—" : "#{percent} %" %>
                 </td>
               </tr>
@@ -129,7 +199,7 @@
       </div>
 
       <div class="small text-muted mt-2">
-        Standardmäßig werden nur Einträge angezeigt, bei denen noch Stunden offen sind.
+        Standardmäßig werden nur bereits begonnene Einträge angezeigt, bei denen noch Stunden offen sind.
       </div>
     </div>
   </div>
@@ -793,30 +863,57 @@
 <script>
     (() => {
         const initCombinationOverview = () => {
-            const checkbox = document.getElementById("showAllCombinations");
-            const table = document.getElementById("combinationOverviewTable");
+            const showCompletedCheckbox =
+                document.getElementById("showAllCombinations");
 
-            if (!checkbox || !table) return;
+            const showZeroPercentCheckbox =
+                document.getElementById("showZeroPercentCombinations");
+
+            const table =
+                document.getElementById("combinationOverviewTable");
+
+            if (
+                !showCompletedCheckbox ||
+                !showZeroPercentCheckbox ||
+                !table
+            ) return;
 
             const updateVisibility = () => {
-                const showAll = checkbox.checked;
+                const showCompleted =
+                    showCompletedCheckbox.checked;
+
+                const showZeroPercent =
+                    showZeroPercentCheckbox.checked;
 
                 table
-                    .querySelectorAll("tbody tr[data-has-remaining]")
+                    .querySelectorAll(
+                        "tbody tr[data-has-remaining][data-zero-percent]"
+                    )
                     .forEach(row => {
                         const hasRemaining =
                             row.dataset.hasRemaining === "true";
 
+                        const zeroPercent =
+                            row.dataset.zeroPercent === "true";
+
+                        const hiddenBecauseCompleted =
+                            !hasRemaining && !showCompleted;
+
+                        const hiddenBecauseZeroPercent =
+                            zeroPercent && !showZeroPercent;
+
                         row.classList.toggle(
                             "d-none",
-                            !showAll && !hasRemaining
+                            hiddenBecauseCompleted ||
+                            hiddenBecauseZeroPercent
                         );
                     });
             };
 
-            // Assignment statt addEventListener verhindert doppelte Handler
-            // und funktioniert auch nach einem Turbo-Cache/Restore sauber.
-            checkbox.onchange = updateVisibility;
+            // Assignment statt addEventListener:
+            // robust bei Turbo Cache/Restore und ohne doppelte Handler.
+            showCompletedCheckbox.onchange = updateVisibility;
+            showZeroPercentCheckbox.onchange = updateVisibility;
 
             updateVisibility();
         };