now also displays the room information inside a modal and does not redirect to the content site

application/controllers/api/frontend/v1/Ort.php

@@ -33,7 +33,8 @@ class Ort extends FHCAPI_Controller
 	{
 		// NOTE(chris): additional permission checks will be done in SearchBarLib
 		parent::__construct([
-			'ContentID' => self::PERM_LOGGED
+			'ContentID' => self::PERM_LOGGED,
+			'getOrtKurzbzContent' => self::PERM_LOGGED,
 		]);
 
 		$this->load->model('ressource/Ort_model', 'OrtModel');
@@ -67,5 +68,28 @@ class Ort extends FHCAPI_Controller
 		
 		$this->terminateWithSuccess($result->content_id ?? NULL);
 	}
+
+	/**
+	 * @param int		$version
+	 * @param string	$sprache
+	 * @param boolean	$sichtbar
+	 *
+	 * @return $content
+	 */
+	public function getOrtKurzbzContent($version = null, $sprache = null, $sichtbar = true)
+	{
+		$content_id = $this->input->get("content_id",TRUE);
+
+		$this->load->library('CmsLib');
+
+		$content = $this->cmslib->getContent($content_id, $version, $sprache, $sichtbar);
+
+		if (isError($content))
+			$this->terminateWithError(getError($content), self::ERROR_TYPE_GENERAL);
+
+		$content = hasData($content) ? getData($content) : null;
+
+		$this->terminateWithSuccess($content);
+	}
 }
 

public/js/api/ort.js

@@ -1,5 +1,5 @@
 export default {
-    getContentID($ort_kurbz) {
+  getContentID($ort_kurbz) {
 		return this.$fhcApi.get(
             FHC_JS_DATA_STORAGE_OBJECT.app_root +
             FHC_JS_DATA_STORAGE_OBJECT.ci_router +
@@ -7,4 +7,12 @@ export default {
 			{ ort_kurzbz: $ort_kurbz }
 		);
 	},
+  getOrtKuzbzContent($ort_kurzbz_content_id) {
+		return this.$fhcApi.get(
+            FHC_JS_DATA_STORAGE_OBJECT.app_root +
+            FHC_JS_DATA_STORAGE_OBJECT.ci_router +
+            "/api/frontend/v1/Ort/getOrtKurzbzContent",
+			{ content_id: $ort_kurzbz_content_id }
+		);
+	},
 }

public/js/components/Cis/Cms/ContentModal.js

@@ -0,0 +1,47 @@
+import BsModal from "../../Bootstrap/Modal";
+
+
+export default {
+
+   
+    mixins:[BsModal],
+    
+    components:{
+        BsModal,
+    },
+    data(){
+        return{
+            content_id:null,
+            content:null,
+            ort_kurzbz:null,
+            result: false,
+        };
+    },
+    methods:{
+        modalShown: function(){
+            
+        }
+    },
+    mounted(){
+        this.modal = this.$refs.modalContainer;
+        document.addEventListener("show.bs.modal", function(){
+            console.log("modal is shown inside the mounted hook")
+        })  
+    },
+    
+    template:/*html*/`
+    <bs-modal @showBsModal="modalShown" ref="modalContainer" dialogClass="modal-lg">
+        <template #title>
+            <span v-if="ort_kurzbz">{{ort_kurzbz}}</span>
+            <span v-else>Ort Übersicht</span>
+        </template>
+        <template #default>
+            <div v-if="content" v-html="content"></div>
+            <div v-else>this is the else div</div>
+        </template>
+        <template #footer>
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </template>
+    </bs-modal>
+    `
+};

public/js/components/Cis/Mylv/LvUebersicht.js

@@ -40,8 +40,7 @@ export default  {
             </div>
         </template>
         <template #footer>
-            <button type="button" class="btn btn-primary" @click="result=true;this.hide()">OK</button>
-            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
         </template>
     </bs-modal>
     `,

public/js/components/DashboardWidget/Stundenplan.js

@@ -2,7 +2,7 @@ import Phrasen from '../../mixins/Phrasen.js';
 import AbstractWidget from './Abstract.js';
 import FhcCalendar from '../Calendar/Calendar.js';
 import LvUebersicht from '../Cis/Mylv/LvUebersicht.js';
-
+import ContentModal from '../Cis/Cms/ContentModal.js'
 
 export default {
 	mixins: [
@@ -12,6 +12,7 @@ export default {
 	components: {
 		FhcCalendar,
 		LvUebersicht,
+		ContentModal,
 	},
 	
 	data() {
@@ -35,6 +36,33 @@ export default {
 		}
 	},
 	methods: {
+		
+		showRoomInfoModal: function(ort_kurzbz){
+
+			// getting the content_id of the ort_kurzbz
+			this.$fhcApi.factory.ort.getContentID(ort_kurzbz).then(res =>{
+
+				let ort_kurzbz_content_id = res.data;
+
+				this.$refs.contentModal.content_id = ort_kurzbz_content_id;
+
+				this.$fhcApi.factory.ort.getOrtKuzbzContent(ort_kurzbz_content_id).then(res =>{
+					let result = res.data;
+					console.log("this is the result of the query", result);
+					this.$refs.contentModal.content = result;
+					this.$refs.contentModal.ort_kurzbz = ort_kurzbz;
+					if(this.$refs.contentModal.content){
+						this.$refs.contentModal.show();
+					}
+					
+
+				})
+
+				
+				
+			})
+			
+		},
 		showLvUebersicht: function (event){
 			
 			this.$refs.lvUebersicht.lehreinheit = event.lehreinheit_id;
@@ -60,6 +88,7 @@ export default {
 
 	},
 	created() {
+
 		
 		
 		this.$emit('setConfig', false);
@@ -89,17 +118,20 @@ export default {
 	template: /*html*/`
 	<div class="dashboard-widget-stundenplan d-flex flex-column h-100">
 		<lv-uebersicht ref="lvUebersicht"  />
+		<content-modal ref="contentModal"  />
 		<fhc-calendar :initial-date="currentDay" class="border-0" class-header="p-0" @select:day="selectDay" v-model:minimized="minimized" :events="events" no-week-view :show-weeks="false" />
 		<div v-show="minimized" class="flex-grow-1 overflow-scroll">
 			<div v-if="events === null" class="d-flex h-100 justify-content-center align-items-center">
 				<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
 			</div>
 			<div v-else-if="currentEvents.length" class="list-group list-group-flush">
-				<div @click="showLvUebersicht(evt)" class="" v-for="evt in currentEvents" :key="evt.id" class="list-group-item small" :style="{'background-color':evt.color}">
+				<div role="button" @click="showLvUebersicht(evt)" class="" v-for="evt in currentEvents" :key="evt.id" class="list-group-item small" :style="{'background-color':evt.color}">
 					<b>{{evt.title}}</b>
 					<br>
 					<small class="d-flex w-100 justify-content-between">
-						<span @click="showRoomInfo(evt.ort_kurzbz)" style="text-decoration:underline" type="button">{{evt.ort_kurzbz}}</span>
+						<!-- event modifier stop to prevent opening the modal for the lv Uebersicht when clicking on the ort_kurzbz -->
+						<!-- old event: showRoomInfo(evt.ort_kurzbz) -->
+						<span @click.stop="showRoomInfoModal(evt.ort_kurzbz)" style="text-decoration:underline" type="button">{{evt.ort_kurzbz}}</span>
 						<span>{{evt.start.toLocaleTimeString(undefined, {hour:'numeric',minute:'numeric'})}}-{{evt.end.toLocaleTimeString(undefined, {hour:'numeric',minute:'numeric'})}}</span>
 					</small>
 				</div>