Skip to content

Commit

Permalink
feat(citsci): checkbox component updated for text-only label selectio…
Browse files Browse the repository at this point in the history 
…n and 'maybe' option
  • Loading branch information
@peichins
peichins committed Jun 14, 2019
1 parent 400ebb7 commit 9f1210a
Show file tree
Hide file tree
Showing 11 changed files with 193 additions and 96 deletions.
3 changes: 2 additions & 1 deletion src/app/citizenScience/bristlebird/bristlebird.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,8 @@ angular
"bawApp.citizenScience.sampleLabels",
"bawApp.citizenScience.csLabels",
"bawApp.components.onboarding",
"bawApp.components.background"
"bawApp.components.background",
"bawApp.components.test.one"
])
.controller(
"BristlebirdController",
Expand Down
2 changes: 2 additions & 0 deletions src/app/citizenScience/bristlebird/listen.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ <h2>Eastern Bristlebird Search

<div class="main wrapper clearfix">



<div class="citsci-debug">
<p>Currently viewing: Sample {{ currentSample }}</p>
<p>Audio id: {{ samples[currentSample].recordingId }}</p>
Expand Down
71 changes: 61 additions & 10 deletions src/app/citizenScience/labels/textLabels/_citizenScienceLabels.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,14 @@
font-size: 18px;
cursor: pointer;
line-height: 1em;
color: #559cd9;
color: #FFFFFF;
text-decoration: none;

&.main-button {

&:hover {
color: #77befb;

.checkbox {
border-color: #77befb;
}
opacity: 0.9;

}

Expand All @@ -50,11 +47,65 @@

}

.selected a {
i {
color: #8cc967;
}
}
a {

.label-value-text {
width: 40px;
display: inline-block;
}

&.empty {

}
&.yes {
i {
b {
color: #8cc967;
&:before {
content: "\f00c";
}
}
}
}
&.maybe {
i {
b {
color: #ffbc3e;
&:before {
content: "\f128";
}
}
}
}
&.no {
i {
b {
color: #d00900;
&:before {
content: "\f00d";
}
}
}
}

i {
position: relative;
&:before {
content: "\f096";
}
b {
position: absolute;
top: 0;
font-size: 0.9em;
&.grey {
color: #666666;
opacity: 0.5;
}
}
}


}

i {
display: inline-block;
Expand Down
25 changes: 19 additions & 6 deletions src/app/citizenScience/labels/textLabels/label.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,31 @@ angular.module("bawApp.components.citizenScienceTextLabels.label",

var self = this;

$scope.isSelected = function() {
return SampleLabels.getValue(self.label.id);
};
//was : $scope.isSelected = function() {
// $scope.currentState = function() {
// return SampleLabels.getValue(self.label.id);
// };

$scope.state = "empty";


$scope.$watch("state", function (newVal, oldVal) {
console.log(newVal);
SampleLabels.setValue($scope.state, self.label.id);
});

/**
* callback when this label is either attached or detached from the current sample
* callback when this label state changes
* This is used to get reverse binding into transcluded components.
* @param isSelected Boolean
*/
self.onToggleSelected = function (isSelected) {
SampleLabels.setValue(isSelected, self.label.id);
self.onToggleSelected = function (state) {
SampleLabels.setValue(state, self.label.id);
$scope.state = state;
};



}],
bindings: {
label: "=",
Expand Down
2 changes: 1 addition & 1 deletion src/app/citizenScience/labels/textLabels/label.tpl.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<label-check
is-checked="isSelected"
on-toggle-selected="$ctrl.onToggleSelected"
text="$ctrl.label.name"
state="state"
></label-check>
62 changes: 56 additions & 6 deletions src/app/citizenScience/labels/textLabels/labelCheck.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,68 @@ angular.module("bawApp.components.citizenScienceLabelCheck", ["bawApp.citizenSci
var self = this;

/**
* Add or remove the label num to the list of selected labels for this sample
* Send the new set of labels to the dataset
* @param label string
* There are 4 possible states for the label, yes, no, maybe and empty.
* Empty a bit like no. With no, it's been explicitly set as no,
* whereas with empty it is the default state, not yet explicitly set. Once the state is changed from
* empty it can never be empty again.
* There are two view variations for this: expanded or not
* With expanded, the label will have 'yes', 'no' and 'maybe' checkboxes separately
* With not expanded, there is one checkbox that cycles between yes, maybe and no
*/
$scope.toggleLabel = function () {
self.onToggleSelected(!self.isChecked());

/**
* change the state for this label.
* @param state string.
* If state is supplied, it will set the state to be the value supplied. If it is already
* the state supplied, it will not have any effect.
* If state is not supplied, it will cycle through the possible states.
*/
$scope.toggleLabel = function (stateIndex) {


if (typeof stateIndex !== "number") {
// no new stateIndex supplied so cycle through the states, excluding zero
stateIndex = ($scope.stateIndex + 1);
if (stateIndex > $scope.states.length - 1) {
stateIndex = $scope.stateIndexes[0];
}
}

if (stateIndex === $scope.stateIndex) {
// state is unchanged
return;
}

console.log(self.state);
$scope.stateIndex = stateIndex;
self.onToggleSelected($scope.states[stateIndex]);
};

// TODO: generalise by moving this to bindings?
$scope.states = ["empty", "yes", "maybe", "no"];
// The text that appears next to the box
$scope.labelValueTexts = ["", "yes", "maybe", "no"];
// possible indexes that the user can choose
$scope.stateIndexes = [1,2,3];


if (typeof self.state === "undefined") {
// default to initialise to empty
self.state = "empty";
}
$scope.stateIndex = $scope.states.indexOf(self.state);



// whether it shows all three options at once to click like buttons
// or whether it shows the current state only and cycles through
$scope.expanded = self.expanded;

}],
bindings: {
isChecked: "=",
onToggleSelected: "=",
state: "<",
text:"<",
expanded: "<"
}
});
29 changes: 24 additions & 5 deletions src/app/citizenScience/labels/textLabels/labelCheck.tpl.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,26 @@
<div class="label-check">
<a ng-click="toggleLabel()" class="main-button">
<i class="fa"
ng-class="$ctrl.isChecked() ? 'fa-check-square-o' : 'fa-square-o'"
aria-hidden="true"></i><span>{{$ctrl.text}}</span>
<a>
<div ng-if="!expanded">
<a ng-click="toggleLabel()" class="main-button {{states[stateIndex]}}">
<span class="label-text">{{$ctrl.text}}</span>
<i class="fa"
aria-hidden="true">
<b class="fa" aria-hidden="true"></b>
</i><span class="label-value-text">{{labelValueTexts[stateIndex]}}</span>
<a>
</div>
<div ng-if="expanded">

<a ng-click="toggleLabel()" class="main-button {{states[stateIndex]}}">
<span class="label-text">{{$ctrl.text}}</span>
<a>


<a ng-click="toggleLabel(forStateIndex)" class="main-button {{states[forStateIndex]}}" ng-repeat="forStateIndex in stateIndexes">
<i class="fa"
aria-hidden="true">
<b class="fa" aria-hidden="true" ng-class="{'grey': forStateIndex !== stateIndex}"></b>
</i><span class="label-value-text">{{labelValueTexts[forStateIndex]}}</span>
<a>
</div>

</div>
57 changes: 0 additions & 57 deletions src/app/citizenScience/labels/textLabels/labels.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,63 +15,6 @@ angular.module("bawApp.components.citizenScienceTextLabels",

console.log(self);

////////////////




////////////////

// /**
// * Add or remove the lable num to the list of selected labels for this sample
// * Send the new set of labels to the dataset
// * Note, we can't guarantee the order that the api calls will reach the google sheet.
// * if the user adds and removes a label in quick succession, they might arrive out of order
// * resulting in the wrong labels being applied.
// * @param label string
// */
// $scope.toggleLabel = function (labelNum) {
//
// var currentSample = self.samples[self.currentSampleNum];
//
// currentSample.labels[labelNum] = !currentSample.labels[labelNum];
//
// currentSample.done = true;
//
// var tags = self.labels.filter(function (value, index) {
// return currentSample.labels[index];
// }).map(function (value) {
// return value.tags;
// });
//
// var url = CitizenScienceCommon.apiUrl("setLabels",
// self.csProject,
// currentSample.name,
// currentSample.recordingId,
// currentSample.startOffset,
// CitizenScienceCommon.labelsAsString(tags));
// $http.get(url).then(function (response) {
// console.log(response.data);
// });
//
// };
//
// /**
// * Whether the label has been attached to the current sample
// * @param label Object
// * @returns Boolean
// */
// $scope.labelSelected = function (labelNum) {
// if(self.currentSampleNum === -1) {
// return false;
// }
// var currentSample = self.samples[self.currentSampleNum];
//
// return currentSample.labels[labelNum];
//
// };
//


}],
bindings: {
Expand Down
8 changes: 8 additions & 0 deletions src/app/citizenScience/labels/thumbLabels/_thumbs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,14 @@ $triangle: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.o
right:8px;
color: #fff;
text-shadow: 1px 1px 2px #000;

&.yes {

}
&.maybe {

}

}

}
Expand Down
24 changes: 17 additions & 7 deletions src/app/citizenScience/labels/thumbLabels/label.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,23 @@ angular.module("bawApp.components.citizenScienceThumbLabels.label",
function ($scope, SampleLabels) {

/**
* A label is "selected" if it has been applied to the current sample
* A label "state" means it's response state e.g. yes, no, maybe, empty
* A label is "active" if it has been clicked to show details
*/

var self = this;

$scope.isSelected = function() {
return SampleLabels.getValue(self.label.id);
};
// $scope.currentState = function() {
// return SampleLabels.getValue(self.label.id);
// };


$scope.state = "empty";

$scope.$watch("state", function (newVal, oldVal) {
console.log(newVal);
SampleLabels.setValue($scope.state, self.label.id);
});

$scope.isShowingDetails = function () {
return self.currentDetailsLabelId.value === self.label.id;
Expand All @@ -39,11 +47,13 @@ angular.module("bawApp.components.citizenScienceThumbLabels.label",
};

/**
* callback when this label is either attached or detached from the current sample
* callback when this label state changes
* This is used to get reverse binding into transcluded components.
* @param isSelected Boolean
*/
self.onToggleSelected = function (isSelected) {
SampleLabels.setValue(isSelected, self.label.id);
self.onToggleSelected = function (state) {
SampleLabels.setValue(state, self.label.id);
$scope.state = state;
};

}],
Expand Down
Loading

0 comments on commit 9f1210a

Please sign in to comment.