From 1975952c8fde3b33afede89fe18861ec8085bd0e Mon Sep 17 00:00:00 2001 From: PMKuipers Date: Mon, 23 Oct 2023 23:19:14 +0200 Subject: [PATCH] Implemented progress option on studyplan card --- amd/build/treestudyplan-components.min.js | 2 +- amd/build/treestudyplan-components.min.js.map | 2 +- amd/src/treestudyplan-components.js | 63 ++++++- classes/studyitem.php | 2 +- classes/studyplan.php | 20 +++ classes/studyplanpage.php | 23 +++ css/devstyles.css | 154 +++++++++++++----- lang/en/local_treestudyplan.php | 6 + lang/nl/local_treestudyplan.php | 3 + scss/studyplan.scss | 37 ----- scss/studyplancard.scss | 113 +++++++++++++ scss/styles.scss | 1 + settings.php | 2 +- styles.css | 154 +++++++++++++----- 14 files changed, 454 insertions(+), 128 deletions(-) create mode 100644 scss/studyplancard.scss diff --git a/amd/build/treestudyplan-components.min.js b/amd/build/treestudyplan-components.min.js index cea6e1e..51a6055 100644 --- a/amd/build/treestudyplan-components.min.js +++ b/amd/build/treestudyplan-components.min.js @@ -1,3 +1,3 @@ -define("local_treestudyplan/treestudyplan-components",["exports","./util/string-helper","./util/date-helper"],(function(_exports,_stringHelper,_dateHelper){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;var _default={studyplanTiming:function(a){var now=(new Date).getTime(),timing="future";return new Date(a.startdate).getTime()new Date(a.enddate).getTime()?"past":"present"),timing},install:function(Vue){var strings=(0,_stringHelper.load_strings)({studyplancard:{open:"open",noenddate:"noenddate",idnumber:"studyplan_idnumber",description:"studyplan_description"}}),ItemEventBus=new Vue;Vue.component("s-studyplan-card",{props:{value:{type:Object},open:{type:Boolean}},data:function(){return{text:strings.studyplancard}},computed:{timing:function(){var now=(new Date).getTime(),startdate=new Date(this.value.pages[0].startdate).getTime(),enddate=new Date(this.value.pages[0].enddate).getTime(),timing="future";return startdateenddate?"past":"present"),timing},startdate:function(){return(0,_dateHelper.format_date)(this.value.pages[0].startdate)},enddate:function(){return this.value.pages[0].enddate?(0,_dateHelper.format_date)(this.value.pages[0].enddate):this.text.noenddate}},methods:{onOpenClick:function(e){this.$emit("open",e)}},template:"\n \n \n \n {{value.name}}\n \n \n \n
\n
{{ text.idnumber}}: {{ value.idnumber }}
\n \n \n \n \n "}),Vue.component("s-studyline-header-heading",{props:{},data:function(){return{layerHeights:{}}},created:function(){ItemEventBus.$on("headerHeightChange",this.onHeaderHeightChange)},computed:{},methods:{onHeaderHeightChange:function(newheight){this.$refs.main&&(this.$refs.main.style.height="".concat(newheight,"px"))}},template:'\n
\n '}),Vue.component("s-studyline-header-period",{props:{value:{type:Object}},mounted:function(){var self=this;1==self.value.period&&(self.resizeListener=new ResizeObserver((function(){if(self.$refs.main){var size=self.$refs.main.getBoundingClientRect();ItemEventBus.$emit("headerHeightChange",size.height)}})).observe(self.$refs.main))},unmounted:function(){this.resizeListener&&this.resizeListener.disconnect()},computed:{startdate:function(){return(0,_dateHelper.format_date)(this.value.startdate)},enddate:function(){return(0,_dateHelper.format_date)(this.value.enddate)},current:function(){if(this.value&&this.value.startdate&&this.value.enddate){var now=new Date,pstart=new Date(this.value.startdate),pend=new Date(this.value.enddate);return now>=pstart&&now

{{ value.shortname }}\n {{ value.fullname }}
\n \n {{ startdate }} - {{ enddate }}\n \n \n

\n {{ startdate }} - {{ enddate }}\n

\n \n '})}};return _exports.default=_default,_exports.default})); +define("local_treestudyplan/treestudyplan-components",["exports","./util/string-helper","./util/date-helper"],(function(_exports,_stringHelper,_dateHelper){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;var _default={studyplanTiming:function(a){var now=(new Date).getTime(),timing="future";return new Date(a.startdate).getTime()new Date(a.enddate).getTime()?"past":"present"),timing},install:function(Vue){var strings=(0,_stringHelper.load_strings)({studyplancard:{open:"open",noenddate:"noenddate",idnumber:"studyplan_idnumber",description:"studyplan_description",completed:"completed"}}),ItemEventBus=new Vue;Vue.component("s-studyplan-card",{props:{value:{type:Object},open:{type:Boolean}},data:function(){return{text:strings.studyplancard}},computed:{timing:function(){var now=(new Date).getTime(),startdate=new Date(this.value.pages[0].startdate).getTime(),enddate=new Date(this.value.pages[0].enddate).getTime(),timing="future";return startdateenddate?"past":"present"),timing},startdate:function(){return(0,_dateHelper.format_date)(this.value.pages[0].startdate)},enddate:function(){return this.value.pages[0].enddate?(0,_dateHelper.format_date)(this.value.pages[0].enddate):this.text.noenddate},width_completed:function(){return this.value.progress?100*this.value.progress:0},width_incomplete:function(){return this.value.progress?100*(1-this.value.progress):100},percentage_complete:function(){return this.value.progress?Math.round(100*this.value.progress)+"%":"0%"}},methods:{onOpenClick:function(e){this.$emit("open",e)}},template:"\n \n \n \n
\n
\n
\n
\n \n {{value.name}}\n \n \n
\n
\n
\n {{ text.idnumber }}: {{ value.idnumber }}\n
\n
\n
0\"\n :style=\"{width: width_completed+'%'}\"\n class='s-studyplan-card-progress-segment s-studyplan-card-progress-completed'\n >
\n
\n {{ percentage_complete}} {{ text.completed.toLowerCase() }} \n
\n
\n
\n \n
\n \n \n \n "}),Vue.component("s-studyline-header-heading",{props:{},data:function(){return{layerHeights:{}}},created:function(){ItemEventBus.$on("headerHeightChange",this.onHeaderHeightChange)},computed:{},methods:{onHeaderHeightChange:function(newheight){this.$refs.main&&(this.$refs.main.style.height="".concat(newheight,"px"))}},template:'\n
\n '}),Vue.component("s-studyline-header-period",{props:{value:{type:Object}},mounted:function(){var self=this;1==self.value.period&&(self.resizeListener=new ResizeObserver((function(){if(self.$refs.main){var size=self.$refs.main.getBoundingClientRect();ItemEventBus.$emit("headerHeightChange",size.height)}})).observe(self.$refs.main))},unmounted:function(){this.resizeListener&&this.resizeListener.disconnect()},computed:{startdate:function(){return(0,_dateHelper.format_date)(this.value.startdate)},enddate:function(){return(0,_dateHelper.format_date)(this.value.enddate)},current:function(){if(this.value&&this.value.startdate&&this.value.enddate){var now=new Date,pstart=new Date(this.value.startdate),pend=new Date(this.value.enddate);return now>=pstart&&now

{{ value.shortname }}\n {{ value.fullname }}
\n \n {{ startdate }} - {{ enddate }}\n \n \n

\n {{ startdate }} - {{ enddate }}\n

\n \n '})}};return _exports.default=_default,_exports.default})); //# sourceMappingURL=treestudyplan-components.min.js.map \ No newline at end of file diff --git a/amd/build/treestudyplan-components.min.js.map b/amd/build/treestudyplan-components.min.js.map index 6d7310d..10ae5d5 100644 --- a/amd/build/treestudyplan-components.min.js.map +++ b/amd/build/treestudyplan-components.min.js.map @@ -1 +1 @@ -{"version":3,"file":"treestudyplan-components.min.js","sources":["../src/treestudyplan-components.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint-disable no-trailing-spaces */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {load_strings} from './util/string-helper';\nimport {format_date} from './util/date-helper';\n\nexport default {\n studyplanTiming(a) {\n const now = new Date().getTime();\n let timing = 'future';\n if(new Date(a.startdate).getTime() < now){\n if(a.enddate && now > new Date(a.enddate).getTime()) {\n timing = 'past';\n } else {\n timing = 'present';\n }\n }\n return timing;\n },\n\n install(Vue/*,options*/){\n let strings = load_strings({\n studyplancard: {\n open: \"open\",\n noenddate: \"noenddate\",\n idnumber: \"studyplan_idnumber\",\n description: \"studyplan_description\"\n }\n });\n // Create new eventbus for interaction between item components\n const ItemEventBus = new Vue();\n\n Vue.component('s-studyplan-card', {\n props: {\n value: {\n type: Object,\n },\n open: {\n type: Boolean\n }\n },\n data() {\n return {\n text: strings.studyplancard\n };\n },\n computed: {\n timing(){\n const now = new Date().getTime();\n const startdate = new Date(this.value.pages[0].startdate).getTime();\n const enddate = new Date(this.value.pages[0].enddate).getTime();\n let timing = 'future';\n if(startdate < now){\n if(this.value.pages[0].enddate && now > enddate) {\n timing = 'past';\n } else {\n timing = 'present';\n }\n }\n return timing;\n },\n startdate(){\n return format_date(this.value.pages[0].startdate);\n },\n enddate(){\n if(this.value.pages[0].enddate){\n return format_date(this.value.pages[0].enddate);\n }\n else {\n return this.text.noenddate;\n }\n }\n },\n methods: {\n onOpenClick(e) {\n this.$emit('open',e);\n }\n },\n template: `\n \n \n \n {{value.name}}\n \n \n \n
\n
{{ text.idnumber}}: {{ value.idnumber }}
\n \n \n \n \n `,\n });\n\n /*\n * S-STUDYLINE-HEADER-HEADING\n * The only reasing this is not a simple empty div, is the fact that the header height\n * needs to match that of the period headers\n */\n Vue.component('s-studyline-header-heading', {\n props: {\n\n },\n data() {\n return {\n layerHeights: {}\n };\n },\n created() {\n // Listener for the signal that a new connection was made and needs to be drawn\n // Sent by the incoming item - By convention, outgoing items are responsible for drawing the lines\n ItemEventBus.$on('headerHeightChange', this.onHeaderHeightChange);\n },\n computed: {\n\n },\n methods: {\n onHeaderHeightChange(newheight){\n if(this.$refs.main){\n this.$refs.main.style.height = `${newheight}px`;\n }\n }\n },\n template: `\n
\n `,\n });\n\n Vue.component('s-studyline-header-period', {\n props: {\n value: {\n type: Object, // dict with layer as index\n },\n },\n mounted() {\n const self=this;\n if(self.value.period == 1){\n self.resizeListener = new ResizeObserver(() => {\n if(self.$refs.main){\n const size = self.$refs.main.getBoundingClientRect();\n ItemEventBus.$emit('headerHeightChange', size.height);\n }\n }).observe(self.$refs.main);\n }\n },\n unmounted() {\n if(this.resizeListener) {\n this.resizeListener.disconnect();\n }\n },\n computed: {\n startdate(){\n return format_date(this.value.startdate);\n },\n enddate(){\n return format_date(this.value.enddate);\n },\n current(){\n if( this.value && this.value.startdate && this.value.enddate){\n const now = new Date();\n const pstart = new Date(this.value.startdate);\n const pend = new Date(this.value.enddate);\n return (now >= pstart && now < pend);\n }\n else {\n return false;\n }\n }\n\n },\n data() {\n return {\n };\n },\n template: `\n

{{ value.shortname }}\n {{ value.fullname }}
\n \n {{ startdate }} - {{ enddate }}\n \n \n

\n {{ startdate }} - {{ enddate }}\n

\n
\n `,\n });\n\n\n }\n};"],"names":["studyplanTiming","a","now","Date","getTime","timing","startdate","enddate","install","Vue","strings","studyplancard","open","noenddate","idnumber","description","ItemEventBus","component","props","value","type","Object","Boolean","data","text","computed","this","pages","methods","onOpenClick","e","$emit","template","layerHeights","created","$on","onHeaderHeightChange","newheight","$refs","main","style","height","mounted","self","period","resizeListener","ResizeObserver","size","getBoundingClientRect","observe","unmounted","disconnect","current","pstart","pend"],"mappings":"yPASe,CACXA,yBAAgBC,OACNC,KAAM,IAAIC,MAAOC,UACnBC,OAAS,gBACV,IAAIF,KAAKF,EAAEK,WAAWF,UAAYF,MAE7BG,OADDJ,EAAEM,SAAWL,IAAM,IAAIC,KAAKF,EAAEM,SAASH,UAC7B,OAEA,WAGVC,QAGXG,iBAAQC,SACAC,SAAU,8BAAa,CACvBC,cAAe,CACXC,KAAM,OACNC,UAAW,YACXC,SAAU,qBACVC,YAAa,2BAIfC,aAAe,IAAIP,IAEzBA,IAAIQ,UAAU,mBAAoB,CAC9BC,MAAO,CACHC,MAAO,CACHC,KAAMC,QAEVT,KAAM,CACFQ,KAAME,UAGdC,sBACW,CACHC,KAAMd,QAAQC,gBAGtBc,SAAU,CACNpB,sBACUH,KAAM,IAAIC,MAAOC,UACjBE,UAAY,IAAIH,KAAKuB,KAAKP,MAAMQ,MAAM,GAAGrB,WAAWF,UACpDG,QAAU,IAAIJ,KAAKuB,KAAKP,MAAMQ,MAAM,GAAGpB,SAASH,UAClDC,OAAS,gBACVC,UAAYJ,MAEPG,OADDqB,KAAKP,MAAMQ,MAAM,GAAGpB,SAAWL,IAAMK,QAC3B,OAEA,WAGVF,QAEXC,4BACW,2BAAYoB,KAAKP,MAAMQ,MAAM,GAAGrB,YAE3CC,0BACOmB,KAAKP,MAAMQ,MAAM,GAAGpB,SACZ,2BAAYmB,KAAKP,MAAMQ,MAAM,GAAGpB,SAGhCmB,KAAKF,KAAKX,YAI7Be,QAAS,CACLC,qBAAYC,QACHC,MAAM,OAAOD,KAG1BE,s6DA4CJvB,IAAIQ,UAAU,6BAA8B,CACxCC,MAAO,GAGPK,sBACW,CACHU,aAAc,KAGtBC,mBAGIlB,aAAamB,IAAI,qBAAsBT,KAAKU,uBAEhDX,SAAU,GAGVG,QAAS,CACLQ,8BAAqBC,WACdX,KAAKY,MAAMC,YACLD,MAAMC,KAAKC,MAAMC,iBAAYJ,mBAI9CL,mGAKJvB,IAAIQ,UAAU,4BAA6B,CACvCC,MAAO,CACHC,MAAO,CACHC,KAAMC,SAGdqB,uBACUC,KAAKjB,KACa,GAArBiB,KAAKxB,MAAMyB,SACVD,KAAKE,eAAiB,IAAIC,gBAAe,cAClCH,KAAKL,MAAMC,KAAK,KACTQ,KAAOJ,KAAKL,MAAMC,KAAKS,wBAC7BhC,aAAae,MAAM,qBAAsBgB,KAAKN,YAEnDQ,QAAQN,KAAKL,MAAMC,QAG9BW,qBACOxB,KAAKmB,qBACCA,eAAeM,cAG5B1B,SAAU,CACNnB,4BACW,2BAAYoB,KAAKP,MAAMb,YAElCC,0BACW,2BAAYmB,KAAKP,MAAMZ,UAElC6C,sBACQ1B,KAAKP,OAASO,KAAKP,MAAMb,WAAaoB,KAAKP,MAAMZ,QAAQ,KACnDL,IAAM,IAAIC,KACVkD,OAAS,IAAIlD,KAAKuB,KAAKP,MAAMb,WAC7BgD,KAAO,IAAInD,KAAKuB,KAAKP,MAAMZ,gBACzBL,KAAOmD,QAAUnD,IAAMoD,YAGxB,IAKnB/B,sBACW,IAGXS"} \ No newline at end of file +{"version":3,"file":"treestudyplan-components.min.js","sources":["../src/treestudyplan-components.js"],"sourcesContent":["/*eslint no-var: \"error\"*/\n/*eslint no-console: \"off\"*/\n/*eslint-disable no-trailing-spaces */\n/*eslint-env es6*/\n// Put this file in path/to/plugin/amd/src\n\nimport {load_strings} from './util/string-helper';\nimport {format_date} from './util/date-helper';\n\nexport default {\n studyplanTiming(a) {\n const now = new Date().getTime();\n let timing = 'future';\n if(new Date(a.startdate).getTime() < now){\n if(a.enddate && now > new Date(a.enddate).getTime()) {\n timing = 'past';\n } else {\n timing = 'present';\n }\n }\n return timing;\n },\n\n install(Vue/*,options*/){\n let strings = load_strings({\n studyplancard: {\n open: \"open\",\n noenddate: \"noenddate\",\n idnumber: \"studyplan_idnumber\",\n description: \"studyplan_description\",\n completed: \"completed\",\n }\n });\n // Create new eventbus for interaction between item components\n const ItemEventBus = new Vue();\n\n Vue.component('s-studyplan-card', {\n props: {\n value: {\n type: Object,\n },\n open: {\n type: Boolean\n },\n },\n data() {\n return {\n text: strings.studyplancard\n };\n },\n computed: {\n timing(){\n const now = new Date().getTime();\n const startdate = new Date(this.value.pages[0].startdate).getTime();\n const enddate = new Date(this.value.pages[0].enddate).getTime();\n let timing = 'future';\n if(startdate < now){\n if(this.value.pages[0].enddate && now > enddate) {\n timing = 'past';\n } else {\n timing = 'present';\n }\n }\n return timing;\n },\n startdate(){\n return format_date(this.value.pages[0].startdate);\n },\n enddate(){\n if(this.value.pages[0].enddate){\n return format_date(this.value.pages[0].enddate);\n }\n else {\n return this.text.noenddate;\n }\n },\n width_completed() {\n if(this.value.progress) {\n return this.value.progress * 100;\n } else {\n return 0;\n }\n },\n width_incomplete() {\n if(this.value.progress) {\n return (1-this.value.progress) * 100;\n } else {\n return 100;\n }\n },\n percentage_complete() {\n if(this.value.progress) {\n return Math.round(this.value.progress * 100) + \"%\";\n } else {\n return \"0%\";\n }\n }\n },\n methods: {\n onOpenClick(e) {\n this.$emit('open',e);\n }\n },\n template: `\n \n \n \n
\n
\n
\n
\n \n {{value.name}}\n \n \n
\n
\n
\n {{ text.idnumber }}: {{ value.idnumber }}\n
\n
\n
0\"\n :style=\"{width: width_completed+'%'}\"\n class='s-studyplan-card-progress-segment s-studyplan-card-progress-completed'\n >
\n
\n {{ percentage_complete}} {{ text.completed.toLowerCase() }} \n
\n
\n
\n \n
\n \n \n \n `,\n });\n\n /*\n * S-STUDYLINE-HEADER-HEADING\n * The only reasing this is not a simple empty div, is the fact that the header height\n * needs to match that of the period headers\n */\n Vue.component('s-studyline-header-heading', {\n props: {\n\n },\n data() {\n return {\n layerHeights: {}\n };\n },\n created() {\n // Listener for the signal that a new connection was made and needs to be drawn\n // Sent by the incoming item - By convention, outgoing items are responsible for drawing the lines\n ItemEventBus.$on('headerHeightChange', this.onHeaderHeightChange);\n },\n computed: {\n\n },\n methods: {\n onHeaderHeightChange(newheight){\n if(this.$refs.main){\n this.$refs.main.style.height = `${newheight}px`;\n }\n }\n },\n template: `\n
\n `,\n });\n\n Vue.component('s-studyline-header-period', {\n props: {\n value: {\n type: Object, // dict with layer as index\n },\n },\n mounted() {\n const self=this;\n if(self.value.period == 1){\n self.resizeListener = new ResizeObserver(() => {\n if(self.$refs.main){\n const size = self.$refs.main.getBoundingClientRect();\n ItemEventBus.$emit('headerHeightChange', size.height);\n }\n }).observe(self.$refs.main);\n }\n },\n unmounted() {\n if(this.resizeListener) {\n this.resizeListener.disconnect();\n }\n },\n computed: {\n startdate(){\n return format_date(this.value.startdate);\n },\n enddate(){\n return format_date(this.value.enddate);\n },\n current(){\n if( this.value && this.value.startdate && this.value.enddate){\n const now = new Date();\n const pstart = new Date(this.value.startdate);\n const pend = new Date(this.value.enddate);\n return (now >= pstart && now < pend);\n }\n else {\n return false;\n }\n }\n\n },\n data() {\n return {\n };\n },\n template: `\n

{{ value.shortname }}\n {{ value.fullname }}
\n \n {{ startdate }} - {{ enddate }}\n \n \n

\n {{ startdate }} - {{ enddate }}\n

\n
\n `,\n });\n\n\n }\n};"],"names":["studyplanTiming","a","now","Date","getTime","timing","startdate","enddate","install","Vue","strings","studyplancard","open","noenddate","idnumber","description","completed","ItemEventBus","component","props","value","type","Object","Boolean","data","text","computed","this","pages","width_completed","progress","width_incomplete","percentage_complete","Math","round","methods","onOpenClick","e","$emit","template","layerHeights","created","$on","onHeaderHeightChange","newheight","$refs","main","style","height","mounted","self","period","resizeListener","ResizeObserver","size","getBoundingClientRect","observe","unmounted","disconnect","current","pstart","pend"],"mappings":"yPASe,CACXA,yBAAgBC,OACNC,KAAM,IAAIC,MAAOC,UACnBC,OAAS,gBACV,IAAIF,KAAKF,EAAEK,WAAWF,UAAYF,MAE7BG,OADDJ,EAAEM,SAAWL,IAAM,IAAIC,KAAKF,EAAEM,SAASH,UAC7B,OAEA,WAGVC,QAGXG,iBAAQC,SACAC,SAAU,8BAAa,CACvBC,cAAe,CACXC,KAAM,OACNC,UAAW,YACXC,SAAU,qBACVC,YAAa,wBACbC,UAAW,eAIbC,aAAe,IAAIR,IAEzBA,IAAIS,UAAU,mBAAoB,CAC9BC,MAAO,CACHC,MAAO,CACHC,KAAMC,QAEVV,KAAM,CACFS,KAAME,UAGdC,sBACW,CACHC,KAAMf,QAAQC,gBAGtBe,SAAU,CACNrB,sBACUH,KAAM,IAAIC,MAAOC,UACjBE,UAAY,IAAIH,KAAKwB,KAAKP,MAAMQ,MAAM,GAAGtB,WAAWF,UACpDG,QAAU,IAAIJ,KAAKwB,KAAKP,MAAMQ,MAAM,GAAGrB,SAASH,UAClDC,OAAS,gBACVC,UAAYJ,MAEPG,OADDsB,KAAKP,MAAMQ,MAAM,GAAGrB,SAAWL,IAAMK,QAC3B,OAEA,WAGVF,QAEXC,4BACW,2BAAYqB,KAAKP,MAAMQ,MAAM,GAAGtB,YAE3CC,0BACOoB,KAAKP,MAAMQ,MAAM,GAAGrB,SACZ,2BAAYoB,KAAKP,MAAMQ,MAAM,GAAGrB,SAGhCoB,KAAKF,KAAKZ,WAGzBgB,kCACOF,KAAKP,MAAMU,SACmB,IAAtBH,KAAKP,MAAMU,SAEX,GAGfC,mCACOJ,KAAKP,MAAMU,SACuB,KAAzB,EAAEH,KAAKP,MAAMU,UAEd,KAGfE,sCACOL,KAAKP,MAAMU,SACHG,KAAKC,MAA4B,IAAtBP,KAAKP,MAAMU,UAAkB,IAExC,OAInBK,QAAS,CACLC,qBAAYC,QACHC,MAAM,OAAOD,KAG1BE,yyGAmEJ9B,IAAIS,UAAU,6BAA8B,CACxCC,MAAO,GAGPK,sBACW,CACHgB,aAAc,KAGtBC,mBAGIxB,aAAayB,IAAI,qBAAsBf,KAAKgB,uBAEhDjB,SAAU,GAGVS,QAAS,CACLQ,8BAAqBC,WACdjB,KAAKkB,MAAMC,YACLD,MAAMC,KAAKC,MAAMC,iBAAYJ,mBAI9CL,mGAKJ9B,IAAIS,UAAU,4BAA6B,CACvCC,MAAO,CACHC,MAAO,CACHC,KAAMC,SAGd2B,uBACUC,KAAKvB,KACa,GAArBuB,KAAK9B,MAAM+B,SACVD,KAAKE,eAAiB,IAAIC,gBAAe,cAClCH,KAAKL,MAAMC,KAAK,KACTQ,KAAOJ,KAAKL,MAAMC,KAAKS,wBAC7BtC,aAAaqB,MAAM,qBAAsBgB,KAAKN,YAEnDQ,QAAQN,KAAKL,MAAMC,QAG9BW,qBACO9B,KAAKyB,qBACCA,eAAeM,cAG5BhC,SAAU,CACNpB,4BACW,2BAAYqB,KAAKP,MAAMd,YAElCC,0BACW,2BAAYoB,KAAKP,MAAMb,UAElCoD,sBACQhC,KAAKP,OAASO,KAAKP,MAAMd,WAAaqB,KAAKP,MAAMb,QAAQ,KACnDL,IAAM,IAAIC,KACVyD,OAAS,IAAIzD,KAAKwB,KAAKP,MAAMd,WAC7BuD,KAAO,IAAI1D,KAAKwB,KAAKP,MAAMb,gBACzBL,KAAO0D,QAAU1D,IAAM2D,YAGxB,IAKnBrC,sBACW,IAGXe"} \ No newline at end of file diff --git a/amd/src/treestudyplan-components.js b/amd/src/treestudyplan-components.js index 2f85efa..bee9266 100644 --- a/amd/src/treestudyplan-components.js +++ b/amd/src/treestudyplan-components.js @@ -27,7 +27,8 @@ export default { open: "open", noenddate: "noenddate", idnumber: "studyplan_idnumber", - description: "studyplan_description" + description: "studyplan_description", + completed: "completed", } }); // Create new eventbus for interaction between item components @@ -40,7 +41,7 @@ export default { }, open: { type: Boolean - } + }, }, data() { return { @@ -72,6 +73,27 @@ export default { else { return this.text.noenddate; } + }, + width_completed() { + if(this.value.progress) { + return this.value.progress * 100; + } else { + return 0; + } + }, + width_incomplete() { + if(this.value.progress) { + return (1-this.value.progress) * 100; + } else { + return 100; + } + }, + percentage_complete() { + if(this.value.progress) { + return Math.round(this.value.progress * 100) + "%"; + } else { + return "0%"; + } } }, methods: { @@ -84,14 +106,37 @@ export default { :class="'s-studyplan-card timing-' + timing" > - - {{value.name}} - - - -
-
{{ text.idnumber}}: {{ value.idnumber }}
+
+
+
+
+ + {{value.name}} + + +
+
+
+ {{ text.idnumber }}: {{ value.idnumber }} +
+
+
+
+ {{ percentage_complete}} {{ text.completed.toLowerCase() }} +
+
+
+ +