Commit 69db9e0d by Torkel Ödegaard

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

parent a8a94ef8
......@@ -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';
......
......@@ -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>
......
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 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 (datetime) {
// return moment(datetime).format(format);
// };
//
// ngModel.$parsers.push(fromUser);
// ngModel.$formatters.push(toUser);
};
// 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);
}
};
});
......
......@@ -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;
......
......@@ -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;
}
......
......@@ -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',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment