\n \n \n \n {{text.studyline_name}} \n \n \n \n \n {{text.studyline_shortname}} \n \n \n \n \n {{text.studyline_color}} \n \n \n \n \n \n \n \n \n \n \n {{ text.studyline_name}} \n \n \n \n \n {{ text.studyline_shortname}} \n \n \n \n \n {{ text.studyline_color}} \n \n \n \n \n \n \n
\n `\n });\n\n\n /*\n * T-STUDYLINE-HEADER\n */\n Vue.component('t-studyline-heading', {\n props: {\n value : {\n type: Object, // Studyline\n default: function(){ return {};},\n },\n layers: {\n type: Number,\n default: 1,\n },\n },\n data() {\n return {\n layerHeights: {}\n };\n },\n created() {\n // Listener for the signal that a new connection was made and needs to be drawn\n // Sent by the incoming item - By convention, outgoing items are responsible for drawing the lines\n ItemEventBus.$on('lineHeightChange', this.onLineHeightChange);\n },\n computed: {\n \n },\n methods: {\n onLineHeightChange(lineid,layerid,newheight){\n // All layers for this line have the first slot send an update message on layer height change.\n // When one of those updates is received, record the height and recalculate the total height of the \n // header\n if(this.$refs.main && lineid == this.value.id){\n const items = document.querySelectorAll(\n `.t-studyline-slot-0[data-studyline='${this.value.id}']`);\n \n // determine the height of all the lines and add them up.\n let heightSum = 0;\n items.forEach((el) => {\n // getBoundingClientRect() Gets the actual fractional height instead of rounded to integer pixels\n const r = el.getBoundingClientRect();\n const height = r.height;\n heightSum += height;\n });\n\n const heightStyle=`${heightSum}px`;\n this.$refs.main.style.height = heightStyle;\n }\n }\n },\n template: `\n \n {{ text.studyline_editmode }} \n \n \n \n \n \n \n {{text.edit$core}} \n \n \n {{text.associations}} \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n {{ text.editmode_modules_hidden}}
\n \n\n \n
\n \n \n
\n \n \n
\n \n \n \n 0\"\n v-model=\"page.perioddesc[index-1]\"\n > \n \n \n \n \n \n \n 0 && showslot(line, index, layeridx, 'gradable')\"\n type='gradable'\n v-model=\"line.slots[index].competencies\" \n :key=\"'c-'+lineindex+'-'+index+'-'+layernr\" \n :slotindex=\"index\" \n :line=\"line\"\n :plan=\"value\"\n :page=\"page\"\n :period=\"page.perioddesc[index-1]\"\n :layer=\"layeridx\"\n :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n + ((lineindex==0 && layernr==1)?' first ':' ')\n + ((lineindex==page.studylines.length-1)?' last ':' ')\n + ((layernr == countLineLayers(line))?' lastlyr ':' ')\n + ((layernr == countLineLayers(line)+1)?' newlyr ':' ')\"\n >\n
\n \n
\n `,\n });\n \n /*\n * T-STUDYLINE (Used only for study line edit mode)\n */\n Vue.component('t-studyline-edit', {\n props: {\n value : {\n type: Object, // Studyline\n default: function(){ return {};},\n }\n },\n data() {\n return {\n };\n },\n computed: {\n deletable() {\n // Check if all the slots are empty\n const slots = this.value.slots;\n if(Array.isArray(slots)){\n let count = 0;\n for(let i = 0; i < slots.length; i++) {\n if(Array.isArray(slots[i].competencies)){\n count += slots[i].competencies.length;\n }\n if(Array.isArray(slots[i].filters)){\n count += slots[i].filters.length;\n }\n }\n return (count == 0);\n } else {\n return false;\n }\n },\n editable() {\n return true;\n }\n },\n methods: {\n onEdit() {\n this.$emit('edit',this.value);\n },\n onDelete() {\n this.$emit('delete',this.value);\n },\n\n },\n template: `\n \n `,\n });\n\n /*\n * During a redisign it was decided to have the studyline still get the entire array as a value,\n * even though it only shows one drop slot for the layer it is in. This is to make repainting easier, \n * since we modify the array for the layer we handle. FIXME: Make this less weird\n */\n Vue.component('t-studyline-slot', {\n props: {\n type : {\n type: String,\n default: 'gradable',\n },\n slotindex : {\n type: Number,\n default: '',\n },\n line : {\n type: Object,\n default(){ return null;},\n },\n layer : {\n type: Number,\n },\n value: {\n type: Array, // dict with layer as index\n default(){ return [];},\n },\n plan: {\n type: Object, // Studyplan data\n default(){ return null;},\n },\n page: {\n type: Object, // Studyplan data\n default(){ return null;},\n },\n period: {\n type: Object, // Studyplan data\n default(){ return null;},\n }, \n },\n mounted() {\n const self=this;\n if(self.type == \"gradable\" && self.slotindex == 1){\n self.resizeListener = new ResizeObserver(() => {\n if(self.$refs.main){\n const size = self.$refs.main.getBoundingClientRect();\n \n ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, size.height);\n }\n }).observe(self.$refs.main);\n }\n },\n unmounted() {\n if(this.resizeListener) {\n this.resizeListener.disconnect();\n }\n },\n computed: {\n slotkey(){\n return `${this.type}'-'${this.line.id}-${this.slotindex}-${this.layer}`;\n },\n itemidx(){\n for(const ix in this.value){\n const itm = this.value[ix];\n if(itm.layer == this.layer){\n return ix;\n }\n }\n return null;\n },\n item(){\n for(const ix in this.value){\n const itm = this.value[ix];\n if(itm.layer == this.layer){\n return itm;\n }\n }\n return null;\n },\n listtype() {\n return this.type;\n },\n dragacceptlist(){\n if(this.type == \"gradable\"){\n return [\"course\", \"gradable-item\"];\n } else {\n return [\"filter\", \"filter-item\"];\n }\n },\n courseHoverDummy(){\n return {course: this.hover.component};\n },\n current(){\n if( this.period && this.period.startdate && this.period.enddate){\n const now = new Date();\n const pstart = new Date(this.period.startdate);\n const pend = new Date(this.period.enddate);\n return (now >= pstart && now < pend);\n }\n else {\n return false;\n }\n },\n spanCss(){\n if(this.item && this.item.span > 1){\n const span = (2 * this.item.span) - 1;\n return `width: 100%; grid-column: span ${span};`;\n } else {\n return \"\";\n }\n }\n },\n data() {\n return {\n text: strings.course_timing,\n resizeListener: null,\n hover: { \n component:null,\n type: null,\n },\n datechanger: {\n coursespan: null,\n periodspan: null,\n default: false,\n defaultchoice: false,\n hidewarn: false,\n }\n };\n },\n methods: {\n onDrop(event) {\n this.hover.component = null;\n this.hover.type = null;\n debug.info(event);\n const self = this;\n if(event.type.item) {\n let item = event.data;\n \n // To avoid weird visuals with the lines,\n // we add the item to the proper place in the front-end first\n item.layer = this.layer;\n item.slot = this.slotindex;\n self.value.push(item);\n self.$emit(\"input\",self.value);\n\n // then on the next tick, we inform the back end\n // Since moving things around has never been unsuccessful, unless you have other problems,\n // it's better to have nice visuals.\n self.relocateStudyItem(item).done(()=>{\n if(this.$refs.timingChecker){\n this.$refs.timingChecker.validate_course_period();\n }\n });\n }\n else if(event.type.component){\n debug.info(\"Adding new component\");\n if(event.type.type == \"gradable\"){\n call([{\n methodname: 'local_treestudyplan_add_studyitem',\n args: { \n \"line_id\": self.line.id,\n \"slot\" : self.slotindex,\n \"layer\" : self.layer,\n \"type\": 'course',\n \"details\": {\n \"competency_id\": null,\n 'conditions':'',\n 'course_id':event.data.id,\n 'badge_id':null,\n 'continuation_id':null,\n }\n }\n }])[0].done((response) => {\n let item = response;\n self.relocateStudyItem(item).done(()=>{\n self.value.push(item);\n self.$emit(\"input\",self.value);\n\n // call the validate period function on next tick,\n // since it paints the item in the slot first\n this.$nextTick(() => {\n if(this.$refs.timingChecker){\n this.$refs.timingChecker.validate_course_period();\n }\n });\n });\n }).fail(notification.exception);\n } \n else if(event.type.type == \"filter\") {\n debug.info(\"Adding new filter compenent\");\n call([{\n methodname: 'local_treestudyplan_add_studyitem',\n args: { \n \"line_id\": self.line.id,\n \"slot\" : self.slotindex,\n \"type\": event.data.type,\n \"details\":{\n \"badge_id\": event.data.badge?event.data.badge.id:undefined,\n }\n }\n }])[0].done((response) => {\n let item = response;\n self.relocateStudyItem(item).done(()=>{\n item.layer = this.layer;\n self.value.push(item);\n self.$emit(\"input\",self.value); \n });\n }).fail(notification.exception);\n } \n }\n },\n onCut(event) {\n const self=this;\n let id = event.data.id;\n for(let i = 0; i < self.value.length; i++){ \n if(self.value[i].id == id){ \n self.value.splice(i, 1); i--; \n break; // just remove one\n }\n }\n // Do something to signal that this item has been removed\n this.$emit(\"input\",this.value);\n },\n relocateStudyItem(item){\n const iteminfo = {'id': item.id, 'layer': this.layer, 'slot': this.slotindex, 'line_id': this.line.id};\n return call([{\n methodname: 'local_treestudyplan_reorder_studyitems',\n args: { 'items': [iteminfo] } // function was designed to relocate multiple items at once, hence the array\n }])[0].fail(notification.exception); \n },\n onDragEnter(event){\n this.hover.component = event.data;\n this.hover.type = event.type;\n },\n onDragLeave(){\n this.hover.component = null;\n this.hover.type = null;\n },\n maxSpan(){\n // Determine the maximum span for components in this slot\n // Used for setting the max in the timing adjustment screen (s)\n // And for checking the filter types\n\n // Assume this slot is first one available\n let freeIndex = this.slotindex;\n // Determine last free slot following this one in the layer\n for(let i = this.slotindex + 1; i <= this.page.periods; i++){\n if(this.line.slots && this.line.slots[i] && this.line.slots[i].competencies){\n const l = this.line.slots[i].competencies;\n const f = this.line.slots[i-1].filters; // next filter is in the same slot\n if(l[this.layer] || f[this.layer]) {\n // slot is busy in this layer.\n break;\n } else {\n freeIndex = i;\n }\n } else {\n break; // stop processing\n }\n }\n // calculate span from that\n return freeIndex - this.slotindex + 1;\n\n },\n makeType(item){\n return {\n item: true,\n component: false,\n span: item.span,\n type: this.type,\n };\n },\n checkType(type) {\n if(type.type == this.type){\n if(type == 'filter'){\n return true;\n } else if(type.span <= this.maxSpan()){\n return true;\n } else {\n return false;\n }\n } else {\n return false;\n }\n }\n },\n template: `\n \n {{ value.shortname }}\n
\n --{{ hover.type }}--\n
\n `,\n });\n\n\n Vue.component('t-item-timing-checker', {\n props: {\n value: {\n type: Object, // t-item model\n },\n page: {\n type: Object, // Studyplan data\n },\n period: {\n type: Object, // Studyplan data\n },\n maxspan: {\n type: Number,\n },\n hidden: {\n type: Boolean,\n default: false,\n }\n },\n computed: {\n endperiod() {\n const endperiodnr = Math.min(this.page.periods,this.period.period + (this.value.span - 1));\n return this.page.perioddesc[endperiodnr-1];\n },\n course_period_matches() {\n const self=this;\n if(self.value && self.value.type == 'course'){\n self.datechanger.coursespan = datespaninfo(self.value.course.startdate,self.value.course.enddate);\n self.datechanger.periodspan = datespaninfo(self.period.startdate,self.endperiod.enddate);\n if( self.datechanger.coursespan.first.getTime() == self.datechanger.periodspan.first.getTime() \n && self.datechanger.coursespan.last.getTime() == self.datechanger.periodspan.last.getTime() ){\n return true;\n }\n else {\n return false;\n }\n } else {\n debug.warn(\"Timing thing not proper configured\",self.value,self.period,self.maxspan);\n return false;\n }\n },\n },\n data() {\n return {\n // Create random id to avoid opening the wrong modals\n id: Math.floor(Math.random() * Date.now()).toString(16),\n text: strings.course_timing,\n datechanger: {\n coursespan: null,\n periodspan: null,\n globals: datechanger_globals,\n }\n };\n },\n methods: {\n \n validate_course_period(force) {\n const self = this;\n \n debug.info(\"Validating course and period\");\n if(!(self.course_period_matches)){\n debug.info(\"Course timing does not match period timing\");\n\n if(self.value.course.canupdatecourse){\n if(!self.hidden || !self.datechanger.globals.default){\n // Periods do not match, pop up the date change request \n this.$bvModal.show('t-course-timing-matching-'+this.id);\n } else if (self.datechanger.globals.defaultvalue){\n // go for it without asking\n self.change_course_period();\n }\n }\n else {\n // user is not able to change course timing - show a warning\n if(!self.hidden || !self.datechanger.globals.hidewarn){\n this.$bvModal.show('t-course-timing-warning-'+this.id);\n }\n }\n }\n else {\n debug.info(\"Course timing matches period\",self.datechanger);\n }\n },\n change_course_period() {\n const self=this;\n // Save the state\n if(self.datechanger.globals.default){\n self.datechanger.globals.defaultvalue = true;\n }\n return call([{\n methodname: 'local_treestudyplan_course_period_timing',\n args: { period_id: self.period.id, \n course_id: this.value.course.id,\n span: this.value.span,\n }\n }])[0].fail(notification.exception).done((response) => {\n self.value.course.startdate = response.startdate;\n self.value.course.enddate = response.enddate;\n self.value.course.timing = response.timing;\n self.$emit(\"input\",self.value);\n });\n },\n change_span(span) {\n const self=this;\n return call([{\n methodname: 'local_treestudyplan_set_studyitem_span',\n args: { id: self.value.id,\n span: span\n }\n }])[0].fail(notification.exception).done((response) => {\n self.value.span = response.span;\n self.$emit('input',self.value);\n self.$nextTick(() => {\n self.validate_course_period();\n });\n } ); \n },\n format_duration(dsi){\n let s = \"\";\n if(dsi.years == 1){ s += `1 ${this.text.year}, `;}\n else if(dsi.years > 1){ s += `${dsi.years} ${this.text.years}, `;}\n if(dsi.weeks == 1){ s += `1 ${this.text.week}, `;}\n else if(dsi.weeks > 1){ s += `${dsi.weeks} ${this.text.weeks}, `;}\n if(dsi.days == 1){ s += `1 ${this.text.day}, `;}\n else if(dsi.days > 1){ s += `${dsi.days} ${this.text.days}, `;}\n\n return s.toLocaleLowerCase();\n },\n },\n // To avoid the span creeping in the dom where it shouldn't, set display to none if it is hidden\n // This does not affect the modals, which are rendered outside of this element when needed\n template: `\n \n \n \n \n \n \n \n \n {{ text.periodspan\n }} \n {{ n }} \n {{ \n (value.span == 1)?text.period.toLowerCase():text.periods.toLowerCase() \n }}\n \n \n \n \n {{ text.desc }} \n \n \n \n \n \n \n {{ text.rememberchoice }} \n \n \n \n \n {{ text.desc }} \n \n \n \"6\">\n \n \n \n {{ text.hidewarning }} \n \n \n
\n `,\n });\n\n\n Vue.component('t-item', {\n props: {\n value :{\n type: Object,\n default(){ return null;},\n },\n dummy :{\n type: Boolean,\n default() { return false;},\n },\n plan: {\n type: Object, // Studyplan page\n default() { return null;},\n },\n page: {\n type: Object, // Studyplan page\n default() { return null;},\n },\n period: {\n type: Object, // Studyplan page\n default() { return null;},\n },\n maxspan: {\n type: Number,\n default() { return 0;},\n }, \n },\n data() {\n return {\n dragLine: null,\n dragEventListener: null,\n deleteMode: false,\n condition_options: string_keys.conditions,\n text: strings.item_text,\n showContext: false,\n lines: [],\n };\n },\n methods: {\n dragStart(event){\n // Add line between start point and drag image\n this.deleteMode = false;\n let start = document.getElementById('studyitem-'+this.value.id);\n let dragelement= document.getElementById('t-item-cdrag-'+this.value.id);\n dragelement.style.position = 'fixed';\n dragelement.style.left = event.position.x+'px';\n dragelement.style.top = event.position.y+'px';\n this.dragLine = new SimpleLine(start,dragelement,{\n color: \"#777\",\n gravity: {\n start: LINE_GRAVITY,\n end: LINE_GRAVITY,\n },\n });\n // Add separate event listener to reposition mouse move\n document.addEventListener(\"mousemove\",this.onMouseMove);\n },\n dragEnd(){\n if(this.dragLine !== null) {\n this.dragLine.remove();\n }\n let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);\n dragelement.style.removeProperty('left');\n dragelement.style.removeProperty('top');\n dragelement.style.removeProperty('position');\n document.removeEventListener(\"mousemove\",this.onMouseMove);\n },\n onMouseMove: function(event){\n let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);\n dragelement.style.position = 'fixed';\n dragelement.style.left = event.clientX+'px';\n dragelement.style.top = event.clientY+'px';\n // line will follow automatically\n },\n onDrop(event){\n let from_id = event.data.id;\n let to_id = this.value.id;\n this.redrawLines();\n call([{\n methodname: 'local_treestudyplan_connect_studyitems',\n args: { 'from_id': from_id, 'to_id': to_id }\n }])[0].done((response)=>{\n let conn = {'id': response.id, 'from_id': response.from_id, 'to_id': response.to_id};\n ItemEventBus.$emit(\"createdConnection\",conn);\n this.value.connections.in.push(conn);\n }).fail(notification.exception);\n },\n redrawLine(conn){\n const lineColor = \"var(--success)\";\n const start = document.getElementById(`studyitem-${conn.from_id}`);\n const end = document.getElementById(`studyitem-${conn.to_id}`);\n\n // delete old line\n if(this.lines[conn.to_id]){\n this.lines[conn.to_id].remove(); \n delete this.lines[conn.to_id];\n } \n // create a new line if the start and finish items are visible\n if(start !== null && end !== null && isVisible(start) && isVisible(end)){\n this.lines[conn.to_id] = new SimpleLine( start,end,{\n color: lineColor,\n gravity: {\n start: LINE_GRAVITY,\n end: LINE_GRAVITY,\n },\n });\n }\n\n },\n deleteLine(conn){\n const self = this;\n call([{\n methodname: 'local_treestudyplan_disconnect_studyitems',\n args: { 'from_id': conn.from_id, 'to_id': conn.to_id }\n }])[0].done((response)=>{\n if(response.success){\n this.removeLine(conn);\n // send disconnect event on message bus, so the connection on the other end can delete it too\n ItemEventBus.$emit(\"connectionDisconnected\",conn);\n // Remove connection from our outgoing list\n let index = self.value.connections.out.indexOf(conn);\n self.value.connections.out.splice(index, 1);\n }\n }).fail(notification.exception);\n },\n highlight(conn){\n if(this.lines[conn.to_id]){\n this.lines[conn.to_id].setConfig({color:\"var(--danger)\",});\n }\n },\n normalize(conn){\n if(this.lines[conn.to_id]){\n this.lines[conn.to_id].setConfig({color:\"var(--success)\",});\n }\n },\n updateItem() {\n call([{\n methodname: 'local_treestudyplan_edit_studyitem',\n args: { 'id': this.value.id,\n 'conditions': this.value.conditions, \n 'continuation_id': this.value.continuation_id,}\n }])[0].fail(notification.exception);\n },\n doShowContext(event) {\n if(this.hasContext){\n this.showContext=true;\n event.preventDefault();\n }\n },\n redrawLines(){\n if(this.value.connections && this.value.connections.out){\n for(let i in this.value.connections.out){\n let conn = this.value.connections.out[i];\n this.redrawLine(conn);\n }\n }\n },\n\n // EVENT LISTENERS\n onCreatedConnection(conn){\n if(conn.from_id == this.value.id){\n this.value.connections.out.push(conn);\n this.redrawLine(conn);\n }\n },\n // Listener for the signal that a connection was removed by the outgoing item\n onRemovedConnection(conn){\n if(this.value.connections && this.value.connections.out){\n for(let i in this.value.connections.in){\n let c_in = this.value.connections.in[i];\n if(conn.id == c_in.id){\n self.value.connections.out.splice(i, 1);\n }\n }\n }\n },\n // Listener for reposition events\n // When an item in the list is repositioned, all lines need to be redrawn\n onRePositioned(){\n if(this.value.connections && this.value.connections.out){\n for(let i in this.value.connections.out){\n let conn = this.value.connections.out[i];\n this.redrawLine(conn);\n }\n }\n },\n // When an item is disPositioned - (temporarily) removed from the list,\n // all connections need to be deleted.\n onDisPositioned(re_id){\n if(this.value.connections && this.value.connections.out){\n for(let i in this.value.connections.out){\n let conn = this.value.connections.out[i];\n if(conn.to_id == re_id){\n this.removeLine(conn);\n } \n }\n }\n },\n\n // When an item is deleted \n // all connections to/from that item need to be cleaned up\n onItemDeleted(item_id){\n const self = this;\n if(this.value.connections && this.value.connections.out){\n for(const i in this.value.connections.out){\n let conn = this.value.connections.out[i];\n if(conn.to_id == item_id){\n self.removeLine(conn);\n self.value.connections.out.splice(i, 1);\n } \n }\n }\n if(this.value.connections && this.value.connections.in){\n for(const i in this.value.connections.in){\n let conn = this.value.connections.in[i];\n if(conn.from_id == item_id){\n self.value.connections.out.splice(i, 1);\n } \n }\n }\n },\n\n onRedrawLines(){\n this.redrawLines();\n },\n\n removeLine(conn){\n if(this.lines[conn.to_id]){\n this.lines[conn.to_id].remove();\n delete this.lines[conn.to_id];\n } \n },\n\n },\n computed: {\n hasConnectionsOut() {\n return !([\"finish\",].includes(this.value.type));\n },\n hasConnectionsIn() {\n return !([\"start\",].includes(this.value.type));\n },\n hasContext() {\n return ['junction','finish'].includes(this.value.type);\n }\n },\n created(){\n // Add event listeners on the message bus\n // But only if not in \"dummy\" mode - mode which is used for droplist placeholders\n // Since an item is \"fully made\" with all references, not specifying dummy mode really messes things up\n if(!this.dummy){\n\n // Listener for the signal that a new connection was made and needs to be drawn\n // Sent by the incoming item - By convention, outgoing items are responsible for drawing the lines\n ItemEventBus.$on('createdConnection', this.onCreatedConnection);\n // Listener for the signal that a connection was removed by the outgoing item\n ItemEventBus.$on('removedConnection', this.onRemovedConnection);\n // Listener for reposition events\n // When an item in the list is repositioned, all lines need to be redrawn\n ItemEventBus.$on('rePositioned', this.onRePositioned);\n // When an item is disPositioned - (temporarily) removed from the list,\n // all connections need to be deleted.\n ItemEventBus.$on('disPositioned', this.onDisPositioned);\n // When an item is deleted \n // all connections to/from that item need to be cleaned up\n ItemEventBus.$on('itemDeleted', this.onItemDeleted);\n ItemEventBus.$on('redrawLines', this.onRedrawLines);\n\n\n }\n },\n mounted(){\n // Initialize connection lines when mounting\n // But only if not in \"dummy\" mode - mode which is used for droplist placeholders\n // Since an item is \"fully made\" with all references, not specifying dummy mode really messes things up\n\n if(!this.dummy)\n {\n this.redrawLines();\n setTimeout(()=>{\n ItemEventBus.$emit(\"rePositioned\",this.value.id);\n },10);\n }\n },\n beforeDestroy(){\n if(!this.dummy) {\n for(let i in this.value.connections.out){\n let conn = this.value.connections.out[i];\n this.removeLine(conn);\n }\n ItemEventBus.$emit(\"disPositioned\",this.value.id);\n\n // Remove event listeners\n ItemEventBus.$off('createdConnection', this.onCreatedConnection);\n ItemEventBus.$off('removedConnection', this.onRemovedConnection);\n ItemEventBus.$off('rePositioned', this.onRePositioned);\n ItemEventBus.$off('disPositioned', this.onDisPositioned);\n ItemEventBus.$off('itemDeleted', this.onItemDeleted);\n ItemEventBus.$off('redrawLines', this.onRedrawLines);\n }\n },\n beforeUpdate(){\n },\n updated(){\n if(!this.dummy) {\n this.redrawLines();\n }\n },\n template: `\n \n `,\n });\n\n Vue.component('t-item-invalid', {\n props: {\n 'value' :{\n type: Object,\n default: function(){ return null;},\n },\n },\n data() {\n return {\n text: strings.invalid,\n };\n },\n methods: {\n },\n template: `\n {{ text.question }}
{{ text.course }}
\n{{ value.course.fullname }}
\n{{ value.course.shortname }}
\n{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}
\n{{ text.duration }}
\n {{ format_duration(datechanger.coursespan)}}
{{ text.period }}
\n{{ period.fullname }} 1\"> - {{ endperiod.fullname }}
\n{{ period.shortname }} 1\"> - {{ endperiod.shortname }}
\n{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}
\n{{ text.duration }}
\n {{ format_duration(datechanger.periodspan)}}
{{ text.warning }}
{{ text.course }}
\n{{ value.course.fullname }}
\n{{ value.course.shortname }}
\n{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}
\n{{ text.duration }}
\n {{ format_duration(datechanger.coursespan)}}
{{ text.period }}
\n{{ period.fullname }} 1\"> - {{ endperiod.fullname }}
\n{{ period.shortname }} 1\"> - {{ endperiod.shortname }}
\n{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}
\n{{ text.duration }}
\n {{ format_duration(datechanger.periodspan)}}
\n \n \n \n \n \n \n \n {{text.error}}\n \n \n \n \n
\n `,\n });\n\n Vue.component('t-item-course', {\n props: {\n value:{\n type: Object,\n default(){ return null;},\n },\n plan:{\n type: Object,\n default(){ return null;},\n },\n page: {\n type: Object, // PAge data\n default() { return null;}\n },\n period: {\n type: Object, // Period data\n default() { return null;}\n },\n maxspan: {\n type: Number,\n default() { return 0;}\n }, \n },\n data() {\n return {\n condition_options: string_keys.conditions,\n text: strings.item_course_text,\n };\n },\n computed: {\n useItemConditions() {\n if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useItemConditions !== undefined){\n return this.plan.aggregation_info.useItemConditions;\n }\n else {\n return false;\n }\n },\n\n configurationState(){\n if(this.hasGrades() || this.hasCompletions()) {\n return \"t-configured-ok\";\n } else {\n return \"t-configured-alert\";\n }\n },\n\n configurationIcon(){\n if(this.hasGrades() || this.hasCompletions()) {\n return \"check\";\n } else {\n return \"exclamation-circle\";\n }\n },\n startdate(){\n return format_date(this.value.course.startdate);\n },\n enddate(){\n if(this.value.course.enddate){\n return format_date(this.value.course.enddate);\n } \n else {\n return this.text.noenddate;\n }\n }\n\n },\n methods: {\n hasGrades() {\n if(this.value.course.grades && this.value.course.grades.length > 0){\n for(const g of this.value.course.grades){\n if(g.selected){\n return true;\n }\n }\n } \n return false;\n },\n hasCompletions() {\n if(this.value.course.completion && this.value.course.completion.conditions) {\n for(const cgroup of this.value.course.completion.conditions){\n if(cgroup.items && cgroup.items.length > 0){\n return true;\n }\n }\n }\n return false;\n },\n includeChanged(newValue,g){\n call([{\n methodname: 'local_treestudyplan_include_grade',\n args: { 'grade_id': g.id,\n 'item_id': this.value.id, \n 'include': newValue,\n 'required': g.required,\n }\n }])[0].fail(notification.exception);\n },\n requiredChanged(newValue,g){\n call([{\n methodname: 'local_treestudyplan_include_grade',\n args: { 'grade_id': g.id,\n 'item_id': this.value.id, \n 'include': g.selected,\n 'required': newValue,\n }\n }])[0].fail(notification.exception);\n }, \n updateConditions() {\n call([{\n methodname: 'local_treestudyplan_edit_studyitem',\n args: { 'id': this.value.id,\n 'conditions': this.value.conditions, \n }\n }])[0].fail(notification.exception);\n },\n },\n created() {\n\n },\n template: `\n \n \n \n \n \n \n
\n `,\n });\n\n\n Vue.component('t-item-course-grades', {\n props: {\n 'value' :{\n type: Object,\n default(){ return null;},\n },\n 'plan' :{\n type: Object,\n default(){ return null;},\n },\n },\n data() {\n return {\n condition_options: string_keys.conditions,\n text: strings.item_course_text,\n };\n },\n computed: {\n useRequiredGrades() {\n if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useRequiredGrades !== undefined){\n return this.plan.aggregation_info.useRequiredGrades;\n }\n else {\n return false;\n }\n },\n selectedgrades(){\n let list = [];\n for(let ix in this.value.course.grades){\n let g = this.value.course.grades[ix];\n if(g.selected){\n list.push(g);\n }\n }\n return list;\n }, \n },\n methods: {\n includeChanged(newValue,g){\n call([{\n methodname: 'local_treestudyplan_include_grade',\n args: { 'grade_id': g.id,\n 'item_id': this.value.id, \n 'include': newValue,\n 'required': g.required,\n }\n }])[0].fail(notification.exception);\n },\n requiredChanged(newValue,g){\n call([{\n methodname: 'local_treestudyplan_include_grade',\n args: { 'grade_id': g.id,\n 'item_id': this.value.id, \n 'include': g.selected,\n 'required': newValue,\n }\n }])[0].fail(notification.exception);\n }, \n },\n created() {\n\n },\n template: `\n \n
\n \n \n
\n \n \n \n {{ value.course.displayname }}\n \n
\n \n
\n {{ value.course.fullname }}\n \n
\n {{ value.course.context.path.join(\" / \")}} / {{value.course.shortname}}\n\n \n
\n \n \n \n {{text['coursetiming_'+value.course.timing]}}
\n {{ startdate }} - {{ enddate }}\n
\n \n {{ startdate }} - {{ enddate }}\n
\n
\n `,\n });\n\n Vue.component('t-item-course-completion',{\n props: {\n value : {\n type: Object,\n default: function(){ return {};},\n },\n guestmode: {\n type: Boolean,\n default: false,\n },\n course: {\n type: Object,\n default: function(){ return {};},\n },\n },\n data() {\n return {\n text: strings.completion,\n };\n },\n created(){\n const self = this;\n // Get text strings for condition settings\n let stringkeys = [];\n for(const key in this.text){\n stringkeys.push({ key: key, component: 'local_treestudyplan'});\n }\n get_strings(stringkeys).then(function(strings){\n let i = 0;\n for(const key in self.text){\n self.text[key] = strings[i];\n i++;\n }\n });\n },\n computed: {\n hasCompletions() {\n if(this.value.conditions) {\n for(const cgroup of this.value.conditions){\n if(cgroup.items && cgroup.items.length > 0){\n return true;\n }\n }\n }\n return false;\n },\n },\n methods: {\n completion_icon(completion) {\n switch(completion){\n case \"progress\":\n return \"exclamation-circle\";\n case \"complete\":\n return \"check-circle\";\n case \"complete-pass\":\n return \"check-circle\";\n case \"complete-fail\":\n return \"times-circle\";\n default: // case \"incomplete\"\n return \"circle-o\";\n }\n },\n \n completion_tag(cgroup){\n return cgroup.completion?'completed':'incomplete';\n }\n },\n template: `\n - \n
- \n {{text.grade_include}}{{text.grade_require}}\n \n
- \n
\n \n \n g.name = fd.get('name')\"\n v-if=\"g.cmid > 0\" \n :cmid=\"g.cmid\" \n :coursectxid=\"value.course.ctxid\"\n genericonly>{{g.name}} \n \n
| {{ text.aggregation_overall_all}}{{ text.aggregation_overall_any}} | \n|
| {{text.completion_not_configured}}!\n {{text.configure_completion}}\n | \n |
| 1\"\n >{{ text.aggregation_all}}{{ text.aggregation_any}}\n {{cgroup.title}} | \n|
|---|---|
| \n | \n\n {{ci.details.requirement}}\n | \n
\n \n
\n `,\n });\n\n Vue.component('t-item-finish',{\n props: {\n value : {\n type: Object,\n default: function(){ return {};},\n },\n },\n data() {\n return {\n };\n },\n methods: {\n },\n template: `\n \n \n
\n `,\n });\n\n Vue.component('t-item-start',{\n props: {\n value : {\n type: Object,\n default: function(){ return {};},\n },\n },\n data() {\n return {\n };\n },\n created(){\n \n },\n methods: {\n },\n template: `\n \n \n
\n `,\n });\n\n Vue.component('t-item-badge',{\n props: {\n value : {\n type: Object,\n default: function(){ return { badge: {}};},\n },\n },\n data() {\n return {\n txt: strings,\n };\n },\n methods: {\n },\n template: `\n \n \n \n \n \n \n \n ![]()
\n \n \n \n\n
\n `,\n });\n\n Vue.component('t-coursecat-list',{\n props: {\n value : {\n type: Array,\n default: function(){ return {};},\n },\n },\n data() {\n return {\n };\n },\n methods: {\n },\n template: `\n \n
\n \n \n {{ value.badge.name }}
\n{{value.badge.description}}
\n- \n
- \n
- \n
\n {{ course.shortname }} - {{ course.fullname }}\n \n \n
{{ text.advanced_cascade_cohortsync_title}}
\n {{ text.advanced_cascade_cohortsync_desc}}\n{{ text.advanced_force_scale_title}}
\n {{ text.advanced_force_scale_desc}}\n- 0\">\n
- \n {{c.course.fullname}}\n
- 0\">\n
- \n {{g.name}}\n {{text.advanced_converted}}{{text.advanced_skipped}}\n {{text.advanced_error}}\n \n
\n
{{ text.advanced_disable_autoenddate_title}}
\n {{ text.advanced_disable_autoenddate_desc}}\n{{text.advanced_purge_expl}}
\n\n \n \n \n {{text.studyline_name}} \n \n \n \n \n {{text.studyline_shortname}} \n \n \n \n \n {{text.studyline_color}} \n \n \n \n \n \n \n \n \n \n \n {{ text.studyline_name}} \n \n \n \n \n {{ text.studyline_shortname}} \n \n \n \n \n {{ text.studyline_color}} \n \n \n \n \n \n \n
\n `\n });\n\n\n /*\n * T-STUDYLINE-HEADER\n */\n Vue.component('t-studyline-heading', {\n props: {\n value : {\n type: Object, // Studyline\n default: function(){ return {};},\n },\n layers: {\n type: Number,\n default: 1,\n },\n },\n data() {\n return {\n layerHeights: {}\n };\n },\n created() {\n // Listener for the signal that a new connection was made and needs to be drawn\n // Sent by the incoming item - By convention, outgoing items are responsible for drawing the lines\n ItemEventBus.$on('lineHeightChange', this.onLineHeightChange);\n },\n computed: {\n \n },\n methods: {\n onLineHeightChange(lineid,layerid,newheight){\n // All layers for this line have the first slot send an update message on layer height change.\n // When one of those updates is received, record the height and recalculate the total height of the \n // header\n if(this.$refs.main && lineid == this.value.id){\n const items = document.querySelectorAll(\n `.t-studyline-slot-0[data-studyline='${this.value.id}']`);\n \n // determine the height of all the lines and add them up.\n let heightSum = 0;\n items.forEach((el) => {\n // getBoundingClientRect() Gets the actual fractional height instead of rounded to integer pixels\n const r = el.getBoundingClientRect();\n const height = r.height;\n heightSum += height;\n });\n\n const heightStyle=`${heightSum}px`;\n this.$refs.main.style.height = heightStyle;\n }\n }\n },\n template: `\n \n {{ text.studyline_editmode }} \n \n \n \n \n \n \n {{text.edit$core}} \n \n \n {{text.associations}} \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n {{ text.editmode_modules_hidden}}
\n \n\n \n
\n \n \n
\n \n \n
\n \n \n \n 0\"\n v-model=\"page.perioddesc[index-1]\"\n > \n \n \n \n \n \n \n 0 && showslot(line, index, layeridx, 'gradable')\"\n type='gradable'\n v-model=\"line.slots[index].competencies\" \n :key=\"'c-'+lineindex+'-'+index+'-'+layernr\" \n :slotindex=\"index\" \n :line=\"line\"\n :plan=\"value\"\n :page=\"page\"\n :period=\"page.perioddesc[index-1]\"\n :layer=\"layeridx\"\n :class=\"'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')\n + ((lineindex==0 && layernr==1)?' first ':' ')\n + ((lineindex==page.studylines.length-1)?' last ':' ')\n + ((layernr == countLineLayers(line))?' lastlyr ':' ')\n + ((layernr == countLineLayers(line)+1)?' newlyr ':' ')\"\n >\n
\n \n
\n `,\n });\n \n /*\n * T-STUDYLINE (Used only for study line edit mode)\n */\n Vue.component('t-studyline-edit', {\n props: {\n value : {\n type: Object, // Studyline\n default: function(){ return {};},\n }\n },\n data() {\n return {\n };\n },\n computed: {\n deletable() {\n // Check if all the slots are empty\n const slots = this.value.slots;\n if(Array.isArray(slots)){\n let count = 0;\n for(let i = 0; i < slots.length; i++) {\n if(Array.isArray(slots[i].competencies)){\n count += slots[i].competencies.length;\n }\n if(Array.isArray(slots[i].filters)){\n count += slots[i].filters.length;\n }\n }\n return (count == 0);\n } else {\n return false;\n }\n },\n editable() {\n return true;\n }\n },\n methods: {\n onEdit() {\n this.$emit('edit',this.value);\n },\n onDelete() {\n this.$emit('delete',this.value);\n },\n\n },\n template: `\n \n `,\n });\n\n /*\n * During a redisign it was decided to have the studyline still get the entire array as a value,\n * even though it only shows one drop slot for the layer it is in. This is to make repainting easier, \n * since we modify the array for the layer we handle. FIXME: Make this less weird\n */\n Vue.component('t-studyline-slot', {\n props: {\n type : {\n type: String,\n default: 'gradable',\n },\n slotindex : {\n type: Number,\n default: '',\n },\n line : {\n type: Object,\n default(){ return null;},\n },\n layer : {\n type: Number,\n },\n value: {\n type: Array, // dict with layer as index\n default(){ return [];},\n },\n plan: {\n type: Object, // Studyplan data\n default(){ return null;},\n },\n page: {\n type: Object, // Studyplan data\n default(){ return null;},\n },\n period: {\n type: Object, // Studyplan data\n default(){ return null;},\n }, \n },\n mounted() {\n const self=this;\n if(self.type == \"gradable\" && self.slotindex == 1){\n self.resizeListener = new ResizeObserver(() => {\n if(self.$refs.main){\n const size = self.$refs.main.getBoundingClientRect();\n \n ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, size.height);\n }\n }).observe(self.$refs.main);\n }\n },\n unmounted() {\n if(this.resizeListener) {\n this.resizeListener.disconnect();\n }\n },\n computed: {\n slotkey(){\n return `${this.type}'-'${this.line.id}-${this.slotindex}-${this.layer}`;\n },\n itemidx(){\n for(const ix in this.value){\n const itm = this.value[ix];\n if(itm.layer == this.layer){\n return ix;\n }\n }\n return null;\n },\n item(){\n for(const ix in this.value){\n const itm = this.value[ix];\n if(itm.layer == this.layer){\n return itm;\n }\n }\n return null;\n },\n listtype() {\n return this.type;\n },\n dragacceptlist(){\n if(this.type == \"gradable\"){\n return [\"course\", \"gradable-item\"];\n } else {\n return [\"filter\", \"filter-item\"];\n }\n },\n courseHoverDummy(){\n return {course: this.hover.component};\n },\n current(){\n if( this.period && this.period.startdate && this.period.enddate){\n const now = new Date();\n const pstart = new Date(this.period.startdate);\n const pend = new Date(this.period.enddate);\n return (now >= pstart && now < pend);\n }\n else {\n return false;\n }\n },\n spanCss(){\n if(this.item && this.item.span > 1){\n const span = (2 * this.item.span) - 1;\n return `width: 100%; grid-column: span ${span};`;\n } else {\n return \"\";\n }\n }\n },\n data() {\n return {\n text: strings.course_timing,\n resizeListener: null,\n hover: { \n component:null,\n type: null,\n },\n datechanger: {\n coursespan: null,\n periodspan: null,\n default: false,\n defaultchoice: false,\n hidewarn: false,\n }\n };\n },\n methods: {\n onDrop(event) {\n this.hover.component = null;\n this.hover.type = null;\n debug.info(event);\n const self = this;\n if(event.type.item) {\n let item = event.data;\n \n // To avoid weird visuals with the lines,\n // we add the item to the proper place in the front-end first\n item.layer = this.layer;\n item.slot = this.slotindex;\n self.value.push(item);\n self.$emit(\"input\",self.value);\n\n // then on the next tick, we inform the back end\n // Since moving things around has never been unsuccessful, unless you have other problems,\n // it's better to have nice visuals.\n self.relocateStudyItem(item).done(()=>{\n if(this.$refs.timingChecker){\n this.$refs.timingChecker.validate_course_period();\n }\n });\n }\n else if(event.type.component){\n debug.info(\"Adding new component\");\n if(event.type.type == \"gradable\"){\n call([{\n methodname: 'local_treestudyplan_add_studyitem',\n args: { \n \"line_id\": self.line.id,\n \"slot\" : self.slotindex,\n \"layer\" : self.layer,\n \"type\": 'course',\n \"details\": {\n \"competency_id\": null,\n 'conditions':'',\n 'course_id':event.data.id,\n 'badge_id':null,\n 'continuation_id':null,\n }\n }\n }])[0].done((response) => {\n let item = response;\n self.relocateStudyItem(item).done(()=>{\n self.value.push(item);\n self.$emit(\"input\",self.value);\n\n // call the validate period function on next tick,\n // since it paints the item in the slot first\n this.$nextTick(() => {\n if(this.$refs.timingChecker){\n this.$refs.timingChecker.validate_course_period();\n }\n });\n });\n }).fail(notification.exception);\n } \n else if(event.type.type == \"filter\") {\n debug.info(\"Adding new filter compenent\");\n call([{\n methodname: 'local_treestudyplan_add_studyitem',\n args: { \n \"line_id\": self.line.id,\n \"slot\" : self.slotindex,\n \"type\": event.data.type,\n \"details\":{\n \"badge_id\": event.data.badge?event.data.badge.id:undefined,\n }\n }\n }])[0].done((response) => {\n let item = response;\n self.relocateStudyItem(item).done(()=>{\n item.layer = this.layer;\n self.value.push(item);\n self.$emit(\"input\",self.value); \n });\n }).fail(notification.exception);\n } \n }\n },\n onCut(event) {\n const self=this;\n let id = event.data.id;\n for(let i = 0; i < self.value.length; i++){ \n if(self.value[i].id == id){ \n self.value.splice(i, 1); i--; \n break; // just remove one\n }\n }\n // Do something to signal that this item has been removed\n this.$emit(\"input\",this.value);\n },\n relocateStudyItem(item){\n const iteminfo = {'id': item.id, 'layer': this.layer, 'slot': this.slotindex, 'line_id': this.line.id};\n return call([{\n methodname: 'local_treestudyplan_reorder_studyitems',\n args: { 'items': [iteminfo] } // function was designed to relocate multiple items at once, hence the array\n }])[0].fail(notification.exception); \n },\n onDragEnter(event){\n this.hover.component = event.data;\n this.hover.type = event.type;\n },\n onDragLeave(){\n this.hover.component = null;\n this.hover.type = null;\n },\n maxSpan(){\n // Determine the maximum span for components in this slot\n // Used for setting the max in the timing adjustment screen (s)\n // And for checking the filter types\n\n // Assume this slot is first one available\n let freeIndex = this.slotindex;\n // Determine last free slot following this one in the layer\n for(let i = this.slotindex + 1; i <= this.page.periods; i++){\n if(this.line.slots && this.line.slots[i] && this.line.slots[i].competencies){\n const l = this.line.slots[i].competencies;\n const f = this.line.slots[i-1].filters; // next filter is in the same slot\n if(l[this.layer] || f[this.layer]) {\n // slot is busy in this layer.\n break;\n } else {\n freeIndex = i;\n }\n } else {\n break; // stop processing\n }\n }\n // calculate span from that\n return freeIndex - this.slotindex + 1;\n\n },\n makeType(item){\n return {\n item: true,\n component: false,\n span: item.span,\n type: this.type,\n };\n },\n checkType(type) {\n if(type.type == this.type){\n if(type == 'filter'){\n return true;\n } else if(type.span <= this.maxSpan()){\n return true;\n } else {\n return false;\n }\n } else {\n return false;\n }\n }\n },\n template: `\n \n {{ value.shortname }}\n
\n --{{ hover.type }}--\n
\n `,\n });\n\n\n Vue.component('t-item-timing-checker', {\n props: {\n value: {\n type: Object, // t-item model\n },\n page: {\n type: Object, // Studyplan data\n },\n period: {\n type: Object, // Studyplan data\n },\n maxspan: {\n type: Number,\n },\n hidden: {\n type: Boolean,\n default: false,\n }\n },\n computed: {\n endperiod() {\n const endperiodnr = Math.min(this.page.periods,this.period.period + (this.value.span - 1));\n return this.page.perioddesc[endperiodnr-1];\n },\n course_period_matches() {\n const self=this;\n if(self.value && self.value.type == 'course'){\n self.datechanger.coursespan = datespaninfo(self.value.course.startdate,self.value.course.enddate);\n self.datechanger.periodspan = datespaninfo(self.period.startdate,self.endperiod.enddate);\n if( self.datechanger.coursespan.first.getTime() == self.datechanger.periodspan.first.getTime() \n && self.datechanger.coursespan.last.getTime() == self.datechanger.periodspan.last.getTime() ){\n return true;\n }\n else {\n return false;\n }\n } else {\n debug.warn(\"Timing thing not proper configured\",self.value,self.period,self.maxspan);\n return false;\n }\n },\n },\n data() {\n return {\n // Create random id to avoid opening the wrong modals\n id: Math.floor(Math.random() * Date.now()).toString(16),\n text: strings.course_timing,\n datechanger: {\n coursespan: null,\n periodspan: null,\n globals: datechanger_globals,\n }\n };\n },\n methods: {\n \n validate_course_period(force) {\n const self = this;\n \n debug.info(\"Validating course and period\");\n if(!(self.course_period_matches)){\n debug.info(\"Course timing does not match period timing\");\n\n if(self.value.course.canupdatecourse){\n if(!self.hidden || !self.datechanger.globals.default){\n // Periods do not match, pop up the date change request \n this.$bvModal.show('t-course-timing-matching-'+this.id);\n } else if (self.datechanger.globals.defaultvalue){\n // go for it without asking\n self.change_course_period();\n }\n }\n else {\n // user is not able to change course timing - show a warning\n if(!self.hidden || !self.datechanger.globals.hidewarn){\n this.$bvModal.show('t-course-timing-warning-'+this.id);\n }\n }\n }\n else {\n debug.info(\"Course timing matches period\",self.datechanger);\n }\n },\n change_course_period() {\n const self=this;\n // Save the state\n if(self.datechanger.globals.default){\n self.datechanger.globals.defaultvalue = true;\n }\n return call([{\n methodname: 'local_treestudyplan_course_period_timing',\n args: { period_id: self.period.id, \n course_id: this.value.course.id,\n span: this.value.span,\n }\n }])[0].fail(notification.exception).done((response) => {\n self.value.course.startdate = response.startdate;\n self.value.course.enddate = response.enddate;\n self.value.course.timing = response.timing;\n self.$emit(\"input\",self.value);\n });\n },\n change_span(span) {\n const self=this;\n return call([{\n methodname: 'local_treestudyplan_set_studyitem_span',\n args: { id: self.value.id,\n span: span\n }\n }])[0].fail(notification.exception).done((response) => {\n self.value.span = response.span;\n self.$emit('input',self.value);\n self.$nextTick(() => {\n self.validate_course_period();\n });\n } ); \n },\n format_duration(dsi){\n let s = \"\";\n if(dsi.years == 1){ s += `1 ${this.text.year}, `;}\n else if(dsi.years > 1){ s += `${dsi.years} ${this.text.years}, `;}\n if(dsi.weeks == 1){ s += `1 ${this.text.week}, `;}\n else if(dsi.weeks > 1){ s += `${dsi.weeks} ${this.text.weeks}, `;}\n if(dsi.days == 1){ s += `1 ${this.text.day}, `;}\n else if(dsi.days > 1){ s += `${dsi.days} ${this.text.days}, `;}\n\n return s.toLocaleLowerCase();\n },\n },\n // To avoid the span creeping in the dom where it shouldn't, set display to none if it is hidden\n // This does not affect the modals, which are rendered outside of this element when needed\n template: `\n \n \n \n \n \n \n \n \n {{ text.periodspan\n }} \n {{ n }} \n {{ \n (value.span == 1)?text.period.toLowerCase():text.periods.toLowerCase() \n }}\n \n \n \n \n {{ text.desc }} \n \n \n \n \n \n \n {{ text.rememberchoice }} \n \n \n \n \n {{ text.desc }} \n \n \n \"6\">\n \n \n \n {{ text.hidewarning }} \n \n \n
\n `,\n });\n\n\n Vue.component('t-item', {\n props: {\n value :{\n type: Object,\n default(){ return null;},\n },\n dummy :{\n type: Boolean,\n default() { return false;},\n },\n plan: {\n type: Object, // Studyplan page\n default() { return null;},\n },\n page: {\n type: Object, // Studyplan page\n default() { return null;},\n },\n period: {\n type: Object, // Studyplan page\n default() { return null;},\n },\n maxspan: {\n type: Number,\n default() { return 0;},\n }, \n },\n data() {\n return {\n dragLine: null,\n dragEventListener: null,\n deleteMode: false,\n condition_options: string_keys.conditions,\n text: strings.item_text,\n showContext: false,\n lines: [],\n };\n },\n methods: {\n dragStart(event){\n // Add line between start point and drag image\n this.deleteMode = false;\n let start = document.getElementById('studyitem-'+this.value.id);\n let dragelement= document.getElementById('t-item-cdrag-'+this.value.id);\n dragelement.style.position = 'fixed';\n dragelement.style.left = event.position.x+'px';\n dragelement.style.top = event.position.y+'px';\n this.dragLine = new SimpleLine(start,dragelement,{\n color: \"#777\",\n gravity: {\n start: LINE_GRAVITY,\n end: LINE_GRAVITY,\n },\n });\n // Add separate event listener to reposition mouse move\n document.addEventListener(\"mousemove\",this.onMouseMove);\n },\n dragEnd(){\n if(this.dragLine !== null) {\n this.dragLine.remove();\n }\n let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);\n dragelement.style.removeProperty('left');\n dragelement.style.removeProperty('top');\n dragelement.style.removeProperty('position');\n document.removeEventListener(\"mousemove\",this.onMouseMove);\n },\n onMouseMove: function(event){\n let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);\n dragelement.style.position = 'fixed';\n dragelement.style.left = event.clientX+'px';\n dragelement.style.top = event.clientY+'px';\n // line will follow automatically\n },\n onDrop(event){\n let from_id = event.data.id;\n let to_id = this.value.id;\n this.redrawLines();\n call([{\n methodname: 'local_treestudyplan_connect_studyitems',\n args: { 'from_id': from_id, 'to_id': to_id }\n }])[0].done((response)=>{\n let conn = {'id': response.id, 'from_id': response.from_id, 'to_id': response.to_id};\n ItemEventBus.$emit(\"createdConnection\",conn);\n this.value.connections.in.push(conn);\n }).fail(notification.exception);\n },\n redrawLine(conn){\n const lineColor = \"var(--success)\";\n const start = document.getElementById(`studyitem-${conn.from_id}`);\n const end = document.getElementById(`studyitem-${conn.to_id}`);\n\n // delete old line\n if(this.lines[conn.to_id]){\n this.lines[conn.to_id].remove(); \n delete this.lines[conn.to_id];\n } \n // create a new line if the start and finish items are visible\n if(start !== null && end !== null && isVisible(start) && isVisible(end)){\n this.lines[conn.to_id] = new SimpleLine( start,end,{\n color: lineColor,\n gravity: {\n start: LINE_GRAVITY,\n end: LINE_GRAVITY,\n },\n });\n }\n\n },\n deleteLine(conn){\n const self = this;\n call([{\n methodname: 'local_treestudyplan_disconnect_studyitems',\n args: { 'from_id': conn.from_id, 'to_id': conn.to_id }\n }])[0].done((response)=>{\n if(response.success){\n this.removeLine(conn);\n // send disconnect event on message bus, so the connection on the other end can delete it too\n ItemEventBus.$emit(\"connectionDisconnected\",conn);\n // Remove connection from our outgoing list\n let index = self.value.connections.out.indexOf(conn);\n self.value.connections.out.splice(index, 1);\n }\n }).fail(notification.exception);\n },\n highlight(conn){\n if(this.lines[conn.to_id]){\n this.lines[conn.to_id].setConfig({color:\"var(--danger)\",});\n }\n },\n normalize(conn){\n if(this.lines[conn.to_id]){\n this.lines[conn.to_id].setConfig({color:\"var(--success)\",});\n }\n },\n updateItem() {\n call([{\n methodname: 'local_treestudyplan_edit_studyitem',\n args: { 'id': this.value.id,\n 'conditions': this.value.conditions, \n 'continuation_id': this.value.continuation_id,}\n }])[0].fail(notification.exception);\n },\n doShowContext(event) {\n if(this.hasContext){\n this.showContext=true;\n event.preventDefault();\n }\n },\n redrawLines(){\n if(this.value.connections && this.value.connections.out){\n for(let i in this.value.connections.out){\n let conn = this.value.connections.out[i];\n this.redrawLine(conn);\n }\n }\n },\n\n // EVENT LISTENERS\n onCreatedConnection(conn){\n if(conn.from_id == this.value.id){\n this.value.connections.out.push(conn);\n this.redrawLine(conn);\n }\n },\n // Listener for the signal that a connection was removed by the outgoing item\n onRemovedConnection(conn){\n if(this.value.connections && this.value.connections.out){\n for(let i in this.value.connections.in){\n let c_in = this.value.connections.in[i];\n if(conn.id == c_in.id){\n self.value.connections.out.splice(i, 1);\n }\n }\n }\n },\n // Listener for reposition events\n // When an item in the list is repositioned, all lines need to be redrawn\n onRePositioned(){\n if(this.value.connections && this.value.connections.out){\n for(let i in this.value.connections.out){\n let conn = this.value.connections.out[i];\n this.redrawLine(conn);\n }\n }\n },\n // When an item is disPositioned - (temporarily) removed from the list,\n // all connections need to be deleted.\n onDisPositioned(re_id){\n if(this.value.connections && this.value.connections.out){\n for(let i in this.value.connections.out){\n let conn = this.value.connections.out[i];\n if(conn.to_id == re_id){\n this.removeLine(conn);\n } \n }\n }\n },\n\n // When an item is deleted \n // all connections to/from that item need to be cleaned up\n onItemDeleted(item_id){\n const self = this;\n if(this.value.connections && this.value.connections.out){\n for(const i in this.value.connections.out){\n let conn = this.value.connections.out[i];\n if(conn.to_id == item_id){\n self.removeLine(conn);\n self.value.connections.out.splice(i, 1);\n } \n }\n }\n if(this.value.connections && this.value.connections.in){\n for(const i in this.value.connections.in){\n let conn = this.value.connections.in[i];\n if(conn.from_id == item_id){\n self.value.connections.out.splice(i, 1);\n } \n }\n }\n },\n\n onRedrawLines(){\n this.redrawLines();\n },\n\n removeLine(conn){\n if(this.lines[conn.to_id]){\n this.lines[conn.to_id].remove();\n delete this.lines[conn.to_id];\n } \n },\n\n },\n computed: {\n hasConnectionsOut() {\n return !([\"finish\",].includes(this.value.type));\n },\n hasConnectionsIn() {\n return !([\"start\",].includes(this.value.type));\n },\n hasContext() {\n return ['junction','finish'].includes(this.value.type);\n }\n },\n created(){\n // Add event listeners on the message bus\n // But only if not in \"dummy\" mode - mode which is used for droplist placeholders\n // Since an item is \"fully made\" with all references, not specifying dummy mode really messes things up\n if(!this.dummy){\n\n // Listener for the signal that a new connection was made and needs to be drawn\n // Sent by the incoming item - By convention, outgoing items are responsible for drawing the lines\n ItemEventBus.$on('createdConnection', this.onCreatedConnection);\n // Listener for the signal that a connection was removed by the outgoing item\n ItemEventBus.$on('removedConnection', this.onRemovedConnection);\n // Listener for reposition events\n // When an item in the list is repositioned, all lines need to be redrawn\n ItemEventBus.$on('rePositioned', this.onRePositioned);\n // When an item is disPositioned - (temporarily) removed from the list,\n // all connections need to be deleted.\n ItemEventBus.$on('disPositioned', this.onDisPositioned);\n // When an item is deleted \n // all connections to/from that item need to be cleaned up\n ItemEventBus.$on('itemDeleted', this.onItemDeleted);\n ItemEventBus.$on('redrawLines', this.onRedrawLines);\n\n\n }\n },\n mounted(){\n // Initialize connection lines when mounting\n // But only if not in \"dummy\" mode - mode which is used for droplist placeholders\n // Since an item is \"fully made\" with all references, not specifying dummy mode really messes things up\n\n if(!this.dummy)\n {\n this.redrawLines();\n setTimeout(()=>{\n ItemEventBus.$emit(\"rePositioned\",this.value.id);\n },10);\n }\n },\n beforeDestroy(){\n if(!this.dummy) {\n for(let i in this.value.connections.out){\n let conn = this.value.connections.out[i];\n this.removeLine(conn);\n }\n ItemEventBus.$emit(\"disPositioned\",this.value.id);\n\n // Remove event listeners\n ItemEventBus.$off('createdConnection', this.onCreatedConnection);\n ItemEventBus.$off('removedConnection', this.onRemovedConnection);\n ItemEventBus.$off('rePositioned', this.onRePositioned);\n ItemEventBus.$off('disPositioned', this.onDisPositioned);\n ItemEventBus.$off('itemDeleted', this.onItemDeleted);\n ItemEventBus.$off('redrawLines', this.onRedrawLines);\n }\n },\n beforeUpdate(){\n },\n updated(){\n if(!this.dummy) {\n this.redrawLines();\n }\n },\n template: `\n \n `,\n });\n\n Vue.component('t-item-invalid', {\n props: {\n 'value' :{\n type: Object,\n default: function(){ return null;},\n },\n },\n data() {\n return {\n text: strings.invalid,\n };\n },\n methods: {\n },\n template: `\n {{ text.question }}
{{ text.course }}
\n{{ value.course.fullname }}
\n{{ value.course.shortname }}
\n{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}
\n{{ text.duration }}
\n {{ format_duration(datechanger.coursespan)}}
{{ text.period }}
\n{{ period.fullname }} 1\"> - {{ endperiod.fullname }}
\n{{ period.shortname }} 1\"> - {{ endperiod.shortname }}
\n{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}
\n{{ text.duration }}
\n {{ format_duration(datechanger.periodspan)}}
{{ text.warning }}
{{ text.course }}
\n{{ value.course.fullname }}
\n{{ value.course.shortname }}
\n{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}
\n{{ text.duration }}
\n {{ format_duration(datechanger.coursespan)}}
{{ text.period }}
\n{{ period.fullname }} 1\"> - {{ endperiod.fullname }}
\n{{ period.shortname }} 1\"> - {{ endperiod.shortname }}
\n{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}
\n{{ text.duration }}
\n {{ format_duration(datechanger.periodspan)}}
\n \n \n \n \n \n \n \n {{text.error}}\n \n \n \n \n
\n `,\n });\n\n Vue.component('t-item-course', {\n props: {\n value:{\n type: Object,\n default(){ return null;},\n },\n plan:{\n type: Object,\n default(){ return null;},\n },\n page: {\n type: Object, // PAge data\n default() { return null;}\n },\n period: {\n type: Object, // Period data\n default() { return null;}\n },\n maxspan: {\n type: Number,\n default() { return 0;}\n }, \n },\n data() {\n return {\n condition_options: string_keys.conditions,\n text: strings.item_course_text,\n };\n },\n computed: {\n useItemConditions() {\n if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useItemConditions !== undefined){\n return this.plan.aggregation_info.useItemConditions;\n }\n else {\n return false;\n }\n },\n\n configurationState(){\n if(this.hasGrades() || this.hasCompletions()) {\n return \"t-configured-ok\";\n } else {\n return \"t-configured-alert\";\n }\n },\n\n configurationIcon(){\n if(this.hasGrades() || this.hasCompletions()) {\n return \"check\";\n } else {\n return \"exclamation-circle\";\n }\n },\n startdate(){\n return format_date(this.value.course.startdate);\n },\n enddate(){\n if(this.value.course.enddate){\n return format_date(this.value.course.enddate);\n } \n else {\n return this.text.noenddate;\n }\n }\n\n },\n methods: {\n hasGrades() {\n if(this.value.course.grades && this.value.course.grades.length > 0){\n for(const g of this.value.course.grades){\n if(g.selected){\n return true;\n }\n }\n } \n return false;\n },\n hasCompletions() {\n if(this.value.course.completion && this.value.course.completion.conditions) {\n for(const cgroup of this.value.course.completion.conditions){\n if(cgroup.items && cgroup.items.length > 0){\n return true;\n }\n }\n }\n return false;\n },\n includeChanged(newValue,g){\n call([{\n methodname: 'local_treestudyplan_include_grade',\n args: { 'grade_id': g.id,\n 'item_id': this.value.id, \n 'include': newValue,\n 'required': g.required,\n }\n }])[0].fail(notification.exception);\n },\n requiredChanged(newValue,g){\n call([{\n methodname: 'local_treestudyplan_include_grade',\n args: { 'grade_id': g.id,\n 'item_id': this.value.id, \n 'include': g.selected,\n 'required': newValue,\n }\n }])[0].fail(notification.exception);\n }, \n updateConditions() {\n call([{\n methodname: 'local_treestudyplan_edit_studyitem',\n args: { 'id': this.value.id,\n 'conditions': this.value.conditions, \n }\n }])[0].fail(notification.exception);\n },\n },\n created() {\n\n },\n template: `\n \n \n \n \n \n \n
\n `,\n });\n\n\n Vue.component('t-item-course-grades', {\n props: {\n 'value' :{\n type: Object,\n default(){ return null;},\n },\n 'plan' :{\n type: Object,\n default(){ return null;},\n },\n },\n data() {\n return {\n condition_options: string_keys.conditions,\n text: strings.item_course_text,\n };\n },\n computed: {\n useRequiredGrades() {\n if(this.plan && this.plan.aggregation_info && this.plan.aggregation_info.useRequiredGrades !== undefined){\n return this.plan.aggregation_info.useRequiredGrades;\n }\n else {\n return false;\n }\n },\n selectedgrades(){\n let list = [];\n for(let ix in this.value.course.grades){\n let g = this.value.course.grades[ix];\n if(g.selected){\n list.push(g);\n }\n }\n return list;\n }, \n },\n methods: {\n includeChanged(newValue,g){\n call([{\n methodname: 'local_treestudyplan_include_grade',\n args: { 'grade_id': g.id,\n 'item_id': this.value.id, \n 'include': newValue,\n 'required': g.required,\n }\n }])[0].fail(notification.exception);\n },\n requiredChanged(newValue,g){\n call([{\n methodname: 'local_treestudyplan_include_grade',\n args: { 'grade_id': g.id,\n 'item_id': this.value.id, \n 'include': g.selected,\n 'required': newValue,\n }\n }])[0].fail(notification.exception);\n }, \n },\n created() {\n\n },\n template: `\n \n
\n \n \n
\n \n \n \n {{ value.course.displayname }}\n \n
\n \n
\n {{ value.course.fullname }}\n \n
\n {{ value.course.context.path.join(\" / \")}} / {{value.course.shortname}}\n\n \n
\n \n \n \n {{text['coursetiming_'+value.course.timing]}}
\n {{ startdate }} - {{ enddate }}\n
\n \n {{ startdate }} - {{ enddate }}\n
\n
\n `,\n });\n\n Vue.component('t-item-course-completion',{\n props: {\n value : {\n type: Object,\n default: function(){ return {};},\n },\n guestmode: {\n type: Boolean,\n default: false,\n },\n course: {\n type: Object,\n default: function(){ return {};},\n },\n },\n data() {\n return {\n text: strings.completion,\n };\n },\n created(){\n const self = this;\n // Get text strings for condition settings\n let stringkeys = [];\n for(const key in this.text){\n stringkeys.push({ key: key, component: 'local_treestudyplan'});\n }\n get_strings(stringkeys).then(function(strings){\n let i = 0;\n for(const key in self.text){\n self.text[key] = strings[i];\n i++;\n }\n });\n },\n computed: {\n hasCompletions() {\n if(this.value.conditions) {\n for(const cgroup of this.value.conditions){\n if(cgroup.items && cgroup.items.length > 0){\n return true;\n }\n }\n }\n return false;\n },\n },\n methods: {\n completion_icon(completion) {\n switch(completion){\n case \"progress\":\n return \"exclamation-circle\";\n case \"complete\":\n return \"check-circle\";\n case \"complete-pass\":\n return \"check-circle\";\n case \"complete-fail\":\n return \"times-circle\";\n default: // case \"incomplete\"\n return \"circle-o\";\n }\n },\n \n completion_tag(cgroup){\n return cgroup.completion?'completed':'incomplete';\n }\n },\n template: `\n - \n
- \n {{text.grade_include}}{{text.grade_require}}\n \n
- \n
\n \n \n g.name = fd.get('name')\"\n v-if=\"g.cmid > 0\" \n :cmid=\"g.cmid\" \n :coursectxid=\"value.course.ctxid\"\n genericonly>{{g.name}} \n \n
| {{ text.aggregation_overall_all}}{{ text.aggregation_overall_any}} | \n|
| {{text.completion_not_configured}}!\n {{text.configure_completion}}\n | \n |
| 1\"\n >{{ text.aggregation_all}}{{ text.aggregation_any}}\n {{cgroup.title}} | \n|
|---|---|
| \n | \n\n {{ci.details.requirement}}\n | \n
\n \n
\n `,\n });\n\n Vue.component('t-item-finish',{\n props: {\n value : {\n type: Object,\n default: function(){ return {};},\n },\n },\n data() {\n return {\n };\n },\n methods: {\n },\n template: `\n \n \n
\n `,\n });\n\n Vue.component('t-item-start',{\n props: {\n value : {\n type: Object,\n default: function(){ return {};},\n },\n },\n data() {\n return {\n };\n },\n created(){\n \n },\n methods: {\n },\n template: `\n \n \n
\n `,\n });\n\n Vue.component('t-item-badge',{\n props: {\n value : {\n type: Object,\n default: function(){ return { badge: {}};},\n },\n },\n data() {\n return {\n txt: strings,\n };\n },\n methods: {\n },\n template: `\n \n \n \n \n \n \n \n ![]()
\n \n \n \n\n
\n `,\n });\n\n Vue.component('t-coursecat-list',{\n props: {\n value : {\n type: Array,\n default: function(){ return {};},\n },\n },\n data() {\n return {\n };\n },\n methods: {\n },\n template: `\n \n
\n \n \n {{ value.badge.name }}
\n{{value.badge.description}}
\n- \n
- \n
- \n
\n {{ course.shortname }} - {{ course.fullname }}\n \n \n