diff --git a/amd/build/page-studyplan-report.min.js b/amd/build/page-studyplan-report.min.js
index 227a718..9cffc8e 100644
--- a/amd/build/page-studyplan-report.min.js
+++ b/amd/build/page-studyplan-report.min.js
@@ -1,3 +1,3 @@
-define("local_treestudyplan/page-studyplan-report",["exports","core/ajax","core/notification","./vue/vue","./util/debugger","./util/string-helper","./studyplan-report-components","./report-viewer-components","./modedit-modal","./portal-vue/portal-vue.esm","./bootstrap-vue/bootstrap-vue"],(function(_exports,_ajax,_notification,_vue,_debugger,_stringHelper,_studyplanReportComponents,_reportViewerComponents,_modeditModal,_portalVue,_bootstrapVue){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=function(studyplanid,pageid,firstperiod,lastperiod){if(void 0===pageid||!Number.isInteger(Number(pageid))||void 0===studyplanid||!Number.isInteger(Number(studyplanid)))return void debug.error("Did Error: studyplan id and page id not provided as integer numbers to script.",studyplanid,pageid,firstperiod,lastperiod);studyplanid=Number(studyplanid),pageid=Number(pageid);new _vue.default({el:"#root",data:{structure:null},async mounted(){},created(){this.loadStructure()},computed:{},methods:{loadStructure(){const self=this;this.structure=null,(0,_ajax.call)([{methodname:"local_treestudyplan_get_report_structure",args:{pageid:pageid,firstperiod:firstperiod,lastperiod:lastperiod}}])[0].then((function(response){self.structure=response})).catch(_notification.default.exception)}}})},_notification=_interopRequireDefault(_notification),_vue=_interopRequireDefault(_vue),_debugger=_interopRequireDefault(_debugger),_studyplanReportComponents=_interopRequireDefault(_studyplanReportComponents),_reportViewerComponents=_interopRequireDefault(_reportViewerComponents),_modeditModal=_interopRequireDefault(_modeditModal),_portalVue=_interopRequireDefault(_portalVue),_bootstrapVue=_interopRequireDefault(_bootstrapVue),_vue.default.use(_studyplanReportComponents.default),_vue.default.use(_reportViewerComponents.default),_vue.default.use(_modeditModal.default),_vue.default.use(_portalVue.default),_vue.default.use(_bootstrapVue.default);let debug=new _debugger.default("treestudyplanviewer");(0,_stringHelper.load_strings)({studyplan:{studyplan_select_placeholder:"studyplan_select_placeholder"}})}));
+define("local_treestudyplan/page-studyplan-report",["exports","core/ajax","core/notification","./vue/vue","./util/debugger","./util/string-helper","./studyplan-report-components","./report-viewer-components","./modedit-modal","./portal-vue/portal-vue.esm","./bootstrap-vue/bootstrap-vue"],(function(_exports,_ajax,_notification,_vue,_debugger,_stringHelper,_studyplanReportComponents,_reportViewerComponents,_modeditModal,_portalVue,_bootstrapVue){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=function(studyplanid,pageid,firstperiod,lastperiod){if(void 0===pageid||!Number.isInteger(Number(pageid))||void 0===studyplanid||!Number.isInteger(Number(studyplanid)))return void debug.error("Error: studyplan id and page id not provided as integer numbers to script.",studyplanid,pageid,firstperiod,lastperiod);studyplanid=Number(studyplanid),pageid=Number(pageid);new _vue.default({el:"#root",data:{structure:null,studyplan:null,page:null,text:strings.studyplan_report},async mounted(){},created(){this.loadStructure(pageid,firstperiod,lastperiod)},computed:{},methods:{loadStructure(pageid,firstperiod,lastperiod){const self=this;this.structure=null,(0,_ajax.call)([{methodname:"local_treestudyplan_get_report_structure",args:{pageid:pageid,firstperiod:firstperiod,lastperiod:lastperiod}}])[0].then((function(response){self.structure=response,self.studyplan=response.studyplan,self.page=response.page})).catch(_notification.default.exception)},selectedPage(e){debug.info("SelectedPage",e);const pageid=e.target.value;this.loadStructure(pageid)},selectedFirstPeriod(e){debug.info("selectedFirstPeriod",e);let f=e.target.value,l=this.structure.lastperiod;l<f&&(l=f),this.loadStructure(this.page.id,f,l)},selectedLastPeriod(e){debug.info("selectedLastPeriod",e);let f=this.structure.firstperiod,l=e.target.value;l<f&&(l=f),this.loadStructure(this.page.id,f,l)}}})},_notification=_interopRequireDefault(_notification),_vue=_interopRequireDefault(_vue),_debugger=_interopRequireDefault(_debugger),_studyplanReportComponents=_interopRequireDefault(_studyplanReportComponents),_reportViewerComponents=_interopRequireDefault(_reportViewerComponents),_modeditModal=_interopRequireDefault(_modeditModal),_portalVue=_interopRequireDefault(_portalVue),_bootstrapVue=_interopRequireDefault(_bootstrapVue),_vue.default.use(_studyplanReportComponents.default),_vue.default.use(_reportViewerComponents.default),_vue.default.use(_modeditModal.default),_vue.default.use(_portalVue.default),_vue.default.use(_bootstrapVue.default);let debug=new _debugger.default("treestudyplanviewer"),strings=(0,_stringHelper.load_strings)({studyplan_report:{studyplan_select_placeholder:"studyplan_select_placeholder",studyplan:"studyplan",page:"studyplanpage",periods:"periods",period:"period",loading:"loading@core",all:"all@core",from:"from@core",to:"to@core"}})}));
 
 //# sourceMappingURL=page-studyplan-report.min.js.map
\ No newline at end of file
diff --git a/amd/build/page-studyplan-report.min.js.map b/amd/build/page-studyplan-report.min.js.map
index 7d1e071..8451872 100644
--- a/amd/build/page-studyplan-report.min.js.map
+++ b/amd/build/page-studyplan-report.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"page-studyplan-report.min.js","sources":["../src/page-studyplan-report.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\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';\n\nimport SRComponents from './studyplan-report-components';\nVue.use(SRComponents);\nimport RVComponents from './report-viewer-components';\nVue.use(RVComponents);\n\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 {Number} studyplanid The id of the studyplan we need to view \n * @param {Number} pageid The id of the studyplan page we need to view \n * @param {Number} firstperiod The number of the first period to view\n * @param {Number} lastperiod The number of the last period to view \n */\nexport function init(studyplanid, pageid, firstperiod, lastperiod) {\n    if (undefined === pageid || !Number.isInteger(Number(pageid)) ||\n        undefined === studyplanid || !Number.isInteger(Number(studyplanid))) {\n        debug.error(\"Did Error: studyplan id and page id not provided as integer numbers to script.\",\n            studyplanid, pageid, firstperiod, lastperiod);\n        return; // Do not continue if plan and page are not proper integers\n    }\n    // Ensure a numeric value instead of string.\n    studyplanid = Number(studyplanid);\n    pageid = Number(pageid);\n\n    // Startup app.\n    const app = new Vue({\n        el: '#root',\n        data: {\n            structure: null,\n        },\n        async mounted() {\n            \n        },\n        created() {\n            this.loadStructure();\n        },\n        computed: {\n           \n        },\n        methods: {\n            loadStructure() {\n                const self = this;\n                this.structure = null; // Starts loading icon. Hides old data.\n                call([{\n                    methodname: 'local_treestudyplan_get_report_structure',\n                    args: { pageid: pageid,\n                        firstperiod: firstperiod,\n                        lastperiod: lastperiod\n                    }\n                }])[0].then(function(response){\n                    self.structure = response;\n                }).catch(notification.exception);\n            }\n        },\n    });\n}\n"],"names":["studyplanid","pageid","firstperiod","lastperiod","undefined","Number","isInteger","debug","error","Vue","el","data","structure","created","loadStructure","computed","methods","self","this","methodname","args","then","response","catch","notification","exception","use","SRComponents","RVComponents","ModalComponents","PortalVue","BootstrapVue","Debugger","studyplan","studyplan_select_placeholder"],"mappings":"imBA2CqBA,YAAaC,OAAQC,YAAaC,oBAC/CC,IAAcH,SAAWI,OAAOC,UAAUD,OAAOJ,eACjDG,IAAcJ,cAAgBK,OAAOC,UAAUD,OAAOL,0BACtDO,MAAMC,MAAM,iFACRR,YAAaC,OAAQC,YAAaC,YAI1CH,YAAcK,OAAOL,aACrBC,OAASI,OAAOJ,QAGJ,IAAIQ,aAAI,CAChBC,GAAI,QACJC,KAAM,CACFC,UAAW,wBAKfC,eACSC,iBAETC,SAAU,GAGVC,QAAS,CACLF,sBACUG,KAAOC,UACRN,UAAY,oBACZ,CAAC,CACFO,WAAY,2CACZC,KAAM,CAAEnB,OAAQA,OACZC,YAAaA,YACbC,WAAYA,eAEhB,GAAGkB,MAAK,SAASC,UACjBL,KAAKL,UAAYU,YAClBC,MAAMC,sBAAaC,2cAlElCC,IAAIC,iDAEJD,IAAIE,8CAGJF,IAAIG,oCAGJH,IAAII,iCAEJJ,IAAIK,2BAGJxB,MAAQ,IAAIyB,kBAAS,wBAEX,8BAAa,CACvBC,UAAW,CACPC,6BAA8B"}
\ No newline at end of file
+{"version":3,"file":"page-studyplan-report.min.js","sources":["../src/page-studyplan-report.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\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';\n\nimport SRComponents from './studyplan-report-components';\nVue.use(SRComponents);\nimport RVComponents from './report-viewer-components';\nVue.use(RVComponents);\n\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_report: {\n        studyplan_select_placeholder: 'studyplan_select_placeholder',\n        studyplan: 'studyplan',\n        page: 'studyplanpage',\n        periods: 'periods',\n        period: 'period',\n        loading: 'loading@core',\n        all: 'all@core',\n        from: 'from@core',\n        to: 'to@core',\n    },\n});\n\n/**\n * Initialize the Page\n * @param {Number} studyplanid The id of the studyplan we need to view \n * @param {Number} pageid The id of the studyplan page we need to view \n * @param {Number} firstperiod The number of the first period to view\n * @param {Number} lastperiod The number of the last period to view \n */\nexport function init(studyplanid, pageid, firstperiod, lastperiod) {\n    if (undefined === pageid || !Number.isInteger(Number(pageid)) ||\n        undefined === studyplanid || !Number.isInteger(Number(studyplanid))) {\n        debug.error(\"Error: studyplan id and page id not provided as integer numbers to script.\",\n            studyplanid, pageid, firstperiod, lastperiod);\n        return; // Do not continue if plan and page are not proper integers\n    }\n    // Ensure a numeric value instead of string.\n    studyplanid = Number(studyplanid);\n    pageid = Number(pageid);\n\n    // Startup app.\n    const app = new Vue({\n        el: '#root',\n        data: {\n            structure: null,\n            studyplan: null,\n            page: null,\n            text: strings.studyplan_report,\n        },\n        async mounted() {\n            \n        }, \n        created() {\n            // On creation, load the page as specified\n            this.loadStructure(pageid,firstperiod,lastperiod);\n        },\n        computed: {\n           \n        },\n        methods: {\n            loadStructure(pageid,firstperiod,lastperiod) {\n                const self = this;\n                this.structure = null; // Starts loading icon. Hides old data.\n                call([{\n                    methodname: 'local_treestudyplan_get_report_structure',\n                    args: { pageid: pageid,\n                        firstperiod: firstperiod,\n                        lastperiod: lastperiod\n                    }\n                }])[0].then(function(response){\n                    self.structure = response;\n                    self.studyplan = response.studyplan;\n                    self.page = response.page;\n                }).catch(notification.exception);\n            },\n            selectedPage(e) {\n                debug.info(\"SelectedPage\",e);\n                const pageid = e.target.value;\n                this.loadStructure(pageid);\n            },\n            selectedFirstPeriod(e) {\n                debug.info(\"selectedFirstPeriod\",e);\n                let f = e.target.value;\n                let l = this.structure.lastperiod;\n                if ( l < f) {\n                    l = f;\n                }\n                this.loadStructure(this.page.id,f,l);\n            },\n            selectedLastPeriod(e) {\n                debug.info(\"selectedLastPeriod\",e);\n                let f = this.structure.firstperiod;\n                let l = e.target.value;\n                if ( l < f) {\n                    l = f;\n                }\n                this.loadStructure(this.page.id,f,l);\n\n            },\n        },\n    });\n}\n"],"names":["studyplanid","pageid","firstperiod","lastperiod","undefined","Number","isInteger","debug","error","Vue","el","data","structure","studyplan","page","text","strings","studyplan_report","created","loadStructure","computed","methods","self","this","methodname","args","then","response","catch","notification","exception","selectedPage","e","info","target","value","selectedFirstPeriod","f","l","id","selectedLastPeriod","use","SRComponents","RVComponents","ModalComponents","PortalVue","BootstrapVue","Debugger","studyplan_select_placeholder","periods","period","loading","all","from","to"],"mappings":"imBAmDqBA,YAAaC,OAAQC,YAAaC,oBAC/CC,IAAcH,SAAWI,OAAOC,UAAUD,OAAOJ,eACjDG,IAAcJ,cAAgBK,OAAOC,UAAUD,OAAOL,0BACtDO,MAAMC,MAAM,6EACRR,YAAaC,OAAQC,YAAaC,YAI1CH,YAAcK,OAAOL,aACrBC,OAASI,OAAOJ,QAGJ,IAAIQ,aAAI,CAChBC,GAAI,QACJC,KAAM,CACFC,UAAW,KACXC,UAAW,KACXC,KAAM,KACNC,KAAMC,QAAQC,oCAKlBC,eAESC,cAAclB,OAAOC,YAAYC,aAE1CiB,SAAU,GAGVC,QAAS,CACLF,cAAclB,OAAOC,YAAYC,kBACvBmB,KAAOC,UACRX,UAAY,oBACZ,CAAC,CACFY,WAAY,2CACZC,KAAM,CAAExB,OAAQA,OACZC,YAAaA,YACbC,WAAYA,eAEhB,GAAGuB,MAAK,SAASC,UACjBL,KAAKV,UAAYe,SACjBL,KAAKT,UAAYc,SAASd,UAC1BS,KAAKR,KAAOa,SAASb,QACtBc,MAAMC,sBAAaC,YAE1BC,aAAaC,GACTzB,MAAM0B,KAAK,eAAeD,SACpB/B,OAAS+B,EAAEE,OAAOC,WACnBhB,cAAclB,SAEvBmC,oBAAoBJ,GAChBzB,MAAM0B,KAAK,sBAAsBD,OAC7BK,EAAIL,EAAEE,OAAOC,MACbG,EAAIf,KAAKX,UAAUT,WAClBmC,EAAID,IACLC,EAAID,QAEHlB,cAAcI,KAAKT,KAAKyB,GAAGF,EAAEC,IAEtCE,mBAAmBR,GACfzB,MAAM0B,KAAK,qBAAqBD,OAC5BK,EAAId,KAAKX,UAAUV,YACnBoC,EAAIN,EAAEE,OAAOC,MACZG,EAAID,IACLC,EAAID,QAEHlB,cAAcI,KAAKT,KAAKyB,GAAGF,EAAEC,mcAvG9CG,IAAIC,iDAEJD,IAAIE,8CAGJF,IAAIG,oCAGJH,IAAII,iCAEJJ,IAAIK,2BAGJvC,MAAQ,IAAIwC,kBAAS,uBAErB/B,SAAU,8BAAa,CACvBC,iBAAkB,CACd+B,6BAA8B,+BAC9BnC,UAAW,YACXC,KAAM,gBACNmC,QAAS,UACTC,OAAQ,SACRC,QAAS,eACTC,IAAK,WACLC,KAAM,YACNC,GAAI"}
\ 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 38db10a..a02ed88 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","core/edit_switch"],(function(_exports,_simpleline,_str,_stringHelper,_dateHelper,_ajax,_notification,_svgarc,_debugger,_config,_studyplanProcessor,_treestudyplanComponents,_edit_switch){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);new _debugger.default("treestudyplan-viewer");let 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"},competency:{competency_not_configured:"competency_not_configured",configure_competency:"configure_competency",when:"when",required:"required",points:"points@core_grades",heading:"competency_heading",details:"competency_details",results:"results",unrated:"unrated",progress:"completion_progress",view_feedback:"view_feedback"},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;document.addEventListener(_edit_switch.eventTypes.editModeSet,(e=>{e.preventDefault(),ItemEventBus.$emit("editModeSet",e.detail.editMode)})),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].then((function(response){console.info("Loaded: plans",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]))})).catch(_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].then((function(response){self.selectedstudyplan=(0,_studyplanProcessor.ProcessStudyplan)(response),self.loadingstudyplan=!1})).catch(_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("present"==(0,_dateHelper.studyplanPageTiming)(page)){const s=new Date(page.startdate);(!firststart||firststart>s)&&(startpageindex=ix,firststart=s)}}return startpageindex},wwwroot:()=>_config.default.wwwroot},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)\"\n                                    ><a v-if=\"selectedpage\" \n                                        :href=\"wwwroot+'//local/treestudyplan/studyplan-report.php?page='+selectedpage.id\"\n                                        \n                                        target='_blank'><i class='fa fa-file-text'></i></a\n                                ></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(line,page)+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                                        ><a v-if=\"selectedpage\"\n                                            :href=\"wwwroot+'//local/treestudyplan/studyplan-report.php?page='+selectedpage.id\n                                                   +'&firstperiod='+index+'&lastperiod='+index\"\n                                        target='_blank'><i class='fa fa-file-text'></i></a\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(line,page)\"\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                                                        + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')\"\n                                            ></r-studyline-slot\n                                            ><r-studyline-slot\n                                                v-if=\"showslot(page,line, index, layeridx, 'filter')\"\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                                                        + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')\"\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},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 + ' '\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},courseprogress(){return this.value.course.enrolled?this.value.course.completion?this.value.course.completion.progress/this.value.course.completion.count:this.value.course.competency?this.value.course.competency.progress/this.value.course.competency.count:this.value.course.grades?this.gradeprogress(this.value.course.grades)/this.value.course.grades.length:0:0},hasprogressinfo(){return!!this.value.course.enrolled&&(this.value.course.completion||this.value.course.competency||this.value.course.grades)},wwwroot:()=>_config.default.wwwroot},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"";case"completed":case"good":case"excellent":return"check"}},gradeprogress(grades){let progress=0;for(const ix in grades){const g=grades[ix];["completed","excellent","good"].includes(g.completion)&&progress++}return progress}},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='hasprogressinfo'>\n                                <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                    :value='courseprogress'\n                                    :max='1'\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)?(wwwroot+'/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                    header-class=\"r-item-course-header\"\n                    >\n                    <template #modal-header >\n                        <div class=\"r-item-course-header-details\">\n                            <div>\n                                <h1><a :href=\"(!guestmode)?(wwwroot+'/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=\"fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                            :title=\"text.student_not_tracked\"></i>\n                                    </template>\n                                    <template v-else-if='hasprogressinfo && !value.course.showprogressbar'>\n                                        {{text['completion_'+value.completion]}}\n                                        <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                            :value='courseprogress'\n                                            :max='1'\n                                            :min='0'\n                                            :class=\"'r-progress-circle-popup 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=\"'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                                        {{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                        </div>\n                        <s-progress-bar \n                            v-if='value.course.showprogressbar && hasprogressinfo'\n                            v-model=\"courseprogress\"\n                        ></s-progress-bar>\n                    </template>\n                    <s-course-extrafields \n                        v-if=\"value.course.extrafields\" \n                        v-model=\"value.course.extrafields\"\n                        position=\"above\"\n                        ></s-course-extrafields>\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                    <r-item-student-course-competency\n                        v-if='!!value.course.competency'\n                        v-model='value.course.competency'\n                        :item='value'\n                        ></r-item-student-course-competency>\n                    <s-course-extrafields \n                        v-if=\"value.course.extrafields\" \n                        v-model=\"value.course.extrafields\"\n                        position=\"below\"\n                        ></s-course-extrafields>\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\'><span v-html="ci.title"></span></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-student-course-competency",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},item:{type:Object,default:function(){return{id:null}}}},data:()=>({text:strings.competency}),created(){},computed:{hasCompletions(){if(this.value.conditions)for(const cgroup of this.value.conditions)if(cgroup.items&&cgroup.items.length>0)return!0;return!1},wwwroot:()=>_config.default.wwwroot},methods:{completion_icon:competency=>competency.proficient&&competency.courseproficient?"check-circle":competency.proficient?"check":!1===competency.proficient?"times-circle":"circle-o",completion_tag:competency=>competency.proficient&&competency.courseproficient||competency.proficient?"completed":!1===competency.proficient?"failed":competency.progress?"progress":"incomplete",pathtags(competency){const path=competency.path;let s="";for(const ix in path){const p=path[ix];let url;ix>0&&(s+=" / "),url="competency"==p.type?_config.default.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${p.id}`:this.competencyurl(p),s+=`<a href="${url}" target="_blank">${p.title}</a>`}return s},competencyurl(c){return _config.default.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${c.id}`},usercompetencyurl:c=>_config.default.wwwroot+`/admin/tool/lp/user_competency.php?id=${c.ucid}`},template:'\n            <table class="r-item-course-competency-list">\n                <tr v-if="value.competencies.length == 0">\n                    <td colspan=\'2\'>{{text.competencies_not_configured}}!\n                    <br><a :href="wwwroot+\'/admin/tool/lp/coursecompetencies.php?courseid=\'+item.course.id" target=\'_blank\'>{{text.configure_competencies}}</a>\n                    </td>\n                </tr>\n                <template v-else>\n                    <tr v-for=\'c in value.competencies\'>\n                        <td>\n                            <a href="#" v-b-modal="\'modal-competency-id-\'+c.id" @click.prevent.stop=\'\'><span v-html=\'c.title\'  ></span></a>\n                        </td>\n                        <td class=\'details\' >\n                            <a v-if="c.details" href="#" v-b-modal="\'modal-competency-id-\'+c.id" @click.prevent.stop=\'\' ><span v-html=\'c.details\'></span></a>\n                            <abbr v-if="c.required" :title="text.required"\n                                :class="\'s-required \' + + completion_tag(c)"\n                                ><i class=\'fa fa-asterisk\' ></i\n                            ></abbr>    \n                        </td>\n                        <td :colspan="(c.required)?1:2">\n                            <span :class="\'r-completion-\'+completion_tag(c)">\n                                <template v-if="!c.progress && !c.count">\n                                    <i :class="\'fa fa-\'+completion_icon(c)" :title="text[\'completion_\'+completion_tag(c)]"></i>\n                                    {{ (c.proficient === null)?text.unrated:c.grade }}\n                                </template>\n                                <template v-else>\n                                    <r-progress-circle v-if=\'!c.proficient\'\n                                        :value=\'c.progress\'\n                                        :max=\'c.count\'\n                                        :min=\'0\'\n                                        :class="\'r-completion-\'+completion_tag(c)"\n                                        :title="text[\'completion_\'+completion_tag(c)]"\n                                    ></r-progress-circle>\n                                    <i v-else :class="\'fa fa-\'+completion_icon(c)" :title="text[\'completion_\'+completion_tag(c)]"></i>\n                                    {{ (c.proficient === null)?((c.progress)?text.progress:text.unrated):c.grade }}\n                                </template>\n                            </span>\n                        </td>\n                        <td v-if="c.feedback">\n                            <a  v-b-modal="\'r-competency-feedback-\'+c.id"\n                                @click.prevent.stop=\'\'\n                                href="#"\n                            >{{ text["view_feedback"]}}</a>\n                            <b-modal\n                                :id="\'r-competency-feedback-\'+c.id"\n                                size="sm"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class="fa fa-puzzle-piece"></i>{{ c.title }}</h2><br>\n                                </template>\n                                <span v-html="c.feedback"></span>\n                            </b-modal>\n                        </td>\n                        <b-modal :id="\'modal-competency-id-\'+c.id"\n                            size="lg"\n                            ok-only\n                            centered\n                            scrollable\n                            >\n                            <template #modal-header>\n                                <div>\n                                    <h1><i class="fa fa-puzzle-piece"></i>\n                                        <a :href="wwwroot+\'/admin/tool/lp/competencies.php?competencyid=\'+c.id" target="_blank"\n                                        >{{c.title}} {{c.details}} </a\n                                    ></h1>\n                                    <div><span v-html="pathtags(c)"></span></div>\n                                </div>\n                            </template>\n                            <div class="mb-2" v-if="c.description"><span v-html=\'c.description\'></span></div>\n\n                            <template v-if="c.rule && c.children">\n                                <div>{{ c.ruleoutcome }} {{ text.when}} <span v-html="c.rule.toLocaleLowerCase()"></span></div>\n                                <table v-if="c.children" class=\'r-item-course-competency-list\'>\n                                    <tr class=\'t-item-course-competency-headers\'>\n                                        <th colspan="2">{{text.heading}}</th>\n                                        <th colspan="3">{{text.results}}</th>\n                                    </tr>\n                                    <tr v-for="cc in c.children">\n                                        <td >\n                                            <a :href=\'usercompetencyurl(cc)\' target="_blank"><span v-html=\'cc.title\'></span></a>\n                                        </td>\n                                        <td class=\'details\'>\n                                            <a v-if="cc.details" :href=\'usercompetencyurl(cc)\' target="_blank"><span v-html=\'cc.details\'></span></a>\n                                            <abbr v-if="c.required" :title="text.required"\n                                                :class="\'s-required \' + + completion_tag(cc)"\n                                                ><i class=\'fa fa-asterisk\' ></i\n                                            ></abbr>\n                                        </td>\n                                        <td><span :class="\'r-completion-\'+completion_tag(cc)"\n                                            ><i :class="\'fa fa-\'+completion_icon(cc)" :title="text[\'completion_\'+completion_tag(cc)]"></i>\n                                            {{ (cc.proficient === null)?text.unrated:cc.grade }}</span></td>\n                                        <td><span class="text-info">{{ cc.points }} {{ text.points }}</span></td>\n                                        <td>\n                                        </td>\n                                        <td v-if="cc.feedback">\n                                            <a  v-b-modal="\'r-competency-feedback-\'+cc.id"\n                                                href="#"\n                                            >{{ text["view_feedback"]}}</a>\n                                            <b-modal\n                                                :id="\'r-competency-feedback-\'+cc.id"\n                                                size="sm"\n                                                ok-only\n                                                centered\n                                                scrollable\n                                            >\n                                                <template #modal-header>\n                                                    <h2><i class="fa fa-puzzle-piece"></i>{{ cc.title }}</h2><br>\n                                                </template>\n                                                <span v-html="cc.feedback"></span>\n                                            </b-modal>\n                                        </td>\n                                    </tr>\n                                </table>\n                            </template>\n                        </b-modal>\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.competency)status.students=this.value.course.competency.total,status.completed=this.value.course.competency.proficient;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},wwwroot:()=>_config.default.wwwroot},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)?(wwwroot+\'/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)?(wwwroot+\'/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="wwwroot+\'/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                    <s-course-extrafields \n                        v-if="value.course.extrafields" \n                        v-model="value.course.extrafields"\n                        position="above"\n                        ></s-course-extrafields>\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                    <r-item-teacher-course-competency\n                        v-if=\'!!value.course.competency\'\n                        v-model=\'value.course.competency\'\n                        :item=\'value\'\n                        ></r-item-teacher-course-competency>\n                    <s-course-extrafields \n                        v-if="value.course.extrafields" \n                        v-model="value.course.extrafields"\n                        position="below"\n                        ></s-course-extrafields>\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:{wwwroot:()=>_config.default.wwwroot},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].catch(_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].catch(_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="wwwroot+\'/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                            <s-\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}`},wwwroot:()=>_config.default.wwwroot},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=\"wwwroot+'/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-item-teacher-course-competency",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},item:{type:Object,default:function(){return{id:null}}}},data:()=>({text:strings.competency}),created(){},computed:{hasCompletions(){if(this.value.conditions)for(const cgroup of this.value.conditions)if(cgroup.items&&cgroup.items.length>0)return!0;return!1},wwwroot:()=>_config.default.wwwroot},methods:{completion_icon:competency=>competency.proficient&&competency.courseproficient?"check-circle":competency.proficient?"check":!1===competency.proficient?"times-circle":"circle-o",completion_tag:competency=>competency.proficient&&competency.courseproficient||competency.proficient?"completed":!1===competency.proficient?"failed":competency.progress?"progress":"incomplete",pathtags(competency){const path=competency.path;let s="";for(const ix in path){const p=path[ix];let url;ix>0&&(s+=" / "),url="competency"==p.type?_config.default.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${p.id}`:this.competencyurl(p),s+=`<a href="${url}" target="_blank">${p.title}</a>`}return s},competencyurl(c){return _config.default.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${c.id}`}},template:'\n            <table class="r-item-course-competency-list">\n                <tr v-if="value.competencies.length == 0">\n                    <td colspan=\'2\'>{{text.competencies_not_configured}}!\n                    <br><a :href="wwwroot+\'/admin/tool/lp/coursecompetencies.php?courseid=\'+item.course.id" target=\'_blank\'>{{text.configure_competencies}}</a>\n                    </td>\n                </tr>\n                <template v-else>\n                    <tr v-for=\'c in value.competencies\'>\n                        <td>\n                            <a href="#" v-b-modal="\'modal-competency-id-\'+c.id"><span v-html=\'c.title\'></span></a>\n                        </td>\n                        <td class=\'details\'>\n                            <a  v-if="c.details" href="#" v-b-modal="\'modal-competency-id-\'+c.id"><span v-html=\'c.details\'></span></a>\n                            <abbr v-if="c.required" :title="text.required"\n                                :class="\'s-required \' + + completion_tag(c)"\n                                ><i class=\'fa fa-asterisk\' ></i\n                            ></abbr>   \n                        </td>\n                        <td><r-completion-bar v-model="c.completionstats" :width="150" :height="15"></td>\n                        <td v-if="c.feedback">\n                            <a  v-b-modal="\'r-competency-feedback-\'+c.id"\n                                href="#"\n                            >{{ text["view_feedback"]}}</a>\n                            <b-modal\n                                :id="\'r-competency-feedback-\'+c.id"\n                                size="sm"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class="fa fa-puzzle-piece"></i>{{ c.title }}</h2><br>\n                                </template>\n                                <span v-html="c.feedback"></span>\n                            </b-modal>\n                        </td>\n                        <b-modal :id="\'modal-competency-id-\'+c.id"\n                            size="lg"\n                            ok-only\n                            centered\n                            scrollable\n                            >\n                            <template #modal-header>\n                                <div>\n                                    <h1><i class="fa fa-puzzle-piece"></i>\n                                        <a :href="wwwroot+\'/admin/tool/lp/competencies.php?competencyid=\'+c.id" target="_blank"\n                                        >{{c.title}} {{c.details}} </a\n                                    ></h1>\n                                    <div><span v-html="pathtags(c)"></span></div>\n                                </div>\n                            </template>\n                            <div class="mb-2" v-if="c.description"><span v-html=\'c.description\'></span></div>\n\n                            <template v-if="c.rule && c.children">\n                                <div>{{ c.ruleoutcome }} {{ text.when}} <span v-html="c.rule.toLocaleLowerCase()"></span></div>\n                                <table v-if="c.children" class=\'r-item-course-competency-list\'>\n                                    <tr class=\'t-item-course-competency-headers\'>\n                                        <th colspan="2">{{text.heading}}</th>\n                                        <th colspan="3">{{text.results}}</th>\n                                    </tr>\n                                    <tr v-for="cc in c.children">\n                                        <td>\n                                            <a :href=\'competencyurl(cc)\' target="_blank"><span v-html=\'cc.title\'></span></a>\n                                        </td>\n                                        <td class=\'details\'>\n                                            <a  v-if="cc.details" :href=\'competencyurl(cc)\' target="_blank"><span v-html=\'cc.details\'></span></a>\n                                            <abbr v-if="c.required" :title="text.required"\n                                                :class="\'s-required \' + completion_tag(cc)"\n                                                ><i class=\'fa fa-asterisk\' ></i\n                                            ></abbr>\n                                        </td>\n                                        <td><r-completion-bar v-model="cc.completionstats" :width="150" :height="15"></r-completion-bar></td>\n                                        <td><span class="text-info">{{ cc.points }} {{ text.points }}</span></td>\n                                        <td v-if="cc.feedback">\n                                            <a  v-b-modal="\'r-competency-feedback-\'+cc.id"\n                                                href="#"\n                                            >{{ text["view_feedback"]}}</a>\n                                            <b-modal\n                                                :id="\'r-competency-feedback-\'+cc.id"\n                                                size="sm"\n                                                ok-only\n                                                centered\n                                                scrollable\n                                            >\n                                                <template #modal-header>\n                                                    <h2><i class="fa fa-puzzle-piece"></i>{{ cc.title }}</h2><br>\n                                                </template>\n                                                <span v-html="cc.feedback"></span>\n                                            </b-modal>\n                                        </td>\n                                    </tr>\n                                </table>\n                            </template>\n                        </b-modal>\n                    </tr>\n                </template>\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","core/edit_switch"],(function(_exports,_simpleline,_str,_stringHelper,_dateHelper,_ajax,_notification,_svgarc,_debugger,_config,_studyplanProcessor,_treestudyplanComponents,_edit_switch){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);new _debugger.default("treestudyplan-viewer");let 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"},competency:{competency_not_configured:"competency_not_configured",configure_competency:"configure_competency",when:"when",required:"required",points:"points@core_grades",heading:"competency_heading",details:"competency_details",results:"results",unrated:"unrated",progress:"completion_progress",view_feedback:"view_feedback"},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",overview:"overviewreport:all",oveviewperiod:"overviewreport:period"}});function isVisible(elem){return!!(elem.offsetWidth||elem.offsetHeight||elem.getClientRects().length)}const ItemEventBus=new Vue;document.addEventListener(_edit_switch.eventTypes.editModeSet,(e=>{e.preventDefault(),ItemEventBus.$emit("editModeSet",e.detail.editMode)})),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].then((function(response){console.info("Loaded: plans",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]))})).catch(_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].then((function(response){self.selectedstudyplan=(0,_studyplanProcessor.ProcessStudyplan)(response),self.loadingstudyplan=!1})).catch(_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("present"==(0,_dateHelper.studyplanPageTiming)(page)){const s=new Date(page.startdate);(!firststart||firststart>s)&&(startpageindex=ix,firststart=s)}}return startpageindex},wwwroot:()=>_config.default.wwwroot},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)\"\n                                    ><a v-if=\"selectedpage\" class=\"ml-2\"\n                                        :href=\"wwwroot+'//local/treestudyplan/studyplan-report.php?page='+selectedpage.id\"\n                                        \n                                        target='_blank'><i class='fa fa-list-ul'></i>&nbsp;{{text.overview}}</a\n                                ></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(line,page)+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                                        ><a v-if=\"selectedpage\"\n                                            v-b-tooltip.hover\n                                            :href=\"wwwroot+'//local/treestudyplan/studyplan-report.php?page='+selectedpage.id\n                                                   +'&firstperiod='+index+'&lastperiod='+index\"\n                                            target='_blank'\n                                            :title=\"text.overviewperiod\"><i class='fa fa-list-ul'></i></a\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(line,page)\"\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                                                        + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')\"\n                                            ></r-studyline-slot\n                                            ><r-studyline-slot\n                                                v-if=\"showslot(page,line, index, layeridx, 'filter')\"\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                                                        + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')\"\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},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 + ' '\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},courseprogress(){return this.value.course.enrolled?this.value.course.completion?this.value.course.completion.progress/this.value.course.completion.count:this.value.course.competency?this.value.course.competency.progress/this.value.course.competency.count:this.value.course.grades?this.gradeprogress(this.value.course.grades)/this.value.course.grades.length:0:0},hasprogressinfo(){return!!this.value.course.enrolled&&(this.value.course.completion||this.value.course.competency||this.value.course.grades)},wwwroot:()=>_config.default.wwwroot},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"";case"completed":case"good":case"excellent":return"check"}},gradeprogress(grades){let progress=0;for(const ix in grades){const g=grades[ix];["completed","excellent","good"].includes(g.completion)&&progress++}return progress}},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='hasprogressinfo'>\n                                <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                    :value='courseprogress'\n                                    :max='1'\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)?(wwwroot+'/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                    header-class=\"r-item-course-header\"\n                    >\n                    <template #modal-header >\n                        <div class=\"r-item-course-header-details\">\n                            <div>\n                                <h1><a :href=\"(!guestmode)?(wwwroot+'/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=\"fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                            :title=\"text.student_not_tracked\"></i>\n                                    </template>\n                                    <template v-else-if='hasprogressinfo && !value.course.showprogressbar'>\n                                        {{text['completion_'+value.completion]}}\n                                        <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                            :value='courseprogress'\n                                            :max='1'\n                                            :min='0'\n                                            :class=\"'r-progress-circle-popup 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=\"'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                                        {{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                        </div>\n                        <s-progress-bar \n                            v-if='value.course.showprogressbar && hasprogressinfo'\n                            v-model=\"courseprogress\"\n                        ></s-progress-bar>\n                    </template>\n                    <s-course-extrafields \n                        v-if=\"value.course.extrafields\" \n                        v-model=\"value.course.extrafields\"\n                        position=\"above\"\n                        ></s-course-extrafields>\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                    <r-item-student-course-competency\n                        v-if='!!value.course.competency'\n                        v-model='value.course.competency'\n                        :item='value'\n                        ></r-item-student-course-competency>\n                    <s-course-extrafields \n                        v-if=\"value.course.extrafields\" \n                        v-model=\"value.course.extrafields\"\n                        position=\"below\"\n                        ></s-course-extrafields>\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\'><span v-html="ci.title"></span></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-student-course-competency",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},item:{type:Object,default:function(){return{id:null}}}},data:()=>({text:strings.competency}),created(){},computed:{hasCompletions(){if(this.value.conditions)for(const cgroup of this.value.conditions)if(cgroup.items&&cgroup.items.length>0)return!0;return!1},wwwroot:()=>_config.default.wwwroot},methods:{completion_icon:competency=>competency.proficient&&competency.courseproficient?"check-circle":competency.proficient?"check":!1===competency.proficient?"times-circle":"circle-o",completion_tag:competency=>competency.proficient&&competency.courseproficient||competency.proficient?"completed":!1===competency.proficient?"failed":competency.progress?"progress":"incomplete",pathtags(competency){const path=competency.path;let s="";for(const ix in path){const p=path[ix];let url;ix>0&&(s+=" / "),url="competency"==p.type?_config.default.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${p.id}`:this.competencyurl(p),s+=`<a href="${url}" target="_blank">${p.title}</a>`}return s},competencyurl(c){return _config.default.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${c.id}`},usercompetencyurl:c=>_config.default.wwwroot+`/admin/tool/lp/user_competency.php?id=${c.ucid}`},template:'\n            <table class="r-item-course-competency-list">\n                <tr v-if="value.competencies.length == 0">\n                    <td colspan=\'2\'>{{text.competencies_not_configured}}!\n                    <br><a :href="wwwroot+\'/admin/tool/lp/coursecompetencies.php?courseid=\'+item.course.id" target=\'_blank\'>{{text.configure_competencies}}</a>\n                    </td>\n                </tr>\n                <template v-else>\n                    <tr v-for=\'c in value.competencies\'>\n                        <td>\n                            <a href="#" v-b-modal="\'modal-competency-id-\'+c.id" @click.prevent.stop=\'\'><span v-html=\'c.title\'  ></span></a>\n                        </td>\n                        <td class=\'details\' >\n                            <a v-if="c.details" href="#" v-b-modal="\'modal-competency-id-\'+c.id" @click.prevent.stop=\'\' ><span v-html=\'c.details\'></span></a>\n                            <abbr v-if="c.required" :title="text.required"\n                                :class="\'s-required \' + + completion_tag(c)"\n                                ><i class=\'fa fa-asterisk\' ></i\n                            ></abbr>    \n                        </td>\n                        <td :colspan="(c.required)?1:2">\n                            <span :class="\'r-completion-\'+completion_tag(c)">\n                                <template v-if="!c.progress && !c.count">\n                                    <i :class="\'fa fa-\'+completion_icon(c)" :title="text[\'completion_\'+completion_tag(c)]"></i>\n                                    {{ (c.proficient === null)?text.unrated:c.grade }}\n                                </template>\n                                <template v-else>\n                                    <r-progress-circle v-if=\'!c.proficient\'\n                                        :value=\'c.progress\'\n                                        :max=\'c.count\'\n                                        :min=\'0\'\n                                        :class="\'r-completion-\'+completion_tag(c)"\n                                        :title="text[\'completion_\'+completion_tag(c)]"\n                                    ></r-progress-circle>\n                                    <i v-else :class="\'fa fa-\'+completion_icon(c)" :title="text[\'completion_\'+completion_tag(c)]"></i>\n                                    {{ (c.proficient === null)?((c.progress)?text.progress:text.unrated):c.grade }}\n                                </template>\n                            </span>\n                        </td>\n                        <td v-if="c.feedback">\n                            <a  v-b-modal="\'r-competency-feedback-\'+c.id"\n                                @click.prevent.stop=\'\'\n                                href="#"\n                            >{{ text["view_feedback"]}}</a>\n                            <b-modal\n                                :id="\'r-competency-feedback-\'+c.id"\n                                size="sm"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class="fa fa-puzzle-piece"></i>{{ c.title }}</h2><br>\n                                </template>\n                                <span v-html="c.feedback"></span>\n                            </b-modal>\n                        </td>\n                        <b-modal :id="\'modal-competency-id-\'+c.id"\n                            size="lg"\n                            ok-only\n                            centered\n                            scrollable\n                            >\n                            <template #modal-header>\n                                <div>\n                                    <h1><i class="fa fa-puzzle-piece"></i>\n                                        <a :href="wwwroot+\'/admin/tool/lp/competencies.php?competencyid=\'+c.id" target="_blank"\n                                        >{{c.title}} {{c.details}} </a\n                                    ></h1>\n                                    <div><span v-html="pathtags(c)"></span></div>\n                                </div>\n                            </template>\n                            <div class="mb-2" v-if="c.description"><span v-html=\'c.description\'></span></div>\n\n                            <template v-if="c.rule && c.children">\n                                <div>{{ c.ruleoutcome }} {{ text.when}} <span v-html="c.rule.toLocaleLowerCase()"></span></div>\n                                <table v-if="c.children" class=\'r-item-course-competency-list\'>\n                                    <tr class=\'t-item-course-competency-headers\'>\n                                        <th colspan="2">{{text.heading}}</th>\n                                        <th colspan="3">{{text.results}}</th>\n                                    </tr>\n                                    <tr v-for="cc in c.children">\n                                        <td >\n                                            <a :href=\'usercompetencyurl(cc)\' target="_blank"><span v-html=\'cc.title\'></span></a>\n                                        </td>\n                                        <td class=\'details\'>\n                                            <a v-if="cc.details" :href=\'usercompetencyurl(cc)\' target="_blank"><span v-html=\'cc.details\'></span></a>\n                                            <abbr v-if="c.required" :title="text.required"\n                                                :class="\'s-required \' + + completion_tag(cc)"\n                                                ><i class=\'fa fa-asterisk\' ></i\n                                            ></abbr>\n                                        </td>\n                                        <td><span :class="\'r-completion-\'+completion_tag(cc)"\n                                            ><i :class="\'fa fa-\'+completion_icon(cc)" :title="text[\'completion_\'+completion_tag(cc)]"></i>\n                                            {{ (cc.proficient === null)?text.unrated:cc.grade }}</span></td>\n                                        <td><span class="text-info">{{ cc.points }} {{ text.points }}</span></td>\n                                        <td>\n                                        </td>\n                                        <td v-if="cc.feedback">\n                                            <a  v-b-modal="\'r-competency-feedback-\'+cc.id"\n                                                href="#"\n                                            >{{ text["view_feedback"]}}</a>\n                                            <b-modal\n                                                :id="\'r-competency-feedback-\'+cc.id"\n                                                size="sm"\n                                                ok-only\n                                                centered\n                                                scrollable\n                                            >\n                                                <template #modal-header>\n                                                    <h2><i class="fa fa-puzzle-piece"></i>{{ cc.title }}</h2><br>\n                                                </template>\n                                                <span v-html="cc.feedback"></span>\n                                            </b-modal>\n                                        </td>\n                                    </tr>\n                                </table>\n                            </template>\n                        </b-modal>\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.competency)status.students=this.value.course.competency.total,status.completed=this.value.course.competency.proficient;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},wwwroot:()=>_config.default.wwwroot},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)?(wwwroot+\'/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)?(wwwroot+\'/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="wwwroot+\'/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                    <s-course-extrafields \n                        v-if="value.course.extrafields" \n                        v-model="value.course.extrafields"\n                        position="above"\n                        ></s-course-extrafields>\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                    <r-item-teacher-course-competency\n                        v-if=\'!!value.course.competency\'\n                        v-model=\'value.course.competency\'\n                        :item=\'value\'\n                        ></r-item-teacher-course-competency>\n                    <s-course-extrafields \n                        v-if="value.course.extrafields" \n                        v-model="value.course.extrafields"\n                        position="below"\n                        ></s-course-extrafields>\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:{wwwroot:()=>_config.default.wwwroot},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].catch(_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].catch(_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="wwwroot+\'/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                            <s-\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}`},wwwroot:()=>_config.default.wwwroot},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=\"wwwroot+'/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-item-teacher-course-competency",{props:{value:{type:Object,default:function(){return{}}},guestmode:{type:Boolean,default:!1},item:{type:Object,default:function(){return{id:null}}}},data:()=>({text:strings.competency}),created(){},computed:{hasCompletions(){if(this.value.conditions)for(const cgroup of this.value.conditions)if(cgroup.items&&cgroup.items.length>0)return!0;return!1},wwwroot:()=>_config.default.wwwroot},methods:{completion_icon:competency=>competency.proficient&&competency.courseproficient?"check-circle":competency.proficient?"check":!1===competency.proficient?"times-circle":"circle-o",completion_tag:competency=>competency.proficient&&competency.courseproficient||competency.proficient?"completed":!1===competency.proficient?"failed":competency.progress?"progress":"incomplete",pathtags(competency){const path=competency.path;let s="";for(const ix in path){const p=path[ix];let url;ix>0&&(s+=" / "),url="competency"==p.type?_config.default.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${p.id}`:this.competencyurl(p),s+=`<a href="${url}" target="_blank">${p.title}</a>`}return s},competencyurl(c){return _config.default.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${c.id}`}},template:'\n            <table class="r-item-course-competency-list">\n                <tr v-if="value.competencies.length == 0">\n                    <td colspan=\'2\'>{{text.competencies_not_configured}}!\n                    <br><a :href="wwwroot+\'/admin/tool/lp/coursecompetencies.php?courseid=\'+item.course.id" target=\'_blank\'>{{text.configure_competencies}}</a>\n                    </td>\n                </tr>\n                <template v-else>\n                    <tr v-for=\'c in value.competencies\'>\n                        <td>\n                            <a href="#" v-b-modal="\'modal-competency-id-\'+c.id"><span v-html=\'c.title\'></span></a>\n                        </td>\n                        <td class=\'details\'>\n                            <a  v-if="c.details" href="#" v-b-modal="\'modal-competency-id-\'+c.id"><span v-html=\'c.details\'></span></a>\n                            <abbr v-if="c.required" :title="text.required"\n                                :class="\'s-required \' + + completion_tag(c)"\n                                ><i class=\'fa fa-asterisk\' ></i\n                            ></abbr>   \n                        </td>\n                        <td><r-completion-bar v-model="c.completionstats" :width="150" :height="15"></td>\n                        <td v-if="c.feedback">\n                            <a  v-b-modal="\'r-competency-feedback-\'+c.id"\n                                href="#"\n                            >{{ text["view_feedback"]}}</a>\n                            <b-modal\n                                :id="\'r-competency-feedback-\'+c.id"\n                                size="sm"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class="fa fa-puzzle-piece"></i>{{ c.title }}</h2><br>\n                                </template>\n                                <span v-html="c.feedback"></span>\n                            </b-modal>\n                        </td>\n                        <b-modal :id="\'modal-competency-id-\'+c.id"\n                            size="lg"\n                            ok-only\n                            centered\n                            scrollable\n                            >\n                            <template #modal-header>\n                                <div>\n                                    <h1><i class="fa fa-puzzle-piece"></i>\n                                        <a :href="wwwroot+\'/admin/tool/lp/competencies.php?competencyid=\'+c.id" target="_blank"\n                                        >{{c.title}} {{c.details}} </a\n                                    ></h1>\n                                    <div><span v-html="pathtags(c)"></span></div>\n                                </div>\n                            </template>\n                            <div class="mb-2" v-if="c.description"><span v-html=\'c.description\'></span></div>\n\n                            <template v-if="c.rule && c.children">\n                                <div>{{ c.ruleoutcome }} {{ text.when}} <span v-html="c.rule.toLocaleLowerCase()"></span></div>\n                                <table v-if="c.children" class=\'r-item-course-competency-list\'>\n                                    <tr class=\'t-item-course-competency-headers\'>\n                                        <th colspan="2">{{text.heading}}</th>\n                                        <th colspan="3">{{text.results}}</th>\n                                    </tr>\n                                    <tr v-for="cc in c.children">\n                                        <td>\n                                            <a :href=\'competencyurl(cc)\' target="_blank"><span v-html=\'cc.title\'></span></a>\n                                        </td>\n                                        <td class=\'details\'>\n                                            <a  v-if="cc.details" :href=\'competencyurl(cc)\' target="_blank"><span v-html=\'cc.details\'></span></a>\n                                            <abbr v-if="c.required" :title="text.required"\n                                                :class="\'s-required \' + completion_tag(cc)"\n                                                ><i class=\'fa fa-asterisk\' ></i\n                                            ></abbr>\n                                        </td>\n                                        <td><r-completion-bar v-model="cc.completionstats" :width="150" :height="15"></r-completion-bar></td>\n                                        <td><span class="text-info">{{ cc.points }} {{ text.points }}</span></td>\n                                        <td v-if="cc.feedback">\n                                            <a  v-b-modal="\'r-competency-feedback-\'+cc.id"\n                                                href="#"\n                                            >{{ text["view_feedback"]}}</a>\n                                            <b-modal\n                                                :id="\'r-competency-feedback-\'+cc.id"\n                                                size="sm"\n                                                ok-only\n                                                centered\n                                                scrollable\n                                            >\n                                                <template #modal-header>\n                                                    <h2><i class="fa fa-puzzle-piece"></i>{{ cc.title }}</h2><br>\n                                                </template>\n                                                <span v-html="cc.feedback"></span>\n                                            </b-modal>\n                                        </td>\n                                    </tr>\n                                </table>\n                            </template>\n                        </b-modal>\n                    </tr>\n                </template>\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 7b390e1..74cb4b2 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,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';\nimport TSComponents from './treestudyplan-components';\nimport {eventTypes as editSwEventTypes} from 'core/edit_switch';\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            competency: {\n                competency_not_configured: \"competency_not_configured\",\n                configure_competency: \"configure_competency\",\n                when: \"when\",\n                required: \"required\",\n                points: \"points@core_grades\",\n                heading: \"competency_heading\",\n                details: \"competency_details\",\n                results: \"results\",\n                unrated: \"unrated\",\n                progress: \"completion_progress\",\n                view_feedback: \"view_feedback\",\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        // Add event listener for the edit mode event so we can react to it, or at the very least ignore it\n        document.addEventListener(editSwEventTypes.editModeSet,(e) => {\n            e.preventDefault();\n            ItemEventBus.$emit('editModeSet',e.detail.editMode);\n        });\n\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                    \n                    call([{\n                        methodname: `local_treestudyplan_list_${this.verified_type}_studyplans`,\n                        args: this.call_args(),\n                    }])[0].then(function(response){\n                        console.info(\"Loaded: plans\",response);\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                    }).catch(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].then(function(response){\n                        self.selectedstudyplan = ProcessStudyplan(response);\n                        self.loadingstudyplan = false;\n                    }).catch(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() { return false;},\n                },\n                teachermode: {\n                    type: Boolean,\n                    default() { return 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                        if(studyplanPageTiming(page) == \"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                wwwroot() {\n                    return Config.wwwroot;\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 slot\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)\"\n                                    ><a v-if=\"selectedpage\" \n                                        :href=\"wwwroot+'//local/treestudyplan/studyplan-report.php?page='+selectedpage.id\"\n                                        \n                                        target='_blank'><i class='fa fa-file-text'></i></a\n                                ></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(line,page)+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                                        ><a v-if=\"selectedpage\"\n                                            :href=\"wwwroot+'//local/treestudyplan/studyplan-report.php?page='+selectedpage.id\n                                                   +'&firstperiod='+index+'&lastperiod='+index\"\n                                        target='_blank'><i class='fa fa-file-text'></i></a\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(line,page)\"\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                                                        + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')\"\n                                            ></r-studyline-slot\n                                            ><r-studyline-slot\n                                                v-if=\"showslot(page,line, index, layeridx, 'filter')\"\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                                                        + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')\"\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                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 + ' '\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                courseprogress() {\n                    if (!this.value.course.enrolled) {\n                        return 0;\n                    } else if(this.value.course.completion) {\n                        return (this.value.course.completion.progress / this.value.course.completion.count); \n                    } else if(this.value.course.competency) {\n                        return (this.value.course.competency.progress / this.value.course.competency.count); \n                    } else if(this.value.course.grades) {\n                        return (this.gradeprogress(this.value.course.grades) / this.value.course.grades.length); \n                    } else {\n                        return 0;\n                    }\n                },\n                hasprogressinfo() {\n                    if (!this.value.course.enrolled) {\n                        return false;\n                    } else {\n                        return (this.value.course.completion || this.value.course.competency || this.value.course.grades);\n                    }\n                },\n                wwwroot() {\n                    return Config.wwwroot;\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 \"\";\n                        case \"completed\":\n                            return \"check\";\n                        case \"good\":\n                            return \"check\";\n                        case \"excellent\":\n                            return \"check\";\n                    }\n                },\n                gradeprogress(grades) {\n                    let progress = 0;\n                    for (const ix in grades) {\n                        const g = grades[ix];\n                        if ([\"completed\",\"excellent\",\"good\"].includes(g.completion)) {\n                            progress++;\n                        }\n                    }\n                    return progress;\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='hasprogressinfo'>\n                                <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                    :value='courseprogress'\n                                    :max='1'\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)?(wwwroot+'/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                    header-class=\"r-item-course-header\"\n                    >\n                    <template #modal-header >\n                        <div class=\"r-item-course-header-details\">\n                            <div>\n                                <h1><a :href=\"(!guestmode)?(wwwroot+'/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=\"fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                            :title=\"text.student_not_tracked\"></i>\n                                    </template>\n                                    <template v-else-if='hasprogressinfo && !value.course.showprogressbar'>\n                                        {{text['completion_'+value.completion]}}\n                                        <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                            :value='courseprogress'\n                                            :max='1'\n                                            :min='0'\n                                            :class=\"'r-progress-circle-popup 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=\"'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                                        {{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                        </div>\n                        <s-progress-bar \n                            v-if='value.course.showprogressbar && hasprogressinfo'\n                            v-model=\"courseprogress\"\n                        ></s-progress-bar>\n                    </template>\n                    <s-course-extrafields \n                        v-if=\"value.course.extrafields\" \n                        v-model=\"value.course.extrafields\"\n                        position=\"above\"\n                        ></s-course-extrafields>\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                    <r-item-student-course-competency\n                        v-if='!!value.course.competency'\n                        v-model='value.course.competency'\n                        :item='value'\n                        ></r-item-student-course-competency>\n                    <s-course-extrafields \n                        v-if=\"value.course.extrafields\" \n                        v-model=\"value.course.extrafields\"\n                        position=\"below\"\n                        ></s-course-extrafields>\n                </b-modal>\n            </b-card></div>\n            `,\n        });\n\n        //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        // 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'><span v-html=\"ci.title\"></span></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: STUDENT Course competency\n        Vue.component('r-item-student-course-competency',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                item: {\n                    type: Object,\n                    default: function(){ return { id: null};},\n                }\n            },\n            data() {\n                return {\n                    text: strings.competency,\n                };\n            },\n            created(){\n\n            },\n            computed: {\n                hasCompletions() {\n                    if(this.value.conditions) {\n                        for(const cgroup of this.value.conditions){\n                            if(cgroup.items && cgroup.items.length > 0){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n                wwwroot() {\n                    return Config.wwwroot;\n                }\n            },\n            methods: {\n                completion_icon(competency) {\n                    if (competency.proficient && competency.courseproficient) {\n                        return \"check-circle\";\n                    } else if (competency.proficient) {\n                        return \"check\";\n                    } else if (competency.proficient === false) {\n                        return \"times-circle\";\n                    } else {\n                        return \"circle-o\";\n                    }\n                },\n\n                completion_tag(competency){\n                    if (competency.proficient && competency.courseproficient) {\n                        return \"completed\";\n                    } else if (competency.proficient) {\n                        return \"completed\";\n                    } else if (competency.proficient === false) {\n                        return \"failed\";\n                    } else if (competency.progress) {\n                        return \"progress\";\n                    } else {\n                        return \"incomplete\";\n                    }\n                },\n\n                pathtags(competency) {\n                    const path = competency.path;\n                    let s = \"\";\n                    for (const ix in path) {\n                        const p = path[ix];\n                        if ( ix > 0) {\n                            s += \" / \";\n                        }\n                        let url;\n                        if (p.type =='competency') { \n                            url = Config.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${p.id}`;\n                        } else {\n                            url = this.competencyurl(p);\n                        }\n                        \n                        s += `<a href=\"${url}\" target=\"_blank\">${p.title}</a>`;\n                    }\n                    return s;\n                },\n                competencyurl(c) {\n                    return Config.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${c.id}`;\n                },\n                usercompetencyurl(c) {\n                    return Config.wwwroot+`/admin/tool/lp/user_competency.php?id=${c.ucid}`;\n                }\n            },\n            template: `\n            <table class=\"r-item-course-competency-list\">\n                <tr v-if=\"value.competencies.length == 0\">\n                    <td colspan='2'>{{text.competencies_not_configured}}!\n                    <br><a :href=\"wwwroot+'/admin/tool/lp/coursecompetencies.php?courseid='+item.course.id\" target='_blank'>{{text.configure_competencies}}</a>\n                    </td>\n                </tr>\n                <template v-else>\n                    <tr v-for='c in value.competencies'>\n                        <td>\n                            <a href=\"#\" v-b-modal=\"'modal-competency-id-'+c.id\" @click.prevent.stop=''><span v-html='c.title'  ></span></a>\n                        </td>\n                        <td class='details' >\n                            <a v-if=\"c.details\" href=\"#\" v-b-modal=\"'modal-competency-id-'+c.id\" @click.prevent.stop='' ><span v-html='c.details'></span></a>\n                            <abbr v-if=\"c.required\" :title=\"text.required\"\n                                :class=\"'s-required ' + + completion_tag(c)\"\n                                ><i class='fa fa-asterisk' ></i\n                            ></abbr>    \n                        </td>\n                        <td :colspan=\"(c.required)?1:2\">\n                            <span :class=\"'r-completion-'+completion_tag(c)\">\n                                <template v-if=\"!c.progress && !c.count\">\n                                    <i :class=\"'fa fa-'+completion_icon(c)\" :title=\"text['completion_'+completion_tag(c)]\"></i>\n                                    {{ (c.proficient === null)?text.unrated:c.grade }}\n                                </template>\n                                <template v-else>\n                                    <r-progress-circle v-if='!c.proficient'\n                                        :value='c.progress'\n                                        :max='c.count'\n                                        :min='0'\n                                        :class=\"'r-completion-'+completion_tag(c)\"\n                                        :title=\"text['completion_'+completion_tag(c)]\"\n                                    ></r-progress-circle>\n                                    <i v-else :class=\"'fa fa-'+completion_icon(c)\" :title=\"text['completion_'+completion_tag(c)]\"></i>\n                                    {{ (c.proficient === null)?((c.progress)?text.progress:text.unrated):c.grade }}\n                                </template>\n                            </span>\n                        </td>\n                        <td v-if=\"c.feedback\">\n                            <a  v-b-modal=\"'r-competency-feedback-'+c.id\"\n                                @click.prevent.stop=''\n                                href=\"#\"\n                            >{{ text[\"view_feedback\"]}}</a>\n                            <b-modal\n                                :id=\"'r-competency-feedback-'+c.id\"\n                                size=\"sm\"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class=\"fa fa-puzzle-piece\"></i>{{ c.title }}</h2><br>\n                                </template>\n                                <span v-html=\"c.feedback\"></span>\n                            </b-modal>\n                        </td>\n                        <b-modal :id=\"'modal-competency-id-'+c.id\"\n                            size=\"lg\"\n                            ok-only\n                            centered\n                            scrollable\n                            >\n                            <template #modal-header>\n                                <div>\n                                    <h1><i class=\"fa fa-puzzle-piece\"></i>\n                                        <a :href=\"wwwroot+'/admin/tool/lp/competencies.php?competencyid='+c.id\" target=\"_blank\"\n                                        >{{c.title}} {{c.details}} </a\n                                    ></h1>\n                                    <div><span v-html=\"pathtags(c)\"></span></div>\n                                </div>\n                            </template>\n                            <div class=\"mb-2\" v-if=\"c.description\"><span v-html='c.description'></span></div>\n\n                            <template v-if=\"c.rule && c.children\">\n                                <div>{{ c.ruleoutcome }} {{ text.when}} <span v-html=\"c.rule.toLocaleLowerCase()\"></span></div>\n                                <table v-if=\"c.children\" class='r-item-course-competency-list'>\n                                    <tr class='t-item-course-competency-headers'>\n                                        <th colspan=\"2\">{{text.heading}}</th>\n                                        <th colspan=\"3\">{{text.results}}</th>\n                                    </tr>\n                                    <tr v-for=\"cc in c.children\">\n                                        <td >\n                                            <a :href='usercompetencyurl(cc)' target=\"_blank\"><span v-html='cc.title'></span></a>\n                                        </td>\n                                        <td class='details'>\n                                            <a v-if=\"cc.details\" :href='usercompetencyurl(cc)' target=\"_blank\"><span v-html='cc.details'></span></a>\n                                            <abbr v-if=\"c.required\" :title=\"text.required\"\n                                                :class=\"'s-required ' + + completion_tag(cc)\"\n                                                ><i class='fa fa-asterisk' ></i\n                                            ></abbr>\n                                        </td>\n                                        <td><span :class=\"'r-completion-'+completion_tag(cc)\"\n                                            ><i :class=\"'fa fa-'+completion_icon(cc)\" :title=\"text['completion_'+completion_tag(cc)]\"></i>\n                                            {{ (cc.proficient === null)?text.unrated:cc.grade }}</span></td>\n                                        <td><span class=\"text-info\">{{ cc.points }} {{ text.points }}</span></td>\n                                        <td>\n                                        </td>\n                                        <td v-if=\"cc.feedback\">\n                                            <a  v-b-modal=\"'r-competency-feedback-'+cc.id\"\n                                                href=\"#\"\n                                            >{{ text[\"view_feedback\"]}}</a>\n                                            <b-modal\n                                                :id=\"'r-competency-feedback-'+cc.id\"\n                                                size=\"sm\"\n                                                ok-only\n                                                centered\n                                                scrollable\n                                            >\n                                                <template #modal-header>\n                                                    <h2><i class=\"fa fa-puzzle-piece\"></i>{{ cc.title }}</h2><br>\n                                                </template>\n                                                <span v-html=\"cc.feedback\"></span>\n                                            </b-modal>\n                                        </td>\n                                    </tr>\n                                </table>\n                            </template>\n                        </b-modal>\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() { \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                    } else if (this.value.course.competency) {\n                        status.students = this.value.course.competency.total;\n                        status.completed = this.value.course.competency.proficient;\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                wwwroot() {\n                    return Config.wwwroot;\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)?(wwwroot+'/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)?(wwwroot+'/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=\"wwwroot+'/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                    <s-course-extrafields \n                        v-if=\"value.course.extrafields\" \n                        v-model=\"value.course.extrafields\"\n                        position=\"above\"\n                        ></s-course-extrafields>\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                    <r-item-teacher-course-competency\n                        v-if='!!value.course.competency'\n                        v-model='value.course.competency'\n                        :item='value'\n                        ></r-item-teacher-course-competency>\n                    <s-course-extrafields \n                        v-if=\"value.course.extrafields\" \n                        v-model=\"value.course.extrafields\"\n                        position=\"below\"\n                        ></s-course-extrafields>\n                </b-modal>\n\n            </b-card>\n            </div>\n            `,\n        });\n\n\n        //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                wwwroot() {\n                    return Config.wwwroot;\n                }\n            },\n            methods: {\n                includeChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': newValue,\n                                'required': g.required,\n                                }\n                    }])[0].catch(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].catch(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=\"wwwroot+'/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                            <s-\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        //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        // 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                wwwroot() {\n                    return Config.wwwroot;\n                }\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=\"wwwroot+'/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        //TAG: Teacher Course competency\n        Vue.component('r-item-teacher-course-competency',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                item: {\n                    type: Object,\n                    default: function(){ return { id: null};},\n                }\n            },\n            data() {\n                return {\n                    text: strings.competency,\n                };\n            },\n            created(){\n\n            },\n            computed: {\n                hasCompletions() {\n                    if(this.value.conditions) {\n                        for(const cgroup of this.value.conditions){\n                            if(cgroup.items && cgroup.items.length > 0){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n                wwwroot() {\n                    return Config.wwwroot;\n                }\n            },\n            methods: {\n                completion_icon(competency) {\n                    if (competency.proficient && competency.courseproficient) {\n                        return \"check-circle\";\n                    } else if (competency.proficient) {\n                        return \"check\";\n                    } else if (competency.proficient === false) {\n                        return \"times-circle\";\n                    } else {\n                        return \"circle-o\";\n                    }\n                },\n\n                completion_tag(competency){\n                    if (competency.proficient && competency.courseproficient) {\n                        return \"completed\";\n                    } else if (competency.proficient) {\n                        return \"completed\";\n                    } else if (competency.proficient === false) {\n                        return \"failed\";\n                    } else if (competency.progress) {\n                        return \"progress\";\n                    } else {\n                        return \"incomplete\";\n                    }\n                },\n\n                pathtags(competency) {\n                    const path = competency.path;\n                    let s = \"\";\n                    for (const ix in path) {\n                        const p = path[ix];\n                        if ( ix > 0) {\n                            s += \" / \";\n                        }\n                        let url;\n                        if (p.type =='competency') { \n                            url = Config.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${p.id}`;\n                        } else {\n                            url = this.competencyurl(p);\n                        }\n                        \n                        s += `<a href=\"${url}\" target=\"_blank\">${p.title}</a>`;\n                    }\n                    return s;\n                },\n                competencyurl(c) {\n                    return Config.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${c.id}`;\n                },\n            },\n            template: `\n            <table class=\"r-item-course-competency-list\">\n                <tr v-if=\"value.competencies.length == 0\">\n                    <td colspan='2'>{{text.competencies_not_configured}}!\n                    <br><a :href=\"wwwroot+'/admin/tool/lp/coursecompetencies.php?courseid='+item.course.id\" target='_blank'>{{text.configure_competencies}}</a>\n                    </td>\n                </tr>\n                <template v-else>\n                    <tr v-for='c in value.competencies'>\n                        <td>\n                            <a href=\"#\" v-b-modal=\"'modal-competency-id-'+c.id\"><span v-html='c.title'></span></a>\n                        </td>\n                        <td class='details'>\n                            <a  v-if=\"c.details\" href=\"#\" v-b-modal=\"'modal-competency-id-'+c.id\"><span v-html='c.details'></span></a>\n                            <abbr v-if=\"c.required\" :title=\"text.required\"\n                                :class=\"'s-required ' + + completion_tag(c)\"\n                                ><i class='fa fa-asterisk' ></i\n                            ></abbr>   \n                        </td>\n                        <td><r-completion-bar v-model=\"c.completionstats\" :width=\"150\" :height=\"15\"></td>\n                        <td v-if=\"c.feedback\">\n                            <a  v-b-modal=\"'r-competency-feedback-'+c.id\"\n                                href=\"#\"\n                            >{{ text[\"view_feedback\"]}}</a>\n                            <b-modal\n                                :id=\"'r-competency-feedback-'+c.id\"\n                                size=\"sm\"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class=\"fa fa-puzzle-piece\"></i>{{ c.title }}</h2><br>\n                                </template>\n                                <span v-html=\"c.feedback\"></span>\n                            </b-modal>\n                        </td>\n                        <b-modal :id=\"'modal-competency-id-'+c.id\"\n                            size=\"lg\"\n                            ok-only\n                            centered\n                            scrollable\n                            >\n                            <template #modal-header>\n                                <div>\n                                    <h1><i class=\"fa fa-puzzle-piece\"></i>\n                                        <a :href=\"wwwroot+'/admin/tool/lp/competencies.php?competencyid='+c.id\" target=\"_blank\"\n                                        >{{c.title}} {{c.details}} </a\n                                    ></h1>\n                                    <div><span v-html=\"pathtags(c)\"></span></div>\n                                </div>\n                            </template>\n                            <div class=\"mb-2\" v-if=\"c.description\"><span v-html='c.description'></span></div>\n\n                            <template v-if=\"c.rule && c.children\">\n                                <div>{{ c.ruleoutcome }} {{ text.when}} <span v-html=\"c.rule.toLocaleLowerCase()\"></span></div>\n                                <table v-if=\"c.children\" class='r-item-course-competency-list'>\n                                    <tr class='t-item-course-competency-headers'>\n                                        <th colspan=\"2\">{{text.heading}}</th>\n                                        <th colspan=\"3\">{{text.results}}</th>\n                                    </tr>\n                                    <tr v-for=\"cc in c.children\">\n                                        <td>\n                                            <a :href='competencyurl(cc)' target=\"_blank\"><span v-html='cc.title'></span></a>\n                                        </td>\n                                        <td class='details'>\n                                            <a  v-if=\"cc.details\" :href='competencyurl(cc)' target=\"_blank\"><span v-html='cc.details'></span></a>\n                                            <abbr v-if=\"c.required\" :title=\"text.required\"\n                                                :class=\"'s-required ' + completion_tag(cc)\"\n                                                ><i class='fa fa-asterisk' ></i\n                                            ></abbr>\n                                        </td>\n                                        <td><r-completion-bar v-model=\"cc.completionstats\" :width=\"150\" :height=\"15\"></r-completion-bar></td>\n                                        <td><span class=\"text-info\">{{ cc.points }} {{ text.points }}</span></td>\n                                        <td v-if=\"cc.feedback\">\n                                            <a  v-b-modal=\"'r-competency-feedback-'+cc.id\"\n                                                href=\"#\"\n                                            >{{ text[\"view_feedback\"]}}</a>\n                                            <b-modal\n                                                :id=\"'r-competency-feedback-'+cc.id\"\n                                                size=\"sm\"\n                                                ok-only\n                                                centered\n                                                scrollable\n                                            >\n                                                <template #modal-header>\n                                                    <h2><i class=\"fa fa-puzzle-piece\"></i>{{ cc.title }}</h2><br>\n                                                </template>\n                                                <span v-html=\"cc.feedback\"></span>\n                                            </b-modal>\n                                        </td>\n                                    </tr>\n                                </table>\n                            </template>\n                        </b-modal>\n                    </tr>\n                </template>\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","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","competency","competency_not_configured","configure_competency","when","required","points","heading","details","results","unrated","progress","pageinfo","edit","fullname","shortname","startdate","enddate","description","duration","isVisible","elem","offsetWidth","offsetHeight","getClientRects","length","ItemEventBus","addEventListener","editSwEventTypes","editModeSet","e","preventDefault","$emit","detail","editMode","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","then","response","console","info","plans","ix","plan","push","sort","a","b","t","Date","getTime","name","localeCompare","selectStudyplan","lengh","catch","notification","exception","studyplanid","id","deselectStudyplan","Object","Boolean","selectedpageindex","selectedpage","pages","startpageindex","firststart","page","s","wwwroot","Config","pageduration","columns","periods","columns_stylerule","i","countLineLayers","line","maxLayer","slots","courses","item","layer","filters","showslot","index","layeridx","forGradable","show","list","span","selectedpageChanged","newTabIndex","prevTabIndex","$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","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","beforeDestroy","removeEventListener","$off","beforeUpdate","dummy","noenddate","courseprogress","enrolled","count","grades","gradeprogress","hasprogressinfo","completion_icon","circle_icon","g","pendingsubmission","result","useRequiredGrades","aggregation_info","completion_tag","cgroup","hasCompletions","conditions","requirementHTML","requirements","rqs","split","html","addTargetBlank","m","exec","proficient","courseproficient","pathtags","path","p","url","competencyurl","c","usercompetencyurl","ucid","txt","course_grading_needed","course_grading_state","course_grading_icon","determine_grading_icon","filtered_grades","filter","selected","isCompletable","completable","progress_circle","status","students","cond","total","grade","gradingstate","includeChanged","newValue","requiredChanged","grading_icon","is_grading_needed","stringkeys","key","completionreport","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","badgeinprogress","completion_icon_rq","complete"],"mappings":"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"}
\ 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';\nimport TSComponents from './treestudyplan-components';\nimport {eventTypes as editSwEventTypes} from 'core/edit_switch';\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            competency: {\n                competency_not_configured: \"competency_not_configured\",\n                configure_competency: \"configure_competency\",\n                when: \"when\",\n                required: \"required\",\n                points: \"points@core_grades\",\n                heading: \"competency_heading\",\n                details: \"competency_details\",\n                results: \"results\",\n                unrated: \"unrated\",\n                progress: \"completion_progress\",\n                view_feedback: \"view_feedback\",\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                overview: 'overviewreport:all',\n                oveviewperiod: 'overviewreport:period'\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        // Add event listener for the edit mode event so we can react to it, or at the very least ignore it\n        document.addEventListener(editSwEventTypes.editModeSet,(e) => {\n            e.preventDefault();\n            ItemEventBus.$emit('editModeSet',e.detail.editMode);\n        });\n\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                    \n                    call([{\n                        methodname: `local_treestudyplan_list_${this.verified_type}_studyplans`,\n                        args: this.call_args(),\n                    }])[0].then(function(response){\n                        console.info(\"Loaded: plans\",response);\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                    }).catch(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].then(function(response){\n                        self.selectedstudyplan = ProcessStudyplan(response);\n                        self.loadingstudyplan = false;\n                    }).catch(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() { return false;},\n                },\n                teachermode: {\n                    type: Boolean,\n                    default() { return 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                        if(studyplanPageTiming(page) == \"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                wwwroot() {\n                    return Config.wwwroot;\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 slot\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)\"\n                                    ><a v-if=\"selectedpage\" class=\"ml-2\"\n                                        :href=\"wwwroot+'//local/treestudyplan/studyplan-report.php?page='+selectedpage.id\"\n                                        \n                                        target='_blank'><i class='fa fa-list-ul'></i>&nbsp;{{text.overview}}</a\n                                ></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(line,page)+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                                        ><a v-if=\"selectedpage\"\n                                            v-b-tooltip.hover\n                                            :href=\"wwwroot+'//local/treestudyplan/studyplan-report.php?page='+selectedpage.id\n                                                   +'&firstperiod='+index+'&lastperiod='+index\"\n                                            target='_blank'\n                                            :title=\"text.overviewperiod\"><i class='fa fa-list-ul'></i></a\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(line,page)\"\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                                                        + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')\"\n                                            ></r-studyline-slot\n                                            ><r-studyline-slot\n                                                v-if=\"showslot(page,line, index, layeridx, 'filter')\"\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                                                        + ((layernr == countLineLayers(line,page))?' lastlyr ':' ')\"\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                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 + ' '\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                courseprogress() {\n                    if (!this.value.course.enrolled) {\n                        return 0;\n                    } else if(this.value.course.completion) {\n                        return (this.value.course.completion.progress / this.value.course.completion.count); \n                    } else if(this.value.course.competency) {\n                        return (this.value.course.competency.progress / this.value.course.competency.count); \n                    } else if(this.value.course.grades) {\n                        return (this.gradeprogress(this.value.course.grades) / this.value.course.grades.length); \n                    } else {\n                        return 0;\n                    }\n                },\n                hasprogressinfo() {\n                    if (!this.value.course.enrolled) {\n                        return false;\n                    } else {\n                        return (this.value.course.completion || this.value.course.competency || this.value.course.grades);\n                    }\n                },\n                wwwroot() {\n                    return Config.wwwroot;\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 \"\";\n                        case \"completed\":\n                            return \"check\";\n                        case \"good\":\n                            return \"check\";\n                        case \"excellent\":\n                            return \"check\";\n                    }\n                },\n                gradeprogress(grades) {\n                    let progress = 0;\n                    for (const ix in grades) {\n                        const g = grades[ix];\n                        if ([\"completed\",\"excellent\",\"good\"].includes(g.completion)) {\n                            progress++;\n                        }\n                    }\n                    return progress;\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='hasprogressinfo'>\n                                <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                    :value='courseprogress'\n                                    :max='1'\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)?(wwwroot+'/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                    header-class=\"r-item-course-header\"\n                    >\n                    <template #modal-header >\n                        <div class=\"r-item-course-header-details\">\n                            <div>\n                                <h1><a :href=\"(!guestmode)?(wwwroot+'/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=\"fa fa-exclamation-triangle t-not-enrolled-alert\"\n                                            :title=\"text.student_not_tracked\"></i>\n                                    </template>\n                                    <template v-else-if='hasprogressinfo && !value.course.showprogressbar'>\n                                        {{text['completion_'+value.completion]}}\n                                        <r-progress-circle v-if='[\"failed\", \"progress\",\"incomplete\"].includes(value.completion)'\n                                            :value='courseprogress'\n                                            :max='1'\n                                            :min='0'\n                                            :class=\"'r-progress-circle-popup 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=\"'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                                        {{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                        </div>\n                        <s-progress-bar \n                            v-if='value.course.showprogressbar && hasprogressinfo'\n                            v-model=\"courseprogress\"\n                        ></s-progress-bar>\n                    </template>\n                    <s-course-extrafields \n                        v-if=\"value.course.extrafields\" \n                        v-model=\"value.course.extrafields\"\n                        position=\"above\"\n                        ></s-course-extrafields>\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                    <r-item-student-course-competency\n                        v-if='!!value.course.competency'\n                        v-model='value.course.competency'\n                        :item='value'\n                        ></r-item-student-course-competency>\n                    <s-course-extrafields \n                        v-if=\"value.course.extrafields\" \n                        v-model=\"value.course.extrafields\"\n                        position=\"below\"\n                        ></s-course-extrafields>\n                </b-modal>\n            </b-card></div>\n            `,\n        });\n\n        //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        // 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'><span v-html=\"ci.title\"></span></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: STUDENT Course competency\n        Vue.component('r-item-student-course-competency',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                item: {\n                    type: Object,\n                    default: function(){ return { id: null};},\n                }\n            },\n            data() {\n                return {\n                    text: strings.competency,\n                };\n            },\n            created(){\n\n            },\n            computed: {\n                hasCompletions() {\n                    if(this.value.conditions) {\n                        for(const cgroup of this.value.conditions){\n                            if(cgroup.items && cgroup.items.length > 0){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n                wwwroot() {\n                    return Config.wwwroot;\n                }\n            },\n            methods: {\n                completion_icon(competency) {\n                    if (competency.proficient && competency.courseproficient) {\n                        return \"check-circle\";\n                    } else if (competency.proficient) {\n                        return \"check\";\n                    } else if (competency.proficient === false) {\n                        return \"times-circle\";\n                    } else {\n                        return \"circle-o\";\n                    }\n                },\n\n                completion_tag(competency){\n                    if (competency.proficient && competency.courseproficient) {\n                        return \"completed\";\n                    } else if (competency.proficient) {\n                        return \"completed\";\n                    } else if (competency.proficient === false) {\n                        return \"failed\";\n                    } else if (competency.progress) {\n                        return \"progress\";\n                    } else {\n                        return \"incomplete\";\n                    }\n                },\n\n                pathtags(competency) {\n                    const path = competency.path;\n                    let s = \"\";\n                    for (const ix in path) {\n                        const p = path[ix];\n                        if ( ix > 0) {\n                            s += \" / \";\n                        }\n                        let url;\n                        if (p.type =='competency') { \n                            url = Config.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${p.id}`;\n                        } else {\n                            url = this.competencyurl(p);\n                        }\n                        \n                        s += `<a href=\"${url}\" target=\"_blank\">${p.title}</a>`;\n                    }\n                    return s;\n                },\n                competencyurl(c) {\n                    return Config.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${c.id}`;\n                },\n                usercompetencyurl(c) {\n                    return Config.wwwroot+`/admin/tool/lp/user_competency.php?id=${c.ucid}`;\n                }\n            },\n            template: `\n            <table class=\"r-item-course-competency-list\">\n                <tr v-if=\"value.competencies.length == 0\">\n                    <td colspan='2'>{{text.competencies_not_configured}}!\n                    <br><a :href=\"wwwroot+'/admin/tool/lp/coursecompetencies.php?courseid='+item.course.id\" target='_blank'>{{text.configure_competencies}}</a>\n                    </td>\n                </tr>\n                <template v-else>\n                    <tr v-for='c in value.competencies'>\n                        <td>\n                            <a href=\"#\" v-b-modal=\"'modal-competency-id-'+c.id\" @click.prevent.stop=''><span v-html='c.title'  ></span></a>\n                        </td>\n                        <td class='details' >\n                            <a v-if=\"c.details\" href=\"#\" v-b-modal=\"'modal-competency-id-'+c.id\" @click.prevent.stop='' ><span v-html='c.details'></span></a>\n                            <abbr v-if=\"c.required\" :title=\"text.required\"\n                                :class=\"'s-required ' + + completion_tag(c)\"\n                                ><i class='fa fa-asterisk' ></i\n                            ></abbr>    \n                        </td>\n                        <td :colspan=\"(c.required)?1:2\">\n                            <span :class=\"'r-completion-'+completion_tag(c)\">\n                                <template v-if=\"!c.progress && !c.count\">\n                                    <i :class=\"'fa fa-'+completion_icon(c)\" :title=\"text['completion_'+completion_tag(c)]\"></i>\n                                    {{ (c.proficient === null)?text.unrated:c.grade }}\n                                </template>\n                                <template v-else>\n                                    <r-progress-circle v-if='!c.proficient'\n                                        :value='c.progress'\n                                        :max='c.count'\n                                        :min='0'\n                                        :class=\"'r-completion-'+completion_tag(c)\"\n                                        :title=\"text['completion_'+completion_tag(c)]\"\n                                    ></r-progress-circle>\n                                    <i v-else :class=\"'fa fa-'+completion_icon(c)\" :title=\"text['completion_'+completion_tag(c)]\"></i>\n                                    {{ (c.proficient === null)?((c.progress)?text.progress:text.unrated):c.grade }}\n                                </template>\n                            </span>\n                        </td>\n                        <td v-if=\"c.feedback\">\n                            <a  v-b-modal=\"'r-competency-feedback-'+c.id\"\n                                @click.prevent.stop=''\n                                href=\"#\"\n                            >{{ text[\"view_feedback\"]}}</a>\n                            <b-modal\n                                :id=\"'r-competency-feedback-'+c.id\"\n                                size=\"sm\"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class=\"fa fa-puzzle-piece\"></i>{{ c.title }}</h2><br>\n                                </template>\n                                <span v-html=\"c.feedback\"></span>\n                            </b-modal>\n                        </td>\n                        <b-modal :id=\"'modal-competency-id-'+c.id\"\n                            size=\"lg\"\n                            ok-only\n                            centered\n                            scrollable\n                            >\n                            <template #modal-header>\n                                <div>\n                                    <h1><i class=\"fa fa-puzzle-piece\"></i>\n                                        <a :href=\"wwwroot+'/admin/tool/lp/competencies.php?competencyid='+c.id\" target=\"_blank\"\n                                        >{{c.title}} {{c.details}} </a\n                                    ></h1>\n                                    <div><span v-html=\"pathtags(c)\"></span></div>\n                                </div>\n                            </template>\n                            <div class=\"mb-2\" v-if=\"c.description\"><span v-html='c.description'></span></div>\n\n                            <template v-if=\"c.rule && c.children\">\n                                <div>{{ c.ruleoutcome }} {{ text.when}} <span v-html=\"c.rule.toLocaleLowerCase()\"></span></div>\n                                <table v-if=\"c.children\" class='r-item-course-competency-list'>\n                                    <tr class='t-item-course-competency-headers'>\n                                        <th colspan=\"2\">{{text.heading}}</th>\n                                        <th colspan=\"3\">{{text.results}}</th>\n                                    </tr>\n                                    <tr v-for=\"cc in c.children\">\n                                        <td >\n                                            <a :href='usercompetencyurl(cc)' target=\"_blank\"><span v-html='cc.title'></span></a>\n                                        </td>\n                                        <td class='details'>\n                                            <a v-if=\"cc.details\" :href='usercompetencyurl(cc)' target=\"_blank\"><span v-html='cc.details'></span></a>\n                                            <abbr v-if=\"c.required\" :title=\"text.required\"\n                                                :class=\"'s-required ' + + completion_tag(cc)\"\n                                                ><i class='fa fa-asterisk' ></i\n                                            ></abbr>\n                                        </td>\n                                        <td><span :class=\"'r-completion-'+completion_tag(cc)\"\n                                            ><i :class=\"'fa fa-'+completion_icon(cc)\" :title=\"text['completion_'+completion_tag(cc)]\"></i>\n                                            {{ (cc.proficient === null)?text.unrated:cc.grade }}</span></td>\n                                        <td><span class=\"text-info\">{{ cc.points }} {{ text.points }}</span></td>\n                                        <td>\n                                        </td>\n                                        <td v-if=\"cc.feedback\">\n                                            <a  v-b-modal=\"'r-competency-feedback-'+cc.id\"\n                                                href=\"#\"\n                                            >{{ text[\"view_feedback\"]}}</a>\n                                            <b-modal\n                                                :id=\"'r-competency-feedback-'+cc.id\"\n                                                size=\"sm\"\n                                                ok-only\n                                                centered\n                                                scrollable\n                                            >\n                                                <template #modal-header>\n                                                    <h2><i class=\"fa fa-puzzle-piece\"></i>{{ cc.title }}</h2><br>\n                                                </template>\n                                                <span v-html=\"cc.feedback\"></span>\n                                            </b-modal>\n                                        </td>\n                                    </tr>\n                                </table>\n                            </template>\n                        </b-modal>\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() { \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                    } else if (this.value.course.competency) {\n                        status.students = this.value.course.competency.total;\n                        status.completed = this.value.course.competency.proficient;\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                wwwroot() {\n                    return Config.wwwroot;\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)?(wwwroot+'/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)?(wwwroot+'/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=\"wwwroot+'/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                    <s-course-extrafields \n                        v-if=\"value.course.extrafields\" \n                        v-model=\"value.course.extrafields\"\n                        position=\"above\"\n                        ></s-course-extrafields>\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                    <r-item-teacher-course-competency\n                        v-if='!!value.course.competency'\n                        v-model='value.course.competency'\n                        :item='value'\n                        ></r-item-teacher-course-competency>\n                    <s-course-extrafields \n                        v-if=\"value.course.extrafields\" \n                        v-model=\"value.course.extrafields\"\n                        position=\"below\"\n                        ></s-course-extrafields>\n                </b-modal>\n\n            </b-card>\n            </div>\n            `,\n        });\n\n\n        //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                wwwroot() {\n                    return Config.wwwroot;\n                }\n            },\n            methods: {\n                includeChanged(newValue,g){\n                    call([{\n                        methodname: 'local_treestudyplan_include_grade',\n                        args: { 'grade_id': g.id,\n                                'item_id': this.value.id,\n                                'include': newValue,\n                                'required': g.required,\n                                }\n                    }])[0].catch(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].catch(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=\"wwwroot+'/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                            <s-\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        //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        // 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                wwwroot() {\n                    return Config.wwwroot;\n                }\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=\"wwwroot+'/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        //TAG: Teacher Course competency\n        Vue.component('r-item-teacher-course-competency',{\n            props: {\n                value : {\n                    type: Object,\n                    default: function(){ return {};},\n                },\n                guestmode: {\n                    type: Boolean,\n                    default: false,\n                },\n                item: {\n                    type: Object,\n                    default: function(){ return { id: null};},\n                }\n            },\n            data() {\n                return {\n                    text: strings.competency,\n                };\n            },\n            created(){\n\n            },\n            computed: {\n                hasCompletions() {\n                    if(this.value.conditions) {\n                        for(const cgroup of this.value.conditions){\n                            if(cgroup.items && cgroup.items.length > 0){\n                                return true;\n                            }\n                        }\n                    }\n                    return false;\n                },\n                wwwroot() {\n                    return Config.wwwroot;\n                }\n            },\n            methods: {\n                completion_icon(competency) {\n                    if (competency.proficient && competency.courseproficient) {\n                        return \"check-circle\";\n                    } else if (competency.proficient) {\n                        return \"check\";\n                    } else if (competency.proficient === false) {\n                        return \"times-circle\";\n                    } else {\n                        return \"circle-o\";\n                    }\n                },\n\n                completion_tag(competency){\n                    if (competency.proficient && competency.courseproficient) {\n                        return \"completed\";\n                    } else if (competency.proficient) {\n                        return \"completed\";\n                    } else if (competency.proficient === false) {\n                        return \"failed\";\n                    } else if (competency.progress) {\n                        return \"progress\";\n                    } else {\n                        return \"incomplete\";\n                    }\n                },\n\n                pathtags(competency) {\n                    const path = competency.path;\n                    let s = \"\";\n                    for (const ix in path) {\n                        const p = path[ix];\n                        if ( ix > 0) {\n                            s += \" / \";\n                        }\n                        let url;\n                        if (p.type =='competency') { \n                            url = Config.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${p.id}`;\n                        } else {\n                            url = this.competencyurl(p);\n                        }\n                        \n                        s += `<a href=\"${url}\" target=\"_blank\">${p.title}</a>`;\n                    }\n                    return s;\n                },\n                competencyurl(c) {\n                    return Config.wwwroot+`/admin/tool/lp/user_competency_in_course.php?courseid=${this.item.course.id}&competencyid=${c.id}`;\n                },\n            },\n            template: `\n            <table class=\"r-item-course-competency-list\">\n                <tr v-if=\"value.competencies.length == 0\">\n                    <td colspan='2'>{{text.competencies_not_configured}}!\n                    <br><a :href=\"wwwroot+'/admin/tool/lp/coursecompetencies.php?courseid='+item.course.id\" target='_blank'>{{text.configure_competencies}}</a>\n                    </td>\n                </tr>\n                <template v-else>\n                    <tr v-for='c in value.competencies'>\n                        <td>\n                            <a href=\"#\" v-b-modal=\"'modal-competency-id-'+c.id\"><span v-html='c.title'></span></a>\n                        </td>\n                        <td class='details'>\n                            <a  v-if=\"c.details\" href=\"#\" v-b-modal=\"'modal-competency-id-'+c.id\"><span v-html='c.details'></span></a>\n                            <abbr v-if=\"c.required\" :title=\"text.required\"\n                                :class=\"'s-required ' + + completion_tag(c)\"\n                                ><i class='fa fa-asterisk' ></i\n                            ></abbr>   \n                        </td>\n                        <td><r-completion-bar v-model=\"c.completionstats\" :width=\"150\" :height=\"15\"></td>\n                        <td v-if=\"c.feedback\">\n                            <a  v-b-modal=\"'r-competency-feedback-'+c.id\"\n                                href=\"#\"\n                            >{{ text[\"view_feedback\"]}}</a>\n                            <b-modal\n                                :id=\"'r-competency-feedback-'+c.id\"\n                                size=\"sm\"\n                                ok-only\n                                centered\n                                scrollable\n                            >\n                                <template #modal-header>\n                                    <h2><i class=\"fa fa-puzzle-piece\"></i>{{ c.title }}</h2><br>\n                                </template>\n                                <span v-html=\"c.feedback\"></span>\n                            </b-modal>\n                        </td>\n                        <b-modal :id=\"'modal-competency-id-'+c.id\"\n                            size=\"lg\"\n                            ok-only\n                            centered\n                            scrollable\n                            >\n                            <template #modal-header>\n                                <div>\n                                    <h1><i class=\"fa fa-puzzle-piece\"></i>\n                                        <a :href=\"wwwroot+'/admin/tool/lp/competencies.php?competencyid='+c.id\" target=\"_blank\"\n                                        >{{c.title}} {{c.details}} </a\n                                    ></h1>\n                                    <div><span v-html=\"pathtags(c)\"></span></div>\n                                </div>\n                            </template>\n                            <div class=\"mb-2\" v-if=\"c.description\"><span v-html='c.description'></span></div>\n\n                            <template v-if=\"c.rule && c.children\">\n                                <div>{{ c.ruleoutcome }} {{ text.when}} <span v-html=\"c.rule.toLocaleLowerCase()\"></span></div>\n                                <table v-if=\"c.children\" class='r-item-course-competency-list'>\n                                    <tr class='t-item-course-competency-headers'>\n                                        <th colspan=\"2\">{{text.heading}}</th>\n                                        <th colspan=\"3\">{{text.results}}</th>\n                                    </tr>\n                                    <tr v-for=\"cc in c.children\">\n                                        <td>\n                                            <a :href='competencyurl(cc)' target=\"_blank\"><span v-html='cc.title'></span></a>\n                                        </td>\n                                        <td class='details'>\n                                            <a  v-if=\"cc.details\" :href='competencyurl(cc)' target=\"_blank\"><span v-html='cc.details'></span></a>\n                                            <abbr v-if=\"c.required\" :title=\"text.required\"\n                                                :class=\"'s-required ' + completion_tag(cc)\"\n                                                ><i class='fa fa-asterisk' ></i\n                                            ></abbr>\n                                        </td>\n                                        <td><r-completion-bar v-model=\"cc.completionstats\" :width=\"150\" :height=\"15\"></r-completion-bar></td>\n                                        <td><span class=\"text-info\">{{ cc.points }} {{ text.points }}</span></td>\n                                        <td v-if=\"cc.feedback\">\n                                            <a  v-b-modal=\"'r-competency-feedback-'+cc.id\"\n                                                href=\"#\"\n                                            >{{ text[\"view_feedback\"]}}</a>\n                                            <b-modal\n                                                :id=\"'r-competency-feedback-'+cc.id\"\n                                                size=\"sm\"\n                                                ok-only\n                                                centered\n                                                scrollable\n                                            >\n                                                <template #modal-header>\n                                                    <h2><i class=\"fa fa-puzzle-piece\"></i>{{ cc.title }}</h2><br>\n                                                </template>\n                                                <span v-html=\"cc.feedback\"></span>\n                                            </b-modal>\n                                        </td>\n                                    </tr>\n                                </table>\n                            </template>\n                        </b-modal>\n                    </tr>\n                </template>\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","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","competency","competency_not_configured","configure_competency","when","required","points","heading","details","results","unrated","progress","pageinfo","edit","fullname","shortname","startdate","enddate","description","duration","overview","oveviewperiod","isVisible","elem","offsetWidth","offsetHeight","getClientRects","length","ItemEventBus","addEventListener","editSwEventTypes","editModeSet","e","preventDefault","$emit","detail","editMode","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","then","response","console","info","plans","ix","plan","push","sort","a","b","t","Date","getTime","name","localeCompare","selectStudyplan","lengh","catch","notification","exception","studyplanid","id","deselectStudyplan","Object","Boolean","selectedpageindex","selectedpage","pages","startpageindex","firststart","page","s","wwwroot","Config","pageduration","columns","periods","columns_stylerule","i","countLineLayers","line","maxLayer","slots","courses","item","layer","filters","showslot","index","layeridx","forGradable","show","list","span","selectedpageChanged","newTabIndex","prevTabIndex","$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","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","beforeDestroy","removeEventListener","$off","beforeUpdate","dummy","noenddate","courseprogress","enrolled","count","grades","gradeprogress","hasprogressinfo","completion_icon","circle_icon","g","pendingsubmission","result","useRequiredGrades","aggregation_info","completion_tag","cgroup","hasCompletions","conditions","requirementHTML","requirements","rqs","split","html","addTargetBlank","m","exec","proficient","courseproficient","pathtags","path","p","url","competencyurl","c","usercompetencyurl","ucid","txt","course_grading_needed","course_grading_state","course_grading_icon","determine_grading_icon","filtered_grades","filter","selected","isCompletable","completable","progress_circle","status","students","cond","total","grade","gradingstate","includeChanged","newValue","requiredChanged","grading_icon","is_grading_needed","stringkeys","key","completionreport","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","badgeinprogress","completion_icon_rq","complete"],"mappings":"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"}
\ No newline at end of file
diff --git a/amd/build/studyplan-report-components.min.js b/amd/build/studyplan-report-components.min.js
index 47613b1..b1f8de5 100644
--- a/amd/build/studyplan-report-components.min.js
+++ b/amd/build/studyplan-report-components.min.js
@@ -1,3 +1,3 @@
-define("local_treestudyplan/studyplan-report-components",["exports","./util/string-helper","core/ajax","core/notification","./util/debugger","core/config","./treestudyplan-components","./util/fittext-vue","./util/date-helper"],(function(_exports,_stringHelper,_ajax,_notification,_debugger,_config,_treestudyplanComponents,_fittextVue,_dateHelper){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),_fittextVue=_interopRequireDefault(_fittextVue);new _debugger.default("treestudyplan-viewer"),Math.PI;function striptags(html){const tmp=document.createElement("DIV");tmp.innerHTML=html;const text=tmp.textContent||tmp.innerText;return tmp.remove(),text}function conditions(item){const course=item.course,list=[];if(course.competency)for(const cmp of course.competency.competencies)list.push(cmp);else if(course.completion)for(const cnd of course.completion.conditions)for(const itm of cnd.items)list.push(itm);else if(course.grades)for(const g of course.grades)g.selected&&list.push(g);return list}var _default={install(Vue){Vue.use(_treestudyplanComponents.default),Vue.use(_fittextVue.default);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"},header:{overall:"overall",students:"students@core",firstname:"firstname@core",lastname:"lastname@core",email:"email@core",lastaccess:"lastaccess@core"},studentresults:{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",student_not_tracked:"student_not_tracked",never:"never@core"}});Vue.component("q-studyplanreport",{props:{structure:{type:Object}},data:()=>({students:[],studentresults:{},studentsloading:!0,expansioninfo:{periods:{},lines:{},items:{}},groupinfo:{},sorting:{header:"lastname",asc:!0}}),created(){},watch:{structure:{immediate:!0,handler(structure){this.loadStudents();let firstperiod=!0;for(const period of structure.periods){const pid=period.period.id;this.expansioninfo.periods[pid]||(this.$set(this.expansioninfo.periods,pid,{expanded:!!firstperiod}),this.$set(this.expansioninfo.lines,period.period.id,{}));for(const line of period.lines){const lid=line.line.id;this.expansioninfo.lines[lid]||this.$set(this.expansioninfo.lines[pid],lid,{expanded:!0});for(const item of line.items)this.expansioninfo.items[item.id]||this.$set(this.expansioninfo.items,item.id,{expanded:!1})}firstperiod=!1}}}},computed:{sortedstudents(){const students=this.students;for(const group of this.students)group.users.sort(((a,b)=>{let d=a,e=b;if(this.sorting.asc||(d=b,e=a),"lastaccess"==this.sorting.header){return(d[this.sorting.header]?d[this.sorting.header]:0)-(e[this.sorting.header]?e[this.sorting.header]:0)}return String(d[this.sorting.header]).localeCompare(String(e[this.sorting.header]))}));return students},resultColCount(){let count=0;for(const period of this.structure.periods){const pid=period.period.id;if(this.expansioninfo.periods[pid].expanded)for(const line of period.lines){const lid=line.line.id;if(this.expansioninfo.lines[pid][lid].expanded)for(const item of line.items)this.expansioninfo.items[item.id].expanded?count+=1+conditions(item).length:count+=1;else count+=1}else count+=2}return count}},methods:{loadStudents(){const self=this;self.studentsloading=!0,(0,_ajax.call)([{methodname:"local_treestudyplan_all_associated_grouped",args:{studyplan_id:this.structure.studyplan.id}}])[0].then((function(response){self.students=response;for(const group of self.students){self.$set(self.groupinfo,group.id,{expanded:!0});for(const student of group.users)self.$set(self.studentresults,student.id,{loading:!0,results:[]}),(0,_ajax.call)([{methodname:"local_treestudyplan_get_report_data",args:{pageid:self.structure.page.id,userid:student.id,firstperiod:self.structure.firstperiod,lastperiod:self.structure.lastperiod}}])[0].then((function(response){self.studentresults[student.id].loading=!1,self.studentresults[student.id].results=response})).catch(_notification.default.exception)}self.studentsloading=!1})).catch(_notification.default.exception)},expansionChanged(parm,id,val){"lines"==(parm="p"==parm[0]?"periods":"l"==parm[0]?"lines":"items")?this.expansioninfo[parm][id[0]][id[1]].expanded=val:this.expansioninfo[parm][id].expanded=val},groupExpansionChanged(group){this.groupinfo[group.id].expanded=!this.groupinfo[group.id].expanded},toggleSort(header){this.sorting.header==header?this.sorting.asc=!this.sorting.asc:(this.sorting.header=header,this.sorting.asc=!0)}},template:'\n            <table class=\'q-studyplanreport\'\n                :style="\'--resultColCount: \'+resultColCount+\';\'">\n                <colgroup class="q-col-studentinfo">\n                    <col class="q-name"></col>\n                    <col class="q-lastaccess"></col>\n                </colgroup>\n                <colgroup class="q-col-resultinfo">\n                    <col v-for="n in resultColCount"></col>\n                </colgroup>\n                <q-header \n                    :sorting=\'sorting\' \n                    :structure=\'structure\'\n                    :expansion=\'expansioninfo\'\n                    @expansion=\'expansionChanged\'\n                    @togglesort="toggleSort"\n                ></q-header>\n                <template v-if="!studentsloading">\n                    <template v-for="group in sortedstudents">\n                        <q-groupheading \n                            v-if="group.users && group.users.length > 0" \n                            :group="group"\n                            :expanded="groupinfo[group.id].expanded"\n                            @togglegroup="groupExpansionChanged"\n                            :resultcolumns="resultColCount"\n                            :studentinfocolumns="2"\n                        ></q-groupheading>\n                        <template v-if=\'groupinfo[group.id].expanded\'>\n                            <q-studentresults v-for="(student,idx) in group.users"\n                                :key="student.id"\n                                :student=\'student\'\n                                :even="(idx%2==1)"\n                                :structure=\'structure\'\n                                :results=\'studentresults[student.id].results\'\n                                :loading=\'studentresults[student.id].loading\'\n                                :expansion=\'expansioninfo\'\n                                ></q-studentresults>\n                        </template>\n                    </template>\n                </template>\n                <q-inforow v-else \n                    :resultcolumns="resultColCount"\n                    :studentinfocolumns="2"><div class="spinner-border spinner-border-sm text-info" role="status"></div></q-inforow>\n            </table>\n            '}),Vue.component("q-header",{props:{structure:{type:Object},sorting:{type:Object},expansion:{type:Object}},data:()=>({text:strings.header}),computed:{},methods:{conditions:item=>function(item){const course=item.course,list=[];if(course.competency)for(const cmp of course.competency.competencies)list.push({name:cmp.details?`${cmp.title} - ${cmp.details}`:cmp.title,tooltip:cmp.description});else if(course.completion)for(const cnd of course.completion.conditions)for(const itm of cnd.items)list.push({name:itm.title,tooltip:`${itm.details.type}: ${itm.details.requirement}`});else if(course.grades)for(const g of course.grades)g.selected&&list.push({name:g.name,tooltip:`${g.typename}: ${striptags(g.name)}`});return list}(item),colspanPeriod(period){const pid=period.period.id;if(this.expansion.periods[pid].expanded){let sum=0;for(const l of period.lines)sum+=this.colspanLine(period,l);return sum}return 2},colspanLine(period,line){const pid=period.period.id,lid=line.line.id;if(this.expansion.lines[pid][lid].expanded){let sum=0;for(const i of line.items)sum+=this.colspanItem(i);return sum}return 1},colspanItem(item){if(this.expansion.items[item.id].expanded){return 1+this.conditions(item).length}return 1},togglePeriod(period,val){void 0===val&&(val=!this.expansion.periods[period.id].expanded),this.$emit("expansion","periods",period.id,val)},toggleLine(period,line,val){void 0===val&&(val=!this.expansion.lines[period.id][line.id].expanded),this.$emit("expansion","lines",[period.id,line.id],val)},toggleItem(item,val){void 0===val&&(val=!this.expansion.items[item.id].expanded),this.$emit("expansion","items",item.id,val)},toggleSort(heading){this.$emit("togglesort",heading)}},mounted(){},updated(){},template:'\n            <thead class=\'q-header\'>\n                <tr> \x3c!-- period heading --\x3e\n                    <th rowspan=\'4\' colspan=\'2\' class=\'q-studentinfo q-generic\'><span>{{text.students}}</span></th>\n                    <th v-for="p in structure.periods" \n                        :class="\'q-period-heading \'+ ((expansion.periods[p.period.id].expanded)?\'expanded\':\'collapsed\')"\n                        :colspan=\'colspanPeriod(p)\'\n                        :rowspan=\'(expansion.periods[p.period.id].expanded && p.lines.length > 0)?1:5\'\n                        ><span class="q-wrap"><a v-if=\'(p.lines.length > 0)\' href=\'#\' @click.prevent="togglePeriod(p.period)"\n                            ><i v-if="expansion.periods[p.period.id].expanded" \n                                class=\'q-chevron fa fa-minus\'></i\n                            ><i v-else class=\'q-chevron fa fa-plus\'></i\n                        >&nbsp;{{ p.period.fullname}}</a\n                        ><span v-else>{{ p.period.fullname}}</span></span\n                    ></th>\n                </tr>\n                <tr> \x3c!-- line heading --\x3e\n                    <template v-for="p in structure.periods">\n                        <template v-if="expansion.periods[p.period.id].expanded">\n                            <th v-for="l in p.lines"\n                                :class="\'q-line-heading \' + ((expansion.lines[p.period.id][l.line.id].expanded)?\'expanded\':\'collapsed\')"\n                                :colspan="colspanLine(p,l)"\n                                :rowspan=\'(expansion.lines[p.period.id][l.line.id].expanded)?1:4\'\n                                ><span class="q-wrap"><fittext vertical maxsize="18pt"\n                                    ><span  class=\'q-label\'\n                                            :title="l.line.shortname"\n                                            v-html="l.line.shortname"\n                                    ></span\n                                ></fittext></span\n                            ></th>\n                        </template>\n                    </template>\n                </tr>\n                <tr> \x3c!-- item heading --\x3e\n                    <template v-for="p in structure.periods">      \n                        <template v-if="expansion.periods[p.period.id].expanded">                 \n                            <template v-for="l in p.lines">\n                                <template v-if="expansion.lines[p.period.id][l.line.id].expanded">\n                                    <th v-for="item in l.items"\n                                        :class="\'q-item-heading \' + ((expansion.items[item.id].expanded)?\'expanded\':\'collapsed\')"\n                                        :colspan="colspanItem(item)"\n                                        :rowspan=\'(expansion.items[item.id].expanded)?1:3\'\n                                        ><span class="q-wrap"><a href=\'#\' \n                                            @click.prevent="toggleItem(item)"\n                                            ><i v-if="expansion.items[item.id].expanded" \n                                                class=\'q-chevron fa fa-minus\'></i\n                                            ><i v-else \n                                                class=\'q-chevron fa fa-plus\'></i\n                                        ></a\n                                        >&nbsp;<a style="display: inline-block;" href=\'#\' \n                                            @click.prevent="toggleItem(item)"\n                                            ><fittext vertical maxsize="18pt" singleline\n                                            ><span class=\'q-label\'\n                                                    :title="item.course.displayname" \n                                                    v-html="item.course.displayname"\n                                                ></span\n                                            ></fittext\n                                        ></a></span\n                                    ></th>\n                                </template>\n                            </template>\n                        </template>\n                    </template>\n                </tr>\n                <tr> \x3c!-- condition heading --\x3e\n                    <template v-for="p in structure.periods">\n                        <template v-if="expansion.periods[p.period.id].expanded">     \n                            <template v-for="l in p.lines">\n                                <template v-if="expansion.lines[p.period.id][l.line.id].expanded">\n                                    <template v-for="item in l.items">\n                                        <template v-if="expansion.items[item.id].expanded">\n                                            <th class=\'q-condition-heading overall\' rowspan="2"\n                                                ><span class=\'q-wrap\'>{{ text.overall }}</span></th>\n                                            <th v-for="c in conditions(item)" \n                                                rowspan="2"\n                                                class=\'q-condition-heading\'\n                                                ><span class="q-wrap"><fittext vertical maxsize="14pt"><a class=\'q-label q-condition-label\'\n                                                        :title="c.tooltip" href="#" @click.prevent\n                                                        v-b-tooltip.focus\n                                                        v-html="c.name"></a\n                                                ></fittext></span\n                                            ></th>\n                                        </template>\n                                    </template>\n                                </template>\n                            </template>\n                        </template>\n                    </template>\n                </tr>\n                <tr> \x3c!-- student info heading --\x3e\n                    <th class="q-studentinfo q-name">\n                        <fittext maxsize="12pt"\n                            ><a href="#" @click.prevent="toggleSort(\'firstname\')">{{text.firstname}}</a\n                            ><i v-if="sorting.header==\'firstname\' && sorting.asc" class=\'fa fa-sort-asc fa-fw\'></i\n                            ><i v-else-if="sorting.header==\'firstname\' && !sorting.asc" class=\'fa fa-sort-desc fa-fw\'></i>\n                            / <a href="#" @click.prevent="toggleSort(\'lastname\')">{{text.lastname}}</a\n                            ><i v-if="sorting.header==\'lastname\' && sorting.asc" class=\'fa fa-sort-asc fa-fw\'></i\n                            ><i v-else-if="sorting.header==\'lastname\' && !sorting.asc" class=\'fa fa-sort-desc fa-fw\'></i\n                        ></fittext>\n                    </th>\n                    <th class="q-studentinfo q-email">\n                        <fittext maxsize="12pt"\n                            ><a href="#" @click.prevent="toggleSort(\'lastaccess\')">{{text.lastaccess}}</a\n                            ><i v-if="sorting.header==\'lastaccess\' && sorting.asc" class=\'fa fa-sort-asc fa-fw\'></i\n                            ><i v-else-if="sorting.header==\'lastaccess\' && !sorting.asc" class=\'fa fa-sort-desc fa-fw\'></i\n                        ></fittext>\n                    </th>\n                </tr>\n            </thead>\n            '}),Vue.component("q-groupheading",{props:{group:{type:Object},resultcolumns:{type:Number,default:1},studentinfocolumns:{type:Number,default:1},expanded:{type:Boolean}},data:()=>({}),computed:{},methods:{toggleGroup(){this.$emit("togglegroup",this.group)}},template:'\n            <tr class=\'q-groupheading\'>\n                <th :colspan="studentinfocolumns"><a href="#" @click.prevent="toggleGroup"\n                    ><i v-if="expanded" class="fa fa-minus"></i\n                    ><i v-else class="fa fa-plus"></i\n                    >&nbsp;{{group.label}}</a></th>\n                <td :colspan="resultcolumns"></td>\n            </tr>\n            '}),Vue.component("q-inforow",{props:{resultcolumns:{type:Number,default:1},studentinfocolumns:{type:Number,default:1}},data:()=>({}),computed:{},methods:{},template:'\n            <tr class=\'q-inforow\'>\n                <td :colspan="studentinfocolumns"><slot></slot></td>\n                <td :colspan="resultcolumns"></td>\n            </tr>\n            '}),Vue.component("q-studentresults",{props:{student:{type:Object},structure:{type:Object},results:{type:Array},loading:{type:Boolean,default:!1},expansion:{type:Object},even:{type:Boolean,default:!1}},data:()=>({text:strings.studentresults}),computed:{lastaccess(){return this.student.lastaccess?(0,_dateHelper.format_datetime)(1e3*this.student.lastaccess):this.text.never}},methods:{useritems(line){const list=[];for(const item of line.items){let newitm=item;for(const itm of this.results)if(item.id==itm.id){newitm=itm;break}list.push(newitm)}return list},conditions:item=>conditions(item)},template:'\n            <tr :class="\'q-student-results userrow \' + (even?\'even\':\'odd\')">\n                <td class=\'q-studentinfo q-name\'><fittext maxsize="12pt">{{student.firstname}} {{student.lastname}}</fittext></td>\n                <td class=\'q-studentinfo q-email\'><fittext maxsize="12pt">{{lastaccess}}</fittext></td>\n                <template v-for="p in structure.periods">\n                    <template v-if="expansion.periods[p.period.id].expanded && p.lines.length > 0">\n                        <template v-for="l in p.lines">\n                            <template v-if="expansion.lines[p.period.id][l.line.id].expanded">\n                                <template v-for="item in useritems(l)">\n                                    <td class=\'q-result overall\'\n                                        ><q-courseresult\n                                            :item="item"\n                                            :student="student"\n                                            :loading="loading"\n                                        ></q-courseresult\n                                    ></td>\n                                    <template v-if="expansion.items[item.id].expanded">\n                                        <td v-for="(c,idx) in conditions(item)"\n                                            class=\'q-result\'\n                                            ><q-conditionresult\n                                                :item="item"\n                                                :conditionidx="idx"\n                                                :student="student"\n                                                :loading="loading"\n                                            ></q-conditionresult\n                                        ></td>\n                                    </template>\n                                </template>\n                            </template>\n                            <td v-else class=\'q-result collapsed\'>&nbsp;</td>\n                        </template>\n                    </template>\n                    <td v-else colspan="2" class=\'q-result collapsed\'>&nbsp;</td>\n                </template>\n            </tr>\n            '}),Vue.component("q-courseresult",{props:{student:{type:Object},item:{type:Object},loading:{type:Boolean,default:!1}},data:()=>({text:strings.studentresults}),computed:{hasprogressinfo(){const course=this.item.course;return!!course.enrolled&&!!(course.completion||course.competency||course.grades)},completion_icon(){switch(this.item.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"}}},methods:{},template:'\n            <span class=\'q-courseresult\'>\n                <template v-if="loading">\n                    <div class="spinner-border spinner-border-sm text-info" role="status"></div>\n                </template>\n                <template v-else-if=\'!item.course.enrolled\'>\n                    <i v-b-popover.top\n                        class="fa fa-exclamation-triangle t-not-enrolled-alert"\n                        :title="text.student_not_tracked"></i>\n                </template>\n                <template v-else>\n                    <i v-b-popover.top\n                        :class="\'fa fa-\'+completion_icon+\n                                \' r-completion-\'+item.completion"\n                        :title="text[\'completion_\'+item.completion]"></i>\n                </template>\n            </span>\n            '}),Vue.component("q-conditionresult",{props:{student:{type:Object},item:{type:Object},loading:{type:Boolean,default:!1},conditionidx:{type:Number}},data:()=>({text:strings.studentresults}),computed:{conditions(){return conditions(this.item)},condition(){return this.conditionidx>=0&&this.conditionidx<this.conditions.length?this.conditions[this.conditionidx]:null},hasprogressinfo(){const course=this.item.course;return!!course.enrolled&&(course.completion||course.competency||course.grades)},completion_icon(){switch(this.condition_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"}},condition_value(){const course=this.item.course;if(course.competency){if(this.condition.grade)return this.condition.grade}else if(course.completion){if(this.condition.grade)return this.condition.grade}else if(course.grades)return this.condition.grade;return`<i class='fa fa-${this.completion_icon()}'></i>`},condition_completion(){const course=this.item.course;if(course.competency){const competency=this.condition;return competency.proficient&&competency.courseproficient||competency.proficient?"completed":!1===competency.proficient?"failed":competency.progress?"progress":"incomplete"}return course.completion?this.condition.status:course.grades?this.condition.completion:void 0}},methods:{},template:'\n            <span class=\'q-conditionresult\'>\n                <fittext maxsize="10pt" singleline dynamic>\n                    <template v-if="loading">\n                        <div class="spinner-border spinner-border-sm text-info" role="status"></div>\n                    </template>\n                    <template v-else-if=\'!item.course.enrolled\'>\n                        <i  class="fa fa-ellipsis-h"\n                            :title="text.student_not_tracked"></i>\n                    </template>\n                    <template v-else>\n                        <span \n                            :class="\'r-completion-\'+condition_completion"\n                            :title="text[\'completion_\'+condition_completion]"\n                            >{{condition_value}}</span\n                        >\n                    </template>\n                </fittext>\n            </span>\n            '})}};return _exports.default=_default,_exports.default}));
+define("local_treestudyplan/studyplan-report-components",["exports","./util/string-helper","core/ajax","core/notification","./util/debugger","core/config","./treestudyplan-components","./util/fittext-vue","./util/date-helper"],(function(_exports,_stringHelper,_ajax,_notification,_debugger,_config,_treestudyplanComponents,_fittextVue,_dateHelper){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),_fittextVue=_interopRequireDefault(_fittextVue);new _debugger.default("treestudyplan-viewer"),Math.PI;function striptags(html){const tmp=document.createElement("DIV");tmp.innerHTML=html;const text=tmp.textContent||tmp.innerText;return tmp.remove(),text}function conditions(item){const course=item.course,list=[];if(course.competency)for(const cmp of course.competency.competencies)list.push(cmp);else if(course.completion)for(const cnd of course.completion.conditions)for(const itm of cnd.items)list.push(itm);else if(course.grades)for(const g of course.grades)g.selected&&list.push(g);return list}var _default={install(Vue){Vue.use(_treestudyplanComponents.default),Vue.use(_fittextVue.default);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"},header:{overall:"overall",students:"students@core",firstname:"firstname@core",lastname:"lastname@core",email:"email@core",lastaccess:"lastaccess@core"},studentresults:{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",student_not_tracked:"student_not_tracked",never:"never@core"}});Vue.component("q-studyplanreport",{props:{structure:{type:Object}},data:()=>({students:[],studentresults:{},studentsloading:!0,expansioninfo:{periods:{},lines:{},items:{}},groupinfo:{},sorting:{header:"lastname",asc:!0}}),created(){},watch:{structure:{immediate:!0,handler(structure){this.loadStudents();let firstperiod=!0;for(const period of structure.periods){const pid=period.period.id;this.expansioninfo.periods[pid]||(this.$set(this.expansioninfo.periods,pid,{expanded:!!(firstperiod&&period.lines.length>0)}),this.$set(this.expansioninfo.lines,period.period.id,{}));for(const line of period.lines){const lid=line.line.id;this.expansioninfo.lines[lid]||this.$set(this.expansioninfo.lines[pid],lid,{expanded:!0});for(const item of line.items)this.expansioninfo.items[item.id]||this.$set(this.expansioninfo.items,item.id,{expanded:!1})}firstperiod=!1}}}},computed:{sortedstudents(){const students=this.students;for(const group of this.students)group.users.sort(((a,b)=>{let d=a,e=b;if(this.sorting.asc||(d=b,e=a),"lastaccess"==this.sorting.header){return(d[this.sorting.header]?d[this.sorting.header]:0)-(e[this.sorting.header]?e[this.sorting.header]:0)}return String(d[this.sorting.header]).localeCompare(String(e[this.sorting.header]))}));return students},resultColCount(){let count=0;for(const period of this.structure.periods){const pid=period.period.id;if(this.expansioninfo.periods[pid].expanded)for(const line of period.lines){const lid=line.line.id;if(this.expansioninfo.lines[pid][lid].expanded)for(const item of line.items)this.expansioninfo.items[item.id].expanded?count+=1+conditions(item).length:count+=1;else count+=1}else count+=2}return count}},methods:{loadStudents(){const self=this;self.studentsloading=!0,(0,_ajax.call)([{methodname:"local_treestudyplan_all_associated_grouped",args:{studyplan_id:this.structure.studyplan.id}}])[0].then((function(response){self.students=response;for(const group of self.students){self.$set(self.groupinfo,group.id,{expanded:!0});for(const student of group.users)self.$set(self.studentresults,student.id,{loading:!0,results:[]}),(0,_ajax.call)([{methodname:"local_treestudyplan_get_report_data",args:{pageid:self.structure.page.id,userid:student.id,firstperiod:self.structure.firstperiod,lastperiod:self.structure.lastperiod}}])[0].then((function(response){self.studentresults[student.id].loading=!1,self.studentresults[student.id].results=response})).catch(_notification.default.exception)}self.studentsloading=!1})).catch(_notification.default.exception)},expansionChanged(parm,id,val){"lines"==(parm="p"==parm[0]?"periods":"l"==parm[0]?"lines":"items")?this.expansioninfo[parm][id[0]][id[1]].expanded=val:this.expansioninfo[parm][id].expanded=val},groupExpansionChanged(group){this.groupinfo[group.id].expanded=!this.groupinfo[group.id].expanded},toggleSort(header){this.sorting.header==header?this.sorting.asc=!this.sorting.asc:(this.sorting.header=header,this.sorting.asc=!0)}},template:'\n            <table class=\'q-studyplanreport\'\n                :style="\'--resultColCount: \'+resultColCount+\';\'">\n                <colgroup class="q-col-studentinfo">\n                    <col class="q-name"></col>\n                    <col class="q-lastaccess"></col>\n                </colgroup>\n                <colgroup class="q-col-resultinfo">\n                    <col v-for="n in resultColCount"></col>\n                </colgroup>\n                <q-header \n                    :sorting=\'sorting\' \n                    :structure=\'structure\'\n                    :expansion=\'expansioninfo\'\n                    @expansion=\'expansionChanged\'\n                    @togglesort="toggleSort"\n                ></q-header>\n                <template v-if="!studentsloading">\n                    <template v-for="group in sortedstudents">\n                        <q-groupheading \n                            v-if="group.users && group.users.length > 0" \n                            :group="group"\n                            :expanded="groupinfo[group.id].expanded"\n                            @togglegroup="groupExpansionChanged"\n                            :resultcolumns="resultColCount"\n                            :studentinfocolumns="2"\n                        ></q-groupheading>\n                        <template v-if=\'groupinfo[group.id].expanded\'>\n                            <q-studentresults v-for="(student,idx) in group.users"\n                                :key="student.id"\n                                :student=\'student\'\n                                :even="(idx%2==1)"\n                                :structure=\'structure\'\n                                :results=\'studentresults[student.id].results\'\n                                :loading=\'studentresults[student.id].loading\'\n                                :expansion=\'expansioninfo\'\n                                ></q-studentresults>\n                        </template>\n                    </template>\n                </template>\n                <q-inforow v-else \n                    :resultcolumns="resultColCount"\n                    :studentinfocolumns="2"><div class="spinner-border spinner-border-sm text-info" role="status"></div></q-inforow>\n            </table>\n            '}),Vue.component("q-header",{props:{structure:{type:Object},sorting:{type:Object},expansion:{type:Object}},data:()=>({text:strings.header}),computed:{},methods:{conditions:item=>function(item){const course=item.course,list=[];if(course.competency)for(const cmp of course.competency.competencies)list.push({name:cmp.details?`${cmp.title} - ${cmp.details}`:cmp.title,tooltip:cmp.description});else if(course.completion)for(const cnd of course.completion.conditions)for(const itm of cnd.items)list.push({name:itm.title,tooltip:`${itm.details.type}: ${itm.details.requirement}`});else if(course.grades)for(const g of course.grades)g.selected&&list.push({name:g.name,tooltip:`${g.typename}: ${striptags(g.name)}`});return list}(item),colspanPeriod(period){const pid=period.period.id;if(this.expansion.periods[pid].expanded){let sum=0;for(const l of period.lines)sum+=this.colspanLine(period,l);return sum}return 2},colspanLine(period,line){const pid=period.period.id,lid=line.line.id;if(this.expansion.lines[pid][lid].expanded){let sum=0;for(const i of line.items)sum+=this.colspanItem(i);return sum}return 1},colspanItem(item){if(this.expansion.items[item.id].expanded){return 1+this.conditions(item).length}return 1},togglePeriod(period,val){void 0===val&&(val=!this.expansion.periods[period.id].expanded),this.$emit("expansion","periods",period.id,val)},toggleLine(period,line,val){void 0===val&&(val=!this.expansion.lines[period.id][line.id].expanded),this.$emit("expansion","lines",[period.id,line.id],val)},toggleItem(item,val){void 0===val&&(val=!this.expansion.items[item.id].expanded),this.$emit("expansion","items",item.id,val)},toggleSort(heading){this.$emit("togglesort",heading)}},mounted(){},updated(){},template:'\n            <thead class=\'q-header\'>\n                <tr> \x3c!-- period heading --\x3e\n                    <th rowspan=\'4\' colspan=\'2\' class=\'q-studentinfo q-generic\'><span>{{text.students}}</span></th>\n                    <th v-for="p in structure.periods" \n                        :class="\'q-period-heading \'+ ((expansion.periods[p.period.id].expanded)?\'expanded\':\'collapsed\')"\n                        :colspan=\'colspanPeriod(p)\'\n                        :rowspan=\'(expansion.periods[p.period.id].expanded && p.lines.length > 0)?1:5\'\n                        ><span class="q-wrap"><a v-if=\'(p.lines.length > 0)\' href=\'#\' @click.prevent="togglePeriod(p.period)"\n                            ><i v-if="expansion.periods[p.period.id].expanded" \n                                class=\'q-chevron fa fa-minus\'></i\n                            ><i v-else class=\'q-chevron fa fa-plus\'></i\n                        >&nbsp;{{ p.period.fullname}}</a\n                        ><span v-else>{{ p.period.fullname}}</span></span\n                    ></th>\n                </tr>\n                <tr> \x3c!-- line heading --\x3e\n                    <template v-for="p in structure.periods">\n                        <template v-if="expansion.periods[p.period.id].expanded">\n                            <th v-for="l in p.lines"\n                                :class="\'q-line-heading \' + ((expansion.lines[p.period.id][l.line.id].expanded)?\'expanded\':\'collapsed\')"\n                                :colspan="colspanLine(p,l)"\n                                :rowspan=\'(expansion.lines[p.period.id][l.line.id].expanded)?1:4\'\n                                ><span class="q-wrap"><fittext vertical maxsize="18pt"\n                                    ><span  class=\'q-label\'\n                                            :title="l.line.shortname"\n                                            v-html="l.line.shortname"\n                                    ></span\n                                ></fittext></span\n                            ></th>\n                        </template>\n                    </template>\n                </tr>\n                <tr> \x3c!-- item heading --\x3e\n                    <template v-for="p in structure.periods">      \n                        <template v-if="expansion.periods[p.period.id].expanded">                 \n                            <template v-for="l in p.lines">\n                                <template v-if="expansion.lines[p.period.id][l.line.id].expanded">\n                                    <th v-for="item in l.items"\n                                        :class="\'q-item-heading \' + ((expansion.items[item.id].expanded)?\'expanded\':\'collapsed\')"\n                                        :colspan="colspanItem(item)"\n                                        :rowspan=\'(expansion.items[item.id].expanded)?1:3\'\n                                        ><span class="q-wrap"><a href=\'#\' \n                                            @click.prevent="toggleItem(item)"\n                                            ><i v-if="expansion.items[item.id].expanded" \n                                                class=\'q-chevron fa fa-minus\'></i\n                                            ><i v-else \n                                                class=\'q-chevron fa fa-plus\'></i\n                                        ></a\n                                        >&nbsp;<a style="display: inline-block;" href=\'#\' \n                                            @click.prevent="toggleItem(item)"\n                                            ><fittext vertical maxsize="18pt" singleline\n                                            ><span class=\'q-label\'\n                                                    :title="item.course.displayname" \n                                                    v-html="item.course.displayname"\n                                                ></span\n                                            ></fittext\n                                        ></a></span\n                                    ></th>\n                                </template>\n                            </template>\n                        </template>\n                    </template>\n                </tr>\n                <tr> \x3c!-- condition heading --\x3e\n                    <template v-for="p in structure.periods">\n                        <template v-if="expansion.periods[p.period.id].expanded">     \n                            <template v-for="l in p.lines">\n                                <template v-if="expansion.lines[p.period.id][l.line.id].expanded">\n                                    <template v-for="item in l.items">\n                                        <template v-if="expansion.items[item.id].expanded">\n                                            <th class=\'q-condition-heading overall\' rowspan="2"\n                                                ><span class=\'q-wrap\'>{{ text.overall }}</span></th>\n                                            <th v-for="c in conditions(item)" \n                                                rowspan="2"\n                                                class=\'q-condition-heading\'\n                                                ><span class="q-wrap"><fittext vertical maxsize="14pt"><a class=\'q-label q-condition-label\'\n                                                        :title="c.tooltip" href="#" @click.prevent\n                                                        v-b-tooltip.focus\n                                                        v-html="c.name"></a\n                                                ></fittext></span\n                                            ></th>\n                                        </template>\n                                    </template>\n                                </template>\n                            </template>\n                        </template>\n                    </template>\n                </tr>\n                <tr> \x3c!-- student info heading --\x3e\n                    <th class="q-studentinfo q-name">\n                        <fittext maxsize="12pt"\n                            ><a href="#" @click.prevent="toggleSort(\'firstname\')">{{text.firstname}}</a\n                            ><i v-if="sorting.header==\'firstname\' && sorting.asc" class=\'fa fa-sort-asc fa-fw\'></i\n                            ><i v-else-if="sorting.header==\'firstname\' && !sorting.asc" class=\'fa fa-sort-desc fa-fw\'></i>\n                            / <a href="#" @click.prevent="toggleSort(\'lastname\')">{{text.lastname}}</a\n                            ><i v-if="sorting.header==\'lastname\' && sorting.asc" class=\'fa fa-sort-asc fa-fw\'></i\n                            ><i v-else-if="sorting.header==\'lastname\' && !sorting.asc" class=\'fa fa-sort-desc fa-fw\'></i\n                        ></fittext>\n                    </th>\n                    <th class="q-studentinfo q-email">\n                        <fittext maxsize="12pt"\n                            ><a href="#" @click.prevent="toggleSort(\'lastaccess\')">{{text.lastaccess}}</a\n                            ><i v-if="sorting.header==\'lastaccess\' && sorting.asc" class=\'fa fa-sort-asc fa-fw\'></i\n                            ><i v-else-if="sorting.header==\'lastaccess\' && !sorting.asc" class=\'fa fa-sort-desc fa-fw\'></i\n                        ></fittext>\n                    </th>\n                </tr>\n            </thead>\n            '}),Vue.component("q-groupheading",{props:{group:{type:Object},resultcolumns:{type:Number,default:1},studentinfocolumns:{type:Number,default:1},expanded:{type:Boolean}},data:()=>({}),computed:{},methods:{toggleGroup(){this.$emit("togglegroup",this.group)}},template:'\n            <tr class=\'q-groupheading\'>\n                <th :colspan="studentinfocolumns"><a href="#" @click.prevent="toggleGroup"\n                    ><i v-if="expanded" class="fa fa-minus"></i\n                    ><i v-else class="fa fa-plus"></i\n                    >&nbsp;{{group.label}}</a></th>\n                <td :colspan="resultcolumns"></td>\n            </tr>\n            '}),Vue.component("q-inforow",{props:{resultcolumns:{type:Number,default:1},studentinfocolumns:{type:Number,default:1}},data:()=>({}),computed:{},methods:{},template:'\n            <tr class=\'q-inforow\'>\n                <td :colspan="studentinfocolumns"><slot></slot></td>\n                <td :colspan="resultcolumns"></td>\n            </tr>\n            '}),Vue.component("q-studentresults",{props:{student:{type:Object},structure:{type:Object},results:{type:Array},loading:{type:Boolean,default:!1},expansion:{type:Object},even:{type:Boolean,default:!1}},data:()=>({text:strings.studentresults}),computed:{lastaccess(){return this.student.lastaccess?(0,_dateHelper.format_datetime)(1e3*this.student.lastaccess):this.text.never}},methods:{useritems(line){const list=[];for(const item of line.items){let newitm=item;for(const itm of this.results)if(item.id==itm.id){newitm=itm;break}list.push(newitm)}return list},conditions:item=>conditions(item)},template:'\n            <tr :class="\'q-student-results userrow \' + (even?\'even\':\'odd\')">\n                <td class=\'q-studentinfo q-name\'><fittext maxsize="12pt">{{student.firstname}} {{student.lastname}}</fittext></td>\n                <td class=\'q-studentinfo q-email\'><fittext maxsize="12pt">{{lastaccess}}</fittext></td>\n                <template v-for="p in structure.periods">\n                    <template v-if="expansion.periods[p.period.id].expanded && p.lines.length > 0">\n                        <template v-for="l in p.lines">\n                            <template v-if="expansion.lines[p.period.id][l.line.id].expanded">\n                                <template v-for="item in useritems(l)">\n                                    <td class=\'q-result overall\'\n                                        ><q-courseresult\n                                            :item="item"\n                                            :student="student"\n                                            :loading="loading"\n                                        ></q-courseresult\n                                    ></td>\n                                    <template v-if="expansion.items[item.id].expanded">\n                                        <td v-for="(c,idx) in conditions(item)"\n                                            class=\'q-result\'\n                                            ><q-conditionresult\n                                                :item="item"\n                                                :conditionidx="idx"\n                                                :student="student"\n                                                :loading="loading"\n                                            ></q-conditionresult\n                                        ></td>\n                                    </template>\n                                </template>\n                            </template>\n                            <td v-else class=\'q-result collapsed\'>&nbsp;</td>\n                        </template>\n                    </template>\n                    <td v-else colspan="2" class=\'q-result collapsed\'>&nbsp;</td>\n                </template>\n            </tr>\n            '}),Vue.component("q-courseresult",{props:{student:{type:Object},item:{type:Object},loading:{type:Boolean,default:!1}},data:()=>({text:strings.studentresults}),computed:{hasprogressinfo(){const course=this.item.course;return!!course.enrolled&&!!(course.completion||course.competency||course.grades)},completion_icon(){switch(this.item.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"}}},methods:{},template:'\n            <span class=\'q-courseresult\'>\n                <template v-if="loading">\n                    <div class="spinner-border spinner-border-sm text-info" role="status"></div>\n                </template>\n                <template v-else-if=\'!item.course.enrolled\'>\n                    <i v-b-popover.top\n                        class="fa fa-exclamation-triangle t-not-enrolled-alert"\n                        :title="text.student_not_tracked"></i>\n                </template>\n                <template v-else>\n                    <i v-b-popover.top\n                        :class="\'fa fa-\'+completion_icon+\n                                \' r-completion-\'+item.completion"\n                        :title="text[\'completion_\'+item.completion]"></i>\n                </template>\n            </span>\n            '}),Vue.component("q-conditionresult",{props:{student:{type:Object},item:{type:Object},loading:{type:Boolean,default:!1},conditionidx:{type:Number}},data:()=>({text:strings.studentresults}),computed:{conditions(){return conditions(this.item)},condition(){return this.conditionidx>=0&&this.conditionidx<this.conditions.length?this.conditions[this.conditionidx]:null},hasprogressinfo(){const course=this.item.course;return!!course.enrolled&&(course.completion||course.competency||course.grades)},completion_icon(){switch(this.condition_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"}},condition_value(){const course=this.item.course;if(course.competency){if(this.condition.grade)return this.condition.grade}else if(course.completion){if(this.condition.grade)return this.condition.grade}else if(course.grades)return this.condition.grade;return`<i class='fa fa-${this.completion_icon()}'></i>`},condition_completion(){const course=this.item.course;if(course.competency){const competency=this.condition;return competency.proficient&&competency.courseproficient||competency.proficient?"completed":!1===competency.proficient?"failed":competency.progress?"progress":"incomplete"}return course.completion?this.condition.status:course.grades?this.condition.completion:void 0}},methods:{},template:'\n            <span class=\'q-conditionresult\'>\n                <fittext maxsize="10pt" singleline dynamic>\n                    <template v-if="loading">\n                        <div class="spinner-border spinner-border-sm text-info" role="status"></div>\n                    </template>\n                    <template v-else-if=\'!item.course.enrolled\'>\n                        <i  class="fa fa-ellipsis-h"\n                            :title="text.student_not_tracked"></i>\n                    </template>\n                    <template v-else>\n                        <span \n                            :class="\'r-completion-\'+condition_completion"\n                            :title="text[\'completion_\'+condition_completion]"\n                            >{{condition_value}}</span\n                        >\n                    </template>\n                </fittext>\n            </span>\n            '})}};return _exports.default=_default,_exports.default}));
 
 //# sourceMappingURL=studyplan-report-components.min.js.map
\ No newline at end of file
diff --git a/amd/build/studyplan-report-components.min.js.map b/amd/build/studyplan-report-components.min.js.map
index 4d496aa..e68236f 100644
--- a/amd/build/studyplan-report-components.min.js.map
+++ b/amd/build/studyplan-report-components.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"studyplan-report-components.min.js","sources":["../src/studyplan-report-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 {load_strings} from './util/string-helper';\nimport {call} from 'core/ajax';\nimport notification from 'core/notification';\nimport Debugger from './util/debugger';\nimport Config from 'core/config';\nimport TSComponents from './treestudyplan-components';\nimport FitTextVue from './util/fittext-vue';\nimport {format_datetime} from \"./util/date-helper\";\n\nconst debug = new Debugger(\"treestudyplan-viewer\");\n\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/**\n * Strip tags from html\n * @param {*} html \n * @returns \n */\nfunction striptags(html) {\n    const tmp = document.createElement(\"DIV\");\n    tmp.innerHTML = html;\n    const text = tmp.textContent || tmp.innerText;\n    tmp.remove();\n    return text;\n}\n\n/**\n * Retrieve condition headers\n * @param {Object} item\n */\nfunction conditionHeaders(item) {\n    const course = item.course;\n    const list = [];\n    if (course.competency) {\n        for (const cmp of course.competency.competencies) {\n            list.push({\n                name: (cmp.details?`${cmp.title} - ${cmp.details}`:cmp.title),\n                tooltip: cmp.description,\n            });\n        }\n    } else if(course.completion) {\n        for (const cnd of course.completion.conditions) {\n            for (const itm of cnd.items) {\n                list.push({\n                    name: itm.title,\n                    tooltip: `${itm.details.type}: ${itm.details.requirement}`,\n                });\n            }\n        }\n    } else if(course.grades) {\n        for(const g of course.grades) {\n            if (g.selected) {\n                list.push({\n                    name: g.name,\n                    tooltip: `${g.typename}: ${striptags(g.name)}`,\n                });\n            }\n        }\n    }\n    return list;\n}\n\n/**\n * Retrieve conditions\n * @param {Object} item\n */\nfunction conditions(item) {\n    const course = item.course;\n    const list = [];\n    if (course.competency) {\n        for (const cmp of course.competency.competencies) {\n            list.push(cmp);\n        }\n    } else if(course.completion) {\n        for (const cnd of course.completion.conditions) {\n            for (const itm of cnd.items) {\n                list.push(itm);\n            }\n        }\n    } else if(course.grades) {\n        for(const g of course.grades) {\n            if (g.selected) {\n                list.push(g);\n            }\n        }\n    }\n    return list;\n}\n\n\nexport default {\n    install(Vue/*,options*/){\n        Vue.use(TSComponents);\n        Vue.use(FitTextVue);\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            \n            invalid: {\n                error: 'error',\n            },\n            header: {\n                overall: 'overall',\n                students: 'students@core',\n                firstname: 'firstname@core',\n                lastname: 'lastname@core',\n                email: 'email@core',\n                lastaccess: 'lastaccess@core',\n            },\n            studentresults: {\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                student_not_tracked: \"student_not_tracked\",\n                never: \"never@core\",\n            }\n        });\n\n        /************************************\n         *                                  *\n         * Treestudyplan Viewer components  *\n         *                                  *\n         ************************************/\n\n        Vue.component('q-studyplanreport', {\n            props: {\n                structure: {\n                    type: Object,\n                },\n            },\n            data() {\n                return {\n                    students: [],\n                    studentresults: {},\n                    studentsloading: true,\n                    expansioninfo: {\n                        periods: {},\n                        lines: {},\n                        items: {},\n                    },\n                    groupinfo: {},\n\n                    sorting: {\n                        header: 'lastname',\n                        asc: true,\n                    }\n                };\n            },\n            created() {\n            },\n            watch:{\n                structure: {\n                    immediate: true,\n                    handler (structure) {\n                        this.loadStudents(); // reload the student list\n                       \n                        // (Re)build expansion info structure\n                        let firstperiod = true;\n                        for (const period of structure.periods) {\n                            const pid = period.period.id;\n                            if (!this.expansioninfo.periods[pid]) {\n                                // Use this.$set to make sure the properties are reactive.\n                                this.$set(\n                                    this.expansioninfo.periods, \n                                    pid, \n                                    {\n                                        expanded: (firstperiod?true:false),\n                                    }\n                                );\n                                this.$set(\n                                    this.expansioninfo.lines, \n                                    period.period.id, \n                                    {}\n                                );\n                            }\n                            for (const line of period.lines) {\n                                const lid = line.line.id;\n                                if (!this.expansioninfo.lines[lid]) {\n                                    // Use this.$set to make sure the properties are reactive.\n                                    this.$set(\n                                        this.expansioninfo.lines[pid],\n                                        lid, \n                                        {\n                                            expanded: true,\n                                        }\n                                    );\n                                }\n                                for (const item of line.items) {\n                                    if (!this.expansioninfo.items[item.id]) {\n                                        // Use this.$set to make sure the properties are reactive.\n                                        this.$set(\n                                            this.expansioninfo.items,\n                                            item.id,\n                                            {\n                                            expanded: false,\n                                            }\n                                        );\n                                    }\n                                }\n                            }\n                            firstperiod = false;\n                        }\n                    }\n                }\n            },\n            computed: {\n                sortedstudents(){\n                    const self=this;\n                    // Probably could make a deep copy for purity's sake, but this works just as well and is probably more efficient.\n                    const students = this.students;\n                    for (const group of this.students) {\n                        group.users.sort((a,b) => {\n                            let d = a;\n                            let e = b;\n                            if (!this.sorting.asc) {\n                                d = b;\n                                e = a;\n                            } \n                            if (this.sorting.header == \"lastaccess\") {\n                                const dvalue = (d[this.sorting.header]?d[this.sorting.header]:0);\n                                const evalue = (e[this.sorting.header]?e[this.sorting.header]:0);\n                                return dvalue - evalue;\n                            } else {\n                                return String(d[this.sorting.header]).localeCompare(String(e[this.sorting.header]));\n                            }\n                        });\n                    }\n                    \n                    return students;\n                },\n                resultColCount(){\n                    let count = 0;\n                    for (const period of this.structure.periods) {\n                        const pid = period.period.id;\n                        if (!this.expansioninfo.periods[pid].expanded) {\n                            // This period is not expanded. Make it 3 units wide \n                            count += 2;\n                        } else {\n                            for (const line of period.lines) {\n                                const lid = line.line.id;\n                                if (!this.expansioninfo.lines[pid][lid].expanded) {\n                                    count +=1;\n                                } else { \n                                    for (const item of line.items) {\n                                        if (!this.expansioninfo.items[item.id].expanded) {\n                                            count += 1;\n                                        } else {\n                                            count += 1 + conditions(item).length;\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n                    return count;           \n                }\n            },\n            methods: {\n                loadStudents() {\n                    const self = this;\n                    self.studentsloading=true;\n                    call([{\n                        methodname: 'local_treestudyplan_all_associated_grouped',\n                        args: { studyplan_id: this.structure.studyplan.id}\n                    }])[0].then(function(response){\n                        self.students = response;\n                        for(const group of self.students) {\n                            self.$set(\n                                self.groupinfo,\n                                group.id,\n                                {\n                                  expanded: true,\n                                }\n                            );\n\n                            for(const student of group.users){\n                                self.$set(\n                                    self.studentresults,\n                                    student.id, \n                                    {\n                                        loading: true,\n                                        results: [],\n                                    }\n                                );\n                                call([{\n                                    methodname: 'local_treestudyplan_get_report_data',\n                                    args: { pageid: self.structure.page.id, \n                                            userid: student.id,\n                                            firstperiod: self.structure.firstperiod,\n                                            lastperiod: self.structure.lastperiod,\n                                        }\n                                }])[0].then(function(response){\n                                    self.studentresults[student.id].loading = false;\n                                    self.studentresults[student.id].results = response;\n                                }).catch(notification.exception);\n                            }\n                        }\n                        self.studentsloading=false;\n                    }).catch(notification.exception);\n                },\n                expansionChanged(parm, id, val) {\n                    if(parm[0] == 'p') {\n                        parm = 'periods';\n                    } else if(parm[0] == 'l') {\n                        parm = 'lines';\n                    } else {\n                        parm = 'items';\n                    }\n\n                    if (parm == 'lines') {\n                        this.expansioninfo[parm][id[0]][id[1]].expanded = val;\n                    } else {\n                        this.expansioninfo[parm][id].expanded = val;\n                    }\n                },\n                groupExpansionChanged(group) {\n                    this.groupinfo[group.id].expanded = !this.groupinfo[group.id].expanded;\n                },\n                toggleSort(header) {\n                    if (this.sorting.header == header) {\n                        this.sorting.asc = !this.sorting.asc;\n                    } else {\n                        this.sorting.header = header;\n                        this.sorting.asc = true;\n                    }\n                }\n            },\n            template: `\n            <table class='q-studyplanreport'\n                :style=\"'--resultColCount: '+resultColCount+';'\">\n                <colgroup class=\"q-col-studentinfo\">\n                    <col class=\"q-name\"></col>\n                    <col class=\"q-lastaccess\"></col>\n                </colgroup>\n                <colgroup class=\"q-col-resultinfo\">\n                    <col v-for=\"n in resultColCount\"></col>\n                </colgroup>\n                <q-header \n                    :sorting='sorting' \n                    :structure='structure'\n                    :expansion='expansioninfo'\n                    @expansion='expansionChanged'\n                    @togglesort=\"toggleSort\"\n                ></q-header>\n                <template v-if=\"!studentsloading\">\n                    <template v-for=\"group in sortedstudents\">\n                        <q-groupheading \n                            v-if=\"group.users && group.users.length > 0\" \n                            :group=\"group\"\n                            :expanded=\"groupinfo[group.id].expanded\"\n                            @togglegroup=\"groupExpansionChanged\"\n                            :resultcolumns=\"resultColCount\"\n                            :studentinfocolumns=\"2\"\n                        ></q-groupheading>\n                        <template v-if='groupinfo[group.id].expanded'>\n                            <q-studentresults v-for=\"(student,idx) in group.users\"\n                                :key=\"student.id\"\n                                :student='student'\n                                :even=\"(idx%2==1)\"\n                                :structure='structure'\n                                :results='studentresults[student.id].results'\n                                :loading='studentresults[student.id].loading'\n                                :expansion='expansioninfo'\n                                ></q-studentresults>\n                        </template>\n                    </template>\n                </template>\n                <q-inforow v-else \n                    :resultcolumns=\"resultColCount\"\n                    :studentinfocolumns=\"2\"><div class=\"spinner-border spinner-border-sm text-info\" role=\"status\"></div></q-inforow>\n            </table>\n            `,\n        });\n\n        Vue.component('q-header', {\n            props: {\n                structure: {\n                    type: Object,\n                },\n                sorting: {\n                    type: Object,\n                },\n                expansion: {\n                    type: Object\n                },\n            },\n            data() {\n                return {\n                    text: strings.header,\n                };\n            },\n            computed: {\n            },\n            methods: {\n                conditions(item) {\n                    return conditionHeaders(item);\n                },\n                colspanPeriod(period) {\n                    const pid = period.period.id;\n                    if (this.expansion.periods[pid].expanded) {\n                        let sum = 0;\n                        for (const l of period.lines) {\n                            sum += this.colspanLine(period,l);\n                        }\n                        return sum;\n                    } else {\n                        return 2;\n                    }\n                },\n                colspanLine(period,line) {\n                    const pid = period.period.id;\n                    const lid = line.line.id;\n\n                    if (this.expansion.lines[pid][lid].expanded) {\n                        let sum = 0;\n                        for (const i of line.items) {\n                            sum += this.colspanItem(i);\n                        }\n                        return sum;\n                    } else {\n                        return 1;\n                    }\n                },\n                colspanItem(item) {\n                    if (this.expansion.items[item.id].expanded) {\n                        const cs = this.conditions(item);\n                        return 1+cs.length;\n                    } else {\n                        return 1;\n                    }\n                },\n                togglePeriod(period,val) {\n                    if ( val === undefined) {\n                        val = !(this.expansion.periods[period.id].expanded);\n                    }\n                    this.$emit('expansion','periods',period.id,val);\n                },\n                toggleLine(period,line,val) {\n                    if ( val === undefined) {\n                        val = !(this.expansion.lines[period.id][line.id].expanded);\n                    }\n                    this.$emit('expansion','lines',[period.id,line.id],val);\n                },\n                toggleItem(item,val) {\n                    if ( val === undefined) {\n                        val = !(this.expansion.items[item.id].expanded);\n                    }\n                    this.$emit('expansion','items',item.id,val);\n                },\n                toggleSort(heading) {\n                    this.$emit('togglesort',heading);\n                }\n            },\n            mounted() {\n                \n            },\n            updated() {\n            },\n            /* https://css-tricks.com/position-sticky-and-table-headers/ */\n            /* TODO: Rework below to make use of tables. Use <Thead> as main element. Then create multiple <tr> as needed for the headers.\n               This should create a much better view than using divs overal.\n            */\n            template: `\n            <thead class='q-header'>\n                <tr> <!-- period heading -->\n                    <th rowspan='4' colspan='2' class='q-studentinfo q-generic'><span>{{text.students}}</span></th>\n                    <th v-for=\"p in structure.periods\" \n                        :class=\"'q-period-heading '+ ((expansion.periods[p.period.id].expanded)?'expanded':'collapsed')\"\n                        :colspan='colspanPeriod(p)'\n                        :rowspan='(expansion.periods[p.period.id].expanded && p.lines.length > 0)?1:5'\n                        ><span class=\"q-wrap\"><a v-if='(p.lines.length > 0)' href='#' @click.prevent=\"togglePeriod(p.period)\"\n                            ><i v-if=\"expansion.periods[p.period.id].expanded\" \n                                class='q-chevron fa fa-minus'></i\n                            ><i v-else class='q-chevron fa fa-plus'></i\n                        >&nbsp;{{ p.period.fullname}}</a\n                        ><span v-else>{{ p.period.fullname}}</span></span\n                    ></th>\n                </tr>\n                <tr> <!-- line heading -->\n                    <template v-for=\"p in structure.periods\">\n                        <template v-if=\"expansion.periods[p.period.id].expanded\">\n                            <th v-for=\"l in p.lines\"\n                                :class=\"'q-line-heading ' + ((expansion.lines[p.period.id][l.line.id].expanded)?'expanded':'collapsed')\"\n                                :colspan=\"colspanLine(p,l)\"\n                                :rowspan='(expansion.lines[p.period.id][l.line.id].expanded)?1:4'\n                                ><span class=\"q-wrap\"><fittext vertical maxsize=\"18pt\"\n                                    ><span  class='q-label'\n                                            :title=\"l.line.shortname\"\n                                            v-html=\"l.line.shortname\"\n                                    ></span\n                                ></fittext></span\n                            ></th>\n                        </template>\n                    </template>\n                </tr>\n                <tr> <!-- item heading -->\n                    <template v-for=\"p in structure.periods\">      \n                        <template v-if=\"expansion.periods[p.period.id].expanded\">                 \n                            <template v-for=\"l in p.lines\">\n                                <template v-if=\"expansion.lines[p.period.id][l.line.id].expanded\">\n                                    <th v-for=\"item in l.items\"\n                                        :class=\"'q-item-heading ' + ((expansion.items[item.id].expanded)?'expanded':'collapsed')\"\n                                        :colspan=\"colspanItem(item)\"\n                                        :rowspan='(expansion.items[item.id].expanded)?1:3'\n                                        ><span class=\"q-wrap\"><a href='#' \n                                            @click.prevent=\"toggleItem(item)\"\n                                            ><i v-if=\"expansion.items[item.id].expanded\" \n                                                class='q-chevron fa fa-minus'></i\n                                            ><i v-else \n                                                class='q-chevron fa fa-plus'></i\n                                        ></a\n                                        >&nbsp;<a style=\"display: inline-block;\" href='#' \n                                            @click.prevent=\"toggleItem(item)\"\n                                            ><fittext vertical maxsize=\"18pt\" singleline\n                                            ><span class='q-label'\n                                                    :title=\"item.course.displayname\" \n                                                    v-html=\"item.course.displayname\"\n                                                ></span\n                                            ></fittext\n                                        ></a></span\n                                    ></th>\n                                </template>\n                            </template>\n                        </template>\n                    </template>\n                </tr>\n                <tr> <!-- condition heading -->\n                    <template v-for=\"p in structure.periods\">\n                        <template v-if=\"expansion.periods[p.period.id].expanded\">     \n                            <template v-for=\"l in p.lines\">\n                                <template v-if=\"expansion.lines[p.period.id][l.line.id].expanded\">\n                                    <template v-for=\"item in l.items\">\n                                        <template v-if=\"expansion.items[item.id].expanded\">\n                                            <th class='q-condition-heading overall' rowspan=\"2\"\n                                                ><span class='q-wrap'>{{ text.overall }}</span></th>\n                                            <th v-for=\"c in conditions(item)\" \n                                                rowspan=\"2\"\n                                                class='q-condition-heading'\n                                                ><span class=\"q-wrap\"><fittext vertical maxsize=\"14pt\"><a class='q-label q-condition-label'\n                                                        :title=\"c.tooltip\" href=\"#\" @click.prevent\n                                                        v-b-tooltip.focus\n                                                        v-html=\"c.name\"></a\n                                                ></fittext></span\n                                            ></th>\n                                        </template>\n                                    </template>\n                                </template>\n                            </template>\n                        </template>\n                    </template>\n                </tr>\n                <tr> <!-- student info heading -->\n                    <th class=\"q-studentinfo q-name\">\n                        <fittext maxsize=\"12pt\"\n                            ><a href=\"#\" @click.prevent=\"toggleSort('firstname')\">{{text.firstname}}</a\n                            ><i v-if=\"sorting.header=='firstname' && sorting.asc\" class='fa fa-sort-asc fa-fw'></i\n                            ><i v-else-if=\"sorting.header=='firstname' && !sorting.asc\" class='fa fa-sort-desc fa-fw'></i>\n                            / <a href=\"#\" @click.prevent=\"toggleSort('lastname')\">{{text.lastname}}</a\n                            ><i v-if=\"sorting.header=='lastname' && sorting.asc\" class='fa fa-sort-asc fa-fw'></i\n                            ><i v-else-if=\"sorting.header=='lastname' && !sorting.asc\" class='fa fa-sort-desc fa-fw'></i\n                        ></fittext>\n                    </th>\n                    <th class=\"q-studentinfo q-email\">\n                        <fittext maxsize=\"12pt\"\n                            ><a href=\"#\" @click.prevent=\"toggleSort('lastaccess')\">{{text.lastaccess}}</a\n                            ><i v-if=\"sorting.header=='lastaccess' && sorting.asc\" class='fa fa-sort-asc fa-fw'></i\n                            ><i v-else-if=\"sorting.header=='lastaccess' && !sorting.asc\" class='fa fa-sort-desc fa-fw'></i\n                        ></fittext>\n                    </th>\n                </tr>\n            </thead>\n            `,\n        });\n\n        Vue.component('q-groupheading', {\n            props: {\n                group: {\n                    type: Object,\n                },\n                resultcolumns: {\n                    type: Number,\n                    default: 1\n                },\n                studentinfocolumns: {\n                    type: Number,\n                    default: 1\n                },\n                expanded: {\n                    type: Boolean,\n                }\n            },\n            data() {\n                return {\n\n                };\n            },\n            computed: {\n            },\n            methods: {\n                toggleGroup(){\n                    this.$emit('togglegroup',this.group);\n                }\n            },\n            template: `\n            <tr class='q-groupheading'>\n                <th :colspan=\"studentinfocolumns\"><a href=\"#\" @click.prevent=\"toggleGroup\"\n                    ><i v-if=\"expanded\" class=\"fa fa-minus\"></i\n                    ><i v-else class=\"fa fa-plus\"></i\n                    >&nbsp;{{group.label}}</a></th>\n                <td :colspan=\"resultcolumns\"></td>\n            </tr>\n            `,\n        });\n\n        Vue.component('q-inforow', {\n            props: {\n                resultcolumns: {\n                    type: Number,\n                    default: 1\n                },\n                studentinfocolumns: {\n                    type: Number,\n                    default: 1\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            computed: {\n            },\n            methods: {\n            },\n            template: `\n            <tr class='q-inforow'>\n                <td :colspan=\"studentinfocolumns\"><slot></slot></td>\n                <td :colspan=\"resultcolumns\"></td>\n            </tr>\n            `,\n        });\n\n\n        Vue.component('q-studentresults', {\n            props: {\n                student: {\n                    type: Object,\n                },\n                structure: {\n                    type: Object,\n                },\n                results: {\n                    type: Array,\n                },\n                loading: {\n                    type: Boolean,\n                    default: false\n                },\n                expansion: {\n                    type: Object,\n                },\n                even: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                    text: strings.studentresults,\n                };\n            },\n            computed: {\n                lastaccess() {\n                    if (this.student.lastaccess) {\n                        return format_datetime(this.student.lastaccess*1000); // Takes date in milliseconds\n                    } else {\n                        return this.text.never;\n                    }\n                }\n            },\n            methods: {\n                useritems(line) {\n                    const list = [];\n                    for (const item of line.items) {\n                        let newitm = item;\n                        for (const itm of this.results) {\n                            if (item.id == itm.id) {\n                                newitm = itm;\n                                break;\n                            }\n                        }\n                        list.push(newitm);\n                    }\n                    return list;\n                },\n                conditions(item) {\n                    return conditions(item);\n                },\n            },\n            /* https://css-tricks.com/position-sticky-and-table-headers/ */\n            /* TODO: Rework below to make use of tables. Use <Thead> as main element. Then create multiple <tr> as needed for the headers.\n               This should create a much better view than using divs overal.\n               */\n            template: `\n            <tr :class=\"'q-student-results userrow ' + (even?'even':'odd')\">\n                <td class='q-studentinfo q-name'><fittext maxsize=\"12pt\">{{student.firstname}} {{student.lastname}}</fittext></td>\n                <td class='q-studentinfo q-email'><fittext maxsize=\"12pt\">{{lastaccess}}</fittext></td>\n                <template v-for=\"p in structure.periods\">\n                    <template v-if=\"expansion.periods[p.period.id].expanded && p.lines.length > 0\">\n                        <template v-for=\"l in p.lines\">\n                            <template v-if=\"expansion.lines[p.period.id][l.line.id].expanded\">\n                                <template v-for=\"item in useritems(l)\">\n                                    <td class='q-result overall'\n                                        ><q-courseresult\n                                            :item=\"item\"\n                                            :student=\"student\"\n                                            :loading=\"loading\"\n                                        ></q-courseresult\n                                    ></td>\n                                    <template v-if=\"expansion.items[item.id].expanded\">\n                                        <td v-for=\"(c,idx) in conditions(item)\"\n                                            class='q-result'\n                                            ><q-conditionresult\n                                                :item=\"item\"\n                                                :conditionidx=\"idx\"\n                                                :student=\"student\"\n                                                :loading=\"loading\"\n                                            ></q-conditionresult\n                                        ></td>\n                                    </template>\n                                </template>\n                            </template>\n                            <td v-else class='q-result collapsed'>&nbsp;</td>\n                        </template>\n                    </template>\n                    <td v-else colspan=\"2\" class='q-result collapsed'>&nbsp;</td>\n                </template>\n            </tr>\n            `,\n        });\n\n        Vue.component('q-courseresult', {\n            props: {\n                student: {\n                    type: Object,\n                },\n                item: {\n                    type: Object,\n                },\n                loading: {\n                    type: Boolean,\n                    default: false\n                },\n            },\n            data() {\n                return {\n                    text: strings.studentresults,\n                };\n            },\n            computed: {\n                hasprogressinfo() {\n                    const course = this.item.course;\n                    if (!course.enrolled) {\n                        return false;\n                    } else {\n                        return (course.completion || course.competency || course.grades)?true:false;\n                    }\n                },\n                completion_icon() {\n                    const completion = this.item.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            methods: {\n            },\n            template: `\n            <span class='q-courseresult'>\n                <template v-if=\"loading\">\n                    <div class=\"spinner-border spinner-border-sm text-info\" role=\"status\"></div>\n                </template>\n                <template v-else-if='!item.course.enrolled'>\n                    <i v-b-popover.top\n                        class=\"fa fa-exclamation-triangle t-not-enrolled-alert\"\n                        :title=\"text.student_not_tracked\"></i>\n                </template>\n                <template v-else>\n                    <i v-b-popover.top\n                        :class=\"'fa fa-'+completion_icon+\n                                ' r-completion-'+item.completion\"\n                        :title=\"text['completion_'+item.completion]\"></i>\n                </template>\n            </span>\n            `,\n        });\n\n        Vue.component('q-conditionresult', {\n            props: {\n                student: {\n                    type: Object,\n                },\n                item: {\n                    type: Object,\n                },\n                loading: {\n                    type: Boolean,\n                    default: false\n                },\n                conditionidx: {\n                    type: Number,\n                }\n            },\n            data() {\n                return {\n                    text: strings.studentresults,\n                };\n            },\n            computed: {\n                conditions() {\n                    return conditions(this.item);\n                },\n                condition() {\n                    if (this.conditionidx >= 0 && this.conditionidx < this.conditions.length) {\n                        return this.conditions[this.conditionidx];\n                    } else {\n                        return null;\n                    }\n                },\n                hasprogressinfo() {\n                    const course = this.item.course;\n                    if (!course.enrolled) {\n                        return false;\n                    } else {\n                        return (course.completion || course.competency || course.grades);\n                    }\n                },\n                completion_icon() {\n                    const completion = this.condition_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                condition_value() {\n                    const course = this.item.course;\n                    if (course.competency) {\n                        if (this.condition.grade) {\n                            // Return grade if possible.\n                            return this.condition.grade;\n                        } \n                    } else if(course.completion) {\n                        if (this.condition.grade) {\n                            // Return grade if possible.\n                            return this.condition.grade;\n                        } \n                    } else if(course.grades) {\n                        return this.condition.grade;\n                    }\n                    // Fallback to completion icon.\n                    const icon = this.completion_icon();\n                    return `<i class='fa fa-${icon}'></i>`;\n                },\n                condition_completion() {\n                    // Unify completion information\n                    const course = this.item.course;\n                    if (course.competency) {\n                        const competency = this.condition;\n                        if (competency.proficient && competency.courseproficient) {\n                            return \"completed\";\n                        } else if (competency.proficient) {\n                            return \"completed\";\n                        } else if (competency.proficient === false) {\n                            return \"failed\";\n                        } else if (competency.progress) {\n                            return \"progress\";\n                        } else {\n                            return \"incomplete\";\n                        }\n                    } else if(course.completion) {\n                        return this.condition.status;\n                    } else if(course.grades) {\n                        return this.condition.completion;\n                    }\n                }\n\n            },\n            methods: {\n            },\n            // TODO: Show actual grades when relevant at all (don;t forget the grade point completion requirement)\n            template: `\n            <span class='q-conditionresult'>\n                <fittext maxsize=\"10pt\" singleline dynamic>\n                    <template v-if=\"loading\">\n                        <div class=\"spinner-border spinner-border-sm text-info\" role=\"status\"></div>\n                    </template>\n                    <template v-else-if='!item.course.enrolled'>\n                        <i  class=\"fa fa-ellipsis-h\"\n                            :title=\"text.student_not_tracked\"></i>\n                    </template>\n                    <template v-else>\n                        <span \n                            :class=\"'r-completion-'+condition_completion\"\n                            :title=\"text['completion_'+condition_completion]\"\n                            >{{condition_value}}</span\n                        >\n                    </template>\n                </fittext>\n            </span>\n            `,\n        });\n\n\n\n    },\n};"],"names":["Debugger","Math","PI","striptags","html","tmp","document","createElement","innerHTML","text","textContent","innerText","remove","conditions","item","course","list","competency","cmp","competencies","push","completion","cnd","itm","items","grades","g","selected","install","Vue","use","TSComponents","FitTextVue","strings","report","loading","studyplan_past","studyplan_present","studyplan_future","back","invalid","error","header","overall","students","firstname","lastname","email","lastaccess","studentresults","completion_incomplete","completion_failed","completion_pending","completion_progress","completion_completed","completion_good","completion_excellent","student_not_tracked","never","component","props","structure","type","Object","data","studentsloading","expansioninfo","periods","lines","groupinfo","sorting","asc","created","watch","immediate","handler","loadStudents","firstperiod","period","pid","id","this","$set","expanded","line","lid","computed","sortedstudents","group","users","sort","a","b","d","e","String","localeCompare","resultColCount","count","length","methods","self","methodname","args","studyplan_id","studyplan","then","response","student","results","pageid","page","userid","lastperiod","catch","notification","exception","expansionChanged","parm","val","groupExpansionChanged","toggleSort","template","expansion","name","details","title","tooltip","description","requirement","typename","conditionHeaders","colspanPeriod","sum","l","colspanLine","i","colspanItem","togglePeriod","undefined","$emit","toggleLine","toggleItem","heading","mounted","updated","resultcolumns","Number","default","studentinfocolumns","Boolean","toggleGroup","Array","even","useritems","newitm","hasprogressinfo","enrolled","completion_icon","conditionidx","condition","condition_completion","condition_value","grade","proficient","courseproficient","progress","status"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"studyplan-report-components.min.js","sources":["../src/studyplan-report-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 {load_strings} from './util/string-helper';\nimport {call} from 'core/ajax';\nimport notification from 'core/notification';\nimport Debugger from './util/debugger';\nimport Config from 'core/config';\nimport TSComponents from './treestudyplan-components';\nimport FitTextVue from './util/fittext-vue';\nimport {format_datetime} from \"./util/date-helper\";\n\nconst debug = new Debugger(\"treestudyplan-viewer\");\n\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/**\n * Strip tags from html\n * @param {*} html \n * @returns \n */\nfunction striptags(html) {\n    const tmp = document.createElement(\"DIV\");\n    tmp.innerHTML = html;\n    const text = tmp.textContent || tmp.innerText;\n    tmp.remove();\n    return text;\n}\n\n/**\n * Retrieve condition headers\n * @param {Object} item\n */\nfunction conditionHeaders(item) {\n    const course = item.course;\n    const list = [];\n    if (course.competency) {\n        for (const cmp of course.competency.competencies) {\n            list.push({\n                name: (cmp.details?`${cmp.title} - ${cmp.details}`:cmp.title),\n                tooltip: cmp.description,\n            });\n        }\n    } else if(course.completion) {\n        for (const cnd of course.completion.conditions) {\n            for (const itm of cnd.items) {\n                list.push({\n                    name: itm.title,\n                    tooltip: `${itm.details.type}: ${itm.details.requirement}`,\n                });\n            }\n        }\n    } else if(course.grades) {\n        for(const g of course.grades) {\n            if (g.selected) {\n                list.push({\n                    name: g.name,\n                    tooltip: `${g.typename}: ${striptags(g.name)}`,\n                });\n            }\n        }\n    }\n    return list;\n}\n\n/**\n * Retrieve conditions\n * @param {Object} item\n */\nfunction conditions(item) {\n    const course = item.course;\n    const list = [];\n    if (course.competency) {\n        for (const cmp of course.competency.competencies) {\n            list.push(cmp);\n        }\n    } else if(course.completion) {\n        for (const cnd of course.completion.conditions) {\n            for (const itm of cnd.items) {\n                list.push(itm);\n            }\n        }\n    } else if(course.grades) {\n        for(const g of course.grades) {\n            if (g.selected) {\n                list.push(g);\n            }\n        }\n    }\n    return list;\n}\n\n\nexport default {\n    install(Vue/*,options*/){\n        Vue.use(TSComponents);\n        Vue.use(FitTextVue);\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            \n            invalid: {\n                error: 'error',\n            },\n            header: {\n                overall: 'overall',\n                students: 'students@core',\n                firstname: 'firstname@core',\n                lastname: 'lastname@core',\n                email: 'email@core',\n                lastaccess: 'lastaccess@core',\n            },\n            studentresults: {\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                student_not_tracked: \"student_not_tracked\",\n                never: \"never@core\",\n            }\n        });\n\n        /************************************\n         *                                  *\n         * Treestudyplan Viewer components  *\n         *                                  *\n         ************************************/\n\n        Vue.component('q-studyplanreport', {\n            props: {\n                structure: {\n                    type: Object,\n                },\n            },\n            data() {\n                return {\n                    students: [],\n                    studentresults: {},\n                    studentsloading: true,\n                    expansioninfo: {\n                        periods: {},\n                        lines: {},\n                        items: {},\n                    },\n                    groupinfo: {},\n\n                    sorting: {\n                        header: 'lastname',\n                        asc: true,\n                    }\n                };\n            },\n            created() {\n            },\n            watch:{\n                structure: {\n                    immediate: true,\n                    handler (structure) {\n                        this.loadStudents(); // reload the student list\n                       \n                        // (Re)build expansion info structure\n                        let firstperiod = true;\n                        for (const period of structure.periods) {\n                            const pid = period.period.id;\n                            if (!this.expansioninfo.periods[pid]) {\n                                // Use this.$set to make sure the properties are reactive.\n                                this.$set(\n                                    this.expansioninfo.periods, \n                                    pid, \n                                    {\n                                        expanded: ((firstperiod && period.lines.length > 0)?true:false),\n                                    }\n                                );\n                                this.$set(\n                                    this.expansioninfo.lines, \n                                    period.period.id, \n                                    {}\n                                );\n                            }\n                            for (const line of period.lines) {\n                                const lid = line.line.id;\n                                if (!this.expansioninfo.lines[lid]) {\n                                    // Use this.$set to make sure the properties are reactive.\n                                    this.$set(\n                                        this.expansioninfo.lines[pid],\n                                        lid, \n                                        {\n                                            expanded: true,\n                                        }\n                                    );\n                                }\n                                for (const item of line.items) {\n                                    if (!this.expansioninfo.items[item.id]) {\n                                        // Use this.$set to make sure the properties are reactive.\n                                        this.$set(\n                                            this.expansioninfo.items,\n                                            item.id,\n                                            {\n                                            expanded: false,\n                                            }\n                                        );\n                                    }\n                                }\n                            }\n                            firstperiod = false;\n                        }\n                    }\n                }\n            },\n            computed: {\n                sortedstudents(){\n                    const self=this;\n                    // Probably could make a deep copy for purity's sake, but this works just as well and is probably more efficient.\n                    const students = this.students;\n                    for (const group of this.students) {\n                        group.users.sort((a,b) => {\n                            let d = a;\n                            let e = b;\n                            if (!this.sorting.asc) {\n                                d = b;\n                                e = a;\n                            } \n                            if (this.sorting.header == \"lastaccess\") {\n                                const dvalue = (d[this.sorting.header]?d[this.sorting.header]:0);\n                                const evalue = (e[this.sorting.header]?e[this.sorting.header]:0);\n                                return dvalue - evalue;\n                            } else {\n                                return String(d[this.sorting.header]).localeCompare(String(e[this.sorting.header]));\n                            }\n                        });\n                    }\n                    \n                    return students;\n                },\n                resultColCount(){\n                    let count = 0;\n                    for (const period of this.structure.periods) {\n                        const pid = period.period.id;\n                        if (!this.expansioninfo.periods[pid].expanded) {\n                            // This period is not expanded. Make it 3 units wide \n                            count += 2;\n                        } else {\n                            for (const line of period.lines) {\n                                const lid = line.line.id;\n                                if (!this.expansioninfo.lines[pid][lid].expanded) {\n                                    count +=1;\n                                } else { \n                                    for (const item of line.items) {\n                                        if (!this.expansioninfo.items[item.id].expanded) {\n                                            count += 1;\n                                        } else {\n                                            count += 1 + conditions(item).length;\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n                    return count;           \n                }\n            },\n            methods: {\n                loadStudents() {\n                    const self = this;\n                    self.studentsloading=true;\n                    call([{\n                        methodname: 'local_treestudyplan_all_associated_grouped',\n                        args: { studyplan_id: this.structure.studyplan.id}\n                    }])[0].then(function(response){\n                        self.students = response;\n                        for(const group of self.students) {\n                            self.$set(\n                                self.groupinfo,\n                                group.id,\n                                {\n                                  expanded: true,\n                                }\n                            );\n\n                            for(const student of group.users){\n                                self.$set(\n                                    self.studentresults,\n                                    student.id, \n                                    {\n                                        loading: true,\n                                        results: [],\n                                    }\n                                );\n                                call([{\n                                    methodname: 'local_treestudyplan_get_report_data',\n                                    args: { pageid: self.structure.page.id, \n                                            userid: student.id,\n                                            firstperiod: self.structure.firstperiod,\n                                            lastperiod: self.structure.lastperiod,\n                                        }\n                                }])[0].then(function(response){\n                                    self.studentresults[student.id].loading = false;\n                                    self.studentresults[student.id].results = response;\n                                }).catch(notification.exception);\n                            }\n                        }\n                        self.studentsloading=false;\n                    }).catch(notification.exception);\n                },\n                expansionChanged(parm, id, val) {\n                    if(parm[0] == 'p') {\n                        parm = 'periods';\n                    } else if(parm[0] == 'l') {\n                        parm = 'lines';\n                    } else {\n                        parm = 'items';\n                    }\n\n                    if (parm == 'lines') {\n                        this.expansioninfo[parm][id[0]][id[1]].expanded = val;\n                    } else {\n                        this.expansioninfo[parm][id].expanded = val;\n                    }\n                },\n                groupExpansionChanged(group) {\n                    this.groupinfo[group.id].expanded = !this.groupinfo[group.id].expanded;\n                },\n                toggleSort(header) {\n                    if (this.sorting.header == header) {\n                        this.sorting.asc = !this.sorting.asc;\n                    } else {\n                        this.sorting.header = header;\n                        this.sorting.asc = true;\n                    }\n                }\n            },\n            template: `\n            <table class='q-studyplanreport'\n                :style=\"'--resultColCount: '+resultColCount+';'\">\n                <colgroup class=\"q-col-studentinfo\">\n                    <col class=\"q-name\"></col>\n                    <col class=\"q-lastaccess\"></col>\n                </colgroup>\n                <colgroup class=\"q-col-resultinfo\">\n                    <col v-for=\"n in resultColCount\"></col>\n                </colgroup>\n                <q-header \n                    :sorting='sorting' \n                    :structure='structure'\n                    :expansion='expansioninfo'\n                    @expansion='expansionChanged'\n                    @togglesort=\"toggleSort\"\n                ></q-header>\n                <template v-if=\"!studentsloading\">\n                    <template v-for=\"group in sortedstudents\">\n                        <q-groupheading \n                            v-if=\"group.users && group.users.length > 0\" \n                            :group=\"group\"\n                            :expanded=\"groupinfo[group.id].expanded\"\n                            @togglegroup=\"groupExpansionChanged\"\n                            :resultcolumns=\"resultColCount\"\n                            :studentinfocolumns=\"2\"\n                        ></q-groupheading>\n                        <template v-if='groupinfo[group.id].expanded'>\n                            <q-studentresults v-for=\"(student,idx) in group.users\"\n                                :key=\"student.id\"\n                                :student='student'\n                                :even=\"(idx%2==1)\"\n                                :structure='structure'\n                                :results='studentresults[student.id].results'\n                                :loading='studentresults[student.id].loading'\n                                :expansion='expansioninfo'\n                                ></q-studentresults>\n                        </template>\n                    </template>\n                </template>\n                <q-inforow v-else \n                    :resultcolumns=\"resultColCount\"\n                    :studentinfocolumns=\"2\"><div class=\"spinner-border spinner-border-sm text-info\" role=\"status\"></div></q-inforow>\n            </table>\n            `,\n        });\n\n        Vue.component('q-header', {\n            props: {\n                structure: {\n                    type: Object,\n                },\n                sorting: {\n                    type: Object,\n                },\n                expansion: {\n                    type: Object\n                },\n            },\n            data() {\n                return {\n                    text: strings.header,\n                };\n            },\n            computed: {\n            },\n            methods: {\n                conditions(item) {\n                    return conditionHeaders(item);\n                },\n                colspanPeriod(period) {\n                    const pid = period.period.id;\n                    if (this.expansion.periods[pid].expanded) {\n                        let sum = 0;\n                        for (const l of period.lines) {\n                            sum += this.colspanLine(period,l);\n                        }\n                        return sum;\n                    } else {\n                        return 2;\n                    }\n                },\n                colspanLine(period,line) {\n                    const pid = period.period.id;\n                    const lid = line.line.id;\n\n                    if (this.expansion.lines[pid][lid].expanded) {\n                        let sum = 0;\n                        for (const i of line.items) {\n                            sum += this.colspanItem(i);\n                        }\n                        return sum;\n                    } else {\n                        return 1;\n                    }\n                },\n                colspanItem(item) {\n                    if (this.expansion.items[item.id].expanded) {\n                        const cs = this.conditions(item);\n                        return 1+cs.length;\n                    } else {\n                        return 1;\n                    }\n                },\n                togglePeriod(period,val) {\n                    if ( val === undefined) {\n                        val = !(this.expansion.periods[period.id].expanded);\n                    }\n                    this.$emit('expansion','periods',period.id,val);\n                },\n                toggleLine(period,line,val) {\n                    if ( val === undefined) {\n                        val = !(this.expansion.lines[period.id][line.id].expanded);\n                    }\n                    this.$emit('expansion','lines',[period.id,line.id],val);\n                },\n                toggleItem(item,val) {\n                    if ( val === undefined) {\n                        val = !(this.expansion.items[item.id].expanded);\n                    }\n                    this.$emit('expansion','items',item.id,val);\n                },\n                toggleSort(heading) {\n                    this.$emit('togglesort',heading);\n                }\n            },\n            mounted() {\n                \n            },\n            updated() {\n            },\n            /* https://css-tricks.com/position-sticky-and-table-headers/ */\n            /* TODO: Rework below to make use of tables. Use <Thead> as main element. Then create multiple <tr> as needed for the headers.\n               This should create a much better view than using divs overal.\n            */\n            template: `\n            <thead class='q-header'>\n                <tr> <!-- period heading -->\n                    <th rowspan='4' colspan='2' class='q-studentinfo q-generic'><span>{{text.students}}</span></th>\n                    <th v-for=\"p in structure.periods\" \n                        :class=\"'q-period-heading '+ ((expansion.periods[p.period.id].expanded)?'expanded':'collapsed')\"\n                        :colspan='colspanPeriod(p)'\n                        :rowspan='(expansion.periods[p.period.id].expanded && p.lines.length > 0)?1:5'\n                        ><span class=\"q-wrap\"><a v-if='(p.lines.length > 0)' href='#' @click.prevent=\"togglePeriod(p.period)\"\n                            ><i v-if=\"expansion.periods[p.period.id].expanded\" \n                                class='q-chevron fa fa-minus'></i\n                            ><i v-else class='q-chevron fa fa-plus'></i\n                        >&nbsp;{{ p.period.fullname}}</a\n                        ><span v-else>{{ p.period.fullname}}</span></span\n                    ></th>\n                </tr>\n                <tr> <!-- line heading -->\n                    <template v-for=\"p in structure.periods\">\n                        <template v-if=\"expansion.periods[p.period.id].expanded\">\n                            <th v-for=\"l in p.lines\"\n                                :class=\"'q-line-heading ' + ((expansion.lines[p.period.id][l.line.id].expanded)?'expanded':'collapsed')\"\n                                :colspan=\"colspanLine(p,l)\"\n                                :rowspan='(expansion.lines[p.period.id][l.line.id].expanded)?1:4'\n                                ><span class=\"q-wrap\"><fittext vertical maxsize=\"18pt\"\n                                    ><span  class='q-label'\n                                            :title=\"l.line.shortname\"\n                                            v-html=\"l.line.shortname\"\n                                    ></span\n                                ></fittext></span\n                            ></th>\n                        </template>\n                    </template>\n                </tr>\n                <tr> <!-- item heading -->\n                    <template v-for=\"p in structure.periods\">      \n                        <template v-if=\"expansion.periods[p.period.id].expanded\">                 \n                            <template v-for=\"l in p.lines\">\n                                <template v-if=\"expansion.lines[p.period.id][l.line.id].expanded\">\n                                    <th v-for=\"item in l.items\"\n                                        :class=\"'q-item-heading ' + ((expansion.items[item.id].expanded)?'expanded':'collapsed')\"\n                                        :colspan=\"colspanItem(item)\"\n                                        :rowspan='(expansion.items[item.id].expanded)?1:3'\n                                        ><span class=\"q-wrap\"><a href='#' \n                                            @click.prevent=\"toggleItem(item)\"\n                                            ><i v-if=\"expansion.items[item.id].expanded\" \n                                                class='q-chevron fa fa-minus'></i\n                                            ><i v-else \n                                                class='q-chevron fa fa-plus'></i\n                                        ></a\n                                        >&nbsp;<a style=\"display: inline-block;\" href='#' \n                                            @click.prevent=\"toggleItem(item)\"\n                                            ><fittext vertical maxsize=\"18pt\" singleline\n                                            ><span class='q-label'\n                                                    :title=\"item.course.displayname\" \n                                                    v-html=\"item.course.displayname\"\n                                                ></span\n                                            ></fittext\n                                        ></a></span\n                                    ></th>\n                                </template>\n                            </template>\n                        </template>\n                    </template>\n                </tr>\n                <tr> <!-- condition heading -->\n                    <template v-for=\"p in structure.periods\">\n                        <template v-if=\"expansion.periods[p.period.id].expanded\">     \n                            <template v-for=\"l in p.lines\">\n                                <template v-if=\"expansion.lines[p.period.id][l.line.id].expanded\">\n                                    <template v-for=\"item in l.items\">\n                                        <template v-if=\"expansion.items[item.id].expanded\">\n                                            <th class='q-condition-heading overall' rowspan=\"2\"\n                                                ><span class='q-wrap'>{{ text.overall }}</span></th>\n                                            <th v-for=\"c in conditions(item)\" \n                                                rowspan=\"2\"\n                                                class='q-condition-heading'\n                                                ><span class=\"q-wrap\"><fittext vertical maxsize=\"14pt\"><a class='q-label q-condition-label'\n                                                        :title=\"c.tooltip\" href=\"#\" @click.prevent\n                                                        v-b-tooltip.focus\n                                                        v-html=\"c.name\"></a\n                                                ></fittext></span\n                                            ></th>\n                                        </template>\n                                    </template>\n                                </template>\n                            </template>\n                        </template>\n                    </template>\n                </tr>\n                <tr> <!-- student info heading -->\n                    <th class=\"q-studentinfo q-name\">\n                        <fittext maxsize=\"12pt\"\n                            ><a href=\"#\" @click.prevent=\"toggleSort('firstname')\">{{text.firstname}}</a\n                            ><i v-if=\"sorting.header=='firstname' && sorting.asc\" class='fa fa-sort-asc fa-fw'></i\n                            ><i v-else-if=\"sorting.header=='firstname' && !sorting.asc\" class='fa fa-sort-desc fa-fw'></i>\n                            / <a href=\"#\" @click.prevent=\"toggleSort('lastname')\">{{text.lastname}}</a\n                            ><i v-if=\"sorting.header=='lastname' && sorting.asc\" class='fa fa-sort-asc fa-fw'></i\n                            ><i v-else-if=\"sorting.header=='lastname' && !sorting.asc\" class='fa fa-sort-desc fa-fw'></i\n                        ></fittext>\n                    </th>\n                    <th class=\"q-studentinfo q-email\">\n                        <fittext maxsize=\"12pt\"\n                            ><a href=\"#\" @click.prevent=\"toggleSort('lastaccess')\">{{text.lastaccess}}</a\n                            ><i v-if=\"sorting.header=='lastaccess' && sorting.asc\" class='fa fa-sort-asc fa-fw'></i\n                            ><i v-else-if=\"sorting.header=='lastaccess' && !sorting.asc\" class='fa fa-sort-desc fa-fw'></i\n                        ></fittext>\n                    </th>\n                </tr>\n            </thead>\n            `,\n        });\n\n        Vue.component('q-groupheading', {\n            props: {\n                group: {\n                    type: Object,\n                },\n                resultcolumns: {\n                    type: Number,\n                    default: 1\n                },\n                studentinfocolumns: {\n                    type: Number,\n                    default: 1\n                },\n                expanded: {\n                    type: Boolean,\n                }\n            },\n            data() {\n                return {\n\n                };\n            },\n            computed: {\n            },\n            methods: {\n                toggleGroup(){\n                    this.$emit('togglegroup',this.group);\n                }\n            },\n            template: `\n            <tr class='q-groupheading'>\n                <th :colspan=\"studentinfocolumns\"><a href=\"#\" @click.prevent=\"toggleGroup\"\n                    ><i v-if=\"expanded\" class=\"fa fa-minus\"></i\n                    ><i v-else class=\"fa fa-plus\"></i\n                    >&nbsp;{{group.label}}</a></th>\n                <td :colspan=\"resultcolumns\"></td>\n            </tr>\n            `,\n        });\n\n        Vue.component('q-inforow', {\n            props: {\n                resultcolumns: {\n                    type: Number,\n                    default: 1\n                },\n                studentinfocolumns: {\n                    type: Number,\n                    default: 1\n                },\n            },\n            data() {\n                return {\n                };\n            },\n            computed: {\n            },\n            methods: {\n            },\n            template: `\n            <tr class='q-inforow'>\n                <td :colspan=\"studentinfocolumns\"><slot></slot></td>\n                <td :colspan=\"resultcolumns\"></td>\n            </tr>\n            `,\n        });\n\n\n        Vue.component('q-studentresults', {\n            props: {\n                student: {\n                    type: Object,\n                },\n                structure: {\n                    type: Object,\n                },\n                results: {\n                    type: Array,\n                },\n                loading: {\n                    type: Boolean,\n                    default: false\n                },\n                expansion: {\n                    type: Object,\n                },\n                even: {\n                    type: Boolean,\n                    default: false,\n                }\n            },\n            data() {\n                return {\n                    text: strings.studentresults,\n                };\n            },\n            computed: {\n                lastaccess() {\n                    if (this.student.lastaccess) {\n                        return format_datetime(this.student.lastaccess*1000); // Takes date in milliseconds\n                    } else {\n                        return this.text.never;\n                    }\n                }\n            },\n            methods: {\n                useritems(line) {\n                    const list = [];\n                    for (const item of line.items) {\n                        let newitm = item;\n                        for (const itm of this.results) {\n                            if (item.id == itm.id) {\n                                newitm = itm;\n                                break;\n                            }\n                        }\n                        list.push(newitm);\n                    }\n                    return list;\n                },\n                conditions(item) {\n                    return conditions(item);\n                },\n            },\n            /* https://css-tricks.com/position-sticky-and-table-headers/ */\n            /* TODO: Rework below to make use of tables. Use <Thead> as main element. Then create multiple <tr> as needed for the headers.\n               This should create a much better view than using divs overal.\n               */\n            template: `\n            <tr :class=\"'q-student-results userrow ' + (even?'even':'odd')\">\n                <td class='q-studentinfo q-name'><fittext maxsize=\"12pt\">{{student.firstname}} {{student.lastname}}</fittext></td>\n                <td class='q-studentinfo q-email'><fittext maxsize=\"12pt\">{{lastaccess}}</fittext></td>\n                <template v-for=\"p in structure.periods\">\n                    <template v-if=\"expansion.periods[p.period.id].expanded && p.lines.length > 0\">\n                        <template v-for=\"l in p.lines\">\n                            <template v-if=\"expansion.lines[p.period.id][l.line.id].expanded\">\n                                <template v-for=\"item in useritems(l)\">\n                                    <td class='q-result overall'\n                                        ><q-courseresult\n                                            :item=\"item\"\n                                            :student=\"student\"\n                                            :loading=\"loading\"\n                                        ></q-courseresult\n                                    ></td>\n                                    <template v-if=\"expansion.items[item.id].expanded\">\n                                        <td v-for=\"(c,idx) in conditions(item)\"\n                                            class='q-result'\n                                            ><q-conditionresult\n                                                :item=\"item\"\n                                                :conditionidx=\"idx\"\n                                                :student=\"student\"\n                                                :loading=\"loading\"\n                                            ></q-conditionresult\n                                        ></td>\n                                    </template>\n                                </template>\n                            </template>\n                            <td v-else class='q-result collapsed'>&nbsp;</td>\n                        </template>\n                    </template>\n                    <td v-else colspan=\"2\" class='q-result collapsed'>&nbsp;</td>\n                </template>\n            </tr>\n            `,\n        });\n\n        Vue.component('q-courseresult', {\n            props: {\n                student: {\n                    type: Object,\n                },\n                item: {\n                    type: Object,\n                },\n                loading: {\n                    type: Boolean,\n                    default: false\n                },\n            },\n            data() {\n                return {\n                    text: strings.studentresults,\n                };\n            },\n            computed: {\n                hasprogressinfo() {\n                    const course = this.item.course;\n                    if (!course.enrolled) {\n                        return false;\n                    } else {\n                        return (course.completion || course.competency || course.grades)?true:false;\n                    }\n                },\n                completion_icon() {\n                    const completion = this.item.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            methods: {\n            },\n            template: `\n            <span class='q-courseresult'>\n                <template v-if=\"loading\">\n                    <div class=\"spinner-border spinner-border-sm text-info\" role=\"status\"></div>\n                </template>\n                <template v-else-if='!item.course.enrolled'>\n                    <i v-b-popover.top\n                        class=\"fa fa-exclamation-triangle t-not-enrolled-alert\"\n                        :title=\"text.student_not_tracked\"></i>\n                </template>\n                <template v-else>\n                    <i v-b-popover.top\n                        :class=\"'fa fa-'+completion_icon+\n                                ' r-completion-'+item.completion\"\n                        :title=\"text['completion_'+item.completion]\"></i>\n                </template>\n            </span>\n            `,\n        });\n\n        Vue.component('q-conditionresult', {\n            props: {\n                student: {\n                    type: Object,\n                },\n                item: {\n                    type: Object,\n                },\n                loading: {\n                    type: Boolean,\n                    default: false\n                },\n                conditionidx: {\n                    type: Number,\n                }\n            },\n            data() {\n                return {\n                    text: strings.studentresults,\n                };\n            },\n            computed: {\n                conditions() {\n                    return conditions(this.item);\n                },\n                condition() {\n                    if (this.conditionidx >= 0 && this.conditionidx < this.conditions.length) {\n                        return this.conditions[this.conditionidx];\n                    } else {\n                        return null;\n                    }\n                },\n                hasprogressinfo() {\n                    const course = this.item.course;\n                    if (!course.enrolled) {\n                        return false;\n                    } else {\n                        return (course.completion || course.competency || course.grades);\n                    }\n                },\n                completion_icon() {\n                    const completion = this.condition_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                condition_value() {\n                    const course = this.item.course;\n                    if (course.competency) {\n                        if (this.condition.grade) {\n                            // Return grade if possible.\n                            return this.condition.grade;\n                        } \n                    } else if(course.completion) {\n                        if (this.condition.grade) {\n                            // Return grade if possible.\n                            return this.condition.grade;\n                        } \n                    } else if(course.grades) {\n                        return this.condition.grade;\n                    }\n                    // Fallback to completion icon.\n                    const icon = this.completion_icon();\n                    return `<i class='fa fa-${icon}'></i>`;\n                },\n                condition_completion() {\n                    // Unify completion information\n                    const course = this.item.course;\n                    if (course.competency) {\n                        const competency = this.condition;\n                        if (competency.proficient && competency.courseproficient) {\n                            return \"completed\";\n                        } else if (competency.proficient) {\n                            return \"completed\";\n                        } else if (competency.proficient === false) {\n                            return \"failed\";\n                        } else if (competency.progress) {\n                            return \"progress\";\n                        } else {\n                            return \"incomplete\";\n                        }\n                    } else if(course.completion) {\n                        return this.condition.status;\n                    } else if(course.grades) {\n                        return this.condition.completion;\n                    }\n                }\n\n            },\n            methods: {\n            },\n            // TODO: Show actual grades when relevant at all (don;t forget the grade point completion requirement)\n            template: `\n            <span class='q-conditionresult'>\n                <fittext maxsize=\"10pt\" singleline dynamic>\n                    <template v-if=\"loading\">\n                        <div class=\"spinner-border spinner-border-sm text-info\" role=\"status\"></div>\n                    </template>\n                    <template v-else-if='!item.course.enrolled'>\n                        <i  class=\"fa fa-ellipsis-h\"\n                            :title=\"text.student_not_tracked\"></i>\n                    </template>\n                    <template v-else>\n                        <span \n                            :class=\"'r-completion-'+condition_completion\"\n                            :title=\"text['completion_'+condition_completion]\"\n                            >{{condition_value}}</span\n                        >\n                    </template>\n                </fittext>\n            </span>\n            `,\n        });\n\n\n\n    },\n};"],"names":["Debugger","Math","PI","striptags","html","tmp","document","createElement","innerHTML","text","textContent","innerText","remove","conditions","item","course","list","competency","cmp","competencies","push","completion","cnd","itm","items","grades","g","selected","install","Vue","use","TSComponents","FitTextVue","strings","report","loading","studyplan_past","studyplan_present","studyplan_future","back","invalid","error","header","overall","students","firstname","lastname","email","lastaccess","studentresults","completion_incomplete","completion_failed","completion_pending","completion_progress","completion_completed","completion_good","completion_excellent","student_not_tracked","never","component","props","structure","type","Object","data","studentsloading","expansioninfo","periods","lines","groupinfo","sorting","asc","created","watch","immediate","handler","loadStudents","firstperiod","period","pid","id","this","$set","expanded","length","line","lid","computed","sortedstudents","group","users","sort","a","b","d","e","String","localeCompare","resultColCount","count","methods","self","methodname","args","studyplan_id","studyplan","then","response","student","results","pageid","page","userid","lastperiod","catch","notification","exception","expansionChanged","parm","val","groupExpansionChanged","toggleSort","template","expansion","name","details","title","tooltip","description","requirement","typename","conditionHeaders","colspanPeriod","sum","l","colspanLine","i","colspanItem","togglePeriod","undefined","$emit","toggleLine","toggleItem","heading","mounted","updated","resultcolumns","Number","default","studentinfocolumns","Boolean","toggleGroup","Array","even","useritems","newitm","hasprogressinfo","enrolled","completion_icon","conditionidx","condition","condition_completion","condition_value","grade","proficient","courseproficient","progress","status"],"mappings":"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"}
\ No newline at end of file
diff --git a/amd/build/util/debugger.min.js b/amd/build/util/debugger.min.js
index bcf9f07..6c78bad 100644
--- a/amd/build/util/debugger.min.js
+++ b/amd/build/util/debugger.min.js
@@ -1,3 +1,3 @@
-define("local_treestudyplan/util/debugger",["exports","core/config"],(function(_exports,_config){var obj;return Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=function(handle){let output_enabled=_config.default.developerdebug;output_enabled?console.warn(`In development environment. Debugger output enabled for ${handle}`):console.warn(`In production environment. Debugger output disabled for ${handle}`);return{write:function(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.info.apply(console,args)}},info:function(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.info.apply(console,args)}},warn:function(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.warn.apply(console,args)}},error:function(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.error.apply(console,args)}},enable:function(){output_enabled=!0},disable:function(){output_enabled=!1}}},_config=(obj=_config)&&obj.__esModule?obj:{default:obj},_exports.default}));
+define("local_treestudyplan/util/debugger",["exports","core/config"],(function(_exports,_config){var obj;return Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=function(handle){let output_enabled=_config.default.developerdebug;output_enabled?console.warn(`In development environment. Debugger output enabled for ${handle}`):console.warn(`In production environment. Debugger output disabled for ${handle}`);return{write(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.info.apply(console,args)}},info(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.info.apply(console,args)}},warn(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.warn.apply(console,args)}},error(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.error.apply(console,args)}},time(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.time.apply(console,args)}},timeEnd(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.timeEnd.apply(console,args)}},timeLog(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.timeLog.apply(console,args)}},timeStamp(){if(output_enabled){let args=Array.prototype.slice.call(arguments);args.unshift(handle+": "),console.timeStamp.apply(console,args)}},enable:function(){output_enabled=!0},disable:function(){output_enabled=!1}}},_config=(obj=_config)&&obj.__esModule?obj:{default:obj},_exports.default}));
 
 //# sourceMappingURL=debugger.min.js.map
\ No newline at end of file
diff --git a/amd/build/util/debugger.min.js.map b/amd/build/util/debugger.min.js.map
index 07e8789..1db4c8a 100644
--- a/amd/build/util/debugger.min.js.map
+++ b/amd/build/util/debugger.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"debugger.min.js","sources":["../../src/util/debugger.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint-env es6*/\n\nimport Config from \"core/config\";\n\n/**\n * Start a new debugger\n * @param {*} handle The string to attach to all messages from this debugger\n * @returns Debugger object\n */\nexport default function (handle) {\n    let output_enabled = Config.developerdebug;\n    if(output_enabled){\n        console.warn(`In development environment. Debugger output enabled for ${handle}`);\n    } else {\n        console.warn(`In production environment. Debugger output disabled for ${handle}`);\n    }\n\n    return {\n        write: function debugger_write() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.info.apply(console, args);\n            }\n        },\n        info: function debugger_info() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.info.apply(console, args);\n            }\n        },\n        warn: function debugger_warn() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.warn.apply(console, args);\n            }\n        },\n        error: function debugger_error() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.error.apply(console, args);\n            }\n        },\n        enable: function debugger_enable() {\n            output_enabled = true;\n        },\n\n        disable: function debugger_disable() {\n            output_enabled = false;\n        }\n    };\n\n}\n"],"names":["handle","output_enabled","Config","developerdebug","console","warn","write","args","Array","prototype","slice","call","arguments","unshift","info","apply","error","enable","disable"],"mappings":"kMAWyBA,YACjBC,eAAiBC,gBAAOC,eACzBF,eACCG,QAAQC,KAAM,2DAA0DL,UAExEI,QAAQC,KAAM,2DAA0DL,gBAGrE,CACHM,MAAO,cACCL,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQU,KAAKC,MAAMX,QAASG,QAGpCO,KAAM,cACEb,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQU,KAAKC,MAAMX,QAASG,QAGpCF,KAAM,cACEJ,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQC,KAAKU,MAAMX,QAASG,QAGpCS,MAAO,cACCf,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQY,MAAMD,MAAMX,QAASG,QAGrCU,OAAQ,WACJhB,gBAAiB,GAGrBiB,QAAS,WACLjB,gBAAiB"}
\ No newline at end of file
+{"version":3,"file":"debugger.min.js","sources":["../../src/util/debugger.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint-env es6*/\n\nimport Config from \"core/config\";\n\n/**\n * Start a new debugger\n * @param {*} handle The string to attach to all messages from this debugger\n * @returns Debugger object\n */\nexport default function (handle) {\n    let output_enabled = Config.developerdebug;\n    if(output_enabled){\n        console.warn(`In development environment. Debugger output enabled for ${handle}`);\n    } else {\n        console.warn(`In production environment. Debugger output disabled for ${handle}`);\n    }\n\n    return {\n        write() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.info.apply(console, args);\n            }\n        },\n        info() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.info.apply(console, args);\n            }\n        },\n        warn() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.warn.apply(console, args);\n            }\n        },\n        error() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.error.apply(console, args);\n            }\n        },\n        time() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.time.apply(console, args);\n            }\n        },\n        timeEnd() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.timeEnd.apply(console, args);\n            }\n        },\n        timeLog() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.timeLog.apply(console, args);\n            }\n        },\n        timeStamp() {\n            if (output_enabled) {\n                let args = Array.prototype.slice.call(arguments);\n                args.unshift(handle + \": \");\n                console.timeStamp.apply(console, args);\n            }\n        },\n        enable: function debugger_enable() {\n            output_enabled = true;\n        },\n\n        disable: function debugger_disable() {\n            output_enabled = false;\n        }\n    };\n\n}\n"],"names":["handle","output_enabled","Config","developerdebug","console","warn","write","args","Array","prototype","slice","call","arguments","unshift","info","apply","error","time","timeEnd","timeLog","timeStamp","enable","disable"],"mappings":"kMAWyBA,YACjBC,eAAiBC,gBAAOC,eACzBF,eACCG,QAAQC,KAAM,2DAA0DL,UAExEI,QAAQC,KAAM,2DAA0DL,gBAGrE,CACHM,WACQL,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQU,KAAKC,MAAMX,QAASG,QAGpCO,UACQb,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQU,KAAKC,MAAMX,QAASG,QAGpCF,UACQJ,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQC,KAAKU,MAAMX,QAASG,QAGpCS,WACQf,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQY,MAAMD,MAAMX,QAASG,QAGrCU,UACQhB,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQa,KAAKF,MAAMX,QAASG,QAGpCW,aACQjB,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQc,QAAQH,MAAMX,QAASG,QAGvCY,aACQlB,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQe,QAAQJ,MAAMX,QAASG,QAGvCa,eACQnB,eAAgB,KACZM,KAAOC,MAAMC,UAAUC,MAAMC,KAAKC,WACtCL,KAAKM,QAAQb,OAAS,MACtBI,QAAQgB,UAAUL,MAAMX,QAASG,QAGzCc,OAAQ,WACJpB,gBAAiB,GAGrBqB,QAAS,WACLrB,gBAAiB"}
\ No newline at end of file
diff --git a/amd/src/page-studyplan-report.js b/amd/src/page-studyplan-report.js
index 6bef211..789c524 100644
--- a/amd/src/page-studyplan-report.js
+++ b/amd/src/page-studyplan-report.js
@@ -29,8 +29,16 @@ Vue.use(BootstrapVue);
 let debug = new Debugger("treestudyplanviewer");
 
 let strings = load_strings({
-    studyplan: {
+    studyplan_report: {
         studyplan_select_placeholder: 'studyplan_select_placeholder',
+        studyplan: 'studyplan',
+        page: 'studyplanpage',
+        periods: 'periods',
+        period: 'period',
+        loading: 'loading@core',
+        all: 'all@core',
+        from: 'from@core',
+        to: 'to@core',
     },
 });
 
@@ -44,7 +52,7 @@ let strings = load_strings({
 export function init(studyplanid, pageid, firstperiod, lastperiod) {
     if (undefined === pageid || !Number.isInteger(Number(pageid)) ||
         undefined === studyplanid || !Number.isInteger(Number(studyplanid))) {
-        debug.error("Did Error: studyplan id and page id not provided as integer numbers to script.",
+        debug.error("Error: studyplan id and page id not provided as integer numbers to script.",
             studyplanid, pageid, firstperiod, lastperiod);
         return; // Do not continue if plan and page are not proper integers
     }
@@ -57,18 +65,22 @@ export function init(studyplanid, pageid, firstperiod, lastperiod) {
         el: '#root',
         data: {
             structure: null,
+            studyplan: null,
+            page: null,
+            text: strings.studyplan_report,
         },
         async mounted() {
             
-        },
+        }, 
         created() {
-            this.loadStructure();
+            // On creation, load the page as specified
+            this.loadStructure(pageid,firstperiod,lastperiod);
         },
         computed: {
            
         },
         methods: {
-            loadStructure() {
+            loadStructure(pageid,firstperiod,lastperiod) {
                 const self = this;
                 this.structure = null; // Starts loading icon. Hides old data.
                 call([{
@@ -79,8 +91,34 @@ export function init(studyplanid, pageid, firstperiod, lastperiod) {
                     }
                 }])[0].then(function(response){
                     self.structure = response;
+                    self.studyplan = response.studyplan;
+                    self.page = response.page;
                 }).catch(notification.exception);
-            }
+            },
+            selectedPage(e) {
+                debug.info("SelectedPage",e);
+                const pageid = e.target.value;
+                this.loadStructure(pageid);
+            },
+            selectedFirstPeriod(e) {
+                debug.info("selectedFirstPeriod",e);
+                let f = e.target.value;
+                let l = this.structure.lastperiod;
+                if ( l < f) {
+                    l = f;
+                }
+                this.loadStructure(this.page.id,f,l);
+            },
+            selectedLastPeriod(e) {
+                debug.info("selectedLastPeriod",e);
+                let f = this.structure.firstperiod;
+                let l = e.target.value;
+                if ( l < f) {
+                    l = f;
+                }
+                this.loadStructure(this.page.id,f,l);
+
+            },
         },
     });
 }
diff --git a/amd/src/report-viewer-components.js b/amd/src/report-viewer-components.js
index bbce2f4..a6abe3e 100644
--- a/amd/src/report-viewer-components.js
+++ b/amd/src/report-viewer-components.js
@@ -158,6 +158,8 @@ export default {
                 description: 'studyplan_description',
                 duration: 'studyplan_duration',
                 details: 'studyplan_details',
+                overview: 'overviewreport:all',
+                oveviewperiod: 'overviewreport:period'
             }
 
         });
@@ -628,10 +630,10 @@ export default {
                             <!-- First paint the headings-->
                             <div class='r-studyplan-headings'
                                 ><s-studyline-header-heading :identifier="Number(page.id)"
-                                    ><a v-if="selectedpage" 
+                                    ><a v-if="selectedpage" class="ml-2"
                                         :href="wwwroot+'//local/treestudyplan/studyplan-report.php?page='+selectedpage.id"
                                         
-                                        target='_blank'><i class='fa fa-file-text'></i></a
+                                        target='_blank'><i class='fa fa-list-ul'></i>&nbsp;{{text.overview}}</a
                                 ></s-studyline-header-heading>
                                 <r-studyline-heading  v-for="(line,lineindex) in page.studylines"
                                     :key="line.id"
@@ -652,9 +654,11 @@ export default {
                                         v-model="page.perioddesc[index-1]"
                                         :identifier="Number(page.id)"
                                         ><a v-if="selectedpage"
+                                            v-b-tooltip.hover
                                             :href="wwwroot+'//local/treestudyplan/studyplan-report.php?page='+selectedpage.id
                                                    +'&firstperiod='+index+'&lastperiod='+index"
-                                        target='_blank'><i class='fa fa-file-text'></i></a
+                                            target='_blank'
+                                            :title="text.overviewperiod"><i class='fa fa-list-ul'></i></a
                                     ></s-studyline-header-period>
                                     <div class="s-studyline-header-filter"></div>
                                 </template>
diff --git a/amd/src/studyplan-report-components.js b/amd/src/studyplan-report-components.js
index 198547e..77e21ab 100644
--- a/amd/src/studyplan-report-components.js
+++ b/amd/src/studyplan-report-components.js
@@ -186,7 +186,7 @@ export default {
                                     this.expansioninfo.periods, 
                                     pid, 
                                     {
-                                        expanded: (firstperiod?true:false),
+                                        expanded: ((firstperiod && period.lines.length > 0)?true:false),
                                     }
                                 );
                                 this.$set(
diff --git a/amd/src/util/debugger.js b/amd/src/util/debugger.js
index 6d87ef2..b847809 100644
--- a/amd/src/util/debugger.js
+++ b/amd/src/util/debugger.js
@@ -18,34 +18,62 @@ export default function (handle) {
     }
 
     return {
-        write: function debugger_write() {
+        write() {
             if (output_enabled) {
                 let args = Array.prototype.slice.call(arguments);
                 args.unshift(handle + ": ");
                 console.info.apply(console, args);
             }
         },
-        info: function debugger_info() {
+        info() {
             if (output_enabled) {
                 let args = Array.prototype.slice.call(arguments);
                 args.unshift(handle + ": ");
                 console.info.apply(console, args);
             }
         },
-        warn: function debugger_warn() {
+        warn() {
             if (output_enabled) {
                 let args = Array.prototype.slice.call(arguments);
                 args.unshift(handle + ": ");
                 console.warn.apply(console, args);
             }
         },
-        error: function debugger_error() {
+        error() {
             if (output_enabled) {
                 let args = Array.prototype.slice.call(arguments);
                 args.unshift(handle + ": ");
                 console.error.apply(console, args);
             }
         },
+        time() {
+            if (output_enabled) {
+                let args = Array.prototype.slice.call(arguments);
+                args.unshift(handle + ": ");
+                console.time.apply(console, args);
+            }
+        },
+        timeEnd() {
+            if (output_enabled) {
+                let args = Array.prototype.slice.call(arguments);
+                args.unshift(handle + ": ");
+                console.timeEnd.apply(console, args);
+            }
+        },
+        timeLog() {
+            if (output_enabled) {
+                let args = Array.prototype.slice.call(arguments);
+                args.unshift(handle + ": ");
+                console.timeLog.apply(console, args);
+            }
+        },
+        timeStamp() {
+            if (output_enabled) {
+                let args = Array.prototype.slice.call(arguments);
+                args.unshift(handle + ": ");
+                console.timeStamp.apply(console, args);
+            }
+        },
         enable: function debugger_enable() {
             output_enabled = true;
         },
diff --git a/css/devstyles.css b/css/devstyles.css
index 78e228d..9d31e96 100644
--- a/css/devstyles.css
+++ b/css/devstyles.css
@@ -1732,6 +1732,23 @@ body.path-local-treestudyplan .editmode-switch-form > * {
     display: inline-block;
     width: 100%;
 }
+.path-local-treestudyplan .q-pageperiodselection {
+    margin-left: 0;
+    margin-bottom: 1em;
+    margin-top: 1em;
+    padding-left: 0;
+    position: relative;
+}
+.path-local-treestudyplan .q-pageperiodselection .row {
+    margin-top: 0.5rem;
+}
+.path-local-treestudyplan .q-pageperiodselection select.custom-select {
+    width: 100%;
+}
+.path-local-treestudyplan .q-pageperiodselection .q-label {
+    position: relative;
+    top: 0.5em;
+}
 
 .path-local-treestudyplan .b-modal-justify-footer-between .modal-footer,
 .features-treestudyplan .b-modal-justify-footer-between .modal-footer {
diff --git a/lang/en/local_treestudyplan.php b/lang/en/local_treestudyplan.php
index ddc1894..aef3a26 100644
--- a/lang/en/local_treestudyplan.php
+++ b/lang/en/local_treestudyplan.php
@@ -462,4 +462,6 @@ $string["premiumfeature:morestudyplans"] = 'Creating more than 5 studyplans in a
 $string["premiumfeature:morecategories"] = 'Creating studyplans in more than 20 categories is a premium feature.';
 $string["overall"] = 'Course';
 $string["studyplan_report"] = 'Studyplan result overview';
+$string["overviewreport:all"] = 'Result overview';
+$string["overviewreport:period"] = 'Result overview for this period';
 
diff --git a/lang/nl/local_treestudyplan.php b/lang/nl/local_treestudyplan.php
index 9bcfe36..9e56d73 100644
--- a/lang/nl/local_treestudyplan.php
+++ b/lang/nl/local_treestudyplan.php
@@ -462,3 +462,5 @@ $string["premiumfeature:morestudyplans"] = 'Meer dan 5 studieplannen in één ca
 $string["premiumfeature:morecategories"] = 'In meer dan 20 categoriën een studieplan aanmaken kan alleen met premium toegang.';
 $string["overall"] = 'Cursus voltooid';
 $string["studyplan_report"] = 'Studieplan resultatenoverzicht';
+$string["overviewreport:all"] = 'Resultatenoverzicht';
+$string["overviewreport:period"] = 'Resultatenoverzicht voor deze periode';
\ No newline at end of file
diff --git a/scss/studyplan-report.scss b/scss/studyplan-report.scss
index 2383d4e..c567d5c 100644
--- a/scss/studyplan-report.scss
+++ b/scss/studyplan-report.scss
@@ -172,4 +172,28 @@
             width: 100%;
         }
     }
+
+    .q-pageperiodselection {
+        margin-left: 0;
+        margin-bottom: 1em;
+        margin-top: 1em;
+        padding-left: 0;
+        position: relative;
+
+        .row {
+            margin-top: 0.5rem;
+        }
+
+        select.custom-select {
+            width: 100%;
+        }
+
+        .q-label {
+            position: relative;
+            top: 0.5em;
+        }
+
+    }
+
+
 }
\ No newline at end of file
diff --git a/studyplan-report.php b/studyplan-report.php
index 0efdb15..94c9536 100644
--- a/studyplan-report.php
+++ b/studyplan-report.php
@@ -96,7 +96,55 @@ if($studyplan->name() != $page->fullname()) {
                 <span class="sr-only">Loading...</span>
             </div>
         </div>
-        <q-studyplanreport v-else :structure="structure" ></s-studyplanreport>
+        <template v-else>
+            <div class='container q-pageperiodselection'>
+                <div class='row'>
+                    <div class="col-sm-2 q-label">{{text.page}}</div>
+                    <div class="col-sm-6">
+                        <select class="custom-select" :value="page.id" @change="selectedPage">
+                            <template v-if="studyplan">
+                                <option v-for="p in studyplan.pages" 
+                                    :key="p.id" 
+                                    :value="p.id"
+                                    :selected="(page.id == p.id)?true:false"
+                                    >{{p.fullname}}</option>
+                            </template>
+                            <option v-else disabled>{{text.loading}}</option>
+                        </select>
+                    </div>
+                </div>
+                <div class='row'>
+                    <div class="col-sm-2 q-label" >{{text.period}} ({{text.from}} / {{text.to}})</div>
+                    <div class="col-sm-2">
+                        <select class="custom-select" @change="selectedFirstPeriod">
+                            <template v-if="page">
+                                <option v-for="p in page.perioddesc" 
+                                    :key="p.id" 
+                                    :value="p.period"
+                                    :selected="(structure.firstperiod == p.period)?true:false"
+                                    >{{p.fullname}}</option>
+                            </template>
+                            <option v-else disabled>{{text.loading}}</option>
+                        </select>
+                    </div>
+                    <div class="col-sm-2 ">
+                        <select class="custom-select" @change="selectedLastPeriod">
+                            <template v-if="page">
+                                <template v-for="p in page.perioddesc">
+                                    <option v-if="p.period >= structure.firstperiod"
+                                        :key="p.id" 
+                                        :value="p.period"
+                                        :selected="(structure.lastperiod == p.period)?true:false"
+                                        >{{p.fullname}}</option>
+                                </template>
+                            </template>
+                            <option v-else disabled>{{text.loading}}</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <q-studyplanreport :structure="structure" ></s-studyplanreport>
+        </template>
     </div>
 </div>
 <?php
diff --git a/styles.css b/styles.css
index 78e228d..9d31e96 100644
--- a/styles.css
+++ b/styles.css
@@ -1732,6 +1732,23 @@ body.path-local-treestudyplan .editmode-switch-form > * {
     display: inline-block;
     width: 100%;
 }
+.path-local-treestudyplan .q-pageperiodselection {
+    margin-left: 0;
+    margin-bottom: 1em;
+    margin-top: 1em;
+    padding-left: 0;
+    position: relative;
+}
+.path-local-treestudyplan .q-pageperiodselection .row {
+    margin-top: 0.5rem;
+}
+.path-local-treestudyplan .q-pageperiodselection select.custom-select {
+    width: 100%;
+}
+.path-local-treestudyplan .q-pageperiodselection .q-label {
+    position: relative;
+    top: 0.5em;
+}
 
 .path-local-treestudyplan .b-modal-justify-footer-between .modal-footer,
 .features-treestudyplan .b-modal-justify-footer-between .modal-footer {