blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-01 12:19:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

update(CalendarDate.js): uses phrasen.user_locale for calculations and watches for changes on the user_locale

Browse Source
This commit is contained in:
SimonGschnell
2025-01-14 11:43:33 +01:00
parent cf32974652
commit 516554c1e3
6 changed files with 42 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Calendar/Calendar.js
+4 -7
View File
@@ -6,7 +6,7 @@ import CalendarWeeks from './Weeks.js';
import CalendarDay from './Day.js';
import CalendarMinimized from './Minimized.js';
import CalendarDate from '../../composables/CalendarDate.js';
import CalendarDates from '../../composables/CalendarDates.js';
// TODO(chris): week/month toggle
@@ -90,11 +90,6 @@ export default {
}
});
},
"$p.user_locale.value"(newUserLocale){
// reset the calculation of the calendarWeek when changing user_locale
this.focusDate._clean();
this.focusDate.setLocale(newUserLocale);
},
},
emits: [
'select:day',
@@ -206,7 +201,6 @@ export default {
this.mode = allowedInitialModes[allowedInitialModes.indexOf(this.initialMode)] || allowedInitialModes.pop();
this.date.set(new Date(this.initialDate));
this.focusDate.set(this.date);
this.focusDate.setLocale(this.$p.user_locale.value);
},
mounted() {
if (this.$refs.container) {
@@ -227,6 +221,9 @@ export default {
}
},
unmounted(){
CalendarDates.cleanup();
},
template: /*html*/`
<div ref="container" class="fhc-calendar card h-100" :class="sizeClass">
<component :is="'calendar-' + mode" @updateMode="mode = $event" @change:range="$emit('change:range',$event)" @input="handleInput" >
public/js/components/Calendar/Month/Page.js
-2
View File
@@ -38,7 +38,6 @@ export default {
},
weeks() {
let firstDayOfMonth = new CalendarDate(this.year, this.month, 1);
firstDayOfMonth.setLocale(this.$p.user_locale.value);
let startDay = firstDayOfMonth.firstDayOfCalendarMonth;
let endDay = firstDayOfMonth.lastDayOfCalendarMonth;
@@ -49,7 +48,6 @@ export default {
if (week.days.length == 7) {
let d = new CalendarDate(week.days[5]);
d.setLocale(this.$p.user_locale.value);
week.no = d.w;
week.y = d.y;
res.push(week);
public/js/components/Calendar/Week/Page.js
-1
View File
@@ -71,7 +71,6 @@ export default {
days() {
let tmpDate = new CalendarDate(this.year,1,1); // NOTE(chris): somewhere in the middle of the year
tmpDate.setLocale(this.$p.user_locale.value);
tmpDate.w = this.week;
let startDay = tmpDate.firstDayOfWeek;
let result = [];
public/js/composables/CalendarDate.js
+21 -7
View File
@@ -1,8 +1,23 @@
import {user_locale} from "../plugin/Phrasen.js";
import CalendarDates from "./CalendarDates.js";
class CalendarDate {
constructor(y, m, d) {
this.weekStart = CalendarDate.getWeekStart();
this.watchLocale = Vue.watch(
user_locale,
(newLocale, oldLocale, onCleanup) =>{
this.weekStart = CalendarDate.getWeekStart();
this._clean();
onCleanup((cleanup)=>{
console.log(cleanup,"HERE IA M")
});
},
);
this.set(y, m, d);
this._clean();
CalendarDates.subscribe(this);
}
get y() { return this._y }
set y(v) { this._y = v; this._clean() }
@@ -71,7 +86,6 @@ class CalendarDate {
}
get cdFirstDayOfWeek() {
let FirstDayOfWeek = new CalendarDate(this.firstDayOfWeek);
FirstDayOfWeek.weekStart = this.weekStart;
return FirstDayOfWeek;
}
get lastDayOfWeek() {
@@ -91,7 +105,6 @@ class CalendarDate {
}
get cdLastDayOfWeek() {
let LastDayOfWeek = new CalendarDate(this.lastDayOfWeek);
LastDayOfWeek.weekStart = this.weekStart;
return LastDayOfWeek;
}
get firstDayOfCalendarMonth() {
@@ -104,7 +117,6 @@ class CalendarDate {
let firstDayOfMonth = new Date(this.y, this.m, 1);
let offset = (firstDayOfMonth.getDay() + 7 - this.weekStart) % 7;
let FirstDayOfCalendarMonth = new CalendarDate(this.y, this.m, 1 - offset);
FirstDayOfCalendarMonth.weekStart = this.weekStart;
return FirstDayOfCalendarMonth;
}
get lastDayOfCalendarMonth() {
@@ -117,14 +129,12 @@ class CalendarDate {
let lastDayOfMonth = new Date(this.y, this.m+1, 0);
let offset = (lastDayOfMonth.getDay() + 7 - this.weekStart) % 7;
let LasyDayOfCalendarMonth = new CalendarDate(lastDayOfMonth.getFullYear(), lastDayOfMonth.getMonth(), lastDayOfMonth.getDate() + 6 - offset);
LasyDayOfCalendarMonth.weekStart = this.weekStart;
return LasyDayOfCalendarMonth;
}
get cdLastDayOfNextCalendarMonth() {
let lastDayOfMonth = new Date(this.y, this.m+1, 0);
let offset = (lastDayOfMonth.getDay() + 7 - this.weekStart) % 7;
let LastDayOfNextCalendarMonth = new CalendarDate(lastDayOfMonth.getFullYear(), lastDayOfMonth.getMonth() + 1, lastDayOfMonth.getDate() + 6 - offset);
LastDayOfNextCalendarMonth.weekStart = this.weekStart;
return LastDayOfNextCalendarMonth;
}
get nextSevenDays() {
@@ -139,7 +149,6 @@ class CalendarDate {
// if the week starts with Monday we have to go 3 days in the past from the start of the next year to get the correct numWeek of the current year
// this is because for example 30.12.2024 - 05.01.2025 is the first calendarWeek of 2025
let lastCalendarWeek = new CalendarDate(this.y + 1, 0, this.weekStart == 1 ? -3 : 0);
lastCalendarWeek.weekStart = this.weekStart;
return lastCalendarWeek.w;
}
set(y,m,d,noClean) {
@@ -197,6 +206,9 @@ class CalendarDate {
isDate(obj){
return Object.prototype.toString.call(obj) === '[object Date]';
}
cleanup(){
this.watchLocale.stop();
}
}
/**
* Returns the weekday number (Date.getDay()) on which the week starts depending on the locale.
@@ -210,7 +222,7 @@ class CalendarDate {
*/
CalendarDate.getWeekStart = function(locale) {
locale = locale || navigator.language;
locale = user_locale.value || locale || navigator.language;
const parts = locale.match(/^([a-z]{2,3})(?:-([a-z]{3})(?=$|-))?(?:-([a-z]{4})(?=$|-))?(?:-([a-z]{2}|\d{3})(?=$|-))?/i);
const language_code = parts[1];
@@ -239,7 +251,9 @@ CalendarDate.getWeekStart = function(locale) {
return 1;
}
else
{
return 1;
}
}
public/js/composables/CalendarDates.js
+16
View File
@@ -0,0 +1,16 @@
class CalendarDates{
static subscribers_array = [];
static subscribe(subscriber){
this.subscribers_array.push(subscriber);
}
static unsubscribe(subscriber){
this.subscribers_array = this.subscribers_array.filter(sub => !sub.compare(subscriber));
}
static cleanup(){
this.subscribers_array.forEach(sub => { sub.cleanup() });
}
}
export default CalendarDates;
public/js/plugin/Phrasen.js
+1 -1
View File
@@ -3,7 +3,7 @@ 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_locale = Vue.computed(()=>{
export let user_locale = Vue.computed(()=>{
if(!user_language.value) return null;
return FHC_JS_DATA_STORAGE_OBJECT.server_languages.find(language => language.sprache == user_language.value).locale;
});