IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(timepickerV2): absolute time / calendar picker works, #2761

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-09-18 11:01:37 +02:00
parent a8a94ef87b
commit 69db9e0d45
6 changed files with 48 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/dashboard/dashboardSrv.js
View File

@ -217,7 +217,7 @@ function (angular, $, kbn, _, moment) {
p.formatDate = function(date, format) {
if (!moment.isMoment(date)) {
date = moment(date)
date = moment(date);
}
format = format || 'YYYY-MM-DD HH:mm:ss';

6
public/app/features/dashboard/timepicker/dropdown.html
View File

@ -10,7 +10,7 @@
</div>
<div ng-if="openFromPicker">
<datepicker ng-model="absolute.to" class="gf-timepicker-component" show-weeks="false"></datepicker>
<datepicker ng-model="absolute.fromJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteFromChanged()"></datepicker>
</div>
<label class="small">To:</label>
@ -21,6 +21,10 @@
</button>
</div>
<div ng-if="openToPicker">
<datepicker ng-model="absolute.toJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteToChanged()"></datepicker>
</div>
<label class="small">Refreshing every:</label>
<select ng-model="refresh.value" class='input-medium' ng-options="f.value as f.text for f in refresh.options">
</select>

43
public/app/features/dashboard/timepicker/input_date.js
View File

@ -1,7 +1,8 @@
define([
"angular",
"lodash",
"moment",
],function (angular, moment) {
],function (angular, _, moment) {
'use strict';
angular.
@ -11,22 +12,30 @@ define([
restrict: 'A',
require: 'ngModel',
link: function ($scope, $elem, attrs, ngModel) {
// var format = 'YYYY-MM-DD HH:mm:ss.SSS';
// // $elem.after('<div class="input-datetime-format">' + format + '</div>');
//
// // What should I make with the input from the user?
// var fromUser = function (text) {
// var parsed = moment(text, format);
// return parsed.isValid() ? parsed : undefined;
// };
//
// // How should I present the data back to the user in the input field?
// var toUser = function (datetime) {
// return moment(datetime).format(format);
// };
//
// ngModel.$parsers.push(fromUser);
// ngModel.$formatters.push(toUser);
var format = 'YYYY-MM-DD HH:mm:ss';
// $elem.after('<div class="input-datetime-format">' + format + '</div>');
// What should I make with the input from the user?
var fromUser = function (text) {
console.log('fromUser: ' + text);
return text;
// if (_.isString(text)) {
// }
// var parsed = moment(text, format);
// return parsed.isValid() ? parsed : undefined;
};
// How should I present the data back to the user in the input field?
var toUser = function (currentValue) {
if (moment.isMoment(currentValue)) {
return currentValue.format(format);
} else {
return currentValue;
}
};
ngModel.$parsers.push(fromUser);
ngModel.$formatters.push(toUser);
}
};
});

10
public/app/features/dashboard/timepicker/timepicker.ts
View File

@ -54,7 +54,7 @@ export class TimePickerCtrl {
this.$scope.dashboard.formatDate(time.to, format);
}
this.$scope.absoluteJs = {form: time.from.toDate(), to: time.to.toDate()};
this.$scope.absolute = {fromJs: time.from.toDate(), toJs: time.to.toDate()};
this.$scope.timeRaw = timeRaw;
this.$scope.tooltip = this.$scope.dashboard.formatDate(time.from) + ' <br>to<br>';
this.$scope.tooltip += this.$scope.dashboard.formatDate(time.to);
@ -92,6 +92,14 @@ export class TimePickerCtrl {
this.$scope.appEvent('hide-dash-editor');
}
absoluteFromChanged() {
this.$scope.timeRaw.from = moment(this.$scope.absolute.fromJs);
}
absoluteToChanged() {
this.$scope.timeRaw.to = moment(this.$scope.absolute.toJs);
}
setRelativeFilter(timespan) {
this.$scope.panel.now = true;

7
public/less/timepicker.less
View File

@ -44,13 +44,18 @@
}
.gf-timepicker-component {
margin-bottom: 10px;
button.btn-sm {
.buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
background-image: none;
border: none;
padding: 6px 9px;
color: @textColor;
&.active .text-info {
&.active span {
color: @blue;
font-weight: bold;
}
.text-info {
color: @orange;
font-weight: bold;
}

2
public/test/test-main.js
View File

@ -19,7 +19,7 @@ require.config({
'angular-sanitize': 'vendor/angular-sanitize/angular-sanitize',
angularMocks: 'vendor/angular-mocks/angular-mocks',
'angular-dragdrop': 'vendor/angular-native-dragdrop/draganddrop',
'angular-ui': 'vendor/angular-ui/tabs',
'angular-ui': 'vendor/angular-ui/ui-bootstrap-tpls',
'angular-strap': 'vendor/angular-other/angular-strap',
timepicker: 'vendor/angular-other/timepicker',
datepicker: 'vendor/angular-other/datepicker',