horizontalsplit component analog to verticalsplit; also built it into Studentenverwaltung.js menu; added defaultRatio prop to both components which defaults to 50/50 seperation

- load dropdown only if dropdown before was chosen
- validation if field in between is empty
- ensure no null value gets into route

application/config/routes.php

@@ -64,6 +64,9 @@ $route['api/v1/system/[S|s]prache/(:any)'] = 'api/v1/system/sprache2/$1';
 $route['Cis/LvPlan/.*'] = 'Cis/LvPlan/index/$1';
 $route['Cis/MyLvPlan/.*'] = 'Cis/MyLvPlan/index/$1';
 $route['Cis/MyLv/.*'] = 'Cis/MyLv/index/$1';
+//Routes for Lvplan Verband and page for dropdown Stg/Semester/Verband/Gruppe
+$route['Cis/StgOrgLvPlan/.*'] = 'Cis/StgOrgLvPlan/index/$1';
+$route['Cis/OverviewLvPlan/.*'] = 'Cis/OverviewLvPlan/index/$1';
 
 $route['Abgabetool/Assistenz'] = 'Cis/Abgabetool/Assistenz';
 $route['Abgabetool/Assistenz/(:any)'] = 'Cis/Abgabetool/Assistenz/$1';

application/controllers/Cis/OverviewLvPlan.php

@@ -0,0 +1,39 @@
+<?php
+
+if (! defined('BASEPATH')) exit('No direct script access allowed');
+
+/**
+ *
+ */
+class OverviewLvPlan extends Auth_Controller
+{
+	/**
+	 * Constructor
+	 */
+	public function __construct()
+	{
+		parent::__construct([
+			'index' => ['basis/cis:r']
+		]);
+
+		// Load Config
+		$this->load->config('calendar');
+	}
+
+	// -----------------------------------------------------------------------------------------------------------------
+	// Public methods
+
+	/**
+	 * @return void
+	 */
+	public function index()
+	{
+
+		$viewData = array(
+			'uid'=>getAuthUID(),
+			'timezone' => $this->config->item('timezone')
+		);
+
+		$this->load->view('CisRouterView/CisRouterView.php', ['viewData' => $viewData, 'route' => 'OverviewLvPlan']);
+	}
+}

application/controllers/Cis/StgOrgLvPlan.php

@@ -0,0 +1,39 @@
+<?php
+
+if (! defined('BASEPATH')) exit('No direct script access allowed');
+
+/**
+ *
+ */
+class StgOrgLvPlan extends Auth_Controller
+{
+	/**
+	 * Constructor
+	 */
+	public function __construct()
+	{
+		parent::__construct([
+			'index' => ['basis/cis:r']
+		]);
+
+		// Load Config
+		$this->load->config('calendar');
+	}
+
+	// -----------------------------------------------------------------------------------------------------------------
+	// Public methods
+
+	/**
+	 * @return void
+	 */
+	public function index()
+	{
+		
+		$viewData = array(
+			'uid'=>getAuthUID(),
+			'timezone' => $this->config->item('timezone')
+		);
+		
+		$this->load->view('CisRouterView/CisRouterView.php', ['viewData' => $viewData, 'route' => 'StgOrgLvPlan']);
+	}
+}

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

@@ -41,7 +41,12 @@ class LvPlan extends FHCAPI_Controller
 			'getLehreinheitStudiensemester' => self::PERM_LOGGED,
 			'studiensemesterDateInterval' => self::PERM_LOGGED,
 			'getLvPlanForStudiensemester' => self::PERM_LOGGED,
-			'getLv' => self::PERM_LOGGED
+			'getLv' => self::PERM_LOGGED,
+			'eventsStgOrg' => self::PERM_LOGGED,
+			'fetchFerienEvents' => self::PERM_LOGGED,
+			'getStudiengaenge' => self::PERM_LOGGED,
+			'getLehrverband' => self::PERM_LOGGED,
+
 		]);
 
         $this->load->library('LogLib');
@@ -83,7 +88,7 @@ class LvPlan extends FHCAPI_Controller
 		// form validation
 		$this->form_validation->set_rules('start_date', "start_date", "required");
 		$this->form_validation->set_rules('end_date', "end_date", "required");
-		
+
 		if (!$this->form_validation->run())
 			$this->terminateWithValidationErrors($this->form_validation->error_array());
 
@@ -100,7 +105,7 @@ class LvPlan extends FHCAPI_Controller
 
 		// fetching ferien events
 		$ferienEvents = $this->fetchFerienEvents($start_date, $end_date);
-		
+
 
 		$this->terminateWithSuccess(array_merge(
 			$lvplanEvents,
@@ -109,6 +114,49 @@ class LvPlan extends FHCAPI_Controller
 		));
 	}
 
+	/**
+	 * fetches LvPlan for studiengang / semester / verband / gruppe
+	 *
+	 * @access public
+	 */
+	public function eventsStgOrg()
+	{
+		$this->load->library('StundenplanLib');
+
+		// form validation
+		$this->form_validation->set_rules('start_date', "start_date", "required");
+		$this->form_validation->set_rules('end_date', "end_date", "required");
+		//$this->form_validation->set_rules('stg_kz', "stg_kz", "required"); //no validation show empty calendar
+
+		if (!$this->form_validation->run())
+		{
+			$this->terminateWithValidationErrors($this->form_validation->error_array());
+			$stgOrgEvents = [];
+			$ferienEvents = [];
+		}
+
+		else
+		{
+			$start_date = $this->input->post('start_date', true);
+			$end_date = $this->input->post('end_date', true);
+			$stg_kz = $this->input->post('stg_kz', true);
+			$sem = $this->input->post('sem', true);
+			$verband = $this->input->post('verband', true);
+			$gruppe = $this->input->post('gruppe', true);
+
+			$result = $this->stundenplanlib->getEventsStgOrg($start_date, $end_date, $stg_kz, $sem, $verband, $gruppe);
+			$stgOrgEvents = $this->getDataOrTerminateWithError($result);
+
+			$result = $this->stundenplanlib->fetchFerienTageEvents($start_date, $end_date, $stg_kz);
+			$ferienEvents = $this->getDataOrTerminateWithError($result);
+		}
+
+		$this->terminateWithSuccess(array_merge(
+			$stgOrgEvents,
+			$ferienEvents
+		));
+	}
+
 	/**
 	 * fetches LvPlan and Ferien events together for the lv
 	 *
@@ -137,7 +185,6 @@ class LvPlan extends FHCAPI_Controller
 
 		// fetching ferien events
 		$ferienEvents = $this->fetchFerienEvents($start_date, $end_date);
-		
 
 		$this->terminateWithSuccess(array_merge(
 			$lvplanEvents,
@@ -287,6 +334,48 @@ class LvPlan extends FHCAPI_Controller
 		return $this->terminateWithSuccess(current($result));
 	}
 
+	public function getStudiengaenge()
+	{
+		$this->load->model('organisation/Studiengang_model','StudiengangModel');
+
+		$this->StudiengangModel->addOrder('typ');
+		$this->StudiengangModel->addOrder('kurzbz');
+		$result = $this->StudiengangModel->loadWhere([
+			'aktiv' => true
+		]);
+
+		$data = $this->getDataOrTerminateWithError($result);
+
+		return $this->terminateWithSuccess($data);
+	}
+
+	public function getLehrverband($studiengang_kz, $semester=null, $verband=null)
+	{
+		$this->load->model('organisation/Lehrverband_model','LehrverbandModel');
+
+		$where = [
+			'aktiv' => true,
+			'studiengang_kz' => $studiengang_kz,
+		];
+
+		if ($semester !== null  && $semester !== 'null' && $semester !== 'undefined') {
+			$where['semester'] = $semester;
+		}
+		if ($verband !== null  && $verband !== 'null' && $verband !== 'undefined') {
+			$where['verband'] = $verband;
+		}
+
+		$this->LehrverbandModel->addOrder('studiengang_kz');
+		$this->LehrverbandModel->addOrder('semester');
+		$this->LehrverbandModel->addOrder('verband');
+		$this->LehrverbandModel->addOrder('gruppe');
+		$result = $this->LehrverbandModel->loadWhere($where);
+
+		$data = $this->getDataOrTerminateWithError($result);
+
+		return $this->terminateWithSuccess($data);
+	}
+
 	/**
 	 * fetch moodle events
 	 *
@@ -338,7 +427,7 @@ class LvPlan extends FHCAPI_Controller
 
 		$currentStudiensemester = $this->StudiensemesterModel->getByDate($start_date);
 		$currentStudiensemester = $this->getDataOrTerminateWithError($currentStudiensemester);
-		
+
 		if ($currentStudiensemester) {
 			$studentsemester_kurzbz = current($currentStudiensemester)->studiensemester_kurzbz;
 
@@ -347,7 +436,7 @@ class LvPlan extends FHCAPI_Controller
 				"studiensemester_kurzbz" => $studentsemester_kurzbz
 			]);
 			$studiengang = $this->getDataOrTerminateWithError($studiengang);
-			
+
 			if ($studiengang)
 				$studiengang_kz = current($studiengang)->studiengang_kz;
 			else
@@ -357,7 +446,7 @@ class LvPlan extends FHCAPI_Controller
 		}
 
 		$ferienEvents = $this->stundenplanlib->fetchFerienTageEvents($start_date, $end_date, $studiengang_kz);
-		
+
 		return $this->getDataOrTerminateWithError($ferienEvents);
 	}
 }

application/libraries/StundenplanLib.php

@@ -445,6 +445,24 @@ class StundenplanLib
 		return success($ferienEventsFlattened);
 	}
 
+	public function getEventsStgOrg( $start, $end, $stg_kz, $sem, $verband, $gruppe)
+	{
+		$this->_ci =& get_instance();
+
+		$this->_ci->load->model('ressource/Stundenplan_model', 'StundenplanModel');
+
+		$stundenplan_data = $this->_ci->StundenplanModel->getStundenplanStudiengang($start, $end, $stg_kz, $sem, $verband, $gruppe);
+		if (isError($stundenplan_data))
+			return $stundenplan_data;
+		$stundenplan_data = getData($stundenplan_data) ?? [];
+
+		$function_error = $this->expandObjectInformation($stundenplan_data);
+		if ($function_error)
+			return $function_error;
+
+		return success($stundenplan_data);
+	}
+
 	// start of the private functions ########################################################################################################
 
 	// function used to sort an array of studiensemester strings

application/models/ressource/Stundenplan_model.php

@@ -388,6 +388,84 @@ class Stundenplan_model extends DB_Model
 		
 		ORDER BY datum, beginn", [$start_date, $end_date, $ma_uid]);
 	}
+
+	/**
+	 * queries Stundenplan and filters by studiengang, semester, verband gruppe
+	 *
+	 * @return void
+	 */
+	public function getStundenplanStudiengang($start_date, $end_date, $stg_kz, $sem, $verband, $gruppe) {
+
+		$qry_params = [$start_date, $end_date, $stg_kz];
+
+		$qry = "
+		SELECT
+			'lehreinheit' as type, beginn, ende, datum,
+			CONCAT(lehrfach,'-',lehrform) as topic,
+			array_agg(DISTINCT lektor) as lektor,
+			array_agg(DISTINCT (gruppe,verband,semester,studiengang_kz,gruppen_kuerzel)) as gruppe,
+			string_agg(DISTINCT ort_kurzbz, '/') as ort_kurzbz,
+			array_agg(DISTINCT lehreinheit_id) as lehreinheit_id,
+			titel, lehrfach, lehrform, lehrfach_bez, organisationseinheit, farbe, lehrveranstaltung_id
+		FROM
+			(
+				SELECT unr,datum,beginn, ende,
+					   CASE
+						   WHEN sp.mitarbeiter_kurzbz IS NOT NULL THEN sp.mitarbeiter_kurzbz
+						   ELSE sp.lektor
+						   END as lektor,
+					   CASE
+						   WHEN gruppe_kurzbz IS NOT NULL THEN gruppe_kurzbz
+						   ELSE CONCAT(UPPER(sp.stg_typ),UPPER(sp.stg_kurzbz),'-',COALESCE(CAST(sp.semester AS varchar),'/'),COALESCE(CAST(sp.verband AS varchar),'/'))
+						   END as gruppen_kuerzel,
+					   (SELECT bezeichnung
+						FROM public.tbl_organisationseinheit
+						WHERE oe_kurzbz IN(
+							SELECT oe_kurzbz
+							FROM lehre.tbl_lehrveranstaltung
+							WHERE lehrveranstaltung_id = sp.lehrveranstaltung_id
+						)) as organisationseinheit,
+					   sp.ort_kurzbz, sp.studiengang_kz, sp.titel,sp.lehreinheit_id,sp.lehrfach_id,sp.anmerkung,fix,lehrveranstaltung_id,stg_kurzbzlang,stg_bezeichnung,stg_typ,fachbereich_kurzbz,lehrfach,lehrfach_bez,farbe,lehrform,anmerkung_lehreinheit,gruppe, verband, semester,stg_kurzbz
+				FROM (
+						 SELECT sp.*
+						 FROM lehre.vw_stundenplan sp
+						 WHERE
+							 sp.datum >= ?
+						   AND sp.datum <= ?
+					 ) sp
+						 JOIN lehre.tbl_stunde ON lehre.tbl_stunde.stunde = sp.stunde
+						WHERE studiengang_kz = ? ";
+
+		if($sem != NULL)
+		{
+			$qry_params[] = $sem;
+			$qry .= " AND (semester = ? OR semester IS NULL)";
+		}
+		if($verband != NULL)
+		{
+			$qry_params[] = $verband;
+			$qry .= " AND (verband = ? OR verband IS NULL OR verband = '0' OR verband = '')";
+		}
+		if($gruppe != NULL)
+		{
+			$qry_params[] = $gruppe;
+			$qry .= " AND (gruppe = ? OR gruppe IS NULL	OR gruppe = '0' OR gruppe = '')	";
+		}
+		$qry.= " AND (
+			gruppe_kurzbz is null OR EXISTS(
+			   SELECT 1
+			  FROM
+				public.tbl_gruppe WHERE gruppe_kurzbz = sp.gruppe_kurzbz AND direktinskription = false
+			)
+		  )";
+
+		$qry.= "	) as subquery
+
+		GROUP BY unr, datum, beginn, ende,  titel, lehrform, lehrfach, lehrfach_bez, organisationseinheit, farbe, lehrveranstaltung_id
+		ORDER BY datum, beginn; ";
+
+		return $this->execReadOnlyQuery($qry, $qry_params);
+	}
 	
 	/**
 	 * NO STANDALONE FUNCTION - Generates a SQL query string to fetch 'stundenplan' events for a specific student within the current semester.

public/css/Studentenverwaltung.css

@@ -2,6 +2,7 @@
 @import './SvgIcons.css';
 @import './components/searchbar/searchbar.css';
 @import './components/verticalsplit.css';
+@import './components/horizontalsplit.css';
 @import './components/FilterComponent.css';
 @import './components/Tabs.css';
 @import './components/Notiz.css';

public/css/components/horizontalsplit.css

@@ -0,0 +1,73 @@
+:root {
+	--fhc-horizontalsplit-hsplitter-bg-color: var(--fhc-background, #eee);
+	--fhc-horizontalsplit-hsplitter-border-color: var(--fhc-border, #eee);
+	--fhc-horizontalsplit-hsplitter-splitactions-color: var(--fhc-dark, #000);
+}
+
+.horizontalsplit-container {
+	display: flex;
+	flex-direction: row;
+	overflow: hidden;
+	max-height: 100%;
+	padding: 0px;
+}
+
+.horizontalsplitted {
+	overflow: auto;
+	flex-shrink: 0;
+}
+
+.horizontalsplitter {
+	flex-shrink: 0;
+	width: 8px;
+	cursor: col-resize;
+	user-select: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.horizontalsplitter.left {
+	border-left: solid 3px var(--fhc-horizontalsplit-hsplitter-border-color);
+}
+
+.horizontalsplitter.right {
+	border-right: solid 3px var(--fhc-horizontalsplit-hsplitter-border-color);
+}
+
+.splitactions.horizontal {
+	background-color: var(--fhc-horizontalsplit-hsplitter-bg-color);
+	color: var(--fhc-horizontalsplit-hsplitter-splitactions-color);
+	display: flex;
+	flex-direction: column;
+	padding: 5px 0 5px 0;
+}
+
+.splitactions.horizontal.left {
+	border-radius: 0 40% 40% 0;
+}
+
+.splitactions.horizontal.right {
+	border-radius: 40% 0 0 40%;
+}
+
+.splitactions.horizontal .splitaction {
+	width: auto;
+	height: 28px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.splitactions.horizontal .splitaction.resize {
+	cursor: col-resize;
+}
+
+#content {
+	padding-top: 0 !important;
+	padding-bottom: 0 !important;
+}
+
+#content > div:first-child {
+	margin-top: 30px;
+}

public/js/api/factory/lvPlan.js

@@ -92,5 +92,31 @@ export default {
 			method: 'get',
 			url: '/api/frontend/v1/LvPlan/getLv/' + lehrveranstaltung_id
 		};
-	}
+	},
+	eventsStgOrg(start_date, end_date, stg_kz, sem, verband, gruppe) {
+		return {
+			method: 'post',
+			url: '/api/frontend/v1/lvPlan/eventsStgOrg',
+			params: { start_date, end_date, stg_kz, sem, verband, gruppe }
+		};
+	},
+	getStudiengaenge(){
+		return {
+			method: 'get',
+			url: '/api/frontend/v1/lvPlan/getStudiengaenge'
+		}
+	},
+	getLehrverband(stg_kz, sem){
+		return {
+			method: 'get',
+			url: `/api/frontend/v1/lvPlan/getLehrverband/${stg_kz}/${sem}`
+		}
+	},
+	getGruppe(stg_kz, sem, verband){
+		return {
+			method: 'get',
+			url: `/api/frontend/v1/lvPlan/getLehrverband/${stg_kz}/${sem}/${verband}`
+		}
+	},
+
 };

public/js/apps/Dashboard/Fhc.js

@@ -17,6 +17,8 @@ import AbgabetoolMitarbeiter from "../../components/Cis/Abgabetool/AbgabetoolMit
 import AbgabetoolAssistenz from "../../components/Cis/Abgabetool/AbgabetoolAssistenz.js";
 import DeadlineOverview from "../../components/Cis/Abgabetool/DeadlineOverview.js";
 import Studium from "../../components/Cis/Studium/Studium.js";
+import StgOrgLvPlan from "../../components/Cis/LvPlan/StgOrg.js";
+import OverviewLvPlan from "../../components/Cis/LvPlan/OverviewLvPlan.js";
 
 import ApiRenderers from '../../api/factory/renderers.js';
 import ApiRouteInfo from '../../api/factory/routeinfo.js';
@@ -197,6 +199,26 @@ const router = VueRouter.createRouter({
 				};
 			}
 		},
+		{
+			path: `/Cis/StgOrgLvPlan/:mode?/:focus_date?/:stgkz?/:sem?/:verband?/:gruppe?`,
+			name: 'StgOrgLvPlan',
+			component: StgOrgLvPlan,
+			props(route) {
+				return {
+					propsViewData: route.params
+				};
+			}
+		},
+		{
+			path: `/Cis/OverviewLvPlan`,
+			name: 'OverviewLvPlan',
+			component: OverviewLvPlan,
+			props(route) {
+				return {
+					propsViewData: route.params
+				};
+			}
+		},
 		{
 			path: `/Cis4`,
 			name: 'Cis4',

public/js/components/Calendar/LvPlan.js

@@ -88,12 +88,15 @@ export default {
 		updateRange(rangeInterval) {
 			this.rangeInterval = rangeInterval;
 			this.$emit('update:range', rangeInterval);
+		},
+		resetEventLoader() {
+			this.reset();
 		}
 	},
 	setup(props, context) {
 		const rangeInterval = Vue.ref(null);
 		
-		const { events, lv } = useEventLoader(rangeInterval, props.getPromiseFunc);
+		const { events, lv, reset } = useEventLoader(rangeInterval, props.getPromiseFunc);
 
 		Vue.watch(lv, newValue => {
 			context.emit('update:lv', newValue);
@@ -102,7 +105,8 @@ export default {
 		return {
 			rangeInterval,
 			events,
-			lv
+			lv,
+			reset
 		};
 	},
 	created() {

public/js/components/Cis/LvPlan/OverviewLvPlan.js

@@ -0,0 +1,194 @@
+import FormForm from '../../Form/Form.js';
+import FormInput from '../../Form/Input.js';
+
+import ApiLvPlan from '../../../api/factory/lvPlan.js';
+
+export default {
+	name: "OverviewLvPlan",
+	components: {
+		FormForm,
+		FormInput,
+	},
+	props: {
+		viewData: Object,
+		propsViewData: Object
+	},
+	data() {
+		return {
+			formData:  {
+				stgkz: null,
+				sem: null,
+				verband: null,
+				gruppe: null,
+			},
+			listStg: [],
+			listSem: [1,2,3,4,5,6,7,8,9,10],
+			listVerband: [],
+			listGroup: [],
+		};
+	},
+	methods: {
+		loadLvPlan() {
+			if (!this.formData.stgkz) {
+				this.$fhcAlert.alertError(this.$p.t('LvPlan', 'chooseStg'));
+				return;
+			}
+			if (!this.formData.sem && (this.formData.verband || this.formData.gruppe)) {
+				this.$fhcAlert.alertError(this.$p.t('LvPlan', 'error_SemMissing'));
+				return;
+			}
+
+			if (!this.formData.verband && this.formData.gruppe) {
+				this.$fhcAlert.alertError(this.$p.t('LvPlan', 'error_VerbandMissing'));
+				return;
+			}
+
+			const params = {
+				mode: this.currentMode,
+				focus_date: this.currentDay,
+				stgkz: this.formData.stgkz,
+				sem: this.formData.sem,
+				verband: this.formData.verband,
+				gruppe: this.formData.gruppe,
+			};
+
+			//ensure logic: no value after a null value in route
+			if (params.sem == null) {
+				params.verband = null;
+				params.gruppe = null;
+			}
+			if (params.verband == null) {
+				params.gruppe = null;
+			}
+
+			//delete all null values to avoid null in router
+			Object.keys(params).forEach(
+				key => params[key] == null && delete params[key]
+			);
+
+			this.$router.push({
+				name: "StgOrgLvPlan",
+				params,
+			});
+		},
+		loadListSem(){
+			this.listSem = [...Array(this.maxSemester).keys()].map(i => i + 1);
+		},
+		loadListVerband(){
+			this.$api
+				.call(ApiLvPlan.getLehrverband(this.formData.stgkz, this.formData.sem, this.formData.verband))
+				.then(result => {
+					const data = result.data;
+					const mappedData = data.map(item => item.verband);
+					this.listVerband = [...new Set(mappedData.filter(v =>
+						v !== null &&
+						v !== undefined &&
+						String(v).trim() !== ""
+					))]
+					.sort();
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		loadListGroup(){
+			this.$api
+				.call(ApiLvPlan.getGruppe(this.formData.stgkz, this.formData.sem, this.formData.verband))
+				.then(result => {
+					const data = result.data;
+					const mappedData = data.map(item => item.gruppe);
+					this.listGroup =  [...new Set(mappedData.filter(v =>
+						v !== null &&
+						v !== undefined &&
+						String(v).trim() !== ""))]
+						.sort();
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		}
+	},
+	computed: {
+		maxSemester(){
+			const currentStg = this.listStg.find(
+				item => item.studiengang_kz === this.formData.stgkz
+			);
+			return currentStg.max_semester;
+		},
+		currentDay() {
+			if (!this.propsViewData?.focus_date || isNaN(new Date(this.propsViewData?.focus_date)))
+				return luxon.DateTime.now().setZone(this.viewData.timezone).toISODate();
+			return this.propsViewData?.focus_date;
+		},
+	},
+	created(){
+		this.$api
+			.call(ApiLvPlan.getStudiengaenge())
+			.then(result => {
+				this. listStg = result.data;
+			})
+			.catch(this.$fhcAlert.handleSystemError);
+	},
+	template: `
+	<div cis-lvplan-stg-org-ues d-flex flex-column h-100>
+				<div class="mt-3">
+	 		<form-form class="row row-cols-1 row-cols-md-2 row-cols-lg-4 row-cols-xl-5 g-3 mb-3">
+	 			<form-input
+	 				type="select"
+	 				v-model="formData.stgkz"
+	 				@change="loadListSem(formData.stgkz)"
+	 				>
+					<option :value="null" selected>{{ $p.t('LvPlan/chooseStg') }}</option>
+					<option
+						v-for="stg in listStg"
+						:key="stg.studiengang_kz"
+						:value="stg.studiengang_kz"
+						>
+						{{ stg.kurzbzlang }} ({{ stg.bezeichnung }})
+					</option>
+	 			</form-input>
+	 			<form-input
+	 				type="select"
+	 				v-model="formData.sem"
+	 				@change="loadListVerband()"
+	 				@click="loadListSem(formData.stgkz)"
+	 				>
+						<option :value="null" selected>Semester</option>
+						<option
+							v-for="sem in listSem"
+							:key="sem"
+							:value="sem"
+							>
+							{{ sem }}
+						</option>
+	 			</form-input>
+	 			<form-input
+	 				type="select"
+	 				v-model="formData.verband"
+	 				@change="loadListGroup()"
+	 				>
+	 					<option :value="null" selected>{{ $p.t('lehre/verband') }} </option>
+					<option
+						v-for="verband in listVerband"
+						:key="verband"
+						:value="verband"
+						>
+						{{ verband }}
+					</option>
+	 			</form-input>
+	 			<form-input
+	 				type="select"
+	 				v-model="formData.gruppe"
+	 				>
+	 				<option :value="null" selected>{{ $p.t('gruppenmanagement/gruppe') }}</option>
+						<option
+							v-for="group in listGroup"
+							:key="group"
+							:value="group"
+							>
+							{{ group }}
+						</option>
+	 			</form-input>
+				<button type="button" class="btn btn-secondary" @click="loadLvPlan">{{ $p.t('LvPlan/loadLvPlan') }}</button>
+
+	 		</form-form>
+	 	</div>
+	 </div>
+	 `,
+};

public/js/components/Cis/LvPlan/StgOrg.js

@@ -0,0 +1,336 @@
+import FormForm from '../../Form/Form.js';
+import FormInput from '../../Form/Input.js';
+import FhcCalendar from "../../Calendar/LvPlan.js";
+
+import ApiLvPlan from '../.././../api/factory/lvPlan.js';
+import ApiAuthinfo from '../../../api/factory/authinfo.js';
+
+export const DEFAULT_MODE_LVPLAN = 'Week';
+
+export default {
+	name: 'LvPlanStgOrg',
+	components: {
+		FormForm,
+		FormInput,
+		FhcCalendar,
+	},
+	props: {
+		viewData: Object,
+		propsViewData: Object
+	},
+	data() {
+		return {
+			localProps: {},
+			studiensemester_kurzbz: null,
+			studiensemester_start: null,
+			studiensemester_ende: null,
+			uid: null,
+			isMitarbeiter: false,
+			isStudent: false,
+			currentStgBezeichnung: null,
+			formData:  {
+				stgkz: null,
+				sem: null,
+				verband: null,
+				gruppe: null,
+			},
+			listStg: [],
+			listSem: [1,2,3,4,5,6,7,8,9,10],
+			listVerband: [],
+			listGroup: [],
+			rangeIntervalFirst: null
+		};
+	},
+	computed: {
+		maxSemester(){
+			const currentStg = this.listStg.find(
+				item => item.studiengang_kz === this.formData.stgkz
+			);
+			return currentStg.max_semester;
+		},
+		currentDay() {
+			if (!this.propsViewData?.focus_date || isNaN(new Date(this.propsViewData?.focus_date)))
+				return luxon.DateTime.now().setZone(this.viewData.timezone).toISODate();
+			return this.propsViewData?.focus_date;
+		},
+		currentMode() {
+			if (!this.propsViewData?.mode || !['day', 'week', 'month'].includes(this.propsViewData?.mode.toLowerCase()))
+				return DEFAULT_MODE_LVPLAN;
+			return this.propsViewData?.mode;
+		},
+		downloadLinks() {
+			if (!this.studiensemester_start || !this.studiensemester_ende || !this.uid)
+				return false;
+
+			let type = false;
+			type = this.isStudent ? 'student' : type;
+			type = this.isMitarbeiter ? 'lektor' : type;
+			if (false === type)
+			{
+				return;
+			}
+
+			const opts = { zone: this.viewData.timezone };
+			const start = luxon.DateTime
+				.fromISO(this.studiensemester_start, opts)
+				.toUnixInteger();
+			const ende = luxon.DateTime
+				.fromISO(this.studiensemester_ende, opts)
+				.toUnixInteger();
+
+			const download_link = FHC_JS_DATA_STORAGE_OBJECT.app_root
+				+ 'cis/private/lvplan/stpl_kalender.php'
+				+ '?type=' + type
+				+ '&pers_uid=' + this.uid
+				+ '&begin=' + start
+				+ '&ende=' + ende;
+
+			return [
+				{ title: "excel", icon: 'fa-solid fa-file-excel', link: download_link + '&format=excel' },
+				{ title: "csv", icon: 'fa-solid fa-file-csv', link: download_link + '&format=csv' },
+				{ title: "ical1", icon: 'fa-regular fa-calendar', link: download_link + '&format=ical&version=1&target=ical' },
+				{ title: "ical2", icon: 'fa-regular fa-calendar', link: download_link + '&format=ical&version=2&target=ical' }
+			];
+		}
+	},
+	methods: {
+		loadLvPlan(){
+			if(!this.formData.stgkz){
+				this.$fhcAlert.alertError(this.$p.t('LvPlan', 'chooseStg'));
+				return;
+			}
+
+			if(!this.formData.sem && (this.formData.verband || this.formData.gruppe)){
+				this.$fhcAlert.alertError(this.$p.t('LvPlan', 'error_SemMissing'));
+				return;
+			}
+
+			if(!this.formData.verband && this.formData.gruppe){
+				this.$fhcAlert.alertError(this.$p.t('LvPlan', 'error_VerbandMissing'));
+				return;
+			}
+
+			const params = {
+				mode: this.currentMode,
+				focus_date: this.currentDay,
+				stgkz: this.formData.stgkz,
+				sem: this.formData.sem,
+				verband: this.formData.verband,
+				gruppe: this.formData.gruppe,
+			};
+
+			//ensure logic: no value after a null value in route
+			if(params.sem == null)
+			{
+				params.verband = null;
+				params.gruppe = null;
+			}
+			if(params.verband == null) {
+				params.gruppe = null;
+			}
+
+			//delete all null values to avoid null in router
+			Object.keys(params).forEach(
+				key => params[key] == null && delete params[key]
+			);
+
+			this.$router.push({
+				name: "StgOrgLvPlan",
+				params,
+			});
+
+			this.$refs['calendar'].resetEventLoader();
+		},
+		loadListSem(){
+			this.listSem = [...Array(this.maxSemester).keys()].map(i => i + 1);
+		},
+		loadListVerband(){
+			this.$api
+				.call(ApiLvPlan.getLehrverband(this.formData.stgkz, this.formData.semester, this.formData.verband))
+				.then(result => {
+					const data = result.data;
+					const mappedData = data.map(item => item.verband);
+					this.listVerband = [...new Set(mappedData.filter(v =>
+						v !== null &&
+						v !== undefined &&
+						String(v).trim() !== ""
+					))]
+						.sort();
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		loadListGroup(){
+			this.$api
+				.call(ApiLvPlan.getGruppe(this.formData.stgkz, this.formData.semester, this.formData.verband))
+				.then(result => {
+					const data = result.data;
+					const mappedData = data.map(item => item.gruppe);
+					this.listGroup =  [...new Set(mappedData.filter(v =>
+						v !== null &&
+						v !== undefined &&
+						String(v).trim() !== ""))]
+						.sort();
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		},
+		handleChangeDate(day, newMode) {
+			return this.handleChangeMode(newMode, day);
+		},
+		handleChangeMode(newMode, day) {
+			const mode = newMode[0].toUpperCase() + newMode.slice(1);
+			const focus_date = day.toISODate();
+
+			this.$router.push({
+				name: "StgOrgLvPlan",
+				params: {
+					mode,
+					focus_date,
+					stgkz: this.formData.stgkz,
+					sem: this.formData.sem,
+					verband: this.formData.verband,
+					gruppe: this.formData.gruppe,
+				},
+			});
+		},
+		updateRange(rangeInterval) {
+			this.$api
+				.call(ApiLvPlan.studiensemesterDateInterval(
+					rangeInterval.end.startOf('week').toISODate()
+				))
+				.then(res => {
+					this.studiensemester_kurzbz = res.data.studiensemester_kurzbz;
+					this.studiensemester_start = res.data.start;
+					this.studiensemester_ende = res.data.ende;
+				});
+		},
+		getPromiseFunc(start, end) {
+			return [
+				this.$api.call(ApiLvPlan.eventsStgOrg(start, end, this.formData.stgkz, this.formData.sem, this.formData.verband, this.formData.gruppe))
+			];
+		},
+	},
+	created(){
+		this.$api
+			.call(ApiAuthinfo.getAuthInfo())
+			.then(res => {
+				this.uid = res.data.uid;
+				this.isMitarbeiter = res.data.isMitarbeiter;
+				this.isStudent = res.data.isStudent;
+			});
+
+		this.$api
+			.call(ApiLvPlan.getStudiengaenge())
+			.then(result => {
+				this. listStg = result.data;
+			})
+			.catch(this.$fhcAlert.handleSystemError);
+
+		if(this.propsViewData) {
+			this.formData.stgkz = this.propsViewData.stgkz ? this.propsViewData.stgkz: null;
+			this.formData.sem = this.propsViewData.sem ? this.propsViewData.sem: null;
+			this.formData.verband = this.propsViewData.verband ? this.propsViewData.verband: null;
+			this.formData.gruppe = this.propsViewData.gruppe ? this.propsViewData.gruppe: null;
+		}
+	},
+	template: `
+	<div class="cis-lvplan-stg-org d-flex flex-column h-100">
+
+		<div class="mt-3">
+	 		<form-form class="row row-cols-1 row-cols-md-2 row-cols-lg-4 row-cols-xl-5 g-3 mb-3">
+	 			<form-input
+	 				type="select"
+	 				v-model="formData.stgkz"
+	 				@change="loadListSem(formData.stgkz)"
+	 				>
+					<option :value="null" selected>{{ $p.t('LvPlan/chooseStg') }}</option>
+					<option
+						v-for="stg in listStg"
+						:key="stg.studiengang_kz"
+						:value="stg.studiengang_kz"
+						>
+						{{ stg.kurzbzlang }} ({{ stg.bezeichnung }})
+					</option>
+	 			</form-input>
+	 			<form-input
+	 				type="select"
+	 				v-model="formData.sem"
+	 				@change="loadListVerband()"
+	 				@click="loadListSem(formData.stgkz)"
+	 				>
+						<option :value="null" selected>Semester</option>
+						<option
+							v-for="sem in listSem"
+							:key="sem"
+							:value="sem"
+							>
+							{{ sem }}
+						</option>
+	 			</form-input>
+	 			<form-input
+	 				type="select"
+	 				v-model="formData.verband"
+	 				@change="loadListGroup()"
+	 				>
+	 					<option :value="null" selected>{{ $p.t('lehre/verband') }} </option>
+					<option
+						v-for="verband in listVerband"
+						:key="verband"
+						:value="verband"
+						>
+						{{ verband }}
+					</option>
+	 			</form-input>
+	 			<form-input
+	 				type="select"
+	 				v-model="formData.gruppe"
+	 				>
+	 				<option :value="null" selected>{{ $p.t('gruppenmanagement/gruppe') }}</option>
+						<option
+							v-for="group in listGroup"
+							:key="group"
+							:value="group"
+							>
+							{{ group }}
+						</option>
+	 			</form-input>
+				<button type="button" class="btn btn-secondary" @click="loadLvPlan">{{ $p.t('LvPlan/loadLvPlan') }}</button>
+
+	 		</form-form>
+	 	</div>
+
+		<fhc-calendar
+			v-show="propsViewData && propsViewData.stgkz"
+			ref="calendar"
+			v-model:lv="formData"
+			:timezone="viewData.timezone"
+			:get-promise-func="getPromiseFunc"
+			:date="currentDay"
+			:mode="currentMode"
+			@update:date="handleChangeDate"
+			@update:mode="handleChangeMode"
+			@update:range="updateRange"
+			class="responsive-calendar"
+		>
+			<div
+				v-if="downloadLinks"
+				class="d-flex gap-1 justify-items-start"
+				>
+				<div v-for="{ title, icon, link } in downloadLinks">
+					<a
+						:href="link"
+						:aria-label="title"
+						class="py-1 btn btn-outline-secondary"
+					>
+						<div class="d-flex flex-column">
+							<i aria-hidden="true" :class="icon"></i>
+							<span style="font-size:.5rem">{{ title }}</span>
+						</div>
+					</a>
+				</div>
+			</div>
+		</fhc-calendar>
+	</div>
+	`,
+
+
+};

public/js/components/Cis/LvPlan/StgOrg_DEPR.js

@@ -0,0 +1,187 @@
+import FhcCalendar from "../../Calendar/LvPlan.js";
+
+import ApiLvPlan from '../.././../api/factory/lvPlan.js';
+import ApiAuthinfo from '../../../api/factory/authinfo.js';
+
+export const DEFAULT_MODE_LVPLAN = 'Week';
+
+export default {
+	name: 'LvPlanStgOrg',
+	inject: {
+		cisRoot: {
+			from: 'cisRoot'
+		},
+	},
+	components: {
+		FhcCalendar,
+	},
+	props: {
+		viewData: Object,
+		propsViewData: Object
+	},
+	data() {
+		return {
+			studiensemester_kurzbz: null,
+			studiensemester_start: null,
+			studiensemester_ende: null,
+			uid: null,
+			isMitarbeiter: false,
+			isStudent: false,
+			listStg: [],
+			currentStgBezeichnung: null
+		};
+	},
+	computed:{
+		currentDay() {
+			if (!this.propsViewData?.focus_date || isNaN(new Date(this.propsViewData?.focus_date)))
+				return luxon.DateTime.now().setZone(this.viewData.timezone).toISODate();
+			return this.propsViewData?.focus_date;
+		},
+		currentMode() {
+			if (!this.propsViewData?.mode || !['day', 'week', 'month'].includes(this.propsViewData?.mode.toLowerCase()))
+				return DEFAULT_MODE_LVPLAN;
+			return this.propsViewData?.mode;
+		},
+		downloadLinks() {
+			if (!this.studiensemester_start || !this.studiensemester_ende || !this.uid)
+				return false;
+
+			let type = false;
+			type = this.isStudent ? 'student' : type;
+			type = this.isMitarbeiter ? 'lektor' : type;
+			if (false === type)
+			{
+				return;
+			}
+
+			const opts = { zone: this.viewData.timezone };
+			const start = luxon.DateTime
+				.fromISO(this.studiensemester_start, opts)
+				.toUnixInteger();
+			const ende = luxon.DateTime
+				.fromISO(this.studiensemester_ende, opts)
+				.toUnixInteger();
+
+			const download_link = FHC_JS_DATA_STORAGE_OBJECT.app_root
+				+ 'cis/private/lvplan/stpl_kalender.php'
+				+ '?type=' + type
+				+ '&pers_uid=' + this.uid
+				+ '&begin=' + start
+				+ '&ende=' + ende;
+
+			return [
+				{ title: "excel", icon: 'fa-solid fa-file-excel', link: download_link + '&format=excel' },
+				{ title: "csv", icon: 'fa-solid fa-file-csv', link: download_link + '&format=csv' },
+				{ title: "ical1", icon: 'fa-regular fa-calendar', link: download_link + '&format=ical&version=1&target=ical' },
+				{ title: "ical2", icon: 'fa-regular fa-calendar', link: download_link + '&format=ical&version=2&target=ical' }
+			];
+		}
+	},
+	methods: {
+		handleChangeDate(day, newMode) {
+			return this.handleChangeMode(newMode, day);
+		},
+		handleChangeMode(newMode, day) {
+			const mode = newMode[0].toUpperCase() + newMode.slice(1)
+			const focus_date = day.toISODate();
+
+			this.$router.push({
+				name: "StgOrgLvPlan",
+				params: {
+					mode,
+					focus_date,
+					stgkz: this.propsViewData.stgkz,
+					sem: this.propsViewData.sem,
+					verband: this.propsViewData.verband,
+					gruppe: this.propsViewData.gruppe,
+				}
+			});
+		},
+		updateRange(rangeInterval) {
+			this.$api
+				.call(ApiLvPlan.studiensemesterDateInterval(
+					rangeInterval.end.startOf('week').toISODate()
+				))
+				.then(res => {
+					this.studiensemester_kurzbz = res.data.studiensemester_kurzbz;
+					this.studiensemester_start = res.data.start;
+					this.studiensemester_ende = res.data.ende;
+				});
+		},
+		getPromiseFunc(start, end) {
+			return [
+				this.$api.call(ApiLvPlan.eventsStgOrg(start.toISODate(), end.toISODate(), this.propsViewData.stgkz, this.propsViewData.sem, this.propsViewData.verband, this.propsViewData.gruppe)),
+				//local for test
+				/*				this.$api.call(ApiLvPlan.eventsStgOrg(start.toISODate(), end.toISODate(), this.stgkz, this.sem, this.verband, this.gruppe))*/
+			];
+		},
+		backToDropdown(){
+			this.$router.push({
+				name: "OverviewLvPlan",
+			});
+		}
+	},
+	created(){
+		this.$api
+			.call(ApiAuthinfo.getAuthInfo())
+			.then(res => {
+				this.uid = res.data.uid;
+				this.isMitarbeiter = res.data.isMitarbeiter;
+				this.isStudent = res.data.isStudent;
+			});
+
+		if(this.propsViewData.stgkz) {
+			this.$api
+				.call(ApiLvPlan.getStudiengaenge())
+				.then(result => {
+					const currentStg = result.data.find(
+						item => item.studiengang_kz == this.propsViewData.stgkz
+					);
+					this.currentStgBezeichnung = currentStg.kurzbzlang + " - " + currentStg.bezeichnung;
+				})
+				.catch(this.$fhcAlert.handleSystemError);
+		}
+	},
+	template: `
+	<div class="cis-lvplan-stg-org d-flex flex-column h-100">
+		<h2>{{ $p.t('LvPlan/headerLvPlanLvVerband') }}</h2>
+		<p v-if="propsViewData.stgkz"><span><strong>{{currentStgBezeichnung}}</strong></span>
+			<span v-if="propsViewData.sem" style="margin-left:10px;"> Semester: {{propsViewData.sem}} </span>
+			<span v-if="propsViewData.verband" style="margin-left:10px;"> Verband: {{propsViewData.verband}} </span>
+			<span v-if="propsViewData.gruppe" style="margin-left:10px;"> Gruppe: {{propsViewData.gruppe}} </span>
+			<button class="py-1 btn btn-outline-secondary" :title="this.$p.t('LvPlan', 'backToDropdown')" style="margin-left:10px;"> <i class="fa fa-arrow-left fa-xs" @click="backToDropdown"></i></button>
+		</p>
+		<p v-else>{{ $p.t('LvPlan/noStgProvided') }}</p>
+
+		<fhc-calendar
+			ref="calendar"
+			:timezone="viewData.timezone"
+			:get-promise-func="getPromiseFunc"
+			:date="currentDay"
+			:mode="currentMode"
+			@update:date="handleChangeDate"
+			@update:mode="handleChangeMode"
+			@update:range="updateRange"
+			class="responsive-calendar"
+		>
+			<div
+				v-if="downloadLinks"
+				class="d-flex gap-1 justify-items-start"
+				>
+				<div v-for="{ title, icon, link } in downloadLinks">
+					<a
+						:href="link"
+						:aria-label="title"
+						class="py-1 btn btn-outline-secondary"
+					>
+						<div class="d-flex flex-column">
+							<i aria-hidden="true" :class="icon"></i>
+							<span style="font-size:.5rem">{{ title }}</span>
+						</div>
+					</a>
+				</div>
+			</div>
+		</fhc-calendar>
+	</div>
+	`,
+};

public/js/components/Cis/Renderer/Lehreinheit/calendarEvent.js

@@ -31,7 +31,7 @@ export default {
 						this.event.lektor.slice(0, 3).map(lektor => lektor.kurzbz).join("\n")
 						+ "\n" + this.$p.t('lehre/weitereLektoren', [this.event.lektor.length - 3])
 					].join(": "));
-				} else {;
+				} else {
 					tooltipArray.push([
 						this.$p.t('lehre/lektor'),
 						this.event.lektor.map(lektor => lektor.kurzbz).join("\n")

public/js/components/Stv/Studentenverwaltung.js

@@ -18,6 +18,7 @@
 import CoreSearchbar from "../searchbar/searchbar.js";
 import NavLanguage from "../navigation/Language.js";
 import VerticalSplit from "../verticalsplit/verticalsplit.js";
+import HorizontalSplit from "../horizontalsplit/horizontalsplit.js";
 import AppMenu from "../AppMenu.js";
 import AppConfig from "../AppConfig.js";
 import StvVerband from "./Studentenverwaltung/Verband.js";
@@ -37,6 +38,7 @@ export default {
 		CoreSearchbar,
 		NavLanguage,
 		VerticalSplit,
+		HorizontalSplit,
 		AppMenu,
 		AppConfig,
 		StvVerband,
@@ -235,6 +237,10 @@ export default {
 					}
 				}
 			}
+		},
+		sidebarCollapsed(newVal) {
+			if(newVal) this.$refs.hSplit.collapseLeft()
+			else this.$refs.hSplit.showBoth()
 		}
 	},
 	methods: {
@@ -632,23 +638,30 @@ export default {
 						</app-menu>
 					</div>
 				</aside>
-				<nav id="sidebarMenu" class="bg-light offcanvas offcanvas-start col-md p-md-0 h-100">
-					<div class="offcanvas-header justify-content-end px-1 d-md-none">
-						<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" :aria-label="$p.t('ui/schliessen')"></button>
-					</div>
-					<stv-verband :preselectedKey="studiengangKz ? '' + studiengangKz : null" :endpoint="verbandEndpoint" @select-verband="onSelectVerband" class="col" style="height:0%"></stv-verband>
-					<stv-studiensemester v-model:studiensemester-kurzbz="studiensemesterKurzbz" @update:studiensemester-kurzbz="studiensemesterChanged"></stv-studiensemester>
-				</nav>
-				<main class="col-md-8 ms-sm-auto col-lg-9 col-xl-10">
-					<vertical-split>
-						<template #top>
-							<stv-list ref="stvList" v-model:selected="selected" :studiengang-kz="studiengangKz" :studiensemester-kurzbz="studiensemesterKurzbz" @filterActive="handleCustomFilter"></stv-list>
-						</template>
-						<template #bottom>
-							<stv-details ref="details" :students="selected" @reload="reloadList"></stv-details>
-						</template>
-					</vertical-split>
-				</main>
+				<horizontal-split ref="hSplit" :defaultRatio="[15, 85]">
+					<template #left>
+						<nav id="sidebarMenu" class="bg-light offcanvas offcanvas-start col-md p-md-0 h-100  w-100">
+							<div class="offcanvas-header justify-content-end px-1 d-md-none">
+								<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" :aria-label="$p.t('ui/schliessen')"></button>
+							</div>
+							<stv-verband :preselectedKey="studiengangKz ? '' + studiengangKz : null" :endpoint="verbandEndpoint" @select-verband="onSelectVerband" class="col" style="height:0%"></stv-verband>
+							<stv-studiensemester v-model:studiensemester-kurzbz="studiensemesterKurzbz" @update:studiensemester-kurzbz="studiensemesterChanged"></stv-studiensemester>
+						</nav>
+					</template>
+					<template #right>
+						<main>
+							<vertical-split :defaultRatio="[50, 50]">
+								<template #top>
+									<stv-list ref="stvList" v-model:selected="selected" :studiengang-kz="studiengangKz" :studiensemester-kurzbz="studiensemesterKurzbz" @filterActive="handleCustomFilter"></stv-list>
+								</template>
+								<template #bottom>
+									<stv-details ref="details" :students="selected" @reload="reloadList"></stv-details>
+								</template>
+							</vertical-split>
+						</main>
+					</template>
+				</horizontal-split>
+				
 			</div>
 		</div>
 		<app-config ref="config" v-model="appconfig" :endpoints="configEndpoints"></app-config>

public/js/components/horizontalsplit/horizontalsplit.js

@@ -0,0 +1,147 @@
+export default {
+	name: 'HorizontalSplit',
+	props: {
+		defaultRatio: {
+			type: Array,
+			default: () => [50, 50]
+		}
+	},
+	data: function () {
+		return {
+			availWidth: 0,
+			leftwidth: 0,
+			rightwidth: 0,
+			mousePosX: 0,
+			resize: false,
+			hsplitterOffset: 0,
+			selfOffsetLeft: 0
+		};
+	},
+	template: `
+    <div ref="horizontalsplit" class="horizontalsplit-container">
+        <div ref="leftpanel" class="horizontalsplitted"
+             :style="{ width: this.leftwidthcss }">
+            <slot name="left">
+                <p>Left Panel</p>
+            </slot>
+        </div>
+        <div ref="hsplitter" class="horizontalsplitter"
+             :class="this.leftOrRightClass" @mousedown="this.dragStart">
+            <div class="splitactions horizontal" :class="this.leftOrRightClass">
+            	<span @click="this.collapseRight" class="splitaction">
+                    <i class="fas fa-angle-right text-muted"></i>
+                </span>
+                <span @dblclick="this.showBoth" class="splitaction resize">
+                    <i class="fas fa-grip-lines-vertical text-muted"></i>
+                </span>
+                <span @click="this.collapseLeft" class="splitaction">
+                    <i class="fas fa-angle-left text-muted"></i>
+                </span>
+            </div>
+        </div>
+        <div ref="rightpanel" class="horizontalsplitted"
+             :style="{ width: this.rightwidthcss }">
+            <slot name="right">
+                <p/>
+            </slot>
+        </div>
+    </div>
+    `,
+	mounted: function () {
+		this.calcWidths();
+		this.trackHorizontalSplitterOffsetLeft();
+		window.addEventListener('resize', this.calcWidths);
+	},
+	updated: function () {
+		this.trackHorizontalSplitterOffsetLeft();
+	},
+	beforeDestroy: function () {
+		window.removeEventListener('resize', this.calcWidths);
+	},
+	methods: {
+		calcWidths: function () {
+			var oldavailWidth = this.availWidth;
+			this.selfOffsetLeft = this.$refs.horizontalsplit.offsetLeft;
+			this.availWidth = this.$refs.horizontalsplit.offsetWidth - this.$refs.hsplitter.offsetWidth;
+
+			if ((this.leftwidth === 0 && this.rightwidth === 0) || oldavailWidth === 0) {
+				this.leftwidth = Math.floor(this.availWidth * (this.defaultRatio[0] / 100));
+			} else {
+				this.leftwidth = Math.floor(((this.leftwidth * 100) / oldavailWidth) / 100 * this.availWidth);
+			}
+			this.rightwidth = this.availWidth - this.leftwidth;
+		},
+		collapseLeft: function () {
+			this.calcWidths();
+			this.leftwidth = 0;
+			this.rightwidth = this.availWidth;
+		},
+		collapseRight: function () {
+			this.calcWidths();
+			this.leftwidth = this.availWidth;
+			this.rightwidth = 0;
+		},
+		showBoth: function () {
+			this.leftwidth = Math.floor(this.availWidth * (this.defaultRatio[0] / 100));
+			this.rightwidth = this.availWidth - this.leftwidth;
+		},
+		isCollapsed: function () {
+			if (this.leftwidth === 0) {
+				return 'left';
+			} else if (this.rightwidth === 0) {
+				return 'right';
+			} else {
+				return false;
+			}
+		},
+		dragStart: function (e) {
+			e.preventDefault();
+			e.stopPropagation();
+			window.addEventListener('mouseup', this.dragEnd);
+			window.addEventListener('mousemove', this.drag);
+			this.resize = true;
+			this.mousePosX = e.clientX;
+		},
+		drag: function (e) {
+			if (!this.resize) {
+				return;
+			}
+			e.preventDefault();
+			e.stopPropagation();
+			var offsetX = e.clientX - this.mousePosX;
+			this.leftwidth = this.leftwidth + offsetX;
+			if (this.leftwidth < 0) {
+				this.leftwidth = 0;
+			}
+			if (this.leftwidth > this.availWidth) {
+				this.leftwidth = this.availWidth;
+			}
+			this.rightwidth = this.availWidth - this.leftwidth;
+			this.mousePosX = e.clientX;
+		},
+		dragEnd: function (e) {
+			e.preventDefault();
+			e.stopPropagation();
+			window.removeEventListener('mousemove', this.drag);
+			window.removeEventListener('mouseup', this.dragEnd);
+			this.resize = false;
+			this.mousePosX = e.clientX;
+		},
+		trackHorizontalSplitterOffsetLeft: function () {
+			this.hsplitterOffset = this.$refs.hsplitter.offsetLeft;
+		}
+	},
+	computed: {
+		leftOrRightClass: function () {
+			return ((this.hsplitterOffset - this.selfOffsetLeft) <= Math.floor(this.availWidth / 2))
+				? 'left'
+				: 'right';
+		},
+		leftwidthcss: function () {
+			return this.leftwidth + 'px';
+		},
+		rightwidthcss: function () {
+			return this.rightwidth + 'px';
+		}
+	}
+};

public/js/components/verticalsplit/verticalsplit.js

@@ -1,5 +1,11 @@
 export default {
     name: 'VerticalSplit',
+    props: {
+        defaultRatio: {
+            type: Array,
+            default: () => [50, 50]
+        }
+    },
     data: function() {
       return {          
           availHeight: 0,
@@ -50,17 +56,22 @@ export default {
     updated: function() {
         this.trackVerticalSplitterOffsetTop();
     },
+    beforeDestroy: function () {
+        window.removeEventListener('resize', this.calcHeights);
+    },
     methods: {
         calcHeights: function() {
             var windowheight = window.innerHeight;
             var oldavailHeight = this.availHeight;
             this.selfOffsetTop = this.$refs.verticalsplit.offsetTop;
             this.availHeight = windowheight - this.selfOffsetTop - this.$refs.vsplitter.offsetHeight;
+           
             if( (this.topheight === 0 && this.bottomheight === 0) || oldavailHeight === 0 ) {
-                this.topheight = Math.floor(this.availHeight/2);
+                this.topheight = Math.floor(this.availHeight * (this.defaultRatio[0] / 100));
             } else {
                 this.topheight = Math.floor( ((((this.topheight * 100) / oldavailHeight) / 100) * this.availHeight) );
             }
+            
             this.bottomheight = this.availHeight - this.topheight;
         },
         collapseTop: function() {
@@ -74,8 +85,8 @@ export default {
             this.bottomheight = 0;
         },
         showBoth: function() {
-            this.topheight = Math.floor(this.availHeight/2);
-            this.bottomheight = Math.floor(this.availHeight/2);
+            this.topheight = Math.floor(this.availHeight * (this.defaultRatio[0] / 100));
+            this.bottomheight = this.availHeight - this.topheight
         },
         isCollapsed: function() {
             if( this.topheight === 0 ) {

public/js/composables/EventLoader.js

@@ -111,7 +111,7 @@ export function useEventLoader(rangeInterval, getPromiseFunc) {
 		return mergePromiseArr(getPromiseFunc(start, end), result);
 	};
 
-	Vue.watchEffect(() => {
+	const reload = () => {
 		const range = Vue.toValue(rangeInterval);
 		if (!(range instanceof luxon.Interval))
 			return;
@@ -132,7 +132,18 @@ export function useEventLoader(rangeInterval, getPromiseFunc) {
 					}
 				})
 			});
-	})
+	};
 
-	return { events: allEvents, lv }
+	Vue.watchEffect(reload);
+	
+	const reset = () => {
+		loading_id = 0;
+		events.value = [];
+		loadingEvents.value = [];
+		eventsLoaded.splice(0, eventsLoaded.length);
+
+		reload();
+	}
+
+	return { events: allEvents, lv, reset }
 }

system/phrasesupdate.php

@@ -57277,6 +57277,149 @@ I have been informed that I am under no obligation to consent to the transmissio
 		)
 	),
 	// ### Phrases Dashboard Admin END
+	
+	// ###  	LvPlanStgOrg 		START 		###
+	array(
+		'app' => 'core',
+		'category' => 'LvPlan',
+		'phrase' => 'noStgProvided',
+		'insertvon' => 'system',
+		'phrases' => array(
+			array(
+				'sprache' => 'German',
+				'text' => 'kein Studiengang hinterlegt',
+				'description' => '',
+				'insertvon' => 'system'
+			),
+			array(
+				'sprache' => 'English',
+				'text' => 'no degree-program provided',
+				'description' => '',
+				'insertvon' => 'system'
+			)
+		)
+	),
+	array(
+		'app' => 'core',
+		'category' => 'LvPlan',
+		'phrase' => 'headerLvPlanLvVerband',
+		'insertvon' => 'system',
+		'phrases' => array(
+			array(
+				'sprache' => 'German',
+				'text' => 'Lv-Plan Lehrverband',
+				'description' => '',
+				'insertvon' => 'system'
+			),
+			array(
+				'sprache' => 'English',
+				'text' => 'Course-Plan Teaching Association',
+				'description' => '',
+				'insertvon' => 'system'
+			)
+		)
+	),
+	array(
+		'app' => 'core',
+		'category' => 'LvPlan',
+		'phrase' => 'chooseStg',
+		'insertvon' => 'system',
+		'phrases' => array(
+			array(
+				'sprache' => 'German',
+				'text' => 'Studiengang auswählen...',
+				'description' => '',
+				'insertvon' => 'system'
+			),
+			array(
+				'sprache' => 'English',
+				'text' => 'Select a degree-program...',
+				'description' => '',
+				'insertvon' => 'system'
+			)
+		)
+	),
+	array(
+		'app' => 'core',
+		'category' => 'LvPlan',
+		'phrase' => 'loadLvPlan',
+		'insertvon' => 'system',
+		'phrases' => array(
+			array(
+				'sprache' => 'German',
+				'text' => 'Lehrverband laden',
+				'description' => '',
+				'insertvon' => 'system'
+			),
+			array(
+				'sprache' => 'English',
+				'text' => 'Load Course-Plan',
+				'description' => '',
+				'insertvon' => 'system'
+			)
+		)
+	),
+	array(
+		'app' => 'core',
+		'category' => 'LvPlan',
+		'phrase' => 'backToDropdown',
+		'insertvon' => 'system',
+		'phrases' => array(
+			array(
+				'sprache' => 'German',
+				'text' => 'Zurück zum Auswahl-Dropdown',
+				'description' => '',
+				'insertvon' => 'system'
+			),
+			array(
+				'sprache' => 'English',
+				'text' => 'Back to Dropdown',
+				'description' => '',
+				'insertvon' => 'system'
+			)
+		)
+	),
+	array(
+		'app' => 'core',
+		'category' => 'LvPlan',
+		'phrase' => 'error_SemMissing',
+		'insertvon' => 'system',
+		'phrases' => array(
+			array(
+				'sprache' => 'German',
+				'text' => 'Semester wählen',
+				'description' => '',
+				'insertvon' => 'system'
+			),
+			array(
+				'sprache' => 'English',
+				'text' => 'Select a semester',
+				'description' => '',
+				'insertvon' => 'system'
+			)
+		)
+	),
+	array(
+		'app' => 'core',
+		'category' => 'LvPlan',
+		'phrase' => 'error_VerbandMissing',
+		'insertvon' => 'system',
+		'phrases' => array(
+			array(
+				'sprache' => 'German',
+				'text' => 'Verband wählen',
+				'description' => '',
+				'insertvon' => 'system'
+			),
+			array(
+				'sprache' => 'English',
+				'text' => 'Select a verband',
+				'description' => '',
+				'insertvon' => 'system'
+			)
+		)
+	),
+	// ### 		LvPlanStgOrg 		END 		###
 );