From d36c58b44cc48b06642b61a8085148df40910cb9 Mon Sep 17 00:00:00 2001 From: simon Date: Fri, 24 Mar 2017 10:32:31 +0000 Subject: [PATCH] #30: Tremendous progress, now understand reg-sub model Although there's no actual collection of data from the back end, the user interface is now mostly working. And, I flatter myself, looking good. --- resources/public/css/yyy-app.css | 9 +++++ resources/public/css/yyy-common.css | 3 +- src/cljs/youyesyet/core.cljs | 23 ++++++------ src/cljs/youyesyet/db.cljs | 20 ++++++++++- src/cljs/youyesyet/handlers.cljs | 7 ++-- src/cljs/youyesyet/subscriptions.cljs | 9 +++-- src/cljs/youyesyet/views/about.cljs | 48 +++++++++++++------------ src/cljs/youyesyet/views/electors.cljs | 8 +++++ src/cljs/youyesyet/views/home.cljs | 49 -------------------------- src/cljs/youyesyet/views/issue.cljs | 15 +++++++- src/cljs/youyesyet/views/issues.cljs | 30 +++++----------- src/cljs/youyesyet/views/map.cljs | 5 +++ 12 files changed, 112 insertions(+), 114 deletions(-) delete mode 100644 src/cljs/youyesyet/views/home.cljs diff --git a/resources/public/css/yyy-app.css b/resources/public/css/yyy-app.css index 8a46cd2..d7ee8fa 100644 --- a/resources/public/css/yyy-app.css +++ b/resources/public/css/yyy-app.css @@ -19,9 +19,18 @@ * USA. */ +h1 { + width:100%; + background-color: rgb(7, 57, 106); + color: white; + font-family: "Archivo Black", "Sans Bold", "Arial Black", sans-serif; + font-weight: normal; + margin-top: 0; +} /* desktops and laptops, primarily. Adapted to mouse; targets may be small */ @media all and (min-device-width: 1025px) { + /* top-of-page navigation, not editable, provided by Smeagol */ #nav{ margin: 0; diff --git a/resources/public/css/yyy-common.css b/resources/public/css/yyy-common.css index 383b77e..c0b7548 100644 --- a/resources/public/css/yyy-common.css +++ b/resources/public/css/yyy-common.css @@ -373,8 +373,7 @@ th { h1 { /* I wouldn't normally use a px value, but the menu icon is 49px wide */ padding: 0.25em 5%; - padding-left: 100px; - text-align: right; + padding-left: 75px; } .hidden { diff --git a/src/cljs/youyesyet/core.cljs b/src/cljs/youyesyet/core.cljs index 367a5b0..8c88872 100644 --- a/src/cljs/youyesyet/core.cljs +++ b/src/cljs/youyesyet/core.cljs @@ -12,7 +12,7 @@ [youyesyet.ui-utils :as ui] [youyesyet.views.about :as about] [youyesyet.views.electors :as electors] - [youyesyet.views.home :as home] + [youyesyet.views.issue :as issue] [youyesyet.views.issues :as issues] [youyesyet.views.map :as maps] [youyesyet.views.followup-request :as request]) @@ -22,12 +22,12 @@ (defn about-page [] (about/panel)) -(defn home-page [] - (home/panel)) - (defn issues-page [] (issues/panel)) +(defn issue-page [] + (issue/panel)) + (defn map-page [] (maps/panel)) @@ -35,16 +35,16 @@ (request/panel)) (def pages - {:home #'home-page + {:about #'about-page :issues #'issues-page + :issue #'issue-page :map #'map-page - :about #'about-page}) + }) (defn page [] [:div [:header - [ui/navbar] - [:h1 "You yes yet?"]] + [ui/navbar]] [(pages @(rf/subscribe [:page]))]]) ;; ------------------------- @@ -60,6 +60,9 @@ (secretary/defroute "/issues" [] (rf/dispatch [:set-active-page :issues])) +(secretary/defroute "/issue/:issue" {issue :issue} + (rf/dispatch [:set-issue issue])) + (secretary/defroute "/map" [] (rf/dispatch [:set-active-page :map])) @@ -76,9 +79,6 @@ ;; ------------------------- ;; Initialize app -(defn fetch-docs! [] - (GET (str js/context "/docs") - {:handler #(rf/dispatch [:set-docs %])})) (defn mount-components [] (r/render [#'page] (.getElementById js/document "app"))) @@ -86,6 +86,5 @@ (defn init! [] (rf/dispatch-sync [:initialize-db]) (load-interceptors!) - (fetch-docs!) (hook-browser-navigation!) (mount-components)) diff --git a/src/cljs/youyesyet/db.cljs b/src/cljs/youyesyet/db.cljs index 992c98e..cfc88ad 100644 --- a/src/cljs/youyesyet/db.cljs +++ b/src/cljs/youyesyet/db.cljs @@ -30,4 +30,22 @@ ;;; 'client-state'. (def default-db - {:page :home}) + ;;; 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" + }) diff --git a/src/cljs/youyesyet/handlers.cljs b/src/cljs/youyesyet/handlers.cljs index e19a2d1..b6c97d7 100644 --- a/src/cljs/youyesyet/handlers.cljs +++ b/src/cljs/youyesyet/handlers.cljs @@ -13,6 +13,7 @@ (assoc db :page page))) (reg-event-db - :set-docs - (fn [db [_ docs]] - (assoc db :docs docs))) + :set-issue + (fn [db [_ issue]] + (assoc (assoc db :issue issue) :page :issue))) + diff --git a/src/cljs/youyesyet/subscriptions.cljs b/src/cljs/youyesyet/subscriptions.cljs index 7a13a1c..fa4d351 100644 --- a/src/cljs/youyesyet/subscriptions.cljs +++ b/src/cljs/youyesyet/subscriptions.cljs @@ -7,6 +7,11 @@ (:page db))) (reg-sub - :docs + :issues (fn [db _] - (:docs db))) + (:issues db))) + +(reg-sub + :issue + (fn [db _] + (:issue db))) diff --git a/src/cljs/youyesyet/views/about.cljs b/src/cljs/youyesyet/views/about.cljs index 5c41707..45ebdb4 100644 --- a/src/cljs/youyesyet/views/about.cljs +++ b/src/cljs/youyesyet/views/about.cljs @@ -33,26 +33,28 @@ (defn panel "Generate the about panel." [] - [:div.container {:id "main-container"} - [:h2 "Pre-alpha/proof of concept"] - [:p - [:img {:src "img/ric-logo.png" :width "24" :height "24"}] - " A project of the " - [:a {:href "https://radical.scot/"} "Radical Independence Campaign"]] - [:p - [:img {:src "img/luminus-logo.png" :alt "Luminus" :height "24" :width "24"}] - " Built with " - [:a {:href "http://www.luminusweb.net/"} "Luminus Web"]] - [:p - [:img {:src "img/clojure-icon.gif" :alt "Clojure" :height "24" :width "24"}] - " Powered by " - [:a {:href "http://clojure.org"} "Clojure"]] - [:p - [:img {:src "img/github-logo-transparent.png" :alt "GitHub" :height "24" :width "24"}] - " Find me/fork me on " - [:a {:href "https://github.com/simon-brooke/youyesyet"} "GitHub"]] - [:p - [: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"]]]) + [:div + [:h1 "You Yes Yet?"] + [:div.container {:id "main-container"} + [:h2 "Pre-alpha/proof of concept"] + [:p + [:img {:src "img/ric-logo.png" :width "24" :height "24"}] + " A project of the " + [:a {:href "https://radical.scot/"} "Radical Independence Campaign"]] + [:p + [:img {:src "img/luminus-logo.png" :alt "Luminus" :height "24" :width "24"}] + " Built with " + [:a {:href "http://www.luminusweb.net/"} "Luminus Web"]] + [:p + [:img {:src "img/clojure-icon.gif" :alt "Clojure" :height "24" :width "24"}] + " Powered by " + [:a {:href "http://clojure.org"} "Clojure"]] + [:p + [:img {:src "img/github-logo-transparent.png" :alt "GitHub" :height "24" :width "24"}] + " Find me/fork me on " + [:a {:href "https://github.com/simon-brooke/youyesyet"} "GitHub"]] + [:p + [: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"]]]]) diff --git a/src/cljs/youyesyet/views/electors.cljs b/src/cljs/youyesyet/views/electors.cljs index 5c1b8f3..e3d3711 100644 --- a/src/cljs/youyesyet/views/electors.cljs +++ b/src/cljs/youyesyet/views/electors.cljs @@ -32,6 +32,14 @@ ;;; See https://github.com/simon-brooke/youyesyet/blob/master/doc/specification/userspec.md#electors-view +;;; The design for this panel is one column per elector within the address. +;;; Each column contains +;;; 1. a stick figure identifying gender (for recognition); +;;; 2. the elector's name; +;;; 3. one icon for each option on the ballot; +;;; 4. an 'issues' icon. +;;; The mechanics of how this panel is laid out don't matter. + (defn panel "Generate the electors panel." [] diff --git a/src/cljs/youyesyet/views/home.cljs b/src/cljs/youyesyet/views/home.cljs deleted file mode 100644 index e877315..0000000 --- a/src/cljs/youyesyet/views/home.cljs +++ /dev/null @@ -1,49 +0,0 @@ -(ns youyesyet.views.home - (:require [re-frame.core :as rf] - [markdown.core :refer [md->html]] - [youyesyet.ui-utils :as ui])) - -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;;;; -;;;; youyesyet.views.electors: home view for youyesyet. -;;;; -;;;; 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 -;;;; -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; - - -;;; The pattern from the re-com demo (https://github.com/Day8/re-com) is to have -;;; one source file/namespace per view. Each namespace contains a function 'panel' -;;; whose output is an enlive-style specification of the view to be redered. -;;; I propose to follow this pattern. This file will provide the home view. - -(defn panel - "Generate the home panel." - [] - [:div.container {:id "main-container"} - (ui/big-link "About" "#/about") - (ui/big-link "Map" "#/map") - [:div.jumbotron - [:h1 "You Yes Yet?"] - [:p "Time to start building your site!"] - [:p [:a.btn.btn-primary.btn-lg {:href "http://luminusweb.net"} "Learn more ยป"]]]]) - (when-let [docs @(rf/subscribe [:docs])] - [:div.row - [:div.col-md-12 - [:div {:dangerouslySetInnerHTML - {:__html (md->html docs)}}]]]) diff --git a/src/cljs/youyesyet/views/issue.cljs b/src/cljs/youyesyet/views/issue.cljs index 3954563..2da866d 100644 --- a/src/cljs/youyesyet/views/issue.cljs +++ b/src/cljs/youyesyet/views/issue.cljs @@ -1,5 +1,5 @@ (ns youyesyet.views.issue - (:require [re-frame.core :refer [reg-sub]] + (:require [re-frame.core :refer [reg-sub subscribe]] [youyesyet.ui-utils :as ui] [youyesyet.views.issues :as issues])) @@ -31,3 +31,16 @@ ;;; one source file/namespace per view. Each namespace contains a function 'panel' ;;; whose output is an enlive-style specification of the view to be redered. ;;; I propose to follow this pattern. This file will (eventually) provide the single issue view. + +(defn panel + "Generate the issue panel." + [] + (let [issue @(subscribe [:issue]) + issues @(subscribe [:issues])] + [:div + [:h1 issue] + [:div.container {:id "main-container"} + (ui/back-link) + [:div {:id "issue"} + [:div {:id "issue-text"} + (issues issue)]]]])) diff --git a/src/cljs/youyesyet/views/issues.cljs b/src/cljs/youyesyet/views/issues.cljs index d5b148b..6003395 100644 --- a/src/cljs/youyesyet/views/issues.cljs +++ b/src/cljs/youyesyet/views/issues.cljs @@ -1,5 +1,5 @@ (ns youyesyet.views.issues - (:require [re-frame.core :refer [reg-sub]] + (:require [re-frame.core :refer [reg-sub subscribe]] [youyesyet.ui-utils :as ui])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -33,26 +33,14 @@ ;;; See https://github.com/simon-brooke/youyesyet/blob/master/doc/specification/userspec.md#issues-view -(def *issues* - ;;; this is a dummy for the map fetched at load-time - {"Currency" "Lorem ipsum dolar sit amet" - "Head of state" "Lorem ipsum dolar sit amet" - "NATO and defence" "Lorem ipsum dolar sit amet"}) - -(defn get-issues-fn - "This is a temporary dummy for the function which will pull the issues from - the server." - [] - *issues*) - -;;; By memoising the function we arange that it is called only once -(def get-issues (memoize get-issues-fn)) - +;;; Simple list of the issues of the day. (defn panel "Generate the issues panel." [] - [:div.container {:id "main-container"} - (ui/back-link) - [:div {:id "issue-list"} - ] - (map (fn [k] (ui/big-link k (str "#/issue/" k))) (keys (get-issues)))]) + (let [issues @(subscribe [:issues])] + [:div + [:h1 "Issues"] + [:div.container {:id "main-container"} + (ui/back-link) + [:div {:id "issue-list"} + (map (fn [k] (ui/big-link k (str "#/issue/" k))) (keys issues))]]])) diff --git a/src/cljs/youyesyet/views/map.cljs b/src/cljs/youyesyet/views/map.cljs index d926295..18a538b 100644 --- a/src/cljs/youyesyet/views/map.cljs +++ b/src/cljs/youyesyet/views/map.cljs @@ -41,6 +41,11 @@ ;;; Note that this is raw reagent stylee; it should be refactoed into re-frame stylee ;;; when I understand it better. +;;; There should be one flag on the map for each address record currently in frame. +;;; Clicking the flag sets that address as the current address in the app state, +;;; and redirects to the electors view. How we handle blocks of flats needs further +;;; thought. + ;; which provider to use (def *map-provider* :osm)