Difference between revisions of "Widget:MerlinProficiencyProgress"
From Coder Merlin
(Added prev/next buttons) |
|||
| Line 1: | Line 1: | ||
< | <script type="module"> | ||
import * as merlinapi from "/wiki/merlin_extensions/merlin-api.mjs"; | |||
const userName = "<!--{$userName}-->".toLowerCase(); | |||
const sessionID = "<!--{$sessionID}-->"; | |||
function MasteryProgressModel(data) { | |||
this.masteryProgresses = ko.observableArray(data); | |||
} | |||
// Activates knockout.js | |||
function init(event) { | |||
let successHandler = function (data) { | |||
data.sort((left, right) => { | |||
return left.masteryProgramTopicSequence > right.masteryProgramTopicSequence ? 1 : | |||
(left.masteryProgramTopicSequence < right.masteryProgramTopicSequence ? -1 : | |||
0) | |||
}); | |||
let model = new MasteryProgressModel(data); | |||
<table class="table | ko.applyBindings(model); | ||
} | |||
let errorHandler = function(error) { | |||
console.error(error.message); | |||
} | |||
merlinapi.MasteryProgressModel.load(successHandler, errorHandler, userName, sessionID); | |||
} | |||
window.addEventListener("load", (event) => { | |||
init(event) | |||
}); | |||
</script> | |||
<table class="merlin-proficiency-progress-table" style="display: none" data-bind="visible: true"> | |||
<thead> | <thead> | ||
<tr> | |||
<th>Program Level Name</th> | |||
<th>Emerging</th> | |||
<th>Developing</th> | |||
<th>Proficient</th> | |||
<th>Exemplary</th> | |||
</tr> | |||
</thead> | </thead> | ||
<tbody data-bind="foreach: masteryProgresses"> | |||
<tr> | |||
<td data-bind="style: {'background-color': color()}, click: toggleMissionDisplay" class="merlin-proficiency-progress-program-level-name"> | |||
<span data-bind="text: arrowInnerText()"></span> | |||
<span data-bind="text: standardName()"></span> | |||
<ul data-bind="style: {'display': (shouldShowMissions()) ? 'block' : 'none'},foreach: missions"> | |||
<li data-bind="text: standardName()"></li> | |||
</ul> | |||
</td> | |||
<td><span data-bind="class: emergingClassName()"></span></td> | |||
<td><span data-bind="class: developingClassName()"></span></td> | |||
<td><span data-bind="class: proficientClassName()"></span></td> | |||
<td><span data-bind="class: exemplaryClassName()"></span></td> | |||
</tr> | |||
</tbody> | |||
</table> | </table> | ||
Latest revision as of 20:11, 5 April 2023
<script type="module"> import * as merlinapi from "/wiki/merlin_extensions/merlin-api.mjs";
const userName = "".toLowerCase(); const sessionID = "";
function MasteryProgressModel(data) {
this.masteryProgresses = ko.observableArray(data);
}
// Activates knockout.js function init(event) {
let successHandler = function (data) {
data.sort((left, right) => {
return left.masteryProgramTopicSequence > right.masteryProgramTopicSequence ? 1 : (left.masteryProgramTopicSequence < right.masteryProgramTopicSequence ? -1 : 0) }); let model = new MasteryProgressModel(data); ko.applyBindings(model); } let errorHandler = function(error) { console.error(error.message); } merlinapi.MasteryProgressModel.load(successHandler, errorHandler, userName, sessionID); }
window.addEventListener("load", (event) => { init(event) }); </script>
<thead> </thead> <tbody data-bind="foreach: masteryProgresses"> </tbody>
