diff --git a/public/js/apps/Cis.js b/public/js/apps/Cis.js index 232d9a009..4355854e0 100644 --- a/public/js/apps/Cis.js +++ b/public/js/apps/Cis.js @@ -18,7 +18,6 @@ import AbgabetoolAssistenz from "../components/Cis/Abgabetool/AbgabetoolAssisten import DeadlineOverview from "../components/Cis/Abgabetool/DeadlineOverview.js"; import Studium from "../components/Cis/Studium/Studium.js"; -import ApiRenderers from '../api/factory/renderers.js'; import ApiRouteInfo from '../api/factory/routeinfo.js'; import {capitalize} from "../helpers/StringHelpers.js"; @@ -229,8 +228,7 @@ const router = VueRouter.createRouter({ const app = Vue.createApp({ name: 'CisApp', data: () => ({ - appSideMenuEntries: {}, - renderers: null, + appSideMenuEntries: {} }), components: {}, computed: { @@ -243,7 +241,6 @@ const app = Vue.createApp({ provide() { return { // provide injectable & watchable language property language: Vue.computed(() => this.$p.user_language), - renderers: Vue.computed(() => this.renderers), isMobile: this.isMobile } }, @@ -282,46 +279,6 @@ const app = Vue.createApp({ } } }, - async created(){ - - await this.$api - .call(ApiRenderers.loadRenderers()) - .then(res => res.data) - .then(data => { - for (let rendertype of Object.keys(data)) { - let modalTitle = null; - let modalContent = null; - let calendarEvent = null; - if (data[rendertype].modalTitle) - modalTitle = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].modalTitle))); - if (data[rendertype].modalContent) - modalContent = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].modalContent))); - if (data[rendertype].calendarEvent) - calendarEvent = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].calendarEvent))); - - if (data[rendertype].calendarEventStyles){ - var head = document.head; - if(!head.querySelector(`link[href="${data[rendertype].calendarEventStyles}"]`)){ - var link = document.createElement("link"); - link.type = "text/css"; - link.rel = "stylesheet"; - link.href = data[rendertype].calendarEventStyles; - head.appendChild(link); - } - } - - if(this.renderers === null) { - this.renderers = {}; - } - if (!this.renderers[rendertype]) { - this.renderers[rendertype] = {} - } - this.renderers[rendertype].modalTitle = modalTitle; - this.renderers[rendertype].modalContent = modalContent; - this.renderers[rendertype].calendarEvent = calendarEvent; - } - }); - }, mounted() { document.addEventListener('click', this.handleClick); diff --git a/public/js/apps/Dashboard/Admin.js b/public/js/apps/Dashboard/Admin.js index 32909a50a..685e1bc9c 100644 --- a/public/js/apps/Dashboard/Admin.js +++ b/public/js/apps/Dashboard/Admin.js @@ -3,13 +3,10 @@ import DashboardAdmin from '../../components/Dashboard/Admin.js'; import PluginsPhrasen from '../../plugins/Phrasen.js'; -import ApiRenderers from '../../api/factory/renderers.js'; - const app = Vue.createApp({ name: 'DashboardAdminApp', data: () => ({ - appSideMenuEntries: {}, - renderers: null + appSideMenuEntries: {} }), components: { CoreNavigationCmpt, @@ -17,49 +14,8 @@ const app = Vue.createApp({ }, provide() { return { - // TODO(chris): move those two into the components that need it - renderers: Vue.computed(() => this.renderers), timezone: FHC_JS_DATA_STORAGE_OBJECT.timezone }; - }, - created() { - this.$api - .call(ApiRenderers.loadRenderers()) - .then(res => { - for (let rendertype of Object.keys(res.data)) { - let modalTitle = null; - let modalContent = null; - let calendarEvent = null; - if (res.data[rendertype].modalTitle) - modalTitle = Vue.markRaw(Vue.defineAsyncComponent(() => import(res.data[rendertype].modalTitle))); - if (res.data[rendertype].modalContent) - modalContent = Vue.markRaw(Vue.defineAsyncComponent(() => import(res.data[rendertype].modalContent))); - if (res.data[rendertype].calendarEvent) - calendarEvent = Vue.markRaw(Vue.defineAsyncComponent(() => import(res.data[rendertype].calendarEvent))); - - if (res.data[rendertype].calendarEventStyles) { - var head = document.head; - if (!head.querySelector(`link[href="${res.data[rendertype].calendarEventStyles}"]`)) { - var link = document.createElement("link"); - link.type = "text/css"; - link.rel = "stylesheet"; - link.href = res.data[rendertype].calendarEventStyles; - head.appendChild(link); - } - } - - if (this.renderers === null) { - this.renderers = {}; - } - if (!this.renderers[rendertype]) { - this.renderers[rendertype] = {} - } - this.renderers[rendertype].modalTitle = modalTitle; - this.renderers[rendertype].modalContent = modalContent; - this.renderers[rendertype].calendarEvent = calendarEvent; - } - }) - .catch(this.$fhcAlert.handleSystemErrors); } }); app.use(PluginsPhrasen); diff --git a/public/js/components/Calendar/LvPlan.js b/public/js/components/Calendar/LvPlan.js index e0e918f01..3bd4fdafb 100644 --- a/public/js/components/Calendar/LvPlan.js +++ b/public/js/components/Calendar/LvPlan.js @@ -3,6 +3,7 @@ import FhcCalendar from "./Base.js"; import ApiLvPlan from '../../api/factory/lvPlan.js'; import { useEventLoader } from '../../composables/EventLoader.js'; +import { useRenderers } from '../../composables/Renderers.js'; import ModeDay from './Mode/Day.js'; import ModeWeek from './Mode/Week.js'; @@ -13,9 +14,6 @@ export default { components: { FhcCalendar }, - inject: [ - "renderers" - ], props: { timezone: { type: String, @@ -99,10 +97,13 @@ export default { context.emit('update:lv', newValue); }); + const { renderers } = useRenderers(); + return { rangeInterval, events, - lv + lv, + renderers }; }, created() { diff --git a/public/js/components/Calendar/Widget.js b/public/js/components/Calendar/Widget.js index f9d641d4e..b08c48acb 100644 --- a/public/js/components/Calendar/Widget.js +++ b/public/js/components/Calendar/Widget.js @@ -1,6 +1,7 @@ import FhcCalendar from "./Base.js"; import { useEventLoader } from '../../composables/EventLoader.js'; +import { useRenderers } from '../../composables/Renderers.js'; import ModeList from '../Calendar/Mode/List.js'; @@ -9,9 +10,6 @@ export default { components: { FhcCalendar }, - inject: [ - "renderers" - ], props: { timezone: { type: String, @@ -59,10 +57,12 @@ export default { const rangeInterval = Vue.ref(null); const { events } = useEventLoader(rangeInterval, props.getPromiseFunc); + const { renderers } = useRenderers(); return { rangeInterval, - events + events, + renderers }; }, template: /* html */` diff --git a/public/js/composables/Renderers.js b/public/js/composables/Renderers.js new file mode 100644 index 000000000..c250c27b5 --- /dev/null +++ b/public/js/composables/Renderers.js @@ -0,0 +1,50 @@ +import ApiRenderers from '../api/factory/renderers.js'; + +/** + * @return object { renderers: Object } + */ +export function useRenderers() { + /* Result Vars */ + const renderers = Vue.ref(null); + + /* Helper Vars */ + const $api = Vue.inject('$api'); + const $fhcAlert = Vue.inject('$fhcAlert'); + + /* Main Logic */ + $api + .call(ApiRenderers.loadRenderers()) + .then(res => { + const head = document.head; + for (const rendertype of Object.keys(res.data)) { + const renderersForType = {}; + for (const name of Object.keys(res.data[rendertype])) { + const rendererUrl = res.data[rendertype][name]; + if (rendererUrl.substr(-4) == ".css") { + // add to head + if (!head.querySelector(`link[href="${rendererUrl}"]`)) { + var link = document.createElement("link"); + link.type = "text/css"; + link.rel = "stylesheet"; + link.href = rendererUrl; + head.appendChild(link); + } + } else { + renderersForType[name] = Vue.markRaw( + Vue.defineAsyncComponent(() => import(rendererUrl)) + ); + } + } + if (Object.keys(renderersForType).length) { + if (renderers.value === null) + renderers.value = {}; + renderers.value[rendertype] = renderersForType; + } + } + }) + .catch($fhcAlert.handleSystemErrors); + + return { + renderers + }; +} \ No newline at end of file