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

Added progress circles

Browse source
This commit is contained in:
PMKuipers 2023-05-20 18:25:22 +02:00
parent 11e5f99ba4
commit 0cf5619117
3 changed files with 60 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
amd/src/report-viewer-components.js
View file

@ -69,6 +69,11 @@ export default {
type: Number, type: Number,
default: 0.2, default: 0.2,
}, },
title: {
type: String,
default: "",
},
}, },
data() { data() {
return { return {
@ -81,44 +86,40 @@ export default {
}, },
fraction(){ fraction(){
if(this.max - this.min == 0){ if(this.max - this.min == 0){
return 1; return 0;
// 0 size is always full :) // 0 size is always empty :)
} else { } else {
return (this.value - this.min)/(this.max - this.min); return (this.value - this.min)/(this.max - this.min);
} }
}, },
center() { radius() {
const x = (1+this.stroke)*50; return 50 - (50*this.stroke);
const y = x;
return { 'x' : x, 'y' : y };
}, },
size() { arcpath() {
const w = (1+this.stroke)*100; let fraction = 0;
const h = w; const r = 50 - (50*this.stroke);
return { 'h' : h, 'w' : w };
}
},
methods: {
arcpath(cx, cy, r) {
let fraction = 1;
if(this.max - this.min != 0){ if(this.max - this.min != 0){
fraction = (this.value - this.min)/(this.max - this.min); fraction = (this.value - this.min)/(this.max - this.min);
} }
const Δ = fraction * 2*π; const Δ = fraction * 2*π;
return svgarcpath([cx,cy],[r,r],[0,Δ],270); return svgarcpath([50,50],[r,r],[0,Δ], 1.5*π);
}, },
}, },
methods: {
},
template: ` template: `
<span class='r-progress-circle'><svg <svg width="1em" height="1em" viewBox="0 0 100 100">
:width="(1+stroke)+'em'" <title>{{title}}</title>
:height="(1+stroke)+'em'" <circle v-if="fraction >= 1.0" cx="50" cy="50" :r="radius"
:viewbox="'0 0 '+ size.w + ' '+size.h"> :style="'opacity: 1; stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'"/>
<circle :cx="center.x" :cy="center.y" :r="50" <g v-else>
<circle cx="50" cy="50" :r="radius"
:style="'opacity: ' + bgopacity + ';stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'"/> :style="'opacity: ' + bgopacity + ';stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'"/>
<path :d="arcpath(center.x,center.y,50)" <path :d="arcpath"
:style="'stroke-width: ' + (stroke*100) +'; stroke: currentcolor; fill: none;'"/> :style="'stroke-width: ' + (stroke*100) +'; stroke: currentcolor; fill: none;'"/>
</svg></span> </g>
</svg>
`, `,
}); });
@ -630,6 +631,7 @@ export default {
: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"
: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
:class="'r-course-result fa fa-'+completion_icon(value.completion)+ :class="'r-course-result fa fa-'+completion_icon(value.completion)+
@ -853,8 +855,12 @@ export default {
<template v-for='cgroup in value.conditions'> <template v-for='cgroup in value.conditions'>
<tr> <tr>
<th colspan='2'>{{cgroup.title}}</th> <th colspan='2'>{{cgroup.title}}</th>
<th><i :class="'fa fa-'+completion_icon(cgroup.status)+' r-completion-'+cgroup.status" <th><r-progress-circle
:title="text['completion_'+cgroup.status]"></i></th> :value='cgroup.progress'
:max='cgroup.count'
:class="'r-completion-'+cgroup.status"
:title="text['completion_'+cgroup.status]"
></r-progress-circle></th>
</tr> </tr>
<tr v-for='ci in cgroup.items'> <tr v-for='ci in cgroup.items'>
<td><span v-if='guestmode'>{{ci.title}}</span> <td><span v-if='guestmode'>{{ci.title}}</span>

23
classes/corecompletioninfo.php
View file

@ -113,7 +113,9 @@ class corecompletioninfo {
"type" => new \external_value(PARAM_TEXT, 'completion type name'), "type" => new \external_value(PARAM_TEXT, 'completion type name'),
"aggregation" => new \external_value(PARAM_TEXT, 'completion aggregation for this type ["all","any"]'), "aggregation" => new \external_value(PARAM_TEXT, 'completion aggregation for this type ["all","any"]'),
"completed" => new \external_value(PARAM_BOOL, 'current completion value for this type'), "completed" => new \external_value(PARAM_BOOL, 'current completion value for this type'),
"status" => new \external_value(PARAM_TEXT, 'extended completion status ["incomplete","progress","complete", "complete-pass","complete-fail"]') "status" => new \external_value(PARAM_TEXT, 'extended completion status ["incomplete","progress","complete", "complete-pass","complete-fail"]'),
"progress" => new \external_value(PARAM_INT, 'completed sub-conditions'),
"count" => new \external_value(PARAM_INT, 'total number of sub-conditions'),
], 'completion type',$value); ], 'completion type',$value);
} }
@ -247,9 +249,14 @@ class corecompletioninfo {
"items" => [], "items" => [],
]; ];
$progress = 0;
foreach($completions as $completion){ foreach($completions as $completion){
$criteria = $completion->get_criteria(); $criteria = $completion->get_criteria();
if($completion->is_complete()) {
$progress += 1; // Add a point to the progress counter
}
$iinfo = [ $iinfo = [
"id" => $criteria->id, "id" => $criteria->id,
"title" => $criteria->get_title_detailed(), "title" => $criteria->get_title_detailed(),
@ -293,6 +300,20 @@ class corecompletioninfo {
// finally add the item to the items list // finally add the item to the items list
$cinfo["items"][] = $iinfo; $cinfo["items"][] = $iinfo;
} }
// Set the count and progress stats based on the Type's aggregation style
if($typeaggregation == COMPLETION_AGGREGATION_ALL){
// Count and Progress amount to the sum of items
$cinfo["count"] = count($cinfo["items"]);
$cinfo["progress"] = $progress;
}
else { //$typeaggregation == COMPLETION_AGGREGATION_ANY
// Count and progress are either 1 or 0, since any of the items
// complete's the type
$cinfo["count"] = (count($cinfo["items"]) > 0)?1:0;
$cinfo["progress"] = ($progress>0)?1:0;
}
$info['conditions'][] = $cinfo; $info['conditions'][] = $cinfo;
$info['pending'] = $anypending; $info['pending'] = $anypending;
} }

15
css/devstyles.css
View file

@ -674,26 +674,25 @@ a.t-item-course-config {
} }
.r-item-start.completion-incomplete i, .r-item-start.completion-incomplete i,
i.r-completion-incomplete { .r-completion-incomplete {
color: #7f7f7f; color: #7f7f7f;
} }
i.r-completion-progress { .r-completion-progress {
color: rgb(139, 107, 0); color: rgb(139, 107, 0);
} }
i.r-completion-completed, i.r-completion-complete-pass { .r-completion-completed, .r-completion-complete-pass {
color: rgb(0, 126, 0); color: rgb(0, 126, 0);
} }
i.r-completion-good { .r-completion-good {
color: #398; color: #398;
} }
i.r-completion-excellent, i.r-completion-complete { .r-completion-excellent, .r-completion-complete {
color: rgb(0, 103, 255); color: rgb(0, 103, 255);
} }
i.r-completion-pending { .r-completion-pending {
color: #7f7f7f; color: #7f7f7f;
} }
.r-completion-failed, .r-completion-complete-fail {
i.r-completion-failed, i.r-completion-complete-fail {
color: #933; color: #933;
} }