From 16f90604b6ef94feea16ab60fa02e9e618ebfe13 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Fri, 24 May 2024 11:17:06 +0200
Subject: [PATCH] stundenplan modal for LVs and making calendar header sticky

---
 public/js/apps/Cis/Stundenplan.js             |  2 +
 public/js/components/Calendar/Calendar.js     |  2 +-
 .../js/components/Calendar/CalendarModal.js   | 43 +++++++++++++++++--
 public/js/components/Calendar/Pane.js         |  3 +-
 public/js/components/Calendar/Week/Page.js    |  6 +--
 5 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/public/js/apps/Cis/Stundenplan.js b/public/js/apps/Cis/Stundenplan.js
index eaa75bca3..25823b193 100755
--- a/public/js/apps/Cis/Stundenplan.js
+++ b/public/js/apps/Cis/Stundenplan.js
@@ -1,4 +1,5 @@
 import FhcCalendar from "../../components/Calendar/Calendar.js";
+import Phrasen from "../../plugin/Phrasen.js";
 
 const app = Vue.createApp({
 	components: {
@@ -50,4 +51,5 @@ const app = Vue.createApp({
 	}
 });
 app.config.unwrapInjectedRef = true;
+app.use(Phrasen);
 app.mount('#content');
\ No newline at end of file
diff --git a/public/js/components/Calendar/Calendar.js b/public/js/components/Calendar/Calendar.js
index ae36eab1f..2b4f7b8a3 100755
--- a/public/js/components/Calendar/Calendar.js
+++ b/public/js/components/Calendar/Calendar.js
@@ -106,7 +106,7 @@ export default {
 	methods: {
 		handleInput(day) {
 			// set the event when clicking on the lernveranstaltung in the data 
-			this.currentlySelectedEvent = day;
+			this.currentlySelectedEvent = day[1];
 			console.log(this.currentlySelectedEvent)
 			// showing the modal
 			Vue.nextTick(()=>{
diff --git a/public/js/components/Calendar/CalendarModal.js b/public/js/components/Calendar/CalendarModal.js
index f8bf57de6..5f6fd9d09 100644
--- a/public/js/components/Calendar/CalendarModal.js
+++ b/public/js/components/Calendar/CalendarModal.js
@@ -133,7 +133,16 @@ export default {
       }
     },
   },
-  computed: {},
+  computed: {
+    start_time: function(){
+      if(!this.data.start) return 'N/A';
+      return this.data.start.getHours() + ":" + this.data.start.getMinutes();
+    },
+    end_time: function(){
+      if(!this.data.end) return 'N/A';
+      return this.data.end.getHours() + ":" + this.data.end.getMinutes();
+    }
+  },
   created() {
     console.log("this is an test")
   },
@@ -145,11 +154,37 @@ export default {
   },
   template: /*html*/ `
   <bs-modal ref="modalContainer" v-bind="$props" body-class="" dialog-class="modal-lg" class="bootstrap-alert" backdrop="false" >
-
+    <template v-slot:title>
+      {{data.title + ' - ' + data.lehrfach_bez + ' [' + data.ort_kurzbz+']' }}  
+    </template>
     <template v-slot:default>
-        <p>{{JSON.stringify(data,null,2)}}</p>
+        <div class="row">
+        <div class="offset-3 col-4"><span>Datum:</span></div>
+        <div class=" col"><span>{{data.datum}}</span></div>
+        </div>
+        <div class="row">
+        <div class="offset-3 col-4"><span>Raum:</span></div>
+        <div class=" col"><span>{{data.ort_kurzbz}}</span></div>
+        </div>
+        <div class="row">
+        <div class="offset-3 col-4"><span>LV:</span></div>
+        <div class=" col"><span>{{'('+data.lehrform+') ' + data.lehrfach_bez}}</span></div>
+        </div>
+        <div class="row">
+        <div class="offset-3 col-4"><span>Lektor:</span></div>
+        <div class=" col"><span>{{data.lektor}}</span></div>
+        </div>
+        <div class="row">
+        <div class="offset-3 col-4"><span>Zeitraum:</span></div>
+        <div class=" col"><span>{{start_time + ' - ' + end_time}}</span></div>
+        </div>
     </template>
  
-    <!-- end of optional footer --> 
+     <!-- optional footer -->
+     <template  v-slot:footer >
+        
+     <button class="btn btn-outline-secondary " @click="hide">{{$p.t('ui','cancel')}}</button>    
+       </template>
+     <!-- end of optional footer --> 
   </bs-modal>`,
 };
diff --git a/public/js/components/Calendar/Pane.js b/public/js/components/Calendar/Pane.js
index bbc21af0c..8ff9b6259 100755
--- a/public/js/components/Calendar/Pane.js
+++ b/public/js/components/Calendar/Pane.js
@@ -46,7 +46,8 @@ export default {
 	},
 	template: `
 	<div ref="carousel" class="calendar-pane carousel slide" @[\`slid.bs.carousel\`]="slid" :data-queue="queue">
-		<div class="carousel-inner">
+		<!--height calc function just for user testing purpose (has to be fixed)-->
+		<div class="carousel-inner " style="height:calc(100vh - 220px); overflow:scroll">
 			<div v-for="i in [...Array(3).keys()]" :key="i" class="carousel-item">
 				<slot :index="i" :offset="offsets[i]" />
 			</div>
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index 799b0ca70..31de1a862 100755
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -92,19 +92,19 @@ export default {
 	template: `
 	<div class="fhc-calendar-week-page">
 		<div class="d-flex flex-column border-top">
-			<div class="fhc-calendar-week-page-header border-2 border-bottom text-center d-flex">
+			<div style="position:sticky; top:10px; z-index:1020;" class="fhc-calendar-week-page-header border-2 border-bottom text-center d-flex">
 				<div v-for="day in days" :key="day" class="flex-grow-1" :title="day.toLocaleString(undefined, {dateStyle:'short'})">
 					<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" @click.prevent="changeToMonth(day)">{{day.toLocaleString(undefined, [{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{dateStyle:'short'}][this.size])}}</a>
 				</div>
 			</div>
-			<div ref="eventcontainer" class="flex-grow-1 overflow-auto">
+			<div ref="eventcontainer" class="flex-grow-1">
 				<div class="events">
 					<div class="hours">
 						<div v-for="hour in hours" :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="{'grid-template-columns': 'repeat(' + day.lanes + ', 1fr)', 'grid-template-rows': 'repeat(' + (1440 / smallestTimeFrame) + ', 1fr)'}">
-						<a  href="#" :title="event.orig.title + ' - ' + event.orig.lehrfach_bez + ' [' + event.orig.ort_kurzbz+']'" v-for="event in day.events" :key="event" class="m-2 border border-dark border-2 small rounded overflow-hidden text-decoration-none text-dark" :style="{'grid-column-start': 1+(event.lane-1)*day.lanes/event.maxLane, 'grid-column-end': 1+event.lane*day.lanes/event.maxLane, 'grid-row-start': dateToMinutesOfDay(event.start), 'grid-row-end': dateToMinutesOfDay(event.end), '--test': dateToMinutesOfDay(event.end), background: event.orig.farbe}" @click.prevent="$emit('input', event.orig)">
+						<a  href="#" :title="event.orig.title + ' - ' + event.orig.lehrfach_bez + ' [' + event.orig.ort_kurzbz+']'" v-for="event in day.events" :key="event" class="mx-2 border border-dark border-2 small rounded overflow-hidden text-decoration-none text-dark" :style="{'grid-column-start': 1+(event.lane-1)*day.lanes/event.maxLane, 'grid-column-end': 1+event.lane*day.lanes/event.maxLane, 'grid-row-start': dateToMinutesOfDay(event.start), 'grid-row-end': dateToMinutesOfDay(event.end), 'background': event.orig.farbe?event.orig.farbe:'white' ,'--test': dateToMinutesOfDay(event.end)}" @click.prevent="$emit('input', event.orig)">
 							<div class="d-flex flex-column align-items-center justify-content-evenly h-100">
 								<span>{{event.orig.title}}</span>	
 								<span>{{event.orig.ort_kurzbz}}</span>