{{ text.editmode_modules_hidden}}
{{ value.shortname }}
--{{ hover.type }}--
{{ text.periodspan
}}
{{ n }}
{{
(value.span == 1)?text.period.toLowerCase():text.periods.toLowerCase()
}}
{{ text.desc }}
{{ text.rememberchoice }}
{{ text.desc }}
"6">
{{ text.hidewarning }}
`,
});
Vue.component('t-item', {
props: {
value :{
type: Object,
default(){ return null;},
},
dummy :{
type: Boolean,
default() { return false;},
},
plan: {
type: Object, // Studyplan page
default() { return null;},
},
page: {
type: Object, // Studyplan page
default() { return null;},
},
period: {
type: Object, // Studyplan page
default() { return null;},
},
maxspan: {
type: Number,
default() { return 0;},
},
},
data() {
return {
dragLine: null,
dragEventListener: null,
deleteMode: false,
condition_options: string_keys.conditions,
text: strings.item_text,
showContext: false,
lines: [],
};
},
methods: {
dragStart(event){
// Add line between start point and drag image
this.deleteMode = false;
let start = document.getElementById('studyitem-'+this.value.id);
let dragelement= document.getElementById('t-item-cdrag-'+this.value.id);
dragelement.style.position = 'fixed';
dragelement.style.left = event.position.x+'px';
dragelement.style.top = event.position.y+'px';
this.dragLine = new SimpleLine(start,dragelement,{
color: "#777",
gravity: {
start: LINE_GRAVITY,
end: LINE_GRAVITY,
},
});
// Add separate event listener to reposition mouse move
document.addEventListener("mousemove",this.onMouseMove);
},
dragEnd(){
if(this.dragLine !== null) {
this.dragLine.remove();
}
let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);
dragelement.style.removeProperty('left');
dragelement.style.removeProperty('top');
dragelement.style.removeProperty('position');
document.removeEventListener("mousemove",this.onMouseMove);
},
onMouseMove: function(event){
let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);
dragelement.style.position = 'fixed';
dragelement.style.left = event.clientX+'px';
dragelement.style.top = event.clientY+'px';
// line will follow automatically
},
onDrop(event){
let from_id = event.data.id;
let to_id = this.value.id;
this.redrawLines();
call([{
methodname: 'local_treestudyplan_connect_studyitems',
args: { 'from_id': from_id, 'to_id': to_id }
}])[0].done((response)=>{
let conn = {'id': response.id, 'from_id': response.from_id, 'to_id': response.to_id};
ItemEventBus.$emit("createdConnection",conn);
this.value.connections.in.push(conn);
}).fail(notification.exception);
},
redrawLine(conn){
const lineColor = "var(--success)";
const start = document.getElementById(`studyitem-${conn.from_id}`);
const end = document.getElementById(`studyitem-${conn.to_id}`);
// delete old line
if(this.lines[conn.to_id]){
this.lines[conn.to_id].remove();
delete this.lines[conn.to_id];
}
// create a new line if the start and finish items are visible
if(start !== null && end !== null && isVisible(start) && isVisible(end)){
this.lines[conn.to_id] = new SimpleLine( start,end,{
color: lineColor,
gravity: {
start: LINE_GRAVITY,
end: LINE_GRAVITY,
},
});
}
},
deleteLine(conn){
const self = this;
call([{
methodname: 'local_treestudyplan_disconnect_studyitems',
args: { 'from_id': conn.from_id, 'to_id': conn.to_id }
}])[0].done((response)=>{
if(response.success){
this.removeLine(conn);
// send disconnect event on message bus, so the connection on the other end can delete it too
ItemEventBus.$emit("connectionDisconnected",conn);
// Remove connection from our outgoing list
let index = self.value.connections.out.indexOf(conn);
self.value.connections.out.splice(index, 1);
}
}).fail(notification.exception);
},
highlight(conn){
if(this.lines[conn.to_id]){
this.lines[conn.to_id].setConfig({color:"var(--danger)",});
}
},
normalize(conn){
if(this.lines[conn.to_id]){
this.lines[conn.to_id].setConfig({color:"var(--success)",});
}
},
updateItem() {
call([{
methodname: 'local_treestudyplan_edit_studyitem',
args: { 'id': this.value.id,
'conditions': this.value.conditions,
'continuation_id': this.value.continuation_id,}
}])[0].fail(notification.exception);
},
doShowContext(event) {
if(this.hasContext){
this.showContext=true;
event.preventDefault();
}
},
redrawLines(){
if(this.value.connections && this.value.connections.out){
for(let i in this.value.connections.out){
let conn = this.value.connections.out[i];
this.redrawLine(conn);
}
}
},
// EVENT LISTENERS
onCreatedConnection(conn){
if(conn.from_id == this.value.id){
this.value.connections.out.push(conn);
this.redrawLine(conn);
}
},
// Listener for the signal that a connection was removed by the outgoing item
onRemovedConnection(conn){
if(this.value.connections && this.value.connections.out){
for(let i in this.value.connections.in){
let c_in = this.value.connections.in[i];
if(conn.id == c_in.id){
self.value.connections.out.splice(i, 1);
}
}
}
},
// Listener for reposition events
// When an item in the list is repositioned, all lines need to be redrawn
onRePositioned(){
if(this.value.connections && this.value.connections.out){
for(let i in this.value.connections.out){
let conn = this.value.connections.out[i];
this.redrawLine(conn);
}
}
},
// When an item is disPositioned - (temporarily) removed from the list,
// all connections need to be deleted.
onDisPositioned(re_id){
if(this.value.connections && this.value.connections.out){
for(let i in this.value.connections.out){
let conn = this.value.connections.out[i];
if(conn.to_id == re_id){
this.removeLine(conn);
}
}
}
},
// When an item is deleted
// all connections to/from that item need to be cleaned up
onItemDeleted(item_id){
const self = this;
if(this.value.connections && this.value.connections.out){
for(const i in this.value.connections.out){
let conn = this.value.connections.out[i];
if(conn.to_id == item_id){
self.removeLine(conn);
self.value.connections.out.splice(i, 1);
}
}
}
if(this.value.connections && this.value.connections.in){
for(const i in this.value.connections.in){
let conn = this.value.connections.in[i];
if(conn.from_id == item_id){
self.value.connections.out.splice(i, 1);
}
}
}
},
onRedrawLines(){
this.redrawLines();
},
removeLine(conn){
if(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 ['junction','finish'].includes(this.value.type);
}
},
created(){
// Add event listeners on the message bus
// But only if not in "dummy" mode - mode which is used for droplist placeholders
// Since an item is "fully made" with all references, not specifying dummy mode really messes things up
if(!this.dummy){
// Listener for the signal that a new connection was made and needs to be drawn
// Sent by the incoming item - By convention, outgoing items are responsible for drawing the lines
ItemEventBus.$on('createdConnection', this.onCreatedConnection);
// Listener for the signal that a connection was removed by the outgoing item
ItemEventBus.$on('removedConnection', this.onRemovedConnection);
// Listener for reposition events
// When an item in the list is repositioned, all lines need to be redrawn
ItemEventBus.$on('rePositioned', this.onRePositioned);
// When an item is disPositioned - (temporarily) removed from the list,
// all connections need to be deleted.
ItemEventBus.$on('disPositioned', this.onDisPositioned);
// When an item is deleted
// all connections to/from that item need to be cleaned up
ItemEventBus.$on('itemDeleted', this.onItemDeleted);
ItemEventBus.$on('redrawLines', this.onRedrawLines);
}
},
mounted(){
// Initialize connection lines when mounting
// But only if not in "dummy" mode - mode which is used for droplist placeholders
// Since an item is "fully made" with all references, not specifying dummy mode really messes things up
if(!this.dummy)
{
this.redrawLines();
setTimeout(()=>{
ItemEventBus.$emit("rePositioned",this.value.id);
},10);
}
},
beforeDestroy(){
if(!this.dummy) {
for(let i in this.value.connections.out){
let conn = this.value.connections.out[i];
this.removeLine(conn);
}
ItemEventBus.$emit("disPositioned",this.value.id);
// Remove event listeners
ItemEventBus.$off('createdConnection', this.onCreatedConnection);
ItemEventBus.$off('removedConnection', this.onRemovedConnection);
ItemEventBus.$off('rePositioned', this.onRePositioned);
ItemEventBus.$off('disPositioned', this.onDisPositioned);
ItemEventBus.$off('itemDeleted', this.onItemDeleted);
ItemEventBus.$off('redrawLines', this.onRedrawLines);
}
},
beforeUpdate(){
},
updated(){
if(!this.dummy) {
this.redrawLines();
}
},
template: `
`,
});
Vue.component('t-item-invalid', {
props: {
'value' :{
type: Object,
default: function(){ return null;},
},
},
data() {
return {
text: strings.invalid,
};
},
methods: {
},
template: `
{{ text.question }}
{{ text.course }}
{{ value.course.fullname }}
{{ value.course.shortname }}
{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}
{{ text.duration }}
{{ format_duration(datechanger.coursespan)}}
{{ text.period }}
{{ period.fullname }} - {{ endperiod.fullname }}
{{ period.shortname }} - {{ endperiod.shortname }}
{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}
{{ text.duration }}
{{ format_duration(datechanger.periodspan)}}
{{ text.warning }}
{{ text.course }}
{{ value.course.fullname }}
{{ value.course.shortname }}
{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}
{{ text.duration }}
{{ format_duration(datechanger.coursespan)}}
{{ text.period }}
{{ period.fullname }} - {{ endperiod.fullname }}
{{ period.shortname }} - {{ endperiod.shortname }}
{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}
{{ text.duration }}
{{ format_duration(datechanger.periodspan)}}
{{ value.course.fullname }}
{{ value.course.context.path.join(" / ")}} / {{value.course.shortname}}
{{text['coursetiming_'+value.course.timing]}}
{{ startdate }} - {{ enddate }}
{{ startdate }} - {{ enddate }}
- {{text.grade_include}}{{text.grade_require}}
-
{{g.name}}
| {{ text.aggregation_overall_all}}{{ text.aggregation_overall_any}} | |
| {{text.completion_not_configured}}!
{{text.configure_completion}} |
|
| {{ text.aggregation_all}}{{ text.aggregation_any}} {{cgroup.title}} | |
|---|---|
| {{ci.details.requirement}} | |
-
{{ course.shortname }} - {{ course.fullname }}