refactor(components/Cis/Sprachen.js): refactors the Sprachen component with different styles and stores the user_langauge in the global properties of the Vue application by managing a reactive state in the phrasen plugin

public/css/Cis4/Cis.css

@@ -482,6 +482,14 @@ html {
 	color:white !important;
 }
 
+.fhc-entry.btn:focus {
+	box-shadow: none !important;
+}
+
+.fhc-entry.btn {
+	border-radius: 0 !important;
+}
+
 .fhc-entry {
 	transition-property: background,color;
 	transition-duration: 0.3s,0.2s;

public/js/components/Cis/Menu.js

@@ -51,24 +51,6 @@ export default {
 		}
 	},
 	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':
@@ -95,20 +77,6 @@ export default {
 		setActiveEntry(content_id){
 			this.activeEntry = content_id;
 		},
-		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(){
 		this.entries = this.menu;
@@ -135,25 +103,23 @@ export default {
 		</button>
 		<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;">
-				<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 class="btn-level-2">
+				<cis-sprachen></cis-sprachen>
 			</li>
-			<li class="btn-level-2"><hr class="dropdown-divider p-0 "></li>
+			<li class="btn-level-2"><hr class="dropdown-divider m-0 "></li>
 			<li><a class="btn btn-level-2 rounded-0 d-block" :href="logoutUrl">Logout</a></li>
 		</ul>
 	</div>
     <nav id="nav-main" class="offcanvas offcanvas-start bg-dark" tabindex="-1" aria-labelledby="nav-main-btn" data-bs-backdrop="false">
 		<div id="nav-main-sticky">
+			<cis-sprachen></cis-sprachen>
 			<div id="nav-main-toggle" class="position-static d-none d-lg-block bg-dark">
 				<button type="button" class="btn bg-dark text-light rounded-0 p-1 d-flex align-items-center" data-bs-toggle="collapse" data-bs-target="#nav-main-menu" aria-expanded="true" aria-controls="nav-main-menu">
 					<i class="fa fa-arrow-circle-left"></i>
 				</button>
 			</div>
 			<div class="offcanvas-body p-0">
-				<cis-sprachen :sprachenChangeFunction="handleChangeLanguage" ></cis-sprachen>
+				
 				<div id="nav-main-menu" class="collapse collapse-horizontal show">
 					<div>
 						<cis-menu-entry :highestMatchingUrlCount="highestMatchingUrlCount" :activeContent="activeEntry" v-for="entry in entries" :key="entry.content_id" :entry="entry" />

public/js/components/Cis/Sprachen.js

@@ -5,48 +5,26 @@ export default {
 		}
 	}, 
 	methods:{
-		changeLanguage: async function(lang){
-			// only change the language if it is either German or English
+		changeLanguage: function(lang){
 			if(this.allActiveLanguages.some(l => l === lang))
 			{
-				await this.$p.setLanguage(lang, this.$fhcApi);
-				// reloads the page after changing language to have an updated FHC_JS_DATA_STORAGE_OBJECT user_language value
-				window.location.reload();
+				this.$p.setLanguage(lang, this.$fhcApi);
 			}
-			
-		}
-	},
-	computed:{
-		activeLanguage(){
-			return FHC_JS_DATA_STORAGE_OBJECT.user_language ?? null;
 		},
 	},
 	mounted(){
-		//TODO: this method should be part of the FHC_JS_DATA_STORAGE_OBJECT, 
-		//TODO: at the moment it always called when a refresh occurs, which is whenever a new Menu Punkt is selected
 		this.$fhcApi.factory.phrasen.getActiveDbLanguages()
 			.then(res => res.data)
 			.then(
 				(langs) => {
 					this.allActiveLanguages = langs;
 				}
-			);
-		/* function to get the active language 
-		this.$fhcApi.factory.phrasen.getLanguage()
-			.then(res => res.data)
-			.then(
-				(lang)=>
-				{
-					this.activeLanguage = lang;
-				}
-			); */
+		);
 	},
 	template:/*html*/`
-	<div class="container text-white">
+	<div class="container flex-shrink-0">
 		<div class="row justify-content-center align-items-center">
-			<div v-for="lang in allActiveLanguages" class="col fhc-entry" :selected="activeLanguage==lang?'':null">
-				<div role="button" @click.prevent="changeLanguage(lang)" class="text-center w-100">{{lang}}</div>
-			</div>
+			<button v-for="lang in allActiveLanguages" @click.prevent="changeLanguage(lang)" class="col text-white fhc-entry btn text-center w-100" :selected="$p.user_language.value==lang?'':null">{{lang}}</button>
 		</div>
 	</div>
 	`,

public/js/plugin/Phrasen.js

@@ -1,6 +1,7 @@
 import FhcApi from './FhcApi.js';
 
 const categories = Vue.reactive({});
+const user_language = Vue.ref(FHC_JS_DATA_STORAGE_OBJECT.user_language);
 const loadingModules = {};
 let reload = false;
 
@@ -30,6 +31,9 @@ const phrasen = {
 				categories[row.category][row.phrase] = row.text
 			})
 
+			// update the reactive data that holds the current active user_language
+			user_language.value = language;
+
 			return res
 		})
 	},
@@ -81,6 +85,7 @@ export default {
 			t: phrasen.t,
 			loadCategory: cat => phrasen.loadCategory.call(app, cat),
 			setLanguage: phrasen.setLanguage,
+			user_language: user_language,
 			t_ref: phrasen.t_ref
 		};
 		app.provide('$p', app.config.globalProperties.$p);