Miqra-Engineering/moodle-local_treestudyplan
Archived
2
0
Fork 0
Code Issues 7 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,
default: 0.2,
},
title: {
type: String,
default: "",
},
},
data() {
return {
@ -81,44 +86,40 @@ export default {
},
fraction(){
if(this.max - this.min == 0){
return 1;
// 0 size is always full :)
return 0;
// 0 size is always empty :)
} else {
return (this.value - this.min)/(this.max - this.min);
}
},
center() {
const x = (1+this.stroke)*50;
const y = x;
return { 'x' : x, 'y' : y };
radius() {
return 50 - (50*this.stroke);
},
size() {
const w = (1+this.stroke)*100;
const h = w;
return { 'h' : h, 'w' : w };
}
},
methods: {
arcpath(cx, cy, r) {
let fraction = 1;
arcpath() {
let fraction = 0;
const r = 50 - (50*this.stroke);
if(this.max - this.min != 0){
fraction = (this.value - this.min)/(this.max - this.min);
}
const Δ = fraction * 2*π;
return svgarcpath([cx,cy],[r,r],[0,Δ],270);
return svgarcpath([50,50],[r,r],[0,Δ], 1.5*π);
},
},
methods: {
},
template: `
<span class='r-progress-circle'><svg
:width="(1+stroke)+'em'"
:height="(1+stroke)+'em'"
:viewbox="'0 0 '+ size.w + ' '+size.h">
<circle :cx="center.x" :cy="center.y" :r="50"
<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(center.x,center.y,50)"
<path :d="arcpath"
:style="'stroke-width: ' + (stroke*100) +'; stroke: currentcolor; fill: none;'"/>
</svg></span>
</g>
</svg>
`,
});
@ -630,6 +631,7 @@ export default {
:max='value.course.completion.count'
:min='0'
:class="'r-course-result r-completion-'+value.completion"
:title="text['completion_'+value.completion]"
></r-progress-circle>
<i v-else v-b-popover.top
:class="'r-course-result fa fa-'+completion_icon(value.completion)+
@ -853,8 +855,12 @@ export default {
<template v-for='cgroup in value.conditions'>
<tr>
<th colspan='2'>{{cgroup.title}}</th>
<th><i :class="'fa fa-'+completion_icon(cgroup.status)+' r-completion-'+cgroup.status"
:title="text['completion_'+cgroup.status]"></i></th>
<th><r-progress-circle
:value='cgroup.progress'
:max='cgroup.count'
:class="'r-completion-'+cgroup.status"
:title="text['completion_'+cgroup.status]"
></r-progress-circle></th>
</tr>
<tr v-for='ci in cgroup.items'>
<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'),
"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'),
"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);
}
@ -247,9 +249,14 @@ class corecompletioninfo {
"items" => [],
];
$progress = 0;
foreach($completions as $completion){
$criteria = $completion->get_criteria();
if($completion->is_complete()) {
$progress += 1; // Add a point to the progress counter
}
$iinfo = [
"id" => $criteria->id,
"title" => $criteria->get_title_detailed(),
@ -293,6 +300,20 @@ class corecompletioninfo {
// finally add the item to the items list
$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['pending'] = $anypending;
}

15
css/devstyles.css
View file

@ -674,26 +674,25 @@ a.t-item-course-config {
}
.r-item-start.completion-incomplete i,
i.r-completion-incomplete {
.r-completion-incomplete {
color: #7f7f7f;
}
i.r-completion-progress {
.r-completion-progress {
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);
}
i.r-completion-good {
.r-completion-good {
color: #398;
}
i.r-completion-excellent, i.r-completion-complete {
.r-completion-excellent, .r-completion-complete {
color: rgb(0, 103, 255);
}
i.r-completion-pending {
.r-completion-pending {
color: #7f7f7f;
}
i.r-completion-failed, i.r-completion-complete-fail {
.r-completion-failed, .r-completion-complete-fail {
color: #933;
}