From 24740d055e5c00398d499295d88a14aeadad7dd6 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Tue, 26 Nov 2024 16:26:29 +0100
Subject: [PATCH] feature(Sprache/Phrasen aendern): creates a Cis Sprachen
 component that lists all available Sprachen from the database and lets the
 user change the currently active language and persist it in the database

---
 .../controllers/api/frontend/v1/Phrasen.php   | 23 +++++++-
 public/css/Cis4/Cis.css                       |  7 ++-
 public/js/api/phrasen.js                      |  6 +++
 public/js/components/Cis/Menu.js              |  5 +-
 public/js/components/Cis/Sprachen.js          | 53 +++++++++++++++++++
 5 files changed, 91 insertions(+), 3 deletions(-)
 create mode 100644 public/js/components/Cis/Sprachen.js

diff --git a/application/controllers/api/frontend/v1/Phrasen.php b/application/controllers/api/frontend/v1/Phrasen.php
index 317f515e0..3509e6630 100644
--- a/application/controllers/api/frontend/v1/Phrasen.php
+++ b/application/controllers/api/frontend/v1/Phrasen.php
@@ -29,7 +29,9 @@ class Phrasen extends FHCAPI_Controller
 	{
 		parent::__construct([
 			'loadModule' => self::PERM_ANONYMOUS,
-			'setLanguage' => self::PERM_ANONYMOUS
+			'setLanguage' => self::PERM_ANONYMOUS,
+			'getLanguage' => self::PERM_ANONYMOUS,
+			'getAllLanguages' => self::PERM_ANONYMOUS,
 		]);
 
 		$this->load->helper('hlp_language');
@@ -60,4 +62,23 @@ class Phrasen extends FHCAPI_Controller
 		$phrases = $this->p->setPhrases($categories, $language);
 		$this->terminateWithSuccess($phrases);
 	}
+
+	// gets the langauge of the currently logged in user session and otherwhise the system language
+	public function getLanguage()
+	{
+		$lang = getUserLanguage();
+		$this->terminateWithSuccess($lang);
+	}
+
+	// gets all languages that are set as active in the database
+	public function getAllLanguages()
+	{
+		$langs = getDBActiveLanguages();
+		$langs = $this->getDataOrTerminateWithError($langs);
+		$langs = array_map(function($lang){
+			return $lang->sprache;
+		}, $langs);
+		$this->terminateWithSuccess($langs);
+	}
+
 }
\ No newline at end of file
diff --git a/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css
index 2762e2235..82575b3a5 100644
--- a/public/css/Cis4/Cis.css
+++ b/public/css/Cis4/Cis.css
@@ -478,7 +478,7 @@ html {
 }
 
 .fhc-entry:hover{
-	background-color:#0088d6 !important;
+	background-color:#00649C !important;
 	color:white !important;
 }
 
@@ -487,6 +487,11 @@ html {
 	transition-duration: 0.3s,0.2s;
 	transition-timing-function: ease-out,ease-out;
 }
+
+[selected].fhc-entry {
+	background-color: #005585 !important;
+}
+
 @media screen and ( max-width: 767px ) {
 	#nav-search  {
 		position: static;
diff --git a/public/js/api/phrasen.js b/public/js/api/phrasen.js
index c5994ea9b..769686447 100644
--- a/public/js/api/phrasen.js
+++ b/public/js/api/phrasen.js
@@ -22,5 +22,11 @@ export default {
 	setLanguage(categories,language) {
 		const payload = {categories, language}
 		return this.$fhcApi.post('/api/frontend/v1/phrasen/setLanguage', payload);
+	},
+	getLanguage() {
+		return this.$fhcApi.get('/api/frontend/v1/phrasen/getLanguage', {});
+	},
+	getActiveDbLanguages() {
+		return this.$fhcApi.get('/api/frontend/v1/phrasen/getAllLanguages', {});
 	}
 };
\ No newline at end of file
diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index 632967085..8d5189c7f 100644
--- a/public/js/components/Cis/Menu.js
+++ b/public/js/components/Cis/Menu.js
@@ -1,10 +1,12 @@
 import CisMenuEntry from "./Menu/Entry.js";
 import FhcSearchbar from "../searchbar/searchbar.js";
+import CisSprachen from "./Sprachen.js"
 
 export default {
     components: {
         CisMenuEntry,
-        FhcSearchbar
+        FhcSearchbar,
+		CisSprachen,
     },
     props: {
 		menu: Array,
@@ -151,6 +153,7 @@ export default {
 				</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" />
diff --git a/public/js/components/Cis/Sprachen.js b/public/js/components/Cis/Sprachen.js
new file mode 100644
index 000000000..5982f318d
--- /dev/null
+++ b/public/js/components/Cis/Sprachen.js
@@ -0,0 +1,53 @@
+export default {
+	data(){
+		return {
+			allActiveLanguages: null,
+		}
+	}, 
+	methods:{
+		changeLanguage: async function(lang){
+			// only change the language if it is either German or English
+			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();
+			}
+			
+		}
+	},
+	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="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>
+		</div>
+	</div>
+	`,
+};
\ No newline at end of file