Uses JavaScript to update "time elapsed" counter in maintenance tools

Signed-off-by: Jon Stovell <jonstovell@gmail.com>

Author: Sesquipedalian

Languages/en_US/Maintenance.php

@@ -65,13 +65,7 @@
 $txt['maintenance_step'] = 'Step';
 $txt['maintenance_overall_progress'] = 'Overall Progress';
 $txt['maintenance_substep_progress'] = 'Step Progress';
-$txt['maintenance_time_elasped_ms'] = 'Time Elapsed {m, plural,
-	one {# minute}
-	other {# minutes}
-} and {s, plural,
-	one {# second}
-	other {# seconds}
-}';
+$txt['maintenance_time_elapsed'] = 'Time Elapsed: ';
 
 // File Permissions.
 $txt['chmod_linux_info'] = 'If you have a shell account, the following command can automatically correct permissions on these files';

Sources/Maintenance/Maintenance.php

@@ -744,12 +744,17 @@ public static function loginWithDatabasePassword(
 	 */
 	public static function getTimeElapsed(): string
 	{
-		// How long have we been running this?
-		$elapsed = time() - (int) self::$context['started'];
-		$mins = (int) ($elapsed / 60);
-		$seconds = $elapsed - $mins * 60;
+		$duration = (new \DateTime('@' . self::$context['started']))->diff(new \DateTime());
 
-		return Lang::getTxt('maintenance_time_elasped_ms', ['m' => $mins, 's' => $seconds]);
+		if ((int) $duration->format('%a') > 0) {
+			return \strval((int) $duration->format('%h') + ((int) $duration->format('%a') * 24)) . $duration->format(':%I:%S');
+		}
+
+		if ((int) $duration->format('%h') > 0) {
+			return $duration->format('%h:%I:%S');
+		}
+
+		return $duration->format('%i:%S');
 	}
 
 	/**

Themes/default/MaintenanceTemplate.php

@@ -46,6 +46,7 @@ public static function header(): void
 			const smf_charset = \'UTF-8\';
 			const allow_xhjr_credentials = true;
 			const isDebug = ', Maintenance::$tool->isDebug() ? 'true' : 'false', ';
+			const timeStarted = ', Maintenance::$context['started'], ';
 			let startPercent = ', Maintenance::$overall_percent, ';
 		</script>
 	</head>
@@ -124,8 +125,9 @@ public static function header(): void
 							<span id="substep_text">', Maintenance::getItemsProgress(), '%</span>
 						</div>
 
-						<div id="time_elapsed" class="smalltext time_elapsed">
-							', Maintenance::getTimeElapsed(), '
+						<div class="smalltext time_elapsed">
+							', Lang::getTxt('maintenance_time_elapsed', file: 'Maintenance'), '
+							<time id="time_elapsed">', Maintenance::getTimeElapsed(), '</time>
 						</div>
 					</div>
 					<div id="main_screen" class="clear">
@@ -183,6 +185,20 @@ function updateItemsProgress(current, max)
 					setInnerHTML(document.getElementById("item_text"), width + "%");
 				}
 			}
+
+			// This function dynamically updates the "time elapsed" counter.
+			function updateTimeElapsed()
+			{
+				const elapsed = (Date.now() / 1000) - timeStarted;
+
+				const s = elapsed % 60;
+				const m = Math.floor(elapsed / 60) % 60;
+				const h = Math.floor(elapsed / 3600);
+
+				if (document.getElementById("time_elapsed")) {
+					document.getElementById("time_elapsed").textContent = ((h > 0) ? ((h < 10) ? "0" + h.toString() : h.toString()) + ":" : "") + ((m < 10) ? "0" + m.toString() : m.toString()) + ":" + ((s < 10) ? "0" + s.toString() : s.toString());
+				}
+			}
 		</script>
 	</body>
 	</html>';