Skip to content

Commit

Permalink
feat(citSci): improved progress indicator, fixed layout for thumblabl…
Browse files Browse the repository at this point in the history 
…es when very narrow screen
  • Loading branch information
@peichins
peichins committed Jul 5, 2019
1 parent 89bfdde commit b1f9dd1
Show file tree
Hide file tree
Showing 9 changed files with 220 additions and 177 deletions.
12 changes: 11 additions & 1 deletion src/app/citizenScience/_citizenScience.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,19 @@
opacity: 0.7;
font-size: 0.8em;
padding-bottom: 3px;
padding-top: 2px;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;

div {
font-size: 1em;
line-height: 1em;
}

span {
margin: 1em;
margin: 2px 1em 2px 0.5em;
}

}
Expand Down
58 changes: 31 additions & 27 deletions src/app/citizenScience/datasetProgress/_progress.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

.dataset-progress-wrapper {

display: flex;
display: inline-block;

.citSci-next {

Expand All @@ -14,46 +14,50 @@
}

}
}

.dataset-progress {

display: flex;

background-color: #000000;
dataset-progress-indicator {
flex-grow: 0.8;
width: 30%;
max-width: 180px;
min-width: 70px;
}

.progress-summary {
margin-left: 15px;
background: #000000;
color: #aaa;
.dataset-progress-bar {

}
margin-right: 20px;

&.progress {
height: auto;
margin-bottom: 0px;
margin-top: 2px;
top: -1px;
position: relative;
vertical-align: text-bottom;

.progress-bar {
padding-top:1px;
padding-bottom:1px;

.progress-graphic {
margin-left: 15px;
background: #000000;
padding: 1px 1px 2px 2px;
display: block;
width: 23px;
height: 23px;
border-radius: 3px;
div {
display: block;
height: 1px;
width: 1px;
background: #00ca56;
margin:2px 2px 1px 1px;
float: left;
border-radius: 1px;
span {
color: #FFFFFF;
}

}

span {
color: #000000;
}

}

}





}



Expand Down
134 changes: 8 additions & 126 deletions src/app/citizenScience/datasetProgress/datasetProgress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,14 @@
* - updates the selected labels to match what is stored for the selected sample
*/


angular.module("bawApp.components.progress", ["bawApp.citizenScience.csSamples"])
.component("datasetProgress", {
templateUrl: "citizenScience/datasetProgress/datasetProgress.tpl.html",
controller: ["$scope", "$routeParams", "CsSamples", "SampleLabels", "$url", "conf.paths", "QuestionResponse", "CitizenScienceCommon",
function ($scope, $routeParams, CsSamples, SampleLabels, $url, paths, QuestionResponse, CitizenScienceCommon) {
controller: ["$scope", "$routeParams", "CsSamples", "SampleLabels", "$url", "conf.paths",
function ($scope, $routeParams, CsSamples, SampleLabels, $url, paths) {

var self = this;



// routed dataset item id will link back to the unrouted listen page
$scope.listenLink = $url.formatUri(paths.site.ngRoutes.citizenScience.listen,
{studyName: $routeParams.studyName});
Expand Down Expand Up @@ -49,9 +46,6 @@ angular.module("bawApp.components.progress", ["bawApp.citizenScience.csSamples"]
});

$scope.$watch(() => CsSamples.currentItem(), (newVal, oldVal) => {

self.updateProgress();

SampleLabels.reset(newVal.id);
});

Expand All @@ -62,7 +56,7 @@ angular.module("bawApp.components.progress", ["bawApp.citizenScience.csSamples"]


/**
*
* whether to disable the next button, both greying out and preventing actions
* @return boolean
*/
$scope.nextDisabled = function (requireNextItemAvailable = false) {
Expand All @@ -74,6 +68,11 @@ angular.module("bawApp.components.progress", ["bawApp.citizenScience.csSamples"]

};

/**
* Return the text that should display on the button. Might change depending on
* if they have selected a label or if there is another sample after the current.
* @return {*}
*/
$scope.nextText = function () {
if (SampleLabels.hasResponse()) {
return "Submit response";
Expand All @@ -94,123 +93,6 @@ angular.module("bawApp.components.progress", ["bawApp.citizenScience.csSamples"]
}
};


$scope.progress = {
itemCount: 0,
responseCount: 0,
percent: 0,
breaks: false

};

self.refreshIn = 0;


/**
* called each time we go to a new segment
* will increment response count. We only refresh from the server sometimes
* to save unecessary api calls.
*/
self.updateProgress = function () {

if (self.refreshIn === 0) {
self.refreshProgress();
self.refreshIn = 5;
}
$scope.progress.responseCount += 1;
self.updateProgressBreaks();
self.refreshIn -= 1;

};


/**
* Update progress when the study changes. It will not be loaded when this controller is initialised
*/
$scope.$watch(() => CitizenScienceCommon.studyData.study, (newVal, oldVal) => {
self.refreshProgress();
});

/**
* Watch the total items, because it will not be ready when the controller first loads
*/
$scope.$watch(CsSamples.totalItems, (newVal, oldVal) => {
if (typeof newVal === "number") {
$scope.progress.itemCount = newVal;
self.updateProgressBreaks();
}
});


/**
* gets the total number of dataset items and the total number of responses
* and calculates the percentage.
*/
self.refreshProgress = function () {

// make sure the study has been loaded
if (CitizenScienceCommon.studyData.study) {

// request 1 item to get the metadata showing the total number of items
var responseFilterParams = {
studyId: CitizenScienceCommon.studyData.study.id,
items: 1
};

QuestionResponse.questionResponses(responseFilterParams).then((x) => {

var totalResponses = x.data.meta.paging.total;
$scope.progress.responseCount = totalResponses;
self.updateProgressBreaks();
self.refreshIn = 5;

});

}

};

/**
* Progress is rendered a 5x5 grid of divs
* each item represents 1 25th of the total number of items
* e.g. if there are 2500 items, the first point represents 100 items.
*/
self.updateProgressBreaks = function () {

var numBreaks = 25;

if (!$scope.progress.breaks) {
$scope.progress.breaks = new Array(numBreaks);
}

if ($scope.progress.itemCount === 0) {
return;
}


var fullBreaks = ($scope.progress.responseCount / $scope.progress.itemCount) * numBreaks;
// number of completely full breaks. Because it's possible to be more than 100% complete
// this is also capped
var numFull = Math.min(Math.floor(fullBreaks), numBreaks);

$scope.progress.breaks.fill(1, 0, numFull);
$scope.progress.breaks.fill(0, numFull , numBreaks);
if (numFull < numBreaks) {
$scope.progress.breaks[numFull] = fullBreaks % 1;
}

var percent = Math.round(100 * $scope.progress.responseCount / $scope.progress.itemCount);
$scope.progress.percent = percent;
console.log("$scope.progress.percent", percent);
$scope.progress.percentCapped = Math.min(percent, 100);



};




}],
bindings: {
datasetId: "="
Expand Down
19 changes: 0 additions & 19 deletions src/app/citizenScience/datasetProgress/datasetProgress.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,6 @@
{{nextText()}} <span class="glyphicon glyphicon-arrow-right"></span>
</a>
</div>


<div class="dataset-progress" ng-if="progress.percent > 0">

<span class="progress-summary">
{{progress.responseCount}} / {{progress.itemCount}} ({{progress.percent}} %)
</span>

<div class="progress-graphic">
<div ng-repeat="break in progress.breaks track by $index" style="opacity:{{(break * 0.8) + 0.2}};"></div>

</div>




</div>


</div>


Expand Down
Loading

0 comments on commit b1f9dd1

Please sign in to comment.