diff --git a/application/controllers/api/frontend/v1/RendererLoader.php b/application/controllers/api/frontend/v1/RendererLoader.php new file mode 100644 index 000000000..dc16bb3fc --- /dev/null +++ b/application/controllers/api/frontend/v1/RendererLoader.php @@ -0,0 +1,72 @@ +. + */ + +if (! defined('BASEPATH')) exit('No direct script access allowed'); + +use CI3_Events as Events; + +class RendererLoader extends FHCAPI_Controller +{ + + /** + * Object initialization + */ + public function __construct() + { + + parent::__construct([ + 'GetRenderers' => self::PERM_LOGGED, + + ]); + + $this->load->library('LogLib'); + $this->loglib->setConfigs(array( + 'classIndex' => 5, + 'functionIndex' => 5, + 'lineIndex' => 4, + 'dbLogType' => 'API', // required + 'dbExecuteUser' => 'RESTful API' + )); + + + } + + //------------------------------------------------------------------------------------------------------------------ + // Public methods + + /** + * fetches Stundenplan and Moodle events together + * @access public + * + */ + public function GetRenderers(){ + $renderer_paths = []; + Events::trigger( + 'loadRenderers', + function & () use (&$renderer_paths) + { + return $renderer_paths; + } + ); + $this->terminateWithSuccess($renderer_paths); + } + + + + +} diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css index 1de5e575b..202768d90 100644 --- a/public/css/components/calendar.css +++ b/public/css/components/calendar.css @@ -320,4 +320,79 @@ .selectedEvent { background-color: #00649c !important; color: white; +} + + +.dayPageContainer, .weekPageContainer{ + container-type: inline-size; +} + +.dayPageContainer .lehreinheitEventContent, +.weekPageContainer .lehreinheitEventContent { + display: flex; + flex-direction: column; +} + +.dayPageContainer .moodleEventContent, +.weekPageContainer .moodleEventContent{ + display: flex; + flex-direction: row; +} + +.dayPageContainer .lehreinheitEventContent{ + flex-grow:1; + align-items: center; + font-size: 0.875rem; + font-weight: 400; + line-height:1.25; +} + +.dayPageContainer .lehreinheitEventHeader { + display: flex; + flex-direction: column; + padding: 1rem; + border-right: 1px solid gray; +} + +.dayPageContainer .moodleEventContent { + align-items: center; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.25; + width:100%; +} + +.weekPageContainer .moodleEventContent { + align-items: center; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.25; + width: 100%; +} + +.weekPageContainer .lehreinheitEventHeader { + display: flex; + flex-direction: column; + padding: 1rem; + border-right: 1px solid gray; +} + +.weekPageContainer .lehreinheitEventContent { + flex-grow: 1; + align-items: center; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.25; +} + + +@container( min-width: 500px){ + .dayPageContainer .lehreinheitEventContent, + .weekPageContainer .lehreinheitEventContent { + flex-direction: row; + } + + .dayPageContainer .lehreinheitEventContent{ + justify-content: space-evenly; + } } \ No newline at end of file diff --git a/public/js/api/factory/renderers.js b/public/js/api/factory/renderers.js new file mode 100644 index 000000000..fee81e4df --- /dev/null +++ b/public/js/api/factory/renderers.js @@ -0,0 +1,12 @@ + +export default { + + loadRenderers() { + return { + method: 'get', + url: '/api/frontend/v1/RendererLoader/GetRenderers', + params: { + } + }; + }, +} \ No newline at end of file diff --git a/public/js/apps/Dashboard/Fhc.js b/public/js/apps/Dashboard/Fhc.js index fc25fbdfe..cdd69362c 100644 --- a/public/js/apps/Dashboard/Fhc.js +++ b/public/js/apps/Dashboard/Fhc.js @@ -15,6 +15,8 @@ import AbgabetoolMitarbeiter from "../../components/Cis/Abgabetool/AbgabetoolMit import DeadlineOverview from "../../components/Cis/Abgabetool/DeadlineOverview.js"; import Studium from "../../components/Cis/Studium/Studium.js"; +import ApiRenderers from '../../api/factory/renderers.js'; + const ciPath = FHC_JS_DATA_STORAGE_OBJECT.app_root.replace(/(https:|)(^|\/\/)(.*?\/)/g, '') + FHC_JS_DATA_STORAGE_OBJECT.ci_router; const router = VueRouter.createRouter({ @@ -234,7 +236,8 @@ const router = VueRouter.createRouter({ const app = Vue.createApp({ name: 'FhcApp', data: () => ({ - appSideMenuEntries: {} + appSideMenuEntries: {}, + renderers: {}, }), components: {}, computed: { @@ -244,7 +247,8 @@ const app = Vue.createApp({ }, provide() { return { // provide injectable & watchable language property - language: Vue.computed(() => this.$p.user_language) + language: Vue.computed(() => this.$p.user_language), + renderers: Vue.computed(() => this.renderers), } }, methods: { @@ -282,6 +286,14 @@ const app = Vue.createApp({ } } }, + async created(){ + await this.$api + .call(ApiRenderers.loadRenderers()) + .then(res => res.data) + .then(data => { + this.renderers = data; + }); + }, mounted() { document.addEventListener('click', this.handleClick); }, diff --git a/public/js/components/Cis/Stundenplan/EventTypes/lehreinheitEvent.js b/public/js/components/Cis/Stundenplan/EventTypes/lehreinheitEvent.js new file mode 100644 index 000000000..088fb42f9 --- /dev/null +++ b/public/js/components/Cis/Stundenplan/EventTypes/lehreinheitEvent.js @@ -0,0 +1,30 @@ +export default { + methods:{ + convertTime: function ([hour, minute]) { + let date = new Date(); + date.setHours(hour); + date.setMinutes(minute); + // returns date string as hh:mm + return date.toLocaleTimeString(this.$p.user_locale, { hour: '2-digit', minute: '2-digit', hour12: false }); + + }, + }, + props:{ + event: { + type:Object, + required:true, + }, + }, + template: ` +
+ {{convertTime(event.beginn.split(":"))}} + {{convertTime(event.ende.split(":"))}} +
+
+ {{event.topic}} + {{lektor.kurzbz}} + {{event.ort_kurzbz}} +
+ + `, +} diff --git a/public/js/components/Cis/Stundenplan/Stundenplan.js b/public/js/components/Cis/Stundenplan/Stundenplan.js index efb8c06ea..5b42d54f8 100644 --- a/public/js/components/Cis/Stundenplan/Stundenplan.js +++ b/public/js/components/Cis/Stundenplan/Stundenplan.js @@ -3,11 +3,12 @@ import CalendarDate from "../../../composables/CalendarDate.js"; import LvModal from "../Mylv/LvModal.js"; import LvInfo from "../Mylv/LvInfo.js" import LvMenu from "../Mylv/LvMenu.js" -import moodleSvg from "../../../helpers/moodleSVG.js" +import lehreinheitEvent from "./EventTypes/lehreinheitEvent.js" import ApiStundenplan from '../../../api/factory/stundenplan.js'; import ApiAuthinfo from '../../../api/factory/authinfo.js'; + export const DEFAULT_MODE_STUNDENPLAN = 'Week' const Stundenplan = { @@ -46,6 +47,7 @@ const Stundenplan = { eventMaxHeight: this.eventMaxHeight } }, + inject:["renderers"], watch: { weekFirstDay: { handler: async function (newValue) { @@ -69,7 +71,7 @@ const Stundenplan = { } }, components: { - FhcCalendar, LvModal, LvMenu, LvInfo, moodleSvg + FhcCalendar, LvModal, LvMenu, LvInfo, lehreinheitEvent, }, computed:{ downloadLinks: function(){ @@ -105,17 +107,16 @@ const Stundenplan = { }, }, methods:{ + renderComponent(name){ + switch(name){ + case 'lehreinheitEvent': return lehreinheitEvent; + default: return !this.renderers? null : Vue.defineAsyncComponent(() => import(this.renderers[name])) + } + }, fetchStudiensemesterDetails: async function (date) { return this.$api.call(ApiStundenplan.studiensemesterDateInterval(date)); }, - convertTime: function([hour,minute]){ - let date = new Date(); - date.setHours(hour); - date.setMinutes(minute); - // returns date string as hh:mm - return date.toLocaleTimeString(this.$p.user_locale, { hour: '2-digit', minute: '2-digit', hour12:false}); - - }, + setSelectedEvent: function (event) { this.currentlySelectedEvent = event; }, @@ -248,6 +249,7 @@ const Stundenplan = { .then(data => { this.uid = data.uid; }); + // this.loadEvents(); }, beforeUnmount() { @@ -285,68 +287,23 @@ const Stundenplan = {