Merge branch 'feature-61235/Cis4_Studium_Uebersicht' into merge_C4_25999_61235_61730

public/css/Cis4/Cis.css

@@ -178,6 +178,25 @@ html {
 	color:var(--fhc-light);
 }
 
+/* lvMenu entry disabled style */
+[disabled="true"].menu-entry {
+	pointer-events: none;
+	cursor: default;
+	background-color: #dadada !important;
+	color: black !important;
+	-webkit-touch-callout: none;
+	/* iOS Safari */
+	-webkit-user-select: none;
+	/* Safari */
+	-khtml-user-select: none;
+	/* Konqueror HTML */
+	-moz-user-select: none;
+	/* Old versions of Firefox */
+	-ms-user-select: none;
+	/* Internet Explorer/Edge */
+	user-select: none;
+}
+
 /* buttons */
 #cis-header .btn-level-1,
 #cis-header .btn-level-1 + .btn,

public/css/Cis4/Studium.css

@@ -0,0 +1,60 @@
+.lvUebersicht{
+	display:grid;
+	gap: 1rem;
+}
+
+@media (min-width: 992px) {
+	.lvUebersicht {
+		grid-template-columns: 1fr 1fr 1fr;
+	}
+}
+
+@media (max-width: 992px){
+	.lvUebersicht{
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+@media (max-width: 576px){
+	.lvUebersicht{
+		grid-template-columns: 1fr;
+	}
+}
+
+.lvOptions {
+	display: grid;
+	gap: 1rem;
+}
+
+.lvOptions > div {
+	flex-basis: auto;
+	flex-grow: 1;
+	flex-shrink: 1;
+
+}
+
+.lvOptions button {
+	flex-shrink: 0;
+
+}
+
+@media (min-width: 1200px) {
+	.lvOptions {
+		grid-template-columns: 1fr 1fr 1fr 1fr;
+	}
+}
+
+@media (max-width: 1200px) {
+	.lvOptions {
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+@media (max-width: 576px) {
+	.lvOptions {
+		grid-template-columns: 1fr;
+	}
+}
+
+
+

public/js/api/studium.js

@@ -8,7 +8,6 @@ export default {
 	},
 
 	getAllStudienSemester: function (studiensemester=undefined, studiengang=undefined, semester=undefined, studienplan=undefined) {
-		console.log(studiensemester, studiengang, semester, studienplan)
 		return this.$fhcApi.get(
 			'/api/frontend/v1/Studium/getStudienAllSemester',
 			{studiensemester, studiengang, semester, studienplan}
@@ -30,4 +29,19 @@ export default {
 			}
 		);
 	},
+	getLvStundenplanForStudiensemester: function (studiensemester, lvid) {
+		return this.$fhcApi.get(
+			`/api/frontend/v1/Stundenplan/getLvStundenplanForStudiensemester/${studiensemester}/${lvid}`,
+			{
+			}
+		);
+	},
+	getLvEvaluierungInfo: function (studiensemester_kurzbz, lvid) {
+		return this.$fhcApi.get(
+			`/api/frontend/v1/Studium/getLvEvaluierungInfo/${studiensemester_kurzbz}/${lvid}`,
+			{
+			}
+		);
+	},
+	
 }

public/js/components/Cis/Mylv/LvInfo.js

@@ -58,13 +58,13 @@ export default {
 		<table class="table table-hover mb-4">
 			<template v-if="event.type == LV_TYPES.moodle">
 				<tbody>
-					<tr>
+					<tr v-if="event?.datum">
 						<th>{{
 							$p.t('global','datum')?
 							$p.t('global','datum')+':'
 							:''
 						}}</th>
-						<td>{{methodFormatDate(event.datum)}}</td>
+						<td>{{methodFormatDate(event?.datum)}}</td>
 					</tr>
 					<tr>
 						<th>{{$p.t('global','aktivitaet')}}:</th>
@@ -100,7 +100,7 @@ export default {
 			</template>
 			<template v-else>
 				<tbody>
-					<tr>
+					<tr v-if="event?.datum">
 						<th>{{
 							$p.t('global','datum')?
 							$p.t('global','datum')+':'

public/js/components/Cis/Mylv/LvMenu.js

@@ -7,6 +7,11 @@ export default {
 		},
 		containerStyles: Array,
 		rowStyles: Array,
+		hasLvStundenplanEintraege: {
+			required:false,
+			default:true,
+			type:Boolean,
+		},
 	},
 	data(){
 		return{
@@ -18,6 +23,9 @@ export default {
 			if (!this.c4_link(menuItem) && !menuItem.c4_moodle_links?.length) {
 				return true;
 			}
+			if (menuItem.id == "addon_fhtw_menu_lvplan_lva" && !this.hasLvStundenplanEintraege){
+				return true;
+			}
 			return null;
 		},
 		c4_target: function (menuItem) {

public/js/components/Cis/Mylv/LvModal.js

@@ -51,7 +51,7 @@ export default {
 
 			if (this.event.type == 'lehreinheit') {
 				this.$api
-					.call(ApiStundenplan.getLehreinheitStudiensemester(this.event.lehreinheit_id[0]))
+					.call(ApiStundenplan.getLehreinheitStudiensemester(Array.isArray(this.event.lehreinheit_id) ? this.event.lehreinheit_id[0] : this.event.lehreinheit_id))
 					.then(res => res.data)
 					.then(studiensemester_kurzbz => this.$api.call(
 						ApiAddons.getLvMenu(

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

@@ -11,6 +11,16 @@ export default  {
             required:true,
             default:null,
         },
+		studiensemester: {
+			type: String,
+			required: false,
+			default: null,
+		},
+		titel: {
+			type: String,
+			required: false,
+			default: null,
+		},
 		// prop used to preselect a menu item and skip the grid overview
 		preselectedMenu: {
 			type: Object,
@@ -23,7 +33,8 @@ export default  {
             result: false,
             menu: [],
 			isMenuSelected:false,
-            
+			hasLvStundenplanEintraege: true,
+			lvEvaluierungMessage: "",
         }
     },
     mixins:[BsModal],
@@ -31,6 +42,7 @@ export default  {
         BsModal,
 		LvMenu,
     },
+	inject: ["studium_studiensemester"],
     methods:{
         
         hiddenModal: function(){
@@ -39,7 +51,7 @@ export default  {
         showModal: function(){
 			if (!this.preselectedMenu) {
                 this.$api
-                    .call(ApiAddons.getLvMenu(this.event.lehrveranstaltung_id, this.event.studiensemester_kurzbz))
+					.call(ApiAddons.getLvMenu(this.event.lehrveranstaltung_id, (this.studiensemester ?? this.event.studiensemester_kurzbz)))
                     .then(res => {
     					if (res.data) {
     						this.menu = res.data;
@@ -48,20 +60,54 @@ export default  {
 			} else {
 				this.isMenuSelected = true;
 			}
+
+			// check lv evaluierung info
+			if (this.studium_studiensemester) {
+				this.$fhcApi.factory.studium.getLvEvaluierungInfo(this.studium_studiensemester, this.event.lehreinheit_id ?? this.event.lehrveranstaltung_id)
+					.then(data => data.data)
+					.then(res => {
+						this.lvEvaluierungMessage = res.message;
+					})
+			}
+
+			// check if the lv has stundenplan entries for this studiensemester
+			if (this.studiensemester && this.event) {
+				return this.$fhcApi.factory.studium.getLvStundenplanForStudiensemester(this.studiensemester, this.event.lehreinheit_id ?? this.event.lehrveranstaltung_id)
+					.then(data => data.data)
+					.then(res => {
+						if (Array.isArray(res) && res.length > 0) {
+							this.hasLvStundenplanEintraege = true;
+						} else {
+							this.hasLvStundenplanEintraege = false;
+						}
+					});
+			}
+			
         },
     },
-    mounted(){
+	mounted(){
         this.modal = this.$refs.modalContainer;
     },
+	beforeUnmount(){
+		this.$refs.modalContainer.hide();
+	},
     template:/*html*/`
     <bs-modal :bodyClass="isMenuSelected ? '' : 'px-4 py-5'" @showBsModal="showModal" @hiddenBsModal="hiddenModal" ref="modalContainer" :dialogClass="{'modal-lg': !isMenuSelected, 'modal-fullscreen':isMenuSelected}">
-        <template #title>
-            <span v-if="event?.lehrfach_bez ">{{event?.lehrfach_bez + (event?.stg_kurzbzlang?' / ' + event?.stg_kurzbzlang:'')}}</span>
-            <span v-else>Lehrveranstaltungs Übersicht</span>
+
+		<template #title>
+            <template v-if="titel">
+				<span>{{titel}}</span>
+			</template>
+			<template v-else>
+				<span v-if="event?.lehrfach_bez ">{{event?.lehrfach_bez + (event?.stg_kurzbzlang?' / ' + event?.stg_kurzbzlang:'')}}</span>
+				<span v-else>Lehrveranstaltungs Übersicht</span>
+			</template>
 
         </template>
         <template #default>
-			<lv-menu v-model:isMenuSelected="isMenuSelected" :preselectedMenu="preselectedMenu" :menu="menu" @hideModal="hide"></lv-menu>
+			<div class="mb-4" v-if="lvEvaluierungMessage" v-html="lvEvaluierungMessage"></div>
+			<slot name="content"></slot>
+			<lv-menu v-model:isMenuSelected="isMenuSelected" :hasLvStundenplanEintraege="hasLvStundenplanEintraege" :preselectedMenu="preselectedMenu" :menu="menu" @hideModal="hide"></lv-menu>
         </template>
         
     </bs-modal>

public/js/components/Cis/Studium/Studium.js

@@ -1,3 +1,6 @@
+import LvUebersicht from "../Mylv/LvUebersicht.js";
+
+
 export default {
 	data(){
 		return {
@@ -9,18 +12,95 @@ export default {
 			selectedStudienordnung: null,
 			semester:[],
 			selectedSemester:null,
+			lehrveranstaltungen: [],
+			selectedLehrveranstaltung: null,
+			menu:null,
 		}
 	},
+	provide(){
+		return {
+			studium_studiengang : Vue.computed(()=> this.selectedStudiengang),
+			studium_studiensemester: Vue.computed(() => this.selectedStudiensemester),
+			studium_semester: Vue.computed(() => this.selectedSemester),
+			studium_studienordnung: Vue.computed(() => this.selectedStudienordnung),
+
+		}
+	},
+	components: {
+		LvUebersicht,
+	},
+	watch:{
+		selectedStudiensemester: function(newVal, oldVal){
+			if(newVal != oldVal){
+				const studiensemester =this.getDataFromLocalStorage("sudiensemester");
+				if (!studiensemester || (studiensemester && studiensemester != newVal)){
+					this.storeDataToLocalStorage("sudiensemester", newVal);
+				}
+			}
+		},
+		selectedSemester: function (newVal, oldVal) {
+			if (newVal != oldVal) {
+				const semester = this.getDataFromLocalStorage("semester");
+				if (!semester || (semester && semester != newVal)) {
+					this.storeDataToLocalStorage("semester", newVal);
+				}
+			}
+		},
+		selectedStudiengang: function (newVal, oldVal) {
+			if (newVal != oldVal) {
+				const studiengang = this.getDataFromLocalStorage("studiengang");
+				if (!studiengang || (studiengang && studiengang != newVal)) {
+					this.storeDataToLocalStorage("studiengang", JSON.stringify(newVal));
+				}
+			}
+		},
+		selectedStudienordnung: function (newVal, oldVal) {
+			if (newVal != oldVal) {
+				const studienordnung = this.getDataFromLocalStorage("studienordnung");
+				if (!studienordnung || (studienordnung && studienordnung != newVal)) {
+					this.storeDataToLocalStorage("studienordnung", JSON.stringify(newVal));
+				}
+			}
+		},
+	},
 	methods:{
-		changeSelectedStudienSemester(studiensemester) {
-			this.$fhcApi.factory.studium.getAllStudienSemester(studiensemester.studiensemester_kurzbz, this.selectedStudiengang, this.selectedSemester, this.selectedStudienordnung)
+		changeStudiensemester(value){
+			let studiensemester = this.$refs.studiensemester;
+			studiensemester.selectedIndex = (studiensemester.selectedIndex + value + studiensemester.options.length) % studiensemester.options.length;
+			this.changeSelectedStudienSemester(studiensemester.value);
+		},
+		changeStudiengang(value) {
+			let studiengang = this.$refs.studiengaenge;
+			studiengang.selectedIndex = (studiengang.selectedIndex + value + studiengang.options.length) % studiengang.options.length;
+			this.changeSelectedStudienGang(studiengang.value);
+		},
+		changeSemester(value) {
+			let semester = this.$refs.semester;
+			semester.selectedIndex = (semester.selectedIndex + value + semester.options.length) % semester.options.length;
+			this.changeSelectedSemester(semester.value);
+		},
+		changeStudienordnung(value) {
+			let studienordnung = this.$refs.studienordnung;
+			studienordnung.selectedIndex = (studienordnung.selectedIndex + value + studienordnung.options.length) % studienordnung.options.length;
+			this.changeSelectedStudienPlan(studienordnung.value);
+		},
+		
+		storeDataToLocalStorage(key,value){
+			localStorage.setItem(key, value);
+		},
+		getDataFromLocalStorage(key){
+			const value = localStorage.getItem(key);
+			return value;
+		},
+		changeSelectedStudienSemester(studiensemester_kurzbz) {
+			this.$fhcApi.factory.studium.getAllStudienSemester(studiensemester_kurzbz, this.selectedStudiengang, this.selectedSemester, this.selectedStudienordnung)
 				.then(data => data.data)
 				.then(res => {
 					this.extractPropertyValues(res);
 				})
 		},
-		changeSelectedStudienGang(studiengang) {
-			this.$fhcApi.factory.studium.getAllStudienSemester(this.selectedStudiensemester, studiengang.studiengang_kz, this.selectedSemester, this.selectedStudienordnung)
+		changeSelectedStudienGang(studiengang_kz) {
+			this.$fhcApi.factory.studium.getAllStudienSemester(this.selectedStudiensemester, studiengang_kz, this.selectedSemester, this.selectedStudienordnung)
 				.then(data => data.data)
 				.then(res => {
 					this.extractPropertyValues(res);
@@ -33,20 +113,25 @@ export default {
 					this.extractPropertyValues(res);
 				})
 		},
-		changeSelectedStudienPlan(studienplan) {
-			this.$fhcApi.factory.studium.getAllStudienSemester(this.selectedStudiensemester, this.selectedStudiengang, this.selectedSemester, studienplan.studienplan_id)
+		changeSelectedStudienPlan(studienplan_id) {
+			this.$fhcApi.factory.studium.getAllStudienSemester(this.selectedStudiensemester, this.selectedStudiengang, this.selectedSemester, studienplan_id)
 				.then(data => data.data)
 				.then(res => {
 					this.extractPropertyValues(res);
 				})
 		},
-		/* loadStudienplan(studiengang, studiensemester){
-			this.$fhcApi.factory.studium.getStudienplaeneBySemester(studiengang, studiensemester)
-				.then(data => data.data)
-				.then(res => {
-					console.log("This is the result", res)
+		openLvUebersicht(lehrveranstaltung) {
+			this.selectedLehrveranstaltung = lehrveranstaltung;
+			//convert lehrveranstaltung properties for compatibility with Stundenplan LvModal
+			this.selectedLehrveranstaltung.type ="lehreinheit";
+			this.selectedLehrveranstaltung.lehreinheit_id = this.selectedLehrveranstaltung.lehrveranstaltung_id;
+			if(this.selectedLehrveranstaltung){
+				Vue.nextTick(()=>{
+					this.$refs.lvUebersicht.show();
 				})
-		}, */
+			}
+			
+		},
 		sortStudienSemester(studienSemester){
 			let regex = new RegExp(/^(WS|SS)([0-9]{4})/);
 			studienSemester.sort((sem1,sem2)=>{
@@ -63,7 +148,7 @@ export default {
 			location.hash = val;
 		},
 		extractPropertyValues(res){
-			let { studienSemester, studiengang, semester, studienplan } = res;
+			let { studienSemester, studiengang, semester, studienplan, lehrveranstaltungen } = res;
 			this.sortStudienSemester(studienSemester.all);
 			this.studienSemester = studienSemester.all;
 			this.selectedStudiensemester = studienSemester.preselected.studiensemester_kurzbz;
@@ -74,10 +159,31 @@ export default {
 			this.semester = semester.all;
 			this.selectedSemester = semester?.preselected;
 
-			console.log(studienplan.all,"all studienplan")
 			this.studienOrdnung = studienplan.all;
-			console.log(this.studienOrdnung,"studienordnung")
 			this.selectedStudienordnung = studienplan.preselected?.studienplan_id;
+
+			this.lehrveranstaltungen = lehrveranstaltungen;
+			this.lehrveranstaltungen.sort((lv1, lv2) => {
+				if (lv1.bezeichnung.toLowerCase() > lv2.bezeichnung.toLowerCase()) {
+					return 1;
+				} else if (lv1.bezeichnung.toLowerCase() < lv2.bezeichnung.toLowerCase()) {
+					return -1;
+				} else {
+					return 0;
+				}
+			});
+
+			this.lehrveranstaltungen.forEach((lehrveranstaltung)=>{
+				lehrveranstaltung.lehrveranstaltungen.sort((lv1,lv2)=>{
+					if (lv1.bezeichnung.toLowerCase() > lv2.bezeichnung.toLowerCase()) {
+						return 1;
+					} else if (lv1.bezeichnung.toLowerCase() < lv2.bezeichnung.toLowerCase()) {
+						return -1;
+					} else {
+						return 0;
+					}
+				})
+			})
 		},
 		studienordnungTitel(studienordnung){
 			if(!studienordnung) return "";
@@ -103,91 +209,154 @@ export default {
 	},
 
 	computed:{
-		
+		selectedLehrveranstaltungTitel(){
+			const studiengang = this.studiengaenge.find((studiengang) => studiengang.studiengang_kz == this.selectedStudiengang);
+			return `${this.selectedLehrveranstaltung?.bezeichnung} ${this.selectedLehrveranstaltung?.lehrform_kurzbz} / ${studiengang.kurzbzlang}-${this.selectedSemester} ${this.selectedLehrveranstaltung?.orgform_kurzbz} (${this.selectedStudiensemester})`;
+		},
+		computedStudienOrdnung(){
+			if(!this.studienOrdnung) return null;
+			return Object.values(this.studienOrdnung).reduce((carry, item)=>{
+				if(!carry[item.bezeichnung]){
+					carry[item.bezeichnung] = [];
+				}
+				carry[item.bezeichnung].push(item);
+				return carry;
+			},{});
+		},
+		computedStudienOrdnungSelectValues() {
+			if (!this.computedStudienOrdnung) return null;
+			let result = [];
+			Object.entries(this.computedStudienOrdnung).forEach(([key,value])=>{
+				result.push({
+					bezeichnung: `Studienordnung: ${key}`,
+					disabled: true,
+				});
+				value.forEach((studienplan)=>{
+					result.push({
+						studienplan:studienplan,
+						diabled: false,
+						bezeichnung: `${studienplan?.bezeichnung}-${studienplan?.orgform_kurzbz} ( ${studienplan?.orgform_bezeichnung}, ${studienplan?.sprache} )`
+							
+					});
+				})
+			});
+			return result;
+		},
 	},
 	
 	created(){
-		this.$fhcApi.factory.studium.getAllStudienSemester()
+
+		const studiensemester = this.getDataFromLocalStorage("sudiensemester") ?? undefined;
+		const studiengang = JSON.parse(this.getDataFromLocalStorage("studiengang")) ?? undefined;
+		const semester = this.getDataFromLocalStorage("semester") ?? undefined;
+		const studienordnung = JSON.parse(this.getDataFromLocalStorage("studienordnung")) ?? undefined;
+
+		// only fetch default data if no data is stored in the local storage
+		
+		this.$fhcApi.factory.studium.getAllStudienSemester(studiensemester, studiengang, semester, studienordnung)
 		.then(data => data.data)
 		.then(res => {
-			this.	extractPropertyValues(res);
+			this.extractPropertyValues(res);
 		})
+
 	},
-	/* selectedStudiensemester(newStudiensemester, oldStudiensemester) {
-		if (newStudiensemester !== oldStudiensemester) {
-			this.$fhcApi.factory.studium.getAllStudienSemester(newStudiensemester, this.selectedStudiengang, this.selectedSemester)
-				.then(data => data.data)
-				.then(res => {
-					this.extractPropertyValues(res);
-				})
-		}
-	},
-	selectedStudiengang(newStudiengang, oldStudiengang) {
-		if (newStudiengang !== oldStudiengang) {
-			this.$fhcApi.factory.studium.getAllStudienSemester(this.selectedStudiensemester, newStudiengang, this.selectedSemester)
-				.then(data => data.data)
-				.then(res => {
-					this.extractPropertyValues(res);
-				})
-		}
-	},
-	selectedSemester(newSemester, oldSemester) {
-		if (newSemester !== oldSemester) {
-			this.$fhcApi.factory.studium.getAllStudienSemester(this.selectedStudiensemester, this.selectedStudiengang, newSemester)
-				.then(data => data.data)
-				.then(res => {
-					this.extractPropertyValues(res);
-				})
-		}
-	} */
 	template: `
-	<h2>this is a test titel</h2>
-	<div class="input-group">
-		<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="prevSem">
-			<i class="fa fa-caret-left" aria-hidden="true"></i>
-		</button>
-		<select ref="studiensemester" v-model="selectedStudiensemester" class="form-select" :aria-label="$p.t('global/studiensemester_auswaehlen')" @change="setHash($event.target.value)">
-			<option v-for="semester in studienSemester" @click="changeSelectedStudienSemester(semester)" :key="semester" :value="semester.studiensemester_kurzbz">{{studiensemesterTitel(semester.studiensemester_kurzbz)	}}</option>
-		</select>
-		<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="nextSem">
-			<i class="fa fa-caret-right" aria-hidden="true"></i>
-		</button>
+	<div>
+	<h2>Studium</h2>
+	<hr>
+	<lv-uebersicht ref="lvUebersicht" :titel="selectedLehrveranstaltungTitel" :event="selectedLehrveranstaltung" :studiensemester="selectedStudiensemester" v-if="selectedLehrveranstaltung">
+		<template #content>
+			<div v-if="Array.isArray(selectedLehrveranstaltung.lektoren) && selectedLehrveranstaltung.lektoren.length>0" class="mb-4">
+				<h4>Lektoren:</h4>
+				<a :href="'mailto:'+lektor?.email" class="mx-2" v-for="lektor in selectedLehrveranstaltung.lektoren">{{lektor.name}}</a>
+			</div>
+			<h4>Menu:</h4>
+		</template>
+	</lv-uebersicht>
+	<div class="lvOptions">
+		<div>
+		<h6>Studiensemester:</h6>
+		<div class="input-group">
+			<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="changeStudiensemester(-1)">
+				<i class="fa fa-caret-left" aria-hidden="true"></i>
+			</button>
+			<select ref="studiensemester" v-model="selectedStudiensemester" class="form-select" :aria-label="$p.t('global/studiensemester_auswaehlen')" @change="setHash($event.target.value)">
+				<option v-for="semester in studienSemester" @click="changeSelectedStudienSemester(semester.studiensemester_kurzbz)" :key="semester" :value="semester.studiensemester_kurzbz">{{studiensemesterTitel(semester.studiensemester_kurzbz)	}}</option>
+			</select>
+			<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="changeStudiensemester(1)">
+				<i class="fa fa-caret-right" aria-hidden="true"></i>
+			</button>
+		</div>
+		</div>
+
+		<div>
+		<h6>Studiengang:</h6>
+		<div class="input-group">
+			<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="changeStudiengang(-1)">
+				<i class="fa fa-caret-left" aria-hidden="true"></i>
+			</button>
+			<select ref="studiengaenge" v-model="selectedStudiengang" class="form-select" :aria-label="$p.t('global/studiensemester_auswaehlen')" @change="setHash($event.target.value)">
+				<option v-for="studiengang in studiengaenge" @click="changeSelectedStudienGang(studiengang.studiengang_kz)" :key="studiengang.studiengang_kz" :value="studiengang.studiengang_kz" >{{studiengangTitel(studiengang)}}</option>
+			</select>
+			<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="changeStudiengang(1)">
+				<i class="fa fa-caret-right" aria-hidden="true"></i>
+			</button>
+		</div>
+		</div>
+
+		<div>
+		<h6>Semester:</h6>
+		<div class="input-group">
+			<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="changeSemester(-1)">
+				<i class="fa fa-caret-left" aria-hidden="true"></i>
+			</button>
+			<select ref="semester" v-model="selectedSemester" class="form-select" :aria-label="$p.t('global/studiensemester_auswaehlen')" @change="setHash($event.target.value)">
+				<option v-for="sem in semester" @click="changeSelectedSemester(sem)" :key="semester" :value="sem">{{sem}}. Semester</option>
+			</select>
+			<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="changeSemester(1)">
+				<i class="fa fa-caret-right" aria-hidden="true"></i>
+			</button>
+		</div>
+		</div>
+
+		<div>
+		<h6>Studienordnung:</h6>
+		<div class="input-group">
+			<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="changeStudienordnung(-1)">
+				<i class="fa fa-caret-left" aria-hidden="true"></i>
+			</button>
+			<select ref="studienordnung" v-model="selectedStudienordnung" class="form-select" :aria-label="$p.t('global/studiensemester_auswaehlen')" @change="setHash($event.target.value)">
+				<option v-for="ordnung in computedStudienOrdnungSelectValues" :disabled="ordnung.disabled" @click="changeSelectedStudienPlan(ordnung?.studienplan?.studienplan_id)" :key="ordnung?.studienplan?.bezeichnung	" :value="ordnung?.studienplan?.studienplan_id">{{ordnung.bezeichnung}}</option>
+			</select>
+			<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="changeStudienordnung(1)">
+				<i class="fa fa-caret-right" aria-hidden="true"></i>
+			</button>
+		</div>
+		</div>
 	</div>
 
-	<div class="input-group">
-		<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="prevSem">
-			<i class="fa fa-caret-left" aria-hidden="true"></i>
-		</button>
-		<select ref="studiengaenge" v-model="selectedStudiengang" class="form-select" :aria-label="$p.t('global/studiensemester_auswaehlen')" @change="setHash($event.target.value)">
-			<option v-for="studiengang in studiengaenge" @click="changeSelectedStudienGang(studiengang)" :key="studiengang.studiengang_kz" :value="studiengang.studiengang_kz" >{{studiengangTitel(studiengang)}}</option>
-		</select>
-		<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="nextSem">
-			<i class="fa fa-caret-right" aria-hidden="true"></i>
-		</button>
+	<hr>
+
+	<div class="lvUebersicht " >
+	<template v-for="lehrveranstaltung in lehrveranstaltungen" :key="lehrveranstaltung.lehrveranstaltung_id">
+		<div  class="card" v-if="Array.isArray(lehrveranstaltung.lehrveranstaltungen) && lehrveranstaltung.lehrveranstaltungen.length >0" >
+			<div class="card-header">
+				<h5 class=" card-title">{{lehrveranstaltung.bezeichnung}}</h5>
+				<h6 class=" card-subtitle">{{lehrveranstaltung.lehrform_kurzbz}}</h6>
+			</div>
+			<div class="card-body">
+				<ul class="list-group list-group-flush">
+					<li class="d-flex list-group-item" v-for="lv in lehrveranstaltung.lehrveranstaltungen">
+						<a class="link-dark d-block me-auto" href="#" @click="openLvUebersicht(lv)">{{lv.bezeichnung}}</a>
+						<p>{{lv.lehrform_kurzbz}}</p>
+					</li>	
+				</ul>
+			</div>
+		</div>
+	</template>
 	</div>
 
-	<div class="input-group">
-		<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="prevSem">
-			<i class="fa fa-caret-left" aria-hidden="true"></i>
-		</button>
-		<select ref="semester" v-model="selectedSemester" class="form-select" :aria-label="$p.t('global/studiensemester_auswaehlen')" @change="setHash($event.target.value)">
-			<option v-for="sem in semester" @click="changeSelectedSemester(sem)" :key="semester" :value="sem">{{sem}}. Semester</option>
-		</select>
-		<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="nextSem">
-			<i class="fa fa-caret-right" aria-hidden="true"></i>
-		</button>
-	</div>
 
-	<div class="input-group">
-		<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="prevSem">
-			<i class="fa fa-caret-left" aria-hidden="true"></i>
-		</button>
-		<select ref="studienordnung" v-model="selectedStudienordnung" class="form-select" :aria-label="$p.t('global/studiensemester_auswaehlen')" @change="setHash($event.target.value)">
-			<option v-for="ordnung in studienOrdnung" @click="changeSelectedStudienPlan(ordnung)" :key="ordnung.bezeichnung	" :value="ordnung.studienplan_id">{{studienordnungTitel(ordnung)}}</option>
-		</select>
-		<button class="btn btn-outline-secondary" type="button" :disabled="false" @click="nextSem">
-			<i class="fa fa-caret-right" aria-hidden="true"></i>
-		</button>
 	</div>
 	
 	`