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

Stundenplan Week Page smaller breakpoints style handling; searchbar emit action finished on default link click; month stundenplan past days use opacity-50 class; Day page height fix of right col;

Browse Source
This commit is contained in:
Johann Hoffmann
2025-01-31 14:09:05 +01:00
parent b855c404e4
commit c1918726df
12 changed files with 57 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/apps/Cis.js
+6 -7
View File
@@ -27,13 +27,12 @@ const app = Vue.createApp({
defaultaction: {
type: "link",
action: function(data) {
return FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router+
"/Cis/Profil/View/"+data.uid;
}
},
return FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router+
"/Cis/Profil/View/"+data.uid;
}
},
childactions: []
},
},
student: {
defaultaction: {
type: "link",
@@ -115,7 +114,7 @@ const app = Vue.createApp({
methods: {
searchfunction: function(searchsettings) {
return Vue.$fhcapi.search.search(searchsettings);
},
}
}
});
app.use(FhcApi);
public/js/components/Calendar/Day/Page.js
+3 -3
View File
@@ -348,9 +348,9 @@ export default {
</div>
</div>
</div>
<div class="d-xl-block col-xl-6 p-0">
<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">
<div class="d-xl-block col-xl-6 p-4" style="max-height: 100%">
<div style="z-index:0; max-height: 100%" class="sticky-top d-flex justify-content-center align-items-center flex-column">
<div style="max-height: 100%; overflow-y:auto;" class="w-100">
<template v-if="selectedEvent && lvMenu">
<slot name="pageMobilContent" :lvMenu="lvMenu" >
<p>this is a slot placeholder</p>
public/js/components/Calendar/Month/Page.js
+24 -2
View File
@@ -1,6 +1,7 @@
import CalendarDate from '../../../composables/CalendarDate.js';
export default {
name: 'MonthPage',
data(){
return{
highlightedWeek: null,
@@ -60,6 +61,18 @@ export default {
},
methods: {
getDayClass(week, day) {
let classstring = 'fhc-calendar-month-page-day text-decoration-none overflow-hidden'
const isHighlighted = this.isHighlighted(week, day)
const isThisDate = this.date.compare(day)
const isNotThisMonth = day.getMonth() != this.month
const isInThePast = this.date.isInPast(day)
if(isHighlighted) classstring += ' fhc-calendar-month-page-day-highlight'
if(isThisDate) classstring += ' active'
if(isNotThisMonth || isInThePast) classstring += ' opacity-50'
return classstring
},
selectDay(day) {
this.date.set(day);
this.$emit('input', day);
@@ -72,6 +85,7 @@ export default {
}
},
highlight(week, day){
console.log('highlight method')
this.highlightedWeek = week.no;
this.highlightedDay = day;
},
@@ -97,9 +111,17 @@ export default {
<div v-for="day in weeks[0].days" :key="day" class="bg-light fw-bold border-top border-bottom text-center">
{{dayText[day]}}
</div>
<template v-for="week in weeks" :key="week.no">
<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>
<a href="#" @click.prevent="clickEvent(day,week)" @mouseover="highlight(week,day)" @mouseleave="highlightedWeek = null; highlightedDay = null" v-for="day in week.days" :key="day" :class="{'fhc-calendar-month-page-day-highlight': isHighlighted(week, day)}" class="fhc-calendar-month-page-day text-decoration-none overflow-hidden" :class="{active:date.compare(day),'opacity-50':day.getMonth() != month}" >
<a href="#"
@click.prevent="clickEvent(day,week)"
@mouseover="highlight(week,day)"
@mouseleave="highlightedWeek = null; highlightedDay = null"
v-for="day in week.days"
:key="day"
:class="getDayClass(week, day)"
>
<span class="no">{{day.getDate()}}</span>
<span v-if="events[day.toDateString()] && events[day.toDateString()].length" class="events">
<div @click="setSelectedEvent(event);" v-for="event in events[day.toDateString()]" :key="event.id" :style="{'background-color': event.color}" class="fhc-entry" :selected="event == selectedEvent" v-contrast >
public/js/components/Calendar/Pane.js
+1 -1
View File
@@ -1,4 +1,5 @@
export default {
name: 'Pane',
emits: [
'slid'
],
@@ -81,7 +82,6 @@ export default {
},
template: `
<div ref="carousel" class="calendar-pane carousel slide" @[\`slide.bs.carousel\`]="slide" @[\`slid.bs.carousel\`]="slid" :data-queue="queue">
<!--height calc function just for user testing purpose (has to be fixed)-->
<div id="calendarContainer" @scroll="scrollCalendar" ref="calendarContainer" class="carousel-inner " style="height:var(--fhc-calendar-pane-height);">
<div ref="carouselItems" v-for="i in [...Array(3).keys()]" :key="i" class="carousel-item" style="height:var(--fhc-calendar-pane-height);">
<slot :active="i == activeCarouselItemIndex" :index="i" :offset="offsets[i]" />
public/js/components/Calendar/Week/Page.js
+8 -4
View File
@@ -4,6 +4,7 @@ function ggt(m,n) { return n==0 ? m : ggt(n, m%n); }
function kgv(m,n) { return (m*n) / ggt(m,n); }
export default {
name: 'WeekPage',
data(){
return{
hourPosition:null,
@@ -83,7 +84,6 @@ export default {
eventsPerDayAndHour() {
// return early if the calendar pane is sliding
if (this.isSliding) return {};
const res = {};
this.days.forEach(day => {
let key = day.toDateString();
@@ -148,7 +148,7 @@ export default {
'grid-row-start': this.dateToMinutesOfDay(event.start),
'grid-row-end': this.dateToMinutesOfDay(event.end),
'background-color': event.orig.color,
'--test': this.dateToMinutesOfDay(event.end),
'max-height': '75px'
}
},
calcHourPosition(event) {
@@ -218,7 +218,7 @@ export default {
if(container) container.style.overflow = 'scroll'
},
template: /*html*/`
<div class="fhc-calendar-week-page">
<div class="fhc-calendar-week-page" style="min-width: 700px;">
<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="dayText[day]?.heading" @click.prevent="changeToMonth(day)">
@@ -238,7 +238,11 @@ export default {
<div v-for="hour in hours" style="min-height:100px" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
</div>
<div v-for="day in eventsPerDayAndHour" :key="day" class=" day border-start" :style="dayGridStyle(day)">
<div v-for="event in day.events" :key="event" @click.prevent="weekPageClick(event.orig, day)" :selected="event.orig == selectedEvent" :style="eventGridStyle(day,event)" class="mx-2 small rounded overflow-hidden fhc-entry " v-contrast >
<div v-for="event in day.events" :key="event" @click.prevent="weekPageClick(event.orig, day)"
:selected="event.orig == selectedEvent"
:style="eventGridStyle(day,event)"
class="mx-2 small rounded overflow-hidden fhc-entry "
v-contrast >
<slot name="weekPage" :event="event" :day="day">
<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
</slot>
public/js/components/Cis/Stundenplan/Stundenplan.js
+5 -5
View File
@@ -134,16 +134,16 @@ export const Stundenplan = {
</template>
<template #weekPage="{event,day}">
<div @click="showModal(event?.orig); " type="button"
class=" position-relative border border-secondary border d-flex flex-row align-items-center
justify-content-evenly h-100" style="max-height: 75px; overflow: auto;">
class=" position-relative border border-secondary border d-flex flex-col align-items-center
justify-content-evenly h-100" style="overflow: auto;">
<div v-if="event?.orig?.beginn && event?.orig?.ende" >
<div class="d-flex flex-column p-4 border-end border-secondary">
<div v-if="event?.orig?.beginn && event?.orig?.ende" class="d-none d-xl-block" >
<div class="d-flex flex-column p-4 p-xl-2 border-end border-secondary">
<span class="small">{{convertTime(event.orig.beginn.split(":"))}}</span>
<span class="small">{{convertTime(event.orig.ende.split(":"))}}</span>
</div>
</div>
<div class="d-flex flex-column flex-grow-1 align-items-center">
<div class="d-flex flex-column flex-grow-1 align-items-center" style="font-size: 0.75rem">
<span>{{event?.orig.topic}}</span>
<span v-for="lektor in event?.orig.lektor">{{lektor.kurzbz}}</span>
<span>{{event?.orig.ort_kurzbz}}</span>
public/js/components/Dashboard/Item.js
+1
View File
@@ -3,6 +3,7 @@ import CachedWidgetLoader from "../../composables/Dashboard/CachedWidgetLoader.j
import HeightTransition from "../Tranistion/HeightTransition.js";
export default {
name: 'Item',
components: {
BsModal,
HeightTransition
public/js/components/Dashboard/Section.js
+1 -1
View File
@@ -2,8 +2,8 @@ import BsConfirm from "../Bootstrap/Confirm.js";
import DropGrid from '../Drop/Grid.js'
import DashboardItem from "./Item.js";
import CachedWidgetLoader from "../../composables/Dashboard/CachedWidgetLoader.js";
export default {
name: 'Section',
components: {
DropGrid,
DashboardItem
public/js/components/DashboardWidget/Stundenplan.js
-22
View File
@@ -162,28 +162,6 @@ export default {
created() {
this.$emit('setConfig', false);
this.loadEvents();
/* axios
.get(this.apiurl + '/components/Cis/Stundenplan/Stunden').then(res => {
res.data.retval.forEach(std => {
this.stunden[std.stunde] = std; // TODO(chris): geht besser
});
axios
.get(this.apiurl + '/components/Cis/Stundenplan')
.then(res => {
res.data.retval.forEach((el, i) => {
el.id = i;
el.color = '#' + (el.farbe || 'CCCCCC');
el.start = new Date(el.datum + ' ' + this.stunden[el.stunde].beginn);
el.end = new Date(el.datum + ' ' + this.stunden[el.stunde].ende);
el.title = el.lehrfach;
if (el.lehrform)
el.title += '-' + el.lehrform;
});
this.events = res.data.retval || [];
})
.catch(err => { console.log(err);console.error('ERROR: ', err.response.data) });
})
.catch(err => { console.error('ERROR: ', err.response.data) }); */
},
template: /*html*/`
<div class="dashboard-widget-stundenplan d-flex flex-column h-100">
public/js/components/Drop/Grid.js
+1
View File
@@ -8,6 +8,7 @@ const MODE_MOVE = 1;
const MODE_RESIZE = 2;
export default {
name: 'Grid',
components: {
GridItem
},
public/js/components/searchbar/action.js
+1 -1
View File
@@ -15,7 +15,7 @@ export default {
template: `
<template v-if="this.renderif()">
<a :class="this.cssclass" :href="this.getactionhref()"
@click="(this.action.type === 'function') ? this.execaction() : null">
@click="this.execaction()">
<slot>Action</slot>
</a>
</template>
public/js/composables/CalendarDate.js
+6 -1
View File
@@ -199,6 +199,11 @@ class CalendarDate {
return true;
return false;
}
isInPast(d) {
if (this.isDate(d))
return (this.y > d.getFullYear() || this.m > d.getMonth() || this.d > d.getDate());
return false
}
setLocale(locale) {
this.weekStart = CalendarDate.getWeekStart(locale);
}
@@ -207,7 +212,7 @@ class CalendarDate {
return Object.prototype.toString.call(obj) === '[object Date]';
}
cleanup(){
this.watchLocale();
if(this.watchLocale && this.watchLocale.stop) this.watchLocale.stop(); // TODO: ?
}
}
/**