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

update(Calendar.js): uses the user_language for the different day formattings in the calendar views

Browse Source
This commit is contained in:
SimonGschnell
2024-12-19 12:12:13 +01:00
parent e2af00e41d
commit 114562909f
9 changed files with 50 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/apps/Cis/Stundenplan.js
+2
View File
@@ -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');
public/js/components/Calendar/Day/Page.js
+11 -5
View File
@@ -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" >
public/js/components/Calendar/Month.js
+1 -1
View File
@@ -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: {
public/js/components/Calendar/Month/Page.js
+9 -1
View File
@@ -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>
public/js/components/Calendar/Months.js
+1 -1
View File
@@ -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: `
public/js/components/Calendar/Week.js
+1 -1
View File
@@ -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: {
public/js/components/Calendar/Week/Page.js
+13 -2
View File
@@ -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" >
public/js/composables/CalendarDate.js
+2 -2
View File
@@ -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]')
public/js/plugin/Phrasen.js
+10
View File
@@ -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);