Miqra-Engineering/moodle_local_treestudyplan
2
0
Fork 0
Code Issues 13 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 // 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
const LINE_GRAVITY = 1.3; const LINE_GRAVITY = 1.3;
export default { export default {
@ -147,6 +148,9 @@ export default {
type: String, type: String,
default: "", default: "",
}, },
icon: {
type: String,
}
}, },
data() { data() {
@ -183,17 +187,24 @@ export default {
methods: { methods: {
}, },
template: ` template: `
<svg width="1em" height="1em" viewBox="0 0 100 100"> <div style="display: inline-block; width: 1em; height: 1em; position:relative; padding: 0;">
<title>{{title}}</title> <svg width="1em" height="1em" viewBox="0 0 100 100"
<circle v-if="fraction >= 1.0" cx="50" cy="50" :r="radius" style="position: absolute;top: 0;left: 0;">
:style="'opacity: 1; stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'"/> <title>{{title}}</title>
<g v-else> <circle v-if="fraction >= 1.0" cx="50" cy="50" :r="radius"
<circle cx="50" cy="50" :r="radius" :style="'opacity: 1; stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'"/>
:style="'opacity: ' + bgopacity + ';stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'"/> <g v-else>
<path :d="arcpath" <circle cx="50" cy="50" :r="radius"
:style="'stroke-width: ' + (stroke*100) +'; stroke: currentcolor; fill: none;'"/> :style="'opacity: ' + bgopacity + ';stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'"/>
</g> <path :d="arcpath"
</svg> :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"; 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: ` template: `
<b-card no-body :class="'r-item-competency completion-'+value.completion"> <b-card no-body :class="'r-item-competency completion-'+value.completion">
@ -865,11 +892,12 @@ export default {
<b-col md="11"> <b-col md="11">
<b-card-body class="align-items-center"> <b-card-body class="align-items-center">
<template v-if='value.course.completion'> <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' :value='value.course.completion.progress'
:max='value.course.completion.count' :max='value.course.completion.count'
:min='0' :min='0'
:class="'r-course-result r-completion-'+value.completion" :class="'r-course-result r-completion-'+value.completion"
:icon='circle_icon(value.completion)'
:title="text['completion_'+value.completion]" :title="text['completion_'+value.completion]"
></r-progress-circle> ></r-progress-circle>
<i v-else v-b-popover.top <i v-else v-b-popover.top
@ -909,16 +937,17 @@ export default {
<div class="r-completion-detail-header"> <div class="r-completion-detail-header">
<template v-if='value.course.completion'> <template v-if='value.course.completion'>
{{text['completion_'+value.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' :value='value.course.completion.progress'
:max='value.course.completion.count' :max='value.course.completion.count'
:min='0' :min='0'
:title="text['completion_'+value.completion]" :title="text['completion_'+value.completion]"
:class="'r-progress-circle-popup r-completion-'+value.completion" :class="'r-progress-circle-popup r-completion-'+value.completion"
></r-progress-circle> :icon='circle_icon(value.completion)'
<i v-else v-b-popover.top ></r-progress-circle
><i v-else v-b-popover.top
:class="'fa fa-'+completion_icon(value.completion)+ :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> :title="text['completion_'+value.completion]"></i>
</template> </template>
<template v-else> <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',{ Vue.component('r-item-teachercompletion',{
props: { props: {
value : { value : {

4
css/devstyles.css
View File

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