diff --git a/amd/build/page-view-plan.min.js b/amd/build/page-view-plan.min.js
index 218cbbd..0e0f1ce 100644
--- a/amd/build/page-view-plan.min.js
+++ b/amd/build/page-view-plan.min.js
@@ -1,3 +1,3 @@
-define("local_treestudyplan/page-view-plan",["exports","core/ajax","core/notification","./vue/vue","./util/debugger","./util/string-helper","./studyplan-processor","./report-viewer-components","./treestudyplan-components","./modedit-modal","./portal-vue/portal-vue.esm","./bootstrap-vue/bootstrap-vue"],(function(_exports,_ajax,_notification,_vue,_debugger,_stringHelper,_studyplanProcessor,_reportViewerComponents,_treestudyplanComponents,_modeditModal,_portalVue,_bootstrapVue){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=function(_contextid,categoryid){_contextid=void 0===_contextid||!Number.isInteger(Number(_contextid))||_contextid<1?1:Number(_contextid);categoryid=void 0!==categoryid&&Number.isInteger(Number(categoryid))?Number(categoryid):0;var app=new _vue.default({el:"#root",data:{displayedstudyplan:null,activestudyplan:null,associatedstudents:[],selectedstudent:null,studentstudyplan:null,loadingstudyplan:!1,studyplans:[],text:strings.studyplan,toolbox:{right:!0},usedcontexts:[]},mounted:function(){return(fn=regeneratorRuntime.mark((function _callee(){return regeneratorRuntime.wrap((function(_context){for(;;)switch(_context.prev=_context.next){case 0:(0,_ajax.call)([{methodname:"local_treestudyplan_list_studyplans",args:{context_id:_contextid}}])[0].done((function(response){var timingval={present:0,past:1,future:2};response.sort((function(a,b){var timinga=_treestudyplanComponents.default.studyplanTiming(a),timingb=_treestudyplanComponents.default.studyplanTiming(b),t=timingval[timinga]-timingval[timingb];return 0==t?a.name.localeCompare(b.name):t})),app.studyplans=response;var parts=window.location.hash.replace("#","").split("-");if(parts&&parts.length>0)for(var idx in app.studyplans)if(app.studyplans[idx].id==parts[0]){app.selectStudyplan(app.studyplans[idx],parts[1]);break}})).fail(_notification.default.exception),(0,_ajax.call)([{methodname:"local_treestudyplan_list_used_categories",args:{operation:"view"}}])[0].done((function(response){var contexts=[];for(var ix in response)response[ix].studyplancount>0&&contexts.push(response[ix]);app.usedcontexts=contexts})).fail(_notification.default.exception);case 2:case"end":return _context.stop()}}),_callee)})),function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))})();var fn},computed:{dropdown_title:function(){return this.activestudyplan&&this.activestudyplan.name?this.activestudyplan.name:this.text.studyplan_select_placeholder},contextid:function(){return _contextid}},methods:{switchContext:function(ctx){var params=new URLSearchParams(location.search);params.set("categoryid",ctx.id),window.location.search=params.toString()},closeStudyplan:function(){app.activestudyplan=null,app.associatedstudents=[],app.studentstudyplan=[],app.displayedstudyplan=null,window.location.hash=""},selectStudyplan:function(studyplan,studentid){app.loadingstudyplan=!0,app.activestudyplan=null,app.associatedstudents=[],app.selectedstudent=null,app.studentstudyplan=null,(0,_ajax.call)([{methodname:"local_treestudyplan_get_studyplan_map",args:{id:studyplan.id}}])[0].done((function(response){app.activestudyplan=(0,_studyplanProcessor.ProcessStudyplan)(response,!0),app.displayedstudyplan=app.activestudyplan,app.loadingstudyplan=!1,window.location.hash=app.activestudyplan.id,(0,_ajax.call)([{methodname:"local_treestudyplan_all_associated",args:{studyplan_id:studyplan.id}}])[0].done((function(response){if(app.associatedstudents=response,studentid){var _step,_iterator=function(o,allowArrayLike){var it="undefined"!=typeof Symbol&&o[Symbol.iterator]||o["@@iterator"];if(!it){if(Array.isArray(o)||(it=function(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(o))||allowArrayLike&&o&&"number"==typeof o.length){it&&(o=it);var i=0,F=function(){};return{s:F,n:function(){return i>=o.length?{done:!0}:{done:!1,value:o[i++]}},e:function(_e){throw _e},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var err,normalCompletion=!0,didErr=!1;return{s:function(){it=it.call(o)},n:function(){var step=it.next();return normalCompletion=step.done,step},e:function(_e2){didErr=!0,err=_e2},f:function(){try{normalCompletion||null==it.return||it.return()}finally{if(didErr)throw err}}}}(app.associatedstudents);try{for(_iterator.s();!(_step=_iterator.n()).done;){var student=_step.value;if(student.id==studentid){app.showStudentView(student);break}}}catch(err){_iterator.e(err)}finally{_iterator.f()}}})).fail(_notification.default.exception)})).fail((function(error){_notification.default.exception(error),app.loadingstudyplan=!1}))},showStudentView:function(student){app.selectedstudent=student,app.studentstudyplan=null,app.loadingstudyplan=!0,(0,_ajax.call)([{methodname:"local_treestudyplan_get_user_studyplan",args:{userid:student.id,studyplanid:app.activestudyplan.id}}])[0].done((function(response){app.studentstudyplan=(0,_studyplanProcessor.ProcessStudyplan)(response,!1),app.displayedstudyplan=app.studentstudyplan,app.loadingstudyplan=!1,window.location.hash=app.activestudyplan.id+"-"+student.id})).fail((function(error){_notification.default.exception(error),app.loadingstudyplan=!1}))},showOverview:function(){app.selectedstudent=null,app.studentstudyplan=null,app.displayedstudyplan=app.activestudyplan,window.location.hash=app.activestudyplan.id}}})},_notification=_interopRequireDefault(_notification),_vue=_interopRequireDefault(_vue),_debugger=_interopRequireDefault(_debugger),_reportViewerComponents=_interopRequireDefault(_reportViewerComponents),_treestudyplanComponents=_interopRequireDefault(_treestudyplanComponents),_modeditModal=_interopRequireDefault(_modeditModal),_portalVue=_interopRequireDefault(_portalVue),_bootstrapVue=_interopRequireDefault(_bootstrapVue),_vue.default.use(_reportViewerComponents.default),_vue.default.use(_modeditModal.default),_vue.default.use(_portalVue.default),_vue.default.use(_bootstrapVue.default);new _debugger.default("treestudyplanviewer");var strings=(0,_stringHelper.load_strings)({studyplan:{studyplan_select_placeholder:"studyplan_select_placeholder"}})}));
+define("local_treestudyplan/page-view-plan",["exports","core/ajax","core/notification","./vue/vue","./util/debugger","./util/string-helper","./studyplan-processor","./util/date-helper","./report-viewer-components","./treestudyplan-components","./modedit-modal","./portal-vue/portal-vue.esm","./bootstrap-vue/bootstrap-vue"],(function(_exports,_ajax,_notification,_vue,_debugger,_stringHelper,_studyplanProcessor,_dateHelper,_reportViewerComponents,_treestudyplanComponents,_modeditModal,_portalVue,_bootstrapVue){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=function(contextid,categoryid){contextid=void 0===contextid||!Number.isInteger(Number(contextid))||contextid<1?1:Number(contextid);categoryid=void 0!==categoryid&&Number.isInteger(Number(categoryid))?Number(categoryid):0;let app=new _vue.default({el:"#root",data:{displayedstudyplan:null,activestudyplan:null,associatedstudents:[],selectedstudent:null,studentstudyplan:null,loadingstudyplan:!1,studyplans:[],text:strings.studyplan,toolbox:{right:!0},usedcontexts:[]},async mounted(){(0,_ajax.call)([{methodname:"local_treestudyplan_list_studyplans",args:{context_id:contextid}}])[0].done((function(response){const timingval={present:0,past:1,future:2};response.sort(((a,b)=>{const timinga=(0,_dateHelper.studyplanTiming)(a),timingb=(0,_dateHelper.studyplanTiming)(b),t=timingval[timinga]-timingval[timingb];return 0==t?a.name.localeCompare(b.name):t})),app.studyplans=response;const parts=window.location.hash.replace("#","").split("-");if(parts&&parts.length>0)for(let idx in app.studyplans)if(app.studyplans[idx].id==parts[0]){app.selectStudyplan(app.studyplans[idx],parts[1]);break}})).fail(_notification.default.exception),(0,_ajax.call)([{methodname:"local_treestudyplan_list_used_categories",args:{operation:"view"}}])[0].done((function(response){const contexts=[];for(const ix in response)response[ix].studyplancount>0&&contexts.push(response[ix]);app.usedcontexts=contexts})).fail(_notification.default.exception)},computed:{dropdown_title(){return this.activestudyplan&&this.activestudyplan.name?this.activestudyplan.name:this.text.studyplan_select_placeholder},contextid:()=>contextid},methods:{switchContext(ctx){const params=new URLSearchParams(location.search);params.set("categoryid",ctx.id),window.location.search=params.toString()},closeStudyplan(){app.activestudyplan=null,app.associatedstudents=[],app.studentstudyplan=[],app.displayedstudyplan=null,window.location.hash=""},selectStudyplan(studyplan,studentid){app.loadingstudyplan=!0,app.activestudyplan=null,app.associatedstudents=[],app.selectedstudent=null,app.studentstudyplan=null,(0,_ajax.call)([{methodname:"local_treestudyplan_get_studyplan_map",args:{id:studyplan.id}}])[0].done((function(response){app.activestudyplan=(0,_studyplanProcessor.ProcessStudyplan)(response,!0),app.displayedstudyplan=app.activestudyplan,app.loadingstudyplan=!1,window.location.hash=app.activestudyplan.id,(0,_ajax.call)([{methodname:"local_treestudyplan_all_associated",args:{studyplan_id:studyplan.id}}])[0].done((function(response){if(app.associatedstudents=response,studentid)for(const student of app.associatedstudents)if(student.id==studentid){app.showStudentView(student);break}})).fail(_notification.default.exception)})).fail((function(error){_notification.default.exception(error),app.loadingstudyplan=!1}))},showStudentView(student){app.selectedstudent=student,app.studentstudyplan=null,app.loadingstudyplan=!0,(0,_ajax.call)([{methodname:"local_treestudyplan_get_user_studyplan",args:{userid:student.id,studyplanid:app.activestudyplan.id}}])[0].done((function(response){app.studentstudyplan=(0,_studyplanProcessor.ProcessStudyplan)(response,!1),app.displayedstudyplan=app.studentstudyplan,app.loadingstudyplan=!1,window.location.hash=app.activestudyplan.id+"-"+student.id})).fail((function(error){_notification.default.exception(error),app.loadingstudyplan=!1}))},showOverview(){app.selectedstudent=null,app.studentstudyplan=null,app.displayedstudyplan=app.activestudyplan,window.location.hash=app.activestudyplan.id}}})},_notification=_interopRequireDefault(_notification),_vue=_interopRequireDefault(_vue),_debugger=_interopRequireDefault(_debugger),_reportViewerComponents=_interopRequireDefault(_reportViewerComponents),_treestudyplanComponents=_interopRequireDefault(_treestudyplanComponents),_modeditModal=_interopRequireDefault(_modeditModal),_portalVue=_interopRequireDefault(_portalVue),_bootstrapVue=_interopRequireDefault(_bootstrapVue),_vue.default.use(_reportViewerComponents.default),_vue.default.use(_modeditModal.default),_vue.default.use(_portalVue.default),_vue.default.use(_bootstrapVue.default);new _debugger.default("treestudyplanviewer");let strings=(0,_stringHelper.load_strings)({studyplan:{studyplan_select_placeholder:"studyplan_select_placeholder"}})}));
 
 //# sourceMappingURL=page-view-plan.min.js.map
\ No newline at end of file
diff --git a/amd/build/page-view-plan.min.js.map b/amd/build/page-view-plan.min.js.map
index 2be4701..45453b1 100644
--- a/amd/build/page-view-plan.min.js.map
+++ b/amd/build/page-view-plan.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"page-view-plan.min.js","sources":["../src/page-view-plan.js"],"sourcesContent":["/*eslint no-var: \"error\" */\n/*eslint no-unused-vars: \"off\" */\n/*eslint linebreak-style: \"off\" */\n/*eslint no-trailing-spaces: \"off\" */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n// You can call it anything you like\n\nimport {call} from 'core/ajax';\nimport notification from 'core/notification';\n\nimport Vue from './vue/vue';\n\nimport Debugger from './util/debugger';\nimport {load_strings} from './util/string-helper';\nimport {ProcessStudyplan} from './studyplan-processor';\n\nimport RVComponents from './report-viewer-components';\nVue.use(RVComponents);\nimport TSComponents from './treestudyplan-components';\nimport ModalComponents from './modedit-modal';\nVue.use(ModalComponents);\n\nimport PortalVue from './portal-vue/portal-vue.esm';\nVue.use(PortalVue);\nimport BootstrapVue from './bootstrap-vue/bootstrap-vue';\nVue.use(BootstrapVue);\n\n\nlet debug = new Debugger(\"treestudyplanviewer\");\n\nlet strings = load_strings({\n    studyplan: {\n        studyplan_select_placeholder: 'studyplan_select_placeholder',\n    },\n});\n\n/**\n * Initialize the Page\n * @param {int} contextid The context we should attempt to work in (1:1 related to the category)\n * @param {int} categoryid The category we shoud attempt to work in (1:1 related to the context)\n */\nexport function init(contextid,categoryid) {\n    // Make sure the id's are numeric and integer\n    if(undefined === contextid || !Number.isInteger(Number(contextid)) || contextid < 1 ){ contextid = 1;}\n    else { contextid = Number(contextid);} // ensure a numeric value instead of string\n    if(undefined === categoryid || !Number.isInteger(Number(categoryid))){ categoryid = 0;}\n    else { categoryid = Number(categoryid);} // ensure a numeric value instead of string\n\n    const in_systemcontext = (contextid <= 1);\n\n    let app = new Vue({\n        el: '#root',\n        data: {\n            displayedstudyplan: null,\n            activestudyplan: null,\n            associatedstudents: [],\n            selectedstudent: null,\n            studentstudyplan: null,\n            loadingstudyplan: false,\n            studyplans: [],\n            text: strings.studyplan,\n            toolbox: {\n                right: true,\n            },\n            usedcontexts: [],\n        },\n        async mounted() {\n            call([{\n                methodname: 'local_treestudyplan_list_studyplans',\n                args: {context_id: contextid}\n            }])[0].done(function(response){\n                const timingval = { present: 0, past: 1, future: 2};\n                response.sort((a,b) => {\n                    const timinga = TSComponents.studyplanTiming(a);\n                    const timingb = TSComponents.studyplanTiming(b);\n\n                    const t = timingval[timinga] - timingval[timingb];\n                    if(t == 0){\n                        // sort by name if timing is equal\n                        return a.name.localeCompare(b.name);\n                    }\n                    else {\n                        return t;\n                    }\n                });\n                app.studyplans = response;\n                // load studyplan from hash if applicable\n                const hash = window.location.hash.replace('#','');\n                const parts = hash.split(\"-\");\n\n                if(!!parts && parts.length > 0){\n                    for(let idx in app.studyplans){\n                        if(app.studyplans[idx].id == parts[0]){\n                            app.selectStudyplan(app.studyplans[idx],parts[1]);\n                            break;\n                        }\n                    }\n                }\n            }).fail(notification.exception);\n            call([{\n                methodname: 'local_treestudyplan_list_used_categories',\n                args: { operation: 'view'}\n            }])[0].done(function(response){\n                const contexts = [];\n                for(const ix in response){\n                    if(response[ix].studyplancount >0){\n                        contexts.push(response[ix]);\n                    }\n                }\n                app.usedcontexts = contexts;\n            }).fail(notification.exception);\n        },\n        computed: {\n            dropdown_title(){\n                if(this.activestudyplan && this.activestudyplan.name){\n                    return this.activestudyplan.name;\n                }\n                else{\n                    return this.text.studyplan_select_placeholder;\n                }\n            },\n            contextid(){\n                return contextid;\n            }\n        },\n        methods: {\n            switchContext(ctx){\n                const params = new URLSearchParams(location.search);\n                params.set('categoryid', ctx.id);\n                window.location.search = params.toString();\n\n            },\n            closeStudyplan() {\n                app.activestudyplan = null;\n                app.associatedstudents = [];\n                app.studentstudyplan = [];\n                app.displayedstudyplan = null;\n                window.location.hash = '';\n            },\n\n            selectStudyplan(studyplan,studentid){\n                // fetch studyplan\n                app.loadingstudyplan = true;\n                app.activestudyplan = null;\n                app.associatedstudents = [];\n                app.selectedstudent = null;\n                app.studentstudyplan = null;\n                call([{\n                    methodname: 'local_treestudyplan_get_studyplan_map',\n                    args: { id: studyplan.id}\n                }])[0].done(function(response){\n                    app.activestudyplan = ProcessStudyplan(response,true);\n                    app.displayedstudyplan = app.activestudyplan;\n                    app.loadingstudyplan = false;\n                    window.location.hash = app.activestudyplan.id;\n                    call([{\n                        methodname: 'local_treestudyplan_all_associated',\n                        args: { studyplan_id: studyplan.id}\n                    }])[0].done(function(response){\n                        app.associatedstudents = response;\n                        if(studentid){\n                            for(const student of app.associatedstudents){\n                                if(student.id == studentid){\n                                    app.showStudentView(student);\n                                    break;\n                                }\n                            }\n                        }\n                    }).fail(notification.exception);\n\n                }).fail(function(error){\n                    notification.exception(error);\n                    app.loadingstudyplan = false;\n                });\n            },\n            showStudentView(student){\n                app.selectedstudent = student;\n                app.studentstudyplan = null;\n                app.loadingstudyplan = true;\n                call([{\n                    methodname: 'local_treestudyplan_get_user_studyplan',\n                    args: { userid: student.id, studyplanid: app.activestudyplan.id}\n                }])[0].done(function(response){\n                    app.studentstudyplan = ProcessStudyplan(response,false);\n                    app.displayedstudyplan = app.studentstudyplan;\n                    app.loadingstudyplan = false;\n                    window.location.hash = app.activestudyplan.id + \"-\" + student.id;\n                }).fail(function(error){\n                    notification.exception(error);\n                    app.loadingstudyplan = false;\n                });\n\n\n            },\n            showOverview(){\n                app.selectedstudent = null;\n                app.studentstudyplan = null;\n                app.displayedstudyplan = app.activestudyplan;\n                window.location.hash = app.activestudyplan.id;\n            }\n\n        },\n    });\n}\n"],"names":["contextid","categoryid","undefined","Number","isInteger","app","Vue","el","data","displayedstudyplan","activestudyplan","associatedstudents","selectedstudent","studentstudyplan","loadingstudyplan","studyplans","text","strings","studyplan","toolbox","right","usedcontexts","mounted","methodname","args","context_id","done","response","timingval","present","past","future","sort","a","b","timinga","TSComponents","studyplanTiming","timingb","t","name","localeCompare","parts","window","location","hash","replace","split","length","idx","id","selectStudyplan","fail","notification","exception","operation","contexts","ix","studyplancount","push","computed","dropdown_title","this","studyplan_select_placeholder","methods","switchContext","ctx","params","URLSearchParams","search","set","toString","closeStudyplan","studentid","studyplan_id","student","showStudentView","error","userid","studyplanid","showOverview","use","RVComponents","ModalComponents","PortalVue","BootstrapVue","Debugger"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"page-view-plan.min.js","sources":["../src/page-view-plan.js"],"sourcesContent":["/*eslint no-var: \"error\" */\n/*eslint no-unused-vars: \"off\" */\n/*eslint linebreak-style: \"off\" */\n/*eslint no-trailing-spaces: \"off\" */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n// You can call it anything you like\n\nimport {call} from 'core/ajax';\nimport notification from 'core/notification';\n\nimport Vue from './vue/vue';\n\nimport Debugger from './util/debugger';\nimport {load_strings} from './util/string-helper';\nimport {ProcessStudyplan} from './studyplan-processor';\nimport {studyplanTiming} from './util/date-helper';\n\nimport RVComponents from './report-viewer-components';\nVue.use(RVComponents);\nimport TSComponents from './treestudyplan-components';\nimport ModalComponents from './modedit-modal';\nVue.use(ModalComponents);\n\nimport PortalVue from './portal-vue/portal-vue.esm';\nVue.use(PortalVue);\nimport BootstrapVue from './bootstrap-vue/bootstrap-vue';\nVue.use(BootstrapVue);\n\n\nlet debug = new Debugger(\"treestudyplanviewer\");\n\nlet strings = load_strings({\n    studyplan: {\n        studyplan_select_placeholder: 'studyplan_select_placeholder',\n    },\n});\n\n/**\n * Initialize the Page\n * @param {int} contextid The context we should attempt to work in (1:1 related to the category)\n * @param {int} categoryid The category we shoud attempt to work in (1:1 related to the context)\n */\nexport function init(contextid,categoryid) {\n    // Make sure the id's are numeric and integer\n    if(undefined === contextid || !Number.isInteger(Number(contextid)) || contextid < 1 ){ contextid = 1;}\n    else { contextid = Number(contextid);} // ensure a numeric value instead of string\n    if(undefined === categoryid || !Number.isInteger(Number(categoryid))){ categoryid = 0;}\n    else { categoryid = Number(categoryid);} // ensure a numeric value instead of string\n\n    const in_systemcontext = (contextid <= 1);\n\n    let app = new Vue({\n        el: '#root',\n        data: {\n            displayedstudyplan: null,\n            activestudyplan: null,\n            associatedstudents: [],\n            selectedstudent: null,\n            studentstudyplan: null,\n            loadingstudyplan: false,\n            studyplans: [],\n            text: strings.studyplan,\n            toolbox: {\n                right: true,\n            },\n            usedcontexts: [],\n        },\n        async mounted() {\n            call([{\n                methodname: 'local_treestudyplan_list_studyplans',\n                args: {context_id: contextid}\n            }])[0].done(function(response){\n                const timingval = { present: 0, past: 1, future: 2};\n                response.sort((a,b) => {\n                    const timinga = studyplanTiming(a);\n                    const timingb = studyplanTiming(b);\n\n                    const t = timingval[timinga] - timingval[timingb];\n                    if(t == 0){\n                        // sort by name if timing is equal\n                        return a.name.localeCompare(b.name);\n                    }\n                    else {\n                        return t;\n                    }\n                });\n                app.studyplans = response;\n                // load studyplan from hash if applicable\n                const hash = window.location.hash.replace('#','');\n                const parts = hash.split(\"-\");\n\n                if(!!parts && parts.length > 0){\n                    for(let idx in app.studyplans){\n                        if(app.studyplans[idx].id == parts[0]){\n                            app.selectStudyplan(app.studyplans[idx],parts[1]);\n                            break;\n                        }\n                    }\n                }\n            }).fail(notification.exception);\n            call([{\n                methodname: 'local_treestudyplan_list_used_categories',\n                args: { operation: 'view'}\n            }])[0].done(function(response){\n                const contexts = [];\n                for(const ix in response){\n                    if(response[ix].studyplancount >0){\n                        contexts.push(response[ix]);\n                    }\n                }\n                app.usedcontexts = contexts;\n            }).fail(notification.exception);\n        },\n        computed: {\n            dropdown_title(){\n                if(this.activestudyplan && this.activestudyplan.name){\n                    return this.activestudyplan.name;\n                }\n                else{\n                    return this.text.studyplan_select_placeholder;\n                }\n            },\n            contextid(){\n                return contextid;\n            }\n        },\n        methods: {\n            switchContext(ctx){\n                const params = new URLSearchParams(location.search);\n                params.set('categoryid', ctx.id);\n                window.location.search = params.toString();\n\n            },\n            closeStudyplan() {\n                app.activestudyplan = null;\n                app.associatedstudents = [];\n                app.studentstudyplan = [];\n                app.displayedstudyplan = null;\n                window.location.hash = '';\n            },\n\n            selectStudyplan(studyplan,studentid){\n                // fetch studyplan\n                app.loadingstudyplan = true;\n                app.activestudyplan = null;\n                app.associatedstudents = [];\n                app.selectedstudent = null;\n                app.studentstudyplan = null;\n                call([{\n                    methodname: 'local_treestudyplan_get_studyplan_map',\n                    args: { id: studyplan.id}\n                }])[0].done(function(response){\n                    app.activestudyplan = ProcessStudyplan(response,true);\n                    app.displayedstudyplan = app.activestudyplan;\n                    app.loadingstudyplan = false;\n                    window.location.hash = app.activestudyplan.id;\n                    call([{\n                        methodname: 'local_treestudyplan_all_associated',\n                        args: { studyplan_id: studyplan.id}\n                    }])[0].done(function(response){\n                        app.associatedstudents = response;\n                        if(studentid){\n                            for(const student of app.associatedstudents){\n                                if(student.id == studentid){\n                                    app.showStudentView(student);\n                                    break;\n                                }\n                            }\n                        }\n                    }).fail(notification.exception);\n\n                }).fail(function(error){\n                    notification.exception(error);\n                    app.loadingstudyplan = false;\n                });\n            },\n            showStudentView(student){\n                app.selectedstudent = student;\n                app.studentstudyplan = null;\n                app.loadingstudyplan = true;\n                call([{\n                    methodname: 'local_treestudyplan_get_user_studyplan',\n                    args: { userid: student.id, studyplanid: app.activestudyplan.id}\n                }])[0].done(function(response){\n                    app.studentstudyplan = ProcessStudyplan(response,false);\n                    app.displayedstudyplan = app.studentstudyplan;\n                    app.loadingstudyplan = false;\n                    window.location.hash = app.activestudyplan.id + \"-\" + student.id;\n                }).fail(function(error){\n                    notification.exception(error);\n                    app.loadingstudyplan = false;\n                });\n\n\n            },\n            showOverview(){\n                app.selectedstudent = null;\n                app.studentstudyplan = null;\n                app.displayedstudyplan = app.activestudyplan;\n                window.location.hash = app.activestudyplan.id;\n            }\n\n        },\n    });\n}\n"],"names":["contextid","categoryid","undefined","Number","isInteger","app","Vue","el","data","displayedstudyplan","activestudyplan","associatedstudents","selectedstudent","studentstudyplan","loadingstudyplan","studyplans","text","strings","studyplan","toolbox","right","usedcontexts","methodname","args","context_id","done","response","timingval","present","past","future","sort","a","b","timinga","timingb","t","name","localeCompare","parts","window","location","hash","replace","split","length","idx","id","selectStudyplan","fail","notification","exception","operation","contexts","ix","studyplancount","push","computed","dropdown_title","this","studyplan_select_placeholder","methods","switchContext","ctx","params","URLSearchParams","search","set","toString","closeStudyplan","studentid","studyplan_id","student","showStudentView","error","userid","studyplanid","showOverview","use","RVComponents","ModalComponents","PortalVue","BootstrapVue","Debugger"],"mappings":"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"}
\ No newline at end of file
diff --git a/amd/build/report-viewer-components.min.js b/amd/build/report-viewer-components.min.js
index 0d4f18a..55b49f8 100644
--- a/amd/build/report-viewer-components.min.js
+++ b/amd/build/report-viewer-components.min.js
@@ -1,3 +1,3 @@
-define("local_treestudyplan/report-viewer-components",["exports","./simpleline/simpleline","core/str","./util/string-helper","./util/date-helper","core/ajax","core/notification","./util/svgarc","./util/debugger","core/config","./studyplan-processor","./treestudyplan-components"],(function(_exports,_simpleline,_str,_stringHelper,_dateHelper,_ajax,_notification,_svgarc,_debugger,_config,_studyplanProcessor,_treestudyplanComponents){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_notification=_interopRequireDefault(_notification),_debugger=_interopRequireDefault(_debugger),_config=_interopRequireDefault(_config),_treestudyplanComponents=_interopRequireDefault(_treestudyplanComponents);const π=Math.PI;var _default={install(Vue){Vue.use(_treestudyplanComponents.default);let debug=new _debugger.default("treestudyplan-viewer"),lastCaller=null;function scrollCurrentIntoView(handle){const elCurrentHeader=document.querySelector(".r-studyplan-scrollable").querySelector(".s-studyline-header-period.current");!elCurrentHeader||handle&&handle==lastCaller||(lastCaller=handle,elCurrentHeader.scrollIntoView({behavior:"smooth",block:"start",inline:"center"}))}let strings=(0,_stringHelper.load_strings)({report:{loading:"loadinghelp@core",studyplan_past:"studyplan_past",studyplan_present:"studyplan_present",studyplan_future:"studyplan_future",back:"back"},invalid:{error:"error"},grading:{ungraded:"ungraded",graded:"graded",allgraded:"allgraded",unsubmitted:"unsubmitted",nogrades:"nogrades",unknown:"unknown"},completion:{completed:"completion_completed",incomplete:"completion_incomplete",completed_pass:"completion_passed",completed_fail:"completion_failed",ungraded:"ungraded",aggregation_all:"aggregation_all",aggregation_any:"aggregation_any",aggregation_one:"aggregation_one",aggregation_overall_all:"aggregation_overall_all",aggregation_overall_any:"aggregation_overall_any",aggregation_overall_one:"aggregation_overall_one",completion_not_configured:"completion_not_configured",configure_completion:"configure_completion",view_completion_report:"view_completion_report",completion_incomplete:"completion_incomplete",completion_failed:"completion_failed",completion_pending:"completion_pending",completion_progress:"completion_progress",completion_completed:"completion_completed",completion_good:"completion_good",completion_excellent:"completion_excellent",view_feedback:"view_feedback",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",required_goal:"required_goal",student_not_tracked:"student_not_tracked",completion_not_enabled:"completion_not_enabled"},badge:{share_badge:"share_badge",dateissued:"dateissued",dateexpire:"dateexpire",badgeinfo:"badgeinfo",badgeissuedstats:"badgeissuedstats",completion_incomplete:"completion_incomplete_badge",completion_completed:"completion_completed_badge",completioninfo:"completioninfo",badgedisabled:"badgedisabled"},course:{completion_incomplete:"completion_incomplete",completion_failed:"completion_failed",completion_pending:"completion_pending",completion_progress:"completion_progress",completion_completed:"completion_completed",completion_good:"completion_good",completion_excellent:"completion_excellent",view_feedback:"view_feedback",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",required_goal:"required_goal",student_not_tracked:"student_not_tracked",not_enrolled:"not_enrolled"},teachercourse:{select_conditions:"select_conditions",select_grades:"select_grades",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",grade_include:"grade_include",grade_require:"grade_require",required_goal:"required_goal",student_from_plan_enrolled:"student_from_plan_enrolled",students_from_plan_enrolled:"students_from_plan_enrolled"},pageinfo:{edit:"period_edit",fullname:"studyplan_name",shortname:"studyplan_shortname",startdate:"studyplan_startdate",enddate:"studyplan_enddate",description:"studyplan_description",duration:"studyplan_duration",details:"studyplan_details"}});function isVisible(elem){return!!(elem.offsetWidth||elem.offsetHeight||elem.getClientRects().length)}const ItemEventBus=new Vue;Vue.component("r-progress-circle",{props:{value:{type:Number},max:{type:Number,default:100},min:{type:Number,default:0},stroke:{type:Number,default:.2},bgopacity:{type:Number,default:.2},title:{type:String,default:""},icon:{type:String}},data:()=>({selectedstudyplan:null}),computed:{range(){return this.max-this.min},fraction(){return this.max-this.min==0?0:(this.value-this.min)/(this.max-this.min)},radius(){return 50-50*this.stroke},arcpath(){let fraction=0;const r=50-50*this.stroke;this.max-this.min!=0&&(fraction=(this.value-this.min)/(this.max-this.min));const Δ=2*fraction*π;return(0,_svgarc.svgarcpath)([50,50],[r,r],[0,Δ],1.5*π)}},methods:{},template:'\n            <div style="display: inline-block; width: 1em; height: 1em; position:relative; padding: 0;">\n                <svg width="1em" height="1em" viewBox="0 0 100 100"\n                     style="position: absolute;top: 0;left: 0;">\n                    <title>{{title}}</title>\n                    <circle v-if="fraction >= 1.0" cx="50" cy="50" :r="radius"\n                        :style="\'opacity: 1; stroke-width: \'+ (stroke*100)+\'; stroke: currentcolor; fill: none;\'"/>\n                    <g v-else>\n                        <circle cx="50" cy="50" :r="radius"\n                            :style="\'opacity: \' + bgopacity + \';stroke-width: \'+ (stroke*100)+\'; stroke: currentcolor; fill: none;\'"/>\n                        <path :d="arcpath"\n                            :style="\'stroke-width: \' + (stroke*100) +\'; stroke: currentcolor; fill: none;\'"/>\n                    </g>\n                </svg>\n                <i v-if=\'icon\' :class="\'fa fa-\'+icon"\n                    style=" position: absolute; top: 0.42em; left: 0.43em; text-align:center; display: inline-block;\n                            width:1em; font-size: 0.55em; "\n                ></i>\n            </div>\n            '}),Vue.component("r-report",{props:{invitekey:{type:String,default:()=>null},userid:{type:Number,default:()=>0},type:{type:String,default:()=>"own"}},data:()=>({text:strings.report,studyplans:{past:[],present:[],future:[]},selectedstudyplan:null,loadingstudyplan:!1,loading:!0}),computed:{teachermode(){return"teaching"==this.type},guestmode(){return"invited"==this.type},verified_type(){return["invited","other","teaching","own"].includes(this.type)?this.type:"own"},studyplancount(){return this.studyplans.past.length+this.studyplans.present.length+this.studyplans.future.length}},updated(){},mounted(){this.loadStudyplans()},methods:{call_args(o){const args={};return"object"!=typeof o||Array.isArray(o)||null===o||(0,_studyplanProcessor.objCopy)(args,o),"invited"==this.verified_type?args.invitekey=this.invitekey:"other"==this.verified_type&&(args.userid=this.userid),args},loadStudyplans(){const self=this;this.loading=!0,(0,_ajax.call)([{methodname:`local_treestudyplan_list_${this.verified_type}_studyplans`,args:this.call_args()}])[0].done((function(response){debug.info("Studyplans:",response);const plans={future:[],present:[],past:[]};for(const ix in response){const plan=response[ix];plans[_treestudyplanComponents.default.studyplanTiming(plan)].push(plan)}for(const ix in plans)debug.info(ix,plans[ix]),plans[ix].sort(((a,b)=>{const t=new Date(b.startdate).getTime()-new Date(a.startdate).getTime();return 0==t&&(t=a.name.localeCompare(b.name)),t}));self.studyplans=plans,self.loading=!1,1==self.studyplans.present.length?self.selectStudyplan(self.studyplans.present[0]):1==this.studyplancount&&(self.studyplans.future.lengh>0?self.selectStudyplan(self.studyplans.future[0]):self.selectStudyplan(self.studyplans.past[0]))})).fail(_notification.default.exception)},selectStudyplan(plan){const self=this;this.loadingstudyplan=!0,(0,_ajax.call)([{methodname:`local_treestudyplan_get_${this.verified_type}_studyplan`,args:this.call_args({studyplanid:plan.id})}])[0].done((function(response){debug.info("Detailed studyplan:",response),self.selectedstudyplan=(0,_studyplanProcessor.ProcessStudyplan)(response),self.loadingstudyplan=!1})).fail(_notification.default.exception)},deselectStudyplan(){this.selectedstudyplan=null,this.loadStudyplans()}},template:"\n            <div class='t-studyplan-container r-report-tabs'>\n                <div v-if='loading' class=\"vue-loader spinner-border text-primary\" role=\"status\"></div>\n                <template v-else>\n                    <div v-if='!loadingstudyplan && selectedstudyplan'>\n                        <div class=\"mb-2\">\n                            <a href='#' @click='deselectStudyplan'><h5 class=\"d-inline\"><i class=\"fa fa-chevron-left\"></i> {{ text.back }}</h5></a>\n                            <h4 class=\"d-inline ml-3\">{{ selectedstudyplan.name}}\n                            <s-studyplan-details \n                                class=\"mb-2\"\n                                size=\"sm\"\n                                v-model=\"selectedstudyplan\" \n                                v-if=\"selectedstudyplan.description\"\n                            ><i class='fa fa-info-circle'></i></s-studyplan-details></h4>\n                        </div>\n                        <r-studyplan\n                            v-model='selectedstudyplan'\n                            :guestmode='guestmode'\n                            :teachermode='teachermode'\n                        ></r-studyplan>\n                    </div>\n                    <div v-else-if='loadingstudyplan' class=\"vue-loader spinner-border text-primary\" role=\"status\">\n                        <span class=\"sr-only\">{{ text.loading }}</span>\n                    </div>\n                    <div v-else class='t-studyplan-notselected'>\n                        <template v-for=\"timing in ['present', 'past', 'future']\">\n                            <template v-if=\"studyplans[timing].length > 0\">\n                                <h4>{{ text[\"studyplan_\"+timing]}}:</h4>\n                                <b-card-group deck>\n                                    <s-studyplan-card\n                                        v-for='(studyplan, planindex) in studyplans[timing]'\n                                        :key='studyplan.id'\n                                        v-model='studyplans[timing][planindex]'\n                                        open\n                                        @open='selectStudyplan(studyplan)'\n                                        ></s-studyplan-card>\n                                </b-card-group>\n                            </template>\n                        </template>\n                    </div>\n                </template>\n            </div>\n            "}),Vue.component("r-studyplan",{props:{value:{type:Object},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({selectedpageindex:0,text:strings.pageinfo}),computed:{selectedpage(){return this.value.pages[this.selectedpageindex]}},methods:{pageduration:page=>(0,_dateHelper.format_date)(page.startdate,!1)+" - "+(0,_dateHelper.format_date)(page.enddate,!1),columns:page=>1+2*page.periods,columns_stylerule(page){let s="grid-template-columns: var(--studyplan-filter-width)";for(let i=0;i<page.periods;i++)s+=" var(--studyplan-course-width) var(--studyplan-filter-width)";return s+";"},countLineLayers(line,page){let maxLayer=-1;for(let i=0;i<=page.periods;i++){line.slots[i];for(const ix in line.slots[i].courses){const item=line.slots[i].courses[ix];item.layer>maxLayer&&(maxLayer=item.layer)}for(const ix in line.slots[i].filters){const item=line.slots[i].filters[ix];item.layer>maxLayer&&(maxLayer=item.layer)}}return maxLayer>=0?maxLayer+1:1},showslot(page,line,index,layeridx,type){const forGradable="gradable"==type,periods=page.periods;let show=!0;for(let i=0;i<periods;i++)if(line.slots[index-i]&&line.slots[index-i].courses){const list=line.slots[index-i].courses;for(const ix in list){const item=list[ix];item.layer==layeridx&&(forGradable?i>0&&item.span-i>0&&(show=!1):item.span-i>1&&(show=!1))}}return show},selectedpageChanged(newTabIndex,prevTabIndex){ItemEventBus.$emit("redrawLines",null),scrollCurrentIntoView(this.value.id)}},mounted(){scrollCurrentIntoView(this.value.id),this.$root.$emit("redrawLines")},updated(){scrollCurrentIntoView(this.value.id),ItemEventBus.$emit("lineHeightChange",null),this.$root.$emit("redrawLines"),ItemEventBus.$emit("redrawLines")},template:'\n            <div>\n            <b-card no-body>\n                <b-tabs \n                    v-model=\'selectedpageindex\' \n                    @activate-tab=\'selectedpageChanged\'\n                    content-class="mt-1">\n                    <b-tab\n                        \n                        v-for="(page,pageindex) in value.pages"\n                        :key="page.id"\n                        :title-item-class="\'s-studyplanpage-tab \'+ page.timing"\n                        ><template #title>\n                            <span v-b-tooltip.hover :title=\'page.fullname\'>{{page.shortname}}</span>\n                            <a href="#" v-b-modal="\'studyplanpage-info-\'+page.id" class=\'text-info\'\n                             v-if=\'pageindex == selectedpageindex\'\n                            ><i class=\'fa fa-info-circle\'></i></a>\n                        </template>\n                        \n                        <b-modal\n                            :id="\'studyplanpage-info-\'+page.id"\n                            scrollable\n                            ok-only\n                            >\n                            <template #modal-title>\n                                {{page.fullname}}\n                            </template>\n                            <b-container>\n                                <b-row>\n                                    <b-col cols="4"><b>{{ text.shortname}}</b></b-col>\n                                    <b-col cols="8">\n                                        {{ page.shortname }}\n                                    </b-col>\n                                </b-row>\n                                <b-row>\n                                    <b-col cols="4"><b>{{ text.duration}}</b></b-col>\n                                    <b-col cols="8">\n                                        {{ pageduration(page) }}\n                                    </b-col>\n                                </b-row>\n                                <b-row v-if="page.description">\n                                    <b-col cols="12"><b>{{ text.description}}</b></b-col>\n                                </b-row>\n                                <b-row v-if="page.description">\n                                    <b-col cols="12">\n                                        <span v-html="page.description"></span>\n                                    </b-col>\n                                </b-row>\n                            </b-container>\n                        </b-modal>\n                        <div v-if="page.studylines.length > 0" class=\'r-studyplan-content\'>\n                            \x3c!-- First paint the headings--\x3e\n                            <div class=\'r-studyplan-headings\'\n                                ><s-studyline-header-heading :identifier="Number(page.id)"></s-studyline-header-heading>\n                                <r-studyline-heading  v-for="(line,lineindex) in page.studylines"\n                                    :key="line.id"\n                                    v-model="page.studylines[lineindex]"\n                                    :layers=\'countLineLayers(page,line)+1\'\n                                    :class=" \'t-studyline\' + ((lineindex%2==0)?\' odd \' :\' even \' )\n                                            + ((lineindex==0)?\' first \':\' \')\n                                            + ((lineindex==page.studylines.length-1)?\' last \':\' \')"\n                                ></r-studyline-heading\n                            ></div>\n                            \x3c!-- Next, paint all the cells in the scrollable --\x3e\n                            <div class="r-studyplan-scrollable" >\n                                <div class="r-studyplan-timeline" :style="columns_stylerule(page)">\n                                \x3c!-- add period information --\x3e\n                                <template v-for="(n,index) in (page.periods+1)">\n                                    <s-studyline-header-period\n                                        v-if="index > 0"\n                                        v-model="page.perioddesc[index-1]"\n                                        :identifier="Number(page.id)"\n                                        ></s-studyline-header-period>\n                                    <div class="s-studyline-header-filter"></div>\n                                </template>\n\n                                \x3c!-- Line by line add the items --\x3e\n                                \x3c!-- The grid layout handles putting it in rows and columns --\x3e\n                                <template v-for="(line,lineindex) in page.studylines"\n                                    ><template v-for="(layernr,layeridx) in countLineLayers(page,line)"\n                                        ><template v-for="(n,index) in (page.periods+1)"\n                                            ><r-studyline-slot\n                                                v-if="index > 0 && showslot(page,line, index, layeridx, \'gradable\')"\n                                                type=\'gradable\'\n                                                v-model="line.slots[index].courses"\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                                                :guestmode=\'guestmode\'\n                                                :teachermode=\'teachermode\'\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                                            ></r-studyline-slot\n                                            ><r-studyline-slot\n                                                v-if="showslot(page,line, index, layeridx, \'gradable\')"\n                                                type=\'filter\'\n                                                v-model="line.slots[index].filters"\n                                                :teachermode=\'teachermode\'\n                                                :key="\'f-\'+lineindex+\'-\'+index+\'-\'+layernr"\n                                                :slotindex="index"\n                                                :line="line"\n                                                :plan="value"\n                                                :page="page"\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                                                        + ((index==page.periods)?\' rightmost\':\'\')"\n                                                >\n                                            </r-studyline-slot\n                                        ></template\n                                    ></template\n                                ></template\n                                ></div\n                            ></div\n                        ></div>\n                    </b-tab>\n                </b-tabs>\n            </b-card>\n            </div>\n            '}),Vue.component("r-studyline-heading",{props:{value:{type:Object,default:function(){return{}}},layers:{type:Number,default:1}},data:()=>({layerHeights:{}}),created(){ItemEventBus.$on("lineHeightChange",this.onLineHeightChange)},computed:{},methods:{onLineHeightChange(lineid){if(this.$refs.mainEl&&(lineid==this.value.id||null===lineid)){const items=document.querySelectorAll(`.r-studyline-slot-0[data-studyline='${this.value.id}']`);let heightSum=0;items.forEach((el=>{const height=el.getBoundingClientRect().height;heightSum+=height}));const heightStyle=`${heightSum}px`;this.$refs.mainEl.style.height=heightStyle}}},template:'\n            <div class="r-studyline r-studyline-heading "\n                :data-studyline="value.id" ref="mainEl"\n                ><div class="r-studyline-handle" :style="\'background-color: \' + value.color"></div>\n                <div class="r-studyline-title">\n                    <abbr v-b-tooltip.hover :title="value.name">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            '}),Vue.component("r-studyline-slot",{props:{value:{type:Array,default:()=>[]},type:{type:String,default:"gradable"},slotindex:{type:Number,default:0},line:{type:Object,default:()=>null},layer:{type:Number},plan:{type:Object,default:()=>null},page:{type:Object,default:()=>null},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1},period:{type:Object,default:()=>null}},mounted(){const self=this;"gradable"==self.type&&1==self.slotindex&&(self.resizeListener=new ResizeObserver((()=>{if(self.$refs.sizeElement){const height=self.$refs.sizeElement.getBoundingClientRect().height;ItemEventBus.$emit("lineHeightChange",self.line.id,self.layer,height)}})).observe(self.$refs.sizeElement))},computed:{item(){for(const ix in this.value){const itm=this.value[ix];if(itm.layer==this.layer)return itm}return null},current(){if(this.period&&this.period.startdate&&this.period.enddate){const now=new Date,pstart=new Date(this.period.startdate),pend=new Date(this.period.enddate);return now>=pstart&&now<pend}return!1},spanCss(){if(this.item&&this.item.span>1){return`width: 100%; grid-column: span ${2*this.item.span-1};`}return""}},data:()=>({}),methods:{},template:"\n            <div :class=\"  'r-studyline-slot ' + type + ' ' + (current?'current ':' ')\n                         + 'r-studyline-slot-' + slotindex + ' '\n                         + ((slotindex==0)?'r-studyline-firstcolumn ':' ')\"\n                :data-studyline=\"line.id\" ref=\"sizeElement\"\n                :style='spanCss'\n                ><div class=\"r-slot-item\" v-if=\"item\"\n                    ><r-item\n                        v-model=\"item\"\n                        :plan=\"plan\"\n                        :guestmode='guestmode'\n                        :teachermode='teachermode'></r-item\n                    ></div\n                ></r-item\n            ></div>\n            "}),Vue.component("r-item",{props:{value:{type:Object,default:function(){return null}},plan:{type:Object,default:()=>null},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({lines:[]}),methods:{lineColor(){if(this.teachermode)return"var(--gray)";switch(this.value.completion){default:return"var(--gray)";case"failed":return"var(--danger)";case"progress":return"var(--warning)";case"completed":return"var(--success)";case"good":return"var(--info)";case"excellent":return"var(--blue)"}},redrawLine(conn){let lineColor=this.lineColor(),start=document.getElementById("studyitem-"+conn.from_id),end=document.getElementById("studyitem-"+conn.to_id);this.lines[conn.to_id]&&(this.lines[conn.to_id].remove(),delete this.lines[conn.to_id]),null!==start&&null!==end&&isVisible(start)&&isVisible(end)&&(this.lines[conn.to_id]=new _simpleline.SimpleLine(start,end,{color:lineColor,gravity:{start:1.3,end:1.3}}))},redrawLines(){for(let ix in this.lines){let lineinfo=this.lines[ix];lineinfo&&lineinfo.line&&(lineinfo.line.remove(),lineinfo.line=void 0)}for(let i in this.value.connections.out){let conn=this.value.connections.out[i];this.redrawLine(conn)}},onWindowResize(){this.redrawLines()},onRedrawLines(){this.redrawLines()},removeLine(conn){this.lines[conn.to_id]&&(this.lines[conn.to_id].remove(),delete this.lines[conn.to_id])}},computed:{hasConnectionsOut(){return!["finish"].includes(this.value.type)},hasConnectionsIn(){return!["start"].includes(this.value.type)},hasContext(){return["start","junction","finish"].includes(this.value.type)}},created(){ItemEventBus.$on("redrawLines",this.onRedrawLines)},mounted(){this.redrawLines(),setTimeout((()=>{this.redrawLines()}),50),window.addEventListener("resize",this.onWindowResize)},beforeDestroy(){for(let i in this.value.connections.out){let conn=this.value.connections.out[i];this.removeLine(conn)}window.removeEventListener("resize",this.onWindowResize),ItemEventBus.$off("redrawLines",this.onRedrawLines)},beforeUpdate(){},updated(){this.dummy||this.redrawLines()},template:'\n            <div class="r-item-base" :id="\'studyitem-\'+value.id" :data-x=\'value.type\'>\n                <r-item-competency    v-if="value.type == \'competency\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-competency>\n                <r-item-course        v-if="value.type == \'course\' && !teachermode" :plan="plan"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-course>\n                <r-item-teachercourse v-if="value.type == \'course\' && teachermode" :plan="plan"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-teachercourse>\n                <r-item-junction      v-if="value.type == \'junction\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-junction>\n                <r-item-start         v-if="value.type == \'start\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-start>\n                <r-item-finish        v-if="value.type == \'finish\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-finish>\n                <r-item-badge         v-if="value.type == \'badge\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-badge>\n                <r-item-invalid       v-if="value.type == \'invalid\' && teachermode"\n                    v-model="value" ></r-item-invalid>\n            </div>\n            '}),Vue.component("r-item-invalid",{props:{value:{type:Object,default:function(){return null}}},data:()=>({text:strings.invalid}),methods:{},template:'\n            <div class="r-item-invalid">\n            <b-card no-body class="r-item-invalid">\n                <b-row no-gutters>\n                    <b-col md="1">\n                        <span class="r-timing-indicator timing-invalid"></span>\n                    </b-col>\n                    <b-col md="11">\n                        <b-card-body class="align-items-center">\n                            <i class="fa fa-exclamation"></i> {{ text.error }}\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            '}),Vue.component("r-item-course",{props:{value:{type:Object,default:()=>null},guestmode:{type:Boolean,default:()=>!1},teachermode:{type:Boolean,default:()=>!1},plan:{type:Object,default:()=>null}},data:()=>({text:strings.course}),computed:{startdate(){return(0,_dateHelper.format_date)(this.value.course.startdate)},enddate(){return this.value.course.enddate?(0,_dateHelper.format_date)(this.value.course.enddate):this.text.noenddate}},created(){},methods:{completion_icon(completion){switch(completion){default:return"circle-o";case"pending":return"question-circle";case"failed":return"times-circle";case"progress":return"exclamation-circle";case"completed":case"good":case"excellent":return"check-circle"}},circle_icon(completion){switch(completion){default:return null;case"failed":return"times";case"progress":return"exclamation";case"completed":case"good":case"excellent":return"check"}}},template:"\n            <div :class=\"'r-item-competency completion-'+value.completion\">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'r-timing-indicator timing-'+value.course.timing\"></span>\n                    </b-col>\n                    <b-col md=\"11\" class=\"align-items-center\">\n                        <b-card-body >\n                            <template v-if='!value.course.enrolled'>\n                                <i v-b-popover.top\n                                    class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                    :title=\"text.student_not_tracked\"></i>\n                            </template>\n                            <template v-else-if='value.course.completion'>\n                                <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                    :value='value.course.completion.progress'\n                                    :max='value.course.completion.count'\n                                    :min='0'\n                                    :class=\"'r-course-result r-completion-'+value.completion\"\n                                    :icon='circle_icon(value.completion)'\n                                    :title=\"text['completion_'+value.completion]\"\n                                ></r-progress-circle>\n                                <i v-else v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <template v-else>\n                                <i v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <a  v-b-modal=\"'r-item-course-details-'+value.id\"\n                                :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):'#'\"\n                                @click.prevent.stop=''\n                                >{{ value.course.displayname }}</i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n\n                <b-modal\n                    :id=\"'r-item-course-details-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):undefined\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(\" / \")}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div class=\"r-completion-detail-header\">\n                                <template v-if='!value.course.enrolled'>\n                                    {{text.not_enrolled}}\n                                    <i v-b-popover.top\n                                        class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                        :title=\"text.student_not_tracked\"></i>\n                                </template>\n                                <template v-else-if='value.course.completion'>\n                                    {{text['completion_'+value.completion]}}\n                                    <r-progress-circle v-if='[\"failed\",\"progress\",\"incomplete\"].includes(value.completion)'\n                                        :value='value.course.completion.progress'\n                                        :max='value.course.completion.count'\n                                        :min='0'\n                                        :title=\"text['completion_'+value.completion]\"\n                                        :class=\"'r-progress-circle-popup r-completion-'+value.completion\"\n                                        :icon='circle_icon(value.completion)'\n                                    ></r-progress-circle\n                                    ><i v-else v-b-popover.top\n                                    :class=\"'fa fa-'+completion_icon(value.completion)+\n                                            ' r-progress-icon-popup r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                                <template v-else>\n                                    {{text['completion_'+value.completion]}}\n                                    <i  :class=\"'fa fa-'+completion_icon(value.completion)+' r-completion-'+value.completion\"\n                                        :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                            </div>\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-studentgrades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value'\n                        :guestmode='guestmode'></r-item-studentgrades>\n                    <r-item-studentcompletion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        :guestmode='guestmode'></r-item-studentcompletion>\n                </b-modal>\n            </b-card></div>\n            "}),Vue.component("r-item-studentgrades",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1}},data:()=>({text:strings.course}),computed:{pendingsubmission(){let result=!1;for(const ix in this.value.course.grades){if(this.value.course.grades[ix].pendingsubmission){result=!0;break}}return result},useRequiredGrades(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useRequiredGrades)&&this.plan.aggregation_info.useRequiredGrades}},methods:{completion_icon(completion){switch(completion){default:return"circle-o";case"pending":return"question-circle";case"failed":return"times-circle";case"progress":return"exclamation-circle";case"completed":case"good":case"excellent":return"check-circle"}}},template:'\n            <table class="r-item-course-grade-details">\n                <tr v-for="g in value.course.grades">\n                    <td><span class="r-activity-icon" :title="g.typename" v-html="g.icon"></span\n                        ><a\n                        :href="(!guestmode)?(g.link):undefined" target="_blank"><span v-html="g.name"></span></a>\n                        <abbr v-if="useRequiredGrades && g.required" :title="text.required_goal"\n                            :class="\'s-required \' + g.completion"\n                            ><i class=\'fa fa-asterisk\' ></i\n                        ></abbr>\n                    </td>\n                    <td><span :class="\' r-completion-\'+g.completion">{{g.grade}}</span></td>\n                    <td><i :class="\'fa fa-\'+completion_icon(g.completion)+\' r-completion-\'+g.completion"\n                        :title="text[\'completion_\'+g.completion]"></i>\n                        <i v-if=\'g.pendingsubmission\' :title="text[\'completion_pending\']"\n                            class="r-pendingsubmission fa fa-clock-o"></i></td>\n                    <td v-if="g.feedback">\n                        <a  v-b-modal="\'r-grade-feedback-\'+g.id"\n                            href="#"\n                        >{{ text["view_feedback"]}}</a>\n                        <b-modal\n                            :id="\'r-grade-feedback-\'+g.id"\n                            size="sm"\n                            ok-only\n                            centered\n                            scrollable\n                        >\n                            <template #modal-header>\n                                <h2><i class="fa fa-graduation-cap"></i>{{ value.course.fullname }}</h2><br>\n                                <span class="r-activity-icon" :title="g.typename" v-html="g.icon"></span>{{g.name}}\n                            </template>\n                            <span v-html="g.feedback"></span>\n                        </b-modal>\n                    </td>\n                </tr>\n            </table>\n            '}),Vue.component("r-item-studentcompletion",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},course:{type:Object,default:function(){return{}}}},data:()=>({text:strings.completion}),created(){},computed:{},methods:{completion_icon(completion){switch(completion){case"progress":return"exclamation-circle";case"complete":case"complete-pass":return"check-circle";case"complete-fail":return"times-circle";default:return"circle-o"}},completion_tag:cgroup=>cgroup.completion?"completed":"incomplete",hasCompletions(){if(this.value.conditions)for(const cgroup of this.value.conditions)if(cgroup.items&&cgroup.items.length>0)return!0;return!1},requirementHTML(requirements){const rqs=requirements.split(/, */);let html="";for(const ix in rqs){html+=`${rqs[ix]}<br>`}return html},addTargetBlank(html){const m=/^([^<]*\< *a +)(.*)/.exec(html);return m?`${m[1]} target="_blank" ${m[2]}`:html}},template:'\n            <table class="r-item-course-grade-details">\n                <tr v-if="hasCompletions">\n                    <td colspan=\'2\'\n                        ><span v-if="value.conditions.length <= 1">{{ text.aggregation_overall_one }}</span\n                        ><span v-else if="value.aggregation == \'all\'">{{ text.aggregation_overall_all}}</span\n                        ><span v-else>{{ text.aggregation_overall_any }}</span\n                    ></td>\n                </tr>\n                <tr v-else>\n                    <td colspan=\'2\'>{{text.completion_not_configured}}!\n                    </td>\n                </tr>\n                <template v-for=\'cgroup in value.conditions\' v-if=\'value.enabled && value.tracked\'>\n                    <tr>\n                        <th colspan=\'2\'><span v-if="cgroup.items.length > 1"\n                        ><span v-if="cgroup.aggregation == \'all\'">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span\n                        ><span v-else>{{ text.aggregation_one }}</span>\n                        {{ cgroup.title.toLowerCase() }}:\n                        </th>\n                        <th><r-progress-circle v-if="cgroup.progress < cgroup.count"\n                                :value=\'cgroup.progress\'\n                                :max=\'cgroup.count\'\n                                :class="\'r-completion-\'+cgroup.status"\n                                :title="text[\'completion_\'+cgroup.status]"\n                            ></r-progress-circle>\n                            <i v-else :class="\'fa fa-check-circle r-completion-\'+cgroup.status"></i>\n                            </th>\n                    </tr>\n                    <tr v-for=\'ci in cgroup.items\'>\n                        <td><span v-if=\'guestmode\'>{{ci.title}}</span>\n                            <span v-else v-html=\'addTargetBlank(ci.details.criteria)\'></span>\n                            <a href="#" v-b-tooltip.click.hover.right.html="{ customClass: \'r-tooltip \' + ci.status}"\n                                :title="requirementHTML(ci.details.requirement)"\n                                class="text-primary"><i  v-if="ci.details.requirement"\n                                class=\'fa fa-question-circle\'\n                                ></i></a>\n                        <td\n                            ><span :class="\' r-completion-\'+ci.status">{{ci.grade}}</span>\n                            <span v-if="ci.warning"\n                                ><i class="text-primary fa fa-exclamation-triangle"\n                                    v-b-tooltip.hover.right.click="{ customClass: \'r-tooltip info\' }"\n                                    :title="ci.warning"\n                                ></i\n                            ></span\n                        ></td>\n                        <td><i :class="\'fa fa-\'+completion_icon(ci.status)+\' r-completion-\'+ci.status"\n                            :title="text[\'completion_\'+ci.status]"></i>\n                            <i v-if=\'ci.pending\' :title="text[\'completion_pending\']"\n                                class="r-pendingsubmission fa fa-clock-o"></i>\n                        </td>\n                        <td v-if="ci.feedback">\n                            <a  v-b-modal="\'r-grade-feedback-\'+ci.id"\n                                href="#"\n                            >{{ text["view_feedback"]}}</a>\n                            <b-modal\n                                :id="\'r-grade-feedback-\'+ci.id"\n                                size="sm"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class="fa fa-graduation-cap"></i>{{ course.fullname }}</h2><br>\n                                    <span class="r-activity-icon" :title="ci.typename" v-html="ci.icon"></span>{{ci.name}}\n                                </template>\n                                <span v-html="ci.feedback"></span>\n                            </b-modal>\n                        </td>\n                    </tr>\n                </template>\n                <template v-else>\n                    <tr v-if=\'! value.enabled\'>\n                        <td colspan=\'4\'>{{text.completion_not_enabled}}</td>\n                    </tr>\n                    <tr v-else>\n                        <td colspan=\'4\'>{{text.student_not_tracked}}</td>\n                    </tr>\n                </template>\n            </table>\n            '}),Vue.component("r-item-teachercourse",{props:{value:{type:Object,default:()=>null},guestmode:{type:Boolean,default:()=>!1},teachermode:{type:Boolean,default:()=>!1},plan:{type:Object,default:()=>null}},data:()=>({text:strings.teachercourse,txt:{grading:strings.grading}}),computed:{course_grading_needed(){return this.course_grading_state()},course_grading_icon(){return this.determine_grading_icon(this.course_grading_state())},filtered_grades(){return this.value.course.grades.filter((g=>g.selected))},useRequiredGrades(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useRequiredGrades)&&this.plan.aggregation_info.useRequiredGrades},isCompletable(){let completable=!1;return this.value.course.completion?this.value.course.completion.conditions.length>0&&(completable=!0):this.value.course.grades&&this.value.course.grades.length>0&&(completable=!0),completable},progress_circle(){const status={students:0,completed:0,completed_pass:0,completed_fail:0,ungraded:0};if(this.value.course.completion)for(const cond of this.value.course.completion.conditions)for(const itm of cond.items)itm.progress&&(status.students+=itm.progress.students,status.completed+=itm.progress.completed,status.completed_pass+=itm.progress.completed_pass,status.completed_fail+=itm.progress.completed_fail,status.ungraded+=itm.progress.ungraded);else if(this.value.course.grades)for(const g of this.value.course.grades)g.grading&&(status.students+=g.grading.students,status.completed+=g.grading.completed,status.completed_pass+=g.grading.completed_pass,status.completed_fail+=g.grading.completed_fail,status.ungraded+=g.grading.ungraded);return status},startdate(){return(0,_dateHelper.format_date)(this.value.course.startdate)},enddate(){return this.value.course.enddate?(0,_dateHelper.format_date)(this.value.course.enddate):this.text.noenddate}},created(){},methods:{course_grading_state(){let ungraded=0,unknown=0,graded=0,allgraded=0;const grades=this.filtered_grades;if(!Array.isArray(grades)||0==grades)return"nogrades";for(const ix in grades){const grade=grades[ix];grade.grading?Number(grade.grading.ungraded)>0?ungraded++:Number(grade.grading.graded)>0&&(Number(grade.grading.graded)==Number(grade.grading.students)?allgraded++:graded++):unknown=!0}return ungraded>0?"ungraded":unknown?"unknown":graded?"graded":allgraded?"allgraded":"unsubmitted"},determine_grading_icon(gradingstate){switch(gradingstate){default:return"circle-o";case"ungraded":return"exclamation-circle";case"unknown":return"question-circle-o";case"graded":case"allgraded":return"check";case"unsubmitted":return"dot-circle-o"}}},template:'\n            <div  :class="\'r-item-competency \'+ (value.course.amteacher?\'r-course-am-teacher\':\'\')">\n            <b-card no-body>\n                <div class=\'d-flex flex-wrap mr-0 ml-0\'>\n                    <div>\n                        <span\n                            :title="text[\'coursetiming_\'+value.course.timing]"\n                            v-b-popover.hover.top="startdate+\' - \'+enddate"\n                            :class="\'r-timing-indicator timing-\'+value.course.timing"></span>\n                    </div>\n                    <div class="flex-fill align-items-center">\n                        <b-card-body>\n                            <a  v-b-modal="\'r-item-course-details-\'+value.id"\n                                :href="(!guestmode)?(\'/course/view.php?id=\'+value.course.id):\'#\'"\n                                @click.prevent.stop=\'\'\n                                >{{ value.course.displayname }}</i></a>\n                            <r-completion-circle class="r-course-graded" :disabled="!isCompletable"\n                                v-model="progress_circle"></r-completion-circle>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal\n                    v-if="true"\n                    :id="\'r-item-course-details-\'+value.id"\n                    :title="value.course.displayname + \' - \' + value.course.fullname"\n                    size="lg"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href="(!guestmode)?(\'/course/view.php?id=\'+value.course.id):undefined" target="_blank"\n                                ><i class="fa fa-graduation-cap"></i> {{ value.course.fullname }}</a>\n                                <r-item-teacher-gradepicker v-model="value"\n                                    v-if="value.course.grades && value.course.grades.length > 0"\n                                    :useRequiredGrades="useRequiredGrades"\n                                    :plan="plan"\n                                ></r-item-teacher-gradepicker>\n                                <a v-if=\'!!value.course.completion && value.course.amteacher\'\n                                    :href="\'/course/completion.php?id=\'+value.course.id"  target="_blank"\n                                    :title="text.configure_completion"><i class="fa fa-gear"></i></a>\n                            </h1>\n                            {{ value.course.context.path.join(" / ") }}\n                            <div class=\'mt-1 text-info\'>\n                            <span v-if=\'value.course.numenrolled != 1\'>{{ value.course.numenrolled }} {{ text.students_from_plan_enrolled }}</span>\n                              <span v-else> 1 {{ text.student_from_plan_enrolled }} </span>\n                            </div>\n                        </div>\n                        <div class="r-course-detail-header-right">\n                            <div class="r-completion-detail-header">\n                                <r-completion-circle class="r-progress-circle-popup" :disabled="!isCompletable"\n                                    v-model="progress_circle"></r-completion-circle>\n                            </div>\n                            <div :class="\'r-timing-\'+value.course.timing">\n                                {{ text[\'coursetiming_\'+value.course.timing] }}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-teachergrades\n                        v-if=\'!!value.course.grades && value.course.grades.length > 0\'\n                        v-model=\'value.course\'\n                        :useRequiredGrades="useRequiredGrades"\n                        ></r-item-teachergrades>\n                    <r-item-teachercompletion\n                        v-if=\'!!value.course.completion\'\n                        v-model=\'value.course.completion\'\n                        :course=\'value.course\'\n                        ></r-item-teachercompletion>\n                </b-modal>\n\n            </b-card>\n            </div>\n            '}),Vue.component("r-item-teacher-gradepicker",{props:{value:{type:Object,default:function(){return{}}},useRequiredGrades:{type:Boolean,default:()=>null}},data:()=>({text:strings.teachercourse}),computed:{},methods:{includeChanged(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:newValue,required:g.required}}])[0].fail(_notification.default.exception)},requiredChanged(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:g.selected,required:newValue}}])[0].fail(_notification.default.exception)}},template:'\n            <a  v-if="value.course.canselectgradables" href=\'#\'\n                                        v-b-modal="\'r-item-course-config-\'+value.id"\n                                        @click.prevent.stop=\'\'\n                                        ><i class=\'fa fa-cog\'></i>\n                <b-modal v-if=\'value.course.canselectgradables\'\n                    :id="\'r-item-course-config-\'+value.id"\n                    :title="value.course.displayname + \' - \' + value.course.fullname"\n                    ok-only\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href="\'/course/view.php?id=\'+value.course.id" target="_blank"\n                                ><i class="fa fa-graduation-cap"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(" / ")}} / {{value.course.displayname}}\n                        </div>\n                        <div class="r-course-detail-header-right">\n                            <div :class="\'r-timing-\'+value.course.timing">\n                                {{text[\'coursetiming_\'+value.course.timing]}}<br>\n                                {{ value.course.startdate }} - {{ value.course.enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <b-form-group\n                        :label="text.select_grades"\n                        ><ul class="t-item-module-children">\n                            <li class="t-item-course-gradeinfo">\n                                <span class=\'t-item-course-chk-lbl\'>{{text.grade_include}}</span\n                                ><span v-if="useRequiredGrades"  class=\'t-item-course-chk-lbl\'>{{text.grade_require}}</span>\n                            </li>\n                            <li class="t-item-course-gradeinfo" v-for="g in value.course.grades">\n                                <b-form-checkbox inline\n                                    @change="includeChanged($event,g)" v-model="g.selected"\n                                    ></b-form-checkbox>\n                                <b-form-checkbox v-if="useRequiredGrades" inline :disabled="!g.selected"\n                                    @change="requiredChanged($event,g)" v-model="g.required"\n                                    ></b-form-checkbox>\n                                <span :title="g.typename" v-html="g.icon"></span><a\n                                    :href="g.link" target="_blank">{{g.name}}</a>\n                                <s-edit-mod\n                                    :title="value.course.fullname"\n                                    @saved="(fd) => g.name = fd.get(\'name\')"\n                                    v-if="g.cmid > 0"\n                                    :cmid="g.cmid"\n                                    :coursectxid="value.course.ctxid"\n                                    genericonly></s-edit-mod>\n                            </li>\n                        </ul>\n                    </b-form-group>\n                </b-modal>\n            </a>\n        '}),Vue.component("r-item-teachergrades",{props:{value:{type:Object,default:function(){return{}}},useRequiredGrades:{type:Boolean,default:!1}},data:()=>({text:strings.teachercourse,txt:{grading:strings.grading}}),computed:{pendingsubmission(){let result=!1;for(const ix in this.value.grades){if(this.value.grades[ix].pendingsubmission){result=!0;break}}return result},filtered_grades(){return this.value.grades.filter((g=>g.selected))}},methods:{determine_grading_icon(gradingstate){switch(gradingstate){default:return"circle-o";case"ungraded":return"exclamation-circle";case"unknown":return"question-circle-o";case"graded":case"allgraded":return"check";case"unsubmitted":return"dot-circle-o"}},grading_icon(grade){return this.determine_grading_icon(this.is_grading_needed(grade))},is_grading_needed:grade=>grade.grading?grade.grading.ungraded?"ungraded":grade.grading.completed_pass||grade.grading.completed||grade.grading.completed_fail?Number(grade.grading.completed)+Number(grade.grading.completed_pass)+Number(grade.grading.completed_fail)==Number(grade.grading.students)?"allgraded":"graded":"unsubmitted":"unknown"},template:'\n        <div>\n            <table class="r-item-course-grade-details">\n                <tr v-for="g in filtered_grades">\n                    <td><span class="r-activity-icon" :title="g.typename" v-html="g.icon"></span\n                        ><a\n                        :href="g.gradinglink"\n                        target="_blank" :title="g.name"><span v-html="g.name"></span></a>\n                        <s-edit-mod\n                            :title="value.fullname"\n                            @saved="(fd) => g.name = fd.get(\'name\')"\n                            v-if="g.cmid > 0"\n                            :cmid="g.cmid"\n                            :coursectxid="value.ctxid"\n                            genericonly></s-edit-mod>\n                        <abbr v-if="useRequiredGrades && g.required" :title="text.required_goal"\n                            :class="\'s-required \' + is_grading_needed(g)"\n                            ><i class=\'fa fa-asterisk\' ></i\n                        ></abbr>\n                    </td>\n                    <td v-if=\'g.grading\'\n                        ><i :class="\'r-course-grading fa fa-\'+grading_icon(g)+\' r-graded-\'+is_grading_needed(g)"\n                        :title="txt.grading[is_grading_needed(g)]"></i>\n                    </td>\n                    <td v-if=\'g.grading\'>\n                        <r-completion-bar v-model="g.grading" :width="150" :height="15"></r-completion-bar>\n                    </td>\n                </tr>\n            </table>\n        </div>\n        '}),Vue.component("r-item-teachercompletion",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},course:{type:Object,default:function(){return{}}}},data:()=>({text:strings.completion}),created(){const self=this;let stringkeys=[];for(const key in this.text)stringkeys.push({key:key,component:"local_treestudyplan"});(0,_str.get_strings)(stringkeys).then((function(strings){let i=0;for(const key in self.text)self.text[key]=strings[i],i++}))},computed:{completionreport(){return`${_config.default.wwwroot}/report/completion/index.php?course=${this.course.id}`}},methods:{hasCompletions(){if(this.value.conditions)for(const cgroup of this.value.conditions)if(cgroup.items&&cgroup.items.length>0)return!0;return!1}},template:"\n        <table class=\"r-item-course-grade-details\">\n            <tr v-if=\"hasCompletions\">\n                <td colspan='2'\n                    ><span v-if=\"value.conditions.length <= 1\">{{ text.aggregation_overall_one }}</span\n                    ><span v-else if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any }}</span\n                ></td>\n            </tr>\n            <tr v-else>\n                <td colspan='2'>{{text.completion_not_configured}}!\n                <span v-if=\"course.amteacher\">\n                    <br><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                </span>\n                </td>\n            </tr>\n            <template v-for='cgroup in value.conditions'>\n                <tr>\n                    <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                    ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                    ><span v-else>{{ text.aggregation_any}}</span></span\n                    ><span v-else>{{ text.aggregation_one }}</span>\n                    {{ cgroup.title.toLowerCase() }}:\n                    </th>\n                </tr>\n                <tr v-for='ci in cgroup.items'>\n                    <td><span v-html='ci.details.criteria'></span>\n                        <a  href=\"#\" v-b-tooltip.click\n                            :title=\"ci.details.requirement\"\n                            class='text-info'><i  v-if=\"ci.details.requirement\"\n                            class='fa fa-question-circle'\n                            ></i></a>\n                    </td>\n                    <td>\n                        <r-completion-bar v-model=\"ci.progress\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                    </td>\n                </tr>\n            </template>\n            <tr><td colspan='2' class='pt-2'>\n                <a target=\"_blank\" :href='completionreport'>{{ text.view_completion_report}}\n                <i class='fa fa-external-link'></i></a></td></tr>\n        </table>\n        "}),Vue.component("r-grading-bar",{props:{value:{type:Object,default:function(){return{}}},width:{type:Number,default:150},height:{type:Number,default:15}},data:()=>({text:strings.grading}),computed:{width_unsubmitted(){return this.width*this.fraction_unsubmitted()},width_graded(){return this.width*this.fraction_graded()},width_ungraded(){return this.width*this.fraction_ungraded()},count_unsubmitted(){return this.value.students-this.value.graded-this.value.ungraded}},methods:{fraction_unsubmitted(){return this.value.students>0?1-(this.value.graded+this.value.ungraded)/this.value.students:1},fraction_graded(){return this.value.students>0?this.value.graded/this.value.students:0},fraction_ungraded(){return this.value.students>0?this.value.ungraded/this.value.students:0}},template:"\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_graded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-graded'\n                        :title=\"text.graded+ ' (' + this.value.graded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_unsubmitted+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-unsubmitted'\n                        :title=\"text.unsubmitted + ' (' + count_unsubmitted + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            "}),Vue.component("r-completion-bar",{props:{value:{type:Object,default:function(){return{students:0,completed:0,completed_pass:0,completed_fail:0,ungraded:0}}},width:{type:Number,default:150},height:{type:Number,default:15}},data:()=>({text:strings.completion}),computed:{width_incomplete(){return this.width*this.fraction_incomplete()},width_completed(){return this.width*this.fraction_completed()},width_completed_pass(){return this.width*this.fraction_completed_pass()},width_completed_fail(){return this.width*this.fraction_completed_fail()},width_ungraded(){return this.width*this.fraction_ungraded()},count_incomplete(){return this.value.students-this.value.completed-this.value.completed_pass-this.value.completed_fail-this.value.ungraded}},methods:{fraction_incomplete(){return this.value.students>0?1-(this.value.completed+this.value.completed_pass+this.value.completed_fail+this.value.ungraded)/this.value.students:1},fraction_completed(){return this.value.students>0?this.value.completed/this.value.students:0},fraction_completed_pass(){return this.value.students>0?this.value.completed_pass/this.value.students:0},fraction_completed_fail(){return this.value.students>0?this.value.completed_fail/this.value.students:0},fraction_ungraded(){return this.value.students>0?this.value.ungraded/this.value.students:0}},template:"\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed'\n                        :title=\"text.completed + ' (' + this.value.completed + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_pass+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-pass'\n                        :title=\"text.completed_pass + ' (' + this.value.completed_pass + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_fail+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-fail'\n                        :title=\"text.completed_fail + ' (' + this.value.completed_fail + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_incomplete+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-incomplete'\n                        :title=\"text.incomplete + ' (' + count_incomplete + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            "}),Vue.component("r-completion-circle",{props:{value:{type:Object,default:function(){return{students:10,completed:2,completed_pass:2,completed_fail:2,ungraded:2}}},stroke:{type:Number,default:.2},disabled:{type:Boolean,default:!1},title:{type:String,default:""}},computed:{radius(){return 50-50*this.stroke},arcpath_ungraded(){return this.arcpath(0,this.fraction_ungraded())},arcpath_completed(){const begin=this.fraction_ungraded();return this.arcpath(begin,this.fraction_completed())},arcpath_completed_pass(){const begin=this.fraction_ungraded()+this.fraction_completed();return this.arcpath(begin,this.fraction_completed_pass())},arcpath_completed_fail(){const begin=this.fraction_ungraded()+this.fraction_completed()+this.fraction_completed_pass();return this.arcpath(begin,this.fraction_completed_fail())},arcpath_incomplete(){const begin=this.fraction_ungraded()+this.fraction_completed()+this.fraction_completed_pass()+this.fraction_completed_fail();return this.arcpath(begin,this.fraction_incomplete())}},methods:{arcpath(start,end){const r=50-50*this.stroke,t1=2*start*π,Δ=2*end*π;return(0,_svgarc.svgarcpath)([50,50],[r,r],[t1,Δ],1.5*π)},fraction_incomplete(){return this.value.students>0?1-(this.value.completed+this.value.completed_pass+this.value.completed_fail+this.value.ungraded)/this.value.students:1},fraction_completed(){return this.value.students>0?this.value.completed/this.value.students:0},fraction_completed_pass(){return this.value.students>0?this.value.completed_pass/this.value.students:0},fraction_completed_fail(){return this.value.students>0?this.value.completed_fail/this.value.students:0},fraction_ungraded(){return this.value.students>0?this.value.ungraded/this.value.students:0}},template:'\n            <svg width="1em" height="1em" viewBox="0 0 100 100">\n                <title>{{title}}</title>\n                <circle cx="50" cy="50" :r="radius"\n                    :style="\'stroke-width: \' + (stroke*100)+\'; stroke: #ccc; fill: none;\'"/>\n                <path :d="arcpath_ungraded"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--warning); fill: none;\'"/>\n                <path :d="arcpath_completed"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--info); fill: none;\'"/>\n                <path :d="arcpath_completed_pass"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--success); fill: none;\'"/>\n                <path :d="arcpath_completed_fail"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--danger); fill: none;\'"/>\n\n                <circle v-if="disabled" cx="50" cy="50" :r="radius/2"\n                    :style="\'fill: var(--dark);\'"/>\n                <circle v-else-if="value.ungraded > 0" cx="50" cy="50" :r="radius/2"\n                    :style="\'fill: var(--warning);\'"/>\n            </g>\n            </svg>\n            '}),Vue.component("r-item-junction",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({}),computed:{completion(){return this.value.completion?this.value.completion:"incomplete"}},methods:{},template:'\n            <div :class="\'r-item-junction r-item-filter completion-\'+completion">\n                <i v-if="value.completion==\'incomplete\'" class="fa fa-circle-o"></i>\n                <i v-else-if="value.completion==\'failed\'" class="fa fa-times-circle"></i>\n                <i v-else-if="value.completion==\'progress\'" class="fa fa-exclamation-circle"></i>\n                <i v-else class="fa fa-check-circle"></i>\n            </div>\n            '}),Vue.component("r-item-finish",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({}),computed:{completion(){return this.value.completion?this.value.completion:"incomplete"}},methods:{},template:'\n            <div :class="\'r-item-finish r-item-filter completion-\'+completion">\n                <i class="fa fa-stop-circle"></i>\n            </div>\n            '}),Vue.component("r-item-start",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({}),computed:{completion(){return this.value.completion?this.value.completion:"incomplete"}},created(){},methods:{},template:'\n            <div :class="\'r-item-start r-item-filter completion-\'+completion">\n                <i class="fa fa-play-circle"></i>\n            </div>\n            '}),Vue.component("r-item-badge",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({text:strings.badge}),computed:{completion(){return this.value.badge.issued?"completed":"incomplete"},issued_icon(){return!0===this.value.badge.issued?"check":"circle-o"},issuestats(){return{students:this.value.badge.studentcount?this.value.badge.studentcount:0,completed:this.value.badge.issuedcount?this.value.badge.issuedcount:0,completed_pass:0,completed_fail:0,ungraded:0}},arcpath_issued(){if(this.value.badge.studentcount){const fraction=this.value.badge.issuedcount/this.value.badge.studentcount;return this.arcpath(0,fraction)}return""},arcpath_progress(){if(this.value.badge.completion){const fraction=this.value.badge.completion.progress/this.value.badge.completion.count;return this.arcpath(0,fraction)}return""},badgeinprogress(){return this.value.badge.issued||this.teachermode||this.value.badge.completion&&this.value.badge.completion.progress>=this.value.badge.completion.count}},methods:{arcpath(start,end){const t1=2*start*π,Δ=2*end*π-.01;return(0,_svgarc.svgarcpath)([50,50],[44,44],[t1,Δ],1.5*π)},addTargetBlank(html){const m=/^([^<]*\< *a +)(.*)/.exec(html);return m?`${m[1]} target="_blank" ${m[2]}`:html},completion_icon_rq:complete=>complete?"check-square-o":"square-o",completion_icon:complete=>complete?"check-circle":"times-circle",status:complete=>complete?"complete":"incomplete"},template:'\n            <div :class="\'r-item-badge r-item-filter r-completion-\'+completion" v-b-tooltip.hover :title="value.badge.name">\n                <a v-b-modal="\'r-item-badge-details-\'+value.id"\n                ><svg class="r-badge-backdrop " width=\'50px\' height=\'50px\' viewBox="0 0 100 100">\n                    <title>{{value.badge.name}}</title>\n                    <template v-if="teachermode">\n                        <circle cx="50" cy="50" r="44"\n                            style="stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;"/>\n                        <path :d="arcpath_issued"\n                            :style="\'stroke-width: 8; stroke: var(--info); fill: none;\'"/>\n                    </template>\n                    <circle v-else-if="value.badge.issued" cx="50" cy="50" r="46"\n                        style="stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;"/>\n                    <template v-else-if="value.badge.completion">\n                        <circle cx="50" cy="50" r="44"\n                            style="stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;"/>\n                        <path :d="arcpath_progress"\n                            :style="\'stroke-width: 8; stroke: var(--info); fill: none;\'"/>\n                    </template>\n                    <circle v-else cx="50" cy="50" r="46"\n                        stroke-dasharray="6 9"\n                        style="stroke: #999; stroke-width: 6; fill: #ddd; fill-opacity: 0.8;"/>\n                    <image class="badge-image" clip-path="circle() fill-box"\n                        :href="value.badge.imageurl" x="12" y="12" width="76" height="76"\n                        :style="(badgeinprogress)?\'\':\'opacity: 0.4;\'" />\n                </svg></a>\n\n                <b-modal\n                    :id="\'r-item-badge-details-\'+value.id"\n                    :title="value.badge.name"\n                    size="lg"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class="fa fa-certificate"></i>\n                                <a :href="(!guestmode)?(value.badge.infolink):undefined" target="_blank"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                        <div class="r-course-detail-header-right" v-if="!teachermode">\n                            <div class="r-completion-detail-header">\n                                {{ text[\'completion_\'+completion] }}\n                                <i v-b-popover.hover :class="\'fa fa-\'+issued_icon+\' r-completion-\'+completion"\n                                    :title="text[\'completion_\'+completion]"></i>\n                            </div>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols="3">\n                            <img :src="value.badge.imageurl"/>\n                        </b-col><b-col cols="9">\n                            <p>{{value.badge.description}}</p>\n                            <ul v-if="value.badge.issued" class="list-unstyled pt-1 mb-1 border-grey border-top">\n                                <li><strong><i class="fa fa-calendar-check-o r-completion-complete-pass"></i>\n                                    {{text.dateissued}}:</strong> {{ value.badge.dateissued }}</li>\n                                <li v-if=\'value.badge.dateexpired\'\n                                ><strong><i class="fa fa-calendar-times-o r-completion-complete"></i>\n                                    {{text.dateexpired}}:</strong> {{ value.badge.dateexpired }}</li>\n                                <li><strong><i class="fa fa-share-alt r-completion-complete-pass"></i>\n                                    <a :href="value.badge.issuedlink">{{text.share_badge}}</a></strong> </li>\n                            </ul>\n                            <table v-if=\'value.badge.completion && !value.badge.issued\' class="r-item-course-grade-details mb-2">\n                                <tr v-if="value.badge.completion.types.length > 1">\n                                    <th colspan="2"><span v-html="value.badge.completion.title"></span></th>\n                                </tr>\n                                <template v-for=\'cgroup in value.badge.completion.types\' >\n                                    <tr>\n                                        <td colspan="2" v-if="value.badge.completion.types.length > 1"\n                                            ><span v-html="cgroup.title"></span></td>\n                                        <th colspan="2" v-else><span v-html="cgroup.title"></span></th>\n                                    </tr>\n                                    <template v-for=\'ci in cgroup.criteria\'>\n                                        <tr>\n                                            <td class="pl-3"><span v-if=\'guestmode\'><span v-html="ci.title"></span></span>\n                                                <a target=\'_blank\' v-else-if=\'ci.link\' :href=\'ci.link\'\n                                                    ><span v-html="ci.title"></span></a>\n                                                <span v-else><span v-html="ci.title"></span></span>\n                                            <td><i :class="\'fa fa-\'+completion_icon(ci.completed)+\' r-completion-\'+status(ci.completed)"\n                                                :title="text[\'completion_\'+status(ci.completed)]"></i>\n                                            </td>\n                                        </tr>\n                                        <template v-if="ci.requirements.length > 1">\n                                            <tr v-for="rq in ci.requirements">\n                                                <td class="pl-4" colspan="2"\n                                                    ><i :class="\'fa fa-\'+completion_icon_rq(rq.completed)+\' r-completion-incomplete\'"\n                                                    :title="text[\'completion_\'+status(rq.completed)]"></i>\n                                                    <span class="t-badge-criteria-requirement"><span v-html="rq.title"></span></span></td>\n                                            </tr>\n                                        </template>\n                                    </template>\n                                </template>\n                                <tr v-if="!value.badge.active" class="mt-1">\n                                    <td colspan="2" class="alert alert-warning alert-block">{{text.badgedisabled}}</td>\n                                </tr>\n                            </table>\n                            <ul class="list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1"\n                             v-if="value.badge.criteria"><li v-for="crit in value.badge.criteria"\n                             ><span v-html=\'crit\'></span></li></ul>\n                            <p v-if="(!guestmode)"><strong><i class="fa fa-link"></i>\n                                <a :href="value.badge.infolink" target="_blank"\n                                    >{{ text.badgeinfo }}</a></strong></p>\n                            <p v-if="teachermode && !guestmode"\n                                >{{text.badgeissuedstats}}:<br>\n                                <r-completion-bar v-model="issuestats" :width="150" :height="15"></r-completion-bar>\n                            </p>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            '})}};return _exports.default=_default,_exports.default}));
+define("local_treestudyplan/report-viewer-components",["exports","./simpleline/simpleline","core/str","./util/string-helper","./util/date-helper","core/ajax","core/notification","./util/svgarc","./util/debugger","core/config","./studyplan-processor","./treestudyplan-components"],(function(_exports,_simpleline,_str,_stringHelper,_dateHelper,_ajax,_notification,_svgarc,_debugger,_config,_studyplanProcessor,_treestudyplanComponents){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_notification=_interopRequireDefault(_notification),_debugger=_interopRequireDefault(_debugger),_config=_interopRequireDefault(_config),_treestudyplanComponents=_interopRequireDefault(_treestudyplanComponents);const π=Math.PI;var _default={install(Vue){Vue.use(_treestudyplanComponents.default);let debug=new _debugger.default("treestudyplan-viewer"),lastCaller=null;function scrollCurrentIntoView(handle){const elCurrentHeader=document.querySelector(".r-studyplan-scrollable").querySelector(".s-studyline-header-period.current");!elCurrentHeader||handle&&handle==lastCaller||(lastCaller=handle,elCurrentHeader.scrollIntoView({behavior:"smooth",block:"start",inline:"center"}))}let strings=(0,_stringHelper.load_strings)({report:{loading:"loadinghelp@core",studyplan_past:"studyplan_past",studyplan_present:"studyplan_present",studyplan_future:"studyplan_future",back:"back"},invalid:{error:"error"},grading:{ungraded:"ungraded",graded:"graded",allgraded:"allgraded",unsubmitted:"unsubmitted",nogrades:"nogrades",unknown:"unknown"},completion:{completed:"completion_completed",incomplete:"completion_incomplete",completed_pass:"completion_passed",completed_fail:"completion_failed",ungraded:"ungraded",aggregation_all:"aggregation_all",aggregation_any:"aggregation_any",aggregation_one:"aggregation_one",aggregation_overall_all:"aggregation_overall_all",aggregation_overall_any:"aggregation_overall_any",aggregation_overall_one:"aggregation_overall_one",completion_not_configured:"completion_not_configured",configure_completion:"configure_completion",view_completion_report:"view_completion_report",completion_incomplete:"completion_incomplete",completion_failed:"completion_failed",completion_pending:"completion_pending",completion_progress:"completion_progress",completion_completed:"completion_completed",completion_good:"completion_good",completion_excellent:"completion_excellent",view_feedback:"view_feedback",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",required_goal:"required_goal",student_not_tracked:"student_not_tracked",completion_not_enabled:"completion_not_enabled"},badge:{share_badge:"share_badge",dateissued:"dateissued",dateexpire:"dateexpire",badgeinfo:"badgeinfo",badgeissuedstats:"badgeissuedstats",completion_incomplete:"completion_incomplete_badge",completion_completed:"completion_completed_badge",completioninfo:"completioninfo",badgedisabled:"badgedisabled"},course:{completion_incomplete:"completion_incomplete",completion_failed:"completion_failed",completion_pending:"completion_pending",completion_progress:"completion_progress",completion_completed:"completion_completed",completion_good:"completion_good",completion_excellent:"completion_excellent",view_feedback:"view_feedback",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",required_goal:"required_goal",student_not_tracked:"student_not_tracked",not_enrolled:"not_enrolled"},teachercourse:{select_conditions:"select_conditions",select_grades:"select_grades",coursetiming_past:"coursetiming_past",coursetiming_present:"coursetiming_present",coursetiming_future:"coursetiming_future",grade_include:"grade_include",grade_require:"grade_require",required_goal:"required_goal",student_from_plan_enrolled:"student_from_plan_enrolled",students_from_plan_enrolled:"students_from_plan_enrolled"},pageinfo:{edit:"period_edit",fullname:"studyplan_name",shortname:"studyplan_shortname",startdate:"studyplan_startdate",enddate:"studyplan_enddate",description:"studyplan_description",duration:"studyplan_duration",details:"studyplan_details"}});function isVisible(elem){return!!(elem.offsetWidth||elem.offsetHeight||elem.getClientRects().length)}const ItemEventBus=new Vue;Vue.component("r-progress-circle",{props:{value:{type:Number},max:{type:Number,default:100},min:{type:Number,default:0},stroke:{type:Number,default:.2},bgopacity:{type:Number,default:.2},title:{type:String,default:""},icon:{type:String}},data:()=>({selectedstudyplan:null}),computed:{range(){return this.max-this.min},fraction(){return this.max-this.min==0?0:(this.value-this.min)/(this.max-this.min)},radius(){return 50-50*this.stroke},arcpath(){let fraction=0;const r=50-50*this.stroke;this.max-this.min!=0&&(fraction=(this.value-this.min)/(this.max-this.min));const Δ=2*fraction*π;return(0,_svgarc.svgarcpath)([50,50],[r,r],[0,Δ],1.5*π)}},methods:{},template:'\n            <div style="display: inline-block; width: 1em; height: 1em; position:relative; padding: 0;">\n                <svg width="1em" height="1em" viewBox="0 0 100 100"\n                     style="position: absolute;top: 0;left: 0;">\n                    <title>{{title}}</title>\n                    <circle v-if="fraction >= 1.0" cx="50" cy="50" :r="radius"\n                        :style="\'opacity: 1; stroke-width: \'+ (stroke*100)+\'; stroke: currentcolor; fill: none;\'"/>\n                    <g v-else>\n                        <circle cx="50" cy="50" :r="radius"\n                            :style="\'opacity: \' + bgopacity + \';stroke-width: \'+ (stroke*100)+\'; stroke: currentcolor; fill: none;\'"/>\n                        <path :d="arcpath"\n                            :style="\'stroke-width: \' + (stroke*100) +\'; stroke: currentcolor; fill: none;\'"/>\n                    </g>\n                </svg>\n                <i v-if=\'icon\' :class="\'fa fa-\'+icon"\n                    style=" position: absolute; top: 0.42em; left: 0.43em; text-align:center; display: inline-block;\n                            width:1em; font-size: 0.55em; "\n                ></i>\n            </div>\n            '}),Vue.component("r-report",{props:{invitekey:{type:String,default:()=>null},userid:{type:Number,default:()=>0},type:{type:String,default:()=>"own"}},data:()=>({text:strings.report,studyplans:{past:[],present:[],future:[]},selectedstudyplan:null,loadingstudyplan:!1,loading:!0}),computed:{teachermode(){return"teaching"==this.type},guestmode(){return"invited"==this.type},verified_type(){return["invited","other","teaching","own"].includes(this.type)?this.type:"own"},studyplancount(){return this.studyplans.past.length+this.studyplans.present.length+this.studyplans.future.length}},updated(){},mounted(){this.loadStudyplans()},methods:{call_args(o){const args={};return"object"!=typeof o||Array.isArray(o)||null===o||(0,_studyplanProcessor.objCopy)(args,o),"invited"==this.verified_type?args.invitekey=this.invitekey:"other"==this.verified_type&&(args.userid=this.userid),args},loadStudyplans(){const self=this;this.loading=!0,(0,_ajax.call)([{methodname:`local_treestudyplan_list_${this.verified_type}_studyplans`,args:this.call_args()}])[0].done((function(response){const plans={future:[],present:[],past:[]};for(const ix in response){const plan=response[ix];plans[(0,_dateHelper.studyplanTiming)(plan)].push(plan)}for(const ix in plans)plans[ix].sort(((a,b)=>{const t=new Date(b.startdate).getTime()-new Date(a.startdate).getTime();return 0==t&&(t=a.name.localeCompare(b.name)),t}));self.studyplans=plans,self.loading=!1,1==self.studyplans.present.length?self.selectStudyplan(self.studyplans.present[0]):1==this.studyplancount&&(self.studyplans.future.lengh>0?self.selectStudyplan(self.studyplans.future[0]):self.selectStudyplan(self.studyplans.past[0]))})).fail(_notification.default.exception)},selectStudyplan(plan){const self=this;this.loadingstudyplan=!0,(0,_ajax.call)([{methodname:`local_treestudyplan_get_${this.verified_type}_studyplan`,args:this.call_args({studyplanid:plan.id})}])[0].done((function(response){self.selectedstudyplan=(0,_studyplanProcessor.ProcessStudyplan)(response),self.loadingstudyplan=!1})).fail(_notification.default.exception)},deselectStudyplan(){this.selectedstudyplan=null,this.loadStudyplans()}},template:"\n            <div class='t-studyplan-container r-report-tabs'>\n                <div v-if='loading' class=\"vue-loader spinner-border text-primary\" role=\"status\"></div>\n                <template v-else>\n                    <div v-if='!loadingstudyplan && selectedstudyplan'>\n                        <div class=\"mb-2\">\n                            <a href='#' @click='deselectStudyplan'><h5 class=\"d-inline\"><i class=\"fa fa-chevron-left\"></i> {{ text.back }}</h5></a>\n                            <h4 class=\"d-inline ml-3\">{{ selectedstudyplan.name}}\n                            <s-studyplan-details \n                                class=\"mb-2\"\n                                size=\"sm\"\n                                v-model=\"selectedstudyplan\" \n                                v-if=\"selectedstudyplan.description\"\n                            ><i class='fa fa-info-circle'></i></s-studyplan-details></h4>\n                        </div>\n                        <r-studyplan\n                            v-model='selectedstudyplan'\n                            :guestmode='guestmode'\n                            :teachermode='teachermode'\n                        ></r-studyplan>\n                    </div>\n                    <div v-else-if='loadingstudyplan' class=\"vue-loader spinner-border text-primary\" role=\"status\">\n                        <span class=\"sr-only\">{{ text.loading }}</span>\n                    </div>\n                    <div v-else class='t-studyplan-notselected'>\n                        <template v-for=\"timing in ['present', 'past', 'future']\">\n                            <template v-if=\"studyplans[timing].length > 0\">\n                                <h4>{{ text[\"studyplan_\"+timing]}}:</h4>\n                                <b-card-group deck>\n                                    <s-studyplan-card\n                                        v-for='(studyplan, planindex) in studyplans[timing]'\n                                        :key='studyplan.id'\n                                        v-model='studyplans[timing][planindex]'\n                                        open\n                                        @open='selectStudyplan(studyplan)'\n                                        ></s-studyplan-card>\n                                </b-card-group>\n                            </template>\n                        </template>\n                    </div>\n                </template>\n            </div>\n            "}),Vue.component("r-studyplan",{props:{value:{type:Object},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({selectedpageindex:-1,text:strings.pageinfo}),computed:{selectedpage(){return this.value.pages[this.selectedpageindex]},startpageindex(){let startpageindex=0,firststart=null;for(const ix in this.value.pages){const page=this.value.pages[ix];if(debug.info(`Checking page ${ix} - timing ${(0,_dateHelper.studyplanPageTiming)(page)}`,page),"present"==(0,_dateHelper.studyplanPageTiming)(page)){debug.info(`Found page nr ${ix} to be present`);const s=new Date(page.startdate);(!firststart||firststart>s)&&(startpageindex=ix,firststart=s)}}return startpageindex}},methods:{pageduration:page=>(0,_dateHelper.format_date)(page.startdate,!1)+" - "+(0,_dateHelper.format_date)(page.enddate,!1),columns:page=>1+2*page.periods,columns_stylerule(page){let s="grid-template-columns: var(--studyplan-filter-width)";for(let i=0;i<page.periods;i++)s+=" var(--studyplan-course-width) var(--studyplan-filter-width)";return s+";"},countLineLayers(line,page){let maxLayer=-1;for(let i=0;i<=page.periods;i++){line.slots[i];for(const ix in line.slots[i].courses){const item=line.slots[i].courses[ix];item.layer>maxLayer&&(maxLayer=item.layer)}for(const ix in line.slots[i].filters){const item=line.slots[i].filters[ix];item.layer>maxLayer&&(maxLayer=item.layer)}}return maxLayer>=0?maxLayer+1:1},showslot(page,line,index,layeridx,type){const forGradable="gradable"==type,periods=page.periods;let show=!0;for(let i=0;i<periods;i++)if(line.slots[index-i]&&line.slots[index-i].courses){const list=line.slots[index-i].courses;for(const ix in list){const item=list[ix];item.layer==layeridx&&(forGradable?i>0&&item.span-i>0&&(show=!1):item.span-i>1&&(show=!1))}}return show},selectedpageChanged(newTabIndex,prevTabIndex){ItemEventBus.$emit("redrawLines",null),scrollCurrentIntoView(this.selectedpage.id)}},mounted(){this.$root.$emit("redrawLines")},updated(){scrollCurrentIntoView(this.selectedpage.id),ItemEventBus.$emit("lineHeightChange",null),this.$root.$emit("redrawLines"),ItemEventBus.$emit("redrawLines")},template:'\n            <div>\n            <b-card no-body>\n                <b-tabs \n                    v-model=\'selectedpageindex\' \n                    @activate-tab=\'selectedpageChanged\'\n                    content-class="mt-1">\n                    <b-tab\n                        v-for="(page,pageindex) in value.pages"\n                        :active="(pageindex == startpageindex)"\n                        :key="page.id"\n                        :title-item-class="\'s-studyplanpage-tab \'+ page.timing"\n                        ><template #title>\n                            <span v-b-tooltip.hover :title=\'page.fullname\'>{{page.shortname}}</span>\n                            <a href="#" v-b-modal="\'studyplanpage-info-\'+page.id" class=\'text-info\'\n                             v-if=\'pageindex == selectedpageindex\'\n                            ><i class=\'fa fa-info-circle\'></i></a>\n                        </template>\n                        \n                        <b-modal\n                            :id="\'studyplanpage-info-\'+page.id"\n                            scrollable\n                            ok-only\n                            >\n                            <template #modal-title>\n                                {{page.fullname}}\n                            </template>\n                            <b-container>\n                                <b-row>\n                                    <b-col cols="4"><b>{{ text.shortname}}</b></b-col>\n                                    <b-col cols="8">\n                                        {{ page.shortname }}\n                                    </b-col>\n                                </b-row>\n                                <b-row>\n                                    <b-col cols="4"><b>{{ text.duration}}</b></b-col>\n                                    <b-col cols="8">\n                                        {{ pageduration(page) }}\n                                    </b-col>\n                                </b-row>\n                                <b-row v-if="page.description">\n                                    <b-col cols="12"><b>{{ text.description}}</b></b-col>\n                                </b-row>\n                                <b-row v-if="page.description">\n                                    <b-col cols="12">\n                                        <span v-html="page.description"></span>\n                                    </b-col>\n                                </b-row>\n                            </b-container>\n                        </b-modal>\n                        <div v-if="page.studylines.length > 0" class=\'r-studyplan-content\'>\n                            \x3c!-- First paint the headings--\x3e\n                            <div class=\'r-studyplan-headings\'\n                                ><s-studyline-header-heading :identifier="Number(page.id)"></s-studyline-header-heading>\n                                <r-studyline-heading  v-for="(line,lineindex) in page.studylines"\n                                    :key="line.id"\n                                    v-model="page.studylines[lineindex]"\n                                    :layers=\'countLineLayers(page,line)+1\'\n                                    :class=" \'t-studyline\' + ((lineindex%2==0)?\' odd \' :\' even \' )\n                                            + ((lineindex==0)?\' first \':\' \')\n                                            + ((lineindex==page.studylines.length-1)?\' last \':\' \')"\n                                ></r-studyline-heading\n                            ></div>\n                            \x3c!-- Next, paint all the cells in the scrollable --\x3e\n                            <div class="r-studyplan-scrollable" >\n                                <div class="r-studyplan-timeline" :style="columns_stylerule(page)">\n                                \x3c!-- add period information --\x3e\n                                <template v-for="(n,index) in (page.periods+1)">\n                                    <s-studyline-header-period\n                                        v-if="index > 0"\n                                        v-model="page.perioddesc[index-1]"\n                                        :identifier="Number(page.id)"\n                                        ></s-studyline-header-period>\n                                    <div class="s-studyline-header-filter"></div>\n                                </template>\n\n                                \x3c!-- Line by line add the items --\x3e\n                                \x3c!-- The grid layout handles putting it in rows and columns --\x3e\n                                <template v-for="(line,lineindex) in page.studylines"\n                                    ><template v-for="(layernr,layeridx) in countLineLayers(page,line)"\n                                        ><template v-for="(n,index) in (page.periods+1)"\n                                            ><r-studyline-slot\n                                                v-if="index > 0 && showslot(page,line, index, layeridx, \'gradable\')"\n                                                type=\'gradable\'\n                                                v-model="line.slots[index].courses"\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                                                :guestmode=\'guestmode\'\n                                                :teachermode=\'teachermode\'\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                                            ></r-studyline-slot\n                                            ><r-studyline-slot\n                                                v-if="showslot(page,line, index, layeridx, \'gradable\')"\n                                                type=\'filter\'\n                                                v-model="line.slots[index].filters"\n                                                :teachermode=\'teachermode\'\n                                                :key="\'f-\'+lineindex+\'-\'+index+\'-\'+layernr"\n                                                :slotindex="index"\n                                                :line="line"\n                                                :plan="value"\n                                                :page="page"\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                                                        + ((index==page.periods)?\' rightmost\':\'\')"\n                                                >\n                                            </r-studyline-slot\n                                        ></template\n                                    ></template\n                                ></template\n                                ></div\n                            ></div\n                        ></div>\n                    </b-tab>\n                </b-tabs>\n            </b-card>\n            </div>\n            '}),Vue.component("r-studyline-heading",{props:{value:{type:Object,default:function(){return{}}},layers:{type:Number,default:1}},data:()=>({layerHeights:{}}),created(){ItemEventBus.$on("lineHeightChange",this.onLineHeightChange)},computed:{},methods:{onLineHeightChange(lineid){if(this.$refs.mainEl&&(lineid==this.value.id||null===lineid)){const items=document.querySelectorAll(`.r-studyline-slot-0[data-studyline='${this.value.id}']`);let heightSum=0;items.forEach((el=>{const height=el.getBoundingClientRect().height;heightSum+=height}));const heightStyle=`${heightSum}px`;this.$refs.mainEl.style.height=heightStyle}}},template:'\n            <div class="r-studyline r-studyline-heading "\n                :data-studyline="value.id" ref="mainEl"\n                ><div class="r-studyline-handle" :style="\'background-color: \' + value.color"></div>\n                <div class="r-studyline-title">\n                    <abbr v-b-tooltip.hover :title="value.name">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            '}),Vue.component("r-studyline-slot",{props:{value:{type:Array,default:()=>[]},type:{type:String,default:"gradable"},slotindex:{type:Number,default:0},line:{type:Object,default:()=>null},layer:{type:Number},plan:{type:Object,default:()=>null},page:{type:Object,default:()=>null},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1},period:{type:Object,default:()=>null}},mounted(){const self=this;"gradable"==self.type&&1==self.slotindex&&(self.resizeListener=new ResizeObserver((()=>{if(self.$refs.sizeElement){const height=self.$refs.sizeElement.getBoundingClientRect().height;ItemEventBus.$emit("lineHeightChange",self.line.id,self.layer,height)}})).observe(self.$refs.sizeElement))},computed:{item(){for(const ix in this.value){const itm=this.value[ix];if(itm.layer==this.layer)return itm}return null},current(){if(this.period&&this.period.startdate&&this.period.enddate){const now=new Date,pstart=new Date(this.period.startdate),pend=new Date(this.period.enddate);return now>=pstart&&now<pend}return!1},spanCss(){if(this.item&&this.item.span>1){return`width: 100%; grid-column: span ${2*this.item.span-1};`}return""}},data:()=>({}),methods:{},template:"\n            <div :class=\"  'r-studyline-slot ' + type + ' ' + (current?'current ':' ')\n                         + 'r-studyline-slot-' + slotindex + ' '\n                         + ((slotindex==0)?'r-studyline-firstcolumn ':' ')\"\n                :data-studyline=\"line.id\" ref=\"sizeElement\"\n                :style='spanCss'\n                ><div class=\"r-slot-item\" v-if=\"item\"\n                    ><r-item\n                        v-model=\"item\"\n                        :plan=\"plan\"\n                        :guestmode='guestmode'\n                        :teachermode='teachermode'></r-item\n                    ></div\n                ></r-item\n            ></div>\n            "}),Vue.component("r-item",{props:{value:{type:Object,default:function(){return null}},plan:{type:Object,default:()=>null},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({lines:[]}),methods:{lineColor(){if(this.teachermode)return"var(--gray)";switch(this.value.completion){default:return"var(--gray)";case"failed":return"var(--danger)";case"progress":return"var(--warning)";case"completed":return"var(--success)";case"good":return"var(--info)";case"excellent":return"var(--blue)"}},redrawLine(conn){let lineColor=this.lineColor(),start=document.getElementById("studyitem-"+conn.from_id),end=document.getElementById("studyitem-"+conn.to_id);this.lines[conn.to_id]&&(this.lines[conn.to_id].remove(),delete this.lines[conn.to_id]),null!==start&&null!==end&&isVisible(start)&&isVisible(end)&&(this.lines[conn.to_id]=new _simpleline.SimpleLine(start,end,{color:lineColor,gravity:{start:1.3,end:1.3}}))},redrawLines(){for(let ix in this.lines){let lineinfo=this.lines[ix];lineinfo&&lineinfo.line&&(lineinfo.line.remove(),lineinfo.line=void 0)}for(let i in this.value.connections.out){let conn=this.value.connections.out[i];this.redrawLine(conn)}},onWindowResize(){this.redrawLines()},onRedrawLines(){this.redrawLines()},removeLine(conn){this.lines[conn.to_id]&&(this.lines[conn.to_id].remove(),delete this.lines[conn.to_id])}},computed:{hasConnectionsOut(){return!["finish"].includes(this.value.type)},hasConnectionsIn(){return!["start"].includes(this.value.type)},hasContext(){return["start","junction","finish"].includes(this.value.type)}},created(){ItemEventBus.$on("redrawLines",this.onRedrawLines)},mounted(){this.redrawLines(),setTimeout((()=>{this.redrawLines()}),50),window.addEventListener("resize",this.onWindowResize)},beforeDestroy(){for(let i in this.value.connections.out){let conn=this.value.connections.out[i];this.removeLine(conn)}window.removeEventListener("resize",this.onWindowResize),ItemEventBus.$off("redrawLines",this.onRedrawLines)},beforeUpdate(){},updated(){this.dummy||this.redrawLines()},template:'\n            <div class="r-item-base" :id="\'studyitem-\'+value.id" :data-x=\'value.type\'>\n                <r-item-competency    v-if="value.type == \'competency\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-competency>\n                <r-item-course        v-if="value.type == \'course\' && !teachermode" :plan="plan"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-course>\n                <r-item-teachercourse v-if="value.type == \'course\' && teachermode" :plan="plan"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-teachercourse>\n                <r-item-junction      v-if="value.type == \'junction\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-junction>\n                <r-item-start         v-if="value.type == \'start\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-start>\n                <r-item-finish        v-if="value.type == \'finish\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-finish>\n                <r-item-badge         v-if="value.type == \'badge\'"\n                    v-model="value" :guestmode="guestmode" :teachermode="teachermode" ></r-item-badge>\n                <r-item-invalid       v-if="value.type == \'invalid\' && teachermode"\n                    v-model="value" ></r-item-invalid>\n            </div>\n            '}),Vue.component("r-item-invalid",{props:{value:{type:Object,default:function(){return null}}},data:()=>({text:strings.invalid}),methods:{},template:'\n            <div class="r-item-invalid">\n            <b-card no-body class="r-item-invalid">\n                <b-row no-gutters>\n                    <b-col md="1">\n                        <span class="r-timing-indicator timing-invalid"></span>\n                    </b-col>\n                    <b-col md="11">\n                        <b-card-body class="align-items-center">\n                            <i class="fa fa-exclamation"></i> {{ text.error }}\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            '}),Vue.component("r-item-course",{props:{value:{type:Object,default:()=>null},guestmode:{type:Boolean,default:()=>!1},teachermode:{type:Boolean,default:()=>!1},plan:{type:Object,default:()=>null}},data:()=>({text:strings.course}),computed:{startdate(){return(0,_dateHelper.format_date)(this.value.course.startdate)},enddate(){return this.value.course.enddate?(0,_dateHelper.format_date)(this.value.course.enddate):this.text.noenddate}},created(){},methods:{completion_icon(completion){switch(completion){default:return"circle-o";case"pending":return"question-circle";case"failed":return"times-circle";case"progress":return"exclamation-circle";case"completed":case"good":case"excellent":return"check-circle"}},circle_icon(completion){switch(completion){default:return null;case"failed":return"times";case"progress":return"exclamation";case"completed":case"good":case"excellent":return"check"}}},template:"\n            <div :class=\"'r-item-competency completion-'+value.completion\">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'r-timing-indicator timing-'+value.course.timing\"></span>\n                    </b-col>\n                    <b-col md=\"11\" class=\"align-items-center\">\n                        <b-card-body >\n                            <template v-if='!value.course.enrolled'>\n                                <i v-b-popover.top\n                                    class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                    :title=\"text.student_not_tracked\"></i>\n                            </template>\n                            <template v-else-if='value.course.completion'>\n                                <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                    :value='value.course.completion.progress'\n                                    :max='value.course.completion.count'\n                                    :min='0'\n                                    :class=\"'r-course-result r-completion-'+value.completion\"\n                                    :icon='circle_icon(value.completion)'\n                                    :title=\"text['completion_'+value.completion]\"\n                                ></r-progress-circle>\n                                <i v-else v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <template v-else>\n                                <i v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <a  v-b-modal=\"'r-item-course-details-'+value.id\"\n                                :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):'#'\"\n                                @click.prevent.stop=''\n                                >{{ value.course.displayname }}</i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n\n                <b-modal\n                    :id=\"'r-item-course-details-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):undefined\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(\" / \")}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div class=\"r-completion-detail-header\">\n                                <template v-if='!value.course.enrolled'>\n                                    {{text.not_enrolled}}\n                                    <i v-b-popover.top\n                                        class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                        :title=\"text.student_not_tracked\"></i>\n                                </template>\n                                <template v-else-if='value.course.completion'>\n                                    {{text['completion_'+value.completion]}}\n                                    <r-progress-circle v-if='[\"failed\",\"progress\",\"incomplete\"].includes(value.completion)'\n                                        :value='value.course.completion.progress'\n                                        :max='value.course.completion.count'\n                                        :min='0'\n                                        :title=\"text['completion_'+value.completion]\"\n                                        :class=\"'r-progress-circle-popup r-completion-'+value.completion\"\n                                        :icon='circle_icon(value.completion)'\n                                    ></r-progress-circle\n                                    ><i v-else v-b-popover.top\n                                    :class=\"'fa fa-'+completion_icon(value.completion)+\n                                            ' r-progress-icon-popup r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                                <template v-else>\n                                    {{text['completion_'+value.completion]}}\n                                    <i  :class=\"'fa fa-'+completion_icon(value.completion)+' r-completion-'+value.completion\"\n                                        :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                            </div>\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-studentgrades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value'\n                        :guestmode='guestmode'></r-item-studentgrades>\n                    <r-item-studentcompletion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        :guestmode='guestmode'></r-item-studentcompletion>\n                </b-modal>\n            </b-card></div>\n            "}),Vue.component("r-item-studentgrades",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1}},data:()=>({text:strings.course}),computed:{pendingsubmission(){let result=!1;for(const ix in this.value.course.grades){if(this.value.course.grades[ix].pendingsubmission){result=!0;break}}return result},useRequiredGrades(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useRequiredGrades)&&this.plan.aggregation_info.useRequiredGrades}},methods:{completion_icon(completion){switch(completion){default:return"circle-o";case"pending":return"question-circle";case"failed":return"times-circle";case"progress":return"exclamation-circle";case"completed":case"good":case"excellent":return"check-circle"}}},template:'\n            <table class="r-item-course-grade-details">\n                <tr v-for="g in value.course.grades">\n                    <td><span class="r-activity-icon" :title="g.typename" v-html="g.icon"></span\n                        ><a\n                        :href="(!guestmode)?(g.link):undefined" target="_blank"><span v-html="g.name"></span></a>\n                        <abbr v-if="useRequiredGrades && g.required" :title="text.required_goal"\n                            :class="\'s-required \' + g.completion"\n                            ><i class=\'fa fa-asterisk\' ></i\n                        ></abbr>\n                    </td>\n                    <td><span :class="\' r-completion-\'+g.completion">{{g.grade}}</span></td>\n                    <td><i :class="\'fa fa-\'+completion_icon(g.completion)+\' r-completion-\'+g.completion"\n                        :title="text[\'completion_\'+g.completion]"></i>\n                        <i v-if=\'g.pendingsubmission\' :title="text[\'completion_pending\']"\n                            class="r-pendingsubmission fa fa-clock-o"></i></td>\n                    <td v-if="g.feedback">\n                        <a  v-b-modal="\'r-grade-feedback-\'+g.id"\n                            href="#"\n                        >{{ text["view_feedback"]}}</a>\n                        <b-modal\n                            :id="\'r-grade-feedback-\'+g.id"\n                            size="sm"\n                            ok-only\n                            centered\n                            scrollable\n                        >\n                            <template #modal-header>\n                                <h2><i class="fa fa-graduation-cap"></i>{{ value.course.fullname }}</h2><br>\n                                <span class="r-activity-icon" :title="g.typename" v-html="g.icon"></span>{{g.name}}\n                            </template>\n                            <span v-html="g.feedback"></span>\n                        </b-modal>\n                    </td>\n                </tr>\n            </table>\n            '}),Vue.component("r-item-studentcompletion",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},course:{type:Object,default:function(){return{}}}},data:()=>({text:strings.completion}),created(){},computed:{},methods:{completion_icon(completion){switch(completion){case"progress":return"exclamation-circle";case"complete":case"complete-pass":return"check-circle";case"complete-fail":return"times-circle";default:return"circle-o"}},completion_tag:cgroup=>cgroup.completion?"completed":"incomplete",hasCompletions(){if(this.value.conditions)for(const cgroup of this.value.conditions)if(cgroup.items&&cgroup.items.length>0)return!0;return!1},requirementHTML(requirements){const rqs=requirements.split(/, */);let html="";for(const ix in rqs){html+=`${rqs[ix]}<br>`}return html},addTargetBlank(html){const m=/^([^<]*\< *a +)(.*)/.exec(html);return m?`${m[1]} target="_blank" ${m[2]}`:html}},template:'\n            <table class="r-item-course-grade-details">\n                <tr v-if="hasCompletions">\n                    <td colspan=\'2\'\n                        ><span v-if="value.conditions.length <= 1">{{ text.aggregation_overall_one }}</span\n                        ><span v-else if="value.aggregation == \'all\'">{{ text.aggregation_overall_all}}</span\n                        ><span v-else>{{ text.aggregation_overall_any }}</span\n                    ></td>\n                </tr>\n                <tr v-else>\n                    <td colspan=\'2\'>{{text.completion_not_configured}}!\n                    </td>\n                </tr>\n                <template v-for=\'cgroup in value.conditions\' v-if=\'value.enabled && value.tracked\'>\n                    <tr>\n                        <th colspan=\'2\'><span v-if="cgroup.items.length > 1"\n                        ><span v-if="cgroup.aggregation == \'all\'">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span\n                        ><span v-else>{{ text.aggregation_one }}</span>\n                        {{ cgroup.title.toLowerCase() }}:\n                        </th>\n                        <th><r-progress-circle v-if="cgroup.progress < cgroup.count"\n                                :value=\'cgroup.progress\'\n                                :max=\'cgroup.count\'\n                                :class="\'r-completion-\'+cgroup.status"\n                                :title="text[\'completion_\'+cgroup.status]"\n                            ></r-progress-circle>\n                            <i v-else :class="\'fa fa-check-circle r-completion-\'+cgroup.status"></i>\n                            </th>\n                    </tr>\n                    <tr v-for=\'ci in cgroup.items\'>\n                        <td><span v-if=\'guestmode\'>{{ci.title}}</span>\n                            <span v-else v-html=\'addTargetBlank(ci.details.criteria)\'></span>\n                            <a href="#" v-b-tooltip.click.hover.right.html="{ customClass: \'r-tooltip \' + ci.status}"\n                                :title="requirementHTML(ci.details.requirement)"\n                                class="text-primary"><i  v-if="ci.details.requirement"\n                                class=\'fa fa-question-circle\'\n                                ></i></a>\n                        <td\n                            ><span :class="\' r-completion-\'+ci.status">{{ci.grade}}</span>\n                            <span v-if="ci.warning"\n                                ><i class="text-primary fa fa-exclamation-triangle"\n                                    v-b-tooltip.hover.right.click="{ customClass: \'r-tooltip info\' }"\n                                    :title="ci.warning"\n                                ></i\n                            ></span\n                        ></td>\n                        <td><i :class="\'fa fa-\'+completion_icon(ci.status)+\' r-completion-\'+ci.status"\n                            :title="text[\'completion_\'+ci.status]"></i>\n                            <i v-if=\'ci.pending\' :title="text[\'completion_pending\']"\n                                class="r-pendingsubmission fa fa-clock-o"></i>\n                        </td>\n                        <td v-if="ci.feedback">\n                            <a  v-b-modal="\'r-grade-feedback-\'+ci.id"\n                                href="#"\n                            >{{ text["view_feedback"]}}</a>\n                            <b-modal\n                                :id="\'r-grade-feedback-\'+ci.id"\n                                size="sm"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class="fa fa-graduation-cap"></i>{{ course.fullname }}</h2><br>\n                                    <span class="r-activity-icon" :title="ci.typename" v-html="ci.icon"></span>{{ci.name}}\n                                </template>\n                                <span v-html="ci.feedback"></span>\n                            </b-modal>\n                        </td>\n                    </tr>\n                </template>\n                <template v-else>\n                    <tr v-if=\'! value.enabled\'>\n                        <td colspan=\'4\'>{{text.completion_not_enabled}}</td>\n                    </tr>\n                    <tr v-else>\n                        <td colspan=\'4\'>{{text.student_not_tracked}}</td>\n                    </tr>\n                </template>\n            </table>\n            '}),Vue.component("r-item-teachercourse",{props:{value:{type:Object,default:()=>null},guestmode:{type:Boolean,default:()=>!1},teachermode:{type:Boolean,default:()=>!1},plan:{type:Object,default:()=>null}},data:()=>({text:strings.teachercourse,txt:{grading:strings.grading}}),computed:{course_grading_needed(){return this.course_grading_state()},course_grading_icon(){return this.determine_grading_icon(this.course_grading_state())},filtered_grades(){return this.value.course.grades.filter((g=>g.selected))},useRequiredGrades(){return!(!this.plan||!this.plan.aggregation_info||void 0===this.plan.aggregation_info.useRequiredGrades)&&this.plan.aggregation_info.useRequiredGrades},isCompletable(){let completable=!1;return this.value.course.completion?this.value.course.completion.conditions.length>0&&(completable=!0):this.value.course.grades&&this.value.course.grades.length>0&&(completable=!0),completable},progress_circle(){const status={students:0,completed:0,completed_pass:0,completed_fail:0,ungraded:0};if(this.value.course.completion)for(const cond of this.value.course.completion.conditions)for(const itm of cond.items)itm.progress&&(status.students+=itm.progress.students,status.completed+=itm.progress.completed,status.completed_pass+=itm.progress.completed_pass,status.completed_fail+=itm.progress.completed_fail,status.ungraded+=itm.progress.ungraded);else if(this.value.course.grades)for(const g of this.value.course.grades)g.grading&&(status.students+=g.grading.students,status.completed+=g.grading.completed,status.completed_pass+=g.grading.completed_pass,status.completed_fail+=g.grading.completed_fail,status.ungraded+=g.grading.ungraded);return status},startdate(){return(0,_dateHelper.format_date)(this.value.course.startdate)},enddate(){return this.value.course.enddate?(0,_dateHelper.format_date)(this.value.course.enddate):this.text.noenddate}},created(){},methods:{course_grading_state(){let ungraded=0,unknown=0,graded=0,allgraded=0;const grades=this.filtered_grades;if(!Array.isArray(grades)||0==grades)return"nogrades";for(const ix in grades){const grade=grades[ix];grade.grading?Number(grade.grading.ungraded)>0?ungraded++:Number(grade.grading.graded)>0&&(Number(grade.grading.graded)==Number(grade.grading.students)?allgraded++:graded++):unknown=!0}return ungraded>0?"ungraded":unknown?"unknown":graded?"graded":allgraded?"allgraded":"unsubmitted"},determine_grading_icon(gradingstate){switch(gradingstate){default:return"circle-o";case"ungraded":return"exclamation-circle";case"unknown":return"question-circle-o";case"graded":case"allgraded":return"check";case"unsubmitted":return"dot-circle-o"}}},template:'\n            <div  :class="\'r-item-competency \'+ (value.course.amteacher?\'r-course-am-teacher\':\'\')">\n            <b-card no-body>\n                <div class=\'d-flex flex-wrap mr-0 ml-0\'>\n                    <div>\n                        <span\n                            :title="text[\'coursetiming_\'+value.course.timing]"\n                            v-b-popover.hover.top="startdate+\' - \'+enddate"\n                            :class="\'r-timing-indicator timing-\'+value.course.timing"></span>\n                    </div>\n                    <div class="flex-fill align-items-center">\n                        <b-card-body>\n                            <a  v-b-modal="\'r-item-course-details-\'+value.id"\n                                :href="(!guestmode)?(\'/course/view.php?id=\'+value.course.id):\'#\'"\n                                @click.prevent.stop=\'\'\n                                >{{ value.course.displayname }}</i></a>\n                            <r-completion-circle class="r-course-graded" :disabled="!isCompletable"\n                                v-model="progress_circle"></r-completion-circle>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal\n                    v-if="true"\n                    :id="\'r-item-course-details-\'+value.id"\n                    :title="value.course.displayname + \' - \' + value.course.fullname"\n                    size="lg"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href="(!guestmode)?(\'/course/view.php?id=\'+value.course.id):undefined" target="_blank"\n                                ><i class="fa fa-graduation-cap"></i> {{ value.course.fullname }}</a>\n                                <r-item-teacher-gradepicker v-model="value"\n                                    v-if="value.course.grades && value.course.grades.length > 0"\n                                    :useRequiredGrades="useRequiredGrades"\n                                    :plan="plan"\n                                ></r-item-teacher-gradepicker>\n                                <a v-if=\'!!value.course.completion && value.course.amteacher\'\n                                    :href="\'/course/completion.php?id=\'+value.course.id"  target="_blank"\n                                    :title="text.configure_completion"><i class="fa fa-gear"></i></a>\n                            </h1>\n                            {{ value.course.context.path.join(" / ") }}\n                            <div class=\'mt-1 text-info\'>\n                            <span v-if=\'value.course.numenrolled != 1\'>{{ value.course.numenrolled }} {{ text.students_from_plan_enrolled }}</span>\n                              <span v-else> 1 {{ text.student_from_plan_enrolled }} </span>\n                            </div>\n                        </div>\n                        <div class="r-course-detail-header-right">\n                            <div class="r-completion-detail-header">\n                                <r-completion-circle class="r-progress-circle-popup" :disabled="!isCompletable"\n                                    v-model="progress_circle"></r-completion-circle>\n                            </div>\n                            <div :class="\'r-timing-\'+value.course.timing">\n                                {{ text[\'coursetiming_\'+value.course.timing] }}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-teachergrades\n                        v-if=\'!!value.course.grades && value.course.grades.length > 0\'\n                        v-model=\'value.course\'\n                        :useRequiredGrades="useRequiredGrades"\n                        ></r-item-teachergrades>\n                    <r-item-teachercompletion\n                        v-if=\'!!value.course.completion\'\n                        v-model=\'value.course.completion\'\n                        :course=\'value.course\'\n                        ></r-item-teachercompletion>\n                </b-modal>\n\n            </b-card>\n            </div>\n            '}),Vue.component("r-item-teacher-gradepicker",{props:{value:{type:Object,default:function(){return{}}},useRequiredGrades:{type:Boolean,default:()=>null}},data:()=>({text:strings.teachercourse}),computed:{},methods:{includeChanged(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:newValue,required:g.required}}])[0].fail(_notification.default.exception)},requiredChanged(newValue,g){(0,_ajax.call)([{methodname:"local_treestudyplan_include_grade",args:{grade_id:g.id,item_id:this.value.id,include:g.selected,required:newValue}}])[0].fail(_notification.default.exception)}},template:'\n            <a  v-if="value.course.canselectgradables" href=\'#\'\n                                        v-b-modal="\'r-item-course-config-\'+value.id"\n                                        @click.prevent.stop=\'\'\n                                        ><i class=\'fa fa-cog\'></i>\n                <b-modal v-if=\'value.course.canselectgradables\'\n                    :id="\'r-item-course-config-\'+value.id"\n                    :title="value.course.displayname + \' - \' + value.course.fullname"\n                    ok-only\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href="\'/course/view.php?id=\'+value.course.id" target="_blank"\n                                ><i class="fa fa-graduation-cap"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(" / ")}} / {{value.course.displayname}}\n                        </div>\n                        <div class="r-course-detail-header-right">\n                            <div :class="\'r-timing-\'+value.course.timing">\n                                {{text[\'coursetiming_\'+value.course.timing]}}<br>\n                                {{ value.course.startdate }} - {{ value.course.enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <b-form-group\n                        :label="text.select_grades"\n                        ><ul class="t-item-module-children">\n                            <li class="t-item-course-gradeinfo">\n                                <span class=\'t-item-course-chk-lbl\'>{{text.grade_include}}</span\n                                ><span v-if="useRequiredGrades"  class=\'t-item-course-chk-lbl\'>{{text.grade_require}}</span>\n                            </li>\n                            <li class="t-item-course-gradeinfo" v-for="g in value.course.grades">\n                                <b-form-checkbox inline\n                                    @change="includeChanged($event,g)" v-model="g.selected"\n                                    ></b-form-checkbox>\n                                <b-form-checkbox v-if="useRequiredGrades" inline :disabled="!g.selected"\n                                    @change="requiredChanged($event,g)" v-model="g.required"\n                                    ></b-form-checkbox>\n                                <span :title="g.typename" v-html="g.icon"></span><a\n                                    :href="g.link" target="_blank">{{g.name}}</a>\n                                <s-edit-mod\n                                    :title="value.course.fullname"\n                                    @saved="(fd) => g.name = fd.get(\'name\')"\n                                    v-if="g.cmid > 0"\n                                    :cmid="g.cmid"\n                                    :coursectxid="value.course.ctxid"\n                                    genericonly></s-edit-mod>\n                            </li>\n                        </ul>\n                    </b-form-group>\n                </b-modal>\n            </a>\n        '}),Vue.component("r-item-teachergrades",{props:{value:{type:Object,default:function(){return{}}},useRequiredGrades:{type:Boolean,default:!1}},data:()=>({text:strings.teachercourse,txt:{grading:strings.grading}}),computed:{pendingsubmission(){let result=!1;for(const ix in this.value.grades){if(this.value.grades[ix].pendingsubmission){result=!0;break}}return result},filtered_grades(){return this.value.grades.filter((g=>g.selected))}},methods:{determine_grading_icon(gradingstate){switch(gradingstate){default:return"circle-o";case"ungraded":return"exclamation-circle";case"unknown":return"question-circle-o";case"graded":case"allgraded":return"check";case"unsubmitted":return"dot-circle-o"}},grading_icon(grade){return this.determine_grading_icon(this.is_grading_needed(grade))},is_grading_needed:grade=>grade.grading?grade.grading.ungraded?"ungraded":grade.grading.completed_pass||grade.grading.completed||grade.grading.completed_fail?Number(grade.grading.completed)+Number(grade.grading.completed_pass)+Number(grade.grading.completed_fail)==Number(grade.grading.students)?"allgraded":"graded":"unsubmitted":"unknown"},template:'\n        <div>\n            <table class="r-item-course-grade-details">\n                <tr v-for="g in filtered_grades">\n                    <td><span class="r-activity-icon" :title="g.typename" v-html="g.icon"></span\n                        ><a\n                        :href="g.gradinglink"\n                        target="_blank" :title="g.name"><span v-html="g.name"></span></a>\n                        <s-edit-mod\n                            :title="value.fullname"\n                            @saved="(fd) => g.name = fd.get(\'name\')"\n                            v-if="g.cmid > 0"\n                            :cmid="g.cmid"\n                            :coursectxid="value.ctxid"\n                            genericonly></s-edit-mod>\n                        <abbr v-if="useRequiredGrades && g.required" :title="text.required_goal"\n                            :class="\'s-required \' + is_grading_needed(g)"\n                            ><i class=\'fa fa-asterisk\' ></i\n                        ></abbr>\n                    </td>\n                    <td v-if=\'g.grading\'\n                        ><i :class="\'r-course-grading fa fa-\'+grading_icon(g)+\' r-graded-\'+is_grading_needed(g)"\n                        :title="txt.grading[is_grading_needed(g)]"></i>\n                    </td>\n                    <td v-if=\'g.grading\'>\n                        <r-completion-bar v-model="g.grading" :width="150" :height="15"></r-completion-bar>\n                    </td>\n                </tr>\n            </table>\n        </div>\n        '}),Vue.component("r-item-teachercompletion",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},course:{type:Object,default:function(){return{}}}},data:()=>({text:strings.completion}),created(){const self=this;let stringkeys=[];for(const key in this.text)stringkeys.push({key:key,component:"local_treestudyplan"});(0,_str.get_strings)(stringkeys).then((function(strings){let i=0;for(const key in self.text)self.text[key]=strings[i],i++}))},computed:{completionreport(){return`${_config.default.wwwroot}/report/completion/index.php?course=${this.course.id}`}},methods:{hasCompletions(){if(this.value.conditions)for(const cgroup of this.value.conditions)if(cgroup.items&&cgroup.items.length>0)return!0;return!1}},template:"\n        <table class=\"r-item-course-grade-details\">\n            <tr v-if=\"hasCompletions\">\n                <td colspan='2'\n                    ><span v-if=\"value.conditions.length <= 1\">{{ text.aggregation_overall_one }}</span\n                    ><span v-else if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any }}</span\n                ></td>\n            </tr>\n            <tr v-else>\n                <td colspan='2'>{{text.completion_not_configured}}!\n                <span v-if=\"course.amteacher\">\n                    <br><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                </span>\n                </td>\n            </tr>\n            <template v-for='cgroup in value.conditions'>\n                <tr>\n                    <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                    ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                    ><span v-else>{{ text.aggregation_any}}</span></span\n                    ><span v-else>{{ text.aggregation_one }}</span>\n                    {{ cgroup.title.toLowerCase() }}:\n                    </th>\n                </tr>\n                <tr v-for='ci in cgroup.items'>\n                    <td><span v-html='ci.details.criteria'></span>\n                        <a  href=\"#\" v-b-tooltip.click\n                            :title=\"ci.details.requirement\"\n                            class='text-info'><i  v-if=\"ci.details.requirement\"\n                            class='fa fa-question-circle'\n                            ></i></a>\n                    </td>\n                    <td>\n                        <r-completion-bar v-model=\"ci.progress\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                    </td>\n                </tr>\n            </template>\n            <tr><td colspan='2' class='pt-2'>\n                <a target=\"_blank\" :href='completionreport'>{{ text.view_completion_report}}\n                <i class='fa fa-external-link'></i></a></td></tr>\n        </table>\n        "}),Vue.component("r-grading-bar",{props:{value:{type:Object,default:function(){return{}}},width:{type:Number,default:150},height:{type:Number,default:15}},data:()=>({text:strings.grading}),computed:{width_unsubmitted(){return this.width*this.fraction_unsubmitted()},width_graded(){return this.width*this.fraction_graded()},width_ungraded(){return this.width*this.fraction_ungraded()},count_unsubmitted(){return this.value.students-this.value.graded-this.value.ungraded}},methods:{fraction_unsubmitted(){return this.value.students>0?1-(this.value.graded+this.value.ungraded)/this.value.students:1},fraction_graded(){return this.value.students>0?this.value.graded/this.value.students:0},fraction_ungraded(){return this.value.students>0?this.value.ungraded/this.value.students:0}},template:"\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_graded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-graded'\n                        :title=\"text.graded+ ' (' + this.value.graded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_unsubmitted+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-unsubmitted'\n                        :title=\"text.unsubmitted + ' (' + count_unsubmitted + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            "}),Vue.component("r-completion-bar",{props:{value:{type:Object,default:function(){return{students:0,completed:0,completed_pass:0,completed_fail:0,ungraded:0}}},width:{type:Number,default:150},height:{type:Number,default:15}},data:()=>({text:strings.completion}),computed:{width_incomplete(){return this.width*this.fraction_incomplete()},width_completed(){return this.width*this.fraction_completed()},width_completed_pass(){return this.width*this.fraction_completed_pass()},width_completed_fail(){return this.width*this.fraction_completed_fail()},width_ungraded(){return this.width*this.fraction_ungraded()},count_incomplete(){return this.value.students-this.value.completed-this.value.completed_pass-this.value.completed_fail-this.value.ungraded}},methods:{fraction_incomplete(){return this.value.students>0?1-(this.value.completed+this.value.completed_pass+this.value.completed_fail+this.value.ungraded)/this.value.students:1},fraction_completed(){return this.value.students>0?this.value.completed/this.value.students:0},fraction_completed_pass(){return this.value.students>0?this.value.completed_pass/this.value.students:0},fraction_completed_fail(){return this.value.students>0?this.value.completed_fail/this.value.students:0},fraction_ungraded(){return this.value.students>0?this.value.ungraded/this.value.students:0}},template:"\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed'\n                        :title=\"text.completed + ' (' + this.value.completed + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_pass+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-pass'\n                        :title=\"text.completed_pass + ' (' + this.value.completed_pass + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_fail+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-fail'\n                        :title=\"text.completed_fail + ' (' + this.value.completed_fail + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_incomplete+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-incomplete'\n                        :title=\"text.incomplete + ' (' + count_incomplete + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            "}),Vue.component("r-completion-circle",{props:{value:{type:Object,default:function(){return{students:10,completed:2,completed_pass:2,completed_fail:2,ungraded:2}}},stroke:{type:Number,default:.2},disabled:{type:Boolean,default:!1},title:{type:String,default:""}},computed:{radius(){return 50-50*this.stroke},arcpath_ungraded(){return this.arcpath(0,this.fraction_ungraded())},arcpath_completed(){const begin=this.fraction_ungraded();return this.arcpath(begin,this.fraction_completed())},arcpath_completed_pass(){const begin=this.fraction_ungraded()+this.fraction_completed();return this.arcpath(begin,this.fraction_completed_pass())},arcpath_completed_fail(){const begin=this.fraction_ungraded()+this.fraction_completed()+this.fraction_completed_pass();return this.arcpath(begin,this.fraction_completed_fail())},arcpath_incomplete(){const begin=this.fraction_ungraded()+this.fraction_completed()+this.fraction_completed_pass()+this.fraction_completed_fail();return this.arcpath(begin,this.fraction_incomplete())}},methods:{arcpath(start,end){const r=50-50*this.stroke,t1=2*start*π,Δ=2*end*π;return(0,_svgarc.svgarcpath)([50,50],[r,r],[t1,Δ],1.5*π)},fraction_incomplete(){return this.value.students>0?1-(this.value.completed+this.value.completed_pass+this.value.completed_fail+this.value.ungraded)/this.value.students:1},fraction_completed(){return this.value.students>0?this.value.completed/this.value.students:0},fraction_completed_pass(){return this.value.students>0?this.value.completed_pass/this.value.students:0},fraction_completed_fail(){return this.value.students>0?this.value.completed_fail/this.value.students:0},fraction_ungraded(){return this.value.students>0?this.value.ungraded/this.value.students:0}},template:'\n            <svg width="1em" height="1em" viewBox="0 0 100 100">\n                <title>{{title}}</title>\n                <circle cx="50" cy="50" :r="radius"\n                    :style="\'stroke-width: \' + (stroke*100)+\'; stroke: #ccc; fill: none;\'"/>\n                <path :d="arcpath_ungraded"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--warning); fill: none;\'"/>\n                <path :d="arcpath_completed"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--info); fill: none;\'"/>\n                <path :d="arcpath_completed_pass"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--success); fill: none;\'"/>\n                <path :d="arcpath_completed_fail"\n                    :style="\'stroke-width: \' + (stroke*100) +\'; stroke: var(--danger); fill: none;\'"/>\n\n                <circle v-if="disabled" cx="50" cy="50" :r="radius/2"\n                    :style="\'fill: var(--dark);\'"/>\n                <circle v-else-if="value.ungraded > 0" cx="50" cy="50" :r="radius/2"\n                    :style="\'fill: var(--warning);\'"/>\n            </g>\n            </svg>\n            '}),Vue.component("r-item-junction",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({}),computed:{completion(){return this.value.completion?this.value.completion:"incomplete"}},methods:{},template:'\n            <div :class="\'r-item-junction r-item-filter completion-\'+completion">\n                <i v-if="value.completion==\'incomplete\'" class="fa fa-circle-o"></i>\n                <i v-else-if="value.completion==\'failed\'" class="fa fa-times-circle"></i>\n                <i v-else-if="value.completion==\'progress\'" class="fa fa-exclamation-circle"></i>\n                <i v-else class="fa fa-check-circle"></i>\n            </div>\n            '}),Vue.component("r-item-finish",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({}),computed:{completion(){return this.value.completion?this.value.completion:"incomplete"}},methods:{},template:'\n            <div :class="\'r-item-finish r-item-filter completion-\'+completion">\n                <i class="fa fa-stop-circle"></i>\n            </div>\n            '}),Vue.component("r-item-start",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({}),computed:{completion(){return this.value.completion?this.value.completion:"incomplete"}},created(){},methods:{},template:'\n            <div :class="\'r-item-start r-item-filter completion-\'+completion">\n                <i class="fa fa-play-circle"></i>\n            </div>\n            '}),Vue.component("r-item-badge",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},teachermode:{type:Boolean,default:!1}},data:()=>({text:strings.badge}),computed:{completion(){return this.value.badge.issued?"completed":"incomplete"},issued_icon(){return!0===this.value.badge.issued?"check":"circle-o"},issuestats(){return{students:this.value.badge.studentcount?this.value.badge.studentcount:0,completed:this.value.badge.issuedcount?this.value.badge.issuedcount:0,completed_pass:0,completed_fail:0,ungraded:0}},arcpath_issued(){if(this.value.badge.studentcount){const fraction=this.value.badge.issuedcount/this.value.badge.studentcount;return this.arcpath(0,fraction)}return""},arcpath_progress(){if(this.value.badge.completion){const fraction=this.value.badge.completion.progress/this.value.badge.completion.count;return this.arcpath(0,fraction)}return""},badgeinprogress(){return this.value.badge.issued||this.teachermode||this.value.badge.completion&&this.value.badge.completion.progress>=this.value.badge.completion.count}},methods:{arcpath(start,end){const t1=2*start*π,Δ=2*end*π-.01;return(0,_svgarc.svgarcpath)([50,50],[44,44],[t1,Δ],1.5*π)},addTargetBlank(html){const m=/^([^<]*\< *a +)(.*)/.exec(html);return m?`${m[1]} target="_blank" ${m[2]}`:html},completion_icon_rq:complete=>complete?"check-square-o":"square-o",completion_icon:complete=>complete?"check-circle":"times-circle",status:complete=>complete?"complete":"incomplete"},template:'\n            <div :class="\'r-item-badge r-item-filter r-completion-\'+completion" v-b-tooltip.hover :title="value.badge.name">\n                <a v-b-modal="\'r-item-badge-details-\'+value.id"\n                ><svg class="r-badge-backdrop " width=\'50px\' height=\'50px\' viewBox="0 0 100 100">\n                    <title>{{value.badge.name}}</title>\n                    <template v-if="teachermode">\n                        <circle cx="50" cy="50" r="44"\n                            style="stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;"/>\n                        <path :d="arcpath_issued"\n                            :style="\'stroke-width: 8; stroke: var(--info); fill: none;\'"/>\n                    </template>\n                    <circle v-else-if="value.badge.issued" cx="50" cy="50" r="46"\n                        style="stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;"/>\n                    <template v-else-if="value.badge.completion">\n                        <circle cx="50" cy="50" r="44"\n                            style="stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;"/>\n                        <path :d="arcpath_progress"\n                            :style="\'stroke-width: 8; stroke: var(--info); fill: none;\'"/>\n                    </template>\n                    <circle v-else cx="50" cy="50" r="46"\n                        stroke-dasharray="6 9"\n                        style="stroke: #999; stroke-width: 6; fill: #ddd; fill-opacity: 0.8;"/>\n                    <image class="badge-image" clip-path="circle() fill-box"\n                        :href="value.badge.imageurl" x="12" y="12" width="76" height="76"\n                        :style="(badgeinprogress)?\'\':\'opacity: 0.4;\'" />\n                </svg></a>\n\n                <b-modal\n                    :id="\'r-item-badge-details-\'+value.id"\n                    :title="value.badge.name"\n                    size="lg"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class="fa fa-certificate"></i>\n                                <a :href="(!guestmode)?(value.badge.infolink):undefined" target="_blank"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                        <div class="r-course-detail-header-right" v-if="!teachermode">\n                            <div class="r-completion-detail-header">\n                                {{ text[\'completion_\'+completion] }}\n                                <i v-b-popover.hover :class="\'fa fa-\'+issued_icon+\' r-completion-\'+completion"\n                                    :title="text[\'completion_\'+completion]"></i>\n                            </div>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols="3">\n                            <img :src="value.badge.imageurl"/>\n                        </b-col><b-col cols="9">\n                            <p>{{value.badge.description}}</p>\n                            <ul v-if="value.badge.issued" class="list-unstyled pt-1 mb-1 border-grey border-top">\n                                <li><strong><i class="fa fa-calendar-check-o r-completion-complete-pass"></i>\n                                    {{text.dateissued}}:</strong> {{ value.badge.dateissued }}</li>\n                                <li v-if=\'value.badge.dateexpired\'\n                                ><strong><i class="fa fa-calendar-times-o r-completion-complete"></i>\n                                    {{text.dateexpired}}:</strong> {{ value.badge.dateexpired }}</li>\n                                <li><strong><i class="fa fa-share-alt r-completion-complete-pass"></i>\n                                    <a :href="value.badge.issuedlink">{{text.share_badge}}</a></strong> </li>\n                            </ul>\n                            <table v-if=\'value.badge.completion && !value.badge.issued\' class="r-item-course-grade-details mb-2">\n                                <tr v-if="value.badge.completion.types.length > 1">\n                                    <th colspan="2"><span v-html="value.badge.completion.title"></span></th>\n                                </tr>\n                                <template v-for=\'cgroup in value.badge.completion.types\' >\n                                    <tr>\n                                        <td colspan="2" v-if="value.badge.completion.types.length > 1"\n                                            ><span v-html="cgroup.title"></span></td>\n                                        <th colspan="2" v-else><span v-html="cgroup.title"></span></th>\n                                    </tr>\n                                    <template v-for=\'ci in cgroup.criteria\'>\n                                        <tr>\n                                            <td class="pl-3"><span v-if=\'guestmode\'><span v-html="ci.title"></span></span>\n                                                <a target=\'_blank\' v-else-if=\'ci.link\' :href=\'ci.link\'\n                                                    ><span v-html="ci.title"></span></a>\n                                                <span v-else><span v-html="ci.title"></span></span>\n                                            <td><i :class="\'fa fa-\'+completion_icon(ci.completed)+\' r-completion-\'+status(ci.completed)"\n                                                :title="text[\'completion_\'+status(ci.completed)]"></i>\n                                            </td>\n                                        </tr>\n                                        <template v-if="ci.requirements.length > 1">\n                                            <tr v-for="rq in ci.requirements">\n                                                <td class="pl-4" colspan="2"\n                                                    ><i :class="\'fa fa-\'+completion_icon_rq(rq.completed)+\' r-completion-incomplete\'"\n                                                    :title="text[\'completion_\'+status(rq.completed)]"></i>\n                                                    <span class="t-badge-criteria-requirement"><span v-html="rq.title"></span></span></td>\n                                            </tr>\n                                        </template>\n                                    </template>\n                                </template>\n                                <tr v-if="!value.badge.active" class="mt-1">\n                                    <td colspan="2" class="alert alert-warning alert-block">{{text.badgedisabled}}</td>\n                                </tr>\n                            </table>\n                            <ul class="list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1"\n                             v-if="value.badge.criteria"><li v-for="crit in value.badge.criteria"\n                             ><span v-html=\'crit\'></span></li></ul>\n                            <p v-if="(!guestmode)"><strong><i class="fa fa-link"></i>\n                                <a :href="value.badge.infolink" target="_blank"\n                                    >{{ text.badgeinfo }}</a></strong></p>\n                            <p v-if="teachermode && !guestmode"\n                                >{{text.badgeissuedstats}}:<br>\n                                <r-completion-bar v-model="issuestats" :width="150" :height="15"></r-completion-bar>\n                            </p>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            '})}};return _exports.default=_default,_exports.default}));
 
 //# sourceMappingURL=report-viewer-components.min.js.map
\ No newline at end of file
diff --git a/amd/build/report-viewer-components.min.js.map b/amd/build/report-viewer-components.min.js.map
index be94db7..7cd1f04 100644
--- a/amd/build/report-viewer-components.min.js.map
+++ b/amd/build/report-viewer-components.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"report-viewer-components.min.js","sources":["../src/report-viewer-components.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint no-unused-vars: warn */\n/*eslint max-len: [\"error\", { \"code\": 160 }] */\n/*eslint-disable no-trailing-spaces */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {SimpleLine} from './simpleline/simpleline';\nimport {get_strings} from 'core/str';\nimport {load_strings} from './util/string-helper';\nimport {format_date} from './util/date-helper';\nimport {call} from 'core/ajax';\nimport notification from 'core/notification';\nimport {svgarcpath} from './util/svgarc';\nimport Debugger from './util/debugger';\nimport Config from 'core/config';\nimport {ProcessStudyplan, ProcessStudyplanPage, objCopy} from './studyplan-processor';\n\nimport TSComponents from './treestudyplan-components';\n\n// Make π available as a constant\nconst π = Math.PI;\n// Gravity value for arrow lines - determines how much a line is pulled in the direction of the start/end before changing direction\nconst LINE_GRAVITY = 1.3;\n\n\nexport default {\n    install(Vue/*,options*/){\n        Vue.use(TSComponents);\n        let debug = new Debugger(\"treestudyplan-viewer\");\n        let lastCaller = null;\n        /**\n         * Scroll current period into view\n         * @param {*} handle A key to pass so subsequent calls with the same key won't trigger (always triggers when null or undefined)\n         */\n        function scrollCurrentIntoView(handle){\n            const elScrollContainer = document.querySelector(\".r-studyplan-scrollable\");\n            const elCurrentHeader = elScrollContainer.querySelector(\".s-studyline-header-period.current\");\n\n            if(elCurrentHeader && ((!handle) || (handle != lastCaller))){\n                lastCaller = handle;\n                elCurrentHeader.scrollIntoView({\n                    behavior: \"smooth\",\n                    block: \"start\",\n                    inline: \"center\",\n                });\n            }\n        }\n\n        let strings = load_strings({\n            report: {\n                loading: \"loadinghelp@core\",\n                studyplan_past: \"studyplan_past\",\n                studyplan_present: \"studyplan_present\",\n                studyplan_future: \"studyplan_future\",\n                back: \"back\",\n            },\n            invalid: {\n                error: 'error',\n            },\n            grading: {\n                ungraded: \"ungraded\",\n                graded: \"graded\",\n                allgraded: \"allgraded\",\n                unsubmitted: \"unsubmitted\",\n                nogrades: \"nogrades\",\n                unknown: \"unknown\",\n            },\n            completion: {\n                completed: \"completion_completed\",\n                incomplete: \"completion_incomplete\",\n                completed_pass: \"completion_passed\",\n                completed_fail: \"completion_failed\",\n                ungraded: \"ungraded\",\n                aggregation_all: \"aggregation_all\",\n                aggregation_any: \"aggregation_any\",\n                aggregation_one: \"aggregation_one\",\n                aggregation_overall_all: \"aggregation_overall_all\",\n                aggregation_overall_any: \"aggregation_overall_any\",\n                aggregation_overall_one: \"aggregation_overall_one\",\n                completion_not_configured: \"completion_not_configured\",\n                configure_completion: \"configure_completion\",\n                view_completion_report: \"view_completion_report\",\n                completion_incomplete: \"completion_incomplete\",\n                completion_failed: \"completion_failed\",\n                completion_pending: \"completion_pending\",\n                completion_progress: \"completion_progress\",\n                completion_completed: \"completion_completed\",\n                completion_good: \"completion_good\",\n                completion_excellent: \"completion_excellent\",\n                view_feedback: \"view_feedback\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                required_goal: \"required_goal\",\n                student_not_tracked: \"student_not_tracked\",\n                completion_not_enabled: \"completion_not_enabled\",\n            },\n            badge: {\n                share_badge: \"share_badge\",\n                dateissued: \"dateissued\",\n                dateexpire: \"dateexpire\",\n                badgeinfo: \"badgeinfo\",\n                badgeissuedstats: \"badgeissuedstats\",\n                completion_incomplete: \"completion_incomplete_badge\",\n                completion_completed: \"completion_completed_badge\",\n                completioninfo: \"completioninfo\",\n                badgedisabled: \"badgedisabled\"\n            },\n            course: {\n                completion_incomplete: \"completion_incomplete\",\n                completion_failed: \"completion_failed\",\n                completion_pending: \"completion_pending\",\n                completion_progress: \"completion_progress\",\n                completion_completed: \"completion_completed\",\n                completion_good: \"completion_good\",\n                completion_excellent: \"completion_excellent\",\n                view_feedback: \"view_feedback\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                required_goal: \"required_goal\",\n                student_not_tracked: \"student_not_tracked\",\n                not_enrolled: \"not_enrolled\",\n            },\n            teachercourse: {\n                select_conditions: \"select_conditions\",\n                select_grades: \"select_grades\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                grade_include: \"grade_include\",\n                grade_require: \"grade_require\",\n                required_goal: \"required_goal\",\n                student_from_plan_enrolled: \"student_from_plan_enrolled\",\n                students_from_plan_enrolled: \"students_from_plan_enrolled\",\n            },\n            pageinfo: {\n                edit: 'period_edit',\n                fullname: 'studyplan_name',\n                shortname: 'studyplan_shortname',\n                startdate: 'studyplan_startdate',\n                enddate: 'studyplan_enddate',\n                description: 'studyplan_description',\n                duration: 'studyplan_duration',\n                details: 'studyplan_details',\n            }\n\n        });\n\n        /************************************\n         *                                  *\n         * Treestudyplan Viewer components  *\n         *                                  *\n         ************************************/\n\n        /**\n         * Check if element is visible\n         * @param {Object} elem The element to check\n         * @returns {boolean} True if visible\n         */\n        function isVisible(elem){\n            return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );\n        }\n\n        // Create new eventbus for interaction between item components\n        const ItemEventBus = new Vue();\n\n        Vue.component('r-progress-circle',{\n            props: {\n                value: {\n                    type: Number,\n                },\n                max: {\n                    type: Number,\n                    default: 100,\n                },\n                min: {\n                    type: Number,\n                    default: 0,\n                },\n                stroke: {\n                    type: Number,\n                    default: 0.2,\n                },\n                bgopacity: {\n                    type: Number,\n                    default: 0.2,\n                },\n                title: {\n                    type: String,\n                    default: \"\",\n                },\n                icon: {\n                    type: String,\n                }\n\n            },\n            data() {\n                return {\n                    selectedstudyplan: null,\n                };\n            },\n            computed: {\n                range() {\n                    return this.max - this.min;\n                },\n                fraction(){\n                    if(this.max - this.min == 0){\n                        return 0;\n                        // 0 size is always empty :)\n                    } else {\n                        return (this.value - this.min)/(this.max - this.min);\n                    }\n                },\n                radius() {\n                    return 50 - (50*this.stroke);\n                },\n                arcpath() {\n                    let fraction = 0;\n                    const r = 50 - (50*this.stroke);\n                    if(this.max - this.min != 0){\n                        fraction = (this.value - this.min)/(this.max - this.min);\n                    }\n\n                    const Δ = fraction * 2*π;\n                    return svgarcpath([50,50],[r,r],[0,Δ], 1.5*π);\n                },\n            },\n            methods: {\n            },\n            template: `\n            <div style=\"display: inline-block; width: 1em; height: 1em; position:relative; padding: 0;\">\n                <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 100 100\"\n                     style=\"position: absolute;top: 0;left: 0;\">\n                    <title>{{title}}</title>\n                    <circle v-if=\"fraction >= 1.0\" cx=\"50\" cy=\"50\" :r=\"radius\"\n                        :style=\"'opacity: 1; stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'\"/>\n                    <g v-else>\n                        <circle cx=\"50\" cy=\"50\" :r=\"radius\"\n                            :style=\"'opacity: ' + bgopacity + ';stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'\"/>\n                        <path :d=\"arcpath\"\n                            :style=\"'stroke-width: ' + (stroke*100) +'; stroke: currentcolor; fill: none;'\"/>\n                    </g>\n                </svg>\n                <i v-if='icon' :class=\"'fa fa-'+icon\"\n                    style=\" position: absolute; top: 0.42em; left: 0.43em; text-align:center; display: inline-block;\n                            width:1em; font-size: 0.55em; \"\n                ></i>\n            </div>\n            `,\n        });\n\n\n        Vue.component('r-report', {\n            props: {\n                invitekey: {\n                    type: String,\n                    default() { return null;},\n                },\n                userid: {\n                    type: Number,\n                    default() { return 0;},\n                },\n                type: {\n                    type: String,\n                    default() { return \"own\";},\n                }\n            },\n            data() {\n                return {\n                    text: strings.report,\n                    studyplans: {\n                        past: [],\n                        present: [],\n                        future: [],\n                    },\n                    \n                    selectedstudyplan: null,\n                    loadingstudyplan: false,\n                    loading: true,\n                };\n            },\n            computed: {\n                teachermode() {\n                    return (this.type ==\"teaching\");\n                },\n                guestmode() {\n                    return (this.type == \"invited\");\n                },\n                verified_type() {\n                    if (! [\"invited\",\"other\",\"teaching\",\"own\"].includes(this.type)) {\n                        return \"own\";\n                    } else {\n                        return this.type;\n                    }\n                },\n                studyplancount() {\n                    return this.studyplans.past.length + this.studyplans.present.length + this.studyplans.future.length;\n                }\n            },\n            updated() {\n\n            },\n            mounted() {\n                this.loadStudyplans();\n            },\n\n            methods: {\n                call_args(o) {\n                    const args = {};\n                    if (typeof o == 'object' && !Array.isArray(o) && o !== null) {\n                        objCopy(args,o);\n                    }\n\n                    if(this.verified_type == \"invited\") {\n                        args[\"invitekey\"] = this.invitekey;\n                    } else if(this.verified_type == \"other\") {\n                        args[\"userid\"] = this.userid;\n                    } \n                    return args;\n                },\n                loadStudyplans() {\n                    const self = this;\n                    this.loading = true;\n                    call([{\n                        methodname: `local_treestudyplan_list_${this.verified_type}_studyplans`,\n                        args: this.call_args(),\n                    }])[0].done(function(response){\n                        debug.info(\"Studyplans:\",response);\n\n                        const plans = { future: [], present: [], past: [], };\n\n                        for (const ix in response) {\n                            const plan = response[ix];\n                            const timing = TSComponents.studyplanTiming(plan);\n                            plans[timing].push(plan);\n                        }\n\n                        for (const ix in plans) {\n                            debug.info(ix, plans[ix]);\n                            plans[ix].sort((a,b) => {\n                                const t = new Date(b.startdate).getTime() - new Date(a.startdate).getTime();\n                                if (t == 0) {\n                                    // sort by name if timing is equal\n                                    t = a.name.localeCompare(b.name);\n                                }\n                                return t;\n                            });\n                        }\n\n                        self.studyplans = plans;\n                        self.loading = false;\n\n                        if (self.studyplans.present.length == 1) {\n                            // Directly show the current study plan if it's the only one\n                            self.selectStudyplan(self.studyplans.present[0]);\n                        } else {\n                            // If there is but a single studyplan, select it anyway, even if it is not current...\n                            if (this.studyplancount == 1) {\n                                if(self.studyplans.future.lengh > 0) {\n                                    self.selectStudyplan(self.studyplans.future[0]);\n                                } else {\n                                    self.selectStudyplan(self.studyplans.past[0]);\n                                }\n                            }\n                        }\n\n                    }).fail(notification.exception);\n                },\n                selectStudyplan(plan) {\n                    const self = this;\n                    this.loadingstudyplan = true;\n                    call([{\n                        methodname: `local_treestudyplan_get_${this.verified_type}_studyplan`,\n                        args: this.call_args({\n                            studyplanid: plan.id,\n                        }),\n                    }])[0].done(function(response){\n                        debug.info(\"Detailed studyplan:\",response);\n                        self.selectedstudyplan = ProcessStudyplan(response);\n                        self.loadingstudyplan = false;\n                    }).fail(notification.exception);\n                },\n                deselectStudyplan() {\n                    this.selectedstudyplan = null;\n                    this.loadStudyplans(); // Reload the list of studyplans.\n                }\n            },\n            template: `\n            <div class='t-studyplan-container r-report-tabs'>\n                <div v-if='loading' class=\"vue-loader spinner-border text-primary\" role=\"status\"></div>\n                <template v-else>\n                    <div v-if='!loadingstudyplan && selectedstudyplan'>\n                        <div class=\"mb-2\">\n                            <a href='#' @click='deselectStudyplan'><h5 class=\"d-inline\"><i class=\"fa fa-chevron-left\"></i> {{ text.back }}</h5></a>\n                            <h4 class=\"d-inline ml-3\">{{ selectedstudyplan.name}}\n                            <s-studyplan-details \n                                class=\"mb-2\"\n                                size=\"sm\"\n                                v-model=\"selectedstudyplan\" \n                                v-if=\"selectedstudyplan.description\"\n                            ><i class='fa fa-info-circle'></i></s-studyplan-details></h4>\n                        </div>\n                        <r-studyplan\n                            v-model='selectedstudyplan'\n                            :guestmode='guestmode'\n                            :teachermode='teachermode'\n                        ></r-studyplan>\n                    </div>\n                    <div v-else-if='loadingstudyplan' class=\"vue-loader spinner-border text-primary\" role=\"status\">\n                        <span class=\"sr-only\">{{ text.loading }}</span>\n                    </div>\n                    <div v-else class='t-studyplan-notselected'>\n                        <template v-for=\"timing in ['present', 'past', 'future']\">\n                            <template v-if=\"studyplans[timing].length > 0\">\n                                <h4>{{ text[\"studyplan_\"+timing]}}:</h4>\n                                <b-card-group deck>\n                                    <s-studyplan-card\n                                        v-for='(studyplan, planindex) in studyplans[timing]'\n                                        :key='studyplan.id'\n                                        v-model='studyplans[timing][planindex]'\n                                        open\n                                        @open='selectStudyplan(studyplan)'\n                                        ></s-studyplan-card>\n                                </b-card-group>\n                            </template>\n                        </template>\n                    </div>\n                </template>\n            </div>\n            `,\n        });\n\n        Vue.component('r-studyplan', {\n            props: {\n                value: {\n                    type: Object,\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                    selectedpageindex: 0,\n                    text: strings.pageinfo,\n                };\n            },\n            computed: {\n\n                selectedpage() {\n                    return this.value.pages[this.selectedpageindex];\n                },\n            },\n            methods: {\n                pageduration(page){\n                    return format_date(page.startdate,false) + \" - \" + format_date(page.enddate,false);\n                },\n                columns(page) {\n                    return 1+ (page.periods * 2);\n                },\n                columns_stylerule(page) {\n                    // Uses css variables, so width for slots and filters can be configured in css\n                    let s = \"grid-template-columns: var(--studyplan-filter-width)\"; // use css variable here\n                    for(let i=0; i<page.periods;i++){\n                        s+= \" var(--studyplan-course-width) var(--studyplan-filter-width)\";\n                    }\n                    return s+\";\";\n                },\n                countLineLayers(line,page){\n                    let maxLayer = -1;\n                    for(let i = 0; i <= page.periods; i++){\n                        const slot = line.slots[i];\n                        // Determine the amount of used layers in a studyline slit\n                        for(const ix in line.slots[i].courses){\n                            const item = line.slots[i].courses[ix];\n                            if(item.layer > maxLayer){\n                                maxLayer = item.layer;\n                            }\n                        }\n                        for(const ix in line.slots[i].filters){\n                            const item = line.slots[i].filters[ix];\n                            if(item.layer > maxLayer){\n                                maxLayer = item.layer;\n                            }\n                        }\n                    }\n                    return (maxLayer >= 0)?(maxLayer+1):1;\n                },\n                showslot(page,line,index, layeridx, type){\n                    // check if the slot should be hidden because a previous slot has an item with a span\n                    // so big that it hides this slot\n                    const forGradable = (type == 'gradable')?true:false;\n                    const periods = page.periods;\n                    let show = true;\n                    for(let i = 0; i < periods; i++){\n                        if(line.slots[index-i] && line.slots[index-i].courses){\n                            const list = line.slots[index-i].courses;\n                            for(const ix in list){ // Really wish that 'for of' would work with the minifier moodle uses\n                                const item = list[ix];\n                                if(item.layer == layeridx){\n                                    if(forGradable){\n                                        if(i > 0 && (item.span - i) > 0){\n                                            show = false;\n                                        }\n                                    } else {\n                                        if((item.span - i) >  1){\n                                            show = false;\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n\n                    return show;\n                },\n                selectedpageChanged(newTabIndex,prevTabIndex) {\n                    \n                    ItemEventBus.$emit('redrawLines', null);\n                    scrollCurrentIntoView(this.value.id);\n                }\n            },\n            mounted() {\n                scrollCurrentIntoView(this.value.id);\n                this.$root.$emit('redrawLines');\n            },\n            updated() {\n                scrollCurrentIntoView(this.value.id);\n                ItemEventBus.$emit('lineHeightChange', null);\n                this.$root.$emit('redrawLines');\n                ItemEventBus.$emit('redrawLines');\n            },\n            template: `\n            <div>\n            <b-card no-body>\n                <b-tabs \n                    v-model='selectedpageindex' \n                    @activate-tab='selectedpageChanged'\n                    content-class=\"mt-1\">\n                    <b-tab\n                        \n                        v-for=\"(page,pageindex) in value.pages\"\n                        :key=\"page.id\"\n                        :title-item-class=\"'s-studyplanpage-tab '+ page.timing\"\n                        ><template #title>\n                            <span v-b-tooltip.hover :title='page.fullname'>{{page.shortname}}</span>\n                            <a href=\"#\" v-b-modal=\"'studyplanpage-info-'+page.id\" class='text-info'\n                             v-if='pageindex == selectedpageindex'\n                            ><i class='fa fa-info-circle'></i></a>\n                        </template>\n                        \n                        <b-modal\n                            :id=\"'studyplanpage-info-'+page.id\"\n                            scrollable\n                            ok-only\n                            >\n                            <template #modal-title>\n                                {{page.fullname}}\n                            </template>\n                            <b-container>\n                                <b-row>\n                                    <b-col cols=\"4\"><b>{{ text.shortname}}</b></b-col>\n                                    <b-col cols=\"8\">\n                                        {{ page.shortname }}\n                                    </b-col>\n                                </b-row>\n                                <b-row>\n                                    <b-col cols=\"4\"><b>{{ text.duration}}</b></b-col>\n                                    <b-col cols=\"8\">\n                                        {{ pageduration(page) }}\n                                    </b-col>\n                                </b-row>\n                                <b-row v-if=\"page.description\">\n                                    <b-col cols=\"12\"><b>{{ text.description}}</b></b-col>\n                                </b-row>\n                                <b-row v-if=\"page.description\">\n                                    <b-col cols=\"12\">\n                                        <span v-html=\"page.description\"></span>\n                                    </b-col>\n                                </b-row>\n                            </b-container>\n                        </b-modal>\n                        <div v-if=\"page.studylines.length > 0\" class='r-studyplan-content'>\n                            <!-- First paint the headings-->\n                            <div class='r-studyplan-headings'\n                                ><s-studyline-header-heading :identifier=\"Number(page.id)\"></s-studyline-header-heading>\n                                <r-studyline-heading  v-for=\"(line,lineindex) in page.studylines\"\n                                    :key=\"line.id\"\n                                    v-model=\"page.studylines[lineindex]\"\n                                    :layers='countLineLayers(page,line)+1'\n                                    :class=\" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )\n                                            + ((lineindex==0)?' first ':' ')\n                                            + ((lineindex==page.studylines.length-1)?' last ':' ')\"\n                                ></r-studyline-heading\n                            ></div>\n                            <!-- Next, paint all the cells in the scrollable -->\n                            <div class=\"r-studyplan-scrollable\" >\n                                <div class=\"r-studyplan-timeline\" :style=\"columns_stylerule(page)\">\n                                <!-- add period information -->\n                                <template v-for=\"(n,index) in (page.periods+1)\">\n                                    <s-studyline-header-period\n                                        v-if=\"index > 0\"\n                                        v-model=\"page.perioddesc[index-1]\"\n                                        :identifier=\"Number(page.id)\"\n                                        ></s-studyline-header-period>\n                                    <div class=\"s-studyline-header-filter\"></div>\n                                </template>\n\n                                <!-- Line by line add the items -->\n                                <!-- The grid layout handles putting it in rows and columns -->\n                                <template v-for=\"(line,lineindex) in page.studylines\"\n                                    ><template v-for=\"(layernr,layeridx) in countLineLayers(page,line)\"\n                                        ><template v-for=\"(n,index) in (page.periods+1)\"\n                                            ><r-studyline-slot\n                                                v-if=\"index > 0 && showslot(page,line, index, layeridx, 'gradable')\"\n                                                type='gradable'\n                                                v-model=\"line.slots[index].courses\"\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                                                :guestmode='guestmode'\n                                                :teachermode='teachermode'\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                                            ></r-studyline-slot\n                                            ><r-studyline-slot\n                                                v-if=\"showslot(page,line, index, layeridx, 'gradable')\"\n                                                type='filter'\n                                                v-model=\"line.slots[index].filters\"\n                                                :teachermode='teachermode'\n                                                :key=\"'f-'+lineindex+'-'+index+'-'+layernr\"\n                                                :slotindex=\"index\"\n                                                :line=\"line\"\n                                                :plan=\"value\"\n                                                :page=\"page\"\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                                                        + ((index==page.periods)?' rightmost':'')\"\n                                                >\n                                            </r-studyline-slot\n                                        ></template\n                                    ></template\n                                ></template\n                                ></div\n                            ></div\n                        ></div>\n                    </b-tab>\n                </b-tabs>\n            </b-card>\n            </div>\n            `,\n        });\n\n        /*\n        * R-STUDYLINE-HEADER\n        */\n        Vue.component('r-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){\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.mainEl && (lineid == this.value.id || lineid === null)){\n                        const items = document.querySelectorAll(\n                            `.r-studyline-slot-0[data-studyline='${this.value.id}']`);\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.mainEl.style.height = heightStyle;\n                    }\n                }\n            },\n            template: `\n            <div class=\"r-studyline r-studyline-heading \"\n                :data-studyline=\"value.id\" ref=\"mainEl\"\n                ><div class=\"r-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"r-studyline-title\">\n                    <abbr v-b-tooltip.hover :title=\"value.name\">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            `,\n        });\n\n        Vue.component('r-studyline-slot', {\n            props: {\n                value: {\n                    type: Array, // item to display\n                    default(){ return [];},\n                },\n                type : {\n                    type: String,\n                    default: 'gradable',\n                },\n                slotindex : {\n                    type: Number,\n                    default: 0,\n                },\n                line : {\n                    type: Object,\n                    default(){ return null;},\n                },\n                layer : {\n                    type: Number,\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;},\n                },\n                page: {\n                    type: Object,\n                    default(){ return null;},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                },\n                period: {\n                    type: Object,\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.sizeElement){\n                            const height = self.$refs.sizeElement.getBoundingClientRect().height;\n                            ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, height);\n                        }\n                    }).observe(self.$refs.sizeElement);\n                }\n            },\n            computed: {\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                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                };\n            },\n            methods: {\n\n            },\n            template: `\n            <div :class=\"  'r-studyline-slot ' + type + ' ' + (current?'current ':' ')\n                         + 'r-studyline-slot-' + slotindex + ' '\n                         + ((slotindex==0)?'r-studyline-firstcolumn ':' ')\"\n                :data-studyline=\"line.id\" ref=\"sizeElement\"\n                :style='spanCss'\n                ><div class=\"r-slot-item\" v-if=\"item\"\n                    ><r-item\n                        v-model=\"item\"\n                        :plan=\"plan\"\n                        :guestmode='guestmode'\n                        :teachermode='teachermode'></r-item\n                    ></div\n                ></r-item\n            ></div>\n            `,\n        });\n\n\n        Vue.component('r-item', {\n            props: {\n                value :{\n                    type: Object,\n                    default: function(){ return null;},\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;}\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                    lines: [],\n                };\n            },\n            methods: {\n                lineColor(){\n                    if(this.teachermode){\n                        return \"var(--gray)\";\n                    }\n                    else{\n                        switch(this.value.completion){\n                            default: // \"incomplete\"\n                                return \"var(--gray)\";\n                            case \"failed\":\n                                return \"var(--danger)\";\n                            case \"progress\":\n                                return \"var(--warning)\";\n                            case \"completed\":\n                                return \"var(--success)\";\n                            case \"good\":\n                                return \"var(--info)\";\n                            case \"excellent\":\n                                return \"var(--blue)\";\n                        }\n                    }\n                },\n                redrawLine(conn){\n                    let lineColor = this.lineColor();\n                    // draw new line...\n                    let start = document.getElementById('studyitem-'+conn.from_id);\n                    let 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\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                redrawLines(){\n                    // Clean all old lines\n                    for(let ix in this.lines){\n                        let lineinfo = this.lines[ix];\n                        if(lineinfo && lineinfo.line){\n                            lineinfo.line.remove();\n                            lineinfo.line = undefined;\n                        }\n                    }\n\n                    // Create new lines\n                    for(let i in this.value.connections.out){\n                        let conn = this.value.connections.out[i];\n                        this.redrawLine(conn);\n                    }\n                },\n                onWindowResize(){\n                    this.redrawLines();\n                },\n                onRedrawLines(){\n                    this.redrawLines();\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 ['start','junction','finish'].includes(this.value.type);\n                }\n            },\n            created(){\n                ItemEventBus.$on('redrawLines', this.onRedrawLines);\n            },\n            mounted(){\n                // Initialize connection lines when mounting\n\n                this.redrawLines();\n                setTimeout(()=>{\n                    this.redrawLines();\n                },50);\n\n                // Add resize event listener\n                window.addEventListener('resize',this.onWindowResize);\n            },\n            beforeDestroy(){\n                for(let i in this.value.connections.out){\n                    let conn = this.value.connections.out[i];\n                    this.removeLine(conn);\n                }\n                // Remove resize event listener\n                window.removeEventListener('resize',this.onWindowResize);\n                ItemEventBus.$off('redrawLines', this.onRedrawLines);\n            },\n            beforeUpdate(){\n            },\n            updated(){\n                if(!this.dummy) {\n                    this.redrawLines();\n                }\n            },\n            template: `\n            <div class=\"r-item-base\" :id=\"'studyitem-'+value.id\" :data-x='value.type'>\n                <r-item-competency    v-if=\"value.type == 'competency'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-competency>\n                <r-item-course        v-if=\"value.type == 'course' && !teachermode\" :plan=\"plan\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-course>\n                <r-item-teachercourse v-if=\"value.type == 'course' && teachermode\" :plan=\"plan\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-teachercourse>\n                <r-item-junction      v-if=\"value.type == 'junction'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-junction>\n                <r-item-start         v-if=\"value.type == 'start'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-start>\n                <r-item-finish        v-if=\"value.type == 'finish'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-finish>\n                <r-item-badge         v-if=\"value.type == 'badge'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-badge>\n                <r-item-invalid       v-if=\"value.type == 'invalid' && teachermode\"\n                    v-model=\"value\" ></r-item-invalid>\n            </div>\n            `,\n        });\n\n        Vue.component('r-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            <div class=\"r-item-invalid\">\n            <b-card no-body class=\"r-item-invalid\">\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span class=\"r-timing-indicator timing-invalid\"></span>\n                    </b-col>\n                    <b-col md=\"11\">\n                        <b-card-body class=\"align-items-center\">\n                            <i class=\"fa fa-exclamation\"></i> {{ text.error }}\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            `,\n        });\n\n        //TAG: Item Course\n        Vue.component('r-item-course', {\n            props: {\n                value :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                teachermode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;}\n                }\n            },\n            data() {\n                return {\n                    text: strings.course,\n                };\n            },\n            computed: {\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            created(){\n            },\n            methods: {\n                completion_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                        case \"pending\":\n                            return \"question-circle\";\n                        case \"failed\":\n                            return \"times-circle\";\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"completed\":\n                            return \"check-circle\";\n                        case \"good\":\n                            return \"check-circle\";\n                        case \"excellent\":\n                            return \"check-circle\";\n                    }\n                },\n                circle_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return null;\n                        case \"failed\":\n                            return \"times\";\n                        case \"progress\":\n                            return \"exclamation\";\n                        case \"completed\":\n                            return \"check\";\n                        case \"good\":\n                            return \"check\";\n                        case \"excellent\":\n                            return \"check\";\n                    }\n                },\n            },\n            template: `\n            <div :class=\"'r-item-competency completion-'+value.completion\">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'r-timing-indicator timing-'+value.course.timing\"></span>\n                    </b-col>\n                    <b-col md=\"11\" class=\"align-items-center\">\n                        <b-card-body >\n                            <template v-if='!value.course.enrolled'>\n                                <i v-b-popover.top\n                                    class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                    :title=\"text.student_not_tracked\"></i>\n                            </template>\n                            <template v-else-if='value.course.completion'>\n                                <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                    :value='value.course.completion.progress'\n                                    :max='value.course.completion.count'\n                                    :min='0'\n                                    :class=\"'r-course-result r-completion-'+value.completion\"\n                                    :icon='circle_icon(value.completion)'\n                                    :title=\"text['completion_'+value.completion]\"\n                                ></r-progress-circle>\n                                <i v-else v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <template v-else>\n                                <i v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <a  v-b-modal=\"'r-item-course-details-'+value.id\"\n                                :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):'#'\"\n                                @click.prevent.stop=''\n                                >{{ value.course.displayname }}</i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n\n                <b-modal\n                    :id=\"'r-item-course-details-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):undefined\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(\" / \")}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div class=\"r-completion-detail-header\">\n                                <template v-if='!value.course.enrolled'>\n                                    {{text.not_enrolled}}\n                                    <i v-b-popover.top\n                                        class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                        :title=\"text.student_not_tracked\"></i>\n                                </template>\n                                <template v-else-if='value.course.completion'>\n                                    {{text['completion_'+value.completion]}}\n                                    <r-progress-circle v-if='[\"failed\",\"progress\",\"incomplete\"].includes(value.completion)'\n                                        :value='value.course.completion.progress'\n                                        :max='value.course.completion.count'\n                                        :min='0'\n                                        :title=\"text['completion_'+value.completion]\"\n                                        :class=\"'r-progress-circle-popup r-completion-'+value.completion\"\n                                        :icon='circle_icon(value.completion)'\n                                    ></r-progress-circle\n                                    ><i v-else v-b-popover.top\n                                    :class=\"'fa fa-'+completion_icon(value.completion)+\n                                            ' r-progress-icon-popup r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                                <template v-else>\n                                    {{text['completion_'+value.completion]}}\n                                    <i  :class=\"'fa fa-'+completion_icon(value.completion)+' r-completion-'+value.completion\"\n                                        :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                            </div>\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-studentgrades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value'\n                        :guestmode='guestmode'></r-item-studentgrades>\n                    <r-item-studentcompletion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        :guestmode='guestmode'></r-item-studentcompletion>\n                </b-modal>\n            </b-card></div>\n            `,\n        });\n\n        //TAG: Selected activities dispaly\n        Vue.component('r-item-studentgrades',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n            },\n            data() {\n                return {\n                    text: strings.course,\n                };\n            },\n            computed: {\n                pendingsubmission(){\n                    let result = false;\n                    for(const ix in this.value.course.grades){\n                        const g = this.value.course.grades[ix];\n                        if(g.pendingsubmission){\n                            result = true;\n                            break;\n                        }\n                    }\n                    return result;\n                },\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            },\n            methods: {\n                completion_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                        case \"pending\":\n                            return \"question-circle\";\n                        case \"failed\":\n                            return \"times-circle\";\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"completed\":\n                            return \"check-circle\";\n                        case \"good\":\n                            return \"check-circle\";\n                        case \"excellent\":\n                            return \"check-circle\";\n                    }\n                },\n            },\n            template: `\n            <table class=\"r-item-course-grade-details\">\n                <tr v-for=\"g in value.course.grades\">\n                    <td><span class=\"r-activity-icon\" :title=\"g.typename\" v-html=\"g.icon\"></span\n                        ><a\n                        :href=\"(!guestmode)?(g.link):undefined\" target=\"_blank\"><span v-html=\"g.name\"></span></a>\n                        <abbr v-if=\"useRequiredGrades && g.required\" :title=\"text.required_goal\"\n                            :class=\"'s-required ' + g.completion\"\n                            ><i class='fa fa-asterisk' ></i\n                        ></abbr>\n                    </td>\n                    <td><span :class=\"' r-completion-'+g.completion\">{{g.grade}}</span></td>\n                    <td><i :class=\"'fa fa-'+completion_icon(g.completion)+' r-completion-'+g.completion\"\n                        :title=\"text['completion_'+g.completion]\"></i>\n                        <i v-if='g.pendingsubmission' :title=\"text['completion_pending']\"\n                            class=\"r-pendingsubmission fa fa-clock-o\"></i></td>\n                    <td v-if=\"g.feedback\">\n                        <a  v-b-modal=\"'r-grade-feedback-'+g.id\"\n                            href=\"#\"\n                        >{{ text[\"view_feedback\"]}}</a>\n                        <b-modal\n                            :id=\"'r-grade-feedback-'+g.id\"\n                            size=\"sm\"\n                            ok-only\n                            centered\n                            scrollable\n                        >\n                            <template #modal-header>\n                                <h2><i class=\"fa fa-graduation-cap\"></i>{{ value.course.fullname }}</h2><br>\n                                <span class=\"r-activity-icon\" :title=\"g.typename\" v-html=\"g.icon\"></span>{{g.name}}\n                            </template>\n                            <span v-html=\"g.feedback\"></span>\n                        </b-modal>\n                    </td>\n                </tr>\n            </table>\n            `,\n        });\n\n        //TAG: Core completion version of student course info\n        Vue.component('r-item-studentcompletion',{\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            },\n            computed: {\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                completion_tag(cgroup){\n                    return cgroup.completion?'completed':'incomplete';\n                },\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                requirementHTML(requirements) {\n                    const rqs = requirements.split(/, */);\n                    let html = \"\";\n                    for(const ix in rqs) {\n                        const rq = rqs[ix];\n                        html += `${rq}<br>`;\n                    }\n                    return html;\n                },\n                addTargetBlank(html) {\n                    const m = /^([^<]*\\< *a +)(.*)/.exec(html);\n                    if(m){\n                        return `${m[1]} target=\"_blank\" ${m[2]}`;\n                    } else {\n                        return html;\n                    }\n                }\n            },\n            template: `\n            <table class=\"r-item-course-grade-details\">\n                <tr v-if=\"hasCompletions\">\n                    <td colspan='2'\n                        ><span v-if=\"value.conditions.length <= 1\">{{ text.aggregation_overall_one }}</span\n                        ><span v-else if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                        ><span v-else>{{ text.aggregation_overall_any }}</span\n                    ></td>\n                </tr>\n                <tr v-else>\n                    <td colspan='2'>{{text.completion_not_configured}}!\n                    </td>\n                </tr>\n                <template v-for='cgroup in value.conditions' v-if='value.enabled && value.tracked'>\n                    <tr>\n                        <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                        ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span\n                        ><span v-else>{{ text.aggregation_one }}</span>\n                        {{ cgroup.title.toLowerCase() }}:\n                        </th>\n                        <th><r-progress-circle v-if=\"cgroup.progress < cgroup.count\"\n                                :value='cgroup.progress'\n                                :max='cgroup.count'\n                                :class=\"'r-completion-'+cgroup.status\"\n                                :title=\"text['completion_'+cgroup.status]\"\n                            ></r-progress-circle>\n                            <i v-else :class=\"'fa fa-check-circle r-completion-'+cgroup.status\"></i>\n                            </th>\n                    </tr>\n                    <tr v-for='ci in cgroup.items'>\n                        <td><span v-if='guestmode'>{{ci.title}}</span>\n                            <span v-else v-html='addTargetBlank(ci.details.criteria)'></span>\n                            <a href=\"#\" v-b-tooltip.click.hover.right.html=\"{ customClass: 'r-tooltip ' + ci.status}\"\n                                :title=\"requirementHTML(ci.details.requirement)\"\n                                class=\"text-primary\"><i  v-if=\"ci.details.requirement\"\n                                class='fa fa-question-circle'\n                                ></i></a>\n                        <td\n                            ><span :class=\"' r-completion-'+ci.status\">{{ci.grade}}</span>\n                            <span v-if=\"ci.warning\"\n                                ><i class=\"text-primary fa fa-exclamation-triangle\"\n                                    v-b-tooltip.hover.right.click=\"{ customClass: 'r-tooltip info' }\"\n                                    :title=\"ci.warning\"\n                                ></i\n                            ></span\n                        ></td>\n                        <td><i :class=\"'fa fa-'+completion_icon(ci.status)+' r-completion-'+ci.status\"\n                            :title=\"text['completion_'+ci.status]\"></i>\n                            <i v-if='ci.pending' :title=\"text['completion_pending']\"\n                                class=\"r-pendingsubmission fa fa-clock-o\"></i>\n                        </td>\n                        <td v-if=\"ci.feedback\">\n                            <a  v-b-modal=\"'r-grade-feedback-'+ci.id\"\n                                href=\"#\"\n                            >{{ text[\"view_feedback\"]}}</a>\n                            <b-modal\n                                :id=\"'r-grade-feedback-'+ci.id\"\n                                size=\"sm\"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class=\"fa fa-graduation-cap\"></i>{{ course.fullname }}</h2><br>\n                                    <span class=\"r-activity-icon\" :title=\"ci.typename\" v-html=\"ci.icon\"></span>{{ci.name}}\n                                </template>\n                                <span v-html=\"ci.feedback\"></span>\n                            </b-modal>\n                        </td>\n                    </tr>\n                </template>\n                <template v-else>\n                    <tr v-if='! value.enabled'>\n                        <td colspan='4'>{{text.completion_not_enabled}}</td>\n                    </tr>\n                    <tr v-else>\n                        <td colspan='4'>{{text.student_not_tracked}}</td>\n                    </tr>\n                </template>\n            </table>\n            `,\n        });\n\n        //TAG: Teacher course\n        Vue.component('r-item-teachercourse', {\n            props: {\n                value :{\n                    type: Object,\n                    default(){ return null;}\n                },\n                guestmode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                teachermode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;}\n                }\n            },\n            data() {\n                return {\n                    text: strings.teachercourse,\n                    txt: {\n                        grading: strings.grading,\n                    }\n                };\n            },\n            computed: {\n                course_grading_needed(){\n                    return this.course_grading_state();\n                },\n                course_grading_icon(){\n                    return this.determine_grading_icon(this.course_grading_state());\n                },\n                filtered_grades(){\n                    return this.value.course.grades.filter(g => g.selected);\n                },\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                isCompletable() {\n                    let completable = false;\n                    if(this.value.course.completion){\n                        if(this.value.course.completion.conditions.length > 0){\n                            completable = true;\n                        }\n                    } else if (this.value.course.grades){\n                        if(this.value.course.grades.length > 0){\n                            completable = true;\n                        }\n                    }\n\n                    return completable;\n                },\n                progress_circle() { //INFO:\n                    const status = {\n                        students: 0,\n                        completed: 0,\n                        completed_pass: 0,\n                        completed_fail: 0,\n                        ungraded: 0,\n                    };\n\n                    if(this.value.course.completion){\n                        for(const cond of this.value.course.completion.conditions){\n                            for(const itm of cond.items){\n                                if(itm.progress){\n                                    status.students += itm.progress.students;\n                                    status.completed += itm.progress.completed;\n                                    status.completed_pass += itm.progress.completed_pass;\n                                    status.completed_fail += itm.progress.completed_fail;\n                                    status.ungraded += itm.progress.ungraded;\n                                }\n                            }\n                        }\n\n                    } else if (this.value.course.grades){\n                        for( const g of this.value.course.grades){\n                            if(g.grading){\n                                status.students += g.grading.students;\n                                status.completed += g.grading.completed;\n                                status.completed_pass += g.grading.completed_pass;\n                                status.completed_fail += g.grading.completed_fail;\n                                status.ungraded += g.grading.ungraded;\n                            }\n                        }\n                    }\n\n                    return status;\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            created(){\n\n            },\n            methods: {\n                course_grading_state(){\n                    let ungraded = 0;\n                    let unknown = 0;\n                    let graded = 0;\n                    let allgraded = 0;\n                    const grades = this.filtered_grades;\n\n                    if(!Array.isArray(grades) || grades == 0){\n                        return 'nogrades';\n                    }\n\n                    for(const ix in grades){\n                        const grade = grades[ix];\n                        if(grade.grading){\n                            if(Number(grade.grading.ungraded) > 0){\n                                ungraded++;\n                            }\n                            else if(Number(grade.grading.graded) > 0) {\n                                if(Number(grade.grading.graded) == Number(grade.grading.students)){\n                                    allgraded++;\n                                } else {\n                                    graded++;\n                                }\n                            }\n                        } else {\n                            unknown = true;\n                        }\n                    }\n\n                    if(ungraded > 0){\n                        return 'ungraded';\n                    } else if(unknown) {\n                        return 'unknown';\n                    } else if(graded){\n                        return 'graded';\n                    } else if(allgraded){\n                        return 'allgraded';\n                    } else {\n                        return 'unsubmitted';\n                    }\n                },\n                determine_grading_icon(gradingstate){\n                    switch(gradingstate){\n                        default: // \"nogrades\":\n                            return \"circle-o\";\n                        case \"ungraded\":\n                            return \"exclamation-circle\";\n                        case \"unknown\":\n                            return \"question-circle-o\";\n                        case \"graded\":\n                            return \"check\";\n                        case \"allgraded\":\n                            return \"check\";\n                        case \"unsubmitted\":\n                            return \"dot-circle-o\";\n                    }\n                },\n            },\n            template: `\n            <div  :class=\"'r-item-competency '+ (value.course.amteacher?'r-course-am-teacher':'')\">\n            <b-card no-body>\n                <div class='d-flex flex-wrap mr-0 ml-0'>\n                    <div>\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'r-timing-indicator timing-'+value.course.timing\"></span>\n                    </div>\n                    <div class=\"flex-fill align-items-center\">\n                        <b-card-body>\n                            <a  v-b-modal=\"'r-item-course-details-'+value.id\"\n                                :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):'#'\"\n                                @click.prevent.stop=''\n                                >{{ value.course.displayname }}</i></a>\n                            <r-completion-circle class=\"r-course-graded\" :disabled=\"!isCompletable\"\n                                v-model=\"progress_circle\"></r-completion-circle>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal\n                    v-if=\"true\"\n                    :id=\"'r-item-course-details-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):undefined\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a>\n                                <r-item-teacher-gradepicker v-model=\"value\"\n                                    v-if=\"value.course.grades && value.course.grades.length > 0\"\n                                    :useRequiredGrades=\"useRequiredGrades\"\n                                    :plan=\"plan\"\n                                ></r-item-teacher-gradepicker>\n                                <a v-if='!!value.course.completion && value.course.amteacher'\n                                    :href=\"'/course/completion.php?id='+value.course.id\"  target=\"_blank\"\n                                    :title=\"text.configure_completion\"><i class=\"fa fa-gear\"></i></a>\n                            </h1>\n                            {{ value.course.context.path.join(\" / \") }}\n                            <div class='mt-1 text-info'>\n                            <span v-if='value.course.numenrolled != 1'>{{ value.course.numenrolled }} {{ text.students_from_plan_enrolled }}</span>\n                              <span v-else> 1 {{ text.student_from_plan_enrolled }} </span>\n                            </div>\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div class=\"r-completion-detail-header\">\n                                <r-completion-circle class=\"r-progress-circle-popup\" :disabled=\"!isCompletable\"\n                                    v-model=\"progress_circle\"></r-completion-circle>\n                            </div>\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{ text['coursetiming_'+value.course.timing] }}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-teachergrades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value.course'\n                        :useRequiredGrades=\"useRequiredGrades\"\n                        ></r-item-teachergrades>\n                    <r-item-teachercompletion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        ></r-item-teachercompletion>\n                </b-modal>\n\n            </b-card>\n            </div>\n            `,\n        });\n\n\n    //TAG: Select activities to use in grade overview\n    Vue.component('r-item-teacher-gradepicker', {\n        props: {\n            value : {\n                type: Object, // Item\n                default: function(){ return {};},\n            },\n            useRequiredGrades: {\n                type: Boolean,\n                default(){ return null;}\n            }\n        },\n        data() {\n            return {\n                text: strings.teachercourse,\n            };\n        },\n        computed: {\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        template: `\n            <a  v-if=\"value.course.canselectgradables\" href='#'\n                                        v-b-modal=\"'r-item-course-config-'+value.id\"\n                                        @click.prevent.stop=''\n                                        ><i class='fa fa-cog'></i>\n                <b-modal v-if='value.course.canselectgradables'\n                    :id=\"'r-item-course-config-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    ok-only\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"'/course/view.php?id='+value.course.id\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(\" / \")}} / {{value.course.displayname}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ value.course.startdate }} - {{ value.course.enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <b-form-group\n                        :label=\"text.select_grades\"\n                        ><ul class=\"t-item-module-children\">\n                            <li class=\"t-item-course-gradeinfo\">\n                                <span class='t-item-course-chk-lbl'>{{text.grade_include}}</span\n                                ><span v-if=\"useRequiredGrades\"  class='t-item-course-chk-lbl'>{{text.grade_require}}</span>\n                            </li>\n                            <li class=\"t-item-course-gradeinfo\" v-for=\"g in value.course.grades\">\n                                <b-form-checkbox inline\n                                    @change=\"includeChanged($event,g)\" v-model=\"g.selected\"\n                                    ></b-form-checkbox>\n                                <b-form-checkbox v-if=\"useRequiredGrades\" inline :disabled=\"!g.selected\"\n                                    @change=\"requiredChanged($event,g)\" v-model=\"g.required\"\n                                    ></b-form-checkbox>\n                                <span :title=\"g.typename\" v-html=\"g.icon\"></span><a\n                                    :href=\"g.link\" target=\"_blank\">{{g.name}}</a>\n                                <s-edit-mod\n                                    :title=\"value.course.fullname\"\n                                    @saved=\"(fd) => g.name = fd.get('name')\"\n                                    v-if=\"g.cmid > 0\"\n                                    :cmid=\"g.cmid\"\n                                    :coursectxid=\"value.course.ctxid\"\n                                    genericonly></s-edit-mod>\n                            </li>\n                        </ul>\n                    </b-form-group>\n                </b-modal>\n            </a>\n        `,\n    });\n\n\n\n    //TAG: Selected activities dispaly\n    Vue.component('r-item-teachergrades',{\n        props: {\n            value : {\n                type: Object,\n                default: function(){ return {};},\n            },\n            useRequiredGrades: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        data() {\n            return {\n                text: strings.teachercourse,\n                txt: {\n                    grading: strings.grading,\n                }\n            };\n        },\n        computed: {\n            pendingsubmission(){\n                let result = false;\n                for(const ix in this.value.grades){\n                    const g = this.value.grades[ix];\n                    if(g.pendingsubmission){\n                        result = true;\n                        break;\n                    }\n                }\n                return result;\n            },\n            filtered_grades(){\n                return this.value.grades.filter(g => g.selected);\n            },\n        },\n        methods: {\n            determine_grading_icon(gradingstate){\n                switch(gradingstate){\n                    default: // \"nogrades\":\n                        return \"circle-o\";\n                    case \"ungraded\":\n                        return \"exclamation-circle\";\n                    case \"unknown\":\n                        return \"question-circle-o\";\n                    case \"graded\":\n                        return \"check\";\n                    case \"allgraded\":\n                        return \"check\";\n                    case \"unsubmitted\":\n                        return \"dot-circle-o\";\n                }\n            },\n            grading_icon(grade){\n                return this.determine_grading_icon(this.is_grading_needed(grade));\n            },\n            is_grading_needed(grade){\n                if(grade.grading){\n                    if(grade.grading.ungraded){\n                        return 'ungraded';\n                    }\n                    else if(grade.grading.completed_pass || grade.grading.completed || grade.grading.completed_fail) {\n                        if(Number(grade.grading.completed) + Number(grade.grading.completed_pass)\n                            + Number(grade.grading.completed_fail)\n                             == Number(grade.grading.students)){\n                            return 'allgraded';\n                        }\n                        else {\n                            return 'graded';\n                        }\n                    }\n                    else {\n                        return 'unsubmitted';\n                    }\n                } else {\n                    return 'unknown';\n                }\n            },\n\n        },\n        template: `\n        <div>\n            <table class=\"r-item-course-grade-details\">\n                <tr v-for=\"g in filtered_grades\">\n                    <td><span class=\"r-activity-icon\" :title=\"g.typename\" v-html=\"g.icon\"></span\n                        ><a\n                        :href=\"g.gradinglink\"\n                        target=\"_blank\" :title=\"g.name\"><span v-html=\"g.name\"></span></a>\n                        <s-edit-mod\n                            :title=\"value.fullname\"\n                            @saved=\"(fd) => g.name = fd.get('name')\"\n                            v-if=\"g.cmid > 0\"\n                            :cmid=\"g.cmid\"\n                            :coursectxid=\"value.ctxid\"\n                            genericonly></s-edit-mod>\n                        <abbr v-if=\"useRequiredGrades && g.required\" :title=\"text.required_goal\"\n                            :class=\"'s-required ' + is_grading_needed(g)\"\n                            ><i class='fa fa-asterisk' ></i\n                        ></abbr>\n                    </td>\n                    <td v-if='g.grading'\n                        ><i :class=\"'r-course-grading fa fa-'+grading_icon(g)+' r-graded-'+is_grading_needed(g)\"\n                        :title=\"txt.grading[is_grading_needed(g)]\"></i>\n                    </td>\n                    <td v-if='g.grading'>\n                        <r-completion-bar v-model=\"g.grading\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                    </td>\n                </tr>\n            </table>\n        </div>\n        `,\n    });\n\n    //TAG: Core completion version of student course info\n    Vue.component('r-item-teachercompletion',{\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            completionreport(){\n                return `${Config.wwwroot}/report/completion/index.php?course=${this.course.id}`;\n            }\n        },\n        methods: {\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        template: `\n        <table class=\"r-item-course-grade-details\">\n            <tr v-if=\"hasCompletions\">\n                <td colspan='2'\n                    ><span v-if=\"value.conditions.length <= 1\">{{ text.aggregation_overall_one }}</span\n                    ><span v-else if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any }}</span\n                ></td>\n            </tr>\n            <tr v-else>\n                <td colspan='2'>{{text.completion_not_configured}}!\n                <span v-if=\"course.amteacher\">\n                    <br><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                </span>\n                </td>\n            </tr>\n            <template v-for='cgroup in value.conditions'>\n                <tr>\n                    <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                    ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                    ><span v-else>{{ text.aggregation_any}}</span></span\n                    ><span v-else>{{ text.aggregation_one }}</span>\n                    {{ cgroup.title.toLowerCase() }}:\n                    </th>\n                </tr>\n                <tr v-for='ci in cgroup.items'>\n                    <td><span v-html='ci.details.criteria'></span>\n                        <a  href=\"#\" v-b-tooltip.click\n                            :title=\"ci.details.requirement\"\n                            class='text-info'><i  v-if=\"ci.details.requirement\"\n                            class='fa fa-question-circle'\n                            ></i></a>\n                    </td>\n                    <td>\n                        <r-completion-bar v-model=\"ci.progress\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                    </td>\n                </tr>\n            </template>\n            <tr><td colspan='2' class='pt-2'>\n                <a target=\"_blank\" :href='completionreport'>{{ text.view_completion_report}}\n                <i class='fa fa-external-link'></i></a></td></tr>\n        </table>\n        `,\n    });\n\n\n        Vue.component('r-grading-bar',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                width: {\n                    type: Number,\n                    default: 150,\n                },\n                height: {\n                    type: Number,\n                    default: 15,\n                }\n            },\n            data() {\n                return {\n                    text: strings.grading,\n                };\n            },\n            computed: {\n                width_unsubmitted() {\n                    return this.width * this.fraction_unsubmitted();\n                },\n                width_graded() {\n                    return this.width * this.fraction_graded();\n                },\n                width_ungraded() {\n                    return this.width * this.fraction_ungraded();\n                },\n                count_unsubmitted(){\n                    return (this.value.students - this.value.graded - this.value.ungraded);\n                }\n            },\n            methods: {\n                fraction_unsubmitted() {\n                    if(this.value.students > 0){\n                        return 1 - ((this.value.graded + this.value.ungraded) / this.value.students);\n                    } else {\n                        return 1;\n                    }\n                },\n                fraction_graded() {\n                    if(this.value.students > 0){\n                        return this.value.graded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_ungraded() {\n                    if(this.value.students > 0){\n                        return this.value.ungraded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n            },\n            template: `\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_graded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-graded'\n                        :title=\"text.graded+ ' (' + this.value.graded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_unsubmitted+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-unsubmitted'\n                        :title=\"text.unsubmitted + ' (' + count_unsubmitted + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            `,\n        });\n\n        Vue.component('r-completion-bar',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {\n                        students: 0,\n                        completed: 0,\n                        completed_pass: 0,\n                        completed_fail: 0,\n                        ungraded: 0,\n                    };},\n                },\n                width: {\n                    type: Number,\n                    default: 150,\n                },\n                height: {\n                    type: Number,\n                    default: 15,\n                }\n            },\n            data() {\n                return {\n                    text: strings.completion,\n                };\n            },\n            computed: {\n                width_incomplete() {\n                    return this.width * this.fraction_incomplete();\n                },\n                width_completed() {\n                    return this.width * this.fraction_completed();\n                },\n                width_completed_pass() {\n                    return this.width * this.fraction_completed_pass();\n                },\n                width_completed_fail() {\n                    return this.width * this.fraction_completed_fail();\n                },\n                width_ungraded() {\n                    return this.width * this.fraction_ungraded();\n                },\n                count_incomplete(){\n                    return (this.value.students - this.value.completed - this.value.completed_pass\n                             - this.value.completed_fail - this.value.ungraded);\n                }\n            },\n            methods: {\n                fraction_incomplete() {\n                    if(this.value.students > 0){\n                        return 1 - (\n                            (this.value.completed + this.value.completed_pass +\n                             this.value.completed_fail + this.value.ungraded) / this.value.students);\n                    } else {\n                        return 1;\n                    }\n                },\n                fraction_completed() {\n                    if(this.value.students > 0){\n                        return this.value.completed / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_pass() {\n                    if(this.value.students > 0){\n                        return this.value.completed_pass / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_fail() {\n                    if(this.value.students > 0){\n                        return this.value.completed_fail / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_ungraded() {\n                    if(this.value.students > 0){\n                        return this.value.ungraded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n            },\n            template: `\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed'\n                        :title=\"text.completed + ' (' + this.value.completed + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_pass+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-pass'\n                        :title=\"text.completed_pass + ' (' + this.value.completed_pass + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_fail+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-fail'\n                        :title=\"text.completed_fail + ' (' + this.value.completed_fail + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_incomplete+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-incomplete'\n                        :title=\"text.incomplete + ' (' + count_incomplete + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            `,\n        });\n\n        Vue.component('r-completion-circle',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {\n                        students: 10,\n                        completed: 2,\n                        completed_pass: 2,\n                        completed_fail: 2,\n                        ungraded: 2,\n                    };},\n                },\n                stroke: {\n                    type: Number,\n                    default: 0.2,\n                },\n                disabled: {\n                    type: Boolean,\n                    default: false,\n                },\n                title: {\n                    type: String,\n                    default: \"\",\n                }\n            },\n            computed: {\n                radius() {\n                    return 50 - (50*this.stroke);\n                },\n\n                arcpath_ungraded() {\n                    const begin = 0;\n                    return this.arcpath(begin,this.fraction_ungraded());\n                },\n                arcpath_completed() {\n                    const begin = this.fraction_ungraded();\n                    return this.arcpath(begin,this.fraction_completed());\n                },\n                arcpath_completed_pass() {\n                    const begin = this.fraction_ungraded()\n                                + this.fraction_completed();\n                    return this.arcpath(begin,this.fraction_completed_pass());\n                },\n                arcpath_completed_fail() {\n                    const begin = this.fraction_ungraded()\n                                + this.fraction_completed()\n                                + this.fraction_completed_pass();\n                    return this.arcpath(begin,this.fraction_completed_fail());\n                },\n                arcpath_incomplete() {\n                    const begin = this.fraction_ungraded()\n                                + this.fraction_completed()\n                                + this.fraction_completed_pass()\n                                + this.fraction_completed_fail();\n                    return this.arcpath(begin,this.fraction_incomplete());\n                },\n\n            },\n            methods: {\n                arcpath(start, end) {\n                    const r = 50 - (50*this.stroke);\n\n                    const t1  = start * 2*π;\n                    const Δ = end * 2*π;\n                    return svgarcpath([50,50],[r,r],[t1,Δ], 1.5*π);\n                },\n                fraction_incomplete() {\n                    if(this.value.students > 0){\n                        return 1 - (\n                            (this.value.completed + this.value.completed_pass +\n                                this.value.completed_fail + this.value.ungraded) / this.value.students);\n                    } else {\n                        return 1;\n                    }\n                },\n                fraction_completed() {\n                    if(this.value.students > 0){\n                        return this.value.completed / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_pass() {\n                    if(this.value.students > 0){\n                        return this.value.completed_pass / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_fail() {\n                    if(this.value.students > 0){\n                        return this.value.completed_fail / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_ungraded() {\n                    if(this.value.students > 0){\n                        return this.value.ungraded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n            },\n            template: `\n            <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 100 100\">\n                <title>{{title}}</title>\n                <circle cx=\"50\" cy=\"50\" :r=\"radius\"\n                    :style=\"'stroke-width: ' + (stroke*100)+'; stroke: #ccc; fill: none;'\"/>\n                <path :d=\"arcpath_ungraded\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--warning); fill: none;'\"/>\n                <path :d=\"arcpath_completed\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--info); fill: none;'\"/>\n                <path :d=\"arcpath_completed_pass\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--success); fill: none;'\"/>\n                <path :d=\"arcpath_completed_fail\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--danger); fill: none;'\"/>\n\n                <circle v-if=\"disabled\" cx=\"50\" cy=\"50\" :r=\"radius/2\"\n                    :style=\"'fill: var(--dark);'\"/>\n                <circle v-else-if=\"value.ungraded > 0\" cx=\"50\" cy=\"50\" :r=\"radius/2\"\n                    :style=\"'fill: var(--warning);'\"/>\n            </g>\n            </svg>\n            `,\n        });\n\n        Vue.component('r-item-junction',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                completion(){\n                    if(this.value.completion){\n                        return this.value.completion;\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            methods: {\n\n            },\n            template: `\n            <div :class=\"'r-item-junction r-item-filter completion-'+completion\">\n                <i v-if=\"value.completion=='incomplete'\" class=\"fa fa-circle-o\"></i>\n                <i v-else-if=\"value.completion=='failed'\" class=\"fa fa-times-circle\"></i>\n                <i v-else-if=\"value.completion=='progress'\" class=\"fa fa-exclamation-circle\"></i>\n                <i v-else class=\"fa fa-check-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('r-item-finish',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                completion(){\n                    if(this.value.completion){\n                        return this.value.completion;\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            methods: {\n            },\n            template: `\n            <div :class=\"'r-item-finish r-item-filter completion-'+completion\">\n                <i class=\"fa fa-stop-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('r-item-start',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                completion(){\n                    if(this.value.completion){\n                        return this.value.completion;\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            created(){\n\n            },\n            methods: {\n            },\n            template: `\n            <div :class=\"'r-item-start r-item-filter completion-'+completion\">\n                <i class=\"fa fa-play-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('r-item-badge',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                    text: strings.badge,\n                };\n            },\n            computed: {\n                completion() {\n                    return this.value.badge.issued?\"completed\":\"incomplete\";\n                },\n                issued_icon(){\n                    switch(this.value.badge.issued){\n                        default: // \"nogrades\":\n                            return \"circle-o\";\n                        case true:\n                            return \"check\";\n                    }\n                },\n                issuestats(){\n                    // so the r-completion-bar can be used to show issuing stats\n                    return {\n                        students: (this.value.badge.studentcount)?this.value.badge.studentcount:0,\n                        completed: (this.value.badge.issuedcount)?this.value.badge.issuedcount:0,\n                        completed_pass: 0,\n                        completed_fail: 0,\n                        ungraded: 0,\n                    };\n                },\n                arcpath_issued(){\n                    if(this.value.badge.studentcount){\n                        const fraction = this.value.badge.issuedcount/this.value.badge.studentcount;\n                        return this.arcpath(0,fraction);\n                    } else {\n                        return \"\"; // no path\n                    }\n                },\n                arcpath_progress(){\n                    if(this.value.badge.completion){\n                        const fraction = this.value.badge.completion.progress/this.value.badge.completion.count;\n                        return this.arcpath(0,fraction);\n                    } else {\n                        return \"\"; // no path\n                    }\n                },\n                badgeinprogress(){\n                    return  (  this.value.badge.issued\n                            || this.teachermode\n                            || (this.value.badge.completion \n                                && this.value.badge.completion.progress >= this.value.badge.completion.count)\n                    );\n                }\n            },\n            methods: {\n                arcpath(start, end) {\n                    const r = 44;\n\n                    const t1  = start * 2*π;\n                    const Δ = (end * 2*π-0.01);\n                    return svgarcpath([50,50],[r,r],[t1,Δ], 1.5*π);\n                },\n                addTargetBlank(html) {\n                    const m = /^([^<]*\\< *a +)(.*)/.exec(html);\n                    if(m){\n                        return `${m[1]} target=\"_blank\" ${m[2]}`;\n                    } else {\n                        return html;\n                    }\n                },\n                completion_icon_rq(complete) {\n                    if (complete) {\n                        return \"check-square-o\";\n                    } else {\n                        return \"square-o\";\n                    }\n                },\n                completion_icon(complete) {\n                    if (complete) {\n                        return \"check-circle\";\n                    } else {\n                        return \"times-circle\";\n                    }\n                },\n                status(complete) {\n                    if (complete) {\n                        return \"complete\";\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            template: `\n            <div :class=\"'r-item-badge r-item-filter r-completion-'+completion\" v-b-tooltip.hover :title=\"value.badge.name\">\n                <a v-b-modal=\"'r-item-badge-details-'+value.id\"\n                ><svg class=\"r-badge-backdrop \" width='50px' height='50px' viewBox=\"0 0 100 100\">\n                    <title>{{value.badge.name}}</title>\n                    <template v-if=\"teachermode\">\n                        <circle cx=\"50\" cy=\"50\" r=\"44\"\n                            style=\"stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;\"/>\n                        <path :d=\"arcpath_issued\"\n                            :style=\"'stroke-width: 8; stroke: var(--info); fill: none;'\"/>\n                    </template>\n                    <circle v-else-if=\"value.badge.issued\" cx=\"50\" cy=\"50\" r=\"46\"\n                        style=\"stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;\"/>\n                    <template v-else-if=\"value.badge.completion\">\n                        <circle cx=\"50\" cy=\"50\" r=\"44\"\n                            style=\"stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;\"/>\n                        <path :d=\"arcpath_progress\"\n                            :style=\"'stroke-width: 8; stroke: var(--info); fill: none;'\"/>\n                    </template>\n                    <circle v-else cx=\"50\" cy=\"50\" r=\"46\"\n                        stroke-dasharray=\"6 9\"\n                        style=\"stroke: #999; stroke-width: 6; fill: #ddd; fill-opacity: 0.8;\"/>\n                    <image class=\"badge-image\" clip-path=\"circle() fill-box\"\n                        :href=\"value.badge.imageurl\" x=\"12\" y=\"12\" width=\"76\" height=\"76\"\n                        :style=\"(badgeinprogress)?'':'opacity: 0.4;'\" />\n                </svg></a>\n\n                <b-modal\n                    :id=\"'r-item-badge-details-'+value.id\"\n                    :title=\"value.badge.name\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class=\"fa fa-certificate\"></i>\n                                <a :href=\"(!guestmode)?(value.badge.infolink):undefined\" target=\"_blank\"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                        <div class=\"r-course-detail-header-right\" v-if=\"!teachermode\">\n                            <div class=\"r-completion-detail-header\">\n                                {{ text['completion_'+completion] }}\n                                <i v-b-popover.hover :class=\"'fa fa-'+issued_icon+' r-completion-'+completion\"\n                                    :title=\"text['completion_'+completion]\"></i>\n                            </div>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols=\"3\">\n                            <img :src=\"value.badge.imageurl\"/>\n                        </b-col><b-col cols=\"9\">\n                            <p>{{value.badge.description}}</p>\n                            <ul v-if=\"value.badge.issued\" class=\"list-unstyled pt-1 mb-1 border-grey border-top\">\n                                <li><strong><i class=\"fa fa-calendar-check-o r-completion-complete-pass\"></i>\n                                    {{text.dateissued}}:</strong> {{ value.badge.dateissued }}</li>\n                                <li v-if='value.badge.dateexpired'\n                                ><strong><i class=\"fa fa-calendar-times-o r-completion-complete\"></i>\n                                    {{text.dateexpired}}:</strong> {{ value.badge.dateexpired }}</li>\n                                <li><strong><i class=\"fa fa-share-alt r-completion-complete-pass\"></i>\n                                    <a :href=\"value.badge.issuedlink\">{{text.share_badge}}</a></strong> </li>\n                            </ul>\n                            <table v-if='value.badge.completion && !value.badge.issued' class=\"r-item-course-grade-details mb-2\">\n                                <tr v-if=\"value.badge.completion.types.length > 1\">\n                                    <th colspan=\"2\"><span v-html=\"value.badge.completion.title\"></span></th>\n                                </tr>\n                                <template v-for='cgroup in value.badge.completion.types' >\n                                    <tr>\n                                        <td colspan=\"2\" v-if=\"value.badge.completion.types.length > 1\"\n                                            ><span v-html=\"cgroup.title\"></span></td>\n                                        <th colspan=\"2\" v-else><span v-html=\"cgroup.title\"></span></th>\n                                    </tr>\n                                    <template v-for='ci in cgroup.criteria'>\n                                        <tr>\n                                            <td class=\"pl-3\"><span v-if='guestmode'><span v-html=\"ci.title\"></span></span>\n                                                <a target='_blank' v-else-if='ci.link' :href='ci.link'\n                                                    ><span v-html=\"ci.title\"></span></a>\n                                                <span v-else><span v-html=\"ci.title\"></span></span>\n                                            <td><i :class=\"'fa fa-'+completion_icon(ci.completed)+' r-completion-'+status(ci.completed)\"\n                                                :title=\"text['completion_'+status(ci.completed)]\"></i>\n                                            </td>\n                                        </tr>\n                                        <template v-if=\"ci.requirements.length > 1\">\n                                            <tr v-for=\"rq in ci.requirements\">\n                                                <td class=\"pl-4\" colspan=\"2\"\n                                                    ><i :class=\"'fa fa-'+completion_icon_rq(rq.completed)+' r-completion-incomplete'\"\n                                                    :title=\"text['completion_'+status(rq.completed)]\"></i>\n                                                    <span class=\"t-badge-criteria-requirement\"><span v-html=\"rq.title\"></span></span></td>\n                                            </tr>\n                                        </template>\n                                    </template>\n                                </template>\n                                <tr v-if=\"!value.badge.active\" class=\"mt-1\">\n                                    <td colspan=\"2\" class=\"alert alert-warning alert-block\">{{text.badgedisabled}}</td>\n                                </tr>\n                            </table>\n                            <ul class=\"list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1\"\n                             v-if=\"value.badge.criteria\"><li v-for=\"crit in value.badge.criteria\"\n                             ><span v-html='crit'></span></li></ul>\n                            <p v-if=\"(!guestmode)\"><strong><i class=\"fa fa-link\"></i>\n                                <a :href=\"value.badge.infolink\" target=\"_blank\"\n                                    >{{ text.badgeinfo }}</a></strong></p>\n                            <p v-if=\"teachermode && !guestmode\"\n                                >{{text.badgeissuedstats}}:<br>\n                                <r-completion-bar v-model=\"issuestats\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                            </p>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            `,\n        });\n    },\n};"],"names":["π","Math","PI","install","Vue","use","TSComponents","debug","Debugger","lastCaller","scrollCurrentIntoView","handle","elCurrentHeader","document","querySelector","scrollIntoView","behavior","block","inline","strings","report","loading","studyplan_past","studyplan_present","studyplan_future","back","invalid","error","grading","ungraded","graded","allgraded","unsubmitted","nogrades","unknown","completion","completed","incomplete","completed_pass","completed_fail","aggregation_all","aggregation_any","aggregation_one","aggregation_overall_all","aggregation_overall_any","aggregation_overall_one","completion_not_configured","configure_completion","view_completion_report","completion_incomplete","completion_failed","completion_pending","completion_progress","completion_completed","completion_good","completion_excellent","view_feedback","coursetiming_past","coursetiming_present","coursetiming_future","required_goal","student_not_tracked","completion_not_enabled","badge","share_badge","dateissued","dateexpire","badgeinfo","badgeissuedstats","completioninfo","badgedisabled","course","not_enrolled","teachercourse","select_conditions","select_grades","grade_include","grade_require","student_from_plan_enrolled","students_from_plan_enrolled","pageinfo","edit","fullname","shortname","startdate","enddate","description","duration","details","isVisible","elem","offsetWidth","offsetHeight","getClientRects","length","ItemEventBus","component","props","value","type","Number","max","default","min","stroke","bgopacity","title","String","icon","data","selectedstudyplan","computed","range","this","fraction","radius","arcpath","r","Δ","methods","template","invitekey","userid","text","studyplans","past","present","future","loadingstudyplan","teachermode","guestmode","verified_type","includes","studyplancount","updated","mounted","loadStudyplans","call_args","o","args","Array","isArray","self","methodname","done","response","info","plans","ix","plan","studyplanTiming","push","sort","a","b","t","Date","getTime","name","localeCompare","selectStudyplan","lengh","fail","notification","exception","studyplanid","id","deselectStudyplan","Object","Boolean","selectedpageindex","selectedpage","pages","pageduration","page","columns","periods","columns_stylerule","s","i","countLineLayers","line","maxLayer","slots","courses","item","layer","filters","showslot","index","layeridx","forGradable","show","list","span","selectedpageChanged","newTabIndex","prevTabIndex","$emit","$root","layers","layerHeights","created","$on","onLineHeightChange","lineid","$refs","mainEl","items","querySelectorAll","heightSum","forEach","el","height","getBoundingClientRect","heightStyle","style","slotindex","period","resizeListener","ResizeObserver","sizeElement","observe","itm","current","now","pstart","pend","spanCss","lines","lineColor","redrawLine","conn","start","getElementById","from_id","end","to_id","remove","SimpleLine","color","gravity","redrawLines","lineinfo","undefined","connections","out","onWindowResize","onRedrawLines","removeLine","hasConnectionsOut","hasConnectionsIn","hasContext","setTimeout","window","addEventListener","beforeDestroy","removeEventListener","$off","beforeUpdate","dummy","noenddate","completion_icon","circle_icon","pendingsubmission","result","grades","useRequiredGrades","aggregation_info","completion_tag","cgroup","hasCompletions","conditions","requirementHTML","requirements","rqs","split","html","addTargetBlank","m","exec","txt","course_grading_needed","course_grading_state","course_grading_icon","determine_grading_icon","filtered_grades","filter","g","selected","isCompletable","completable","progress_circle","status","students","cond","progress","grade","gradingstate","includeChanged","newValue","required","requiredChanged","grading_icon","is_grading_needed","stringkeys","key","then","completionreport","Config","wwwroot","width","width_unsubmitted","fraction_unsubmitted","width_graded","fraction_graded","width_ungraded","fraction_ungraded","count_unsubmitted","width_incomplete","fraction_incomplete","width_completed","fraction_completed","width_completed_pass","fraction_completed_pass","width_completed_fail","fraction_completed_fail","count_incomplete","disabled","arcpath_ungraded","arcpath_completed","begin","arcpath_completed_pass","arcpath_completed_fail","arcpath_incomplete","t1","issued","issued_icon","issuestats","studentcount","issuedcount","arcpath_issued","arcpath_progress","count","badgeinprogress","completion_icon_rq","complete"],"mappings":"4yBAsBMA,EAAIC,KAAKC,gBAKA,CACXC,QAAQC,KACJA,IAAIC,IAAIC,sCACJC,MAAQ,IAAIC,kBAAS,wBACrBC,WAAa,cAKRC,sBAAsBC,cAErBC,gBADoBC,SAASC,cAAc,2BACPA,cAAc,uCAErDF,iBAAsBD,QAAYA,QAAUF,aAC3CA,WAAaE,OACbC,gBAAgBG,eAAe,CAC3BC,SAAU,SACVC,MAAO,QACPC,OAAQ,gBAKhBC,SAAU,8BAAa,CACvBC,OAAQ,CACJC,QAAS,mBACTC,eAAgB,iBAChBC,kBAAmB,oBACnBC,iBAAkB,mBAClBC,KAAM,QAEVC,QAAS,CACLC,MAAO,SAEXC,QAAS,CACLC,SAAU,WACVC,OAAQ,SACRC,UAAW,YACXC,YAAa,cACbC,SAAU,WACVC,QAAS,WAEbC,WAAY,CACRC,UAAW,uBACXC,WAAY,wBACZC,eAAgB,oBAChBC,eAAgB,oBAChBV,SAAU,WACVW,gBAAiB,kBACjBC,gBAAiB,kBACjBC,gBAAiB,kBACjBC,wBAAyB,0BACzBC,wBAAyB,0BACzBC,wBAAyB,0BACzBC,0BAA2B,4BAC3BC,qBAAsB,uBACtBC,uBAAwB,yBACxBC,sBAAuB,wBACvBC,kBAAmB,oBACnBC,mBAAoB,qBACpBC,oBAAqB,sBACrBC,qBAAsB,uBACtBC,gBAAiB,kBACjBC,qBAAsB,uBACtBC,cAAe,gBACfC,kBAAmB,oBACnBC,qBAAsB,uBACtBC,oBAAqB,sBACrBC,cAAe,gBACfC,oBAAqB,sBACrBC,uBAAwB,0BAE5BC,MAAO,CACHC,YAAa,cACbC,WAAY,aACZC,WAAY,aACZC,UAAW,YACXC,iBAAkB,mBAClBnB,sBAAuB,8BACvBI,qBAAsB,6BACtBgB,eAAgB,iBAChBC,cAAe,iBAEnBC,OAAQ,CACJtB,sBAAuB,wBACvBC,kBAAmB,oBACnBC,mBAAoB,qBACpBC,oBAAqB,sBACrBC,qBAAsB,uBACtBC,gBAAiB,kBACjBC,qBAAsB,uBACtBC,cAAe,gBACfC,kBAAmB,oBACnBC,qBAAsB,uBACtBC,oBAAqB,sBACrBC,cAAe,gBACfC,oBAAqB,sBACrBW,aAAc,gBAElBC,cAAe,CACXC,kBAAmB,oBACnBC,cAAe,gBACflB,kBAAmB,oBACnBC,qBAAsB,uBACtBC,oBAAqB,sBACrBiB,cAAe,gBACfC,cAAe,gBACfjB,cAAe,gBACfkB,2BAA4B,6BAC5BC,4BAA6B,+BAEjCC,SAAU,CACNC,KAAM,cACNC,SAAU,iBACVC,UAAW,sBACXC,UAAW,sBACXC,QAAS,oBACTC,YAAa,wBACbC,SAAU,qBACVC,QAAS,gCAgBRC,UAAUC,eACJA,KAAKC,aAAeD,KAAKE,cAAgBF,KAAKG,iBAAiBC,cAIxEC,aAAe,IAAI3F,IAEzBA,IAAI4F,UAAU,oBAAoB,CAC9BC,MAAO,CACHC,MAAO,CACHC,KAAMC,QAEVC,IAAK,CACDF,KAAMC,OACNE,QAAS,KAEbC,IAAK,CACDJ,KAAMC,OACNE,QAAS,GAEbE,OAAQ,CACJL,KAAMC,OACNE,QAAS,IAEbG,UAAW,CACPN,KAAMC,OACNE,QAAS,IAEbI,MAAO,CACHP,KAAMQ,OACNL,QAAS,IAEbM,KAAM,CACFT,KAAMQ,SAIdE,KAAI,KACO,CACHC,kBAAmB,OAG3BC,SAAU,CACNC,eACWC,KAAKZ,IAAMY,KAAKV,KAE3BW,kBACOD,KAAKZ,IAAMY,KAAKV,KAAO,EACf,GAGCU,KAAKf,MAAQe,KAAKV,MAAMU,KAAKZ,IAAMY,KAAKV,MAGxDY,gBACW,GAAM,GAAGF,KAAKT,QAEzBY,cACQF,SAAW,QACTG,EAAI,GAAM,GAAGJ,KAAKT,OACrBS,KAAKZ,IAAMY,KAAKV,KAAO,IACtBW,UAAYD,KAAKf,MAAQe,KAAKV,MAAMU,KAAKZ,IAAMY,KAAKV,YAGlDe,EAAe,EAAXJ,SAAalH,SAChB,sBAAW,CAAC,GAAG,IAAI,CAACqH,EAAEA,GAAG,CAAC,EAAEC,GAAI,IAAItH,KAGnDuH,QAAS,GAETC,SAAW,gtCAuBfpH,IAAI4F,UAAU,WAAY,CACtBC,MAAO,CACHwB,UAAW,CACPtB,KAAMQ,OACNL,QAAO,IAAY,MAEvBoB,OAAQ,CACJvB,KAAMC,OACNE,QAAO,IAAY,GAEvBH,KAAM,CACFA,KAAMQ,OACNL,QAAO,IAAY,QAG3BO,KAAI,KACO,CACHc,KAAMxG,QAAQC,OACdwG,WAAY,CACRC,KAAM,GACNC,QAAS,GACTC,OAAQ,IAGZjB,kBAAmB,KACnBkB,kBAAkB,EAClB3G,SAAS,IAGjB0F,SAAU,CACNkB,oBACwB,YAAZhB,KAAKd,MAEjB+B,kBACyB,WAAbjB,KAAKd,MAEjBgC,sBACU,CAAC,UAAU,QAAQ,WAAW,OAAOC,SAASnB,KAAKd,MAG9Cc,KAAKd,KAFL,OAKfkC,wBACWpB,KAAKW,WAAWC,KAAK/B,OAASmB,KAAKW,WAAWE,QAAQhC,OAASmB,KAAKW,WAAWG,OAAOjC,SAGrGwC,YAGAC,eACSC,kBAGTjB,QAAS,CACLkB,UAAUC,SACAC,KAAO,SACG,iBAALD,GAAkBE,MAAMC,QAAQH,IAAY,OAANA,mCACrCC,KAAKD,GAGQ,WAAtBzB,KAAKkB,cACJQ,KAAI,UAAgB1B,KAAKQ,UACG,SAAtBR,KAAKkB,gBACXQ,KAAI,OAAa1B,KAAKS,QAEnBiB,MAEXH,uBACUM,KAAO7B,UACR5F,SAAU,iBACV,CAAC,CACF0H,WAAa,4BAA2B9B,KAAKkB,2BAC7CQ,KAAM1B,KAAKwB,eACX,GAAGO,MAAK,SAASC,UACjB1I,MAAM2I,KAAK,cAAcD,gBAEnBE,MAAQ,CAAEpB,OAAQ,GAAID,QAAS,GAAID,KAAM,QAE1C,MAAMuB,MAAMH,SAAU,OACjBI,KAAOJ,SAASG,IAEtBD,MADe7I,iCAAagJ,gBAAgBD,OAC9BE,KAAKF,UAGlB,MAAMD,MAAMD,MACb5I,MAAM2I,KAAKE,GAAID,MAAMC,KACrBD,MAAMC,IAAII,MAAK,CAACC,EAAEC,WACRC,EAAI,IAAIC,KAAKF,EAAEtE,WAAWyE,UAAY,IAAID,KAAKH,EAAErE,WAAWyE,iBACzD,GAALF,IAEAA,EAAIF,EAAEK,KAAKC,cAAcL,EAAEI,OAExBH,CAAP,IAIRb,KAAKlB,WAAauB,MAClBL,KAAKzH,SAAU,EAEuB,GAAlCyH,KAAKlB,WAAWE,QAAQhC,OAExBgD,KAAKkB,gBAAgBlB,KAAKlB,WAAWE,QAAQ,IAGlB,GAAvBb,KAAKoB,iBACFS,KAAKlB,WAAWG,OAAOkC,MAAQ,EAC9BnB,KAAKkB,gBAAgBlB,KAAKlB,WAAWG,OAAO,IAE5Ce,KAAKkB,gBAAgBlB,KAAKlB,WAAWC,KAAK,QAKvDqC,KAAKC,sBAAaC,YAEzBJ,gBAAgBX,YACNP,KAAO7B,UACRe,kBAAmB,iBACnB,CAAC,CACFe,WAAa,2BAA0B9B,KAAKkB,0BAC5CQ,KAAM1B,KAAKwB,UAAU,CACjB4B,YAAahB,KAAKiB,QAEtB,GAAGtB,MAAK,SAASC,UACjB1I,MAAM2I,KAAK,sBAAsBD,UACjCH,KAAKhC,mBAAoB,wCAAiBmC,UAC1CH,KAAKd,kBAAmB,KACzBkC,KAAKC,sBAAaC,YAEzBG,yBACSzD,kBAAoB,UACpB0B,mBAGbhB,SAAW,y9EA6CfpH,IAAI4F,UAAU,cAAe,CACzBC,MAAO,CACHC,MAAO,CACHC,KAAMqE,QAEVtC,UAAW,CACP/B,KAAMsE,QACNnE,SAAS,GAEb2B,YAAa,CACT9B,KAAMsE,QACNnE,SAAS,IAGjBO,KAAI,KACO,CACH6D,kBAAmB,EACnB/C,KAAMxG,QAAQ6D,WAGtB+B,SAAU,CAEN4D,sBACW1D,KAAKf,MAAM0E,MAAM3D,KAAKyD,qBAGrCnD,QAAS,CACLsD,aAAaC,OACF,2BAAYA,KAAK1F,WAAU,GAAS,OAAQ,2BAAY0F,KAAKzF,SAAQ,GAEhF0F,QAAQD,MACG,EAAmB,EAAfA,KAAKE,QAEpBC,kBAAkBH,UAEVI,EAAI,2DACJ,IAAIC,EAAE,EAAGA,EAAEL,KAAKE,QAAQG,IACxBD,GAAI,sEAEDA,EAAE,KAEbE,gBAAgBC,KAAKP,UACbQ,UAAY,MACZ,IAAIH,EAAI,EAAGA,GAAKL,KAAKE,QAASG,IAAI,CACrBE,KAAKE,MAAMJ,OAEpB,MAAM/B,MAAMiC,KAAKE,MAAMJ,GAAGK,QAAQ,OAC5BC,KAAOJ,KAAKE,MAAMJ,GAAGK,QAAQpC,IAChCqC,KAAKC,MAAQJ,WACZA,SAAWG,KAAKC,WAGpB,MAAMtC,MAAMiC,KAAKE,MAAMJ,GAAGQ,QAAQ,OAC5BF,KAAOJ,KAAKE,MAAMJ,GAAGQ,QAAQvC,IAChCqC,KAAKC,MAAQJ,WACZA,SAAWG,KAAKC,eAIpBJ,UAAY,EAAIA,SAAS,EAAG,GAExCM,SAASd,KAAKO,KAAKQ,MAAOC,SAAU3F,YAG1B4F,YAAuB,YAAR5F,KACf6E,QAAUF,KAAKE,YACjBgB,MAAO,MACP,IAAIb,EAAI,EAAGA,EAAIH,QAASG,OACrBE,KAAKE,MAAMM,MAAMV,IAAME,KAAKE,MAAMM,MAAMV,GAAGK,QAAQ,OAC5CS,KAAOZ,KAAKE,MAAMM,MAAMV,GAAGK,YAC7B,MAAMpC,MAAM6C,KAAK,OACXR,KAAOQ,KAAK7C,IACfqC,KAAKC,OAASI,WACVC,YACIZ,EAAI,GAAMM,KAAKS,KAAOf,EAAK,IAC1Ba,MAAO,GAGPP,KAAKS,KAAOf,EAAM,IAClBa,MAAO,YAQxBA,MAEXG,oBAAoBC,YAAYC,cAE5BtG,aAAauG,MAAM,cAAe,MAClC5L,sBAAsBuG,KAAKf,MAAMoE,MAGzC/B,UACI7H,sBAAsBuG,KAAKf,MAAMoE,SAC5BiC,MAAMD,MAAM,gBAErBhE,UACI5H,sBAAsBuG,KAAKf,MAAMoE,IACjCvE,aAAauG,MAAM,mBAAoB,WAClCC,MAAMD,MAAM,eACjBvG,aAAauG,MAAM,gBAEvB9E,SAAW,05PAmIfpH,IAAI4F,UAAU,sBAAuB,CACjCC,MAAO,CACHC,MAAQ,CACJC,KAAMqE,OACNlE,QAAS,iBAAmB,KAEhCkG,OAAQ,CACJrG,KAAMC,OACNE,QAAS,IAGjBO,KAAI,KACO,CACH4F,aAAc,KAGtBC,UAGQ3G,aAAa4G,IAAI,mBAAoB1F,KAAK2F,qBAElD7F,SAAU,GAGVQ,QAAS,CACLqF,mBAAmBC,WAIZ5F,KAAK6F,MAAMC,SAAWF,QAAU5F,KAAKf,MAAMoE,IAAiB,OAAXuC,QAAiB,OAC3DG,MAAQnM,SAASoM,iBAClB,uCAAsChG,KAAKf,MAAMoE,YAElD4C,UAAY,EAChBF,MAAMG,SAASC,WAGLC,OADID,GAAGE,wBACID,OACjBH,WAAaG,MAAb,UAGEE,YAAa,GAAEL,mBAChBJ,MAAMC,OAAOS,MAAMH,OAASE,eAI7C/F,SAAW,yaAWfpH,IAAI4F,UAAU,mBAAoB,CAC9BC,MAAO,CACHC,MAAO,CACHC,KAAMyC,MACNtC,QAAO,IAAW,IAEtBH,KAAO,CACHA,KAAMQ,OACNL,QAAS,YAEbmH,UAAY,CACRtH,KAAMC,OACNE,QAAS,GAEb+E,KAAO,CACHlF,KAAMqE,OACNlE,QAAO,IAAW,MAEtBoF,MAAQ,CACJvF,KAAMC,QAEViD,KAAM,CACFlD,KAAMqE,OACNlE,QAAO,IAAW,MAEtBwE,KAAM,CACF3E,KAAMqE,OACNlE,QAAO,IAAW,MAEtB4B,UAAW,CACP/B,KAAMsE,QACNnE,SAAS,GAEb2B,YAAa,CACT9B,KAAMsE,QACNnE,SAAS,GAEboH,OAAQ,CACJvH,KAAMqE,OACNlE,QAAO,IAAW,OAG1BiC,gBACUO,KAAK7B,KACK,YAAb6B,KAAK3C,MAAwC,GAAlB2C,KAAK2E,YAC/B3E,KAAK6E,eAAiB,IAAIC,gBAAe,QAClC9E,KAAKgE,MAAMe,YAAY,OAChBR,OAASvE,KAAKgE,MAAMe,YAAYP,wBAAwBD,OAC9DtH,aAAauG,MAAM,mBAAoBxD,KAAKuC,KAAKf,GAAIxB,KAAK4C,MAAO2B,YAEtES,QAAQhF,KAAKgE,MAAMe,eAG9B9G,SAAU,CACN0E,WACQ,MAAMrC,MAAMnC,KAAKf,MAAM,OACjB6H,IAAM9G,KAAKf,MAAMkD,OACpB2E,IAAIrC,OAASzE,KAAKyE,aACVqC,WAGR,MAEXC,aACQ/G,KAAKyG,QAAUzG,KAAKyG,OAAOtI,WAAa6B,KAAKyG,OAAOrI,QAAQ,OACtD4I,IAAM,IAAIrE,KACVsE,OAAS,IAAItE,KAAK3C,KAAKyG,OAAOtI,WAC9B+I,KAAO,IAAIvE,KAAK3C,KAAKyG,OAAOrI,gBAC1B4I,KAAOC,QAAUD,IAAME,YAGxB,GAGfC,aACOnH,KAAKwE,MAAQxE,KAAKwE,KAAKS,KAAO,EAAE,OAEvB,kCADM,EAAIjF,KAAKwE,KAAKS,KAAQ,WAG7B,KAInBrF,KAAI,KACO,IAGXU,QAAS,GAGTC,SAAW,msBAmBfpH,IAAI4F,UAAU,SAAU,CACpBC,MAAO,CACHC,MAAO,CACHC,KAAMqE,OACNlE,QAAS,kBAAmB,OAEhC+C,KAAM,CACFlD,KAAMqE,OACNlE,QAAO,IAAW,MAEtB4B,UAAW,CACP/B,KAAMsE,QACNnE,SAAS,GAEb2B,YAAa,CACT9B,KAAMsE,QACNnE,SAAS,IAGjBO,KAAI,KACO,CACHwH,MAAO,KAGf9G,QAAS,CACL+G,eACOrH,KAAKgB,kBACG,qBAGAhB,KAAKf,MAAM/D,0BAEH,kBACN,eACM,oBACN,iBACM,qBACN,kBACM,qBACN,aACM,kBACN,kBACM,gBAIvBoM,WAAWC,UACHF,UAAYrH,KAAKqH,YAEjBG,MAAQ5N,SAAS6N,eAAe,aAAaF,KAAKG,SAClDC,IAAK/N,SAAS6N,eAAe,aAAaF,KAAKK,OAGhD5H,KAAKoH,MAAMG,KAAKK,cACVR,MAAMG,KAAKK,OAAOC,gBAChB7H,KAAKoH,MAAMG,KAAKK,QAGd,OAAVJ,OAA0B,OAARG,KAAgBnJ,UAAUgJ,QAAUhJ,UAAUmJ,YAC1DP,MAAMG,KAAKK,OAAS,IAAIE,uBAAWN,MAAMG,IAAI,CAC9CI,MAAOV,UACPW,QAAS,CACLR,MA32BX,IA42BWG,IA52BX,SAi3BLM,kBAEQ,IAAI9F,MAAMnC,KAAKoH,MAAM,KACjBc,SAAWlI,KAAKoH,MAAMjF,IACvB+F,UAAYA,SAAS9D,OACpB8D,SAAS9D,KAAKyD,SACdK,SAAS9D,UAAO+D,OAKpB,IAAIjE,KAAKlE,KAAKf,MAAMmJ,YAAYC,IAAI,KAChCd,KAAOvH,KAAKf,MAAMmJ,YAAYC,IAAInE,QACjCoD,WAAWC,QAGxBe,sBACSL,eAETM,qBACSN,eAETO,WAAWjB,MACJvH,KAAKoH,MAAMG,KAAKK,cACVR,MAAMG,KAAKK,OAAOC,gBAChB7H,KAAKoH,MAAMG,KAAKK,UAKnC9H,SAAU,CACN2I,2BACa,CAAC,UAAWtH,SAASnB,KAAKf,MAAMC,OAE7CwJ,0BACa,CAAC,SAAUvH,SAASnB,KAAKf,MAAMC,OAE5CyJ,mBACW,CAAC,QAAQ,WAAW,UAAUxH,SAASnB,KAAKf,MAAMC,QAGjEuG,UACI3G,aAAa4G,IAAI,cAAe1F,KAAKuI,gBAEzCjH,eAGS2G,cACLW,YAAW,UACFX,gBACP,IAGFY,OAAOC,iBAAiB,SAAS9I,KAAKsI,iBAE1CS,oBACQ,IAAI7E,KAAKlE,KAAKf,MAAMmJ,YAAYC,IAAI,KAChCd,KAAOvH,KAAKf,MAAMmJ,YAAYC,IAAInE,QACjCsE,WAAWjB,MAGpBsB,OAAOG,oBAAoB,SAAShJ,KAAKsI,gBACzCxJ,aAAamK,KAAK,cAAejJ,KAAKuI,gBAE1CW,iBAEA7H,UACQrB,KAAKmJ,YACAlB,eAGb1H,SAAW,0iDAsBfpH,IAAI4F,UAAU,iBAAkB,CAC5BC,MAAO,OACM,CACLE,KAAMqE,OACNlE,QAAS,kBAAmB,QAGpCO,KAAI,KACO,CACHc,KAAMxG,QAAQO,UAGtB6F,QAAS,GAETC,SAAW,2mBAmBfpH,IAAI4F,UAAU,gBAAiB,CAC3BC,MAAO,CACHC,MAAO,CACHC,KAAMqE,OACNlE,QAAO,IAAW,MAEtB4B,UAAW,CACP/B,KAAMsE,QACNnE,QAAO,KAAW,GAEtB2B,YAAa,CACT9B,KAAMsE,QACNnE,QAAO,KAAW,GAEtB+C,KAAM,CACFlD,KAAMqE,OACNlE,QAAO,IAAW,OAG1BO,KAAI,KACO,CACHc,KAAMxG,QAAQoD,SAGtBwC,SAAU,CACN3B,mBACW,2BAAY6B,KAAKf,MAAM3B,OAAOa,YAEzCC,iBACO4B,KAAKf,MAAM3B,OAAOc,SACV,2BAAY4B,KAAKf,MAAM3B,OAAOc,SAG9B4B,KAAKU,KAAK0I,YAI7B3D,YAEAnF,QAAS,CACL+I,gBAAgBnO,mBACLA,0BAEQ,eACN,gBACM,sBACN,eACM,mBACN,iBACM,yBACN,gBAEA,WAEA,kBACM,iBAGnBoO,YAAYpO,mBACDA,2BAEQ,SACN,eACM,YACN,iBACM,kBACN,gBAEA,WAEA,kBACM,WAIvBqF,SAAW,2oNA6GfpH,IAAI4F,UAAU,uBAAuB,CACjCC,MAAO,CACHC,MAAQ,CACJC,KAAMqE,OACNlE,QAAS,iBAAmB,KAEhC4B,UAAW,CACP/B,KAAMsE,QACNnE,SAAS,IAGjBO,KAAI,KACO,CACHc,KAAMxG,QAAQoD,SAGtBwC,SAAU,CACNyJ,wBACQC,QAAS,MACT,MAAMrH,MAAMnC,KAAKf,MAAM3B,OAAOmM,OAAO,IAC3BzJ,KAAKf,MAAM3B,OAAOmM,OAAOtH,IAC9BoH,kBAAkB,CACnBC,QAAS,gBAIVA,QAEXE,6BACO1J,KAAKoC,OAAQpC,KAAKoC,KAAKuH,uBAAqExB,IAAjDnI,KAAKoC,KAAKuH,iBAAiBD,oBAC9D1J,KAAKoC,KAAKuH,iBAAiBD,oBAO9CpJ,QAAS,CACL+I,gBAAgBnO,mBACLA,0BAEQ,eACN,gBACM,sBACN,eACM,mBACN,iBACM,yBACN,gBAEA,WAEA,kBACM,kBAIvBqF,SAAW,ijEAwCfpH,IAAI4F,UAAU,2BAA2B,CACrCC,MAAO,CACHC,MAAQ,CACJC,KAAMqE,OACNlE,QAAS,iBAAmB,KAEhC4B,UAAW,CACP/B,KAAMsE,QACNnE,SAAS,GAEb/B,OAAQ,CACJ4B,KAAMqE,OACNlE,QAAS,iBAAmB,MAGpCO,KAAI,KACO,CACHc,KAAMxG,QAAQgB,aAGtBuK,YAEA3F,SAAU,GAEVQ,QAAS,CACL+I,gBAAgBnO,mBACLA,gBACE,iBACM,yBACN,eAEA,sBACM,mBACN,sBACM,6BAEA,aAGnB0O,eAAeC,QACJA,OAAO3O,WAAW,YAAY,aAEzC4O,oBACO9J,KAAKf,MAAM8K,eACN,MAAMF,UAAU7J,KAAKf,MAAM8K,cACxBF,OAAO9D,OAAS8D,OAAO9D,MAAMlH,OAAS,SAC9B,SAIZ,GAEXmL,gBAAgBC,oBACNC,IAAMD,aAAaE,MAAM,WAC3BC,KAAO,OACP,MAAMjI,MAAM+H,IAAK,CAEjBE,MAAS,GADEF,IAAI/H,iBAGZiI,MAEXC,eAAeD,YACLE,EAAI,sBAAsBC,KAAKH,aAClCE,EACS,GAAEA,EAAE,sBAAsBA,EAAE,KAE7BF,OAInB7J,SAAW,kqJAqFfpH,IAAI4F,UAAU,uBAAwB,CAClCC,MAAO,CACHC,MAAO,CACHC,KAAMqE,OACNlE,QAAO,IAAW,MAEtB4B,UAAW,CACP/B,KAAMsE,QACNnE,QAAO,KAAW,GAEtB2B,YAAa,CACT9B,KAAMsE,QACNnE,QAAO,KAAW,GAEtB+C,KAAM,CACFlD,KAAMqE,OACNlE,QAAO,IAAW,OAG1BO,KAAI,KACO,CACHc,KAAMxG,QAAQsD,cACdgN,IAAK,CACD7P,QAAST,QAAQS,WAI7BmF,SAAU,CACN2K,+BACWzK,KAAK0K,wBAEhBC,6BACW3K,KAAK4K,uBAAuB5K,KAAK0K,yBAE5CG,yBACW7K,KAAKf,MAAM3B,OAAOmM,OAAOqB,QAAOC,GAAKA,EAAEC,YAElDtB,6BACO1J,KAAKoC,OAAQpC,KAAKoC,KAAKuH,uBAAqExB,IAAjDnI,KAAKoC,KAAKuH,iBAAiBD,oBAC9D1J,KAAKoC,KAAKuH,iBAAiBD,mBAM1CuB,oBACQC,aAAc,SACflL,KAAKf,MAAM3B,OAAOpC,WACd8E,KAAKf,MAAM3B,OAAOpC,WAAW6O,WAAWlL,OAAS,IAChDqM,aAAc,GAEXlL,KAAKf,MAAM3B,OAAOmM,QACtBzJ,KAAKf,MAAM3B,OAAOmM,OAAO5K,OAAS,IACjCqM,aAAc,GAIfA,aAEXC,wBACUC,OAAS,CACXC,SAAU,EACVlQ,UAAW,EACXE,eAAgB,EAChBC,eAAgB,EAChBV,SAAU,MAGXoF,KAAKf,MAAM3B,OAAOpC,eACb,MAAMoQ,QAAQtL,KAAKf,MAAM3B,OAAOpC,WAAW6O,eACvC,MAAMjD,OAAOwE,KAAKvF,MACfe,IAAIyE,WACHH,OAAOC,UAAYvE,IAAIyE,SAASF,SAChCD,OAAOjQ,WAAa2L,IAAIyE,SAASpQ,UACjCiQ,OAAO/P,gBAAkByL,IAAIyE,SAASlQ,eACtC+P,OAAO9P,gBAAkBwL,IAAIyE,SAASjQ,eACtC8P,OAAOxQ,UAAYkM,IAAIyE,SAAS3Q,eAKzC,GAAIoF,KAAKf,MAAM3B,OAAOmM,WACpB,MAAMsB,KAAK/K,KAAKf,MAAM3B,OAAOmM,OAC3BsB,EAAEpQ,UACDyQ,OAAOC,UAAYN,EAAEpQ,QAAQ0Q,SAC7BD,OAAOjQ,WAAa4P,EAAEpQ,QAAQQ,UAC9BiQ,OAAO/P,gBAAkB0P,EAAEpQ,QAAQU,eACnC+P,OAAO9P,gBAAkByP,EAAEpQ,QAAQW,eACnC8P,OAAOxQ,UAAYmQ,EAAEpQ,QAAQC,iBAKlCwQ,QAEXjN,mBACW,2BAAY6B,KAAKf,MAAM3B,OAAOa,YAEzCC,iBACO4B,KAAKf,MAAM3B,OAAOc,SACV,2BAAY4B,KAAKf,MAAM3B,OAAOc,SAG9B4B,KAAKU,KAAK0I,YAI7B3D,YAGAnF,QAAS,CACLoK,2BACQ9P,SAAW,EACXK,QAAU,EACVJ,OAAS,EACTC,UAAY,QACV2O,OAASzJ,KAAK6K,oBAEhBlJ,MAAMC,QAAQ6H,SAAqB,GAAVA,aAClB,eAGP,MAAMtH,MAAMsH,OAAO,OACb+B,MAAQ/B,OAAOtH,IAClBqJ,MAAM7Q,QACFwE,OAAOqM,MAAM7Q,QAAQC,UAAY,EAChCA,WAEIuE,OAAOqM,MAAM7Q,QAAQE,QAAU,IAChCsE,OAAOqM,MAAM7Q,QAAQE,SAAWsE,OAAOqM,MAAM7Q,QAAQ0Q,UACpDvQ,YAEAD,UAIRI,SAAU,SAIfL,SAAW,EACH,WACDK,QACC,UACDJ,OACC,SACDC,UACC,YAEA,eAGf8P,uBAAuBa,qBACZA,4BAEQ,eACN,iBACM,yBACN,gBACM,wBACN,aAEA,kBACM,YACN,oBACM,kBAIvBlL,SAAW,+zIA+EnBpH,IAAI4F,UAAU,6BAA8B,CACxCC,MAAO,CACHC,MAAQ,CACJC,KAAMqE,OACNlE,QAAS,iBAAmB,KAEhCqK,kBAAmB,CACfxK,KAAMsE,QACNnE,QAAO,IAAW,OAG1BO,KAAI,KACO,CACHc,KAAMxG,QAAQsD,gBAGtBsC,SAAU,GAEVQ,QAAS,CACLoL,eAAeC,SAASZ,kBACf,CAAC,CACFjJ,WAAY,oCACZJ,KAAM,UAAcqJ,EAAE1H,WACHrD,KAAKf,MAAMoE,WACXsI,kBACCZ,EAAEa,aAEtB,GAAG3I,KAAKC,sBAAaC,YAE7B0I,gBAAgBF,SAASZ,kBAChB,CAAC,CACFjJ,WAAY,oCACZJ,KAAM,UAAcqJ,EAAE1H,WACHrD,KAAKf,MAAMoE,WACX0H,EAAEC,kBACDW,aAEpB,GAAG1I,KAAKC,sBAAaC,aAGjC5C,SAAW,6qGA0DfpH,IAAI4F,UAAU,uBAAuB,CACjCC,MAAO,CACHC,MAAQ,CACJC,KAAMqE,OACNlE,QAAS,iBAAmB,KAEhCqK,kBAAmB,CACfxK,KAAMsE,QACNnE,SAAS,IAGjBO,KAAI,KACO,CACHc,KAAMxG,QAAQsD,cACdgN,IAAK,CACD7P,QAAST,QAAQS,WAI7BmF,SAAU,CACNyJ,wBACQC,QAAS,MACT,MAAMrH,MAAMnC,KAAKf,MAAMwK,OAAO,IACpBzJ,KAAKf,MAAMwK,OAAOtH,IACvBoH,kBAAkB,CACnBC,QAAS,gBAIVA,QAEXqB,yBACW7K,KAAKf,MAAMwK,OAAOqB,QAAOC,GAAKA,EAAEC,aAG/C1K,QAAS,CACLsK,uBAAuBa,qBACZA,4BAEQ,eACN,iBACM,yBACN,gBACM,wBACN,aAEA,kBACM,YACN,oBACM,iBAGnBK,aAAaN,cACFxL,KAAK4K,uBAAuB5K,KAAK+L,kBAAkBP,SAE9DO,kBAAkBP,OACXA,MAAM7Q,QACF6Q,MAAM7Q,QAAQC,SACN,WAEH4Q,MAAM7Q,QAAQU,gBAAkBmQ,MAAM7Q,QAAQQ,WAAaqQ,MAAM7Q,QAAQW,eAC1E6D,OAAOqM,MAAM7Q,QAAQQ,WAAagE,OAAOqM,MAAM7Q,QAAQU,gBACpD8D,OAAOqM,MAAM7Q,QAAQW,iBACnB6D,OAAOqM,MAAM7Q,QAAQ0Q,UAClB,YAGA,SAIJ,cAGJ,WAKnB9K,SAAW,kiDAkCfpH,IAAI4F,UAAU,2BAA2B,CACrCC,MAAO,CACHC,MAAQ,CACJC,KAAMqE,OACNlE,QAAS,iBAAmB,KAEhC4B,UAAW,CACP/B,KAAMsE,QACNnE,SAAS,GAEb/B,OAAQ,CACJ4B,KAAMqE,OACNlE,QAAS,iBAAmB,MAGpCO,KAAI,KACO,CACHc,KAAMxG,QAAQgB,aAGtBuK,gBACU5D,KAAO7B,SAETgM,WAAa,OACb,MAAMC,OAAQjM,KAAKU,KACnBsL,WAAW1J,KAAK,CAAE2J,IAAKA,IAAKlN,UAAW,6CAE/BiN,YAAYE,MAAK,SAAShS,aAC9BgK,EAAI,MACJ,MAAM+H,OAAQpK,KAAKnB,KACnBmB,KAAKnB,KAAKuL,KAAO/R,QAAQgK,GACzBA,QAIZpE,SAAU,CACNqM,yBACY,GAAEC,gBAAOC,8CAA8CrM,KAAK1C,OAAO+F,OAGnF/C,QAAS,CACLwJ,oBACO9J,KAAKf,MAAM8K,eACN,MAAMF,UAAU7J,KAAKf,MAAM8K,cACxBF,OAAO9D,OAAS8D,OAAO9D,MAAMlH,OAAS,SAC9B,SAIZ,IAGf0B,SAAW,oqEA8CXpH,IAAI4F,UAAU,gBAAgB,CAC1BC,MAAO,CACHC,MAAQ,CACJC,KAAMqE,OACNlE,QAAS,iBAAmB,KAEhCiN,MAAO,CACHpN,KAAMC,OACNE,QAAS,KAEb+G,OAAQ,CACJlH,KAAMC,OACNE,QAAS,KAGjBO,KAAI,KACO,CACHc,KAAMxG,QAAQS,UAGtBmF,SAAU,CACNyM,2BACWvM,KAAKsM,MAAQtM,KAAKwM,wBAE7BC,sBACWzM,KAAKsM,MAAQtM,KAAK0M,mBAE7BC,wBACW3M,KAAKsM,MAAQtM,KAAK4M,qBAE7BC,2BACY7M,KAAKf,MAAMoM,SAAWrL,KAAKf,MAAMpE,OAASmF,KAAKf,MAAMrE,WAGrE0F,QAAS,CACLkM,8BACOxM,KAAKf,MAAMoM,SAAW,EACd,GAAMrL,KAAKf,MAAMpE,OAASmF,KAAKf,MAAMrE,UAAYoF,KAAKf,MAAMoM,SAE5D,GAGfqB,yBACO1M,KAAKf,MAAMoM,SAAW,EACdrL,KAAKf,MAAMpE,OAASmF,KAAKf,MAAMoM,SAE/B,GAGfuB,2BACO5M,KAAKf,MAAMoM,SAAW,EACdrL,KAAKf,MAAMrE,SAAWoF,KAAKf,MAAMoM,SAEjC,IAInB9K,SAAW,2+BAkBfpH,IAAI4F,UAAU,mBAAmB,CAC7BC,MAAO,CACHC,MAAQ,CACJC,KAAMqE,OACNlE,QAAS,iBAAmB,CACxBgM,SAAU,EACVlQ,UAAW,EACXE,eAAgB,EAChBC,eAAgB,EAChBV,SAAU,KAGlB0R,MAAO,CACHpN,KAAMC,OACNE,QAAS,KAEb+G,OAAQ,CACJlH,KAAMC,OACNE,QAAS,KAGjBO,KAAI,KACO,CACHc,KAAMxG,QAAQgB,aAGtB4E,SAAU,CACNgN,0BACW9M,KAAKsM,MAAQtM,KAAK+M,uBAE7BC,yBACWhN,KAAKsM,MAAQtM,KAAKiN,sBAE7BC,8BACWlN,KAAKsM,MAAQtM,KAAKmN,2BAE7BC,8BACWpN,KAAKsM,MAAQtM,KAAKqN,2BAE7BV,wBACW3M,KAAKsM,MAAQtM,KAAK4M,qBAE7BU,0BACYtN,KAAKf,MAAMoM,SAAWrL,KAAKf,MAAM9D,UAAY6E,KAAKf,MAAM5D,eACrD2E,KAAKf,MAAM3D,eAAiB0E,KAAKf,MAAMrE,WAG1D0F,QAAS,CACLyM,6BACO/M,KAAKf,MAAMoM,SAAW,EACd,GACFrL,KAAKf,MAAM9D,UAAY6E,KAAKf,MAAM5D,eAClC2E,KAAKf,MAAM3D,eAAiB0E,KAAKf,MAAMrE,UAAYoF,KAAKf,MAAMoM,SAE5D,GAGf4B,4BACOjN,KAAKf,MAAMoM,SAAW,EACdrL,KAAKf,MAAM9D,UAAY6E,KAAKf,MAAMoM,SAElC,GAGf8B,iCACOnN,KAAKf,MAAMoM,SAAW,EACdrL,KAAKf,MAAM5D,eAAiB2E,KAAKf,MAAMoM,SAEvC,GAGfgC,iCACOrN,KAAKf,MAAMoM,SAAW,EACdrL,KAAKf,MAAM3D,eAAiB0E,KAAKf,MAAMoM,SAEvC,GAGfuB,2BACO5M,KAAKf,MAAMoM,SAAW,EACdrL,KAAKf,MAAMrE,SAAWoF,KAAKf,MAAMoM,SAEjC,IAInB9K,SAAW,moDA0BfpH,IAAI4F,UAAU,sBAAsB,CAChCC,MAAO,CACHC,MAAQ,CACJC,KAAMqE,OACNlE,QAAS,iBAAmB,CACxBgM,SAAU,GACVlQ,UAAW,EACXE,eAAgB,EAChBC,eAAgB,EAChBV,SAAU,KAGlB2E,OAAQ,CACJL,KAAMC,OACNE,QAAS,IAEbkO,SAAU,CACNrO,KAAMsE,QACNnE,SAAS,GAEbI,MAAO,CACHP,KAAMQ,OACNL,QAAS,KAGjBS,SAAU,CACNI,gBACW,GAAM,GAAGF,KAAKT,QAGzBiO,0BAEWxN,KAAKG,QADE,EACYH,KAAK4M,sBAEnCa,0BACUC,MAAQ1N,KAAK4M,2BACZ5M,KAAKG,QAAQuN,MAAM1N,KAAKiN,uBAEnCU,+BACUD,MAAQ1N,KAAK4M,oBACL5M,KAAKiN,4BACZjN,KAAKG,QAAQuN,MAAM1N,KAAKmN,4BAEnCS,+BACUF,MAAQ1N,KAAK4M,oBACL5M,KAAKiN,qBACLjN,KAAKmN,iCACZnN,KAAKG,QAAQuN,MAAM1N,KAAKqN,4BAEnCQ,2BACUH,MAAQ1N,KAAK4M,oBACL5M,KAAKiN,qBACLjN,KAAKmN,0BACLnN,KAAKqN,iCACZrN,KAAKG,QAAQuN,MAAM1N,KAAK+M,yBAIvCzM,QAAS,CACLH,QAAQqH,MAAOG,WACLvH,EAAI,GAAM,GAAGJ,KAAKT,OAElBuO,GAAc,EAARtG,MAAUzO,EAChBsH,EAAU,EAANsH,IAAQ5O,SACX,sBAAW,CAAC,GAAG,IAAI,CAACqH,EAAEA,GAAG,CAAC0N,GAAGzN,GAAI,IAAItH,IAEhDgU,6BACO/M,KAAKf,MAAMoM,SAAW,EACd,GACFrL,KAAKf,MAAM9D,UAAY6E,KAAKf,MAAM5D,eAC/B2E,KAAKf,MAAM3D,eAAiB0E,KAAKf,MAAMrE,UAAYoF,KAAKf,MAAMoM,SAE/D,GAGf4B,4BACOjN,KAAKf,MAAMoM,SAAW,EACdrL,KAAKf,MAAM9D,UAAY6E,KAAKf,MAAMoM,SAElC,GAGf8B,iCACOnN,KAAKf,MAAMoM,SAAW,EACdrL,KAAKf,MAAM5D,eAAiB2E,KAAKf,MAAMoM,SAEvC,GAGfgC,iCACOrN,KAAKf,MAAMoM,SAAW,EACdrL,KAAKf,MAAM3D,eAAiB0E,KAAKf,MAAMoM,SAEvC,GAGfuB,2BACO5M,KAAKf,MAAMoM,SAAW,EACdrL,KAAKf,MAAMrE,SAAWoF,KAAKf,MAAMoM,SAEjC,IAInB9K,SAAW,6rCAuBfpH,IAAI4F,UAAU,kBAAkB,CAC5BC,MAAO,CACHC,MAAQ,CACJC,KAAMqE,OACNlE,QAAS,iBAAmB,KAEhC4B,UAAW,CACP/B,KAAMsE,QACNnE,SAAS,GAEb2B,YAAa,CACT9B,KAAMsE,QACNnE,SAAS,IAGjBO,KAAI,KACO,IAGXE,SAAU,CACN5E,oBACO8E,KAAKf,MAAM/D,WACH8E,KAAKf,MAAM/D,WAEX,eAInBoF,QAAS,GAGTC,SAAW,idAUfpH,IAAI4F,UAAU,gBAAgB,CAC1BC,MAAO,CACHC,MAAQ,CACJC,KAAMqE,OACNlE,QAAS,iBAAmB,KAEhC4B,UAAW,CACP/B,KAAMsE,QACNnE,SAAS,GAEb2B,YAAa,CACT9B,KAAMsE,QACNnE,SAAS,IAGjBO,KAAI,KACO,IAGXE,SAAU,CACN5E,oBACO8E,KAAKf,MAAM/D,WACH8E,KAAKf,MAAM/D,WAEX,eAInBoF,QAAS,GAETC,SAAW,6KAOfpH,IAAI4F,UAAU,eAAe,CACzBC,MAAO,CACHC,MAAQ,CACJC,KAAMqE,OACNlE,QAAS,iBAAmB,KAEhC4B,UAAW,CACP/B,KAAMsE,QACNnE,SAAS,GAEb2B,YAAa,CACT9B,KAAMsE,QACNnE,SAAS,IAGjBO,KAAI,KACO,IAGXE,SAAU,CACN5E,oBACO8E,KAAKf,MAAM/D,WACH8E,KAAKf,MAAM/D,WAEX,eAInBuK,YAGAnF,QAAS,GAETC,SAAW,4KAOfpH,IAAI4F,UAAU,eAAe,CACzBC,MAAO,CACHC,MAAQ,CACJC,KAAMqE,OACNlE,QAAS,iBAAmB,KAEhC4B,UAAW,CACP/B,KAAMsE,QACNnE,SAAS,GAEb2B,YAAa,CACT9B,KAAMsE,QACNnE,SAAS,IAGjBO,KAAI,KACO,CACHc,KAAMxG,QAAQ4C,QAGtBgD,SAAU,CACN5E,oBACW8E,KAAKf,MAAMnC,MAAMiR,OAAO,YAAY,cAE/CC,qBAIa,IAHFhO,KAAKf,MAAMnC,MAAMiR,OAIT,QAFA,YAKnBE,mBAEW,CACH5C,SAAWrL,KAAKf,MAAMnC,MAAMoR,aAAclO,KAAKf,MAAMnC,MAAMoR,aAAa,EACxE/S,UAAY6E,KAAKf,MAAMnC,MAAMqR,YAAanO,KAAKf,MAAMnC,MAAMqR,YAAY,EACvE9S,eAAgB,EAChBC,eAAgB,EAChBV,SAAU,IAGlBwT,oBACOpO,KAAKf,MAAMnC,MAAMoR,aAAa,OACvBjO,SAAWD,KAAKf,MAAMnC,MAAMqR,YAAYnO,KAAKf,MAAMnC,MAAMoR,oBACxDlO,KAAKG,QAAQ,EAAEF,gBAEf,IAGfoO,sBACOrO,KAAKf,MAAMnC,MAAM5B,WAAW,OACrB+E,SAAWD,KAAKf,MAAMnC,MAAM5B,WAAWqQ,SAASvL,KAAKf,MAAMnC,MAAM5B,WAAWoT,aAC3EtO,KAAKG,QAAQ,EAAEF,gBAEf,IAGfsO,yBACevO,KAAKf,MAAMnC,MAAMiR,QACjB/N,KAAKgB,aACJhB,KAAKf,MAAMnC,MAAM5B,YACd8E,KAAKf,MAAMnC,MAAM5B,WAAWqQ,UAAYvL,KAAKf,MAAMnC,MAAM5B,WAAWoT,QAI3FhO,QAAS,CACLH,QAAQqH,MAAOG,WAGLmG,GAAc,EAARtG,MAAUzO,EAChBsH,EAAW,EAANsH,IAAQ5O,EAAE,WACd,sBAAW,CAAC,GAAG,IAAI,CAJhB,OAIsB,CAAC+U,GAAGzN,GAAI,IAAItH,IAEhDsR,eAAeD,YACLE,EAAI,sBAAsBC,KAAKH,aAClCE,EACS,GAAEA,EAAE,sBAAsBA,EAAE,KAE7BF,MAGfoE,mBAAmBC,UACXA,SACO,iBAEA,WAGfpF,gBAAgBoF,UACRA,SACO,eAEA,eAGfrD,OAAOqD,UACCA,SACO,WAEA,cAInBlO,SAAW"}
\ No newline at end of file
+{"version":3,"file":"report-viewer-components.min.js","sources":["../src/report-viewer-components.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint no-unused-vars: warn */\n/*eslint max-len: [\"error\", { \"code\": 160 }] */\n/*eslint-disable no-trailing-spaces */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {SimpleLine} from './simpleline/simpleline';\nimport {get_strings} from 'core/str';\nimport {load_strings} from './util/string-helper';\nimport {format_date,studyplanPageTiming,studyplanTiming} from './util/date-helper';\nimport {call} from 'core/ajax';\nimport notification from 'core/notification';\nimport {svgarcpath} from './util/svgarc';\nimport Debugger from './util/debugger';\nimport Config from 'core/config';\nimport {ProcessStudyplan, ProcessStudyplanPage, objCopy} from './studyplan-processor';\n\nimport TSComponents from './treestudyplan-components';\n\n// Make π available as a constant\nconst π = Math.PI;\n// Gravity value for arrow lines - determines how much a line is pulled in the direction of the start/end before changing direction\nconst LINE_GRAVITY = 1.3;\n\n\nexport default {\n    install(Vue/*,options*/){\n        Vue.use(TSComponents);\n        let debug = new Debugger(\"treestudyplan-viewer\");\n        let lastCaller = null;\n        /**\n         * Scroll current period into view\n         * @param {*} handle A key to pass so subsequent calls with the same key won't trigger (always triggers when null or undefined)\n         */\n        function scrollCurrentIntoView(handle){\n            const elScrollContainer = document.querySelector(\".r-studyplan-scrollable\");\n            const elCurrentHeader = elScrollContainer.querySelector(\".s-studyline-header-period.current\");\n\n            if(elCurrentHeader && ((!handle) || (handle != lastCaller))){\n                lastCaller = handle;\n                elCurrentHeader.scrollIntoView({\n                    behavior: \"smooth\",\n                    block: \"start\",\n                    inline: \"center\",\n                });\n            }\n        }\n\n        let strings = load_strings({\n            report: {\n                loading: \"loadinghelp@core\",\n                studyplan_past: \"studyplan_past\",\n                studyplan_present: \"studyplan_present\",\n                studyplan_future: \"studyplan_future\",\n                back: \"back\",\n            },\n            invalid: {\n                error: 'error',\n            },\n            grading: {\n                ungraded: \"ungraded\",\n                graded: \"graded\",\n                allgraded: \"allgraded\",\n                unsubmitted: \"unsubmitted\",\n                nogrades: \"nogrades\",\n                unknown: \"unknown\",\n            },\n            completion: {\n                completed: \"completion_completed\",\n                incomplete: \"completion_incomplete\",\n                completed_pass: \"completion_passed\",\n                completed_fail: \"completion_failed\",\n                ungraded: \"ungraded\",\n                aggregation_all: \"aggregation_all\",\n                aggregation_any: \"aggregation_any\",\n                aggregation_one: \"aggregation_one\",\n                aggregation_overall_all: \"aggregation_overall_all\",\n                aggregation_overall_any: \"aggregation_overall_any\",\n                aggregation_overall_one: \"aggregation_overall_one\",\n                completion_not_configured: \"completion_not_configured\",\n                configure_completion: \"configure_completion\",\n                view_completion_report: \"view_completion_report\",\n                completion_incomplete: \"completion_incomplete\",\n                completion_failed: \"completion_failed\",\n                completion_pending: \"completion_pending\",\n                completion_progress: \"completion_progress\",\n                completion_completed: \"completion_completed\",\n                completion_good: \"completion_good\",\n                completion_excellent: \"completion_excellent\",\n                view_feedback: \"view_feedback\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                required_goal: \"required_goal\",\n                student_not_tracked: \"student_not_tracked\",\n                completion_not_enabled: \"completion_not_enabled\",\n            },\n            badge: {\n                share_badge: \"share_badge\",\n                dateissued: \"dateissued\",\n                dateexpire: \"dateexpire\",\n                badgeinfo: \"badgeinfo\",\n                badgeissuedstats: \"badgeissuedstats\",\n                completion_incomplete: \"completion_incomplete_badge\",\n                completion_completed: \"completion_completed_badge\",\n                completioninfo: \"completioninfo\",\n                badgedisabled: \"badgedisabled\"\n            },\n            course: {\n                completion_incomplete: \"completion_incomplete\",\n                completion_failed: \"completion_failed\",\n                completion_pending: \"completion_pending\",\n                completion_progress: \"completion_progress\",\n                completion_completed: \"completion_completed\",\n                completion_good: \"completion_good\",\n                completion_excellent: \"completion_excellent\",\n                view_feedback: \"view_feedback\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                required_goal: \"required_goal\",\n                student_not_tracked: \"student_not_tracked\",\n                not_enrolled: \"not_enrolled\",\n            },\n            teachercourse: {\n                select_conditions: \"select_conditions\",\n                select_grades: \"select_grades\",\n                coursetiming_past: \"coursetiming_past\",\n                coursetiming_present: \"coursetiming_present\",\n                coursetiming_future: \"coursetiming_future\",\n                grade_include: \"grade_include\",\n                grade_require: \"grade_require\",\n                required_goal: \"required_goal\",\n                student_from_plan_enrolled: \"student_from_plan_enrolled\",\n                students_from_plan_enrolled: \"students_from_plan_enrolled\",\n            },\n            pageinfo: {\n                edit: 'period_edit',\n                fullname: 'studyplan_name',\n                shortname: 'studyplan_shortname',\n                startdate: 'studyplan_startdate',\n                enddate: 'studyplan_enddate',\n                description: 'studyplan_description',\n                duration: 'studyplan_duration',\n                details: 'studyplan_details',\n            }\n\n        });\n\n        /************************************\n         *                                  *\n         * Treestudyplan Viewer components  *\n         *                                  *\n         ************************************/\n\n        /**\n         * Check if element is visible\n         * @param {Object} elem The element to check\n         * @returns {boolean} True if visible\n         */\n        function isVisible(elem){\n            return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );\n        }\n\n        // Create new eventbus for interaction between item components\n        const ItemEventBus = new Vue();\n\n        Vue.component('r-progress-circle',{\n            props: {\n                value: {\n                    type: Number,\n                },\n                max: {\n                    type: Number,\n                    default: 100,\n                },\n                min: {\n                    type: Number,\n                    default: 0,\n                },\n                stroke: {\n                    type: Number,\n                    default: 0.2,\n                },\n                bgopacity: {\n                    type: Number,\n                    default: 0.2,\n                },\n                title: {\n                    type: String,\n                    default: \"\",\n                },\n                icon: {\n                    type: String,\n                }\n\n            },\n            data() {\n                return {\n                    selectedstudyplan: null,\n                };\n            },\n            computed: {\n                range() {\n                    return this.max - this.min;\n                },\n                fraction(){\n                    if(this.max - this.min == 0){\n                        return 0;\n                        // 0 size is always empty :)\n                    } else {\n                        return (this.value - this.min)/(this.max - this.min);\n                    }\n                },\n                radius() {\n                    return 50 - (50*this.stroke);\n                },\n                arcpath() {\n                    let fraction = 0;\n                    const r = 50 - (50*this.stroke);\n                    if(this.max - this.min != 0){\n                        fraction = (this.value - this.min)/(this.max - this.min);\n                    }\n\n                    const Δ = fraction * 2*π;\n                    return svgarcpath([50,50],[r,r],[0,Δ], 1.5*π);\n                },\n            },\n            methods: {\n            },\n            template: `\n            <div style=\"display: inline-block; width: 1em; height: 1em; position:relative; padding: 0;\">\n                <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 100 100\"\n                     style=\"position: absolute;top: 0;left: 0;\">\n                    <title>{{title}}</title>\n                    <circle v-if=\"fraction >= 1.0\" cx=\"50\" cy=\"50\" :r=\"radius\"\n                        :style=\"'opacity: 1; stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'\"/>\n                    <g v-else>\n                        <circle cx=\"50\" cy=\"50\" :r=\"radius\"\n                            :style=\"'opacity: ' + bgopacity + ';stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'\"/>\n                        <path :d=\"arcpath\"\n                            :style=\"'stroke-width: ' + (stroke*100) +'; stroke: currentcolor; fill: none;'\"/>\n                    </g>\n                </svg>\n                <i v-if='icon' :class=\"'fa fa-'+icon\"\n                    style=\" position: absolute; top: 0.42em; left: 0.43em; text-align:center; display: inline-block;\n                            width:1em; font-size: 0.55em; \"\n                ></i>\n            </div>\n            `,\n        });\n\n\n        Vue.component('r-report', {\n            props: {\n                invitekey: {\n                    type: String,\n                    default() { return null;},\n                },\n                userid: {\n                    type: Number,\n                    default() { return 0;},\n                },\n                type: {\n                    type: String,\n                    default() { return \"own\";},\n                }\n            },\n            data() {\n                return {\n                    text: strings.report,\n                    studyplans: {\n                        past: [],\n                        present: [],\n                        future: [],\n                    },\n                    \n                    selectedstudyplan: null,\n                    loadingstudyplan: false,\n                    loading: true,\n                };\n            },\n            computed: {\n                teachermode() {\n                    return (this.type ==\"teaching\");\n                },\n                guestmode() {\n                    return (this.type == \"invited\");\n                },\n                verified_type() {\n                    if (! [\"invited\",\"other\",\"teaching\",\"own\"].includes(this.type)) {\n                        return \"own\";\n                    } else {\n                        return this.type;\n                    }\n                },\n                studyplancount() {\n                    return this.studyplans.past.length + this.studyplans.present.length + this.studyplans.future.length;\n                }\n            },\n            updated() {\n\n            },\n            mounted() {\n                this.loadStudyplans();\n            },\n\n            methods: {\n                call_args(o) {\n                    const args = {};\n                    if (typeof o == 'object' && !Array.isArray(o) && o !== null) {\n                        objCopy(args,o);\n                    }\n\n                    if(this.verified_type == \"invited\") {\n                        args[\"invitekey\"] = this.invitekey;\n                    } else if(this.verified_type == \"other\") {\n                        args[\"userid\"] = this.userid;\n                    } \n                    return args;\n                },\n                loadStudyplans() {\n                    const self = this;\n                    this.loading = true;\n                    call([{\n                        methodname: `local_treestudyplan_list_${this.verified_type}_studyplans`,\n                        args: this.call_args(),\n                    }])[0].done(function(response){\n\n                        const plans = { future: [], present: [], past: [], };\n\n                        for (const ix in response) {\n                            const plan = response[ix];\n                            const timing = studyplanTiming(plan);\n                            plans[timing].push(plan);\n                        }\n\n                        for (const ix in plans) {\n                            plans[ix].sort((a,b) => {\n                                const t = new Date(b.startdate).getTime() - new Date(a.startdate).getTime();\n                                if (t == 0) {\n                                    // sort by name if timing is equal\n                                    t = a.name.localeCompare(b.name);\n                                }\n                                return t;\n                            });\n                        }\n\n                        self.studyplans = plans;\n                        self.loading = false;\n\n                        if (self.studyplans.present.length == 1) {\n                            // Directly show the current study plan if it's the only one\n                            self.selectStudyplan(self.studyplans.present[0]);\n                        } else {\n                            // If there is but a single studyplan, select it anyway, even if it is not current...\n                            if (this.studyplancount == 1) {\n                                if(self.studyplans.future.lengh > 0) {\n                                    self.selectStudyplan(self.studyplans.future[0]);\n                                } else {\n                                    self.selectStudyplan(self.studyplans.past[0]);\n                                }\n                            }\n                        }\n\n                    }).fail(notification.exception);\n                },\n                selectStudyplan(plan) {\n                    const self = this;\n                    this.loadingstudyplan = true;\n                    call([{\n                        methodname: `local_treestudyplan_get_${this.verified_type}_studyplan`,\n                        args: this.call_args({\n                            studyplanid: plan.id,\n                        }),\n                    }])[0].done(function(response){\n                        self.selectedstudyplan = ProcessStudyplan(response);\n                        self.loadingstudyplan = false;\n                    }).fail(notification.exception);\n                },\n                deselectStudyplan() {\n                    this.selectedstudyplan = null;\n                    this.loadStudyplans(); // Reload the list of studyplans.\n                }\n            },\n            template: `\n            <div class='t-studyplan-container r-report-tabs'>\n                <div v-if='loading' class=\"vue-loader spinner-border text-primary\" role=\"status\"></div>\n                <template v-else>\n                    <div v-if='!loadingstudyplan && selectedstudyplan'>\n                        <div class=\"mb-2\">\n                            <a href='#' @click='deselectStudyplan'><h5 class=\"d-inline\"><i class=\"fa fa-chevron-left\"></i> {{ text.back }}</h5></a>\n                            <h4 class=\"d-inline ml-3\">{{ selectedstudyplan.name}}\n                            <s-studyplan-details \n                                class=\"mb-2\"\n                                size=\"sm\"\n                                v-model=\"selectedstudyplan\" \n                                v-if=\"selectedstudyplan.description\"\n                            ><i class='fa fa-info-circle'></i></s-studyplan-details></h4>\n                        </div>\n                        <r-studyplan\n                            v-model='selectedstudyplan'\n                            :guestmode='guestmode'\n                            :teachermode='teachermode'\n                        ></r-studyplan>\n                    </div>\n                    <div v-else-if='loadingstudyplan' class=\"vue-loader spinner-border text-primary\" role=\"status\">\n                        <span class=\"sr-only\">{{ text.loading }}</span>\n                    </div>\n                    <div v-else class='t-studyplan-notselected'>\n                        <template v-for=\"timing in ['present', 'past', 'future']\">\n                            <template v-if=\"studyplans[timing].length > 0\">\n                                <h4>{{ text[\"studyplan_\"+timing]}}:</h4>\n                                <b-card-group deck>\n                                    <s-studyplan-card\n                                        v-for='(studyplan, planindex) in studyplans[timing]'\n                                        :key='studyplan.id'\n                                        v-model='studyplans[timing][planindex]'\n                                        open\n                                        @open='selectStudyplan(studyplan)'\n                                        ></s-studyplan-card>\n                                </b-card-group>\n                            </template>\n                        </template>\n                    </div>\n                </template>\n            </div>\n            `,\n        });\n\n        Vue.component('r-studyplan', {\n            props: {\n                value: {\n                    type: Object,\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                    selectedpageindex: -1,\n                    text: strings.pageinfo,\n                };\n            },\n            computed: {\n\n                selectedpage() {\n                    return this.value.pages[this.selectedpageindex];\n                },\n                startpageindex() {\n                    let startpageindex = 0;\n                    let firststart = null;\n                    for(const ix in this.value.pages) {\n                        const page = this.value.pages[ix];\n                        debug.info(`Checking page ${ix} - timing ${studyplanPageTiming(page)}`,page);\n                        if(studyplanPageTiming(page) == \"present\") {\n                            debug.info(`Found page nr ${ix} to be present`);\n                            const s = new Date(page.startdate);\n                            if( (!firststart) || firststart > s) {\n                                startpageindex = ix;\n                                firststart = s;\n                            }\n                        }\n                    }\n                    return startpageindex;\n                }\n            },\n            methods: {\n                pageduration(page){\n                    return format_date(page.startdate,false) + \" - \" + format_date(page.enddate,false);\n                },\n                columns(page) {\n                    return 1+ (page.periods * 2);\n                },\n                columns_stylerule(page) {\n                    // Uses css variables, so width for slots and filters can be configured in css\n                    let s = \"grid-template-columns: var(--studyplan-filter-width)\"; // use css variable here\n                    for(let i=0; i<page.periods;i++){\n                        s+= \" var(--studyplan-course-width) var(--studyplan-filter-width)\";\n                    }\n                    return s+\";\";\n                },\n                countLineLayers(line,page){\n                    let maxLayer = -1;\n                    for(let i = 0; i <= page.periods; i++){\n                        const slot = line.slots[i];\n                        // Determine the amount of used layers in a studyline slit\n                        for(const ix in line.slots[i].courses){\n                            const item = line.slots[i].courses[ix];\n                            if(item.layer > maxLayer){\n                                maxLayer = item.layer;\n                            }\n                        }\n                        for(const ix in line.slots[i].filters){\n                            const item = line.slots[i].filters[ix];\n                            if(item.layer > maxLayer){\n                                maxLayer = item.layer;\n                            }\n                        }\n                    }\n                    return (maxLayer >= 0)?(maxLayer+1):1;\n                },\n                showslot(page,line,index, layeridx, type){\n                    // check if the slot should be hidden because a previous slot has an item with a span\n                    // so big that it hides this slot\n                    const forGradable = (type == 'gradable')?true:false;\n                    const periods = page.periods;\n                    let show = true;\n                    for(let i = 0; i < periods; i++){\n                        if(line.slots[index-i] && line.slots[index-i].courses){\n                            const list = line.slots[index-i].courses;\n                            for(const ix in list){ // Really wish that 'for of' would work with the minifier moodle uses\n                                const item = list[ix];\n                                if(item.layer == layeridx){\n                                    if(forGradable){\n                                        if(i > 0 && (item.span - i) > 0){\n                                            show = false;\n                                        }\n                                    } else {\n                                        if((item.span - i) >  1){\n                                            show = false;\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n\n                    return show;\n                },\n                selectedpageChanged(newTabIndex,prevTabIndex) {\n                    \n                    ItemEventBus.$emit('redrawLines', null);\n                    scrollCurrentIntoView(this.selectedpage.id);\n                }\n            },\n            mounted() {\n//                scrollCurrentIntoView(this.selectedpage.id);\n                this.$root.$emit('redrawLines');\n            },\n            updated() {\n\n                scrollCurrentIntoView(this.selectedpage.id);\n                ItemEventBus.$emit('lineHeightChange', null);\n                this.$root.$emit('redrawLines');\n                ItemEventBus.$emit('redrawLines');\n            },\n            template: `\n            <div>\n            <b-card no-body>\n                <b-tabs \n                    v-model='selectedpageindex' \n                    @activate-tab='selectedpageChanged'\n                    content-class=\"mt-1\">\n                    <b-tab\n                        v-for=\"(page,pageindex) in value.pages\"\n                        :active=\"(pageindex == startpageindex)\"\n                        :key=\"page.id\"\n                        :title-item-class=\"'s-studyplanpage-tab '+ page.timing\"\n                        ><template #title>\n                            <span v-b-tooltip.hover :title='page.fullname'>{{page.shortname}}</span>\n                            <a href=\"#\" v-b-modal=\"'studyplanpage-info-'+page.id\" class='text-info'\n                             v-if='pageindex == selectedpageindex'\n                            ><i class='fa fa-info-circle'></i></a>\n                        </template>\n                        \n                        <b-modal\n                            :id=\"'studyplanpage-info-'+page.id\"\n                            scrollable\n                            ok-only\n                            >\n                            <template #modal-title>\n                                {{page.fullname}}\n                            </template>\n                            <b-container>\n                                <b-row>\n                                    <b-col cols=\"4\"><b>{{ text.shortname}}</b></b-col>\n                                    <b-col cols=\"8\">\n                                        {{ page.shortname }}\n                                    </b-col>\n                                </b-row>\n                                <b-row>\n                                    <b-col cols=\"4\"><b>{{ text.duration}}</b></b-col>\n                                    <b-col cols=\"8\">\n                                        {{ pageduration(page) }}\n                                    </b-col>\n                                </b-row>\n                                <b-row v-if=\"page.description\">\n                                    <b-col cols=\"12\"><b>{{ text.description}}</b></b-col>\n                                </b-row>\n                                <b-row v-if=\"page.description\">\n                                    <b-col cols=\"12\">\n                                        <span v-html=\"page.description\"></span>\n                                    </b-col>\n                                </b-row>\n                            </b-container>\n                        </b-modal>\n                        <div v-if=\"page.studylines.length > 0\" class='r-studyplan-content'>\n                            <!-- First paint the headings-->\n                            <div class='r-studyplan-headings'\n                                ><s-studyline-header-heading :identifier=\"Number(page.id)\"></s-studyline-header-heading>\n                                <r-studyline-heading  v-for=\"(line,lineindex) in page.studylines\"\n                                    :key=\"line.id\"\n                                    v-model=\"page.studylines[lineindex]\"\n                                    :layers='countLineLayers(page,line)+1'\n                                    :class=\" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )\n                                            + ((lineindex==0)?' first ':' ')\n                                            + ((lineindex==page.studylines.length-1)?' last ':' ')\"\n                                ></r-studyline-heading\n                            ></div>\n                            <!-- Next, paint all the cells in the scrollable -->\n                            <div class=\"r-studyplan-scrollable\" >\n                                <div class=\"r-studyplan-timeline\" :style=\"columns_stylerule(page)\">\n                                <!-- add period information -->\n                                <template v-for=\"(n,index) in (page.periods+1)\">\n                                    <s-studyline-header-period\n                                        v-if=\"index > 0\"\n                                        v-model=\"page.perioddesc[index-1]\"\n                                        :identifier=\"Number(page.id)\"\n                                        ></s-studyline-header-period>\n                                    <div class=\"s-studyline-header-filter\"></div>\n                                </template>\n\n                                <!-- Line by line add the items -->\n                                <!-- The grid layout handles putting it in rows and columns -->\n                                <template v-for=\"(line,lineindex) in page.studylines\"\n                                    ><template v-for=\"(layernr,layeridx) in countLineLayers(page,line)\"\n                                        ><template v-for=\"(n,index) in (page.periods+1)\"\n                                            ><r-studyline-slot\n                                                v-if=\"index > 0 && showslot(page,line, index, layeridx, 'gradable')\"\n                                                type='gradable'\n                                                v-model=\"line.slots[index].courses\"\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                                                :guestmode='guestmode'\n                                                :teachermode='teachermode'\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                                            ></r-studyline-slot\n                                            ><r-studyline-slot\n                                                v-if=\"showslot(page,line, index, layeridx, 'gradable')\"\n                                                type='filter'\n                                                v-model=\"line.slots[index].filters\"\n                                                :teachermode='teachermode'\n                                                :key=\"'f-'+lineindex+'-'+index+'-'+layernr\"\n                                                :slotindex=\"index\"\n                                                :line=\"line\"\n                                                :plan=\"value\"\n                                                :page=\"page\"\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                                                        + ((index==page.periods)?' rightmost':'')\"\n                                                >\n                                            </r-studyline-slot\n                                        ></template\n                                    ></template\n                                ></template\n                                ></div\n                            ></div\n                        ></div>\n                    </b-tab>\n                </b-tabs>\n            </b-card>\n            </div>\n            `,\n        });\n\n        /*\n        * R-STUDYLINE-HEADER\n        */\n        Vue.component('r-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){\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.mainEl && (lineid == this.value.id || lineid === null)){\n                        const items = document.querySelectorAll(\n                            `.r-studyline-slot-0[data-studyline='${this.value.id}']`);\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.mainEl.style.height = heightStyle;\n                    }\n                }\n            },\n            template: `\n            <div class=\"r-studyline r-studyline-heading \"\n                :data-studyline=\"value.id\" ref=\"mainEl\"\n                ><div class=\"r-studyline-handle\" :style=\"'background-color: ' + value.color\"></div>\n                <div class=\"r-studyline-title\">\n                    <abbr v-b-tooltip.hover :title=\"value.name\">{{ value.shortname }}</abbr>\n                </div>\n            </div>\n            `,\n        });\n\n        Vue.component('r-studyline-slot', {\n            props: {\n                value: {\n                    type: Array, // item to display\n                    default(){ return [];},\n                },\n                type : {\n                    type: String,\n                    default: 'gradable',\n                },\n                slotindex : {\n                    type: Number,\n                    default: 0,\n                },\n                line : {\n                    type: Object,\n                    default(){ return null;},\n                },\n                layer : {\n                    type: Number,\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;},\n                },\n                page: {\n                    type: Object,\n                    default(){ return null;},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                },\n                period: {\n                    type: Object,\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.sizeElement){\n                            const height = self.$refs.sizeElement.getBoundingClientRect().height;\n                            ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, height);\n                        }\n                    }).observe(self.$refs.sizeElement);\n                }\n            },\n            computed: {\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                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                };\n            },\n            methods: {\n\n            },\n            template: `\n            <div :class=\"  'r-studyline-slot ' + type + ' ' + (current?'current ':' ')\n                         + 'r-studyline-slot-' + slotindex + ' '\n                         + ((slotindex==0)?'r-studyline-firstcolumn ':' ')\"\n                :data-studyline=\"line.id\" ref=\"sizeElement\"\n                :style='spanCss'\n                ><div class=\"r-slot-item\" v-if=\"item\"\n                    ><r-item\n                        v-model=\"item\"\n                        :plan=\"plan\"\n                        :guestmode='guestmode'\n                        :teachermode='teachermode'></r-item\n                    ></div\n                ></r-item\n            ></div>\n            `,\n        });\n\n\n        Vue.component('r-item', {\n            props: {\n                value :{\n                    type: Object,\n                    default: function(){ return null;},\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;}\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                    lines: [],\n                };\n            },\n            methods: {\n                lineColor(){\n                    if(this.teachermode){\n                        return \"var(--gray)\";\n                    }\n                    else{\n                        switch(this.value.completion){\n                            default: // \"incomplete\"\n                                return \"var(--gray)\";\n                            case \"failed\":\n                                return \"var(--danger)\";\n                            case \"progress\":\n                                return \"var(--warning)\";\n                            case \"completed\":\n                                return \"var(--success)\";\n                            case \"good\":\n                                return \"var(--info)\";\n                            case \"excellent\":\n                                return \"var(--blue)\";\n                        }\n                    }\n                },\n                redrawLine(conn){\n                    let lineColor = this.lineColor();\n                    // draw new line...\n                    let start = document.getElementById('studyitem-'+conn.from_id);\n                    let 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\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                redrawLines(){\n                    // Clean all old lines\n                    for(let ix in this.lines){\n                        let lineinfo = this.lines[ix];\n                        if(lineinfo && lineinfo.line){\n                            lineinfo.line.remove();\n                            lineinfo.line = undefined;\n                        }\n                    }\n\n                    // Create new lines\n                    for(let i in this.value.connections.out){\n                        let conn = this.value.connections.out[i];\n                        this.redrawLine(conn);\n                    }\n                },\n                onWindowResize(){\n                    this.redrawLines();\n                },\n                onRedrawLines(){\n                    this.redrawLines();\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 ['start','junction','finish'].includes(this.value.type);\n                }\n            },\n            created(){\n                ItemEventBus.$on('redrawLines', this.onRedrawLines);\n            },\n            mounted(){\n                // Initialize connection lines when mounting\n\n                this.redrawLines();\n                setTimeout(()=>{\n                    this.redrawLines();\n                },50);\n\n                // Add resize event listener\n                window.addEventListener('resize',this.onWindowResize);\n            },\n            beforeDestroy(){\n                for(let i in this.value.connections.out){\n                    let conn = this.value.connections.out[i];\n                    this.removeLine(conn);\n                }\n                // Remove resize event listener\n                window.removeEventListener('resize',this.onWindowResize);\n                ItemEventBus.$off('redrawLines', this.onRedrawLines);\n            },\n            beforeUpdate(){\n            },\n            updated(){\n                if(!this.dummy) {\n                    this.redrawLines();\n                }\n            },\n            template: `\n            <div class=\"r-item-base\" :id=\"'studyitem-'+value.id\" :data-x='value.type'>\n                <r-item-competency    v-if=\"value.type == 'competency'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-competency>\n                <r-item-course        v-if=\"value.type == 'course' && !teachermode\" :plan=\"plan\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-course>\n                <r-item-teachercourse v-if=\"value.type == 'course' && teachermode\" :plan=\"plan\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-teachercourse>\n                <r-item-junction      v-if=\"value.type == 'junction'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-junction>\n                <r-item-start         v-if=\"value.type == 'start'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-start>\n                <r-item-finish        v-if=\"value.type == 'finish'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-finish>\n                <r-item-badge         v-if=\"value.type == 'badge'\"\n                    v-model=\"value\" :guestmode=\"guestmode\" :teachermode=\"teachermode\" ></r-item-badge>\n                <r-item-invalid       v-if=\"value.type == 'invalid' && teachermode\"\n                    v-model=\"value\" ></r-item-invalid>\n            </div>\n            `,\n        });\n\n        Vue.component('r-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            <div class=\"r-item-invalid\">\n            <b-card no-body class=\"r-item-invalid\">\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span class=\"r-timing-indicator timing-invalid\"></span>\n                    </b-col>\n                    <b-col md=\"11\">\n                        <b-card-body class=\"align-items-center\">\n                            <i class=\"fa fa-exclamation\"></i> {{ text.error }}\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n            </b-card>\n            </div>\n            `,\n        });\n\n        //TAG: Item Course\n        Vue.component('r-item-course', {\n            props: {\n                value :{\n                    type: Object,\n                    default(){ return null;},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                teachermode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;}\n                }\n            },\n            data() {\n                return {\n                    text: strings.course,\n                };\n            },\n            computed: {\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            created(){\n            },\n            methods: {\n                completion_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                        case \"pending\":\n                            return \"question-circle\";\n                        case \"failed\":\n                            return \"times-circle\";\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"completed\":\n                            return \"check-circle\";\n                        case \"good\":\n                            return \"check-circle\";\n                        case \"excellent\":\n                            return \"check-circle\";\n                    }\n                },\n                circle_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return null;\n                        case \"failed\":\n                            return \"times\";\n                        case \"progress\":\n                            return \"exclamation\";\n                        case \"completed\":\n                            return \"check\";\n                        case \"good\":\n                            return \"check\";\n                        case \"excellent\":\n                            return \"check\";\n                    }\n                },\n            },\n            template: `\n            <div :class=\"'r-item-competency completion-'+value.completion\">\n            <b-card no-body >\n                <b-row no-gutters>\n                    <b-col md=\"1\">\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'r-timing-indicator timing-'+value.course.timing\"></span>\n                    </b-col>\n                    <b-col md=\"11\" class=\"align-items-center\">\n                        <b-card-body >\n                            <template v-if='!value.course.enrolled'>\n                                <i v-b-popover.top\n                                    class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                    :title=\"text.student_not_tracked\"></i>\n                            </template>\n                            <template v-else-if='value.course.completion'>\n                                <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                    :value='value.course.completion.progress'\n                                    :max='value.course.completion.count'\n                                    :min='0'\n                                    :class=\"'r-course-result r-completion-'+value.completion\"\n                                    :icon='circle_icon(value.completion)'\n                                    :title=\"text['completion_'+value.completion]\"\n                                ></r-progress-circle>\n                                <i v-else v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <template v-else>\n                                <i v-b-popover.top\n                                    :class=\"'r-course-result fa fa-'+completion_icon(value.completion)+\n                                            ' r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                            </template>\n                            <a  v-b-modal=\"'r-item-course-details-'+value.id\"\n                                :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):'#'\"\n                                @click.prevent.stop=''\n                                >{{ value.course.displayname }}</i></a>\n                        </b-card-body>\n                    </b-col>\n                </b-row>\n\n                <b-modal\n                    :id=\"'r-item-course-details-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):undefined\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(\" / \")}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div class=\"r-completion-detail-header\">\n                                <template v-if='!value.course.enrolled'>\n                                    {{text.not_enrolled}}\n                                    <i v-b-popover.top\n                                        class=\"r-course-result fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                        :title=\"text.student_not_tracked\"></i>\n                                </template>\n                                <template v-else-if='value.course.completion'>\n                                    {{text['completion_'+value.completion]}}\n                                    <r-progress-circle v-if='[\"failed\",\"progress\",\"incomplete\"].includes(value.completion)'\n                                        :value='value.course.completion.progress'\n                                        :max='value.course.completion.count'\n                                        :min='0'\n                                        :title=\"text['completion_'+value.completion]\"\n                                        :class=\"'r-progress-circle-popup r-completion-'+value.completion\"\n                                        :icon='circle_icon(value.completion)'\n                                    ></r-progress-circle\n                                    ><i v-else v-b-popover.top\n                                    :class=\"'fa fa-'+completion_icon(value.completion)+\n                                            ' r-progress-icon-popup r-completion-'+value.completion\"\n                                    :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                                <template v-else>\n                                    {{text['completion_'+value.completion]}}\n                                    <i  :class=\"'fa fa-'+completion_icon(value.completion)+' r-completion-'+value.completion\"\n                                        :title=\"text['completion_'+value.completion]\"></i>\n                                </template>\n                            </div>\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-studentgrades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value'\n                        :guestmode='guestmode'></r-item-studentgrades>\n                    <r-item-studentcompletion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        :guestmode='guestmode'></r-item-studentcompletion>\n                </b-modal>\n            </b-card></div>\n            `,\n        });\n\n        //TAG: Selected activities dispaly\n        Vue.component('r-item-studentgrades',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n            },\n            data() {\n                return {\n                    text: strings.course,\n                };\n            },\n            computed: {\n                pendingsubmission(){\n                    let result = false;\n                    for(const ix in this.value.course.grades){\n                        const g = this.value.course.grades[ix];\n                        if(g.pendingsubmission){\n                            result = true;\n                            break;\n                        }\n                    }\n                    return result;\n                },\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            },\n            methods: {\n                completion_icon(completion) {\n                    switch(completion){\n                        default: // case \"incomplete\"\n                            return \"circle-o\";\n                        case \"pending\":\n                            return \"question-circle\";\n                        case \"failed\":\n                            return \"times-circle\";\n                        case \"progress\":\n                            return \"exclamation-circle\";\n                        case \"completed\":\n                            return \"check-circle\";\n                        case \"good\":\n                            return \"check-circle\";\n                        case \"excellent\":\n                            return \"check-circle\";\n                    }\n                },\n            },\n            template: `\n            <table class=\"r-item-course-grade-details\">\n                <tr v-for=\"g in value.course.grades\">\n                    <td><span class=\"r-activity-icon\" :title=\"g.typename\" v-html=\"g.icon\"></span\n                        ><a\n                        :href=\"(!guestmode)?(g.link):undefined\" target=\"_blank\"><span v-html=\"g.name\"></span></a>\n                        <abbr v-if=\"useRequiredGrades && g.required\" :title=\"text.required_goal\"\n                            :class=\"'s-required ' + g.completion\"\n                            ><i class='fa fa-asterisk' ></i\n                        ></abbr>\n                    </td>\n                    <td><span :class=\"' r-completion-'+g.completion\">{{g.grade}}</span></td>\n                    <td><i :class=\"'fa fa-'+completion_icon(g.completion)+' r-completion-'+g.completion\"\n                        :title=\"text['completion_'+g.completion]\"></i>\n                        <i v-if='g.pendingsubmission' :title=\"text['completion_pending']\"\n                            class=\"r-pendingsubmission fa fa-clock-o\"></i></td>\n                    <td v-if=\"g.feedback\">\n                        <a  v-b-modal=\"'r-grade-feedback-'+g.id\"\n                            href=\"#\"\n                        >{{ text[\"view_feedback\"]}}</a>\n                        <b-modal\n                            :id=\"'r-grade-feedback-'+g.id\"\n                            size=\"sm\"\n                            ok-only\n                            centered\n                            scrollable\n                        >\n                            <template #modal-header>\n                                <h2><i class=\"fa fa-graduation-cap\"></i>{{ value.course.fullname }}</h2><br>\n                                <span class=\"r-activity-icon\" :title=\"g.typename\" v-html=\"g.icon\"></span>{{g.name}}\n                            </template>\n                            <span v-html=\"g.feedback\"></span>\n                        </b-modal>\n                    </td>\n                </tr>\n            </table>\n            `,\n        });\n\n        //TAG: Core completion version of student course info\n        Vue.component('r-item-studentcompletion',{\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            },\n            computed: {\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                completion_tag(cgroup){\n                    return cgroup.completion?'completed':'incomplete';\n                },\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                requirementHTML(requirements) {\n                    const rqs = requirements.split(/, */);\n                    let html = \"\";\n                    for(const ix in rqs) {\n                        const rq = rqs[ix];\n                        html += `${rq}<br>`;\n                    }\n                    return html;\n                },\n                addTargetBlank(html) {\n                    const m = /^([^<]*\\< *a +)(.*)/.exec(html);\n                    if(m){\n                        return `${m[1]} target=\"_blank\" ${m[2]}`;\n                    } else {\n                        return html;\n                    }\n                }\n            },\n            template: `\n            <table class=\"r-item-course-grade-details\">\n                <tr v-if=\"hasCompletions\">\n                    <td colspan='2'\n                        ><span v-if=\"value.conditions.length <= 1\">{{ text.aggregation_overall_one }}</span\n                        ><span v-else if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                        ><span v-else>{{ text.aggregation_overall_any }}</span\n                    ></td>\n                </tr>\n                <tr v-else>\n                    <td colspan='2'>{{text.completion_not_configured}}!\n                    </td>\n                </tr>\n                <template v-for='cgroup in value.conditions' v-if='value.enabled && value.tracked'>\n                    <tr>\n                        <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                        ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                        ><span v-else>{{ text.aggregation_any}}</span></span\n                        ><span v-else>{{ text.aggregation_one }}</span>\n                        {{ cgroup.title.toLowerCase() }}:\n                        </th>\n                        <th><r-progress-circle v-if=\"cgroup.progress < cgroup.count\"\n                                :value='cgroup.progress'\n                                :max='cgroup.count'\n                                :class=\"'r-completion-'+cgroup.status\"\n                                :title=\"text['completion_'+cgroup.status]\"\n                            ></r-progress-circle>\n                            <i v-else :class=\"'fa fa-check-circle r-completion-'+cgroup.status\"></i>\n                            </th>\n                    </tr>\n                    <tr v-for='ci in cgroup.items'>\n                        <td><span v-if='guestmode'>{{ci.title}}</span>\n                            <span v-else v-html='addTargetBlank(ci.details.criteria)'></span>\n                            <a href=\"#\" v-b-tooltip.click.hover.right.html=\"{ customClass: 'r-tooltip ' + ci.status}\"\n                                :title=\"requirementHTML(ci.details.requirement)\"\n                                class=\"text-primary\"><i  v-if=\"ci.details.requirement\"\n                                class='fa fa-question-circle'\n                                ></i></a>\n                        <td\n                            ><span :class=\"' r-completion-'+ci.status\">{{ci.grade}}</span>\n                            <span v-if=\"ci.warning\"\n                                ><i class=\"text-primary fa fa-exclamation-triangle\"\n                                    v-b-tooltip.hover.right.click=\"{ customClass: 'r-tooltip info' }\"\n                                    :title=\"ci.warning\"\n                                ></i\n                            ></span\n                        ></td>\n                        <td><i :class=\"'fa fa-'+completion_icon(ci.status)+' r-completion-'+ci.status\"\n                            :title=\"text['completion_'+ci.status]\"></i>\n                            <i v-if='ci.pending' :title=\"text['completion_pending']\"\n                                class=\"r-pendingsubmission fa fa-clock-o\"></i>\n                        </td>\n                        <td v-if=\"ci.feedback\">\n                            <a  v-b-modal=\"'r-grade-feedback-'+ci.id\"\n                                href=\"#\"\n                            >{{ text[\"view_feedback\"]}}</a>\n                            <b-modal\n                                :id=\"'r-grade-feedback-'+ci.id\"\n                                size=\"sm\"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class=\"fa fa-graduation-cap\"></i>{{ course.fullname }}</h2><br>\n                                    <span class=\"r-activity-icon\" :title=\"ci.typename\" v-html=\"ci.icon\"></span>{{ci.name}}\n                                </template>\n                                <span v-html=\"ci.feedback\"></span>\n                            </b-modal>\n                        </td>\n                    </tr>\n                </template>\n                <template v-else>\n                    <tr v-if='! value.enabled'>\n                        <td colspan='4'>{{text.completion_not_enabled}}</td>\n                    </tr>\n                    <tr v-else>\n                        <td colspan='4'>{{text.student_not_tracked}}</td>\n                    </tr>\n                </template>\n            </table>\n            `,\n        });\n\n        //TAG: Teacher course\n        Vue.component('r-item-teachercourse', {\n            props: {\n                value :{\n                    type: Object,\n                    default(){ return null;}\n                },\n                guestmode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                teachermode: {\n                    type: Boolean,\n                    default(){ return false;}\n                },\n                plan: {\n                    type: Object,\n                    default(){ return null;}\n                }\n            },\n            data() {\n                return {\n                    text: strings.teachercourse,\n                    txt: {\n                        grading: strings.grading,\n                    }\n                };\n            },\n            computed: {\n                course_grading_needed(){\n                    return this.course_grading_state();\n                },\n                course_grading_icon(){\n                    return this.determine_grading_icon(this.course_grading_state());\n                },\n                filtered_grades(){\n                    return this.value.course.grades.filter(g => g.selected);\n                },\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                isCompletable() {\n                    let completable = false;\n                    if(this.value.course.completion){\n                        if(this.value.course.completion.conditions.length > 0){\n                            completable = true;\n                        }\n                    } else if (this.value.course.grades){\n                        if(this.value.course.grades.length > 0){\n                            completable = true;\n                        }\n                    }\n\n                    return completable;\n                },\n                progress_circle() { //INFO:\n                    const status = {\n                        students: 0,\n                        completed: 0,\n                        completed_pass: 0,\n                        completed_fail: 0,\n                        ungraded: 0,\n                    };\n\n                    if(this.value.course.completion){\n                        for(const cond of this.value.course.completion.conditions){\n                            for(const itm of cond.items){\n                                if(itm.progress){\n                                    status.students += itm.progress.students;\n                                    status.completed += itm.progress.completed;\n                                    status.completed_pass += itm.progress.completed_pass;\n                                    status.completed_fail += itm.progress.completed_fail;\n                                    status.ungraded += itm.progress.ungraded;\n                                }\n                            }\n                        }\n\n                    } else if (this.value.course.grades){\n                        for( const g of this.value.course.grades){\n                            if(g.grading){\n                                status.students += g.grading.students;\n                                status.completed += g.grading.completed;\n                                status.completed_pass += g.grading.completed_pass;\n                                status.completed_fail += g.grading.completed_fail;\n                                status.ungraded += g.grading.ungraded;\n                            }\n                        }\n                    }\n\n                    return status;\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            created(){\n\n            },\n            methods: {\n                course_grading_state(){\n                    let ungraded = 0;\n                    let unknown = 0;\n                    let graded = 0;\n                    let allgraded = 0;\n                    const grades = this.filtered_grades;\n\n                    if(!Array.isArray(grades) || grades == 0){\n                        return 'nogrades';\n                    }\n\n                    for(const ix in grades){\n                        const grade = grades[ix];\n                        if(grade.grading){\n                            if(Number(grade.grading.ungraded) > 0){\n                                ungraded++;\n                            }\n                            else if(Number(grade.grading.graded) > 0) {\n                                if(Number(grade.grading.graded) == Number(grade.grading.students)){\n                                    allgraded++;\n                                } else {\n                                    graded++;\n                                }\n                            }\n                        } else {\n                            unknown = true;\n                        }\n                    }\n\n                    if(ungraded > 0){\n                        return 'ungraded';\n                    } else if(unknown) {\n                        return 'unknown';\n                    } else if(graded){\n                        return 'graded';\n                    } else if(allgraded){\n                        return 'allgraded';\n                    } else {\n                        return 'unsubmitted';\n                    }\n                },\n                determine_grading_icon(gradingstate){\n                    switch(gradingstate){\n                        default: // \"nogrades\":\n                            return \"circle-o\";\n                        case \"ungraded\":\n                            return \"exclamation-circle\";\n                        case \"unknown\":\n                            return \"question-circle-o\";\n                        case \"graded\":\n                            return \"check\";\n                        case \"allgraded\":\n                            return \"check\";\n                        case \"unsubmitted\":\n                            return \"dot-circle-o\";\n                    }\n                },\n            },\n            template: `\n            <div  :class=\"'r-item-competency '+ (value.course.amteacher?'r-course-am-teacher':'')\">\n            <b-card no-body>\n                <div class='d-flex flex-wrap mr-0 ml-0'>\n                    <div>\n                        <span\n                            :title=\"text['coursetiming_'+value.course.timing]\"\n                            v-b-popover.hover.top=\"startdate+' - '+enddate\"\n                            :class=\"'r-timing-indicator timing-'+value.course.timing\"></span>\n                    </div>\n                    <div class=\"flex-fill align-items-center\">\n                        <b-card-body>\n                            <a  v-b-modal=\"'r-item-course-details-'+value.id\"\n                                :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):'#'\"\n                                @click.prevent.stop=''\n                                >{{ value.course.displayname }}</i></a>\n                            <r-completion-circle class=\"r-course-graded\" :disabled=\"!isCompletable\"\n                                v-model=\"progress_circle\"></r-completion-circle>\n                        </b-card-body>\n                    </div>\n                </div>\n                <b-modal\n                    v-if=\"true\"\n                    :id=\"'r-item-course-details-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"(!guestmode)?('/course/view.php?id='+value.course.id):undefined\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a>\n                                <r-item-teacher-gradepicker v-model=\"value\"\n                                    v-if=\"value.course.grades && value.course.grades.length > 0\"\n                                    :useRequiredGrades=\"useRequiredGrades\"\n                                    :plan=\"plan\"\n                                ></r-item-teacher-gradepicker>\n                                <a v-if='!!value.course.completion && value.course.amteacher'\n                                    :href=\"'/course/completion.php?id='+value.course.id\"  target=\"_blank\"\n                                    :title=\"text.configure_completion\"><i class=\"fa fa-gear\"></i></a>\n                            </h1>\n                            {{ value.course.context.path.join(\" / \") }}\n                            <div class='mt-1 text-info'>\n                            <span v-if='value.course.numenrolled != 1'>{{ value.course.numenrolled }} {{ text.students_from_plan_enrolled }}</span>\n                              <span v-else> 1 {{ text.student_from_plan_enrolled }} </span>\n                            </div>\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div class=\"r-completion-detail-header\">\n                                <r-completion-circle class=\"r-progress-circle-popup\" :disabled=\"!isCompletable\"\n                                    v-model=\"progress_circle\"></r-completion-circle>\n                            </div>\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{ text['coursetiming_'+value.course.timing] }}<br>\n                                {{ startdate }} - {{ enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <r-item-teachergrades\n                        v-if='!!value.course.grades && value.course.grades.length > 0'\n                        v-model='value.course'\n                        :useRequiredGrades=\"useRequiredGrades\"\n                        ></r-item-teachergrades>\n                    <r-item-teachercompletion\n                        v-if='!!value.course.completion'\n                        v-model='value.course.completion'\n                        :course='value.course'\n                        ></r-item-teachercompletion>\n                </b-modal>\n\n            </b-card>\n            </div>\n            `,\n        });\n\n\n    //TAG: Select activities to use in grade overview\n    Vue.component('r-item-teacher-gradepicker', {\n        props: {\n            value : {\n                type: Object, // Item\n                default: function(){ return {};},\n            },\n            useRequiredGrades: {\n                type: Boolean,\n                default(){ return null;}\n            }\n        },\n        data() {\n            return {\n                text: strings.teachercourse,\n            };\n        },\n        computed: {\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        template: `\n            <a  v-if=\"value.course.canselectgradables\" href='#'\n                                        v-b-modal=\"'r-item-course-config-'+value.id\"\n                                        @click.prevent.stop=''\n                                        ><i class='fa fa-cog'></i>\n                <b-modal v-if='value.course.canselectgradables'\n                    :id=\"'r-item-course-config-'+value.id\"\n                    :title=\"value.course.displayname + ' - ' + value.course.fullname\"\n                    ok-only\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><a :href=\"'/course/view.php?id='+value.course.id\" target=\"_blank\"\n                                ><i class=\"fa fa-graduation-cap\"></i> {{ value.course.fullname }}</a></h1>\n                            {{ value.course.context.path.join(\" / \")}} / {{value.course.displayname}}\n                        </div>\n                        <div class=\"r-course-detail-header-right\">\n                            <div :class=\"'r-timing-'+value.course.timing\">\n                                {{text['coursetiming_'+value.course.timing]}}<br>\n                                {{ value.course.startdate }} - {{ value.course.enddate }}\n                            </div>\n                        </div>\n                    </template>\n                    <b-form-group\n                        :label=\"text.select_grades\"\n                        ><ul class=\"t-item-module-children\">\n                            <li class=\"t-item-course-gradeinfo\">\n                                <span class='t-item-course-chk-lbl'>{{text.grade_include}}</span\n                                ><span v-if=\"useRequiredGrades\"  class='t-item-course-chk-lbl'>{{text.grade_require}}</span>\n                            </li>\n                            <li class=\"t-item-course-gradeinfo\" v-for=\"g in value.course.grades\">\n                                <b-form-checkbox inline\n                                    @change=\"includeChanged($event,g)\" v-model=\"g.selected\"\n                                    ></b-form-checkbox>\n                                <b-form-checkbox v-if=\"useRequiredGrades\" inline :disabled=\"!g.selected\"\n                                    @change=\"requiredChanged($event,g)\" v-model=\"g.required\"\n                                    ></b-form-checkbox>\n                                <span :title=\"g.typename\" v-html=\"g.icon\"></span><a\n                                    :href=\"g.link\" target=\"_blank\">{{g.name}}</a>\n                                <s-edit-mod\n                                    :title=\"value.course.fullname\"\n                                    @saved=\"(fd) => g.name = fd.get('name')\"\n                                    v-if=\"g.cmid > 0\"\n                                    :cmid=\"g.cmid\"\n                                    :coursectxid=\"value.course.ctxid\"\n                                    genericonly></s-edit-mod>\n                            </li>\n                        </ul>\n                    </b-form-group>\n                </b-modal>\n            </a>\n        `,\n    });\n\n\n\n    //TAG: Selected activities dispaly\n    Vue.component('r-item-teachergrades',{\n        props: {\n            value : {\n                type: Object,\n                default: function(){ return {};},\n            },\n            useRequiredGrades: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        data() {\n            return {\n                text: strings.teachercourse,\n                txt: {\n                    grading: strings.grading,\n                }\n            };\n        },\n        computed: {\n            pendingsubmission(){\n                let result = false;\n                for(const ix in this.value.grades){\n                    const g = this.value.grades[ix];\n                    if(g.pendingsubmission){\n                        result = true;\n                        break;\n                    }\n                }\n                return result;\n            },\n            filtered_grades(){\n                return this.value.grades.filter(g => g.selected);\n            },\n        },\n        methods: {\n            determine_grading_icon(gradingstate){\n                switch(gradingstate){\n                    default: // \"nogrades\":\n                        return \"circle-o\";\n                    case \"ungraded\":\n                        return \"exclamation-circle\";\n                    case \"unknown\":\n                        return \"question-circle-o\";\n                    case \"graded\":\n                        return \"check\";\n                    case \"allgraded\":\n                        return \"check\";\n                    case \"unsubmitted\":\n                        return \"dot-circle-o\";\n                }\n            },\n            grading_icon(grade){\n                return this.determine_grading_icon(this.is_grading_needed(grade));\n            },\n            is_grading_needed(grade){\n                if(grade.grading){\n                    if(grade.grading.ungraded){\n                        return 'ungraded';\n                    }\n                    else if(grade.grading.completed_pass || grade.grading.completed || grade.grading.completed_fail) {\n                        if(Number(grade.grading.completed) + Number(grade.grading.completed_pass)\n                            + Number(grade.grading.completed_fail)\n                             == Number(grade.grading.students)){\n                            return 'allgraded';\n                        }\n                        else {\n                            return 'graded';\n                        }\n                    }\n                    else {\n                        return 'unsubmitted';\n                    }\n                } else {\n                    return 'unknown';\n                }\n            },\n\n        },\n        template: `\n        <div>\n            <table class=\"r-item-course-grade-details\">\n                <tr v-for=\"g in filtered_grades\">\n                    <td><span class=\"r-activity-icon\" :title=\"g.typename\" v-html=\"g.icon\"></span\n                        ><a\n                        :href=\"g.gradinglink\"\n                        target=\"_blank\" :title=\"g.name\"><span v-html=\"g.name\"></span></a>\n                        <s-edit-mod\n                            :title=\"value.fullname\"\n                            @saved=\"(fd) => g.name = fd.get('name')\"\n                            v-if=\"g.cmid > 0\"\n                            :cmid=\"g.cmid\"\n                            :coursectxid=\"value.ctxid\"\n                            genericonly></s-edit-mod>\n                        <abbr v-if=\"useRequiredGrades && g.required\" :title=\"text.required_goal\"\n                            :class=\"'s-required ' + is_grading_needed(g)\"\n                            ><i class='fa fa-asterisk' ></i\n                        ></abbr>\n                    </td>\n                    <td v-if='g.grading'\n                        ><i :class=\"'r-course-grading fa fa-'+grading_icon(g)+' r-graded-'+is_grading_needed(g)\"\n                        :title=\"txt.grading[is_grading_needed(g)]\"></i>\n                    </td>\n                    <td v-if='g.grading'>\n                        <r-completion-bar v-model=\"g.grading\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                    </td>\n                </tr>\n            </table>\n        </div>\n        `,\n    });\n\n    //TAG: Core completion version of student course info\n    Vue.component('r-item-teachercompletion',{\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            completionreport(){\n                return `${Config.wwwroot}/report/completion/index.php?course=${this.course.id}`;\n            }\n        },\n        methods: {\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        template: `\n        <table class=\"r-item-course-grade-details\">\n            <tr v-if=\"hasCompletions\">\n                <td colspan='2'\n                    ><span v-if=\"value.conditions.length <= 1\">{{ text.aggregation_overall_one }}</span\n                    ><span v-else if=\"value.aggregation == 'all'\">{{ text.aggregation_overall_all}}</span\n                    ><span v-else>{{ text.aggregation_overall_any }}</span\n                ></td>\n            </tr>\n            <tr v-else>\n                <td colspan='2'>{{text.completion_not_configured}}!\n                <span v-if=\"course.amteacher\">\n                    <br><a :href=\"'/course/completion.php?id='+course.id\" target='_blank'>{{text.configure_completion}}</a>\n                </span>\n                </td>\n            </tr>\n            <template v-for='cgroup in value.conditions'>\n                <tr>\n                    <th colspan='2'><span v-if=\"cgroup.items.length > 1\"\n                    ><span v-if=\"cgroup.aggregation == 'all'\">{{ text.aggregation_all}}</span\n                    ><span v-else>{{ text.aggregation_any}}</span></span\n                    ><span v-else>{{ text.aggregation_one }}</span>\n                    {{ cgroup.title.toLowerCase() }}:\n                    </th>\n                </tr>\n                <tr v-for='ci in cgroup.items'>\n                    <td><span v-html='ci.details.criteria'></span>\n                        <a  href=\"#\" v-b-tooltip.click\n                            :title=\"ci.details.requirement\"\n                            class='text-info'><i  v-if=\"ci.details.requirement\"\n                            class='fa fa-question-circle'\n                            ></i></a>\n                    </td>\n                    <td>\n                        <r-completion-bar v-model=\"ci.progress\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                    </td>\n                </tr>\n            </template>\n            <tr><td colspan='2' class='pt-2'>\n                <a target=\"_blank\" :href='completionreport'>{{ text.view_completion_report}}\n                <i class='fa fa-external-link'></i></a></td></tr>\n        </table>\n        `,\n    });\n\n\n        Vue.component('r-grading-bar',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                width: {\n                    type: Number,\n                    default: 150,\n                },\n                height: {\n                    type: Number,\n                    default: 15,\n                }\n            },\n            data() {\n                return {\n                    text: strings.grading,\n                };\n            },\n            computed: {\n                width_unsubmitted() {\n                    return this.width * this.fraction_unsubmitted();\n                },\n                width_graded() {\n                    return this.width * this.fraction_graded();\n                },\n                width_ungraded() {\n                    return this.width * this.fraction_ungraded();\n                },\n                count_unsubmitted(){\n                    return (this.value.students - this.value.graded - this.value.ungraded);\n                }\n            },\n            methods: {\n                fraction_unsubmitted() {\n                    if(this.value.students > 0){\n                        return 1 - ((this.value.graded + this.value.ungraded) / this.value.students);\n                    } else {\n                        return 1;\n                    }\n                },\n                fraction_graded() {\n                    if(this.value.students > 0){\n                        return this.value.graded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_ungraded() {\n                    if(this.value.students > 0){\n                        return this.value.ungraded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n            },\n            template: `\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_graded+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-graded'\n                        :title=\"text.graded+ ' (' + this.value.graded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_unsubmitted+'px'}\"\n                        class='r-grading-bar-segment r-grading-bar-unsubmitted'\n                        :title=\"text.unsubmitted + ' (' + count_unsubmitted + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            `,\n        });\n\n        Vue.component('r-completion-bar',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {\n                        students: 0,\n                        completed: 0,\n                        completed_pass: 0,\n                        completed_fail: 0,\n                        ungraded: 0,\n                    };},\n                },\n                width: {\n                    type: Number,\n                    default: 150,\n                },\n                height: {\n                    type: Number,\n                    default: 15,\n                }\n            },\n            data() {\n                return {\n                    text: strings.completion,\n                };\n            },\n            computed: {\n                width_incomplete() {\n                    return this.width * this.fraction_incomplete();\n                },\n                width_completed() {\n                    return this.width * this.fraction_completed();\n                },\n                width_completed_pass() {\n                    return this.width * this.fraction_completed_pass();\n                },\n                width_completed_fail() {\n                    return this.width * this.fraction_completed_fail();\n                },\n                width_ungraded() {\n                    return this.width * this.fraction_ungraded();\n                },\n                count_incomplete(){\n                    return (this.value.students - this.value.completed - this.value.completed_pass\n                             - this.value.completed_fail - this.value.ungraded);\n                }\n            },\n            methods: {\n                fraction_incomplete() {\n                    if(this.value.students > 0){\n                        return 1 - (\n                            (this.value.completed + this.value.completed_pass +\n                             this.value.completed_fail + this.value.ungraded) / this.value.students);\n                    } else {\n                        return 1;\n                    }\n                },\n                fraction_completed() {\n                    if(this.value.students > 0){\n                        return this.value.completed / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_pass() {\n                    if(this.value.students > 0){\n                        return this.value.completed_pass / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_fail() {\n                    if(this.value.students > 0){\n                        return this.value.completed_fail / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_ungraded() {\n                    if(this.value.students > 0){\n                        return this.value.ungraded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n            },\n            template: `\n            <span class=\"r-grading-bar\" :style=\"{height: height+'px'}\"\n                ><span  :style=\"{height: height+'px', width: width_ungraded+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-ungraded'\n                        :title=\"text.ungraded + ' (' + this.value.ungraded + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed'\n                        :title=\"text.completed + ' (' + this.value.completed + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_pass+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-pass'\n                        :title=\"text.completed_pass + ' (' + this.value.completed_pass + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_completed_fail+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-completed-fail'\n                        :title=\"text.completed_fail + ' (' + this.value.completed_fail + ')'\" v-b-popover.hover.top\n                ></span\n                ><span  :style=\"{height: height+'px', width: width_incomplete+'px'}\"\n                        class='r-grading-bar-segment r-completion-bar-incomplete'\n                        :title=\"text.incomplete + ' (' + count_incomplete + ')'\" v-b-popover.hover.top\n                ></span\n            ></span>\n            `,\n        });\n\n        Vue.component('r-completion-circle',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {\n                        students: 10,\n                        completed: 2,\n                        completed_pass: 2,\n                        completed_fail: 2,\n                        ungraded: 2,\n                    };},\n                },\n                stroke: {\n                    type: Number,\n                    default: 0.2,\n                },\n                disabled: {\n                    type: Boolean,\n                    default: false,\n                },\n                title: {\n                    type: String,\n                    default: \"\",\n                }\n            },\n            computed: {\n                radius() {\n                    return 50 - (50*this.stroke);\n                },\n\n                arcpath_ungraded() {\n                    const begin = 0;\n                    return this.arcpath(begin,this.fraction_ungraded());\n                },\n                arcpath_completed() {\n                    const begin = this.fraction_ungraded();\n                    return this.arcpath(begin,this.fraction_completed());\n                },\n                arcpath_completed_pass() {\n                    const begin = this.fraction_ungraded()\n                                + this.fraction_completed();\n                    return this.arcpath(begin,this.fraction_completed_pass());\n                },\n                arcpath_completed_fail() {\n                    const begin = this.fraction_ungraded()\n                                + this.fraction_completed()\n                                + this.fraction_completed_pass();\n                    return this.arcpath(begin,this.fraction_completed_fail());\n                },\n                arcpath_incomplete() {\n                    const begin = this.fraction_ungraded()\n                                + this.fraction_completed()\n                                + this.fraction_completed_pass()\n                                + this.fraction_completed_fail();\n                    return this.arcpath(begin,this.fraction_incomplete());\n                },\n\n            },\n            methods: {\n                arcpath(start, end) {\n                    const r = 50 - (50*this.stroke);\n\n                    const t1  = start * 2*π;\n                    const Δ = end * 2*π;\n                    return svgarcpath([50,50],[r,r],[t1,Δ], 1.5*π);\n                },\n                fraction_incomplete() {\n                    if(this.value.students > 0){\n                        return 1 - (\n                            (this.value.completed + this.value.completed_pass +\n                                this.value.completed_fail + this.value.ungraded) / this.value.students);\n                    } else {\n                        return 1;\n                    }\n                },\n                fraction_completed() {\n                    if(this.value.students > 0){\n                        return this.value.completed / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_pass() {\n                    if(this.value.students > 0){\n                        return this.value.completed_pass / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_completed_fail() {\n                    if(this.value.students > 0){\n                        return this.value.completed_fail / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n                fraction_ungraded() {\n                    if(this.value.students > 0){\n                        return this.value.ungraded / this.value.students;\n                    } else {\n                        return 0;\n                    }\n                },\n            },\n            template: `\n            <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 100 100\">\n                <title>{{title}}</title>\n                <circle cx=\"50\" cy=\"50\" :r=\"radius\"\n                    :style=\"'stroke-width: ' + (stroke*100)+'; stroke: #ccc; fill: none;'\"/>\n                <path :d=\"arcpath_ungraded\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--warning); fill: none;'\"/>\n                <path :d=\"arcpath_completed\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--info); fill: none;'\"/>\n                <path :d=\"arcpath_completed_pass\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--success); fill: none;'\"/>\n                <path :d=\"arcpath_completed_fail\"\n                    :style=\"'stroke-width: ' + (stroke*100) +'; stroke: var(--danger); fill: none;'\"/>\n\n                <circle v-if=\"disabled\" cx=\"50\" cy=\"50\" :r=\"radius/2\"\n                    :style=\"'fill: var(--dark);'\"/>\n                <circle v-else-if=\"value.ungraded > 0\" cx=\"50\" cy=\"50\" :r=\"radius/2\"\n                    :style=\"'fill: var(--warning);'\"/>\n            </g>\n            </svg>\n            `,\n        });\n\n        Vue.component('r-item-junction',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                completion(){\n                    if(this.value.completion){\n                        return this.value.completion;\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            methods: {\n\n            },\n            template: `\n            <div :class=\"'r-item-junction r-item-filter completion-'+completion\">\n                <i v-if=\"value.completion=='incomplete'\" class=\"fa fa-circle-o\"></i>\n                <i v-else-if=\"value.completion=='failed'\" class=\"fa fa-times-circle\"></i>\n                <i v-else-if=\"value.completion=='progress'\" class=\"fa fa-exclamation-circle\"></i>\n                <i v-else class=\"fa fa-check-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('r-item-finish',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                completion(){\n                    if(this.value.completion){\n                        return this.value.completion;\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            methods: {\n            },\n            template: `\n            <div :class=\"'r-item-finish r-item-filter completion-'+completion\">\n                <i class=\"fa fa-stop-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('r-item-start',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                };\n            },\n            computed: {\n                completion(){\n                    if(this.value.completion){\n                        return this.value.completion;\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            created(){\n\n            },\n            methods: {\n            },\n            template: `\n            <div :class=\"'r-item-start r-item-filter completion-'+completion\">\n                <i class=\"fa fa-play-circle\"></i>\n            </div>\n            `,\n        });\n\n        Vue.component('r-item-badge',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                teachermode: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                    text: strings.badge,\n                };\n            },\n            computed: {\n                completion() {\n                    return this.value.badge.issued?\"completed\":\"incomplete\";\n                },\n                issued_icon(){\n                    switch(this.value.badge.issued){\n                        default: // \"nogrades\":\n                            return \"circle-o\";\n                        case true:\n                            return \"check\";\n                    }\n                },\n                issuestats(){\n                    // so the r-completion-bar can be used to show issuing stats\n                    return {\n                        students: (this.value.badge.studentcount)?this.value.badge.studentcount:0,\n                        completed: (this.value.badge.issuedcount)?this.value.badge.issuedcount:0,\n                        completed_pass: 0,\n                        completed_fail: 0,\n                        ungraded: 0,\n                    };\n                },\n                arcpath_issued(){\n                    if(this.value.badge.studentcount){\n                        const fraction = this.value.badge.issuedcount/this.value.badge.studentcount;\n                        return this.arcpath(0,fraction);\n                    } else {\n                        return \"\"; // no path\n                    }\n                },\n                arcpath_progress(){\n                    if(this.value.badge.completion){\n                        const fraction = this.value.badge.completion.progress/this.value.badge.completion.count;\n                        return this.arcpath(0,fraction);\n                    } else {\n                        return \"\"; // no path\n                    }\n                },\n                badgeinprogress(){\n                    return  (  this.value.badge.issued\n                            || this.teachermode\n                            || (this.value.badge.completion \n                                && this.value.badge.completion.progress >= this.value.badge.completion.count)\n                    );\n                }\n            },\n            methods: {\n                arcpath(start, end) {\n                    const r = 44;\n\n                    const t1  = start * 2*π;\n                    const Δ = (end * 2*π-0.01);\n                    return svgarcpath([50,50],[r,r],[t1,Δ], 1.5*π);\n                },\n                addTargetBlank(html) {\n                    const m = /^([^<]*\\< *a +)(.*)/.exec(html);\n                    if(m){\n                        return `${m[1]} target=\"_blank\" ${m[2]}`;\n                    } else {\n                        return html;\n                    }\n                },\n                completion_icon_rq(complete) {\n                    if (complete) {\n                        return \"check-square-o\";\n                    } else {\n                        return \"square-o\";\n                    }\n                },\n                completion_icon(complete) {\n                    if (complete) {\n                        return \"check-circle\";\n                    } else {\n                        return \"times-circle\";\n                    }\n                },\n                status(complete) {\n                    if (complete) {\n                        return \"complete\";\n                    } else {\n                        return \"incomplete\";\n                    }\n                }\n            },\n            template: `\n            <div :class=\"'r-item-badge r-item-filter r-completion-'+completion\" v-b-tooltip.hover :title=\"value.badge.name\">\n                <a v-b-modal=\"'r-item-badge-details-'+value.id\"\n                ><svg class=\"r-badge-backdrop \" width='50px' height='50px' viewBox=\"0 0 100 100\">\n                    <title>{{value.badge.name}}</title>\n                    <template v-if=\"teachermode\">\n                        <circle cx=\"50\" cy=\"50\" r=\"44\"\n                            style=\"stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;\"/>\n                        <path :d=\"arcpath_issued\"\n                            :style=\"'stroke-width: 8; stroke: var(--info); fill: none;'\"/>\n                    </template>\n                    <circle v-else-if=\"value.badge.issued\" cx=\"50\" cy=\"50\" r=\"46\"\n                        style=\"stroke: currentcolor; stroke-width: 4; fill: currentcolor; fill-opacity: 0.5;\"/>\n                    <template v-else-if=\"value.badge.completion\">\n                        <circle cx=\"50\" cy=\"50\" r=\"44\"\n                            style=\"stroke: #ccc; stroke-width: 8; fill: #ddd; fill-opacity: 0.8;\"/>\n                        <path :d=\"arcpath_progress\"\n                            :style=\"'stroke-width: 8; stroke: var(--info); fill: none;'\"/>\n                    </template>\n                    <circle v-else cx=\"50\" cy=\"50\" r=\"46\"\n                        stroke-dasharray=\"6 9\"\n                        style=\"stroke: #999; stroke-width: 6; fill: #ddd; fill-opacity: 0.8;\"/>\n                    <image class=\"badge-image\" clip-path=\"circle() fill-box\"\n                        :href=\"value.badge.imageurl\" x=\"12\" y=\"12\" width=\"76\" height=\"76\"\n                        :style=\"(badgeinprogress)?'':'opacity: 0.4;'\" />\n                </svg></a>\n\n                <b-modal\n                    :id=\"'r-item-badge-details-'+value.id\"\n                    :title=\"value.badge.name\"\n                    size=\"lg\"\n                    ok-only\n                    centered\n                    scrollable\n                    >\n                    <template #modal-header>\n                        <div>\n                            <h1><i class=\"fa fa-certificate\"></i>\n                                <a :href=\"(!guestmode)?(value.badge.infolink):undefined\" target=\"_blank\"\n                                >{{ value.badge.name }}</a\n                            ></h1>\n                        </div>\n                        <div class=\"r-course-detail-header-right\" v-if=\"!teachermode\">\n                            <div class=\"r-completion-detail-header\">\n                                {{ text['completion_'+completion] }}\n                                <i v-b-popover.hover :class=\"'fa fa-'+issued_icon+' r-completion-'+completion\"\n                                    :title=\"text['completion_'+completion]\"></i>\n                            </div>\n                        </div>\n                    </template>\n                    <b-container fluid>\n                        <b-row><b-col cols=\"3\">\n                            <img :src=\"value.badge.imageurl\"/>\n                        </b-col><b-col cols=\"9\">\n                            <p>{{value.badge.description}}</p>\n                            <ul v-if=\"value.badge.issued\" class=\"list-unstyled pt-1 mb-1 border-grey border-top\">\n                                <li><strong><i class=\"fa fa-calendar-check-o r-completion-complete-pass\"></i>\n                                    {{text.dateissued}}:</strong> {{ value.badge.dateissued }}</li>\n                                <li v-if='value.badge.dateexpired'\n                                ><strong><i class=\"fa fa-calendar-times-o r-completion-complete\"></i>\n                                    {{text.dateexpired}}:</strong> {{ value.badge.dateexpired }}</li>\n                                <li><strong><i class=\"fa fa-share-alt r-completion-complete-pass\"></i>\n                                    <a :href=\"value.badge.issuedlink\">{{text.share_badge}}</a></strong> </li>\n                            </ul>\n                            <table v-if='value.badge.completion && !value.badge.issued' class=\"r-item-course-grade-details mb-2\">\n                                <tr v-if=\"value.badge.completion.types.length > 1\">\n                                    <th colspan=\"2\"><span v-html=\"value.badge.completion.title\"></span></th>\n                                </tr>\n                                <template v-for='cgroup in value.badge.completion.types' >\n                                    <tr>\n                                        <td colspan=\"2\" v-if=\"value.badge.completion.types.length > 1\"\n                                            ><span v-html=\"cgroup.title\"></span></td>\n                                        <th colspan=\"2\" v-else><span v-html=\"cgroup.title\"></span></th>\n                                    </tr>\n                                    <template v-for='ci in cgroup.criteria'>\n                                        <tr>\n                                            <td class=\"pl-3\"><span v-if='guestmode'><span v-html=\"ci.title\"></span></span>\n                                                <a target='_blank' v-else-if='ci.link' :href='ci.link'\n                                                    ><span v-html=\"ci.title\"></span></a>\n                                                <span v-else><span v-html=\"ci.title\"></span></span>\n                                            <td><i :class=\"'fa fa-'+completion_icon(ci.completed)+' r-completion-'+status(ci.completed)\"\n                                                :title=\"text['completion_'+status(ci.completed)]\"></i>\n                                            </td>\n                                        </tr>\n                                        <template v-if=\"ci.requirements.length > 1\">\n                                            <tr v-for=\"rq in ci.requirements\">\n                                                <td class=\"pl-4\" colspan=\"2\"\n                                                    ><i :class=\"'fa fa-'+completion_icon_rq(rq.completed)+' r-completion-incomplete'\"\n                                                    :title=\"text['completion_'+status(rq.completed)]\"></i>\n                                                    <span class=\"t-badge-criteria-requirement\"><span v-html=\"rq.title\"></span></span></td>\n                                            </tr>\n                                        </template>\n                                    </template>\n                                </template>\n                                <tr v-if=\"!value.badge.active\" class=\"mt-1\">\n                                    <td colspan=\"2\" class=\"alert alert-warning alert-block\">{{text.badgedisabled}}</td>\n                                </tr>\n                            </table>\n                            <ul class=\"list-unstyled w-100 border-grey border-top border-bottom pt-1 pb-1 mb-1\"\n                             v-if=\"value.badge.criteria\"><li v-for=\"crit in value.badge.criteria\"\n                             ><span v-html='crit'></span></li></ul>\n                            <p v-if=\"(!guestmode)\"><strong><i class=\"fa fa-link\"></i>\n                                <a :href=\"value.badge.infolink\" target=\"_blank\"\n                                    >{{ text.badgeinfo }}</a></strong></p>\n                            <p v-if=\"teachermode && !guestmode\"\n                                >{{text.badgeissuedstats}}:<br>\n                                <r-completion-bar v-model=\"issuestats\" :width=\"150\" :height=\"15\"></r-completion-bar>\n                            </p>\n                        </b-col></b-row>\n                    </b-container>\n                </b-modal>\n            </div>\n            `,\n        });\n    },\n};"],"names":["π","Math","PI","install","Vue","use","TSComponents","debug","Debugger","lastCaller","scrollCurrentIntoView","handle","elCurrentHeader","document","querySelector","scrollIntoView","behavior","block","inline","strings","report","loading","studyplan_past","studyplan_present","studyplan_future","back","invalid","error","grading","ungraded","graded","allgraded","unsubmitted","nogrades","unknown","completion","completed","incomplete","completed_pass","completed_fail","aggregation_all","aggregation_any","aggregation_one","aggregation_overall_all","aggregation_overall_any","aggregation_overall_one","completion_not_configured","configure_completion","view_completion_report","completion_incomplete","completion_failed","completion_pending","completion_progress","completion_completed","completion_good","completion_excellent","view_feedback","coursetiming_past","coursetiming_present","coursetiming_future","required_goal","student_not_tracked","completion_not_enabled","badge","share_badge","dateissued","dateexpire","badgeinfo","badgeissuedstats","completioninfo","badgedisabled","course","not_enrolled","teachercourse","select_conditions","select_grades","grade_include","grade_require","student_from_plan_enrolled","students_from_plan_enrolled","pageinfo","edit","fullname","shortname","startdate","enddate","description","duration","details","isVisible","elem","offsetWidth","offsetHeight","getClientRects","length","ItemEventBus","component","props","value","type","Number","max","default","min","stroke","bgopacity","title","String","icon","data","selectedstudyplan","computed","range","this","fraction","radius","arcpath","r","Δ","methods","template","invitekey","userid","text","studyplans","past","present","future","loadingstudyplan","teachermode","guestmode","verified_type","includes","studyplancount","updated","mounted","loadStudyplans","call_args","o","args","Array","isArray","self","methodname","done","response","plans","ix","plan","push","sort","a","b","t","Date","getTime","name","localeCompare","selectStudyplan","lengh","fail","notification","exception","studyplanid","id","deselectStudyplan","Object","Boolean","selectedpageindex","selectedpage","pages","startpageindex","firststart","page","info","s","pageduration","columns","periods","columns_stylerule","i","countLineLayers","line","maxLayer","slots","courses","item","layer","filters","showslot","index","layeridx","forGradable","show","list","span","selectedpageChanged","newTabIndex","prevTabIndex","$emit","$root","layers","layerHeights","created","$on","onLineHeightChange","lineid","$refs","mainEl","items","querySelectorAll","heightSum","forEach","el","height","getBoundingClientRect","heightStyle","style","slotindex","period","resizeListener","ResizeObserver","sizeElement","observe","itm","current","now","pstart","pend","spanCss","lines","lineColor","redrawLine","conn","start","getElementById","from_id","end","to_id","remove","SimpleLine","color","gravity","redrawLines","lineinfo","undefined","connections","out","onWindowResize","onRedrawLines","removeLine","hasConnectionsOut","hasConnectionsIn","hasContext","setTimeout","window","addEventListener","beforeDestroy","removeEventListener","$off","beforeUpdate","dummy","noenddate","completion_icon","circle_icon","pendingsubmission","result","grades","useRequiredGrades","aggregation_info","completion_tag","cgroup","hasCompletions","conditions","requirementHTML","requirements","rqs","split","html","addTargetBlank","m","exec","txt","course_grading_needed","course_grading_state","course_grading_icon","determine_grading_icon","filtered_grades","filter","g","selected","isCompletable","completable","progress_circle","status","students","cond","progress","grade","gradingstate","includeChanged","newValue","required","requiredChanged","grading_icon","is_grading_needed","stringkeys","key","then","completionreport","Config","wwwroot","width","width_unsubmitted","fraction_unsubmitted","width_graded","fraction_graded","width_ungraded","fraction_ungraded","count_unsubmitted","width_incomplete","fraction_incomplete","width_completed","fraction_completed","width_completed_pass","fraction_completed_pass","width_completed_fail","fraction_completed_fail","count_incomplete","disabled","arcpath_ungraded","arcpath_completed","begin","arcpath_completed_pass","arcpath_completed_fail","arcpath_incomplete","t1","issued","issued_icon","issuestats","studentcount","issuedcount","arcpath_issued","arcpath_progress","count","badgeinprogress","completion_icon_rq","complete"],"mappings":"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"}
\ No newline at end of file
diff --git a/amd/build/treestudyplan-components.min.js b/amd/build/treestudyplan-components.min.js
index 468234a..868ea00 100644
--- a/amd/build/treestudyplan-components.min.js
+++ b/amd/build/treestudyplan-components.min.js
@@ -1,3 +1,3 @@
-define("local_treestudyplan/treestudyplan-components",["exports","./util/string-helper","./util/date-helper"],(function(_exports,_stringHelper,_dateHelper){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;var _default={studyplanTiming(plan){const now=(new Date).getTime(),dates=(0,_dateHelper.studyplanDates)(plan);return dates.start<now?dates.end&&now>dates.end?"past":"present":"future"},install(Vue){let strings=(0,_stringHelper.load_strings)({studyplancard:{open:"open",noenddate:"noenddate",idnumber:"studyplan_idnumber",description:"studyplan_description",completed:"completed",details:"studyplan_details"},details:{details:"studyplan_details"}});const ItemEventBus=new Vue;Vue.component("s-studyplan-card",{props:{value:{type:Object},open:{type:Boolean}},data:()=>({text:strings.studyplancard}),computed:{timing(){const now=(new Date).getTime(),startdate=new Date(this.value.pages[0].startdate).getTime(),enddate=new Date(this.value.pages[0].enddate).getTime();let timing="future";return startdate<now&&(timing=this.value.pages[0].enddate&&now>enddate?"past":"present"),timing},dates(){const dates=(0,_dateHelper.studyplanDates)(this.value);return{start:(0,_dateHelper.format_date)(dates.start),end:dates.end?(0,_dateHelper.format_date)(dates.end):this.text.noenddate}},width_completed(){return this.value.progress?100*this.value.progress:0},width_incomplete(){return this.value.progress?100*(1-this.value.progress):100},percentage_complete(){return this.value.progress?Math.round(100*this.value.progress)+"%":"0%"}},methods:{onOpenClick(e){this.$emit("open",e)}},template:"\n            <b-card\n                :class=\"'s-studyplan-card timing-' + timing\"\n            >\n                <template #header></template>\n                \n                <div class='s-studyplan-card-content'>\n                    <div class='s-studyplan-card-icon'><img :src='value.icon'></div>\n                    <div class='s-studyplan-card-info'>\n                        <div class='s-studyplan-card-titlebar'>\n                            <b-card-title>\n                                <a v-if='open' href='#' @click.prevent='onOpenClick($event)'>{{value.name}}</a>\n                                <template v-else>{{value.name}}</template>\n                            </b-card-title>\n                            <div class='s-studyplan-card-titleslot'><slot name='title'></slot></div>\n                        </div>        \n                        <div class='s-studyplan-card-idnumber' v-if='value.idnumber'>\n                        {{ text.idnumber }}: {{ value.idnumber }}\n                        </div>\n                        <div class='s-studyplan-card-progress' v-if='value.progress !== undefined && value.progress !== null'>\n                            <div class=\"s-studyplan-card-progressbar\"\n                            ><span v-if=\"width_completed > 0\"\n                                   :style=\"{width: width_completed+'%'}\"\n                                   class='s-studyplan-card-progress-segment s-studyplan-card-progress-completed'\n                            ></span\n                            ><span :style=\"{width: width_incomplete+'%'}\"\n                                   class='s-studyplan-card-progress-segment s-studyplan-card-progress-incomplete'\n                            ></span\n                            ></div>\n                            <div class=\"s-studyplan-card-progresstext\">\n                                {{ percentage_complete}} {{ text.completed.toLowerCase() }} \n                            </div>\n                        </div>\n                    </div>\n                    \n                </div>\n                <slot></slot>\n                <template #footer>\n                    <span :class=\"'t-timing-'+timing\" v-html=\"dates.start + ' - '+ dates.end\"></span>\n                    <span class=\"s-studyplan-card-buttons\">\n                    <slot name='footer'></slot>\n                    <s-studyplan-details \n                        v-model=\"value\" \n                        v-if=\"value.description\"\n                    ><i class='fa fa-info-circle'></i></s-studyplan-details>\n                    <b-button style=\"float:right;\" v-if='open' variant='primary'\n                        @click.prevent='onOpenClick($event)'>{{ text.open }}</b-button>\n                    </span>\n                </template>\n            </b-card>\n            "}),Vue.component("s-studyline-header-heading",{props:{identifier:{type:Number,default:()=>0}},data:()=>({layerHeights:{}}),created(){ItemEventBus.$on("headerHeightChange",this.onHeaderHeightChange)},computed:{},methods:{onHeaderHeightChange(newheight,identifier){this.identifier==identifier&&this.$refs.main&&(this.$refs.main.style.height=`${newheight}px`)}},template:'\n            <div class="s-studyline-header-heading" ref="main" :data-id="identifier"></div>\n            '}),Vue.component("s-studyline-header-period",{props:{value:{type:Object},identifier:{type:Number,default:()=>0}},mounted(){const self=this;1==self.value.period&&(self.resizeListener=new ResizeObserver((()=>{if(self.$refs.main){const size=self.$refs.main.getBoundingClientRect();ItemEventBus.$emit("headerHeightChange",size.height,self.identifier)}})).observe(self.$refs.main))},unmounted(){this.resizeListener&&this.resizeListener.disconnect()},computed:{startdate(){return(0,_dateHelper.format_date)(this.value.startdate)},enddate(){return(0,_dateHelper.format_date)(this.value.enddate)},current(){if(this.value&&this.value.startdate&&this.value.enddate){const now=new Date,pstart=new Date(this.value.startdate),pend=new Date(this.value.enddate);return now>=pstart&&now<pend}return!1}},data:()=>({}),template:'\n            <div :class="\'s-studyline-header-period \' + (current?\'current \':\' \')" ref="main" :data-id="identifier"\n                ><p><abbr :id="\'s-period-\'+value.id" :title="value.fullname">{{ value.shortname }}</abbr>\n                <b-tooltip\n                    :target="\'s-period-\'+value.id" triggers="hover"\n                    >{{ value.fullname }}<br>\n                    <span class="s-studyline-header-period-datespan">\n                        <span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span>\n                    </span>\n                </b-tooltip>\n                <slot></slot\n                ><p class="s-studyline-header-period-datespan small">\n                    <span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span>\n                </p>\n            </div>\n            '}),Vue.component("s-studyplan-details",{props:{value:{type:Object},variant:{type:String,default:()=>"info"},pill:{type:Boolean,default:()=>!1},size:{type:String,default:()=>""}},data:()=>({text:strings.details}),template:'\n            <span>\n                <b-button \n                    :size="size"\n                    :pill="pill"\n                    :variant="variant" \n                    v-b-modal="\'modal-description-\'+value.id"\n                ><slot><i class=\'fa fa-info-circle\'></i>\n                {{ text.details}}</slot>\n                </b-button>\n                <b-modal\n                    :title="value.name"\n                    scrollable\n                    centered\n                    ok-only\n                    content-class="s-studyplan-details"\n                    :id="\'modal-description-\'+value.id"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols="4"><img :src=\'value.icon\'></b-col>\n                            <b-col cols="8" class="pl-1">\n                                <span v-html="value.description"></span>\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </span>\n            '})}};return _exports.default=_default,_exports.default}));
+define("local_treestudyplan/treestudyplan-components",["exports","./util/string-helper","./util/date-helper"],(function(_exports,_stringHelper,_dateHelper){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;var _default={install(Vue){let strings=(0,_stringHelper.load_strings)({studyplancard:{open:"open",noenddate:"noenddate",idnumber:"studyplan_idnumber",description:"studyplan_description",completed:"completed",details:"studyplan_details"},details:{details:"studyplan_details"}});const ItemEventBus=new Vue;Vue.component("s-studyplan-card",{props:{value:{type:Object},open:{type:Boolean}},data:()=>({text:strings.studyplancard}),computed:{timing(){return(0,_dateHelper.studyplanTiming)(this.value)},dates(){const dates=(0,_dateHelper.studyplanDates)(this.value);return{start:(0,_dateHelper.format_date)(dates.start),end:dates.end?(0,_dateHelper.format_date)(dates.end):this.text.noenddate}},width_completed(){return this.value.progress?100*this.value.progress:0},width_incomplete(){return this.value.progress?100*(1-this.value.progress):100},percentage_complete(){return this.value.progress?Math.round(100*this.value.progress)+"%":"0%"}},methods:{onOpenClick(e){this.$emit("open",e)}},template:"\n            <b-card\n                :class=\"'s-studyplan-card timing-' + timing\"\n            >\n                <template #header></template>\n                \n                <div class='s-studyplan-card-content'>\n                    <div class='s-studyplan-card-icon'><img :src='value.icon'></div>\n                    <div class='s-studyplan-card-info'>\n                        <div class='s-studyplan-card-titlebar'>\n                            <b-card-title>\n                                <a class='title' v-if='open' href='#' @click.prevent='onOpenClick($event)'>{{value.name}}</a>\n                                <template v-else>{{value.name}}</template>\n                            </b-card-title>\n                            <div class='s-studyplan-card-titleslot'><slot name='title'></slot></div>\n                        </div>        \n                        <div class='s-studyplan-card-idnumber' v-if='value.idnumber'>\n                        {{ text.idnumber }}: {{ value.idnumber }}\n                        </div>\n                        <div class='s-studyplan-card-progress' v-if='value.progress !== undefined && value.progress !== null'>\n                            <div class=\"s-studyplan-card-progressbar\"\n                            ><span v-if=\"width_completed > 0\"\n                                   :style=\"{width: width_completed+'%'}\"\n                                   class='s-studyplan-card-progress-segment s-studyplan-card-progress-completed'\n                            ></span\n                            ><span :style=\"{width: width_incomplete+'%'}\"\n                                   class='s-studyplan-card-progress-segment s-studyplan-card-progress-incomplete'\n                            ></span\n                            ></div>\n                            <div class=\"s-studyplan-card-progresstext\">\n                                {{ percentage_complete}} {{ text.completed.toLowerCase() }} \n                            </div>\n                        </div>\n                    </div>\n                    \n                </div>\n                <slot></slot>\n                <template #footer>\n                    <span :class=\"'t-timing-'+timing\" v-html=\"dates.start + ' - '+ dates.end\"></span>\n                    <span class=\"s-studyplan-card-buttons\">\n                    <slot name='footer'></slot>\n                    <s-studyplan-details \n                        v-model=\"value\" \n                        v-if=\"value.description\"\n                    ><i class='fa fa-info-circle'></i></s-studyplan-details>\n                    <b-button style=\"float:right;\" v-if='open' variant='primary'\n                        @click.prevent='onOpenClick($event)'>{{ text.open }}</b-button>\n                    </span>\n                </template>\n            </b-card>\n            "}),Vue.component("s-studyline-header-heading",{props:{identifier:{type:Number,default:()=>0}},data:()=>({layerHeights:{}}),created(){ItemEventBus.$on("headerHeightChange",this.onHeaderHeightChange)},computed:{},methods:{onHeaderHeightChange(newheight,identifier){this.identifier==identifier&&this.$refs.main&&(this.$refs.main.style.height=`${newheight}px`)}},template:'\n            <div class="s-studyline-header-heading" ref="main" :data-id="identifier"></div>\n            '}),Vue.component("s-studyline-header-period",{props:{value:{type:Object},identifier:{type:Number,default:()=>0}},mounted(){const self=this;1==self.value.period&&(self.resizeListener=new ResizeObserver((()=>{if(self.$refs.main){const size=self.$refs.main.getBoundingClientRect();ItemEventBus.$emit("headerHeightChange",size.height,self.identifier)}})).observe(self.$refs.main))},unmounted(){this.resizeListener&&this.resizeListener.disconnect()},computed:{startdate(){return(0,_dateHelper.format_date)(this.value.startdate)},enddate(){return(0,_dateHelper.format_date)(this.value.enddate)},current(){if(this.value&&this.value.startdate&&this.value.enddate){const now=new Date,pstart=new Date(this.value.startdate),pend=new Date(this.value.enddate);return now>=pstart&&now<pend}return!1}},data:()=>({}),template:'\n            <div :class="\'s-studyline-header-period \' + (current?\'current \':\' \')" ref="main" :data-id="identifier"\n                ><p><abbr :id="\'s-period-\'+value.id" :title="value.fullname">{{ value.shortname }}</abbr>\n                <b-tooltip\n                    :target="\'s-period-\'+value.id" triggers="hover"\n                    >{{ value.fullname }}<br>\n                    <span class="s-studyline-header-period-datespan">\n                        <span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span>\n                    </span>\n                </b-tooltip>\n                <slot></slot\n                ><p class="s-studyline-header-period-datespan small">\n                    <span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span>\n                </p>\n            </div>\n            '}),Vue.component("s-studyplan-details",{props:{value:{type:Object},variant:{type:String,default:()=>"info"},pill:{type:Boolean,default:()=>!1},size:{type:String,default:()=>""}},data:()=>({text:strings.details}),template:'\n            <span>\n                <b-button \n                    :size="size"\n                    :pill="pill"\n                    :variant="variant" \n                    v-b-modal="\'modal-description-\'+value.id"\n                ><slot><i class=\'fa fa-info-circle\'></i>\n                {{ text.details}}</slot>\n                </b-button>\n                <b-modal\n                    :title="value.name"\n                    scrollable\n                    centered\n                    ok-only\n                    content-class="s-studyplan-details"\n                    :id="\'modal-description-\'+value.id"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols="4"><img :src=\'value.icon\'></b-col>\n                            <b-col cols="8" class="pl-1">\n                                <span v-html="value.description"></span>\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </span>\n            '})}};return _exports.default=_default,_exports.default}));
 
 //# sourceMappingURL=treestudyplan-components.min.js.map
\ No newline at end of file
diff --git a/amd/build/treestudyplan-components.min.js.map b/amd/build/treestudyplan-components.min.js.map
index 5fe9a1d..f4e8f55 100644
--- a/amd/build/treestudyplan-components.min.js.map
+++ b/amd/build/treestudyplan-components.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"treestudyplan-components.min.js","sources":["../src/treestudyplan-components.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint-disable no-trailing-spaces */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {load_strings} from './util/string-helper';\nimport {format_date, studyplanDates} from './util/date-helper';\n\nexport default {\n    studyplanTiming(plan) {\n        const now = new Date().getTime();\n        \n        const dates = studyplanDates(plan);\n\n        if(dates.start < now){\n            if( dates.end && now > dates.end) {\n                return 'past';\n            } else {\n                return 'present';\n            }\n        } else {\n            return 'future';\n        }\n    },\n\n    install(Vue/*,options*/){\n        let strings = load_strings({\n            studyplancard: {\n                open: \"open\",\n                noenddate: \"noenddate\",\n                idnumber: \"studyplan_idnumber\",\n                description: \"studyplan_description\",\n                completed: \"completed\",\n                details: \"studyplan_details\",\n            },\n            details: {\n                details: \"studyplan_details\",\n            }\n        });\n        // Create new eventbus for interaction between item components\n        const ItemEventBus = new Vue();\n\n        Vue.component('s-studyplan-card', {\n            props: {\n                value: {\n                    type: Object,\n                },\n                open: {\n                    type: Boolean\n                },\n            },\n            data() {\n                return {\n                    text: strings.studyplancard\n                };\n            },\n            computed: {\n                timing(){\n                    const now = new Date().getTime();\n                    const startdate = new Date(this.value.pages[0].startdate).getTime();\n                    const enddate = new Date(this.value.pages[0].enddate).getTime();\n                    let timing = 'future';\n                    if(startdate < now){\n                        if(this.value.pages[0].enddate && now > enddate) {\n                            timing = 'past';\n                        } else {\n                            timing = 'present';\n                        }\n                    }\n                    return timing;\n                },\n                dates(){\n                    const dates = studyplanDates(this.value);\n                    return {\n                        start: format_date(dates.start),\n                        end: (dates.end)?format_date(dates.end):this.text.noenddate,\n                    };\n                },\n                width_completed() {\n                    if(this.value.progress) {\n                        return this.value.progress * 100;\n                    } else {\n                        return 0;\n                    }\n                },\n                width_incomplete() {\n                    if(this.value.progress) {\n                        return (1-this.value.progress) * 100;\n                    } else {\n                        return 100;\n                    }\n                },\n                percentage_complete() {\n                    if(this.value.progress) {\n                        return Math.round(this.value.progress * 100) + \"%\";\n                    } else {\n                        return \"0%\";\n                    }\n                }\n            },\n            methods: {\n                onOpenClick(e) {\n                    this.$emit('open',e);\n                }\n            },\n            template: `\n            <b-card\n                :class=\"'s-studyplan-card timing-' + timing\"\n            >\n                <template #header></template>\n                \n                <div class='s-studyplan-card-content'>\n                    <div class='s-studyplan-card-icon'><img :src='value.icon'></div>\n                    <div class='s-studyplan-card-info'>\n                        <div class='s-studyplan-card-titlebar'>\n                            <b-card-title>\n                                <a v-if='open' href='#' @click.prevent='onOpenClick($event)'>{{value.name}}</a>\n                                <template v-else>{{value.name}}</template>\n                            </b-card-title>\n                            <div class='s-studyplan-card-titleslot'><slot name='title'></slot></div>\n                        </div>        \n                        <div class='s-studyplan-card-idnumber' v-if='value.idnumber'>\n                        {{ text.idnumber }}: {{ value.idnumber }}\n                        </div>\n                        <div class='s-studyplan-card-progress' v-if='value.progress !== undefined && value.progress !== null'>\n                            <div class=\"s-studyplan-card-progressbar\"\n                            ><span v-if=\"width_completed > 0\"\n                                   :style=\"{width: width_completed+'%'}\"\n                                   class='s-studyplan-card-progress-segment s-studyplan-card-progress-completed'\n                            ></span\n                            ><span :style=\"{width: width_incomplete+'%'}\"\n                                   class='s-studyplan-card-progress-segment s-studyplan-card-progress-incomplete'\n                            ></span\n                            ></div>\n                            <div class=\"s-studyplan-card-progresstext\">\n                                {{ percentage_complete}} {{ text.completed.toLowerCase() }} \n                            </div>\n                        </div>\n                    </div>\n                    \n                </div>\n                <slot></slot>\n                <template #footer>\n                    <span :class=\"'t-timing-'+timing\" v-html=\"dates.start + ' - '+ dates.end\"></span>\n                    <span class=\"s-studyplan-card-buttons\">\n                    <slot name='footer'></slot>\n                    <s-studyplan-details \n                        v-model=\"value\" \n                        v-if=\"value.description\"\n                    ><i class='fa fa-info-circle'></i></s-studyplan-details>\n                    <b-button style=\"float:right;\" v-if='open' variant='primary'\n                        @click.prevent='onOpenClick($event)'>{{ text.open }}</b-button>\n                    </span>\n                </template>\n            </b-card>\n            `,\n        });\n\n        /*\n        * S-STUDYLINE-HEADER-HEADING\n        * The only reasing this is not a simple empty div, is the fact that the header height\n        * needs to match that of the period headers\n        */\n        Vue.component('s-studyline-header-heading', {\n            props: {\n                identifier: {\n                    type: Number, // Page reference.\n                    default() { return 0;}\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('headerHeightChange', this.onHeaderHeightChange);\n            },\n            computed: {\n\n            },\n            methods: {\n                onHeaderHeightChange(newheight,identifier){\n                    if (this.identifier == identifier) {\n                        if(this.$refs.main){\n                            this.$refs.main.style.height = `${newheight}px`;\n                        }\n                    }\n                }\n            },\n            template: `\n            <div class=\"s-studyline-header-heading\" ref=\"main\" :data-id=\"identifier\"></div>\n            `,\n        });\n\n        Vue.component('s-studyline-header-period', {\n            props: {\n                value: {\n                    type: Object, // dict with layer as index\n                },\n                identifier: {\n                    type: Number, // Page reference.\n                    default() { return 0;}\n                }\n            },\n            mounted() {\n                const self=this;\n                if(self.value.period == 1){\n                    self.resizeListener = new ResizeObserver(() => {\n                        if(self.$refs.main){\n                            const size = self.$refs.main.getBoundingClientRect();\n                            ItemEventBus.$emit('headerHeightChange', size.height, self.identifier);\n                        }\n                    }).observe(self.$refs.main);\n                }\n            },\n            unmounted() {\n                if(this.resizeListener) {\n                    this.resizeListener.disconnect();\n                }\n            },\n            computed: {\n                startdate(){\n                    return format_date(this.value.startdate);\n                },\n                enddate(){\n                    return format_date(this.value.enddate);\n                },\n                current(){\n                    if( this.value && this.value.startdate && this.value.enddate){\n                        const now = new Date();\n                        const pstart = new Date(this.value.startdate);\n                        const pend = new Date(this.value.enddate);\n                        return (now >= pstart && now < pend);\n                    }\n                    else {\n                        return false;\n                    }\n                }\n\n            },\n            data() {\n                return {\n                };\n            },\n            template: `\n            <div :class=\"'s-studyline-header-period ' + (current?'current ':' ')\" ref=\"main\" :data-id=\"identifier\"\n                ><p><abbr :id=\"'s-period-'+value.id\" :title=\"value.fullname\">{{ value.shortname }}</abbr>\n                <b-tooltip\n                    :target=\"'s-period-'+value.id\" triggers=\"hover\"\n                    >{{ value.fullname }}<br>\n                    <span class=\"s-studyline-header-period-datespan\">\n                        <span class=\"date\">{{ startdate }}</span> - <span class=\"date\">{{ enddate }}</span>\n                    </span>\n                </b-tooltip>\n                <slot></slot\n                ><p class=\"s-studyline-header-period-datespan small\">\n                    <span class=\"date\">{{ startdate }}</span> - <span class=\"date\">{{ enddate }}</span>\n                </p>\n            </div>\n            `,\n        });\n\n\n        Vue.component('s-studyplan-details', {\n            props: {\n                value: {\n                    type: Object, \n                },\n                variant: {\n                    type: String,\n                    default() { return \"info\"; }\n                },\n                pill: {\n                    type: Boolean,\n                    default() { return false; }\n                },\n                size: {\n                    type: String,\n                    default() { return \"\";}\n                }\n            },\n            data() {\n                return {\n                    text: strings.details,\n                };\n            },\n            template: `\n            <span>\n                <b-button \n                    :size=\"size\"\n                    :pill=\"pill\"\n                    :variant=\"variant\" \n                    v-b-modal=\"'modal-description-'+value.id\"\n                ><slot><i class='fa fa-info-circle'></i>\n                {{ text.details}}</slot>\n                </b-button>\n                <b-modal\n                    :title=\"value.name\"\n                    scrollable\n                    centered\n                    ok-only\n                    content-class=\"s-studyplan-details\"\n                    :id=\"'modal-description-'+value.id\"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols=\"4\"><img :src='value.icon'></b-col>\n                            <b-col cols=\"8\" class=\"pl-1\">\n                                <span v-html=\"value.description\"></span>\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </span>\n            `,\n        });\n\n    }\n};"],"names":["studyplanTiming","plan","now","Date","getTime","dates","start","end","install","Vue","strings","studyplancard","open","noenddate","idnumber","description","completed","details","ItemEventBus","component","props","value","type","Object","Boolean","data","text","computed","timing","startdate","this","pages","enddate","width_completed","progress","width_incomplete","percentage_complete","Math","round","methods","onOpenClick","e","$emit","template","identifier","Number","default","layerHeights","created","$on","onHeaderHeightChange","newheight","$refs","main","style","height","mounted","self","period","resizeListener","ResizeObserver","size","getBoundingClientRect","observe","unmounted","disconnect","current","pstart","pend","variant","String","pill"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"treestudyplan-components.min.js","sources":["../src/treestudyplan-components.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint-disable no-trailing-spaces */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {load_strings} from './util/string-helper';\nimport {format_date, studyplanDates, studyplanTiming} from './util/date-helper';\n\nexport default {\n\n    install(Vue/*,options*/){\n        let strings = load_strings({\n            studyplancard: {\n                open: \"open\",\n                noenddate: \"noenddate\",\n                idnumber: \"studyplan_idnumber\",\n                description: \"studyplan_description\",\n                completed: \"completed\",\n                details: \"studyplan_details\",\n            },\n            details: {\n                details: \"studyplan_details\",\n            }\n        });\n        // Create new eventbus for interaction between item components\n        const ItemEventBus = new Vue();\n\n        Vue.component('s-studyplan-card', {\n            props: {\n                value: {\n                    type: Object,\n                },\n                open: {\n                    type: Boolean\n                },\n            },\n            data() {\n                return {\n                    text: strings.studyplancard\n                };\n            },\n            computed: {\n                timing(){\n                    return studyplanTiming(this.value);\n                },\n                dates(){\n                    const dates = studyplanDates(this.value);\n                    return {\n                        start: format_date(dates.start),\n                        end: (dates.end)?format_date(dates.end):this.text.noenddate,\n                    };\n                },\n                width_completed() {\n                    if(this.value.progress) {\n                        return this.value.progress * 100;\n                    } else {\n                        return 0;\n                    }\n                },\n                width_incomplete() {\n                    if(this.value.progress) {\n                        return (1-this.value.progress) * 100;\n                    } else {\n                        return 100;\n                    }\n                },\n                percentage_complete() {\n                    if(this.value.progress) {\n                        return Math.round(this.value.progress * 100) + \"%\";\n                    } else {\n                        return \"0%\";\n                    }\n                }\n            },\n            methods: {\n                onOpenClick(e) {\n                    this.$emit('open',e);\n                }\n            },\n            template: `\n            <b-card\n                :class=\"'s-studyplan-card timing-' + timing\"\n            >\n                <template #header></template>\n                \n                <div class='s-studyplan-card-content'>\n                    <div class='s-studyplan-card-icon'><img :src='value.icon'></div>\n                    <div class='s-studyplan-card-info'>\n                        <div class='s-studyplan-card-titlebar'>\n                            <b-card-title>\n                                <a class='title' v-if='open' href='#' @click.prevent='onOpenClick($event)'>{{value.name}}</a>\n                                <template v-else>{{value.name}}</template>\n                            </b-card-title>\n                            <div class='s-studyplan-card-titleslot'><slot name='title'></slot></div>\n                        </div>        \n                        <div class='s-studyplan-card-idnumber' v-if='value.idnumber'>\n                        {{ text.idnumber }}: {{ value.idnumber }}\n                        </div>\n                        <div class='s-studyplan-card-progress' v-if='value.progress !== undefined && value.progress !== null'>\n                            <div class=\"s-studyplan-card-progressbar\"\n                            ><span v-if=\"width_completed > 0\"\n                                   :style=\"{width: width_completed+'%'}\"\n                                   class='s-studyplan-card-progress-segment s-studyplan-card-progress-completed'\n                            ></span\n                            ><span :style=\"{width: width_incomplete+'%'}\"\n                                   class='s-studyplan-card-progress-segment s-studyplan-card-progress-incomplete'\n                            ></span\n                            ></div>\n                            <div class=\"s-studyplan-card-progresstext\">\n                                {{ percentage_complete}} {{ text.completed.toLowerCase() }} \n                            </div>\n                        </div>\n                    </div>\n                    \n                </div>\n                <slot></slot>\n                <template #footer>\n                    <span :class=\"'t-timing-'+timing\" v-html=\"dates.start + ' - '+ dates.end\"></span>\n                    <span class=\"s-studyplan-card-buttons\">\n                    <slot name='footer'></slot>\n                    <s-studyplan-details \n                        v-model=\"value\" \n                        v-if=\"value.description\"\n                    ><i class='fa fa-info-circle'></i></s-studyplan-details>\n                    <b-button style=\"float:right;\" v-if='open' variant='primary'\n                        @click.prevent='onOpenClick($event)'>{{ text.open }}</b-button>\n                    </span>\n                </template>\n            </b-card>\n            `,\n        });\n\n        /*\n        * S-STUDYLINE-HEADER-HEADING\n        * The only reasing this is not a simple empty div, is the fact that the header height\n        * needs to match that of the period headers\n        */\n        Vue.component('s-studyline-header-heading', {\n            props: {\n                identifier: {\n                    type: Number, // Page reference.\n                    default() { return 0;}\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('headerHeightChange', this.onHeaderHeightChange);\n            },\n            computed: {\n\n            },\n            methods: {\n                onHeaderHeightChange(newheight,identifier){\n                    if (this.identifier == identifier) {\n                        if(this.$refs.main){\n                            this.$refs.main.style.height = `${newheight}px`;\n                        }\n                    }\n                }\n            },\n            template: `\n            <div class=\"s-studyline-header-heading\" ref=\"main\" :data-id=\"identifier\"></div>\n            `,\n        });\n\n        Vue.component('s-studyline-header-period', {\n            props: {\n                value: {\n                    type: Object, // dict with layer as index\n                },\n                identifier: {\n                    type: Number, // Page reference.\n                    default() { return 0;}\n                }\n            },\n            mounted() {\n                const self=this;\n                if(self.value.period == 1){\n                    self.resizeListener = new ResizeObserver(() => {\n                        if(self.$refs.main){\n                            const size = self.$refs.main.getBoundingClientRect();\n                            ItemEventBus.$emit('headerHeightChange', size.height, self.identifier);\n                        }\n                    }).observe(self.$refs.main);\n                }\n            },\n            unmounted() {\n                if(this.resizeListener) {\n                    this.resizeListener.disconnect();\n                }\n            },\n            computed: {\n                startdate(){\n                    return format_date(this.value.startdate);\n                },\n                enddate(){\n                    return format_date(this.value.enddate);\n                },\n                current(){\n                    if( this.value && this.value.startdate && this.value.enddate){\n                        const now = new Date();\n                        const pstart = new Date(this.value.startdate);\n                        const pend = new Date(this.value.enddate);\n                        return (now >= pstart && now < pend);\n                    }\n                    else {\n                        return false;\n                    }\n                }\n\n            },\n            data() {\n                return {\n                };\n            },\n            template: `\n            <div :class=\"'s-studyline-header-period ' + (current?'current ':' ')\" ref=\"main\" :data-id=\"identifier\"\n                ><p><abbr :id=\"'s-period-'+value.id\" :title=\"value.fullname\">{{ value.shortname }}</abbr>\n                <b-tooltip\n                    :target=\"'s-period-'+value.id\" triggers=\"hover\"\n                    >{{ value.fullname }}<br>\n                    <span class=\"s-studyline-header-period-datespan\">\n                        <span class=\"date\">{{ startdate }}</span> - <span class=\"date\">{{ enddate }}</span>\n                    </span>\n                </b-tooltip>\n                <slot></slot\n                ><p class=\"s-studyline-header-period-datespan small\">\n                    <span class=\"date\">{{ startdate }}</span> - <span class=\"date\">{{ enddate }}</span>\n                </p>\n            </div>\n            `,\n        });\n\n\n        Vue.component('s-studyplan-details', {\n            props: {\n                value: {\n                    type: Object, \n                },\n                variant: {\n                    type: String,\n                    default() { return \"info\"; }\n                },\n                pill: {\n                    type: Boolean,\n                    default() { return false; }\n                },\n                size: {\n                    type: String,\n                    default() { return \"\";}\n                }\n            },\n            data() {\n                return {\n                    text: strings.details,\n                };\n            },\n            template: `\n            <span>\n                <b-button \n                    :size=\"size\"\n                    :pill=\"pill\"\n                    :variant=\"variant\" \n                    v-b-modal=\"'modal-description-'+value.id\"\n                ><slot><i class='fa fa-info-circle'></i>\n                {{ text.details}}</slot>\n                </b-button>\n                <b-modal\n                    :title=\"value.name\"\n                    scrollable\n                    centered\n                    ok-only\n                    content-class=\"s-studyplan-details\"\n                    :id=\"'modal-description-'+value.id\"\n                    >\n                    <b-container>\n                        <b-row>\n                            <b-col cols=\"4\"><img :src='value.icon'></b-col>\n                            <b-col cols=\"8\" class=\"pl-1\">\n                                <span v-html=\"value.description\"></span>\n                            </b-col>\n                        </b-row>\n                    </b-container>\n                </b-modal>\n            </span>\n            `,\n        });\n\n    }\n};"],"names":["install","Vue","strings","studyplancard","open","noenddate","idnumber","description","completed","details","ItemEventBus","component","props","value","type","Object","Boolean","data","text","computed","timing","this","dates","start","end","width_completed","progress","width_incomplete","percentage_complete","Math","round","methods","onOpenClick","e","$emit","template","identifier","Number","default","layerHeights","created","$on","onHeaderHeightChange","newheight","$refs","main","style","height","mounted","self","period","resizeListener","ResizeObserver","size","getBoundingClientRect","observe","unmounted","disconnect","startdate","enddate","current","now","Date","pstart","pend","variant","String","pill"],"mappings":"yPASe,CAEXA,QAAQC,SACAC,SAAU,8BAAa,CACvBC,cAAe,CACXC,KAAM,OACNC,UAAW,YACXC,SAAU,qBACVC,YAAa,wBACbC,UAAW,YACXC,QAAS,qBAEbA,QAAS,CACLA,QAAS,6BAIXC,aAAe,IAAIT,IAEzBA,IAAIU,UAAU,mBAAoB,CAC9BC,MAAO,CACHC,MAAO,CACHC,KAAMC,QAEVX,KAAM,CACFU,KAAME,UAGdC,KAAI,KACO,CACHC,KAAMhB,QAAQC,gBAGtBgB,SAAU,CACNC,gBACW,+BAAgBC,KAAKR,QAEhCS,cACUA,OAAQ,8BAAeD,KAAKR,aAC3B,CACHU,OAAO,2BAAYD,MAAMC,OACzBC,IAAMF,MAAME,KAAK,2BAAYF,MAAME,KAAKH,KAAKH,KAAKb,YAG1DoB,yBACOJ,KAAKR,MAAMa,SACmB,IAAtBL,KAAKR,MAAMa,SAEX,GAGfC,0BACON,KAAKR,MAAMa,SACuB,KAAzB,EAAEL,KAAKR,MAAMa,UAEd,KAGfE,6BACOP,KAAKR,MAAMa,SACHG,KAAKC,MAA4B,IAAtBT,KAAKR,MAAMa,UAAkB,IAExC,OAInBK,QAAS,CACLC,YAAYC,QACHC,MAAM,OAAOD,KAG1BE,SAAW,+0FA0DflC,IAAIU,UAAU,6BAA8B,CACxCC,MAAO,CACHwB,WAAY,CACRtB,KAAMuB,OACNC,QAAO,IAAY,IAG3BrB,KAAI,KACO,CACHsB,aAAc,KAGtBC,UAGI9B,aAAa+B,IAAI,qBAAsBpB,KAAKqB,uBAEhDvB,SAAU,GAGVY,QAAS,CACLW,qBAAqBC,UAAUP,YACvBf,KAAKe,YAAcA,YAChBf,KAAKuB,MAAMC,YACLD,MAAMC,KAAKC,MAAMC,OAAU,GAAEJ,iBAKlDR,SAAW,gHAKflC,IAAIU,UAAU,4BAA6B,CACvCC,MAAO,CACHC,MAAO,CACHC,KAAMC,QAEVqB,WAAY,CACRtB,KAAMuB,OACNC,QAAO,IAAY,IAG3BU,gBACUC,KAAK5B,KACa,GAArB4B,KAAKpC,MAAMqC,SACVD,KAAKE,eAAiB,IAAIC,gBAAe,QAClCH,KAAKL,MAAMC,KAAK,OACTQ,KAAOJ,KAAKL,MAAMC,KAAKS,wBAC7B5C,aAAawB,MAAM,qBAAsBmB,KAAKN,OAAQE,KAAKb,gBAEhEmB,QAAQN,KAAKL,MAAMC,QAG9BW,YACOnC,KAAK8B,qBACCA,eAAeM,cAG5BtC,SAAU,CACNuC,mBACW,2BAAYrC,KAAKR,MAAM6C,YAElCC,iBACW,2BAAYtC,KAAKR,MAAM8C,UAElCC,aACQvC,KAAKR,OAASQ,KAAKR,MAAM6C,WAAarC,KAAKR,MAAM8C,QAAQ,OACnDE,IAAM,IAAIC,KACVC,OAAS,IAAID,KAAKzC,KAAKR,MAAM6C,WAC7BM,KAAO,IAAIF,KAAKzC,KAAKR,MAAM8C,gBACzBE,KAAOE,QAAUF,IAAMG,YAGxB,IAKnB/C,KAAI,KACO,IAGXkB,SAAW,m3BAmBflC,IAAIU,UAAU,sBAAuB,CACjCC,MAAO,CACHC,MAAO,CACHC,KAAMC,QAEVkD,QAAS,CACLnD,KAAMoD,OACN5B,QAAO,IAAY,QAEvB6B,KAAM,CACFrD,KAAME,QACNsB,QAAO,KAAY,GAEvBe,KAAM,CACFvC,KAAMoD,OACN5B,QAAO,IAAY,KAG3BrB,KAAI,KACO,CACHC,KAAMhB,QAAQO,UAGtB0B,SAAW"}
\ No newline at end of file
diff --git a/amd/build/util/date-helper.min.js b/amd/build/util/date-helper.min.js
index 0df665c..559e273 100644
--- a/amd/build/util/date-helper.min.js
+++ b/amd/build/util/date-helper.min.js
@@ -1,3 +1,3 @@
-define("local_treestudyplan/util/date-helper",["exports"],(function(_exports){function format_date(d,short){d instanceof Date||(d=new Date(d));let monthformat="short";return short&&(monthformat="numeric"),d.toLocaleDateString(document.documentElement.lang,{year:"numeric",month:monthformat,day:"numeric"})}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.add_days=function(datestr,days){const date=new Date(datestr);return function(date){const d=new Date(date);let month=""+(d.getMonth()+1),day=""+d.getDate();const year=d.getFullYear();month.length<2&&(month="0"+month);day.length<2&&(day="0"+day);return[year,month,day].join("-")}(new Date(date.getTime()+864e5*days))},_exports.datespaninfo=function(first,last){first instanceof Date||(first=new Date(first));last instanceof Date||(last=new Date(last));first.setHours(0),first.setMinutes(0),first.setSeconds(0),first.setMilliseconds(0),last.setHours(23),last.setMinutes(59),last.setSeconds(59),last.setMilliseconds(999);const dayspan=Math.round((last-first+1)/864e5),years=Math.floor(dayspan/365),ydaysleft=dayspan%365,weeks=Math.floor(ydaysleft/7);return{first:first,last:last,totaldays:dayspan,years:years,weeks:weeks,days:ydaysleft%7,formatted:{first:format_date(first),last:format_date(last)}}},_exports.format_date=format_date,_exports.studyplanDates=function(plan){let earliestStart=null,latestEnd=null,openEnded=!1;for(const ix in plan.pages){const page=plan.pages[ix],s=new Date(page.startdate);if(page.enddate||(openEnded=!0),(!earliestStart||s<earliestStart)&&(earliestStart=s),page.enddate){const e=new Date(page.enddate);(!latestEnd||e>latestEnd)&&(latestEnd=e)}}return{start:earliestStart,end:openEnded?null:latestEnd}}}));
+define("local_treestudyplan/util/date-helper",["exports"],(function(_exports){function format_date(d,short){d instanceof Date||(d=new Date(d));let monthformat="short";return short&&(monthformat="numeric"),d.toLocaleDateString(document.documentElement.lang,{year:"numeric",month:monthformat,day:"numeric"})}function studyplanDates(plan){let earliestStart=null,latestEnd=null,openEnded=!1;for(const ix in plan.pages){const page=plan.pages[ix],s=new Date(page.startdate);if(page.enddate||(openEnded=!0),(!earliestStart||s<earliestStart)&&(earliestStart=s),page.enddate){const e=new Date(page.enddate);(!latestEnd||e>latestEnd)&&(latestEnd=e)}}return{start:earliestStart,end:openEnded?null:latestEnd}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.add_days=function(datestr,days){const date=new Date(datestr);return function(date){const d=new Date(date);let month=""+(d.getMonth()+1),day=""+d.getDate();const year=d.getFullYear();month.length<2&&(month="0"+month);day.length<2&&(day="0"+day);return[year,month,day].join("-")}(new Date(date.getTime()+864e5*days))},_exports.datespaninfo=function(first,last){first instanceof Date||(first=new Date(first));last instanceof Date||(last=new Date(last));first.setHours(0),first.setMinutes(0),first.setSeconds(0),first.setMilliseconds(0),last.setHours(23),last.setMinutes(59),last.setSeconds(59),last.setMilliseconds(999);const dayspan=Math.round((last-first+1)/864e5),years=Math.floor(dayspan/365),ydaysleft=dayspan%365,weeks=Math.floor(ydaysleft/7);return{first:first,last:last,totaldays:dayspan,years:years,weeks:weeks,days:ydaysleft%7,formatted:{first:format_date(first),last:format_date(last)}}},_exports.format_date=format_date,_exports.studyplanDates=studyplanDates,_exports.studyplanPageTiming=function(page){const now=(new Date).getTime(),start=new Date(page.startdate),end=page.enddate?new Date(page.enddate):null;return start<now?end&&now>end?"past":"present":"future"},_exports.studyplanTiming=function(plan){const now=(new Date).getTime(),dates=studyplanDates(plan);return dates.start<now?dates.end&&now>dates.end?"past":"present":"future"}}));
 
 //# sourceMappingURL=date-helper.min.js.map
\ No newline at end of file
diff --git a/amd/build/util/date-helper.min.js.map b/amd/build/util/date-helper.min.js.map
index ed6d86a..ea7803b 100644
--- a/amd/build/util/date-helper.min.js.map
+++ b/amd/build/util/date-helper.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"date-helper.min.js","sources":["../../src/util/date-helper.js"],"sourcesContent":["/**\n * Format a date according to localized custom\n * @param {Date|string} d The date to convert\n * @param {boolean} short Short format (default false)\n * @returns {string}\n */\nexport function format_date(d,short){\n    if(!(d instanceof Date)){\n        d = new Date(d);\n    }\n\n    let monthformat = \"short\";\n    if(short){\n        monthformat = \"numeric\";\n    }\n    return d.toLocaleDateString(document.documentElement.lang,{\n        year: 'numeric', month: monthformat, day: 'numeric'\n    });\n}\n\n/**\n * Provides standardized information about the period between two dates\n * As\n * @param {Date|string} first First day of the span\n * @param {Date|string} last Last day of the span\n * @returns {Object} Object containing formatted start and end dates and span information\n */\nexport function datespaninfo(first,last){\n    if(!(first instanceof Date)){ first = new Date(first);}\n    if(!(last instanceof Date)){ last = new Date(last);}\n\n    // Make sure the end date is at the very end of the day and the start date at the very beginning\n    first.setHours(0);\n    first.setMinutes(0);\n    first.setSeconds(0);\n    first.setMilliseconds(0);\n    last.setHours(23);\n    last.setMinutes(59);\n    last.setSeconds(59);\n    last.setMilliseconds(999);\n\n    const dayspan = Math.round(((last - first)+1)/(24*60*60*1000)); // Add one millisecond to offset the 999 ms\n    const years = Math.floor(dayspan/365); // Yes, we ignore leap years/leap days\n    const ydaysleft = dayspan % 365;\n\n    const weeks = Math.floor(ydaysleft/7);\n    const wdaysleft = ydaysleft % 7;\n\n    return {\n        first: first,\n        last: last,\n        totaldays: dayspan,\n        years: years,\n        weeks: weeks,\n        days: wdaysleft,\n        formatted: {\n            first: format_date(first),\n            last: format_date(last),\n        }\n    };\n\n}\n\n/**\n * Format a Date object to YYYY-MM-DD format\n * @param {Date} date Date object\n * @returns Date string in YYYY-MM-DD format\n */\nfunction dateYYYYMMDD(date) {\n    const d = new Date(date);\n    let month = '' + (d.getMonth() + 1);\n    let day = '' + d.getDate();\n    const year = d.getFullYear();\n\n    if (month.length < 2) {\n        month = '0' + month;\n    }\n    if (day.length < 2) {\n        day = '0' + day;\n    }\n    return [year, month, day].join('-');\n}\n\n/**\n * String formatting function - replaces {name} in string by value of same key in values parameter\n * @param {string} datestr String containing date format in YYYY-MM-DD\n * @param {int} days Object containing keys to replace {key} strings with. Make negative to subtract\n * @returns Date string in YYYY-MM-DD format\n */\nexport function add_days(datestr,days) {\n    const date = new Date(datestr);\n    const newdate = new Date(date.getTime() + (days * 86400000) ); // Add n days in ms.\n    return dateYYYYMMDD(newdate);\n}\n\n/**\n * Determine start and end dates of a studyplan\n * @param {*} plan\n * @returns\n */\nexport function studyplanDates(plan) {\n    let earliestStart = null;\n    let latestEnd = null;\n    let openEnded = false;\n    for(const ix in plan.pages) {\n        const page = plan.pages[ix];\n        const s = new Date(page.startdate);\n        if (! page.enddate) {\n            openEnded = true; // One of the pages has no end date set...\n        }\n\n        if (!earliestStart || s < earliestStart) {\n            earliestStart = s;\n        }\n\n        if ( page.enddate ) {\n            const e = new Date(page.enddate);\n            if (!latestEnd || e > latestEnd) {\n                latestEnd = e;\n            }\n        }\n    }\n    return {\n        start: earliestStart,\n        end: (openEnded)?null:latestEnd,\n    };\n}"],"names":["format_date","d","short","Date","monthformat","toLocaleDateString","document","documentElement","lang","year","month","day","datestr","days","date","getMonth","getDate","getFullYear","length","join","dateYYYYMMDD","getTime","first","last","setHours","setMinutes","setSeconds","setMilliseconds","dayspan","Math","round","years","floor","ydaysleft","weeks","totaldays","formatted","plan","earliestStart","latestEnd","openEnded","ix","pages","page","s","startdate","enddate","e","start","end"],"mappings":"uFAMgBA,YAAYC,EAAEC,OACrBD,aAAaE,OACdF,EAAI,IAAIE,KAAKF,QAGbG,YAAc,eACfF,QACCE,YAAc,WAEXH,EAAEI,mBAAmBC,SAASC,gBAAgBC,KAAK,CACtDC,KAAM,UAAWC,MAAON,YAAaO,IAAK,+FAyEzBC,QAAQC,YACvBC,KAAO,IAAIX,KAAKS,yBAtBJE,YACZb,EAAI,IAAIE,KAAKW,UACfJ,MAAQ,IAAMT,EAAEc,WAAa,GAC7BJ,IAAM,GAAKV,EAAEe,gBACXP,KAAOR,EAAEgB,cAEXP,MAAMQ,OAAS,IACfR,MAAQ,IAAMA,OAEdC,IAAIO,OAAS,IACbP,IAAM,IAAMA,WAET,CAACF,KAAMC,MAAOC,KAAKQ,KAAK,KAYxBC,CADS,IAAIjB,KAAKW,KAAKO,UAAoB,MAAPR,uCAhElBS,MAAMC,MAC1BD,iBAAiBnB,OAAQmB,MAAQ,IAAInB,KAAKmB,QAC1CC,gBAAgBpB,OAAQoB,KAAO,IAAIpB,KAAKoB,OAG7CD,MAAME,SAAS,GACfF,MAAMG,WAAW,GACjBH,MAAMI,WAAW,GACjBJ,MAAMK,gBAAgB,GACtBJ,KAAKC,SAAS,IACdD,KAAKE,WAAW,IAChBF,KAAKG,WAAW,IAChBH,KAAKI,gBAAgB,WAEfC,QAAUC,KAAKC,OAAQP,KAAOD,MAAO,UACrCS,MAAQF,KAAKG,MAAMJ,QAAQ,KAC3BK,UAAYL,QAAU,IAEtBM,MAAQL,KAAKG,MAAMC,UAAU,SAG5B,CACHX,MAAOA,MACPC,KAAMA,KACNY,UAAWP,QACXG,MAAOA,MACPG,MAAOA,MACPrB,KARcoB,UAAY,EAS1BG,UAAW,CACPd,MAAOtB,YAAYsB,OACnBC,KAAMvB,YAAYuB,2EA2CCc,UACvBC,cAAgB,KAChBC,UAAY,KACZC,WAAY,MACZ,MAAMC,MAAMJ,KAAKK,MAAO,OAClBC,KAAON,KAAKK,MAAMD,IAClBG,EAAI,IAAIzC,KAAKwC,KAAKE,cAClBF,KAAKG,UACPN,WAAY,KAGXF,eAAiBM,EAAIN,iBACtBA,cAAgBM,GAGfD,KAAKG,QAAU,OACVC,EAAI,IAAI5C,KAAKwC,KAAKG,WACnBP,WAAaQ,EAAIR,aAClBA,UAAYQ,UAIjB,CACHC,MAAOV,cACPW,IAAMT,UAAW,KAAKD"}
\ No newline at end of file
+{"version":3,"file":"date-helper.min.js","sources":["../../src/util/date-helper.js"],"sourcesContent":["/**\n * Format a date according to localized custom\n * @param {Date|string} d The date to convert\n * @param {boolean} short Short format (default false)\n * @returns {string}\n */\nexport function format_date(d,short){\n    if(!(d instanceof Date)){\n        d = new Date(d);\n    }\n\n    let monthformat = \"short\";\n    if(short){\n        monthformat = \"numeric\";\n    }\n    return d.toLocaleDateString(document.documentElement.lang,{\n        year: 'numeric', month: monthformat, day: 'numeric'\n    });\n}\n\n/**\n * Provides standardized information about the period between two dates\n * As\n * @param {Date|string} first First day of the span\n * @param {Date|string} last Last day of the span\n * @returns {Object} Object containing formatted start and end dates and span information\n */\nexport function datespaninfo(first,last){\n    if(!(first instanceof Date)){ first = new Date(first);}\n    if(!(last instanceof Date)){ last = new Date(last);}\n\n    // Make sure the end date is at the very end of the day and the start date at the very beginning\n    first.setHours(0);\n    first.setMinutes(0);\n    first.setSeconds(0);\n    first.setMilliseconds(0);\n    last.setHours(23);\n    last.setMinutes(59);\n    last.setSeconds(59);\n    last.setMilliseconds(999);\n\n    const dayspan = Math.round(((last - first)+1)/(24*60*60*1000)); // Add one millisecond to offset the 999 ms\n    const years = Math.floor(dayspan/365); // Yes, we ignore leap years/leap days\n    const ydaysleft = dayspan % 365;\n\n    const weeks = Math.floor(ydaysleft/7);\n    const wdaysleft = ydaysleft % 7;\n\n    return {\n        first: first,\n        last: last,\n        totaldays: dayspan,\n        years: years,\n        weeks: weeks,\n        days: wdaysleft,\n        formatted: {\n            first: format_date(first),\n            last: format_date(last),\n        }\n    };\n\n}\n\n/**\n * Format a Date object to YYYY-MM-DD format\n * @param {Date} date Date object\n * @returns Date string in YYYY-MM-DD format\n */\nfunction dateYYYYMMDD(date) {\n    const d = new Date(date);\n    let month = '' + (d.getMonth() + 1);\n    let day = '' + d.getDate();\n    const year = d.getFullYear();\n\n    if (month.length < 2) {\n        month = '0' + month;\n    }\n    if (day.length < 2) {\n        day = '0' + day;\n    }\n    return [year, month, day].join('-');\n}\n\n/**\n * String formatting function - replaces {name} in string by value of same key in values parameter\n * @param {string} datestr String containing date format in YYYY-MM-DD\n * @param {int} days Object containing keys to replace {key} strings with. Make negative to subtract\n * @returns Date string in YYYY-MM-DD format\n */\nexport function add_days(datestr,days) {\n    const date = new Date(datestr);\n    const newdate = new Date(date.getTime() + (days * 86400000) ); // Add n days in ms.\n    return dateYYYYMMDD(newdate);\n}\n\n/**\n * Determine start and end dates of a studyplan\n * @param {*} plan\n * @returns\n */\nexport function studyplanDates(plan) {\n    let earliestStart = null;\n    let latestEnd = null;\n    let openEnded = false;\n    for(const ix in plan.pages) {\n        const page = plan.pages[ix];\n        const s = new Date(page.startdate);\n        if (! page.enddate) {\n            openEnded = true; // One of the pages has no end date set...\n        }\n\n        if (!earliestStart || s < earliestStart) {\n            earliestStart = s;\n        }\n\n        if ( page.enddate ) {\n            const e = new Date(page.enddate);\n            if (!latestEnd || e > latestEnd) {\n                latestEnd = e;\n            }\n        }\n    }\n    return {\n        start: earliestStart,\n        end: (openEnded)?null:latestEnd,\n    };\n}\n\n/**\n * Determine past/present/future for a studyplan\n * @param {*} plan\n * @returns {string} one of 'past', 'present', 'future'\n */\nexport function studyplanTiming(plan) {\n    const now = new Date().getTime();\n    const dates = studyplanDates(plan);\n\n    if(dates.start < now){\n        if( dates.end && now > dates.end) {\n            return 'past';\n        } else {\n            return 'present';\n        }\n    } else {\n        return 'future';\n    }\n}\n\n/**\n * Determine past/present/future for a studyplan\n * @param {*} page\n * @returns {string} one of 'past', 'present', 'future'\n */\nexport function studyplanPageTiming(page) {\n    const now = new Date().getTime();\n    const start = new Date(page.startdate);\n    const end = (page.enddate)?(new Date(page.enddate)):null;\n\n    if(start < now){\n        if( end && now > end) {\n            return 'past';\n        } else {\n            return 'present';\n        }\n    } else {\n        return 'future';\n    }\n}"],"names":["format_date","d","short","Date","monthformat","toLocaleDateString","document","documentElement","lang","year","month","day","studyplanDates","plan","earliestStart","latestEnd","openEnded","ix","pages","page","s","startdate","enddate","e","start","end","datestr","days","date","getMonth","getDate","getFullYear","length","join","dateYYYYMMDD","getTime","first","last","setHours","setMinutes","setSeconds","setMilliseconds","dayspan","Math","round","years","floor","ydaysleft","weeks","totaldays","formatted","now","dates"],"mappings":"uFAMgBA,YAAYC,EAAEC,OACrBD,aAAaE,OACdF,EAAI,IAAIE,KAAKF,QAGbG,YAAc,eACfF,QACCE,YAAc,WAEXH,EAAEI,mBAAmBC,SAASC,gBAAgBC,KAAK,CACtDC,KAAM,UAAWC,MAAON,YAAaO,IAAK,qBAoFlCC,eAAeC,UACvBC,cAAgB,KAChBC,UAAY,KACZC,WAAY,MACZ,MAAMC,MAAMJ,KAAKK,MAAO,OAClBC,KAAON,KAAKK,MAAMD,IAClBG,EAAI,IAAIjB,KAAKgB,KAAKE,cAClBF,KAAKG,UACPN,WAAY,KAGXF,eAAiBM,EAAIN,iBACtBA,cAAgBM,GAGfD,KAAKG,QAAU,OACVC,EAAI,IAAIpB,KAAKgB,KAAKG,WACnBP,WAAaQ,EAAIR,aAClBA,UAAYQ,UAIjB,CACHC,MAAOV,cACPW,IAAMT,UAAW,KAAKD,8FAnCLW,QAAQC,YACvBC,KAAO,IAAIzB,KAAKuB,yBAtBJE,YACZ3B,EAAI,IAAIE,KAAKyB,UACflB,MAAQ,IAAMT,EAAE4B,WAAa,GAC7BlB,IAAM,GAAKV,EAAE6B,gBACXrB,KAAOR,EAAE8B,cAEXrB,MAAMsB,OAAS,IACftB,MAAQ,IAAMA,OAEdC,IAAIqB,OAAS,IACbrB,IAAM,IAAMA,WAET,CAACF,KAAMC,MAAOC,KAAKsB,KAAK,KAYxBC,CADS,IAAI/B,KAAKyB,KAAKO,UAAoB,MAAPR,uCAhElBS,MAAMC,MAC1BD,iBAAiBjC,OAAQiC,MAAQ,IAAIjC,KAAKiC,QAC1CC,gBAAgBlC,OAAQkC,KAAO,IAAIlC,KAAKkC,OAG7CD,MAAME,SAAS,GACfF,MAAMG,WAAW,GACjBH,MAAMI,WAAW,GACjBJ,MAAMK,gBAAgB,GACtBJ,KAAKC,SAAS,IACdD,KAAKE,WAAW,IAChBF,KAAKG,WAAW,IAChBH,KAAKI,gBAAgB,WAEfC,QAAUC,KAAKC,OAAQP,KAAOD,MAAO,UACrCS,MAAQF,KAAKG,MAAMJ,QAAQ,KAC3BK,UAAYL,QAAU,IAEtBM,MAAQL,KAAKG,MAAMC,UAAU,SAG5B,CACHX,MAAOA,MACPC,KAAMA,KACNY,UAAWP,QACXG,MAAOA,MACPG,MAAOA,MACPrB,KARcoB,UAAY,EAS1BG,UAAW,CACPd,MAAOpC,YAAYoC,OACnBC,KAAMrC,YAAYqC,uHAgGMlB,YAC1BgC,KAAM,IAAIhD,MAAOgC,UACjBX,MAAQ,IAAIrB,KAAKgB,KAAKE,WACtBI,IAAON,KAAKG,QAAU,IAAInB,KAAKgB,KAAKG,SAAU,YAEjDE,MAAQ2B,IACH1B,KAAO0B,IAAM1B,IACN,OAEA,UAGJ,4CAhCiBZ,YACtBsC,KAAM,IAAIhD,MAAOgC,UACjBiB,MAAQxC,eAAeC,aAE1BuC,MAAM5B,MAAQ2B,IACTC,MAAM3B,KAAO0B,IAAMC,MAAM3B,IAClB,OAEA,UAGJ"}
\ No newline at end of file
diff --git a/amd/src/page-view-plan.js b/amd/src/page-view-plan.js
index 2879dce..88442b5 100644
--- a/amd/src/page-view-plan.js
+++ b/amd/src/page-view-plan.js
@@ -14,6 +14,7 @@ import Vue from './vue/vue';
 import Debugger from './util/debugger';
 import {load_strings} from './util/string-helper';
 import {ProcessStudyplan} from './studyplan-processor';
+import {studyplanTiming} from './util/date-helper';
 
 import RVComponents from './report-viewer-components';
 Vue.use(RVComponents);
@@ -72,8 +73,8 @@ export function init(contextid,categoryid) {
             }])[0].done(function(response){
                 const timingval = { present: 0, past: 1, future: 2};
                 response.sort((a,b) => {
-                    const timinga = TSComponents.studyplanTiming(a);
-                    const timingb = TSComponents.studyplanTiming(b);
+                    const timinga = studyplanTiming(a);
+                    const timingb = studyplanTiming(b);
 
                     const t = timingval[timinga] - timingval[timingb];
                     if(t == 0){
diff --git a/amd/src/report-viewer-components.js b/amd/src/report-viewer-components.js
index 05a76f0..1d24228 100644
--- a/amd/src/report-viewer-components.js
+++ b/amd/src/report-viewer-components.js
@@ -9,7 +9,7 @@
 import {SimpleLine} from './simpleline/simpleline';
 import {get_strings} from 'core/str';
 import {load_strings} from './util/string-helper';
-import {format_date} from './util/date-helper';
+import {format_date,studyplanPageTiming,studyplanTiming} from './util/date-helper';
 import {call} from 'core/ajax';
 import notification from 'core/notification';
 import {svgarcpath} from './util/svgarc';
@@ -328,18 +328,16 @@ export default {
                         methodname: `local_treestudyplan_list_${this.verified_type}_studyplans`,
                         args: this.call_args(),
                     }])[0].done(function(response){
-                        debug.info("Studyplans:",response);
 
                         const plans = { future: [], present: [], past: [], };
 
                         for (const ix in response) {
                             const plan = response[ix];
-                            const timing = TSComponents.studyplanTiming(plan);
+                            const timing = studyplanTiming(plan);
                             plans[timing].push(plan);
                         }
 
                         for (const ix in plans) {
-                            debug.info(ix, plans[ix]);
                             plans[ix].sort((a,b) => {
                                 const t = new Date(b.startdate).getTime() - new Date(a.startdate).getTime();
                                 if (t == 0) {
@@ -378,7 +376,6 @@ export default {
                             studyplanid: plan.id,
                         }),
                     }])[0].done(function(response){
-                        debug.info("Detailed studyplan:",response);
                         self.selectedstudyplan = ProcessStudyplan(response);
                         self.loadingstudyplan = false;
                     }).fail(notification.exception);
@@ -449,7 +446,7 @@ export default {
             },
             data() {
                 return {
-                    selectedpageindex: 0,
+                    selectedpageindex: -1,
                     text: strings.pageinfo,
                 };
             },
@@ -458,6 +455,23 @@ export default {
                 selectedpage() {
                     return this.value.pages[this.selectedpageindex];
                 },
+                startpageindex() {
+                    let startpageindex = 0;
+                    let firststart = null;
+                    for(const ix in this.value.pages) {
+                        const page = this.value.pages[ix];
+                        debug.info(`Checking page ${ix} - timing ${studyplanPageTiming(page)}`,page);
+                        if(studyplanPageTiming(page) == "present") {
+                            debug.info(`Found page nr ${ix} to be present`);
+                            const s = new Date(page.startdate);
+                            if( (!firststart) || firststart > s) {
+                                startpageindex = ix;
+                                firststart = s;
+                            }
+                        }
+                    }
+                    return startpageindex;
+                }
             },
             methods: {
                 pageduration(page){
@@ -525,15 +539,16 @@ export default {
                 selectedpageChanged(newTabIndex,prevTabIndex) {
                     
                     ItemEventBus.$emit('redrawLines', null);
-                    scrollCurrentIntoView(this.value.id);
+                    scrollCurrentIntoView(this.selectedpage.id);
                 }
             },
             mounted() {
-                scrollCurrentIntoView(this.value.id);
+//                scrollCurrentIntoView(this.selectedpage.id);
                 this.$root.$emit('redrawLines');
             },
             updated() {
-                scrollCurrentIntoView(this.value.id);
+
+                scrollCurrentIntoView(this.selectedpage.id);
                 ItemEventBus.$emit('lineHeightChange', null);
                 this.$root.$emit('redrawLines');
                 ItemEventBus.$emit('redrawLines');
@@ -546,8 +561,8 @@ export default {
                     @activate-tab='selectedpageChanged'
                     content-class="mt-1">
                     <b-tab
-                        
                         v-for="(page,pageindex) in value.pages"
+                        :active="(pageindex == startpageindex)"
                         :key="page.id"
                         :title-item-class="'s-studyplanpage-tab '+ page.timing"
                         ><template #title>
diff --git a/amd/src/treestudyplan-components.js b/amd/src/treestudyplan-components.js
index b24a45f..cd40529 100644
--- a/amd/src/treestudyplan-components.js
+++ b/amd/src/treestudyplan-components.js
@@ -5,24 +5,9 @@
 // Put this file in path/to/plugin/amd/src
 
 import {load_strings} from './util/string-helper';
-import {format_date, studyplanDates} from './util/date-helper';
+import {format_date, studyplanDates, studyplanTiming} from './util/date-helper';
 
 export default {
-    studyplanTiming(plan) {
-        const now = new Date().getTime();
-        
-        const dates = studyplanDates(plan);
-
-        if(dates.start < now){
-            if( dates.end && now > dates.end) {
-                return 'past';
-            } else {
-                return 'present';
-            }
-        } else {
-            return 'future';
-        }
-    },
 
     install(Vue/*,options*/){
         let strings = load_strings({
@@ -57,18 +42,7 @@ export default {
             },
             computed: {
                 timing(){
-                    const now = new Date().getTime();
-                    const startdate = new Date(this.value.pages[0].startdate).getTime();
-                    const enddate = new Date(this.value.pages[0].enddate).getTime();
-                    let timing = 'future';
-                    if(startdate < now){
-                        if(this.value.pages[0].enddate && now > enddate) {
-                            timing = 'past';
-                        } else {
-                            timing = 'present';
-                        }
-                    }
-                    return timing;
+                    return studyplanTiming(this.value);
                 },
                 dates(){
                     const dates = studyplanDates(this.value);
@@ -115,7 +89,7 @@ export default {
                     <div class='s-studyplan-card-info'>
                         <div class='s-studyplan-card-titlebar'>
                             <b-card-title>
-                                <a v-if='open' href='#' @click.prevent='onOpenClick($event)'>{{value.name}}</a>
+                                <a class='title' v-if='open' href='#' @click.prevent='onOpenClick($event)'>{{value.name}}</a>
                                 <template v-else>{{value.name}}</template>
                             </b-card-title>
                             <div class='s-studyplan-card-titleslot'><slot name='title'></slot></div>
diff --git a/amd/src/util/date-helper.js b/amd/src/util/date-helper.js
index d289db2..1b14c50 100644
--- a/amd/src/util/date-helper.js
+++ b/amd/src/util/date-helper.js
@@ -124,4 +124,45 @@ export function studyplanDates(plan) {
         start: earliestStart,
         end: (openEnded)?null:latestEnd,
     };
+}
+
+/**
+ * Determine past/present/future for a studyplan
+ * @param {*} plan
+ * @returns {string} one of 'past', 'present', 'future'
+ */
+export function studyplanTiming(plan) {
+    const now = new Date().getTime();
+    const dates = studyplanDates(plan);
+
+    if(dates.start < now){
+        if( dates.end && now > dates.end) {
+            return 'past';
+        } else {
+            return 'present';
+        }
+    } else {
+        return 'future';
+    }
+}
+
+/**
+ * Determine past/present/future for a studyplan
+ * @param {*} page
+ * @returns {string} one of 'past', 'present', 'future'
+ */
+export function studyplanPageTiming(page) {
+    const now = new Date().getTime();
+    const start = new Date(page.startdate);
+    const end = (page.enddate)?(new Date(page.enddate)):null;
+
+    if(start < now){
+        if( end && now > end) {
+            return 'past';
+        } else {
+            return 'present';
+        }
+    } else {
+        return 'future';
+    }
 }
\ No newline at end of file
diff --git a/classes/studentstudyplanservice.php b/classes/studentstudyplanservice.php
index a9021e7..c0b6579 100644
--- a/classes/studentstudyplanservice.php
+++ b/classes/studentstudyplanservice.php
@@ -215,10 +215,7 @@ class studentstudyplanservice extends \external_api {
         $list = [];
         $studyplans = studyplan::find_for_user($userid);
         foreach ($studyplans as $studyplan) {
-            // Only include studyplans in the context the user has permissions for.
-            if (webservicehelper::has_capabilities(self::CAP_VIEWOTHER, $studyplan->context(), false)) {
-                $list[] = $studyplan->simple_model($userid);
-            }
+            $list[] = $studyplan->simple_model($userid);
         }
         return $list;
     }
diff --git a/css/devstyles.css b/css/devstyles.css
index 9fa6fff..df20895 100644
--- a/css/devstyles.css
+++ b/css/devstyles.css
@@ -1313,6 +1313,16 @@
     max-width: 400px;
     margin-bottom: 1em;
 }
+.path-local-treestudyplan.path-local-treestudyplan-edit .card.s-studyplan-card,
+.features-treestudyplan.path-local-treestudyplan-edit .card.s-studyplan-card {
+    min-width: 450px;
+    max-width: 450px;
+}
+.path-local-treestudyplan .card.s-studyplan-card.card-body,
+.features-treestudyplan .card.s-studyplan-card.card-body {
+    padding: 0.75rem;
+    padding-bottom: 0.5rem;
+}
 .path-local-treestudyplan .card.s-studyplan-card.timing-past .card-header,
 .features-treestudyplan .card.s-studyplan-card.timing-past .card-header {
     background-color: var(--past);
@@ -1329,6 +1339,7 @@
 .features-treestudyplan .s-studyplan-card-title-buttons {
     font-size: 16px;
     float: right;
+    white-space: nowrap;
 }
 .path-local-treestudyplan .s-studyplan-card-title-buttons > *,
 .features-treestudyplan .s-studyplan-card-title-buttons > * {
diff --git a/edit-plan.php b/edit-plan.php
index aaeed1c..939b9d5 100644
--- a/edit-plan.php
+++ b/edit-plan.php
@@ -166,7 +166,6 @@ print $OUTPUT->header();
                         >
                         <template #title>
                             <span class='s-studyplan-card-title-buttons'>
-                                <a href='#' @click.prevent="export_plan(studyplan)" ><i class='fa fa-download'></i></a>
                                 <t-studyplan-edit v-model="studyplans[planindex]" @moved="movedStudyplan"></t-studyplan-edit>
                                 <t-studyplan-associate v-model="studyplans[planindex]"></t-studyplan-associate>
                             </span>
diff --git a/scss/studyplancard.scss b/scss/studyplancard.scss
index 8f5496b..59c67b8 100644
--- a/scss/studyplancard.scss
+++ b/scss/studyplancard.scss
@@ -1,10 +1,20 @@
 
 .path-local-treestudyplan, .features-treestudyplan {
+    
     .card.s-studyplan-card {
         min-width: 400px;
         max-width: 400px;
         margin-bottom: 1em;
     }
+    &.path-local-treestudyplan-edit .card.s-studyplan-card{
+        min-width: 450px;
+        max-width: 450px;
+    }
+
+    .card.s-studyplan-card.card-body {
+        padding: 0.75rem;
+        padding-bottom: 0.5rem;
+    }
 
     .card.s-studyplan-card.timing-past .card-header {
         background-color: var(--past);
@@ -19,6 +29,7 @@
     .s-studyplan-card-title-buttons {
         font-size: 16px /*12pt*/;
         float: right;
+        white-space: nowrap;
     }
     .s-studyplan-card-title-buttons > * {
         margin-left: 0.2em;
@@ -58,7 +69,6 @@
         justify-content: space-between;
         gap: 5px;
 
-
     }
     .s-studyplan-card-titlebuttons {
         margin-left: auto;
diff --git a/styles.css b/styles.css
index 9fa6fff..df20895 100644
--- a/styles.css
+++ b/styles.css
@@ -1313,6 +1313,16 @@
     max-width: 400px;
     margin-bottom: 1em;
 }
+.path-local-treestudyplan.path-local-treestudyplan-edit .card.s-studyplan-card,
+.features-treestudyplan.path-local-treestudyplan-edit .card.s-studyplan-card {
+    min-width: 450px;
+    max-width: 450px;
+}
+.path-local-treestudyplan .card.s-studyplan-card.card-body,
+.features-treestudyplan .card.s-studyplan-card.card-body {
+    padding: 0.75rem;
+    padding-bottom: 0.5rem;
+}
 .path-local-treestudyplan .card.s-studyplan-card.timing-past .card-header,
 .features-treestudyplan .card.s-studyplan-card.timing-past .card-header {
     background-color: var(--past);
@@ -1329,6 +1339,7 @@
 .features-treestudyplan .s-studyplan-card-title-buttons {
     font-size: 16px;
     float: right;
+    white-space: nowrap;
 }
 .path-local-treestudyplan .s-studyplan-card-title-buttons > *,
 .features-treestudyplan .s-studyplan-card-title-buttons > * {