Auto-fill date fields

Surround the date event and time entry duplication in a timeout. We
need to wait for the select boxes to be filled in before we can
duplicate the time entries, so wait a conservative amount of time to
ensure the first entry is filled in before duplicating it.

The date event listener is also part of this timeout as it fires an
event on load without user interaction. We don't care about that
initial event.

Our date listener will listen for changes to the first time entry's
date field and automatically fill in the four duplicated entries with
subsequent dates increasing by 1 for each entry. This allows us to
select a Monday for the first time entry and have the rest of the week
automatically filled in for us.

1 files changed, 28 insertions, 4 deletions

diff --git a/timetasker.js b/timetasker.js
index 4494d81..2678dc4 100644
--- a/timetasker.js
+++ b/timetasker.js
@@ -37,14 +37,30 @@
 		popupate_select(work_type_0, WORK_TYPE);
 	}, 500);
 
-	// popupate_select(date_0, '');
 	time_0.value = TIME;
 	popupate_select(billable_0, BILLABLE ? 't' : 'f');
 
 
-	for (var i = 0; i < 4; i++) {
-		duplicate_0.click();
-	}
+	window.setTimeout(function() {
+		for (var i = 0; i < 4; i++) {
+			duplicate_0.click();
+		}
+
+		date_0.addEventListener('change', function() {
+			var date_group = this.value.split('/')
+			var date = new Date(
+				'20' + date_group[2],
+				date_group[1] - 1, // JS 0-indexed month
+				date_group[0]
+			);
+
+			for (var i = 2; i <= 5; i++) {
+				var date_el = document.getElementById('f_date' + i);
+				date.setDate(date.getDate() + 1);
+				date_el.value = format_date(date);
+			}
+		});
+	}, 2000);
 
 
 	function popupate_select(element, name) {
@@ -63,4 +79,12 @@
 		event.initEvent('change', false, true);
 		element.dispatchEvent(event);
 	}
+
+	// Format: dd/mm/yy
+	function format_date(date) {
+		var month = date.getMonth() + 1;
+		var year = date.getFullYear().toString().substring(2);
+
+		return date.getDate() + '/' + month + '/' + year;
+	}
 })();