IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 19:00:54 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(timepicker): added validation to timepicker, and validation state to apply button, fixes #3870

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-01-31 11:30:18 +01:00
parent d617d029d2
commit fa63d26485
3 changed files with 17 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
public/app/features/dashboard/timepicker/custom.html
View File

@ -1,47 +0,0 @@
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-clock-o"></i>
Custom time range
</div>
<button class="gf-box-header-close-btn" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="gf-box-body">
<div class="timepicker form-horizontal">
<form name="timeForm" style="margin-bottom: 0">
<div class="timepicker-from-column">
<label class="small">From</label>
<div class="fake-input timepicker-input">
<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.from.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.from.millisecond" required ng-pattern="patterns.millisecond" onClick="this.select();"/>
</div>
</div>
<div class="timepicker-to-column">
<label class="small">To (<a class="link" ng-class="{'strong':temptime.now}" ng-click="ctrl.setNow();temptime.now=true">set now</a>)</label>
<div class="fake-input timepicker-input">
<div ng-hide="temptime.now">
<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.to.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.to.millisecond" required ng-pattern="patterns.millisecond" onClick="this.select();"/>
</div>
<span type="text" ng-show="temptime.now" ng-disabled="temptime.now">&nbsp <i class="pointer fa fa-remove" ng-click="ctrl.setNow();temptime.now=false;"></i> Right Now <input type="text" name="dummy" style="visibility:hidden" /></span>
</div>
</div>
<br>
<button ng-click="ctrl.setAbsoluteTimeFilter(ctrl.validate(temptime));dismiss();" ng-disabled="!timeForm.$valid" class="btn btn-success">Apply</button>
<span class="" ng-hide="input.$valid">Invalid date or range</span>
</form>
</div>
</div>

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

@ -1,5 +1,5 @@
<div class="row pull-right">
<div class="gf-timepicker-absolute-section">
<form name="timeForm" class="gf-timepicker-absolute-section">
<h3>Time range</h3>
<label class="small">From:</label>
<div class="input-prepend">
@ -29,10 +29,10 @@
<select ng-model="ctrl.refresh.value" class='input-medium' ng-options="f.value as f.text for f in ctrl.refresh.options">
</select>
<button class="btn btn-inverse gf-timepicker-btn-apply" type="button" ng-click="ctrl.applyCustom()">
<button type="submit" class="btn btn-primary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">
Apply
</button>
</div>
</form>
<div class="gf-timepicker-relative-section">
<h3>Quick ranges</h3>

15
public/app/features/dashboard/timepicker/input_date.ts
View File

@ -1,6 +1,7 @@
///<reference path="../../../headers/common.d.ts" />
import moment from 'moment';
import * as dateMath from 'app/core/utils/datemath';
export function inputDateDirective() {
return {
@ -11,8 +12,14 @@ export function inputDateDirective() {
var fromUser = function (text) {
if (text.indexOf('now') !== -1) {
if (!dateMath.isValid(text)) {
ngModel.$setValidity("error", false);
return undefined;
}
ngModel.$setValidity("error", true);
return text;
}
var parsed;
if ($scope.ctrl.isUtc) {
parsed = moment.utc(text, format);
@ -20,7 +27,13 @@ export function inputDateDirective() {
parsed = moment(text, format);
}
return parsed.isValid() ? parsed : undefined;
if (!parsed.isValid()) {
ngModel.$setValidity("error", false);
return undefined;
}
ngModel.$setValidity("error", true);
return parsed;
};
var toUser = function (currentValue) {