Hatfield-McCoy selector wizard

index.cljs.hl

(page "index.html")

(def people (cell {"Hatfield"
                   #{{:first "William"   :gender :male}
                     {:first "Victoria"  :gender :female}
                     {:first "Henry"     :gender :male}
                     {:first "Elliott"   :gender :male}
                     {:first "Elizabeth" :gender :female}}
                   "McCoy"
                   #{{:first "Randolph"  :gender :male}
                     {:first "Mary"      :gender :female}
                     {:first "Frank"     :gender :male}
                     {:first "Roseanna"  :gender :female}
                     {:first "Josephine" :gender :female}}}))

(def families (cell= (sort (keys people))))

(html
  (head
    (link :rel "stylesheet" :type "text/css" :href "css/main.css"))
  (body
    (h1 "Hatfield-McCoy Selector Wizard v1.0")
    (let [family (cell nil)
          gender (cell nil)
          person (cell nil)]
      (div
        (div
          (h3 "Select a Family")
          (select :change #(reset! family (if (= @% "none") nil @%))
            (option :value "none")
            (loop-tpl :bindings [f families]
              (option :value f f))))
        (div :toggle family
          (h3 "Select a Gender")
          (select :change #(reset! gender (if (= @% "none") nil (keyword @%)))
            (option :value "none")
            (option :value "female" "female")
            (option :value "male"   "male")))
        (div :toggle (cell= (and family gender))
          (h3 (text "Select a ~{gender} ~{family}"))
          (select :change #(reset! person {:first @% :last @family :gender @gender})
            (loop-tpl :bindings [p (cell= (->> family
                                               (get people)
                                               (filter #(= gender (:gender %)))))]
              (cell-let [first (:first p)] (option :value first first)))))
        (div :toggle person
          (p (text "You selected ~{(pr-str person)}!")))))))