This commit is contained in:
PMKuipers 2024-02-20 20:40:18 +01:00
parent ed353540f0
commit f8b18d4d6e
8 changed files with 273 additions and 308 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -13,16 +13,81 @@ import Debugger from './util/debugger';
import Config from 'core/config'; import Config from 'core/config';
import TSComponents from './treestudyplan-components'; import TSComponents from './treestudyplan-components';
const debug = new Debugger("treestudyplan-viewer");
// Make π available as a constant // Make π available as a constant
const π = Math.PI; const π = Math.PI;
// Gravity value for arrow lines - determines how much a line is pulled in the direction of the start/end before changing direction // Gravity value for arrow lines - determines how much a line is pulled in the direction of the start/end before changing direction
const LINE_GRAVITY = 1.3; const LINE_GRAVITY = 1.3;
/**
* Retrieve condition headers
* @param {Object} item
*/
function conditionHeaders(item) {
const course = item.course;
const list = [];
if (course.completion) {
for (const cmp of course.competencies) {
list.push({
name: cmp.title,
});
}
} else if(course.completion) {
for (const cnd of course.completion.conditions) {
for (const itm of cnd.items) {
list.push({
name: itm.title,
});
}
}
} else if(course.grades) {
for(const g of course.grades) {
if (g.selected) {
debug.info("...included");
list.push({
name: g.name,
});
}
}
}
debug.info("Returning list",list);
return list;
}
/**
* Retrieve conditions
* @param {Object} item
*/
function conditions(item) {
const course = item.course;
const list = [];
if (course.completion) {
for (const cmp of course.competencies) {
list.push(cmp);
}
} else if(course.completion) {
for (const cnd of course.completion.conditions) {
for (const itm of cnd.items) {
list.push(itm);
}
}
} else if(course.grades) {
for(const g of course.grades) {
if (g.selected) {
list.push(g);
}
}
}
return list;
}
export default { export default {
install(Vue/*,options*/){ install(Vue/*,options*/){
Vue.use(TSComponents); Vue.use(TSComponents);
let debug = new Debugger("treestudyplan-viewer");
let strings = load_strings({ let strings = load_strings({
report: { report: {
@ -83,11 +148,6 @@ export default {
created() { created() {
this.loadStudents(); this.loadStudents();
}, },
computed: {
sortedstudents(){
return this.students;
}
},
watch:{ watch:{
structure: { structure: {
immediate: true, immediate: true,
@ -139,6 +199,37 @@ export default {
} }
} }
}, },
computed: {
sortedstudents(){
return this.students;
},
resultColCount(){
let count = 0;
for (const period of this.structure.periods) {
const pid = period.period.id;
if (!this.expansioninfo.periods[pid].expanded) {
// This period is not expanded. Just one
count += 1;
} else {
for (const line of period.lines) {
const lid = line.line.id;
if (!this.expansioninfo.lines[pid][lid]) {
count +=1;
} else {
for (const item of line.items) {
if (!this.expansioninfo.items[item.id]) {
count += 1;
} else {
count += 1 + conditions(item).length;
}
}
}
}
}
}
return count;
}
},
methods: { methods: {
loadStudents() { loadStudents() {
const self = this; const self = this;
@ -195,32 +286,30 @@ export default {
} else { } else {
this.expansioninfo[parm][id].expanded = val; this.expansioninfo[parm][id].expanded = val;
} }
},
}
}, },
template: ` template: `
<div> <table class='q-studyplanreport'>
<q-header <q-header
:sorting='sorting' :sorting='sorting'
:structure='structure' :structure='structure'
:expansion='expansioninfo' :expansion='expansioninfo'
@expansion='expansionChanged' @expansion='expansionChanged'
></q-header> ></q-header>
<div class='q-scrolly'> <template v-for="group in sortedstudents">
<template v-for="group in sortedstudents"> <q-groupheading v-if="group.users" :label="group.label" :groupinfo="groupinfo[group.label]"></q-groupheading>
<q-groupheading v-if="group.users" :label="group.label" :groupinfo="groupinfo[group.label]"></q-groupheading> <template v-if='group.users && groupinfo[group.label].expand'>
<template v-if='group.users && groupinfo[group.label].expand'> <q-studentresults v-for="student in group.users"
<q-studentresults v-for="student in group.users" :student='student'
:student='student' :structure='structure'
:structure='structure' :results='studentresults[student.id].results'
:results='studentresults[student.id].results' :loading='studentresults[student.id].loading'
:loading='studentresults[student.id].loading' :expansion='expansioninfo'
:expansion='expansioninfo' ></q-studentresults>
></q-studentresults>
</template>
</template> </template>
</div> </template>
</div> </table>
`, `,
}); });
@ -245,38 +334,12 @@ export default {
}, },
methods: { methods: {
conditions(item) { conditions(item) {
const course = item.course; return conditionHeaders(item);
const list = [];
debug.info("Determining conditions", course);
if (course.completion) {
debug.info("Has Competencies");
for (const cmp of course.competencies) {
list.push({
name: cmp.title,
});
}
} else if(course.completion) {
debug.info("Has Core completion");
for (const cnd of course.completion.conditions) {
for (const itm of cnd.items) {
list.push({
name: itm.title,
});
}
}
} else if(course.grades) {
debug.info("Has selected grades");
for (const g of course.grades) {
list.push({
name: g.name,
});
}
}
return list;
}, },
colspanPeriod(period) { colspanPeriod(period) {
if (this.expansion.periods[period.id].expanded) { const pid = period.period.id;
debug.info("Checking period expansion",period,this.expansion.periods);
if (this.expansion.periods[pid].expanded) {
let sum = 0; let sum = 0;
for (const l of period.lines) { for (const l of period.lines) {
sum += this.colspanLine(period,l); sum += this.colspanLine(period,l);
@ -287,7 +350,10 @@ export default {
} }
}, },
colspanLine(period,line) { colspanLine(period,line) {
if (this.expansion.lines[period.id][line.id].expanded) { const pid = period.period.id;
const lid = line.line.id;
if (this.expansion.lines[pid][lid].expanded) {
let sum = 0; let sum = 0;
for (const i of line.items) { for (const i of line.items) {
sum += this.colspanItem(i); sum += this.colspanItem(i);
@ -319,39 +385,39 @@ export default {
template: ` template: `
<thead class='q-header'> <thead class='q-header'>
<tr> <!-- period heading --> <tr> <!-- period heading -->
<th rowspan='3' class='q-studentname'><span>{{text.students}}</span></th> <th rowspan='4' class='q-studentname'><span>{{text.students}}</span></th>
<th v-for="p in structure.periods" <th v-for="p in structure.periods"
class='q-period-heading' class='q-period-heading'
:colspan='colspanPeriod(p)' :colspan='colspanPeriod(p)'
:rowspan='(expansion.periods[p.period.id].expanded)?1:3' :rowspan='(expansion.periods[p.period.id].expanded)?1:4'
><a v-if="expansion.periods[p.period.id].expanded" ><a v-if="expansion.periods[p.period.id].expanded"
href='#' @click.prevent="$emit('expansion','periods',p.period.id,false);" href='#' @click.prevent="$emit('expansion','periods',p.period.id,false);"
><i class='fa fa-minus-square'></i></a ><i class='fa fa-minus-square'></i></a
><a v-else ><a v-else
href='#' @click.prevent="$emit('expansion','periods',p.period.id,true);" href='#' @click.prevent="$emit('expansion','periods',p.period.id,true);"
><i class='fa fa-plus-square'></i></a ><i class='fa fa-plus-square'></i></a
>{{ p.period.fullname}}< >&nbsp;{{ p.period.fullname}}
/th> </th>
</tr> </tr>
<tr> <!-- line heading --> <tr> <!-- line heading -->
<template v-for="p in structure.periods"> <template v-for="p in structure.periods">
<template v-if="expansion.periods[p.period.id].expanded"> <template v-if="expansion.periods[p.period.id].expanded">
<th v-for='l in p.lines" <th v-for="l in p.lines"
class='q-line-heading' class='q-line-heading'
:colspan="colspanLine(p,l)" :colspan="colspanLine(p,l)"
><span v-html="l.line.shortname"></span ><span v-html="l.line.shortname"></span
><th> ></th>
</template> </template>
</template> </template>
</tr> </tr>
<tr> <!-- item heading --> <tr> <!-- item heading -->
<template v-for="p in structure.periods"> <template v-for="p in structure.periods">
<template v-if="expansion.periods[p.period.id].expanded"> <template v-if="expansion.periods[p.period.id].expanded">
<template v-for='l in p.lines"> <template v-for="l in p.lines">
<template v-if="expansion.lines[p.period.id][l.line.id].expanded"> <template v-if="expansion.lines[p.period.id][l.line.id].expanded">
<th v-for="item in l.items" <th v-for="item in l.items"
class='q-item-heading' :class="'q-item-heading ' + ((expansion.items[item.id].expanded)?'expanded':'collapsed')"
:colspan="colspanitem(item)" :colspan="colspanItem(item)"
:rowspan='(expansion.items[item.id].expanded)?1:2' :rowspan='(expansion.items[item.id].expanded)?1:2'
><a v-if="expansion.items[item.id].expanded" ><a v-if="expansion.items[item.id].expanded"
href='#' @click.prevent="$emit('expansion','items',item.id,false);" href='#' @click.prevent="$emit('expansion','items',item.id,false);"
@ -359,8 +425,8 @@ export default {
><a v-else ><a v-else
href='#' @click.prevent="$emit('expansion','items',item.id,true);" href='#' @click.prevent="$emit('expansion','items',item.id,true);"
><i class='fa fa-plus-square'></i></a ><i class='fa fa-plus-square'></i></a
><span v-html="item.course.displayname"></span>< >&nbsp;<span v-html="item.course.displayname"></span
/th> ></th>
</template> </template>
</template> </template>
</template> </template>
@ -369,13 +435,12 @@ export default {
<tr> <!-- condition heading --> <tr> <!-- condition heading -->
<template v-for="p in structure.periods"> <template v-for="p in structure.periods">
<template v-if="expansion.periods[p.period.id].expanded"> <template v-if="expansion.periods[p.period.id].expanded">
<template v-for='l in p.lines"> <template v-for="l in p.lines">
<template v-if="expansion.lines[p.period.id][l.line.id].expanded"> <template v-if="expansion.lines[p.period.id][l.line.id].expanded">
<template v-for="item in l.items"> <template v-for="item in l.items">
<th class='q-condition-heading overall
>{{ text.overall }}<
/th>
<template v-if="expansion.items[item.id].expanded"> <template v-if="expansion.items[item.id].expanded">
<th class='q-condition-heading overall'
><span>{{ text.overall }}</span></th>
<th v-for="c in conditions(item)" <th v-for="c in conditions(item)"
class='q-condition-heading' class='q-condition-heading'
><span v-html="c.name"></span ><span v-html="c.name"></span
@ -407,9 +472,9 @@ export default {
methods: { methods: {
}, },
template: ` template: `
<div class='q-groupheading'> <tr class='q-groupheading'>
</div> </tr>
`, `,
}); });
@ -453,7 +518,10 @@ export default {
list.push(newitm); list.push(newitm);
} }
return list; return list;
} },
conditions(item) {
return conditions(item);
},
}, },
/* https://css-tricks.com/position-sticky-and-table-headers/ */ /* https://css-tricks.com/position-sticky-and-table-headers/ */
/* TODO: Rework below to make use of tables. Use <Thead> as main element. Then create multiple <tr> as needed for the headers. /* TODO: Rework below to make use of tables. Use <Thead> as main element. Then create multiple <tr> as needed for the headers.
@ -461,19 +529,19 @@ export default {
*/ */
template: ` template: `
<tr class='q-student-results'> <tr class='q-student-results'>
<th class='q-studentname'><span>{{student.firstname}} {{student.lastname}}</span></th> <td class='q-studentname'><span>{{student.firstname}} {{student.lastname}}</span></td>
<template v-for="p in structure.periods"> <template v-for="p in structure.periods">
<template v-if="expansion.periods[p.period.id].expanded"> <template v-if="expansion.periods[p.period.id].expanded">
<template v-for='l in p.lines"> <template v-for="l in p.lines">
<template v-if="expansion.lines[p.period.id][l.line.id].expanded"> <template v-if="expansion.lines[p.period.id][l.line.id].expanded">
<template v-for="item in useritems(l)"> <template v-for="item in useritems(l)">
<td class='q-result overall <td class='q-result overall'
><q-courseresult ><q-courseresult
:item="item" :item="item"
:student="student" :student="student"
:loading="loading" :loading="loading"
></q-courseresult>< ></q-courseresult
/td> ></td>
<template v-if="expansion.items[item.id].expanded"> <template v-if="expansion.items[item.id].expanded">
<td v-for="(c,idx) in conditions(item)" <td v-for="(c,idx) in conditions(item)"
class='q-result' class='q-result'
@ -482,8 +550,8 @@ export default {
:conditionidx="idx" :conditionidx="idx"
:student="student" :student="student"
:loading="loading" :loading="loading"
></q-conditionresult>< ></q-conditionresult
/td> ></td>
</template> </template>
</template> </template>
</template> </template>
@ -546,22 +614,22 @@ export default {
methods: { methods: {
}, },
template: ` template: `
<div class='q-courseresult'> <span class='q-courseresult'>
<template v-if="loading"> <template v-if="loading">
<div class="spinner-border spinner-border-sm text-info" role="status"></div> <div class="spinner-border spinner-border-sm text-info" role="status"></div>
</template> </template>
<template v-else-if='!item.course.enrolled'> <template v-else-if='!item.course.enrolled'>
<i v-b-popover.top <i v-b-popover.top
class="r-course-result fa fa-exclamation-triangle t-not-enrolled-alert" class="fa fa-exclamation-triangle t-not-enrolled-alert"
:title="text.student_not_tracked"></i> :title="text.student_not_tracked"></i>
</template> </template>
<template v-else> <template v-else>
<i v-b-popover.top <i v-b-popover.top
:class="'r-course-result fa fa-'+completion_icon+ :class="'fa fa-'+completion_icon+
' r-completion-'+item.completion" ' r-completion-'+item.completion"
:title="text['completion_'+item.completion]"></i> :title="text['completion_'+item.completion]"></i>
</template> </template>
</div> </span>
`, `,
}); });
@ -588,24 +656,7 @@ export default {
}, },
computed: { computed: {
conditions() { conditions() {
const course = this.item.course; return conditions(this.item);
const list = [];
debug.info("Determining conditions", course);
if (course.completion) {
debug.info("Has Competencies");
return course.competencies;
} else if(course.completion) {
debug.info("Has Core completion");
const list = [];
for (const cnd of course.completion.conditions) {
for (const itm of cnd.items) {
list.push(itm);
}
}
return list;
} else if(course.grades) {
return course.grades;
}
}, },
condition() { condition() {
if (this.conditionidx >= 0 && this.conditionidx < this.conditions.length) { if (this.conditionidx >= 0 && this.conditionidx < this.conditions.length) {
@ -645,21 +696,22 @@ export default {
}, },
// TODO: Show actual grades when relevant at all (don;t forget the grade point completion requirement) // TODO: Show actual grades when relevant at all (don;t forget the grade point completion requirement)
template: ` template: `
<div class='q-conditionresult'> <span class='q-conditionresult'>
<template v-if="loading"> <template v-if="loading">
<div class="spinner-border spinner-border-sm text-info" role="status"></div> <div class="spinner-border spinner-border-sm text-info" role="status"></div>
</template> </template>
<template v-else-if='!item.course.enrolled'> <template v-else-if='!item.course.enrolled'>
<i v-b-popover.top <i v-b-popover.top
class="r-course-result fa fa-exclamation-triangle t-not-enrolled-alert" class="fa fa-exclamation-triangle t-not-enrolled-alert"
:title="text.student_not_tracked"></i> :title="text.student_not_tracked"></i>
</template> </template>
<template v-else>
<i v-b-popover.top <i v-b-popover.top
:class="'r-course-result fa fa-'+completion_icon(item.completion)+ :class="'fa fa-'+completion_icon(item.completion)+
' r-completion-'+item.completion" ' r-completion-'+item.completion"
:title="text['completion_'+item.completion]"></i> :title="text['completion_'+item.completion]"></i>
</template> </template>
</div> </span>
`, `,
}); });

View File

@ -1578,12 +1578,12 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan { .path-local-treestudyplan {
font: inherit; font: inherit;
} }
.path-local-treestudyplan table.studyplanreport {
table-layout: fixed;
}
.path-local-treestudyplan .q-header, .path-local-treestudyplan .q-header,
.path-local-treestudyplan .q-student-results { .path-local-treestudyplan .q-student-results {
background-color: white; background-color: white;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
} }
.path-local-treestudyplan .q-header .q-period-heading, .path-local-treestudyplan .q-header .q-period-heading,
.path-local-treestudyplan .q-header .q-line-heading, .path-local-treestudyplan .q-header .q-line-heading,
@ -1601,26 +1601,6 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan .q-student-results .q-line-results, .path-local-treestudyplan .q-student-results .q-line-results,
.path-local-treestudyplan .q-student-results .q-item-results, .path-local-treestudyplan .q-student-results .q-item-results,
.path-local-treestudyplan .q-student-results .q-condition-results { .path-local-treestudyplan .q-student-results .q-condition-results {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.path-local-treestudyplan .q-header .q-period-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-line-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-item-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-condition-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-period-results:not(:last-child),
.path-local-treestudyplan .q-header .q-line-results:not(:last-child),
.path-local-treestudyplan .q-header .q-item-results:not(:last-child),
.path-local-treestudyplan .q-header .q-condition-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-period-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-line-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-item-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-condition-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-period-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-line-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-item-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-condition-results:not(:last-child) {
border-right: 1px solid gray; border-right: 1px solid gray;
} }
.path-local-treestudyplan .q-header .q-period-heading .q-header-title, .path-local-treestudyplan .q-header .q-period-heading .q-header-title,
@ -1641,93 +1621,69 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan .q-student-results .q-condition-results .q-header-title { .path-local-treestudyplan .q-student-results .q-condition-results .q-header-title {
padding: 0.5rem; padding: 0.5rem;
} }
.path-local-treestudyplan .q-header .q-period-heading .q-header-details,
.path-local-treestudyplan .q-header .q-period-heading .q-result-details,
.path-local-treestudyplan .q-header .q-line-heading .q-header-details,
.path-local-treestudyplan .q-header .q-line-heading .q-result-details,
.path-local-treestudyplan .q-header .q-item-heading .q-header-details,
.path-local-treestudyplan .q-header .q-item-heading .q-result-details,
.path-local-treestudyplan .q-header .q-condition-heading .q-header-details,
.path-local-treestudyplan .q-header .q-condition-heading .q-result-details,
.path-local-treestudyplan .q-header .q-period-results .q-header-details,
.path-local-treestudyplan .q-header .q-period-results .q-result-details,
.path-local-treestudyplan .q-header .q-line-results .q-header-details,
.path-local-treestudyplan .q-header .q-line-results .q-result-details,
.path-local-treestudyplan .q-header .q-item-results .q-header-details,
.path-local-treestudyplan .q-header .q-item-results .q-result-details,
.path-local-treestudyplan .q-header .q-condition-results .q-header-details,
.path-local-treestudyplan .q-header .q-condition-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-period-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-period-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-line-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-line-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-item-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-item-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-condition-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-condition-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-period-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-period-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-line-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-line-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-item-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-item-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-condition-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-condition-results .q-result-details {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
border-top: 1px solid green;
}
.path-local-treestudyplan .q-header .q-result, .path-local-treestudyplan .q-header .q-result,
.path-local-treestudyplan .q-student-results .q-result { .path-local-treestudyplan .q-student-results .q-result {
height: 2rem; height: 2rem;
display: flex;
justify-content: center;
padding-top: 0.25rem; padding-top: 0.25rem;
} }
.path-local-treestudyplan .q-header, .path-local-treestudyplan .q-header,
.path-local-treestudyplan .q-student-results { .path-local-treestudyplan .q-student-results {
/*.q-line-heading > .q-header-title,*/ /*.q-line-heading > .q-header-title,*/
} }
.path-local-treestudyplan .q-header .q-item-heading > .q-header-title, .path-local-treestudyplan .q-header .q-item-heading.collapsed,
.path-local-treestudyplan .q-header .q-condition-heading, .path-local-treestudyplan .q-header .q-condition-heading,
.path-local-treestudyplan .q-student-results .q-item-heading > .q-header-title, .path-local-treestudyplan .q-student-results .q-item-heading.collapsed,
.path-local-treestudyplan .q-student-results .q-condition-heading { .path-local-treestudyplan .q-student-results .q-condition-heading {
width: 2rem; width: 2rem;
writing-mode: vertical-lr; writing-mode: vertical-lr;
text-orientation: sideways; text-orientation: sideways;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.path-local-treestudyplan .q-header .q-line-heading > .q-header-title, .path-local-treestudyplan .q-header .q-period-heading,
.path-local-treestudyplan .q-student-results .q-line-heading > .q-header-title { .path-local-treestudyplan .q-header .q-line-heading,
.path-local-treestudyplan .q-header .q-item-heading,
.path-local-treestudyplan .q-header .q-condition-heading,
.path-local-treestudyplan .q-student-results .q-period-heading,
.path-local-treestudyplan .q-student-results .q-line-heading,
.path-local-treestudyplan .q-student-results .q-item-heading,
.path-local-treestudyplan .q-student-results .q-condition-heading {
vertical-align: top;
}
.path-local-treestudyplan .q-header .q-line-heading,
.path-local-treestudyplan .q-student-results .q-line-heading {
height: fit-content; height: fit-content;
} }
.path-local-treestudyplan .q-header .q-item-heading > .q-item-heading, .path-local-treestudyplan .q-header .q-item-heading,
.path-local-treestudyplan .q-student-results .q-item-heading > .q-item-heading { .path-local-treestudyplan .q-student-results .q-item-heading {
height: 6rem; height: 6rem;
} }
.path-local-treestudyplan .q-header .q-condition-heading, .path-local-treestudyplan .q-header .q-condition-heading,
.path-local-treestudyplan .q-student-results .q-condition-heading { .path-local-treestudyplan .q-student-results .q-condition-heading {
text-align: center;
}
.path-local-treestudyplan .q-header .q-condition-heading span,
.path-local-treestudyplan .q-student-results .q-condition-heading span {
height: 8rem; height: 8rem;
white-space: nowrap;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
.path-local-treestudyplan .q-result {
text-align: center;
vertical-align: middle;
border-right: 1px solid gray;
} }
.path-local-treestudyplan .q-studentname { .path-local-treestudyplan .q-studentname {
padding: 0.5em; padding: 0.5em;
border-right: 2px solid grey; border-right: 2px solid grey;
width: 20rem; width: 20rem;
} }
.path-local-treestudyplan .q-studentname.heading { .path-local-treestudyplan .q-courseresult i.fa,
font-weight: bold; .path-local-treestudyplan .q-conditionresult i.fa {
vertical-align: bottom; font-size: 21px;
display: flex; vertical-align: middle;
}
.path-local-treestudyplan .q-studentname.heading span {
align-self: flex-end;
}
.path-local-treestudyplan .q-scrolly {
overflow-y: auto;
max-height: 300rem;
} }
.path-local-treestudyplan .b-modal-justify-footer-between .modal-footer, .path-local-treestudyplan .b-modal-justify-footer-between .modal-footer,

View File

@ -459,4 +459,7 @@ $string["setting_premium_key"] = 'Activation key';
$string["settingdesc_premium_key"] = 'Paste the premium key you received in the box above.'; $string["settingdesc_premium_key"] = 'Paste the premium key you received in the box above.';
$string["premiumfeature:morestudyplans"] = 'Creating more than 5 studyplans in a single category is a premium feature.'; $string["premiumfeature:morestudyplans"] = 'Creating more than 5 studyplans in a single category is a premium feature.';
$string["premiumfeature:morecategories"] = 'Creating studyplans in more than 20 categories is a premium feature.'; $string["premiumfeature:morecategories"] = 'Creating studyplans in more than 20 categories is a premium feature.';
$string["overall"] = 'Course';
$string["studyplan_report"] = 'Studyplan result overview';

View File

@ -459,4 +459,6 @@ $string["setting_premium_key"] = 'Activation key';
$string["settingdesc_premium_key"] = 'Premium activation key'; $string["settingdesc_premium_key"] = 'Premium activation key';
$string["premiumfeature:morestudyplans"] = 'Meer dan 5 studieplannen in één categorie aanmaken kan alleen met premium toegang.'; $string["premiumfeature:morestudyplans"] = 'Meer dan 5 studieplannen in één categorie aanmaken kan alleen met premium toegang.';
$string["premiumfeature:morecategories"] = 'In meer dan 20 categoriën een studieplan aanmaken kan alleen met premium toegang.'; $string["premiumfeature:morecategories"] = 'In meer dan 20 categoriën een studieplan aanmaken kan alleen met premium toegang.';
$string["overall"] = 'Cursus voltooid';
$string["studyplan_report"] = 'Studieplan resultatenoverzicht';

View File

@ -1,45 +1,28 @@
.path-local-treestudyplan { .path-local-treestudyplan {
font: inherit; font: inherit;
table.studyplanreport {
table-layout: fixed;
}
.q-header, .q-student-results { .q-header, .q-student-results {
background-color: white; background-color: white;
display: flex;
flex-direction: row;;
flex-wrap: nowrap;
.q-period-heading, .q-line-heading, .q-item-heading, .q-condition-heading, .q-period-heading, .q-line-heading, .q-item-heading, .q-condition-heading,
.q-period-results, .q-line-results, .q-item-results, .q-condition-results .q-period-results, .q-line-results, .q-item-results, .q-condition-results
{ {
display: flex;
flex-direction: column;
flex-grow: 1;
&:not(:last-child) { border-right: 1px solid gray;
border-right: 1px solid gray;
}
.q-header-title { .q-header-title {
padding: 0.5rem; padding: 0.5rem;
} }
.q-header-details,
.q-result-details {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
border-top: 1px solid green;
}
} }
.q-result { .q-result {
height: 2rem; height: 2rem;
display: flex;
justify-content: center;
padding-top: 0.25rem; padding-top: 0.25rem;
} }
@ -47,47 +30,60 @@
.q-header, .q-student-results { .q-header, .q-student-results {
/*.q-line-heading > .q-header-title,*/ /*.q-line-heading > .q-header-title,*/
.q-item-heading > .q-header-title, .q-item-heading.collapsed,
.q-condition-heading { .q-condition-heading {
width: 2rem; width: 2rem;
writing-mode: vertical-lr; writing-mode: vertical-lr;
text-orientation: sideways; text-orientation: sideways;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.q-line-heading > .q-header-title { .q-period-heading,
.q-line-heading,
.q-item-heading,
.q-condition-heading {
vertical-align: top;
}
.q-line-heading {
height: fit-content; height: fit-content;
} }
.q-item-heading > .q-item-heading { .q-item-heading {
height: 6rem; height: 6rem;
} }
.q-condition-heading { .q-condition-heading {
height: 8rem; text-align: center;
span {
height: 8rem;
white-space: nowrap;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
} }
} }
.q-result {
text-align: center;
vertical-align: middle;
border-right: 1px solid gray;
}
.q-studentname { .q-studentname {
padding: 0.5em; padding: 0.5em;
&.heading {
font-weight: bold;
vertical-align: bottom;
display: flex;
span {
align-self:flex-end;
}
}
border-right: 2px solid grey; border-right: 2px solid grey;
width: 20rem; width: 20rem;
} }
.q-scrolly {
overflow-y: auto; .q-courseresult,
max-height: 300rem; .q-conditionresult{
i.fa {
font-size: 21px;
vertical-align: middle;
}
} }
} }

View File

@ -1578,12 +1578,12 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan { .path-local-treestudyplan {
font: inherit; font: inherit;
} }
.path-local-treestudyplan table.studyplanreport {
table-layout: fixed;
}
.path-local-treestudyplan .q-header, .path-local-treestudyplan .q-header,
.path-local-treestudyplan .q-student-results { .path-local-treestudyplan .q-student-results {
background-color: white; background-color: white;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
} }
.path-local-treestudyplan .q-header .q-period-heading, .path-local-treestudyplan .q-header .q-period-heading,
.path-local-treestudyplan .q-header .q-line-heading, .path-local-treestudyplan .q-header .q-line-heading,
@ -1601,26 +1601,6 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan .q-student-results .q-line-results, .path-local-treestudyplan .q-student-results .q-line-results,
.path-local-treestudyplan .q-student-results .q-item-results, .path-local-treestudyplan .q-student-results .q-item-results,
.path-local-treestudyplan .q-student-results .q-condition-results { .path-local-treestudyplan .q-student-results .q-condition-results {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.path-local-treestudyplan .q-header .q-period-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-line-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-item-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-condition-heading:not(:last-child),
.path-local-treestudyplan .q-header .q-period-results:not(:last-child),
.path-local-treestudyplan .q-header .q-line-results:not(:last-child),
.path-local-treestudyplan .q-header .q-item-results:not(:last-child),
.path-local-treestudyplan .q-header .q-condition-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-period-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-line-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-item-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-condition-heading:not(:last-child),
.path-local-treestudyplan .q-student-results .q-period-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-line-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-item-results:not(:last-child),
.path-local-treestudyplan .q-student-results .q-condition-results:not(:last-child) {
border-right: 1px solid gray; border-right: 1px solid gray;
} }
.path-local-treestudyplan .q-header .q-period-heading .q-header-title, .path-local-treestudyplan .q-header .q-period-heading .q-header-title,
@ -1641,93 +1621,69 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan .q-student-results .q-condition-results .q-header-title { .path-local-treestudyplan .q-student-results .q-condition-results .q-header-title {
padding: 0.5rem; padding: 0.5rem;
} }
.path-local-treestudyplan .q-header .q-period-heading .q-header-details,
.path-local-treestudyplan .q-header .q-period-heading .q-result-details,
.path-local-treestudyplan .q-header .q-line-heading .q-header-details,
.path-local-treestudyplan .q-header .q-line-heading .q-result-details,
.path-local-treestudyplan .q-header .q-item-heading .q-header-details,
.path-local-treestudyplan .q-header .q-item-heading .q-result-details,
.path-local-treestudyplan .q-header .q-condition-heading .q-header-details,
.path-local-treestudyplan .q-header .q-condition-heading .q-result-details,
.path-local-treestudyplan .q-header .q-period-results .q-header-details,
.path-local-treestudyplan .q-header .q-period-results .q-result-details,
.path-local-treestudyplan .q-header .q-line-results .q-header-details,
.path-local-treestudyplan .q-header .q-line-results .q-result-details,
.path-local-treestudyplan .q-header .q-item-results .q-header-details,
.path-local-treestudyplan .q-header .q-item-results .q-result-details,
.path-local-treestudyplan .q-header .q-condition-results .q-header-details,
.path-local-treestudyplan .q-header .q-condition-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-period-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-period-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-line-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-line-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-item-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-item-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-condition-heading .q-header-details,
.path-local-treestudyplan .q-student-results .q-condition-heading .q-result-details,
.path-local-treestudyplan .q-student-results .q-period-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-period-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-line-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-line-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-item-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-item-results .q-result-details,
.path-local-treestudyplan .q-student-results .q-condition-results .q-header-details,
.path-local-treestudyplan .q-student-results .q-condition-results .q-result-details {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
border-top: 1px solid green;
}
.path-local-treestudyplan .q-header .q-result, .path-local-treestudyplan .q-header .q-result,
.path-local-treestudyplan .q-student-results .q-result { .path-local-treestudyplan .q-student-results .q-result {
height: 2rem; height: 2rem;
display: flex;
justify-content: center;
padding-top: 0.25rem; padding-top: 0.25rem;
} }
.path-local-treestudyplan .q-header, .path-local-treestudyplan .q-header,
.path-local-treestudyplan .q-student-results { .path-local-treestudyplan .q-student-results {
/*.q-line-heading > .q-header-title,*/ /*.q-line-heading > .q-header-title,*/
} }
.path-local-treestudyplan .q-header .q-item-heading > .q-header-title, .path-local-treestudyplan .q-header .q-item-heading.collapsed,
.path-local-treestudyplan .q-header .q-condition-heading, .path-local-treestudyplan .q-header .q-condition-heading,
.path-local-treestudyplan .q-student-results .q-item-heading > .q-header-title, .path-local-treestudyplan .q-student-results .q-item-heading.collapsed,
.path-local-treestudyplan .q-student-results .q-condition-heading { .path-local-treestudyplan .q-student-results .q-condition-heading {
width: 2rem; width: 2rem;
writing-mode: vertical-lr; writing-mode: vertical-lr;
text-orientation: sideways; text-orientation: sideways;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.path-local-treestudyplan .q-header .q-line-heading > .q-header-title, .path-local-treestudyplan .q-header .q-period-heading,
.path-local-treestudyplan .q-student-results .q-line-heading > .q-header-title { .path-local-treestudyplan .q-header .q-line-heading,
.path-local-treestudyplan .q-header .q-item-heading,
.path-local-treestudyplan .q-header .q-condition-heading,
.path-local-treestudyplan .q-student-results .q-period-heading,
.path-local-treestudyplan .q-student-results .q-line-heading,
.path-local-treestudyplan .q-student-results .q-item-heading,
.path-local-treestudyplan .q-student-results .q-condition-heading {
vertical-align: top;
}
.path-local-treestudyplan .q-header .q-line-heading,
.path-local-treestudyplan .q-student-results .q-line-heading {
height: fit-content; height: fit-content;
} }
.path-local-treestudyplan .q-header .q-item-heading > .q-item-heading, .path-local-treestudyplan .q-header .q-item-heading,
.path-local-treestudyplan .q-student-results .q-item-heading > .q-item-heading { .path-local-treestudyplan .q-student-results .q-item-heading {
height: 6rem; height: 6rem;
} }
.path-local-treestudyplan .q-header .q-condition-heading, .path-local-treestudyplan .q-header .q-condition-heading,
.path-local-treestudyplan .q-student-results .q-condition-heading { .path-local-treestudyplan .q-student-results .q-condition-heading {
text-align: center;
}
.path-local-treestudyplan .q-header .q-condition-heading span,
.path-local-treestudyplan .q-student-results .q-condition-heading span {
height: 8rem; height: 8rem;
white-space: nowrap;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
.path-local-treestudyplan .q-result {
text-align: center;
vertical-align: middle;
border-right: 1px solid gray;
} }
.path-local-treestudyplan .q-studentname { .path-local-treestudyplan .q-studentname {
padding: 0.5em; padding: 0.5em;
border-right: 2px solid grey; border-right: 2px solid grey;
width: 20rem; width: 20rem;
} }
.path-local-treestudyplan .q-studentname.heading { .path-local-treestudyplan .q-courseresult i.fa,
font-weight: bold; .path-local-treestudyplan .q-conditionresult i.fa {
vertical-align: bottom; font-size: 21px;
display: flex; vertical-align: middle;
}
.path-local-treestudyplan .q-studentname.heading span {
align-self: flex-end;
}
.path-local-treestudyplan .q-scrolly {
overflow-y: auto;
max-height: 300rem;
} }
.path-local-treestudyplan .b-modal-justify-footer-between .modal-footer, .path-local-treestudyplan .b-modal-justify-footer-between .modal-footer,