Add status indicator to clarify UI.

whatformat/static/script.js

@@ -5,17 +5,47 @@ function throttle(func, time) {
 
 function handle_date_change(e) {
     async function _handle_date_change() {
-        var response = await fetch('/date?date=' + encodeURIComponent(e.target.value));
+        value = e.target.value.trim()
+        if (value === '') {
+            _clear_all();
+            return;
+        }
+        if (e.target.dataset.last === value) {
+            return;
+        }
+        _set_format();
+        _set_format();
+        _set_status('One second...');
+        var response = await fetch('/date?date=' + encodeURIComponent(value));
         var response_json = await response.json();
         format_strings = '';
         for (entry in response_json) {
             format_strings += '<p>' + response_json[entry] + '</p>';
         }
-        document.querySelector('#format').innerHTML = format_strings;
+        if (format_strings) {
+            _set_format(format_strings);
+        } else {
+            _set_status('Sorry, we couldn\'t interpret that.');
+        }
+        e.target.dataset.last = value;
     }
     throttle((e) => { _handle_date_change(e); }, 100);
 }
 
+function _clear_all() {
+    document.querySelector('#status').innerHTML = '';
+    document.querySelector('#format').innerHTML = '';
+}
+
+function _set_format(formats_html = '') {
+    document.querySelector('#format').innerHTML = formats_html;
+    _set_status();
+}
+
+function _set_status(status_html = '') {
+    document.querySelector('#status').innerHTML = status_html;
+}
+
 var date_input = document.querySelector('#date');
 date_input.addEventListener('focus', handle_date_change, false);
 date_input.addEventListener('change', handle_date_change, false);

whatformat/templates/landing.html

@@ -18,6 +18,8 @@
         <form id="detect-format"><input id="date" name="date" value="{{ date_string if date_string }}" placeholder="Enter a date and/or time here." autocomplete="off" /></form>
         <section id="format">
         </section>
+        <section id="status">
+        </section>
     </main>
     <script src="/static/script.js"></script>
 </body>