Add option to select clock time format (12/24-hr)

TerryDutton · Nov 15, 2022 · 55e28ac · 55e28ac
1 parent adace32
commit 55e28ac
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 6 deletions.
diff --git a/background.js b/background.js
@@ -1015,13 +1015,20 @@ function createBlockInfo(id, url) {
 		let clockOffset = gOptions["clockOffset"];
 		let date = new Date(Date.now() + (clockOffset * 60000)).getDate();
 
+		// Get clock time format
+		let clockTimeOpts = {};
+		let clockTimeFormat = gOptions["clockTimeFormat"];
+		if (clockTimeFormat > 0) {
+			clockTimeOpts.hour12 = (clockTimeFormat == 1);
+		}
+
 		// Convert to string
 		if (unblockTime.getDate() == date) {
 			// Same day: show time only
-			unblockTime = unblockTime.toLocaleTimeString();
+			unblockTime = unblockTime.toLocaleTimeString(undefined, clockTimeOpts);
 		} else {
 			// Different day: show date and time
-			unblockTime = unblockTime.toLocaleString();
+			unblockTime = unblockTime.toLocaleString(undefined, clockTimeOpts);
 		}
 	}
 

diff --git a/common.js b/common.js
@@ -87,6 +87,7 @@ const GENERAL_OPTIONS = {
 	contextMenu: { type: "boolean", def: true, id: "contextMenu" }, // default: enabled
 	toolsMenu: { type: "boolean", def: true, id: "toolsMenu" }, // default: enabled
 	matchSubdomains: { type: "boolean", def: false, id: "matchSubdomains" }, // default: disabled
+	clockTimeFormat: { type: "string", def: "0", id: "clockTimeFormat" }, // default: locale default
 	saveSecs: { type: "string", def: "10", id: "saveSecs" }, // default: every 10 seconds
 	clockOffset: { type: "string", def: "", id: "clockOffset" }, // default: no offset
 	allFocused: { type: "boolean", def: false, id: "allFocused" }, // default: disabled

diff --git a/options.html b/options.html
@@ -418,6 +418,15 @@
 								<input id="matchSubdomains" type="checkbox">
 								<label for="matchSubdomains">Block all subdomains (not just www)</label>
 							</p>
+							<p>
+								Display clock times in
+								<select id="clockTimeFormat">
+									<option value="0">default</option>
+									<option value="1">12-hour</option>
+									<option value="2">24-hour</option>
+								</select>
+								format
+							</p>
 							<p>
 								Save time data every <input id="saveSecs" type="text" size="2" title="Default: 10"> seconds
 							</p>

diff --git a/options.js b/options.js
@@ -20,6 +20,7 @@ var gSetDisabled;
 var gSetOrdering, gSetReordered;
 var gTabIndex = 0;
 var gNewOpen = true;
+var gClockTimeOpts;
 
 // Initialize form (with specified number of block sets)
 //
@@ -416,6 +417,13 @@ function retrieveOptions() {
 
 		setTheme(options["theme"]);
 
+		// Get clock time format
+		gClockTimeOpts = {};
+		let clockTimeFormat = options["clockTimeFormat"];
+		if (clockTimeFormat > 0) {
+			gClockTimeOpts.hour12 = (clockTimeFormat == 1);
+		}
+
 		// Get current time in seconds
 		let clockOffset = options["clockOffset"];
 		let now = Math.floor(Date.now() / 1000) + (clockOffset * 60);
@@ -666,7 +674,7 @@ function showClockOffsetTime() {
 		$("#clockOffsetTime").css("display", "none");
 	} else {
 		let timedate = new Date(Date.now() + (clockOffset * 60000));
-		$("#clockOffsetTime").html(timedate.toLocaleString());
+		$("#clockOffsetTime").html(timedate.toLocaleString(undefined, gClockTimeOpts));
 		$("#clockOffsetTime").css("display", "inline");
 	}
 }

diff --git a/override.js b/override.js
@@ -12,6 +12,7 @@ var gAccessRequiredInput;
 var gClockOffset;
 var gOverrideConfirm;
 var gOverrideMins;
+var gClockTimeOpts;
 
 // Initialize form
 //
@@ -48,6 +49,13 @@ function initializePage() {
 
 		setTheme(options["theme"]);
 
+		// Get clock time format
+		gClockTimeOpts = {};
+		let clockTimeFormat = options["clockTimeFormat"];
+		if (clockTimeFormat > 0) {
+			gClockTimeOpts.hour12 = (clockTimeFormat == 1);
+		}
+
 		gClockOffset = options["clockOffset"];
 
 		gOverrideConfirm = options["orc"];
@@ -215,7 +223,7 @@ function activateOverride() {
 	if (gOverrideConfirm) {
 		// Show confirmation dialog
 		endTime = new Date(endTime * 1000);
-		$("#alertOverrideEndTime").html(endTime.toLocaleTimeString());
+		$("#alertOverrideEndTime").html(endTime.toLocaleTimeString(undefined, gClockTimeOpts));
 		$("#alertOverrideActivated").dialog("open");
 	} else {
 		// Close page immediately (no confirmation dialog)

diff --git a/stats.js b/stats.js
@@ -9,6 +9,7 @@ function getElement(id) { return document.getElementById(id); }
 
 var gFormHTML;
 var gNumSets;
+var gClockTimeOpts;
 
 // Initialize form (with specified number of block sets)
 //
@@ -58,6 +59,13 @@ function refreshPage() {
 
 		setTheme(options["theme"]);
 
+		// Get clock time format
+		gClockTimeOpts = {};
+		let clockTimeFormat = options["clockTimeFormat"];
+		if (clockTimeFormat > 0) {
+			gClockTimeOpts.hour12 = (clockTimeFormat == 1);
+		}
+
 		// Get current time in seconds
 		let clockOffset = options["clockOffset"];
 		let now = Math.floor(Date.now() / 1000) + (clockOffset * 60);
@@ -98,7 +106,7 @@ function refreshPage() {
 			}
 
 			if (timedata[4] > now) {
-				let ldEndTime = new Date(timedata[4] * 1000).toLocaleString();
+				let ldEndTime = getFormattedClockTime(timedata[4] * 1000);
 				getElement(`ldEndTime${set}`).innerText = ldEndTime;
 			}
 		}
@@ -119,13 +127,19 @@ function getFormattedStats(now, timedata) {
 			- Math.floor(timedata[0] / 86400);
 	let weeks = Math.floor((days + 6) / 7);
 	return {
-		startTime: new Date(timedata[0] * 1000).toLocaleString(),
+		startTime: getFormattedClockTime(timedata[0] * 1000),
 		totalTime: formatTime(timedata[1]),
 		perWeekTime: formatTime(timedata[1] / weeks),
 		perDayTime: formatTime(timedata[1] / days)
 	};
 }
 
+// Return clock time in desired format (12/24-hour)
+//
+function getFormattedClockTime(time) {
+	return new Date(time).toLocaleString(undefined, gClockTimeOpts);
+}
+
 // Handle button click
 //
 function handleClick(e) {