Refactor input fields.

This commit is contained in:
Oly 2019-09-04 14:07:00 +01:00
parent 9da8e2202e
commit daa5652abe
10 changed files with 53 additions and 61 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
resources/public/dev

View File

@ -9,5 +9,4 @@
com.bhauman/figwheel-main {:mvn/version "0.2.1-SNAPSHOT"} com.bhauman/figwheel-main {:mvn/version "0.2.1-SNAPSHOT"}
cider/piggieback {:mvn/version "0.4.0"} cider/piggieback {:mvn/version "0.4.0"}
com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}} com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}}
:resource-paths ["app/data"] :paths ["app" "src" "resources"]}
:paths ["app/data" "src"]}

View File

@ -1,6 +1,4 @@
{:output-to "app/data/dev-main.js" {:output-to "resources/public/dev-main.js"
:output-dir "app/data/dev"
:asset-path "app/data/dev",
:optimizations :none :optimizations :none
:pretty-print true :pretty-print true
:source-map true :source-map true

View File

@ -1,19 +1,2 @@
{:target-dir "app/data" {:target-dir "app/data"
:watch-dirs ["src"] :watch-dirs ["src"]}
:ring-stack-options {:params
{:urlencoded true, :multipart true, :nested true, :keywordize true},
:cookies true,
:session
{:flash true, :cookie-attrs {:http-only true, :same-site :strict}},
:static {:app "data"},
:responses {:content-types true, :default-charset "utf-8"},
:http-server-root "data"
:figwheel.server.ring/dev
{:figwheel.server.ring/fix-index-mime-type true,
:figwheel.server.ring/resource-root-index true,
:figwheel.server.ring/wrap-no-cache true,
:figwheel.server.ring/cljsjs-resources false,
:ring.middleware.not-modified/wrap-not-modified true,
:co.deps.ring-etag-middleware/wrap-file-etag true,
:ring.middleware.cors/wrap-cors true,
:ring.middleware.stacktrace/wrap-stacktrace true}}}

5
resources/public/all.min.css vendored Normal file

File diff suppressed because one or more lines are too long

Binary file not shown.

View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html class="h-100 bg-green" lang="en">
<head>
<title>Device setup</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="tachyon.css" type="text/css"/>
<link rel="stylesheet" href="all.min.css" type="text/css"/>
</head>
<body class="h-100">
<div id="app" class="h-100"><i class="fas fa-spinner"></i>Loading</div>
<script src="dev-main.js"></script>
</body>
</html>

File diff suppressed because one or more lines are too long

Binary file not shown.

View File

@ -1,12 +1,11 @@
(ns DEMOAPP.core (ns DEMOAPP.core
(:require [accountant.core :as accountant] (:require [accountant.core :as accountant]
[ajax.core :refer [GET]]
[clojure.spec.alpha :as s] [clojure.spec.alpha :as s]
[reagent.core :as reagent :refer [atom]] [reagent.core :as reagent :refer [atom]]
[reagent.session :as session] [reagent.session :as session]
[reitit.frontend :as reitit])) [reitit.frontend :as reitit]))
(enable-console-print!) ;;(enable-console-print!)
(defonce form-data (atom {:device-id "" :wifi-ssid "" :wifi-key ""})) (defonce form-data (atom {:device-id "" :wifi-ssid "" :wifi-key ""}))
(def device-id-regex #"[A-Za-z0-9]{4}") (def device-id-regex #"[A-Za-z0-9]{4}")
@ -27,6 +26,20 @@
(:path (reitit/match-by-name router route params)) (:path (reitit/match-by-name router route params))
(:path (reitit/match-by-name router route)))) (:path (reitit/match-by-name router route))))
(defn form-input [name title placeholder data validator error]
[:div.mt3.dim
[: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 "text" :name name :placeholder placeholder :autoFocus "true"
:on-change #(swap! data assoc (keyword name) (-> % .-target .-value))
:value ((keyword name) @form-data)}]
[:p (if (and (not-empty ((keyword name) @data))
(s/explain-data
(keyword 'DEMOAPP.core validator)
(:device-id @data)))
error)]])
; simple input form ; simple input form
(defn config-form [] (defn config-form []
[:article.black-80.db.tc.black.ba.w-100.bg-light-green.br2 [:article.black-80.db.tc.black.ba.w-100.bg-light-green.br2
@ -34,48 +47,26 @@
[:fieldset#sign_up.ba.b--transparent.ph0.mh0 [:fieldset#sign_up.ba.b--transparent.ph0.mh0
[:legend.ph0.mh0.fw6 "Device Setup"] [:legend.ph0.mh0.fw6 "Device Setup"]
[:div.mt3.dim (form-input "server" "Server" "127.0.0.1"
[:label.db.fw4.lh-copy.f6 {:for "device-id"} "Device Unique ID"] form-data "device-id-type"
[:input#wifi-ssid.pa2.input-reset.ba.bg-near-white.w-100.measure.b--silver "Invalid server address")
{:type "text" :name "device-id" :placeholder "AAAA" :autofocus "true" (form-input "device-id" "Device Unique ID" "AAAA" form-data
:on-change #(swap! form-data assoc :device-id (-> % .-target .-value)) "device-id-type" "Invalid identifier, should be alphanumeric and 4 characters long.")
:value (:device-id @form-data)}] (form-input "wifi-ssid" "WIFI SSID" "" form-data "wifi-ssid-type"
[:p (if (and (not-empty (:device-id @form-data)) "Invalid SSID, should be no more than 32 characters and must not start with !, #, or ;.")
(s/explain-data (form-input "wifi-key" "WIFI Password" "" form-data "wifi-key-type" "No password set.")
::device-id-type
(:device-id @form-data)))
"Invalid identifier, should be alphanumeric and 4 characters long.")]]
[:div.mt3.dim ]
[:label.db.fw4.lh-copy.f6 {:for "wifi-ssid"} "WIFI SSID"]
[:input#wifi-ssid.pa2.input-reset.ba.bg-near-white.w-100.measure.b--silver
{:type "text" :name "wifi-ssid" :placeholder ""
:on-change #(swap! form-data assoc :wifi-ssid (-> % .-target .-value))
:value (:wifi-ssid @form-data)}]
[:p (if (and (not-empty (:device-id @form-data))
(s/explain-data
::device-id-type
(:device-id @form-data)))
"Invalid SSID, should be no more than 32 characters and must not start with !, #, or ;.")]]
[:div.mt3.dim
[:label.db.fw4.lh-copy.f6 {:for "wifi-password"} "WIFI Password"]
[:input#password.pa2.input-reset.ba.bg-near-white.w-100.measure.b--silver
{:type "password" :name "wifi-password"
:on-change #(swap! form-data assoc :wifi-key (-> % .-target .-value))
:value (:wifi-key @form-data)}]
[:p (if (and (not-empty (:wifi-key @form-data))
(s/explain-data
::wifi-ssid-type
(:wifi-key @form-data)))
"No password set.")]]]
[:div.mt3 [:div.mt3
[:input.b.ph3.pv2.input-reset.ba.b--black.bg-transparent.grow.pointer.f6.br2 [:input.b.ph3.pv2.input-reset.ba.b--black.bg-transparent.grow.pointer.f6.br2
{:type "submit" :value "Save"}]]]]) {:type "submit" :value "Save"}]]]])
(defn home-page [] (defn home-page []
[:div.w-25 [:div.w-25
[:img {:src "logo.png"}] [: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 [] (defn success-page []
@ -116,7 +107,6 @@
(fn [path] (fn [path]
(boolean (reitit/match-by-path router path)))}) (boolean (reitit/match-by-path router path)))})
(accountant/dispatch-current!) (accountant/dispatch-current!)
(reagent/render [current-page] (.getElementById js/document "app"))) (reagent/render [current-page] (.getElementById js/document "app")))
(startup) (startup)