Ssmith has uploaded a new change for review.
https://gerrit.wikimedia.org/r/148572
Change subject: WIP don't review: add datepickers/styles
......................................................................
WIP don't review: add datepickers/styles
Change-Id: If2a41287bcb00ba7fb049457726f7a8242107aa8
---
M public/css/style.css
M public/main.js
M public/views/templates/datePickers.html
M public/views/templates/widgets/fraudRiskScoreGauge.html
M public/views/widgetViews/FraudRiskScoreGauge.js
5 files changed, 64 insertions(+), 20 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/fundraising/dash
refs/changes/72/148572/1
diff --git a/public/css/style.css b/public/css/style.css
index 0d587f2..28dc1da 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -133,9 +133,9 @@
padding-top: 5px;
}
-.widgetbox-header {
+.widget-header {
color: #777;
- margin-bottom: 1em;
+ margin: 0 -1em ;
}
.widgetbox-content {
@@ -171,7 +171,8 @@
}
#fraudGauge-header{
- margin: 0 0 -40px 0;
+ margin: 0 0 -60px 0;
+ padding: 7px 17px 0 0;
}
/*#fraudTimePeriodDropdown {
diff --git a/public/main.js b/public/main.js
index 861f4d8..126802a 100644
--- a/public/main.js
+++ b/public/main.js
@@ -22,7 +22,7 @@
'flot.time': 'javascripts/vendor/flot/jquery.flot.time',
'raphael': 'javascripts/vendor/raphael/raphael',
'justGage': 'javascripts/vendor/justgage/justgage',
- 'bootstrap-datepicker':
'javascripts/bootstrap-datepicker/js/bootstrap-datepicker'
+ 'bootstrap-datepicker':
'javascripts/vendor/bootstrap-datepicker/js/bootstrap-datepicker'
},
shim: {
'QUnit': {
diff --git a/public/views/templates/datePickers.html
b/public/views/templates/datePickers.html
index a729c7a..ba46a9b 100644
--- a/public/views/templates/datePickers.html
+++ b/public/views/templates/datePickers.html
@@ -2,7 +2,7 @@
<div class="well well-small">
<label>Choose Time Period:</label>
<div class="radio">
- <label><input type="radio" name="chooseTimePeriod" id="byPreset"
value="byPreset" checked>By Preset
+ <label><input type="radio" name="chooseTimePeriod" id="byPreset"
value="byPreset" checked>By Preset:
<select class="form-control" id="timePeriodDropdown">
<option>Last 15 Minutes (Default)</option>
<option>Last Hour</option>
@@ -12,7 +12,7 @@
</label>
</div>
<div class="radio">
- <label><input type="radio" name="chooseTimePeriod"
id="byIncrement" value="byIncrement">By Increment
+ <label><input type="radio" name="chooseTimePeriod"
id="byIncrement" value="byIncrement">By Increment:
<select class="form-control" id="timePeriodDropdown">
<option>Hour</option>
<option>Day</option>
@@ -24,9 +24,13 @@
</div>
<div class="radio">
<label><input type="radio" name="chooseTimePeriod"
id="byTwoValues" value="byTwoValues">Between...
- <input type="text">
- <input type-"text">
+ <input type="text" data-provide='datepicker'> and
+ <input type-"text" data-provide='datepicker'>
</label>
</div>
+ <div class="alert alert-danger">
+ <p id="timePeriodSelections">You have chosen:
{{chosenTimePeriod}}</p>
+ </div>
+ <div class="btn btn-block btn-danger text-center"
id="submitTimePeriod">OK</div>
</div>
</div>
\ No newline at end of file
diff --git a/public/views/templates/widgets/fraudRiskScoreGauge.html
b/public/views/templates/widgets/fraudRiskScoreGauge.html
index 7b7aef8..f9fd1ba 100644
--- a/public/views/templates/widgets/fraudRiskScoreGauge.html
+++ b/public/views/templates/widgets/fraudRiskScoreGauge.html
@@ -1,12 +1,7 @@
<div class="widgetbox col-md-4" id="fraudGaugeWidget">
<div class="widgetbox-content">
- <div class="row">
- <span class="smallIcon pull-right">
- <span id="queryButton" class="popover-dismiss"
data-container="body" data-toggle="popover" data-placement="bottom" title="This
widget's SQL query:" data-content=""><i class="fa fa-database"></i>
- </span>
- </span>
- </div>
+
<div class="row">
<div class="col-md-12 gauge">
<h3 id="fraudGauge-header">
@@ -14,6 +9,12 @@
{{#if chosenFilters}} {{chosenFilters}} {{/if}}
</h3>
<div class="row">
+ <span class="smallIcon pull-right">
+ <span id="queryButton" class="popover-dismiss"
data-container="body" data-toggle="popover" data-placement="bottom" title="This
widget's SQL query:" data-content=""><i class="fa fa-database"></i>
+ </span>
+ </span>
+ </div>
+ <div class="row">
<div id="FraudRiskScoreGauge"></div>
</div>
diff --git a/public/views/widgetViews/FraudRiskScoreGauge.js
b/public/views/widgetViews/FraudRiskScoreGauge.js
index 92b3a33..dfd6ac3 100644
--- a/public/views/widgetViews/FraudRiskScoreGauge.js
+++ b/public/views/widgetViews/FraudRiskScoreGauge.js
@@ -6,9 +6,10 @@
'justGage',
'models/FraudScore',
'handlebars',
+ 'bootstrap-datepicker',
'text!views/templates/datePickers.html',
'text!views/templates/widgets/fraudRiskScoreGauge.html'],
-function($, _, Backbone, model, justGage, FraudScoreModel, Handlebars,
datePickersTemplate, template){
+function($, _, Backbone, model, justGage, FraudScoreModel, Handlebars,
DatePicker, datePickersTemplate, template){
var DatePickerSubView = Backbone.View.extend({
@@ -16,15 +17,52 @@
template: _.template( datePickersTemplate ),
+ events: {
+ 'click input[type="radio"]': 'selectDateType',
+ 'click .datepicker': 'pickDates',
+ 'click #submitTimePeriod': 'submitTimePeriod'
+ },
+
initialize: function(){
- this.setElement($('#fraudDatePickers'));
+ this.chosenTimePeriod = "Last 15 Minutes";
+ this.setElement($('#fraudDatePickers'));
+ this.template = Handlebars.compile(datePickersTemplate);
+ this.context = {
+ chosenTimePeriod: this.chosenTimePeriod
+ };
+ this.html = this.template(this.context);
+
+ },
+
+ selectDateType: function(event){
+ var dateType = event.target.id;
+ switch(dateType) {
+ case 'byIncrement':
+ console.log('its by increment');
+ break;
+ case 'byPreset':
+ console.log('its by preset');
+ break;
+ case 'byTwoValues':
+ console.log('its by two values');
+ break;
+ }
+ },
+
+ pickDates: function(){
+ console.log('pickin dates');
+ $('.datepicker').datepicker();
+ },
+
+ submitTimePeriod: function(){
+ console.log('The chosen dates were: ' );
},
render: function(){
- $(this.el).html(datePickersTemplate);
+ $(this.el).append(this.html);
}
@@ -54,14 +92,14 @@
//update default options
this.chosenFilters = [];
- this.chosenTimePeriod = "Last 15 Minutes";
//initialize query popover
//this.initializeQueryPopover();
+
this.template = Handlebars.compile(template);
this.context = {
- chosenTimePeriod: this.chosenTimePeriod,
+ chosenTimePeriod: 'etc',
chosenFilters: this.chosenFilters
};
this.html = this.template(this.context);
@@ -143,7 +181,6 @@
this.datepickers = new DatePickerSubView();
this.datepickers.render();
-
this.gauge = new JustGage({
id: "FraudRiskScoreGauge",
value: this.getFraudFailurePercent(),
@@ -151,6 +188,7 @@
max: 100,
relativeGaugeSize: true,
label: "% Failures",
+ levelColors: ['#89CC23', '#FFE146', '#c12e2a'],
levelColorsGradient: true
});
--
To view, visit https://gerrit.wikimedia.org/r/148572
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: If2a41287bcb00ba7fb049457726f7a8242107aa8
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/fundraising/dash
Gerrit-Branch: master
Gerrit-Owner: Ssmith <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
