diff --git a/project.clj b/project.clj index 5a34a33..922f2de 100644 --- a/project.clj +++ b/project.clj @@ -14,7 +14,9 @@ [prismatic/dommy "0.1.2"] [com.novemberain/monger "2.0.0"] [org.clojure/tools.cli "0.3.1"] - [clj-webdriver "0.6.1" :exclusions [org.clojure/core.cache]]] + [clj-webdriver "0.6.1" :exclusions [org.clojure/core.cache]] + [om "0.6.4"] + [sablono "0.2.17"]] :profiles {:uberjar {:aot :all}} :min-lein-version "2.1.2" :plugins [[lein-cljsbuild "1.0.3"] diff --git a/src/cljs/grub/view/dom.cljs b/src/cljs/grub/view/dom.cljs index c6ea948..0fd89f9 100644 --- a/src/cljs/grub/view/dom.cljs +++ b/src/cljs/grub/view/dom.cljs @@ -1,6 +1,9 @@ (ns grub.view.dom (:require [dommy.core :as dommy] - [cljs.core.async :as a :refer [! chan]]) + [cljs.core.async :as a :refer [! chan]] + [om.core :as om :include-macros true] + [om.dom :as dom :include-macros true] + [sablono.core :as html :refer-macros [html]]) (:require-macros [grub.macros :refer [log logs go-loop]] [dommy.macros :refer [deftemplate sel1 node]] [cljs.core.async.macros :refer [go]])) @@ -52,10 +55,10 @@ (get-enters (sel1 :body))) (def add-grub-text - (node [:input.form-control {:id "add-grub-input" :type "text" :placeholder "2 grubs"}])) + [:input.form-control {:id "add-grub-input" :type "text" :placeholder "2 grubs"}]) (def add-grub-btn - (node [:button.btn.btn-primary {:id "add-grub-btn" :type "button"} "Add"])) + [:button.btn.btn-primary {:id "add-grub-btn" :type "button"} "Add"]) (def clear-all-btn (node [:button.btn.hidden.pull-right @@ -126,10 +129,7 @@ [:div.row [:div.col-sm-6.leftmost-column [:h3 "Grub List"] - [:div.input-group - add-grub-text - [:span.input-group-btn - add-grub-btn]] + [:div#addGrubInput] [:ul#grub-list.list-group] clear-all-btn] [:div.col-sm-6 @@ -141,8 +141,19 @@ (node (for [grub grubs] (make-grub-node (:id grub) (:grub grub) (:completed grub))))) +(defn add-grub-input [data] + (om/component + (html [:div.input-group + add-grub-text + [:span.input-group-btn + add-grub-btn]]))) + +(defn render-om [] + (om/root add-grub-input {} {:target (.getElementById js/document "addGrubInput")})) + (defn render-body [] - (dommy/prepend! (sel1 :body) (main-template))) + (dommy/prepend! (sel1 :body) (main-template)) + (render-om)) (defn render-grub-list [grubs] (let [grub-list (sel1 :#grub-list)] @@ -150,10 +161,10 @@ (dommy/replace-contents! grub-list (grub-list-template grubs)))) (defn get-add-grub-text [] - (dommy/value add-grub-text)) + (dommy/value (sel1 :#add-grub-input))) (defn clear-add-grub-text [] - (dommy/set-value! add-grub-text "")) + (dommy/set-value! (sel1 :#add-grub-input) "")) (defn get-recipe-add-grubs-clicks [] (->> (:chan (listen (recipe-add-grubs-btns-selector) :click)) diff --git a/src/cljs/grub/view/grub.cljs b/src/cljs/grub/view/grub.cljs index ed4386b..e0da690 100644 --- a/src/cljs/grub/view/grub.cljs +++ b/src/cljs/grub/view/grub.cljs @@ -2,13 +2,14 @@ (:require [grub.view.dom :as dom] [cljs.core.async :as a :refer [! chan]]) (:require-macros [grub.macros :refer [log logs and-let]] - [cljs.core.async.macros :refer [go go-loop]])) + [cljs.core.async.macros :refer [go go-loop]] + [dommy.macros :refer [sel1]])) (defn get-add-grub-clicks [] - (:chan (dom/get-clicks dom/add-grub-btn))) + (:chan (dom/get-clicks (sel1 :#add-grub-btn)))) (defn get-add-grub-enters [] - (:chan (dom/get-enters dom/add-grub-text))) + (:chan (dom/get-enters (sel1 :#add-grub-input)))) (defn get-create-events [] (let [events (a/merge [(get-add-grub-clicks)