From e5e5d7870ad59fde72bec7053628a5233d75e5c4 Mon Sep 17 00:00:00 2001
From: Anton Sarukhanov <code@ant.sr>
Date: Wed, 11 Dec 2019 22:43:47 -0500
Subject: [PATCH] Add status indicator to clarify UI.
---
whatformat/static/script.js | 34 +++++++++++++++++++++++++++++--
whatformat/templates/landing.html | 2 ++
2 files changed, 34 insertions(+), 2 deletions(-)
diff --git a/whatformat/static/script.js b/whatformat/static/script.js
index 5d3dcad..d925d60 100644
--- a/whatformat/static/script.js
+++ b/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);
diff --git a/whatformat/templates/landing.html b/whatformat/templates/landing.html
index 5e8ff69..798632f 100644
--- a/whatformat/templates/landing.html
+++ b/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>
--
GitLab