Miqra-Engineering/moodle_local_treestudyplan
2
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases 4 Wiki Activity

Added x and ! icons to faild result in completion circles

Browse Source
This commit is contained in:
PMKuipers 2023-08-09 14:18:05 +02:00
parent db0e7ac3df
commit 365b3d8949
4 changed files with 50 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
amd/build/report-viewer-components.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
amd/build/report-viewer-components.min.js.map
View File

File diff suppressed because one or more lines are too long

63
amd/src/report-viewer-components.js
View File

@ -17,6 +17,7 @@ import Config from "core/config";
// Make π available as a constant
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
const LINE_GRAVITY = 1.3;
export default {
@ -147,6 +148,9 @@ export default {
type: String,
default: "",
},
icon: {
type: String,
}
},
data() {
@ -183,17 +187,24 @@ export default {
methods: {
},
template: `
<svg width="1em" height="1em" viewBox="0 0 100 100">
<title>{{title}}</title>
<circle v-if="fraction >= 1.0" cx="50" cy="50" :r="radius"
:style="'opacity: 1; stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'"/>
<g v-else>
<circle cx="50" cy="50" :r="radius"
:style="'opacity: ' + bgopacity + ';stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'"/>
<path :d="arcpath"
:style="'stroke-width: ' + (stroke*100) +'; stroke: currentcolor; fill: none;'"/>
</g>
</svg>
<div style="display: inline-block; width: 1em; height: 1em; position:relative; padding: 0;">
<svg width="1em" height="1em" viewBox="0 0 100 100"
style="position: absolute;top: 0;left: 0;">
<title>{{title}}</title>
<circle v-if="fraction >= 1.0" cx="50" cy="50" :r="radius"
:style="'opacity: 1; stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'"/>
<g v-else>
<circle cx="50" cy="50" :r="radius"
:style="'opacity: ' + bgopacity + ';stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'"/>
<path :d="arcpath"
:style="'stroke-width: ' + (stroke*100) +'; stroke: currentcolor; fill: none;'"/>
</g>
</svg>
<i v-if='icon' :class="'fa fa-'+icon"
style=" position: absolute; top: 0.42em; left: 0.43em; text-align:center; display: inline-block;
width:1em; font-size: 0.55em; "
></i>
</div>
`,
});
@ -852,6 +863,22 @@ export default {
return "check-circle";
}
},
circle_icon(completion) {
switch(completion){
default: // case "incomplete"
return null;
case "failed":
return "times";
case "progress":
return "exclamation";
case "completed":
return "check";
case "good":
return "check";
case "excellent":
return "check";
}
},
},
template: `
<b-card no-body :class="'r-item-competency completion-'+value.completion">
@ -865,11 +892,12 @@ export default {
<b-col md="11">
<b-card-body class="align-items-center">
<template v-if='value.course.completion'>
<r-progress-circle v-if='["progress","incomplete"].includes(value.completion)'
<r-progress-circle v-if='["failed", "progress","incomplete"].includes(value.completion)'
:value='value.course.completion.progress'
:max='value.course.completion.count'
:min='0'
:class="'r-course-result r-completion-'+value.completion"
:icon='circle_icon(value.completion)'
:title="text['completion_'+value.completion]"
></r-progress-circle>
<i v-else v-b-popover.top
@ -909,16 +937,17 @@ export default {
<div class="r-completion-detail-header">
<template v-if='value.course.completion'>
{{text['completion_'+value.completion]}}
<r-progress-circle v-if='["progress","incomplete"].includes(value.completion)'
<r-progress-circle v-if='["failed","progress","incomplete"].includes(value.completion)'
:value='value.course.completion.progress'
:max='value.course.completion.count'
:min='0'
:title="text['completion_'+value.completion]"
:class="'r-progress-circle-popup r-completion-'+value.completion"
></r-progress-circle>
<i v-else v-b-popover.top
:icon='circle_icon(value.completion)'
></r-progress-circle
><i v-else v-b-popover.top
:class="'fa fa-'+completion_icon(value.completion)+
' r-completion-'+value.completion"
' r-progress-icon-popup r-completion-'+value.completion"
:title="text['completion_'+value.completion]"></i>
</template>
<template v-else>
@ -1633,7 +1662,7 @@ export default {
`,
});
//TODO: Core completion version of student course info
//TAG: Core completion version of student course info
Vue.component('r-item-teachercompletion',{
props: {
value : {

4
css/devstyles.css
View File

@ -835,10 +835,9 @@ tr.r-completion-category-header {
.r-progress-circle-popup{
position: relative;
top: -0.15em;
top: 0.1em;
}
.r-completion-detail-header {
font-size: 20pt;
}
@ -879,6 +878,7 @@ table.r-item-course-grade-details td {
}
.r-course-detail-header-right {
width: 260px;
text-align: end;
}