add a datetime picker

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.

data-store/src/main/java/org/lucares/pdb/datastore/internal/DataStore.java

@@ -59,7 +59,7 @@ public class DataStore implements AutoCloseable {
 
 		final long start = System.nanoTime();
 		final Stream<ListingFileEntry> files = folderStorage.list();
-		files// .parallel()
+		files.parallel()
 				.forEach(listingFileEntry -> {
 
 					listingFileEntry.unsetRelativePath(); // unset the path, so that we don't store it for every document (will

pdb-plotting/src/main/java/org/lucares/pdb/plot/api/PlotSettings.java

@@ -12,7 +12,7 @@ import org.apache.commons.lang3.StringUtils;
 
 public class PlotSettings {
 
-	private static final DateTimeFormatter DATE_FORMAT = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
+	private static final DateTimeFormatter DATE_FORMAT = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm");
 
 	private String query;
 

pdb-ui/src/main/resources/application-testing.properties

@@ -2,3 +2,5 @@
 db.base=C:/Temp/pdb/testing
 server.port=17333
 gnuplot.home=D:/ws/pdb/gnuplot-5.2
+cache.images.duration.seconds=86400
+mode.production=false

pdb-ui/src/main/resources/resources/js/air-datepicker-2.2.3.en.js

@@ -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);

pdb-ui/src/main/resources/resources/js/ui.js

@@ -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'),

pdb-ui/src/main/resources/templates/main.mustache

@@ -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">