Add client hook for formatting limit times.

mbta · Feb 27, 2025 · fb631b3 · fb631b3
1 parent 9e6a267
commit fb631b3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/assets/src/app.tsx b/assets/src/app.tsx
@@ -45,11 +45,23 @@ const sortable = {
   },
 } as ViewHook
 
+const LimitTime = {
+  mounted() {
+    this.el.addEventListener("input", (_e) => {
+      let match = this.el.value.match(/^(\d{2})(\d{2})$/)
+      if (match) {
+        this.el.value = `${match[1]}:${match[2]}`
+      }
+    })
+  },
+} as ViewHook
+
 // https://github.com/fidr/phoenix_live_react
 const hooks = {
   LiveReact,
   sortable,
   ...live_select,
+  LimitTime,
 }
 
 const csrfToken = document

diff --git a/lib/arrow_web/components/limit_section.ex b/lib/arrow_web/components/limit_section.ex
@@ -159,13 +159,15 @@ defmodule ArrowWeb.LimitSection do
                     :if={normalize_value("checkbox", input_value(f_day_of_week, :active?))}
                     field={f_day_of_week[:start_time]}
                     disabled={normalize_value("checkbox", input_value(f_day_of_week, :all_day?))}
+                    phx-hook="LimitTime"
                   />
                 </div>
                 <div class="col col-lg-3">
                   <.input
                     :if={normalize_value("checkbox", input_value(f_day_of_week, :active?))}
                     field={f_day_of_week[:end_time]}
                     disabled={normalize_value("checkbox", input_value(f_day_of_week, :all_day?))}
+                    phx-hook="LimitTime"
                   />
                 </div>
                 <div class="col">