backport compat controller and component

public/js/apps/Cis/Cis.js

@@ -19,6 +19,7 @@ import DeadlineOverview from "../../components/Cis/Abgabetool/DeadlineOverview.j
 import Studium from "../../components/Cis/Studium/Studium.js";
 import StgOrgLvPlan from "../../components/Cis/LvPlan/StgOrg.js";
 import OtherLvPlan from "../../components/Cis/LvPlan/OtherLvPlan.js";
+import Compat from "../../components/Cis/Compat.js";
 
 import ApiRouteInfo from '../../api/factory/routeinfo.js';
 import {capitalize} from "../../helpers/StringHelpers.js";
@@ -29,6 +30,18 @@ const isMobile = window.matchMedia("(max-width: 767px)").matches;
 const router = VueRouter.createRouter({
 	history: VueRouter.createWebHistory(`/${ciPath}`),
 	routes: [
+		{
+			path: `/Cis/Compat/:mode(ci|legacy)/:path(.*)`,
+			name: 'Compat',
+			component: Compat,
+			props: (route) => {
+				return {
+					mode: route.params.mode,
+					path: route.params.path,
+					query_string: VueRouter.stringifyQuery(route.query)
+				};
+			}
+		},
 		{
 			path: `/Cis/Studium`,
 			name: 'Studium',
@@ -277,7 +290,7 @@ const app = Vue.createApp({
 			if (target && this.isInternalRoute(target.href)) {
 				const url = new URL(target.href)
 				
-				const path = url.pathname
+				const path = url.pathname + url.search;
 				const base = this.$router.options.history.base
 				const route = path.replace(base, '') || '/'
 

public/js/components/Cis/Compat.js

@@ -0,0 +1,93 @@
+export default {
+	name: "Compat",
+	props: {
+		mode: { type: String, required: true },
+		path: { type: String, required: true },
+		query_string: { type: String, required: true, default: ''}
+	},
+	data: function() {
+		return {
+			lastLoadediFrameURL: '',
+			srcUrl: ''
+		};
+	},
+	computed: {
+		propsWatchHelper: function() {
+			return this.mode + '#' + this.path + '#' + this.query_string;
+		}
+	},
+	mounted: function() {
+		this.srcUrl = this.buildSrcUrl();
+	},
+	watch: {
+		propsWatchHelper: function() {
+			if(this.lastLoadediFrameURL === '') {
+				return;
+			}
+
+			let currentiFrameURL = this.$refs.compatiframe ? this.$refs.compatiframe.src : '';
+
+			let url = this.buildSrcUrl();
+			if(this.lastLoadediFrameURL !== url) {
+				this.srcUrl = url;
+				if(this.srcUrl === url) {
+					this.$refs.compatiframe.contentWindow.location.href = url;
+				}
+			}
+		}
+	},
+	methods: {
+		buildSrcUrl: function() {
+			let url = false;
+			switch(this.mode) {
+				case 'ci':
+					url = FHC_JS_DATA_STORAGE_OBJECT.app_root + 'index.ci.php/' + this.path;
+					break;
+				case 'legacy':
+					url = FHC_JS_DATA_STORAGE_OBJECT.app_root + this.path;
+					break;
+				default:
+					url = false;
+			}
+			if(this.query_string !== '' && url) {
+				url += '?' + this.query_string;
+			}
+
+			return url;
+		},
+		loadHandler: function() {
+			let iframe_href = this.$refs.compatiframe.contentWindow.location.href;
+			let ci_urlstart = FHC_JS_DATA_STORAGE_OBJECT.app_root + 'index.ci.php/';
+			let legacy_urlstart = FHC_JS_DATA_STORAGE_OBJECT.app_root;
+			let routerpath = null;
+
+			this.lastLoadediFrameURL = iframe_href;
+
+			if(iframe_href.startsWith(ci_urlstart)) {
+				routerpath = iframe_href.replace(
+					ci_urlstart, '/Cis/Compat/ci/');
+			} else if(iframe_href.startsWith(legacy_urlstart)) {
+				routerpath = iframe_href.replace(
+					legacy_urlstart, '/Cis/Compat/legacy/');
+			} else {
+				return;
+			}
+
+			if(this.$route.fullPath !== routerpath) {
+				this.$router.push(routerpath);
+			}
+		}
+	},
+	template: `
+		<div class="w-100">
+			<iframe
+				ref="compatiframe"
+				v-if="srcUrl"
+				:src="srcUrl"
+				@load="loadHandler"
+				style="width:100%; height:90vh; border:0; display:block;"
+			></iframe>
+		<div v-else class="alert alert-warning">Keine URL gefunden.</div>
+		</div>
+	`
+};