added range view to other lv plan

public/css/Cis4/print.css

@@ -17,13 +17,15 @@
 
 body
 {
-  padding-top: 0 !important;
+	padding-top: 0 !important;
 }
 
 header,
 #skiplink,
 #cis-lvplan-personal-heading,
+#cis-other-lvplan-heading,
 .cis-lvplan-personal hr,
+.cis-other-lvplan hr,
 .fhc-calendar-base-header,
 .fhc-calendar-mode-range .grid-allday,
 .fhc-calendar-mode-range #rangePresetSelector,

public/js/components/Cis/LvPlan/OtherLvPlan.js

@@ -5,6 +5,7 @@ import FhcCalendar from "../../Calendar/LvPlan.js";
 import ApiLvPlan from "../.././../api/factory/lvPlan.js";
 import ApiOtherLvPlan from "../.././../api/factory/otherLvPlan.js";
 import ApiAuthinfo from "../../../api/factory/authinfo.js";
+import ApiStudiensemester from '../../../api/factory/studiensemester.js';
 
 export const DEFAULT_MODE_LVPLAN_DESKTOP = "Week";
 export const DEFAULT_MODE_LVPLAN_MOBILE = "List";
@@ -36,9 +37,23 @@ export default {
 				photo: "",
 			},
 			timezone: FHC_JS_DATA_STORAGE_OBJECT.timezone,
+			semesterRangePresets: {
+				label: null,
+				presets: [],
+			},
 		};
 	},
 	inject: ["isMobile"],
+	provide() {
+		return { 
+			rangeLength: Vue.computed(() => {
+				if (!this.$route.params.range_length) return 30;
+				else if (this.$route.params.range_length > 365) return 365;
+				else return this.$route.params.range_length;
+			}),
+			rangeViewPresets: Vue.computed(() => this.semesterRangePresets)
+		};
+	},
 	computed: {
 		currentDay() {
 			if (
@@ -50,7 +65,11 @@ export default {
 		},
 		currentMode() {
 			let validModes = ["day", "month"];
-			validModes.push(this.isMobile ? "list" : "week");
+			if (!this.isMobile) {
+				validModes.push("week", "range");
+			} else {
+				validModes.push("list");
+			}
 
 			const defaultMode = this.isMobile
 				? DEFAULT_MODE_LVPLAN_MOBILE
@@ -151,10 +170,10 @@ export default {
 		},
 	},
 	methods: {
-		handleChangeDate(day, newMode) {
-			return this.handleChangeMode(newMode, day);
+		handleChangeDate(day, newMode, rangeLength) {
+			return this.handleChangeMode(newMode, day, rangeLength);
 		},
-		handleChangeMode(newMode, day) {
+		handleChangeMode(newMode, day, range_length = null) {
 			const mode = newMode[0].toUpperCase() + newMode.slice(1);
 			const focus_date = day.toISODate();
 
@@ -163,6 +182,7 @@ export default {
 				params: {
 					mode,
 					focus_date,
+					range_length,
 				},
 			});
 		},
@@ -240,15 +260,34 @@ export default {
 				this.$p.t("profil/name_title_clipboard_copy_confirmation"),
 			);
 		},
+		async fetchSemesters() {
+			const semestersResponse = await this.$api.call(ApiStudiensemester.getAll());
+			if (semestersResponse.meta.status === "success") {
+				this.semesterRangePresets = {
+					label: "View specific semester",
+					presets: semestersResponse.data.map((semester) => {
+						let startDate = luxon.DateTime.fromISO(semester.start);
+						let endDate = luxon.DateTime.fromISO(semester.ende);
+						return {
+							startDate,
+							endDate,
+							name: semester.studiensemester_kurzbz,
+							description: semester.bezeichnung,
+						};
+					})
+				};
+			}
+		},
 	},
 	async created() {
 		await this.redirectToMyLvPlanIfAuthUid();
 		await this.fetchViewData();
 		await this.$p.loadCategory(["profil"]);
+		await this.fetchSemesters();
 	},
 	template: /*html*/ `
-    <div class="d-flex flex-column h-100">
-        <h2>
+    <div class="cis-other-lvplan d-flex flex-column h-100">
+        <h2 id="cis-other-lvplan-heading">
             <div class="d-flex flex-row justify-content-between align-items-center">
 			          <span>    
                     {{ $p.t('lehre/stundenplan') + (studiensemester_kurzbz ? " " + studiensemester_kurzbz : "") }}
@@ -272,6 +311,7 @@ export default {
             :get-promise-func="getPromiseFunc"
             :date="currentDay"
             :mode="currentMode"
+			:shouldIncludeRangeMode="true"
             @update:date="handleChangeDate"
             @update:mode="handleChangeMode"
             @update:range="updateRange"

public/js/routers/Cis/CisRouter.js

@@ -246,7 +246,7 @@ const router = VueRouter.createRouter({
 			}
 		},
 		{
-      		path: `/Cis/OtherLvPlan/:otherUid/:mode?/:focus_date?`,
+      		path: `/Cis/OtherLvPlan/:otherUid/:mode?/:focus_date?/:range_length?`,
       		name: "OtherLvPlan",
       		component: OtherLvPlan,
       		props(route) {