From c1918726df16e5f84fd23bd7849997201c399dec Mon Sep 17 00:00:00 2001
From: Johann Hoffmann <ma0646@technikum-wien.at>
Date: Fri, 31 Jan 2025 14:09:05 +0100
Subject: [PATCH] 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;

---
 public/js/apps/Cis.js                         | 13 +++++-----
 public/js/components/Calendar/Day/Page.js     |  6 ++---
 public/js/components/Calendar/Month/Page.js   | 26 +++++++++++++++++--
 public/js/components/Calendar/Pane.js         |  2 +-
 public/js/components/Calendar/Week/Page.js    | 12 ++++++---
 .../components/Cis/Stundenplan/Stundenplan.js | 10 +++----
 public/js/components/Dashboard/Item.js        |  1 +
 public/js/components/Dashboard/Section.js     |  2 +-
 .../components/DashboardWidget/Stundenplan.js | 22 ----------------
 public/js/components/Drop/Grid.js             |  1 +
 public/js/components/searchbar/action.js      |  2 +-
 public/js/composables/CalendarDate.js         |  7 ++++-
 12 files changed, 57 insertions(+), 47 deletions(-)

diff --git a/public/js/apps/Cis.js b/public/js/apps/Cis.js
index da658dc47..482c2774a 100644
--- a/public/js/apps/Cis.js
+++ b/public/js/apps/Cis.js
@@ -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);
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index fbd3307a8..f545c61ae 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -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>
diff --git a/public/js/components/Calendar/Month/Page.js b/public/js/components/Calendar/Month/Page.js
index 78302b154..a52a94b55 100644
--- a/public/js/components/Calendar/Month/Page.js
+++ b/public/js/components/Calendar/Month/Page.js
@@ -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 >
diff --git a/public/js/components/Calendar/Pane.js b/public/js/components/Calendar/Pane.js
index fe23dcd09..5a3a43aa9 100644
--- a/public/js/components/Calendar/Pane.js
+++ b/public/js/components/Calendar/Pane.js
@@ -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]" />
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index d82564dd7..7e3697590 100644
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -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>
diff --git a/public/js/components/Cis/Stundenplan/Stundenplan.js b/public/js/components/Cis/Stundenplan/Stundenplan.js
index 59b8b43d7..06566f643 100644
--- a/public/js/components/Cis/Stundenplan/Stundenplan.js
+++ b/public/js/components/Cis/Stundenplan/Stundenplan.js
@@ -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>
diff --git a/public/js/components/Dashboard/Item.js b/public/js/components/Dashboard/Item.js
index 8bfd55908..379437b74 100644
--- a/public/js/components/Dashboard/Item.js
+++ b/public/js/components/Dashboard/Item.js
@@ -3,6 +3,7 @@ import CachedWidgetLoader from "../../composables/Dashboard/CachedWidgetLoader.j
 import HeightTransition from "../Tranistion/HeightTransition.js";
 
 export default {
+	name: 'Item',
 	components: {
 		BsModal,
 		HeightTransition
diff --git a/public/js/components/Dashboard/Section.js b/public/js/components/Dashboard/Section.js
index 91c978a63..6ab57ee77 100644
--- a/public/js/components/Dashboard/Section.js
+++ b/public/js/components/Dashboard/Section.js
@@ -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
diff --git a/public/js/components/DashboardWidget/Stundenplan.js b/public/js/components/DashboardWidget/Stundenplan.js
index 3e60255b9..aca6227d8 100644
--- a/public/js/components/DashboardWidget/Stundenplan.js
+++ b/public/js/components/DashboardWidget/Stundenplan.js
@@ -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">
diff --git a/public/js/components/Drop/Grid.js b/public/js/components/Drop/Grid.js
index 44ee91e23..97f83ddd3 100644
--- a/public/js/components/Drop/Grid.js
+++ b/public/js/components/Drop/Grid.js
@@ -8,6 +8,7 @@ const MODE_MOVE = 1;
 const MODE_RESIZE = 2;
 
 export default {
+	name: 'Grid',
 	components: {
 		GridItem
 	},
diff --git a/public/js/components/searchbar/action.js b/public/js/components/searchbar/action.js
index f4745a08e..e8db391c9 100644
--- a/public/js/components/searchbar/action.js
+++ b/public/js/components/searchbar/action.js
@@ -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>
diff --git a/public/js/composables/CalendarDate.js b/public/js/composables/CalendarDate.js
index 63e17148d..25fa51452 100644
--- a/public/js/composables/CalendarDate.js
+++ b/public/js/composables/CalendarDate.js
@@ -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: ?
 	}
 }
 /**