From 114562909f584adfaffe7250f15279deaa9ed8a9 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Thu, 19 Dec 2024 12:12:13 +0100
Subject: [PATCH] update(Calendar.js): uses the user_language for the different
 day formattings in the calendar views

---
 public/js/apps/Cis/Stundenplan.js           |  2 ++
 public/js/components/Calendar/Day/Page.js   | 16 +++++++++++-----
 public/js/components/Calendar/Month.js      |  2 +-
 public/js/components/Calendar/Month/Page.js | 10 +++++++++-
 public/js/components/Calendar/Months.js     |  2 +-
 public/js/components/Calendar/Week.js       |  2 +-
 public/js/components/Calendar/Week/Page.js  | 15 +++++++++++++--
 public/js/composables/CalendarDate.js       |  4 ++--
 public/js/plugin/Phrasen.js                 | 10 ++++++++++
 9 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/public/js/apps/Cis/Stundenplan.js b/public/js/apps/Cis/Stundenplan.js
index 1facea322..198e8a765 100644
--- a/public/js/apps/Cis/Stundenplan.js
+++ b/public/js/apps/Cis/Stundenplan.js
@@ -4,6 +4,7 @@ import CalendarDate from "../../composables/CalendarDate.js";
 import LvModal from "../../components/Cis/Mylv/LvModal.js";
 import LvInfo from "../../components/Cis/Mylv/LvInfo.js"
 import LvMenu from "../../components/Cis/Mylv/LvMenu.js"
+import Json from "../../helpers/Json.js"
 
 
 const app = Vue.createApp({
@@ -162,4 +163,5 @@ const app = Vue.createApp({
 	`
 });
 app.use(Phrasen);
+app.component('json', Json);
 app.mount('#content');
\ No newline at end of file
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index b4d94919f..61d748374 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -99,6 +99,13 @@ export default {
 				top: 0,
 			}
 		},
+		dayText(){
+			if(!this.size || !this.day)return {};
+			return {
+				tag: this.day.toLocaleString(this.$p.user_language_locale_identifier.value, { weekday: this.size < 2 ? 'narrow' : (this.size < 3 ? 'short' : 'long') }),
+				datum: this.day.toLocaleString(this.$p.user_language_locale_identifier.value, [{ day: 'numeric', month: 'numeric' }, { day: 'numeric', month: 'numeric' }, { day: 'numeric', month: 'numeric' }, { dateStyle: 'short' }][this.size]),
+			}
+		},
 		dayGridStyle() {
 			return {
 				'grid-template-columns': '1 1fr',
@@ -289,15 +296,15 @@ export default {
 		const container = document.getElementById("calendarContainer")
 		if(container) container.style.overflow = 'hidden'
 	},
-	template: `
+	template: /*html*/`
 	<div class="fhc-calendar-day-page h-100">
 		<div class="row m-0 h-100">
 			<div class="col-12 col-xl-6 p-0 h-100">
 				<div class="d-flex flex-column h-100">
 					<div ref="header" class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="pageHeaderStyle">
 						<div type="button" class="flex-grow-1" :title="day.toLocaleString(undefined, {dateStyle:'short'})" @click.prevent="changeToMonth(day)">
-							<div class="fw-bold">{{day.toLocaleString(undefined, {weekday: size < 2 ? 'narrow' : (size < 3 ? 'short' : 'long')})}}</div>
-							<a href="#" class="small text-secondary text-decoration-none" >{{day.toLocaleString(undefined, [{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{dateStyle:'short'}][this.size])}}</a>
+							<div class="fw-bold">{{dayText.tag}}</div>
+							<a href="#" class="small text-secondary text-decoration-none" >{{dayText.datum}}</a>
 						</div>
 					</div>
 					<div id="scroll g-0" style="height: 100%; overflow: scroll;">
@@ -310,7 +317,6 @@ export default {
 									<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
 								</div>
 							</Transition>
-							
 							<div>
 								<h1 v-if="noEventsCondition" class="m-0 text-secondary" ref="noEventsText" :style="noLvStyle">Keine Lehrveranstaltungen</h1>
 								<div :class="{'fhc-calendar-no-events-overlay':noEventsCondition, 'events':true}">
@@ -342,7 +348,7 @@ export default {
 				</div>
 			</div>
 			<div class="d-xl-block col-xl-6 p-0">
-				<div style="z-index:0" class="p-2 sticky-top d-flex justify-content-center align-items-center flex-column">
+				<div style="z-index:0" class="p-4 sticky-top d-flex justify-content-center align-items-center flex-column">
 					<div style="max-height: calc(var(--fhc-calendar-pane-height)); overflow-y:auto;" class="w-100">
 						<template v-if="selectedEvent && lvMenu">
 							<slot name="pageMobilContent" :lvMenu="lvMenu" >
diff --git a/public/js/components/Calendar/Month.js b/public/js/components/Calendar/Month.js
index 70d457bb7..65ac83a72 100644
--- a/public/js/components/Calendar/Month.js
+++ b/public/js/components/Calendar/Month.js
@@ -17,7 +17,7 @@ export default {
 	},
 	computed: {
 		title() {
-			return this.focusDate.format({month: ['short','long','long','long'][this.size], year: 'numeric'});
+			return this.focusDate.format({month: ['short','long','long','long'][this.size], year: 'numeric'}, this.$p.user_language_locale_identifier.value);
 		}
 	},
 	methods: {
diff --git a/public/js/components/Calendar/Month/Page.js b/public/js/components/Calendar/Month/Page.js
index 0e03c3697..adcb8e911 100644
--- a/public/js/components/Calendar/Month/Page.js
+++ b/public/js/components/Calendar/Month/Page.js
@@ -28,6 +28,14 @@ export default {
 		'input'
 	],
 	computed: {
+		dayText(){
+			if (!this.size || !this.weeks[0]?.days) return {};
+			let dayTextMap ={};
+			this.weeks[0].days.forEach((day)=>{
+				dayTextMap[day] = day.toLocaleString(this.$p.user_language_locale_identifier.value, { weekday: this.size < 1 ? 'narrow' : (this.size < 3 ? 'short' : 'long') });
+			});
+			return dayTextMap;
+		},
 		weeks() {
 			let firstDayOfMonth = new CalendarDate(this.year, this.month, 1);
 			let startDay = firstDayOfMonth.firstDayOfCalendarMonth;
@@ -87,7 +95,7 @@ export default {
 	<div class="fhc-calendar-month-page" :class="{'show-weeks': showWeeks}">
 		<div v-if="showWeeks" class=" bg-light fw-bold border-top border-bottom text-center"></div>
 		<div v-for="day in weeks[0].days" :key="day" class="bg-light fw-bold border-top border-bottom text-center">
-			{{day.toLocaleString(undefined, {weekday: size < 1 ? 'narrow' : (size < 3 ? 'short' : 'long')})}}
+			{{dayText[day]}}
 		</div>
 		<template v-for="week in weeks" :key="week.no">
 			<a href="#" v-if="showWeeks" class="fhc-calendar-month-page-weekday text-decoration-none text-end opacity-25" @click.prevent="changeToWeek(week)">{{week.no}}</a>
diff --git a/public/js/components/Calendar/Months.js b/public/js/components/Calendar/Months.js
index ec61d6de5..ab49e9a9c 100644
--- a/public/js/components/Calendar/Months.js
+++ b/public/js/components/Calendar/Months.js
@@ -17,7 +17,7 @@ export default {
 			return this.focusDate.format({year: 'numeric'});
 		},
 		months() {
-			return this.monthIndices.map(i => (new Date(0, i, 1)).toLocaleString(undefined, {month: this.size < 2 ? 'short' : 'long'}));
+			return this.monthIndices.map(i => (new Date(0, i, 1)).toLocaleString(this.$p.user_language_locale_identifier.value, {month: this.size < 2 ? 'short' : 'long'}));
 		}
 	},
 	template: `
diff --git a/public/js/components/Calendar/Week.js b/public/js/components/Calendar/Week.js
index 9de82ba79..36d012b27 100644
--- a/public/js/components/Calendar/Week.js
+++ b/public/js/components/Calendar/Week.js
@@ -12,7 +12,7 @@ export default {
 	},
 	computed: {
 		title() {
-			return this.focusDate.format({year: 'numeric'}) + ' KW ' + this.focusDate.w;
+			return this.focusDate.format({ year: 'numeric' }) + ' KW ' + this.focusDate.w;
 		}
 	},
 	methods: {
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index 00cb76f40..acec0dcec 100644
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -56,6 +56,17 @@ export default {
 			// returns an array with elements starting at 7 and ending at 24
 			return [...Array(24).keys()].filter(hour => hour >= 7 && hour <= 24);
 		},
+		dayText() {
+			if (!this.size || !this.days) return {};
+			let dayTextMap ={};
+			this.days.forEach((day)=>{
+				dayTextMap[day] = {
+					tag: day.toLocaleString(this.$p.user_language_locale_identifier.value, { weekday: this.size < 2 ? 'narrow' : (this.size < 3 ? 'short' : 'long') }),
+					datum: day.toLocaleString(this.$p.user_language_locale_identifier.value, [{ day: 'numeric', month: 'numeric' }, { day: 'numeric', month: 'numeric' }, { day: 'numeric', month: 'numeric' }, { dateStyle: 'short' }][this.size]),
+				};
+			});
+			return dayTextMap;
+		},
 		days() {
 			
 			let tmpDate = new CalendarDate(this.year,1,1); // NOTE(chris): somewhere in the middle of the year
@@ -210,8 +221,8 @@ export default {
 		<div class="d-flex flex-column">
 			<div class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="pageHeaderStyle" >
 				<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="day.toLocaleString(undefined, {dateStyle:'short'})" @click.prevent="changeToMonth(day)">
-					<div class="fw-bold">{{day.toLocaleString(undefined, {weekday: size < 2 ? 'narrow' : (size < 3 ? 'short' : 'long')})}}</div>
-					<a href="#" class="small text-secondary text-decoration-none" >{{day.toLocaleString(undefined, [{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{dateStyle:'short'}][this.size])}}</a>
+					<div class="fw-bold">{{dayText[day]?.tag}}</div>
+					<a href="#" class="small text-secondary text-decoration-none" >{{dayText[day]?.datum}}</a>
 				</div>
 			</div>
 			<div ref="eventcontainer" class="position-relative flex-grow-1" @mousemove="calcHourPosition" @mouseleave="hourPosition = null" >
diff --git a/public/js/composables/CalendarDate.js b/public/js/composables/CalendarDate.js
index 19d53fe5e..f16fafa37 100644
--- a/public/js/composables/CalendarDate.js
+++ b/public/js/composables/CalendarDate.js
@@ -127,8 +127,8 @@ class CalendarDate {
 		this._w = null;
 		this._wd = null;
 	}
-	format(options) {
-		return (new Date(this._y, this._m, this._d)).toLocaleString(undefined, options);
+	format(options, lang=undefined) {
+		return (new Date(this._y, this._m, this._d)).toLocaleString(lang, options);
 	}
 	compare(d) {
 		if (Object.prototype.toString.call(d) === '[object Date]')
diff --git a/public/js/plugin/Phrasen.js b/public/js/plugin/Phrasen.js
index a46621329..0203b8edf 100644
--- a/public/js/plugin/Phrasen.js
+++ b/public/js/plugin/Phrasen.js
@@ -3,6 +3,14 @@ import FhcApi from './FhcApi.js';
 const categories = Vue.reactive({});
 const loadingModules = {};
 let user_language = Vue.ref(FHC_JS_DATA_STORAGE_OBJECT.user_language);
+let user_language_locale_identifier = Vue.computed(()=>{
+	if(!user_language.value) return undefined;
+	switch(user_language.value){
+		case 'German': return 'de-AT';
+		case 'English': return 'en-GB';
+		default: return undefined;
+	}
+});
 
 function extractCategory(obj, category) {
 	return obj.filter(e => e.category == category).reduce((res, elem) => {
@@ -22,6 +30,7 @@ function getValueForLoadedPhrase(category, phrase, params) {
 
 const phrasen = {
 	user_language,
+	user_language_locale_identifier,
 	setLanguage(language, api) {
 		const catArray = Object.keys(categories)
 		return api.factory.phrasen.setLanguage(catArray, language).then(res => {
@@ -84,6 +93,7 @@ export default {
 			loadCategory: cat => phrasen.loadCategory.call(app, cat),
 			setLanguage: phrasen.setLanguage,
 			user_language: user_language,
+			user_language_locale_identifier: user_language_locale_identifier,
 			t_ref: phrasen.t_ref
 		};
 		app.provide('$p', app.config.globalProperties.$p);