zoom in/out

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

@@ -13,6 +13,9 @@ $(document).ready(function(){
 	$('#nav_right_half').click(dateHalfRightShift);
 	$('#nav_right').click(dateRightShift);
 	
+	$('#zoom_in').click(zoomIn);
+	$('#zoom_out').click(zoomOut);
+	
 	AutoComplete({
 		HttpMethod: "GET",
 		Delay: 300,
@@ -40,30 +43,113 @@ $(document).ready(function(){
 	});
 });
 
+function zoomIn() 
+{
+	shiftDate(0.25);
+	zoom(0.5);
+	plot();
+}
+
+function zoomOut() 
+{
+	shiftDate(-0.5);
+	zoom(2);
+	plot();
+}
+
 function dateLeftShift()
 {
 	shiftDate(-1);
+	plot();
 }
 function dateHalfLeftShift()
 {
 	shiftDate(-0.5);
+	plot();
 }
 
 function dateHalfRightShift()
 {
 	shiftDate(0.5);
+	plot();
 }
 function dateRightShift()
 {
 	shiftDate(1);
+	plot();
 }
 
+function zoom(factor)
+{
+	if (!$('#search-date-range').is(":invalid")) {
+	    
+		var dateRange = $('#search-date-range').val();
+		var tokens = dateRange.split(/ +/,2);
+		
+		if(tokens.length == 2)
+		{		
+			var value = parseInt(tokens[0]);
+			var period = tokens[1];
+			
+			var newValue = value*factor;
+			while (newValue != Math.round(newValue)){
+			
+				switch (period) {
+					case "second":
+					case "seconds":
+						if (value == 1) {
+							// we reached the smallest range
+						}
+						else if (value % 2 == 1){
+							value = value -1;
+						}
+						break;
+					case "minute":
+					case "minutes":
+						value = value * 60;
+						period = "seconds";
+						break;
+					case "hour":
+					case "hours":
+						value = value * 60;
+						period = "minutes";
+						break;
+					case "day":
+					case "days":
+						value = value * 24;
+						period = "hours";
+						break;
+					case "week":
+					case "weeks":
+						value = value * 7;
+						period = "days";
+						break;
+					case "month":
+					case "months":
+						value = value * 30;
+						period = "days";
+						break;
+					default:
+						console.log("unhandled value: "+ period);
+						break;
+					}
+			
+				newValue = value*factor
+			}
+			
+			
+			$('#search-date-range').val(newValue + " " + period);
+		}
+	}
+}
+
+
+
 function shiftDate(directionalFactor)
 {
 	var dateBefore = Date.parse($('#search-date-from').val());
 	var newDate = shiftByInterval(dateBefore, directionalFactor);
 	$('#search-date-from').val(newDate.toString("yyyy-MM-dd HH:mm:ss"));
-	plot();
 }
 
 function shiftByInterval(date, directionalFactor)
@@ -104,7 +190,7 @@ function shiftByInterval(date, directionalFactor)
 				break;
 			case "month":
 			case "months":
-				config = { months: value };
+				config = { days: 30*value };
 				break;
 	
 			default:

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

@@ -70,6 +70,10 @@
 	<div id="navigation">
 		<button id="nav_left"><i class="fa fa-angle-double-left" aria-hidden="true"></i></button>
 		<button id="nav_left_half"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
+		<div>
+			<button id="zoom_in"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>
+			<button id="zoom_out"><i class="fa fa-minus-circle" aria-hidden="true"></i></button>
+		</div>
 		<button id="nav_right_half"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
 		<button id="nav_right"><i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
 	</div>