diff --git a/src/DEMOAPP/core.cljs b/src/DEMOAPP/core.cljs index e96cfdd..b3d9994 100644 --- a/src/DEMOAPP/core.cljs +++ b/src/DEMOAPP/core.cljs @@ -3,13 +3,28 @@ [clojure.spec.alpha :as s] [reagent.core :as reagent :refer [atom]] [reagent.session :as session] + [ajax.core :refer [GET, POST]] [reitit.frontend :as reitit])) ;;(enable-console-print!) +(defonce form-errors (atom nil)) +(defonce form-title "GASP Sensor setup") (defonce form-data (atom {:device-id "" :wifi-ssid "" :wifi-key ""})) +(defonce form-layout [{:name "server" :title "Server" :placeholder "127.0.0.1" + :data form-data :validator "device-id-type" + :error "Invalid server address"} + {:name "device-id" :title "Device Unique ID" :placeholder "AAAA" + :data form-data :validator "device-id-type" + :error "Invalid identifier" :focus "true"} + {:name "wifi-ssid" :title "WIFI SSID" + :data form-data :validator "wifi-ssid-type" + :error "Invalid SSID"} + {:name "wifi-key" :title "WIFI Password" + :data form-data :validator "wifi-key-type" + :error "Invalid wifi password" :type "password"}]) -(def device-id-regex #"[A-Za-z0-9]{4}") -(def ssid-regex #"^[!#;].|[+\[\]\"\t\s].*$") +(defonce device-id-regex #"[A-Za-z0-9]{4}") +(defonce ssid-regex #"^[!#;].|[+\[\]\"\t\s].*$") (s/def ::wifi-ssid-type (s/and string? #(re-matches ssid-regex %))) (s/def ::device-id-type (s/and string? #(re-matches device-id-regex %))) (s/def ::wifi-key-type string?) @@ -18,7 +33,7 @@ (def router (reitit/router [["/" :index] - ["/404" :about]])) + ["/404" :about]])) ; link builder (defn path-for [route & [params]] @@ -26,53 +41,62 @@ (:path (reitit/match-by-name router route params)) (:path (reitit/match-by-name router route)))) - (defn form-input-map [{:keys [name title placeholder data validator error focus type]}] - [:div.mt3.dim + [:div.mt3.dim {:key name} [:label.db.fw4.lh-copy.f6 {:for name} title] [:input#wifi-ssid.pa2.input-reset.ba.bg-near-white.w-100.measure.b--silver - {:type (or type "text") :name name :placeholder placeholder :autoFocus (or focus nil) + {:type (or type "text") :name name + :placeholder placeholder :autoFocus (or focus nil) :on-change #(swap! data assoc (keyword name) (-> % .-target .-value)) - :value ((keyword name) @form-data)}] + :value ((keyword name) @data) + }] [:p (if (and (not-empty ((keyword name) @data)) (s/explain-data (keyword 'DEMOAPP.core validator) (:device-id @data))) error)]]) +(defn handle-failure [{:keys [status status-text response]}] + (case status + 500 (do (reset! form-errors "Something bad happened submitting your data.")) + 401 (do (reset! form-errors "Not authorized.")) + 404 (do (reset! form-errors "Could not find device to submit data.")) + (reset! form-errors (str (:msg response) (:msg response))))) + +(defn form-submit [data] + (POST "/submit" + {:params @data + :error-handler handle-failure + ;:response-format :json + :format :raw + ;:keywords? true + :handler (fn [response] + (swap! form-errors "success"))})) + ; simple input form + + (defn config-form [] + {:on-submit + (fn [e] (.preventDefault e) + (api/save-snippet @title @text))} [:article.black-80.db.tc.black.ba.w-100.bg-light-green.br2 - [:form.ma3 {:action "sign-up_submit" :method "get" :accept-charset "utf-8"} + [:form.ma3 {:method "get" :accept-charset "utf-8" + :on-submit (fn [e] (.preventDefault e) (form-submit form-data))} [:fieldset#sign_up.ba.b--transparent.ph0.mh0 - [:legend.ph0.mh0.fw6 "Device Setup"] - (form-input-map {:name "server" :title "Server" :placeholder "127.0.0.1" - :data form-data :validator "device-id-type" - :error "Invalid server address"}) - (form-input-map {:name "device-id" :title "Device Unique ID" :placeholder "AAAA" - :data form-data :validator "device-id-type" - :error "Invalid identifier" :focus "true"}) - (form-input-map {:name "wifi-ssid" :title "WIFI SSID" - :data form-data :validator "wifi-ssid-type" - :error "Invalid SSID"}) - (form-input-map {:name "wifi-ssid2" :title "WIFI SSID" - :data form-data :validator "wifi-ssid-type" - :error "Invalid SSID"}) - (form-input-map {:name "wifi-key" :title "WIFI Password" - :data form-data :validator "wifi-key-type" - :error "Invalid wifi password" :type "password"})] + [:legend.ph0.pb3.mh0.fw6 "Device Setup"] + (if @form-errors + [:div.flex.items-center.justify-center.pa3.bg-lightest-blue.navy + [:i.fas.fa-exclamation-circle] + [:span.lh-title.ml3 @form-errors]]) + (map form-input-map form-layout)] [:div.mt3 [:input.b.ph3.pv2.input-reset.ba.b--black.bg-transparent.grow.pointer.f6.br2 {:type "submit" :value "Save"}]]]]) (defn home-page [] - [:div.w-35 - [:a.athelas.f3.link.white-70.hover-white.no-underline.flex.items-center.pa3 - {:href "/"} - [:h2 - [:i.fas.fa-surprise.mr3] "GASP Sensor setup"]] - (config-form)]) + (config-form)) (defn success-page [] [:div @@ -92,11 +116,18 @@ :index #'home-page :about #'about-page)) +; default page wrapper ; default page wrapper (defn current-page [] (fn [] (let [page (:current-page (session/get :route))] - [:div.bg-green.flex.justify-center.items-center.h-100 [page]]))) + [:div.bg-green.flex.justify-center.items-center.h-100 + [:div.w-25 + [:a.athelas.f3.link.white-70.hover-white.no-underline.flex.items-center.pa3 + {:href "/"} + [:h2 + [:i.fas.fa-surprise.mr3] "GASP Sensor setup"]] + [page]]]))) (defn startup [] (accountant/configure-navigation!