#30: Very close to good on client look and feell

src/clj/youyesyet/routes/home.clj

@@ -11,6 +11,9 @@
 (defn app-page []
   (layout/render "app.html"))
 
+(defn about-page []
+  (layout/render "about.html"))
+
 (defn call-me-page [request]
   (if
     request
@@ -42,6 +45,8 @@
 
 (defroutes home-routes
   (GET "/" [] (home-page))
+  (GET "/home" [] (home-page))
+  (GET "/about" [] (about-page))
   (GET "/app" [] (route/restricted (app-page)))
   (GET "/call-me" [] (call-me-page nil))
   (POST "/call-me" request (call-me-page request))

src/cljs/youyesyet/core.cljs

@@ -18,10 +18,38 @@
             [youyesyet.views.followup-request :as request])
   (:import goog.History))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;;;;
+;;;; youyesyet.core: core of the app.
+;;;;
+;;;; This program is free software; you can redistribute it and/or
+;;;; modify it under the terms of the GNU General Public License
+;;;; as published by the Free Software Foundation; either version 2
+;;;; of the License, or (at your option) any later version.
+;;;;
+;;;; This program is distributed in the hope that it will be useful,
+;;;; but WITHOUT ANY WARRANTY; without even the implied warranty of
+;;;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+;;;; GNU General Public License for more details.
+;;;;
+;;;; You should have received a copy of the GNU General Public License
+;;;; along with this program; if not, write to the Free Software
+;;;; Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301,
+;;;; USA.
+;;;;
+;;;; Copyright (C) 2016 Simon Brooke for Radical Independence Campaign
+;;;;
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+;;; So that we can do debug logging!
+(enable-console-print!)
 
 (defn about-page []
   (about/panel))
 
+(defn electors-page []
+  (electors/panel))
+
 (defn issues-page []
   (issues/panel))
 
@@ -36,6 +64,7 @@
 
 (def pages
   {:about #'about-page
+   :electors #'electors-page
    :issues #'issues-page
    :issue #'issue-page
    :map #'map-page
@@ -57,9 +86,15 @@
 (secretary/defroute "/about" []
   (rf/dispatch [:set-active-page :about]))
 
+(secretary/defroute "/electors" []
+  (rf/dispatch [:set-active-page :electors]))
+
 (secretary/defroute "/issues" []
   (rf/dispatch [:set-active-page :issues]))
 
+(secretary/defroute "/issues/:elector" {elector :elector}
+  (rf/dispatch (list [:set-elector elector] [:set-active-page :issues])))
+
 (secretary/defroute "/issue/:issue" {issue :issue}
   (rf/dispatch [:set-issue issue]))
 

src/cljs/youyesyet/db.cljs

@@ -2,7 +2,7 @@
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;;;;
-;;;; youyesyet.views.electors: electors view for youyesyet.
+;;;; youyesyet.db: the state of the app.
 ;;;;
 ;;;; This program is free software; you can redistribute it and/or
 ;;;; modify it under the terms of the GNU General Public License
@@ -30,22 +30,30 @@
 ;;; 'client-state'.
 
 (def default-db
-  ;;; the currently displayed 'page' within the app.
-  {:page :home
-   ;;; the currently selected address, if any.
-   :address {:address "13 Imaginary Terrace, IM1 3TE"}
-   ;;; a list of the addresses in the current location at which there
-   ;;; are electors registered.
-   :addresses []
-   ;;; electors at the currently selected address
-   :electors [{:name "Alan Anderson" :gender :male :intention :no}
-              {:name "Ann Anderson" :gender :female}
-              {:name "Alex Anderson" :gender :fluid :intention :yes}
-              {:name "Andy Anderson" :intention :yes}]
-   ;;; the issues selected for the issues page on this day.
-   :issues {"Currency" "Scotland could keep the Pound, or use the Euro. But we could also set up a new currency of our own. Yada yada yada"
-            "Monarchy" "Scotland could keep the Queen. This is an issue to be decided after independence. Yada yada yada"
-            "Defence" "Scotland will not have nuclear weapons, and will probably not choose to engage in far-off wars. But we could remain members of NATO"}
-   ;;; the issue from among those issues which is currently selected.
-   :issue "Currency"
-   })
+  {;;; the currently selected address, if any.
+    :address {:id 1 :address "13 Imaginary Terrace, IM1 3TE" :latitude 55.8253043 :longitude -4.2590944}
+    ;;; a list of the addresses in the current location at which there
+    ;;; are electors registered.
+    :addresses [{:id 1 :address "13 Imaginary Terrace, IM1 3TE" :latitude 55.8253043 :longitude -4.2590944
+                 :electors [{:id 1 :name "Alan Anderson" :gender :male :intention :no}
+                            {:id 2 :name "Ann Anderson" :gender :female}
+                            {:id 3 :name "Alex Anderson" :gender :fluid :intention :yes}
+                            {:id 4 :name "Andy Anderson" :intention :yes}]}]
+    ;;; electors at the currently selected address
+    :electors [{:id 1 :name "Alan Anderson" :gender :male :intention :no}
+               {:id 2 :name "Ann Anderson" :gender :female}
+               {:id 3 :name "Alex Anderson" :gender :fluid :intention :yes}
+               {:id 4 :name "Andy Anderson" :intention :yes}]
+    ;;; the issue from among the issues which is currently selected.
+    :issue "Currency"
+    ;;; the issues selected for the issues page on this day.
+    :issues {"Currency" "Scotland could keep the Pound, or use the Euro. But we could also set up a new currency of our own. Yada yada yada"
+             "Monarchy" "Scotland could keep the Queen. This is an issue to be decided after independence. Yada yada yada"
+             "Defence" "Scotland will not have nuclear weapons, and will probably not choose to engage in far-off wars. But we could remain members of NATO"}
+    ;;; message of the day
+    :motd "This is a test version only. There is no real data."
+    ;;; the options from among which electors can select.
+    :options [{:id :yes :description "Yes"} {:id :no :description "No"}]
+    ;;; the currently displayed 'page' within the app.
+    :page :home
+    })

src/cljs/youyesyet/handlers.cljs

@@ -2,6 +2,29 @@
   (:require [youyesyet.db :as db]
             [re-frame.core :refer [dispatch reg-event-db]]))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;;;;
+;;;; youyesyet.handlers: handlers for events.
+;;;;
+;;;; This program is free software; you can redistribute it and/or
+;;;; modify it under the terms of the GNU General Public License
+;;;; as published by the Free Software Foundation; either version 2
+;;;; of the License, or (at your option) any later version.
+;;;;
+;;;; This program is distributed in the hope that it will be useful,
+;;;; but WITHOUT ANY WARRANTY; without even the implied warranty of
+;;;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+;;;; GNU General Public License for more details.
+;;;;
+;;;; You should have received a copy of the GNU General Public License
+;;;; along with this program; if not, write to the Free Software
+;;;; Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301,
+;;;; USA.
+;;;;
+;;;; Copyright (C) 2016 Simon Brooke for Radical Independence Campaign
+;;;;
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
 (reg-event-db
   :initialize-db
   (fn [_ _]
@@ -16,4 +39,3 @@
   :set-issue
   (fn [db [_ issue]]
     (assoc (assoc db :issue issue) :page :issue)))
-

src/cljs/youyesyet/subscriptions.cljs

@@ -1,10 +1,53 @@
 (ns youyesyet.subscriptions
   (:require [re-frame.core :refer [reg-sub]]))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;;;;
+;;;; youyesyet.views.electors: subscriptions for everything in the app state.
+;;;;
+;;;; This program is free software; you can redistribute it and/or
+;;;; modify it under the terms of the GNU General Public License
+;;;; as published by the Free Software Foundation; either version 2
+;;;; of the License, or (at your option) any later version.
+;;;;
+;;;; This program is distributed in the hope that it will be useful,
+;;;; but WITHOUT ANY WARRANTY; without even the implied warranty of
+;;;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+;;;; GNU General Public License for more details.
+;;;;
+;;;; You should have received a copy of the GNU General Public License
+;;;; along with this program; if not, write to the Free Software
+;;;; Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301,
+;;;; USA.
+;;;;
+;;;; Copyright (C) 2016 Simon Brooke for Radical Independence Campaign
+;;;;
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
 (reg-sub
-  :page
+  :motd
   (fn [db _]
-    (:page db)))
+    (:motd db)))
+
+(reg-sub
+  :address
+  (fn [db _]
+    (:address db)))
+
+(reg-sub
+  :addresses
+  (fn [db _]
+    (:addresses db)))
+
+(reg-sub
+  :electors
+  (fn [db _]
+    (:electors db)))
+
+(reg-sub
+  :issue
+  (fn [db _]
+    (:issue db)))
 
 (reg-sub
   :issues
@@ -12,6 +55,11 @@
     (:issues db)))
 
 (reg-sub
-  :issue
+  :page
   (fn [db _]
-    (:issue db)))
+    (:page db)))
+
+(reg-sub
+  :options
+  (fn [db _]
+    (:options db)))

src/cljs/youyesyet/ui_utils.cljs

@@ -32,7 +32,7 @@
 
 
 (defn big-link [text target]
-  [:div.big-link-container
+  [:div.big-link-container {:key target}
    [:a.big-link {:href target} text]])
 
 
@@ -53,5 +53,6 @@
             :on-click #(swap! collapsed? not)}]
      [:menu.nav {:id "nav-menu" :class (if @collapsed? "hidden" "shown")}
       (nav-link "#/map" "Map" :map collapsed?)
+      (nav-link "#/electors" "Electors" :electors collapsed?)
       (nav-link "#/issues" "Issues" :issues collapsed?)
       (nav-link "#/about" "About" :about collapsed?)]]))

src/cljs/youyesyet/views/about.cljs

@@ -1,5 +1,6 @@
 (ns youyesyet.views.about
-  (:require [re-frame.core :refer [reg-sub]]
+  (:require [re-frame.core :refer [reg-sub subscribe]]
+            [markdown.core :refer [md->html]]
             [youyesyet.ui-utils :as ui]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -33,10 +34,13 @@
 (defn panel
   "Generate the about panel."
   []
+  (let [motd @(subscribe [:motd])]
   [:div
    [:h1 "You Yes Yet?"]
    [:div.container {:id "main-container"}
     [:h2 "Pre-alpha/proof of concept"]
+    [:p.motd {:dangerouslySetInnerHTML
+              {:__html (md->html motd)}}]
     [:p
      [:img {:src "img/ric-logo.png" :width "24" :height "24"}]
      " A project of the "
@@ -57,4 +61,4 @@
      [:img {:src "img/gnu.small.png" :alt "Free Software Foundation" :height "24" :width "24"}]
      " Licensed under the "
      [:a {:href "http://www.gnu.org/licenses/gpl-2.0.html"}
-      "GNU General Public License v2.0"]]]])
+      "GNU General Public License v2.0"]]]]))

src/cljs/youyesyet/views/electors.cljs

@@ -1,5 +1,6 @@
 (ns youyesyet.views.electors
-  (:require [re-frame.core :refer [reg-sub]]))
+  (:require [re-frame.core :refer [reg-sub subscribe]]
+            [youyesyet.ui-utils :as ui]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;;;;
@@ -40,7 +41,76 @@
 ;;; 4. an 'issues' icon.
 ;;; The mechanics of how this panel is laid out don't matter.
 
+(defn gender-cell
+  [elector]
+  (let [gender (:gender elector)
+        image (if gender (name gender) "unknown")]
+    [:td {:key (:id elector)} (if gender [:img {:src (str "img/gender/" image ".png") :alt image}])]))
+
+(defn genders-row
+  [electors]
+  [:tr
+   (map
+     #(gender-cell %) electors)])
+
+(defn name-cell
+  [elector]
+  [:td {:key (str "name-" (:id elector))} (:name elector)])
+
+(defn names-row
+  [electors]
+  [:tr
+   (map
+     #(name-cell %) electors)])
+
+(defn options-row
+  [electors option]
+  (let [optid (:id option)
+        optname (name optid)]
+    [:tr {:key (str "options-" optid)}
+     (map
+       #(let [selected (= optid (:intention %))
+              image (if selected (str "img/option/" optname "-selected.png")
+                      (str "img/option/" optname "-unselected.png"))]
+          [:td  {:key (str "option-" optid "-" (:id %))}
+           [:a {:href (str "#/set-intention/" (:id %) "/" optid)}
+            [:img {:src image :alt optname}]]])
+       electors)]))
+
+(defn issue-cell
+  "Create an issue cell for a particular elector"
+  [elector]
+  [:td {:key (:id elector)}
+   [:a {:href (str "#/issues/" (:id elector))}
+    [:img {:src "/img/issues.png" :alt "Issues"}]]])
+
+(defn issues-row
+  [electors]
+  [:tr
+   (map
+     #(issue-cell %)
+     electors)])
+
 (defn panel
   "Generate the electors panel."
   []
-  [])
+  (let [address @(subscribe [:address])
+        electors @(subscribe [:electors])
+        options @(subscribe [:options])]
+    [:div
+     [:h1 (:address address) (count electors) " electors"]
+     [:div.container {:id "main-container"}
+      [:table
+       ;; genders row
+       (genders-row electors)
+       ;; names row
+       (names-row electors)
+       ;; options rows
+       (map
+         #(options-row electors %)
+         options)
+       ;; issues row
+       (issues-row electors)]
+      (ui/back-link)]]))
+
+

src/cljs/youyesyet/views/issue.cljs

@@ -40,7 +40,7 @@
     [:div
      [:h1 issue]
      [:div.container {:id "main-container"}
-      (ui/back-link)
       [:div {:id "issue"}
        [:div {:id "issue-text"}
-        (issues issue)]]]]))
+        (issues issue)]]
+      (ui/back-link)]]))

src/cljs/youyesyet/views/map.cljs

@@ -1,5 +1,5 @@
 (ns youyesyet.views.map
-  (:require [re-frame.core :refer [reg-sub]]
+  (:require [re-frame.core :refer [reg-sub subscribe]]
             [reagent.core :as reagent]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -52,27 +52,51 @@
 (def osm-url "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
 (def osm-attrib "Map data &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors")
 
+(defn pin-image
+  "select the name of a suitable pin image for this address"
+  [address]
+  "yes-pin")
+
+(defn add-map-pin
+  "Add a map-pin with this pin-image at this latitude and longitude
+  in this map view"
+  [latitude longitude pin-image view]
+  (let [pin
+        (.Icon js/L
+               {:iconUrl (str "img/map-pins/" pin-image ".png")
+                :shadorUrl "img/map-pins/shadow_pin.png"
+                :iconSize [32 42]
+                :shadowSize [57 24]
+                :iconAnchor [16 41]
+                :shadowAnchor [16 23]}
+               )]
+    (.addTp (.marker js/L [latitude longitude] {:icon pin})) view))
+
+
+
 
 ;; My gods mapbox is user-hostile!
 (defn map-did-mount-mapbox
-    "Did-mount function loading map tile data from MapBox (proprietary)."
+  "Did-mount function loading map tile data from MapBox (proprietary)."
   []
-  (let [map (.setView (.map js/L "map") #js [55.86 -4.25] 13)]
+  (let [view (.setView (.map js/L "map") #js [55.82 -4.25] 13)]
     ;; NEED TO REPLACE FIXME with your mapID!
     (.addTo (.tileLayer js/L "http://{s}.tiles.mapbox.com/v3/FIXME/{z}/{x}/{y}.png"
                         (clj->js {:attribution "Map data &copy; [...]"
                                   :maxZoom 18}))
-            map)))
+            view)))
 
 
 (defn map-did-mount-osm
   "Did-mount function loading map tile data from Open Street Map (open)."
   []
-  (let [map (.setView (.map js/L "map") #js [55.86 -4.25] 13)]
+  (let [view (.setView (.map js/L "map") #js [55.86 -4.25] 13)
+        addresses @(subscribe [:addresses])]
     (.addTo (.tileLayer js/L osm-url
                         (clj->js {:attribution osm-attrib
                                   :maxZoom 18}))
-            map)))
+            view)
+    (map #(add-map-pin (:latitude %) (:longitude %) (pin-image %) view) addresses)))
 
 
 (defn map-did-mount
@@ -96,4 +120,3 @@
   []
   (reagent/create-class {:reagent-render map-render
                          :component-did-mount map-did-mount}))
-