From 61fd50bb29a2d2679ec760505fe638763db9362d Mon Sep 17 00:00:00 2001
From: Torsten Schulz <tsschulz@gmx.net>
Date: Thu, 12 Sep 2024 18:22:25 +0200
Subject: [PATCH] Changed style, fixed schedulle view

---
 frontend/src/App.vue                | 6 +++---
 frontend/src/assets/css/main.scss   | 8 +++++++-
 frontend/src/views/ScheduleView.vue | 8 ++++----
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 952b443..47019d8 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -79,11 +79,11 @@ export default {
   width: 100%;
 }
 .navigation {
-  width: 13em;
-  background-color: #e0e0e0;
+width: 13em;
+  background-color: #e0f0e8;
   display: flex;
   flex-direction: column;
-  padding: 0.5rem;
+  padding: .5rem;
 }
 .content {
   flex: 1;
diff --git a/frontend/src/assets/css/main.scss b/frontend/src/assets/css/main.scss
index 5a47a95..5057895 100644
--- a/frontend/src/assets/css/main.scss
+++ b/frontend/src/assets/css/main.scss
@@ -9,10 +9,16 @@ body {
     flex-direction: column;
 }
 h1 {
-    border-bottom: 1px solid #000000;
     margin: 0;
     height: 3rem;
     padding: 0 0.5rem;
+    text-align: center;
+    background-color: #f0f0f0;
+    color: #4CAF50;
+    text-shadow: 2px 2px 3px #a0a0a0;
+}
+h2 {
+    margin: 0;
 }
 #app {
     flex: 1;
diff --git a/frontend/src/views/ScheduleView.vue b/frontend/src/views/ScheduleView.vue
index 5df81b9..ff583c5 100644
--- a/frontend/src/views/ScheduleView.vue
+++ b/frontend/src/views/ScheduleView.vue
@@ -9,7 +9,7 @@
         </div>
         <div class="output">
             <ul>
-                <li v-for="league in leagues" :key="league" @click="loadMatchesForLeague(league.id)">{{ league.name }}</li>
+                <li v-for="league in leagues" :key="league" @click="loadMatchesForLeague(league.id, league.name)">{{ league.name }}</li>
             </ul>
             <div class="flex-item">
                 <div v-if="matches.length > 0">
@@ -114,10 +114,10 @@ export default {
                 console.error('Failed to load leagues:', error);
             }
         },
-        async loadMatchesForLeague(league) {
-            this.selectedLeague = league;
+        async loadMatchesForLeague(leagueId, leagueName) {
+            this.selectedLeague = leagueName;
             try {
-                const response = await apiClient.get(`/matches/leagues/${this.currentClub}/matches/${league}`);
+                const response = await apiClient.get(`/matches/leagues/${this.currentClub}/matches/${leagueId}`);
                 this.matches = response.data;
             } catch (error) {
                 console.error('Failed to load matches:', error);