From 2fd39a9d189f62957717376bd78dad868f5525a3 Mon Sep 17 00:00:00 2001
From: Johann Hoffmann <ma0646@technikum-wien.at>
Date: Wed, 13 Nov 2024 15:19:42 +0100
Subject: [PATCH] defined active color variable for lvl 2 buttons and use in
 css class fhc-active for language Buttons. It is yet another shade of grey.

---
 public/css/Cis4/Cis.css               |  5 ++++
 public/js/components/Cis/Menu.js      | 37 ++++++++++++++++++++++++---
 public/js/composables/CalendarDate.js |  1 -
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css
index 5c98ccb1d..d7512f3a1 100644
--- a/public/css/Cis4/Cis.css
+++ b/public/css/Cis4/Cis.css
@@ -19,6 +19,7 @@ html {
   --fhc-cis-menu-lvl-2-color: #fff;
   --fhc-cis-menu-lvl-2-bg-hover: #2c3136;
   --fhc-cis-menu-lvl-2-color-hover: #fff;
+  --fhc-cis-menu-lvl-2-color-active: #292b2a;
   --fhc-cis-menu-lvl-3-bg: #72777A;
   --fhc-cis-menu-lvl-3-color: #fff;
   --fhc-cis-menu-lvl-3-bg-hover: #616568;
@@ -233,6 +234,10 @@ html {
   display: flex;
 }
 
+.fhc-active {
+  background-color: var(--fhc-cis-menu-lvl-2-color-active) !important;
+}
+
 /* desktop */
 @media (min-width: 992px) {
   body {
diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index d07c50e95..b3547e30a 100644
--- a/public/js/components/Cis/Menu.js
+++ b/public/js/components/Cis/Menu.js
@@ -48,7 +48,25 @@ export default {
 			return FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
 		}
 	},
-	methods:{
+	methods: {
+		getLanguageButtonClass(lang) {
+			let classString = 'btn btn-level-2 rounded-0'
+			const langCookie = (function(lang) {
+				const cookieString = document.cookie;
+				const cookies = cookieString.split('; ');
+
+				for (let cookie of cookies) {
+					const [key, value] = cookie.split('=');
+					if (key === lang) {
+						return decodeURIComponent(value);
+					}
+				}
+
+				return null; // Return null if the cookie is not found
+			})('sprache');
+			if(langCookie === lang) classString += ' fhc-active';
+			return classString
+		},
 		toggleCollapsibles(target){
 			switch(target){
 				case 'settings':
@@ -77,6 +95,17 @@ export default {
 		},
 		handleChangeLanguage(lang) {
 			this.$p.setLanguage(lang, this.$fhcApi)
+			const gerButton = this.$refs.ger
+			const engButton = this.$refs.eng
+			
+			if(lang === 'German') {
+				gerButton.classList.add('fhc-active')
+				engButton.classList.remove('fhc-active')
+			} else if(lang === 'English') {
+				engButton.classList.add('fhc-active')
+				gerButton.classList.remove('fhc-active')
+			}
+			
 		}
 	},
 	mounted(){
@@ -105,8 +134,10 @@ export default {
 		<ul ref="navUserDropdown" @[\`show.bs.collapse\`]="toggleCollapsibles('navUserDropdown')" id="nav-user-menu" class="top-100 end-0 collapse list-unstyled" aria-labelledby="nav-user-btn">
 			<li class="btn-level-2"><a class="btn btn-level-2 rounded-0 d-block" :href="site_url + '/Cis/Profil'" id="menu-profil">Profil</a></li>
 			<li class="fhc-languages btn-level-2" style="text-align: center;">
-				<a class="btn btn-level-2 rounded-0" href="#" @click="handleChangeLanguage('German')">Deutsch</a>
-				<a class="btn btn-level-2 rounded-0" href="#" @click="handleChangeLanguage('English')">English</a>
+				<div class="btn-group">
+					<a :class="getLanguageButtonClass('German')" ref="ger" href="#" @click="handleChangeLanguage('German')">Deutsch</a>
+					<a :class="getLanguageButtonClass('English')" ref="eng" href="#" @click="handleChangeLanguage('English')">English</a>
+				</div>
 			</li>
 			<li class="btn-level-2"><hr class="dropdown-divider p-0 "></li>
 			<li><a class="btn btn-level-2 rounded-0 d-block" :href="logoutUrl">Logout</a></li>
diff --git a/public/js/composables/CalendarDate.js b/public/js/composables/CalendarDate.js
index 09bae1f21..95560fbfd 100644
--- a/public/js/composables/CalendarDate.js
+++ b/public/js/composables/CalendarDate.js
@@ -75,7 +75,6 @@ class CalendarDate {
 			days[i] = new Date(this.y, this.m, this.d)
 			days[i].setDate(this.d -(date.getDay()+7-this.weekStart)%7 + i)
 		}
-		console.log('wholeWorkWeek', days)
 		return days
 	}
 	get cdLastDayOfWeek() {