From c18b70c6f6bf55ec12599d36f8932fdad1af116f Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 24 Oct 2025 15:56:59 +0200
Subject: [PATCH] Update styles and enhance clipboard functionality in
 ScheduleView

Modified main.scss to adjust table header styles, changing font weight to 600 and text transformation to uppercase for improved readability. In ScheduleView.vue, updated clipboard copy functionality to provide user feedback with a visual confirmation when copying codes and PINs, enhancing user experience. The feedback mechanism now includes style changes for better visibility and a reset after a brief display period.
---
 frontend/src/assets/css/main.scss   |  4 +--
 frontend/src/views/ScheduleView.vue | 54 +++++++++++++++++++++--------
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/frontend/src/assets/css/main.scss b/frontend/src/assets/css/main.scss
index d9d6ae8..39afe9c 100644
--- a/frontend/src/assets/css/main.scss
+++ b/frontend/src/assets/css/main.scss
@@ -369,8 +369,8 @@ th, td {
 th {
   background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
   color: white;
-  font-weight: 700;
-  text-transform: none;
+  font-weight: 600;
+  text-transform: uppercase;
   font-size: 0.75rem;
   letter-spacing: 0.4px;
 }
diff --git a/frontend/src/views/ScheduleView.vue b/frontend/src/views/ScheduleView.vue
index d428b8b..b08da72 100644
--- a/frontend/src/views/ScheduleView.vue
+++ b/frontend/src/views/ScheduleView.vue
@@ -82,25 +82,25 @@
                                     {{ match.leagueDetails?.name || 'N/A' }}</td>
                                 <td class="code-cell">
                                     <span v-if="match.code && selectedLeague && selectedLeague !== ''">
-                                        <button @click="openMatchReport(match)" class="nuscore-link"
+                                        <button @click.stop="openMatchReport(match)" class="nuscore-link"
                                             title="Spielberichtsbogen öffnen">📊</button>
-                                        <span class="code-value clickable" @click="copyToClipboard(match.code, 'Code')"
+                                        <span class="code-value clickable" @click.stop="copyToClipboard(match.code, 'Code', $event)"
                                             :title="'Code kopieren: ' + match.code">{{ match.code }}</span>
                                     </span>
                                     <span v-else-if="match.code" class="code-value clickable"
-                                        @click="copyToClipboard(match.code, 'Code')"
+                                        @click.stop="copyToClipboard(match.code, 'Code', $event)"
                                         :title="'Code kopieren: ' + match.code">{{ match.code }}</span>
                                     <span v-else class="no-data">-</span>
                                 </td>
                                 <td class="pin-cell">
                                     <span v-if="match.homePin" class="pin-value clickable"
-                                        @click="copyToClipboard(match.homePin, 'Heim-PIN')"
+                                        @click.stop="copyToClipboard(match.homePin, 'Heim-PIN', $event)"
                                         :title="'Heim-PIN kopieren: ' + match.homePin">{{ match.homePin }}</span>
                                     <span v-else class="no-data">-</span>
                                 </td>
                                 <td class="pin-cell">
                                     <span v-if="match.guestPin" class="pin-value clickable"
-                                        @click="copyToClipboard(match.guestPin, 'Gast-PIN')"
+                                        @click.stop="copyToClipboard(match.guestPin, 'Gast-PIN', $event)"
                                         :title="'Gast-PIN kopieren: ' + match.guestPin">{{ match.guestPin }}</span>
                                     <span v-else class="no-data">-</span>
                                 </td>
@@ -698,19 +698,11 @@ export default {
 
             return ''; // Keine besondere Farbe
         },
-        async copyToClipboard(text, type) {
+        async copyToClipboard(text, type, event) {
             try {
                 await navigator.clipboard.writeText(text);
                 // Zeige eine kurze Bestätigung
-                const originalText = event.target.textContent;
-                event.target.textContent = '✓';
-                event.target.style.color = '#4CAF50';
-
-                setTimeout(() => {
-                    event.target.textContent = originalText;
-                    event.target.style.color = '';
-                }, 1000);
-
+                this.showCopyFeedback(event.target, text);
             } catch (err) {
                 console.error('Fehler beim Kopieren:', err);
                 // Fallback für ältere Browser
@@ -720,8 +712,40 @@ export default {
                 textArea.select();
                 document.execCommand('copy');
                 document.body.removeChild(textArea);
+                
+                // Auch für Fallback eine Bestätigung zeigen
+                this.showCopyFeedback(event.target, text);
             }
         },
+        
+        showCopyFeedback(element, originalText) {
+            // Speichere die ursprünglichen Styles
+            const originalStyles = {
+                textContent: element.textContent,
+                color: element.style.color,
+                backgroundColor: element.style.backgroundColor,
+                borderColor: element.style.borderColor,
+                fontWeight: element.style.fontWeight
+            };
+            
+            // Ändere das Element zu einem grünen Häkchen
+            element.textContent = '✓';
+            element.style.color = '#4CAF50';
+            element.style.backgroundColor = '#e8f5e8';
+            element.style.borderColor = '#4CAF50';
+            element.style.fontWeight = 'bold';
+            element.style.fontSize = '1.2em';
+            
+            // Nach 1.5 Sekunden zurücksetzen
+            setTimeout(() => {
+                element.textContent = originalStyles.textContent;
+                element.style.color = originalStyles.color;
+                element.style.backgroundColor = originalStyles.backgroundColor;
+                element.style.borderColor = originalStyles.borderColor;
+                element.style.fontWeight = originalStyles.fontWeight;
+                element.style.fontSize = '';
+            }, 1500);
+        },
 
         openMatchReport(match) {
             const title = `${match.homeTeam?.name || 'N/A'} vs ${match.guestTeam?.name || 'N/A'} - ${this.selectedLeague}`;