replace the dateTo with an interval

I hope an interval is easier to handle than having 
to change two date fields

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

@@ -5,6 +5,7 @@ import java.time.LocalDateTime;
 import java.time.OffsetDateTime;
 import java.time.ZoneOffset;
 import java.time.format.DateTimeFormatter;
+import java.time.temporal.ChronoUnit;
 
 import org.apache.commons.lang3.StringUtils;
 
@@ -26,7 +27,7 @@ public class PlotSettings {
 
 	private String dateFrom;
 
-	private String dateTo;
+	private String dateRange;
 
 	public String getQuery() {
 		return query;
@@ -84,12 +85,12 @@ public class PlotSettings {
 		this.dateFrom = dateFrom;
 	}
 
-	public String getDateTo() {
-		return dateTo;
+	public String getDateRange() {
+		return dateRange;
 	}
 
-	public void setDateTo(final String dateTo) {
-		this.dateTo = dateTo;
+	public void setDateRange(final String dateRange) {
+		this.dateRange = dateRange;
 	}
 
 	public OffsetDateTime dateFrom() {
@@ -103,10 +104,40 @@ public class PlotSettings {
 	}
 
 	public OffsetDateTime dateTo() {
-		if (StringUtils.isEmpty(dateTo)) {
+
+		final int period = Integer.parseInt(dateRange.split(" ")[0]);
+		final ChronoUnit unit = toChronoUnit(dateRange.split(" ")[1]);
+
+		if (StringUtils.isEmpty(dateRange)) {
 			return OffsetDateTime.ofInstant(Instant.ofEpochMilli(Long.MAX_VALUE), ZoneOffset.UTC);
 		} else {
-			return LocalDateTime.parse(dateTo, DATE_FORMAT).atOffset(ZoneOffset.UTC);
+			return dateFrom().plus(period, unit);
+		}
+	}
+
+	private ChronoUnit toChronoUnit(final String string) {
+
+		switch (string) {
+		case "second":
+		case "seconds":
+			return ChronoUnit.SECONDS;
+		case "minute":
+		case "minutes":
+			return ChronoUnit.MINUTES;
+		case "hour":
+		case "hours":
+			return ChronoUnit.HOURS;
+		case "day":
+		case "days":
+			return ChronoUnit.DAYS;
+		case "week":
+		case "weeks":
+			return ChronoUnit.WEEKS;
+		case "month":
+		case "months":
+			return ChronoUnit.MONTHS;
+		default:
+			throw new IllegalArgumentException(string + " is an unknown chrono unit");
 		}
 	}
 }

pdb-ui/src/main/java/org/lucares/pdbui/PlotSettingsTransformer.java

@@ -17,7 +17,7 @@ class PlotSettingsTransformer {
 		result.setLimit(request.getLimit());
 		result.setLimitBy(toLimit(request.getLimitBy()));
 		result.setDateFrom(request.getDateFrom());
-		result.setDateTo(request.getDateTo());
+		result.setDateRange(request.getDateRange());
 
 		return result;
 	}

pdb-ui/src/main/java/org/lucares/pdbui/domain/PlotRequest.java

@@ -15,7 +15,7 @@ public class PlotRequest {
 
 	private String dateFrom;
 
-	private String dateTo;
+	private String dateRange;
 
 	public String getQuery() {
 		return query;
@@ -78,11 +78,15 @@ public class PlotRequest {
 		this.dateFrom = dateFrom;
 	}
 
-	public String getDateTo() {
-		return dateTo;
+	public String getDateRange() {
+		return dateRange;
 	}
 
-	public void setDateTo(final String dateTo) {
-		this.dateTo = dateTo;
+	public void setDateRange(final String dateRange) {
+		if (!dateRange.matches("\\d+ (second|minute|hour|day|week|month)s?")) {
+			throw new IllegalArgumentException(dateRange + " is not a valid range");
 		}
+		this.dateRange = dateRange;
+	}
+
 }

pdb-ui/src/main/resources/resources/css/design.css

@@ -99,3 +99,9 @@ body{
 	align-items: center;
 }
 
+input:required:invalid {
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAT1JREFUeNpi/P//PwMpgImBRMACY/x7/uDX39sXt/67cMoDyOVgMjBjYFbV/8kkqcCBrIER5KS/967s+rmkXxzI5wJiRSBm/v8P7NTfHHFFl5mVdIzhGv4+u///x+xmuAlcdXPB9KeqeLgYd3bDU2ZpRRmwH4DOeAI07QXIRKipYPD35184/nn17CO4p/+cOfjl76+/X4GYAYThGn7/g+Mfh/ZZwjUA/aABpJVhpv6+dQUjZP78Z0YEK7OezS2gwltg64GmfTu6i+HL+mUMP34wgvGvL78ZOEysf8M1sGgZvQIqfA1SDAL8iUUMPIFRQLf+AmMQ4DQ0vYYSrL9vXDz2sq9LFsiX4dLRA0t8OX0SHKzi5bXf2HUMBVA0gN356N7p7xdOS3w5fAgcfNxWtn+BJi9gVVBOQfYPQIABABvRq3BwGT3OAAAAAElFTkSuQmCC);
+	background-position: right top;
+	background-repeat: no-repeat;
+	box-shadow: none;
+}

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

@@ -90,7 +90,7 @@ function plot(event){
 	request['limitBy'] = $('#search-limit-by').val();
 	request['limit'] = parseInt($('#search-limit-value').val());
 	request['dateFrom'] = $('#search-date-from').val();
-	request['dateTo'] = $('#search-date-to').val();
+	request['dateRange'] = $('#search-date-range').val();
 	
 	
 	var success = function(response){

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

@@ -32,8 +32,16 @@
 		<label for="search-date-from">From Date:</label>
 		<input id="search-date-from" class="input_date" type="text" value="{{oldestValue}}">
 		
-		<label for="search-date-to">To Date:</label>
-		<input id="search-date-to" class="input_date" type="text" value="{{latestValue}}">
+		<label for="search-date-range">Interval:</label>
+		<input id="search-date-range" type="text" list="ranges" required="" value="1 week" pattern="\d+ (second|minute|hour|day|week|month)s?">
+		<datalist id="ranges">
+			<option value="60 seconds">
+			<option value="5 minutes">
+			<option value="1 hour">
+			<option value="1 day">
+			<option value="1 week">
+			<option value="1 month">
+		</datalist>
 		
 		<button id="search-submit"><i class="fa fa-area-chart"> Plot</i></button>
 	</div>