andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

add a datetime picker

Browse Source 
Unfortunately the datetime picker does not support seconds. But it is
one of the few that support date and time and are flexible enough to
be used with VueJS.
This commit is contained in:
Andreas Huber
2018-08-04 08:32:04 +00:00
parent 6871e250ad
commit 182d1edd97
8 changed files with 53 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pdb-ui/src/main/resources/application-testing.properties
View File

@@ -1,4 +1,6 @@
#db.base=D:/ws/pdb/dataNew
db.base=C:/Temp/pdb/testing
server.port=17333
gnuplot.home=D:/ws/pdb/gnuplot-5.2
gnuplot.home=D:/ws/pdb/gnuplot-5.2
cache.images.duration.seconds=86400
mode.production=false

1
pdb-ui/src/main/resources/resources/css/air-datepicker-2.2.3.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

12
pdb-ui/src/main/resources/resources/js/air-datepicker-2.2.3.en.js Normal file
View File

@@ -0,0 +1,12 @@
;(function ($) { $.fn.datepicker.language['en'] = {
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
months: ['January','February','March','April','May','June', 'July','August','September','October','November','December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
today: 'Today',
clear: 'Clear',
dateFormat: 'mm/dd/yyyy',
timeFormat: 'hh:ii aa',
firstDay: 0
}; })(jQuery);

2
pdb-ui/src/main/resources/resources/js/air-datepicker-2.2.3.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

33
pdb-ui/src/main/resources/resources/js/ui.js
View File

@@ -504,7 +504,7 @@ Vue.component('navigation-bar', {
{
var dateBefore = Date.parse(data.searchBar.dateFrom);
var newDate = this.shiftByInterval(dateBefore, directionalFactor);
data.searchBar.dateFrom = newDate.toString("yyyy-MM-dd HH:mm:ss");
data.searchBar.dateFrom = newDate.toString("yyyy-MM-dd HH:mm");
},
shiftByInterval: function(date, directionalFactor)
{
@@ -593,6 +593,25 @@ Vue.component('group-by-item', {
Vue.component('search-bar', {
props: ['searchBar'],
mounted: function() {
$('#search-date-from').datepicker({
language: 'en',
timepicker: true,
dateFormat: 'yyyy-mm-dd',
timeFormat: 'hh:ii',
onSelect: function onSelect(dateAsString, dateObject) {
data.searchBar.dateFrom = dateAsString;
}
});
$('#search-date-from').data('datepicker').selectDate(Date.parse(data.searchBar.dateFrom));
},
watch: {
// whenever searchBar.dateFrom changes, this function will run
'searchBar.dateFrom': function (newDateFrom, oldDateFrom) {
const newDate = Date.parse(newDateFrom);
$('#search-date-from').data('datepicker').selectDate(newDate);
}
},
methods: {
plot: function (event) {
var vm = this;
@@ -713,13 +732,21 @@ Vue.component('search-bar', {
<div class="group">
<label for="search-date-from">From Date:</label>
<input type='text'
id="search-date-from"
class='datepicker-here input_date'
v-model="searchBar.dateFrom"
required="required"
pattern="\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2]\\d|3[0-1]) [0-2]\\d:[0-5]\\d"
/>
<!--
<input
id="search-date-from"
v-model="searchBar.dateFrom"
class="input_date"
type="text"
required="required"
pattern="\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2]\\d|3[0-1]) [0-2]\\d:[0-5]\\d:[0-5]\\d" />
pattern="\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2]\\d|3[0-1]) [0-2]\\d:[0-5]\\d:[0-5]\\d" />-->
</div>
<div class="group">
@@ -865,7 +892,7 @@ var data = {
'selected': GetURLParameter('limitBy.selected','NO_LIMIT'),
'number': GetURLParameter('limitBy.number',10)
},
dateFrom: GetURLParameter('dateFrom', Date.now().add({ days: -7 }).toString("yyyy-MM-dd HH:mm:ss")), // '2018-01-05 09:03:00'
dateFrom: GetURLParameter('dateFrom', Date.now().add({ days: -7 }).toString("yyyy-MM-dd HH:mm")), // '2018-01-05 09:03'
dateRange: GetURLParameter('dateRange','1 week'),
axisScale: GetURLParameter('axisScale','LOG10'),
aggregate: GetURLParameter('aggregate','NONE'),

3
pdb-ui/src/main/resources/templates/main.mustache
View File

@@ -3,6 +3,8 @@
<head>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/air-datepicker-2.2.3.min.js"></script>
<script type="text/javascript" src="js/air-datepicker-2.2.3.en.js"></script>
<script type="text/javascript" src="js/invaders.js"></script>
{{#isProduction}}
<script type="text/javascript" src="js/vue-2.5.16.min.js"></script>
@@ -14,6 +16,7 @@
<link rel="stylesheet" type="text/css" href="css/design.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/invaders.css">
<link rel="stylesheet" type="text/css" href="css/air-datepicker-2.2.3.min.css">
</head>
<body>
<div id="app">