moodle_local_treestudyplan/amd/src/treestudyplan-components.js

107 lines
3.6 KiB
JavaScript
Raw Normal View History

/*eslint no-var: "error"*/
/*eslint no-console: "off"*/
/*eslint-disable no-trailing-spaces */
/*eslint-env es6*/
// Put this file in path/to/plugin/amd/src
import {load_strings} from './string-helper';
export default {
studyplanTiming(a) {
const now = new Date().getTime();
let timing = 'future';
if(new Date(a.startdate).getTime() < now){
if(a.enddate && now > new Date(a.enddate).getTime()) {
timing = 'past';
} else {
timing = 'present';
}
}
return timing;
},
install(Vue/*,options*/){
let strings = load_strings({
studyplancard: {
open: "open",
noenddate: "noenddate",
}
});
Vue.component('s-studyplan-card', {
props: {
value: {
type: Object,
},
open: {
type: Boolean
}
},
data() {
return {
text: strings.studyplancard
};
},
computed: {
timing(){
const now = new Date().getTime();
const startdate = new Date(this.value.startdate).getTime();
const enddate = new Date(this.value.enddate).getTime();
let timing = 'future';
if(startdate < now){
if(this.value.enddate && now > enddate) {
timing = 'past';
} else {
timing = 'present';
}
}
return timing;
},
startdate(){
const opts = {
year: 'numeric', month: 'short', day: 'numeric'
};
return new Date(this.value.startdate).toLocaleDateString(document.documentElement.lang,opts);
},
enddate(){
if(this.value.enddate){
const opts = {
year: 'numeric', month: 'short', day: 'numeric'
};
return new Date(this.value.enddate).toLocaleDateString(document.documentElement.lang,opts);
}
else {
return this.text.noenddate;
}
}
},
methods: {
onOpenClick(e) {
this.$emit('open',e);
}
},
template: `
<b-card
:class="'s-studyplan-card timing-' + timing"
>
<template #header></template>
<b-card-title>
<a v-if='open' href='#' @click.prevent='onOpenClick($event)'>{{value.name}}</a>
<template v-else>{{value.name}}</template>
<slot name='title'></slot>
</b-card-title>
{{ value.description }}
<slot></slot>
<template #footer>
<span :class="'t-timing-'+timing" v-html="startdate + ' - '+ enddate"></span>
<span class="s-studyplan-card-buttons">
<slot name='footer'></slot>
<b-button style="float:right;" v-if='open' variant='primary'
@click.prevent='onOpenClick($event)'>{{ text.open }}</b-button>
</span>
</template>
</b-card>
`,
});
}
};