107 lines
3.6 KiB
JavaScript
107 lines
3.6 KiB
JavaScript
|
/*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>
|
||
|
`,
|
||
|
});
|
||
|
}
|
||
|
};
|