3 lines
7.9 KiB
JavaScript
3 lines
7.9 KiB
JavaScript
define("local_treestudyplan/treestudyplan-components",["exports","./util/string-helper","./util/date-helper"],(function(_exports,_stringHelper,_dateHelper){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;var _default={studyplanTiming(plan){const now=(new Date).getTime(),dates=(0,_dateHelper.studyplanDates)(plan);return dates.start<now?dates.end&&now>dates.end?"past":"present":"future"},install(Vue){let strings=(0,_stringHelper.load_strings)({studyplancard:{open:"open",noenddate:"noenddate",idnumber:"studyplan_idnumber",description:"studyplan_description",completed:"completed",details:"studyplan_details"},details:{details:"studyplan_details"}});const ItemEventBus=new Vue;Vue.component("s-studyplan-card",{props:{value:{type:Object},open:{type:Boolean}},data:()=>({text:strings.studyplancard}),computed:{timing(){const now=(new Date).getTime(),startdate=new Date(this.value.pages[0].startdate).getTime(),enddate=new Date(this.value.pages[0].enddate).getTime();let timing="future";return startdate<now&&(timing=this.value.pages[0].enddate&&now>enddate?"past":"present"),timing},dates(){const dates=(0,_dateHelper.studyplanDates)(this.value);return{start:(0,_dateHelper.format_date)(dates.start),end:dates.end?(0,_dateHelper.format_date)(dates.end):this.text.noenddate}},width_completed(){return this.value.progress?100*this.value.progress:0},width_incomplete(){return this.value.progress?100*(1-this.value.progress):100},percentage_complete(){return this.value.progress?Math.round(100*this.value.progress)+"%":"0%"}},methods:{onOpenClick(e){this.$emit("open",e)}},template:"\n <b-card\n :class=\"'s-studyplan-card timing-' + timing\"\n >\n <template #header></template>\n \n <div class='s-studyplan-card-content'>\n <div class='s-studyplan-card-icon'><img :src='value.icon'></div>\n <div class='s-studyplan-card-info'>\n <div class='s-studyplan-card-titlebar'>\n <b-card-title>\n <a v-if='open' href='#' @click.prevent='onOpenClick($event)'>{{value.name}}</a>\n <template v-else>{{value.name}}</template>\n </b-card-title>\n <div class='s-studyplan-card-titleslot'><slot name='title'></slot></div>\n </div> \n <div class='s-studyplan-card-idnumber' v-if='value.idnumber'>\n {{ text.idnumber }}: {{ value.idnumber }}\n </div>\n <div class='s-studyplan-card-progress' v-if='value.progress !== undefined && value.progress !== null'>\n <div class=\"s-studyplan-card-progressbar\"\n ><span v-if=\"width_completed > 0\"\n :style=\"{width: width_completed+'%'}\"\n class='s-studyplan-card-progress-segment s-studyplan-card-progress-completed'\n ></span\n ><span :style=\"{width: width_incomplete+'%'}\"\n class='s-studyplan-card-progress-segment s-studyplan-card-progress-incomplete'\n ></span\n ></div>\n <div class=\"s-studyplan-card-progresstext\">\n {{ percentage_complete}} {{ text.completed.toLowerCase() }} \n </div>\n </div>\n </div>\n \n </div>\n <slot></slot>\n <template #footer>\n <span :class=\"'t-timing-'+timing\" v-html=\"dates.start + ' - '+ dates.end\"></span>\n <span class=\"s-studyplan-card-buttons\">\n <slot name='footer'></slot>\n <s-studyplan-details \n v-model=\"value\" \n v-if=\"value.description\"\n ><i class='fa fa-info-circle'></i></s-studyplan-details>\n <b-button style=\"float:right;\" v-if='open' variant='primary'\n @click.prevent='onOpenClick($event)'>{{ text.open }}</b-button>\n </span>\n </template>\n </b-card>\n "}),Vue.component("s-studyline-header-heading",{props:{identifier:{type:Number,default:()=>0}},data:()=>({layerHeights:{}}),created(){ItemEventBus.$on("headerHeightChange",this.onHeaderHeightChange)},computed:{},methods:{onHeaderHeightChange(newheight,identifier){this.identifier==identifier&&this.$refs.main&&(this.$refs.main.style.height=`${newheight}px`)}},template:'\n <div class="s-studyline-header-heading" ref="main" :data-id="identifier"></div>\n '}),Vue.component("s-studyline-header-period",{props:{value:{type:Object},identifier:{type:Number,default:()=>0}},mounted(){const self=this;1==self.value.period&&(self.resizeListener=new ResizeObserver((()=>{if(self.$refs.main){const size=self.$refs.main.getBoundingClientRect();ItemEventBus.$emit("headerHeightChange",size.height,self.identifier)}})).observe(self.$refs.main))},unmounted(){this.resizeListener&&this.resizeListener.disconnect()},computed:{startdate(){return(0,_dateHelper.format_date)(this.value.startdate)},enddate(){return(0,_dateHelper.format_date)(this.value.enddate)},current(){if(this.value&&this.value.startdate&&this.value.enddate){const now=new Date,pstart=new Date(this.value.startdate),pend=new Date(this.value.enddate);return now>=pstart&&now<pend}return!1}},data:()=>({}),template:'\n <div :class="\'s-studyline-header-period \' + (current?\'current \':\' \')" ref="main" :data-id="identifier"\n ><p><abbr :id="\'s-period-\'+value.id" :title="value.fullname">{{ value.shortname }}</abbr>\n <b-tooltip\n :target="\'s-period-\'+value.id" triggers="hover"\n >{{ value.fullname }}<br>\n <span class="s-studyline-header-period-datespan">\n <span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span>\n </span>\n </b-tooltip>\n <slot></slot\n ><p class="s-studyline-header-period-datespan small">\n <span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span>\n </p>\n </div>\n '}),Vue.component("s-studyplan-details",{props:{value:{type:Object},variant:{type:String,default:()=>"info"},pill:{type:Boolean,default:()=>!1},size:{type:String,default:()=>""}},data:()=>({text:strings.details}),template:'\n <span>\n <b-button \n :size="size"\n :pill="pill"\n :variant="variant" \n v-b-modal="\'modal-description-\'+value.id"\n ><slot><i class=\'fa fa-info-circle\'></i>\n {{ text.details}}</slot>\n </b-button>\n <b-modal\n :title="value.name"\n scrollable\n centered\n ok-only\n content-class="s-studyplan-details"\n :id="\'modal-description-\'+value.id"\n >\n <b-container>\n <b-row>\n <b-col cols="4"><img :src=\'value.icon\'></b-col>\n <b-col cols="8" class="pl-1">\n <span v-html="value.description"></span>\n </b-col>\n </b-row>\n </b-container>\n </b-modal>\n </span>\n '})}};return _exports.default=_default,_exports.default}));
|
|
|
|
//# sourceMappingURL=treestudyplan-components.min.js.map
|