From aff1e90ceb5d6b82e3f8c6e6dbe5a7ff34ce1a05 Mon Sep 17 00:00:00 2001
From: Simon Brooke <simon@journeyman.cc>
Date: Mon, 18 Feb 2019 14:38:53 +0000
Subject: [PATCH] Small cosmetic improvements
---
resources/html/home.html | 64 +++++++++++++++++---------------
src/cljs/ireadit/events.cljs | 21 +++++++----
src/cljs/ireadit/views/form.cljs | 15 ++++++--
3 files changed, 59 insertions(+), 41 deletions(-)
diff --git a/resources/html/home.html b/resources/html/home.html
index 886c337..1cccca7 100644
--- a/resources/html/home.html
+++ b/resources/html/home.html
@@ -1,36 +1,42 @@
<!DOCTYPE html>
<html>
- <head>
- <meta charset="UTF-8"/>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Welcome to ireadit</title>
- </head>
- <body>
+ <head>
+ <meta charset="UTF-8"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Welcome to ireadit</title>
+ <style>
+ .row { padding: 0.25em; }
+ div.hidden { display: none; }
+ </style>
+ </head>
+ <body>
- <div id="app">
- <h1>
- I Read It <em>is loading</em>
- </h1>
- <div class="splash-screen">
- <div class="sk-fading-circle">
- <div class="sk-circle1 sk-circle"></div>
- <div class="sk-circle2 sk-circle"></div>
- <div class="sk-circle3 sk-circle"></div>
- <div class="sk-circle4 sk-circle"></div>
- <div class="sk-circle5 sk-circle"></div>
- <div class="sk-circle6 sk-circle"></div>
- <div class="sk-circle7 sk-circle"></div>
- <div class="sk-circle8 sk-circle"></div>
- <div class="sk-circle9 sk-circle"></div>
- <div class="sk-circle10 sk-circle"></div>
- <div class="sk-circle11 sk-circle"></div>
- <div class="sk-circle12 sk-circle"></div>
+ <div id="app">
+ <div id="main-container" class="container-fluid">
+ <h1>
+ I Read It <em>is loading</em>
+ </h1>
+ <div class="splash-screen row">
+ <div class="sk-fading-circle">
+ <div class="sk-circle1 sk-circle"></div>
+ <div class="sk-circle2 sk-circle"></div>
+ <div class="sk-circle3 sk-circle"></div>
+ <div class="sk-circle4 sk-circle"></div>
+ <div class="sk-circle5 sk-circle"></div>
+ <div class="sk-circle6 sk-circle"></div>
+ <div class="sk-circle7 sk-circle"></div>
+ <div class="sk-circle8 sk-circle"></div>
+ <div class="sk-circle9 sk-circle"></div>
+ <div class="sk-circle10 sk-circle"></div>
+ <div class="sk-circle11 sk-circle"></div>
+ <div class="sk-circle12 sk-circle"></div>
+ </div>
+ </div>
+ <p class="footer">
+ You must enable JavaScript to use the I Read It app.
+ </p>
+ </div>
</div>
- </div>
- <p class="footer">
- You must enable JavaScript to use the I Read It app.
- </p>
- </div>
<!-- scripts and styles -->
{% style "/assets/bootstrap/css/bootstrap.min.css" %}
diff --git a/src/cljs/ireadit/events.cljs b/src/cljs/ireadit/events.cljs
index 211fdfc..0a28266 100644
--- a/src/cljs/ireadit/events.cljs
+++ b/src/cljs/ireadit/events.cljs
@@ -20,12 +20,6 @@
(fn [db [_ docs]]
(assoc db :docs docs)))
-(rf/reg-event-db
- :set-transcription
- (fn [db [_ response]]
- (js/console.log (str "Failed to fetch transcription data" response))
- (assoc db :transcription response)))
-
(rf/reg-event-fx
:fetch-docs
(fn [_ _]
@@ -47,7 +41,13 @@
:response-format (ajax/json-response-format)
:on-success [:set-transcription]
:on-failure [:bad-transcription]}
- :db (dissoc (dissoc db :transcription) :common/error)})))
+ :db (assoc (dissoc (dissoc db :transcription) :common/error) :pending true)})))
+
+(rf/reg-event-db
+ :set-transcription
+ (fn [db [_ response]]
+ (js/console.log (str "Failed to fetch transcription data" response))
+ (dissoc (assoc db :transcription response) :pending)))
(rf/reg-event-fx
:bad-transcription
@@ -55,7 +55,7 @@
[{db :db} [_ response]]
;; TODO: signal something has failed? It doesn't matter very much, unless it keeps failing.
(js/console.log (str "Failed to fetch transcription data" response))
- (assoc db :common/error response)))
+ (dissoc (assoc db :common/error response) :pending)))
(rf/reg-event-db
:common/set-error
@@ -89,3 +89,8 @@
(fn [db _]
(:transcription db)))
+(rf/reg-sub
+ :pending
+ (fn [db _]
+ (:pending db)))
+
diff --git a/src/cljs/ireadit/views/form.cljs b/src/cljs/ireadit/views/form.cljs
index d1476f6..c68e0a8 100644
--- a/src/cljs/ireadit/views/form.cljs
+++ b/src/cljs/ireadit/views/form.cljs
@@ -11,6 +11,12 @@
[secretary.core :as secretary])
(:import goog.History))
+(defn maybe-disable [m]
+ (if
+ @(rf/subscribe [:pending])
+ (assoc m :disabled "disabled")
+ m))
+
(defn form-page []
[:div.container-fluid {:id "main-container"}
@@ -21,17 +27,18 @@
[b/Label {:for "image-url" :title "URL of the image you wish to transcribe"}"Image URL"]]
[:div.col-sm-9
[b/Input {:id "image-url" :type "text" :size "80"
- :on-change #(rf/dispatch [:set-url (.-value (.-target %))])}]]]
+ :on-change #(rf/dispatch [:set-url (.-value (.-target %))])
+ }]]]
[b/Row
[:div.col-sm-3
[b/Label {:for "send"} "To transcribe the image"]]
[:div.col-sm-9
- [b/Button {:id "send" :on-click #(rf/dispatch [:fetch-transcription])} "Transcribe!"]]]
+ [b/Button (maybe-disable {:id "send" :on-click #(rf/dispatch [:fetch-transcription])}) "Transcribe!"]]]
[b/Row]
[b/Row
- [:div.col-sm-12
+ [:div.col-sm-12 {:class (if @(rf/subscribe [:transcription]) "visible" "hidden")}
[b/Alert {:color "success"} @(rf/subscribe [:transcription])]]]
[b/Row
- [:div.col-sm-12
+ [:div.col-sm-12 {:class (if @(rf/subscribe [:common/error]) "visible" "hidden")}
[b/Alert {:color "warning"} @(rf/subscribe [:common/error])]]]]])