From 8069946154ce5e3b1d29cd688f75332513e575fe Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Sat, 30 Aug 2025 23:39:28 +0200
Subject: [PATCH] =?UTF-8?q?Aktualisiert=20die=20Mitgliederansicht=20in=20M?=
 =?UTF-8?q?embersView.vue,=20um=20Geschlechtssymbole=20und=20-bezeichnunge?=
 =?UTF-8?q?n=20anzuzeigen.=20Entfernt=20die=20Geschlechtsspalte=20und=20im?=
 =?UTF-8?q?plementiert=20neue=20Methoden=20zur=20Darstellung=20von=20Gesch?=
 =?UTF-8?q?lecht.=20F=C3=BCgt=20CSS-Klassen=20f=C3=BCr=20die=20Geschlechts?=
 =?UTF-8?q?darstellung=20hinzu,=20um=20die=20Benutzeroberfl=C3=A4che=20zu?=
 =?UTF-8?q?=20verbessern.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/MembersView.vue | 43 +++++++++++++++++++++++++++---
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/MembersView.vue b/frontend/src/views/MembersView.vue
index b030e08..a609290 100644
--- a/frontend/src/views/MembersView.vue
+++ b/frontend/src/views/MembersView.vue
@@ -60,7 +60,6 @@
                         <th>Geburtsdatum</th>
                         <th>Telefon-Nr.</th>
                         <th>Email-Adresse</th>
-                        <th>Geschlecht</th>
                         <th></th>
                     </tr>
                 </thead>
@@ -74,12 +73,16 @@
                                 <span>{{ member.picsInInternetAllowed ? '✓' : '' }}</span>
                             </td>
                             <td>{{ member.testMembership ? '*' : '' }}</td>
-                            <td>{{ member.lastName }}, {{ member.firstName }}</td>
+                            <td>
+                                <span class="gender-symbol" :class="'gender-' + (member.gender || 'unknown')" :title="labelGender(member.gender)">{{ genderSymbol(member.gender) }}</span>
+                                <span class="gender-name" :class="'gender-' + (member.gender || 'unknown')">
+                                    {{ member.lastName }}, {{ member.firstName }}
+                                </span>
+                            </td>
                             <td>{{ member.street }}, {{ member.city }}</td>
                             <td>{{ getFormattedBirthdate(member.birthDate) }}</td>
                             <td>{{ member.phone }}</td>
                             <td>{{ member.email }}</td>
-                            <td>{{ member.gender || 'unknown' }}</td>
                             <td>
                                 <button @click.stop="openNotesModal(member)">Notizen</button>
                             </td>
@@ -354,6 +357,20 @@ export default {
             const date = new Date(birthDate);
             return `${String(date.getDate()).padStart(2, '0')}.${String(date.getMonth() + 1).padStart(2, '0')}.${date.getFullYear()}`;
         },
+        labelGender(g) {
+            const v = (g || 'unknown');
+            if (v === 'male') return 'Männlich';
+            if (v === 'female') return 'Weiblich';
+            if (v === 'diverse') return 'Divers';
+            return 'Unbekannt';
+        },
+        genderSymbol(g) {
+            const v = (g || 'unknown');
+            if (v === 'male') return '♂';
+            if (v === 'female') return '♀';
+            if (v === 'diverse') return '⚧';
+            return '';
+        }
     }
 }
 </script>
@@ -448,4 +465,24 @@ table td {
     text-decoration: none;
     cursor: pointer;
 }
+
+.badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 999px;
+    font-size: 0.85rem;
+    border: 1px solid #ddd;
+    background: #f5f5f5;
+}
+.gender-symbol, .gender-name { background: transparent; border: none; }
+
+.gender-name.gender-male { color: #1a73e8; }
+.gender-name.gender-female { color: #d81b60; }
+.gender-name.gender-diverse { color: #6a1b9a; }
+.gender-name.gender-unknown { color: #444; }
+.gender-symbol.gender-male { color: #1a73e8; }
+.gender-symbol.gender-female { color: #d81b60; }
+.gender-symbol.gender-diverse { color: #6a1b9a; }
+.gender-symbol.gender-unknown { color: #444; }
+.gender-symbol { margin-right: .35rem; opacity: .9; font-size: 1.05em; display: inline-block; width: 1.1em; text-align: center; }
 </style>