add input parser for custom test duration popup

src/js/custom-test-duration-popup.js

@@ -3,6 +3,70 @@ import * as ManualRestart from "./manual-restart-tracker";
 import * as Notifications from "./notification-center";
 import * as TestLogic from "./test-logic";
 
+function parseInput(input) {
+  const re = /((-\s*)?\d+(\.\d+)?\s*[hms]?)/g;
+  const seconds = [...input.toLowerCase().matchAll(re)]
+    .map((match) => {
+      const part = match[0];
+      const duration = parseFloat(part.replaceAll(/\s+/g, ""));
+
+      if (part.includes("h")) {
+        return 3600 * duration;
+      } else if (part.includes("m")) {
+        return 60 * duration;
+      } else {
+        return duration;
+      }
+    })
+    .reduce((total, dur) => total + dur, 0);
+
+  return Math.floor(seconds);
+}
+
+function format(duration) {
+  const hours = Math.floor(duration / 3600);
+  const minutes = Math.floor((duration % 3600) / 60);
+  const seconds = (duration % 3600) % 60;
+
+  const time = [];
+
+  if (hours > 0) {
+    time.push(`${hours} hour${hours === 1 ? "" : "s"}`);
+  }
+
+  if (minutes > 0) {
+    time.push(`${minutes} minute${minutes === 1 ? "" : "s"}`);
+  }
+
+  if (seconds > 0) {
+    time.push(`${seconds} second${seconds === 1 ? "" : "s"}`);
+  }
+
+  if (time.length === 3) {
+    return `${time[0]}, ${time[1]} and ${time[2]}`;
+  } else if (time.length === 2) {
+    return `${time[0]} and ${time[1]}`;
+  } else {
+    return `${time[0]}`;
+  }
+}
+
+function previewDuration() {
+  const input = $("#customTestDurationPopup input").val();
+  const duration = parseInput(input);
+  let formattedDuration = "";
+
+  if (duration < 0) {
+    formattedDuration = "NEGATIVE TIME";
+  } else if (duration == 0) {
+    formattedDuration = "Infinite test";
+  } else {
+    formattedDuration = "Total time: " + format(duration);
+  }
+
+  $("#customTestDurationPopup .preview").text(formattedDuration);
+}
+
 export function show() {
   if ($("#customTestDurationPopupWrapper").hasClass("hidden")) {
     $("#customTestDurationPopupWrapper")
@@ -13,6 +77,8 @@ export function show() {
         $("#customTestDurationPopup input").focus().select();
       });
   }
+
+  previewDuration();
 }
 
 function hide() {
@@ -33,7 +99,7 @@ function hide() {
 }
 
 function apply() {
-  let val = parseInt($("#customTestDurationPopup input").val());
+  let val = parseInput($("#customTestDurationPopup input").val());
 
   if (val !== null && !isNaN(val) && val >= 0) {
     UpdateConfig.setTimeConfig(val);
@@ -61,7 +127,9 @@ $("#customTestDurationPopupWrapper").click((e) => {
   }
 });
 
-$("#customTestDurationPopup input").keypress((e) => {
+$("#customTestDurationPopup input").keyup((e) => {
+  previewDuration();
+
   if (e.keyCode == 13) {
     apply();
   }

src/sass/style.scss

@@ -715,6 +715,13 @@ a:hover {
       color: var(--sub-color);
     }
   }
+
+  #customTestDurationPopup {
+    .preview {
+      font-size: 0.75rem;
+      color: var(--sub-color);
+    }
+  }
 }
 
 #customThemeShareWrapper {

static/index.html

@@ -150,6 +150,7 @@
     <div id="customTestDurationPopupWrapper" class="hidden">
       <div id="customTestDurationPopup">
         <div class="title">Test duration</div>
+        <div class="preview"></div>
         <input value="1" />
         <div class="tip">
           You can start an infinite test by inputting 0. Then, to stop the test,