Skip to content

Commit

Permalink
in the middle of adding sharing link
Browse files Browse the repository at this point in the history
  • Loading branch information
@fterrier
fterrier committed Feb 13, 2015
1 parent a5ec253 commit fd5dba4
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 89 deletions.
3 changes: 1 addition & 2 deletions env/dev/src/cljs/tramboard_clj/script/main.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@
[clojure.browser.repl :as repl]
[om.core :as om :include-macros true]))

(enable-console-print!)

; TODO maybe wrap this in a (defmacro run-only-in-dev)
;(repl/connect "http://localhost:9000/repl")

Expand All @@ -14,4 +12,5 @@
:jsload-callback (fn []
(tram/main)))

(tram/hook-browser-navigation!)
(tram/main)
3 changes: 1 addition & 2 deletions env/prod/src/cljs/tramboard_clj/script/main.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,5 @@
(:require [tramboard-clj.script.tram :as tram]
[om.core :as om :include-macros true]))

(enable-console-print!)

(tram/hook-browser-navigation!)
(tram/main)
1 change: 1 addition & 0 deletions project.clj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
[ring/ring-codec "1.0.0"]
[ring/ring-json "0.3.1"]
[bk/ring-gzip "0.1.1"]
[secretary "1.2.1"]
[org.clojars.jws/ring-etag-middleware "0.1.2-SNAPSHOT"]
[org.clojars.fterrier/om-autocomplete "0.2.0-SNAPSHOT"]
[com.newrelic.agent.java/newrelic-api "3.13.0"]]
Expand Down
160 changes: 100 additions & 60 deletions src/cljs/tramboard_clj/script/tram.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,22 @@
[arosequist.om-autocomplete :as ac]
[arosequist.om-autocomplete.bootstrap :as acb]
[cljs.reader :as reader]
[secretary.core :as secretary :refer-macros [defroute]]
[goog.events :as events]
[goog.history.EventType :as EventType]
[goog.crypt.base64 :as b64]
[tramboard-clj.script.time :refer [parse-from-date-time format-to-hour-minute display-time minutes-from]]
[tramboard-clj.script.state :refer [is-home is-edit is-split get-state go-home go-edit go-toggle-split modify-complete-state get-all-states]])
(:import [goog.net XhrIo]))
(:import [goog.net XhrIo]
goog.History))

; some global constants here
(def refresh-rate 10000)

(secretary/set-config! :prefix "#")
(defroute "/link/:hash" [hash]
(js/console.log (str "got hash: " hash)))

; our initial app state
(defonce app-state
(atom {; views from local storage
Expand Down Expand Up @@ -249,12 +258,12 @@
om/IRender
(render [this]
(let [exclude-text (str "filter " (:to arrival) " from view")]
(dom/a #js {:href "#"
:className "link-icon"
:aria-label exclude-text
:onClick (fn [e]
(transact-add-filter current-view arrival)
(.preventDefault e))} "✖")))))
(dom/a #js {:href "#"
:className "link-icon"
:aria-label exclude-text
:onClick (fn [e]
(transact-add-filter current-view arrival)
(.preventDefault e))} "✖")))))

(defn is-white [color]
(let [upper-case-color (when-not (nil? color) (str/upper-case color))]
Expand Down Expand Up @@ -311,7 +320,7 @@
to (:to arrival)
accessible (:accessible arrival)]
(dom/tr #js {:className "tram-row"}
(dom/td #js {:className "number-cell"} (om/build number-icon {:number number :colors (:colors arrival) :type type}))
(dom/td #js {:className "first-cell"} (om/build number-icon {:number number :colors (:colors arrival) :type type}))
(dom/td #js {:className "station"}
(dom/span #js {:className "exclude-link"} (om/build exclude-destination-link app))
(dom/span #js {:className "station-name"
Expand Down Expand Up @@ -342,6 +351,13 @@
(dom/div #js {:className "stop-heading"}
(dom/h2 #js {:className "heading thin"} (str "Trams / buses / trains departing from " (str/join " / " (map #(:name %) (get-stops-in-order current-view)))))))))

(defn export-view [view]
(pr-str
(dissoc (update-in view [:stops]
; we remove :view-id :last-updated from the view and :known-destinations from each stop
(fn [stops] (into {} (map #(vector (key %)
(dissoc (val %) :known-destinations)) stops)))) :view-id :last-updated)))

(defn control-bar [{:keys [current-state current-view]} owner {:keys [on-activity-fn]}]
(reify
om/IWillMount
Expand All @@ -368,28 +384,43 @@
(will-unmount [this]
(let [hide-ch (om/get-state owner :hide-ch)]
(when hide-ch (close! hide-ch))))
om/IRender
(render [this]
(let [excluded-destinations (remove nil? (flatten (map #(:excluded-destinations (val %)) (:stops current-view))))
expanded (= :expanded (:display (:params current-state)))
fullscreen-text (if expanded "exit fullscreen" "fullscreen")]

(dom/div #js {:className "control-bar"}
(dom/a #js {:href "#"
:className (str "link-icon glyphicon " (if expanded "glyphicon-resize-small" "glyphicon-resize-full"))
:aria-label fullscreen-text
:onClick (fn [e]
; we change the state to hidden
(if expanded
(om/transact! current-state :params #(dissoc % :display ))
(om/transact! current-state :params #(assoc % :display :expanded)))
(.preventDefault e))})
(dom/a #js {:href "#"
:className (str "remove-filter link-icon " (when (empty? excluded-destinations) "hidden"))
:onClick (fn [e]
(.preventDefault e)
(transact-remove-filters current-view))}
(dom/span #js {:className "remove-filter-image"} "✖") (dom/span #js {:className "remove-filter-text thin"} "remove filters")))))))
om/IRenderState
(render-state [this {:keys [share-input-value]}]
(let [excluded-destinations (remove nil? (flatten (map #(:excluded-destinations (val %)) (:stops current-view))))
expanded (= :expanded (:display (:params current-state)))
fullscreen-text (if expanded "exit fullscreen" "fullscreen")]

(dom/div #js {:className "control-bar"}
(dom/span #js {:className "first-cell"}
(dom/a #js {:href "#"
:className (str "link-icon glyphicon " (if expanded "glyphicon-resize-small" "glyphicon-resize-full"))
:aria-label fullscreen-text
:onClick (fn [e]
; we change the state to hidden
(if expanded
(om/transact! current-state :params #(dissoc % :display ))
(om/transact! current-state :params #(assoc % :display :expanded)))
(.preventDefault e))}))
(dom/span nil
(dom/a #js {:href "#"
:className (str "remove-filter link-icon " (when (empty? excluded-destinations) "hidden"))
:onClick (fn [e]
(.preventDefault e)
(transact-remove-filters current-view))}
(dom/span #js {:className "remove-filter-image"} "✖") (dom/span #js {:className "remove-filter-text thin"} "remove filters")))
(dom/span nil
(dom/input #js {:aria-label "share URL"
:className (str "share-input form-control " (when (nil? share-input-value) "hidden"))
:type "text"
:value share-input-value}))
(dom/span #js {:className "share-link"}
(dom/a #js {:href "#"
:className "link-icon glyphicon glyphicon-link"
:aria-label "share"
:onClick (fn [e]
(.preventDefault e)
(let [share-input-value (b64/encodeString (export-view current-view))]
(om/set-state! owner :share-input-value share-input-value)))})))))))

(defn arrival-tables-view [{:keys [current-view current-state]} owner {:keys [on-activity-fn]}]
"Takes as input a set of views (station id) and the size of the pane and renders the table views."
Expand Down Expand Up @@ -762,36 +793,36 @@
(reify
om/IRenderState
(render-state [this {:keys [activity]}]
; those all depend on the screen that's displayed
(let [configured-views (:configured-views app)
complete-state (:complete-state app)
current-view (current-view current-state configured-views)
display (:display (:params current-state))
recent-views (get-recent-board-views configured-views complete-state)
display-banner (and (is-home current-state) (not (is-split complete-state)))]

(println "Rendering stationboard")
(dom/div (clj->js {:className
(str (when-not (:visible current-state) "hidden") " "
(when (= display :expanded) "display-expanded") " "
(when (= activity :idle) "activity-idle") " "
(name (:state-id current-state)))})

(om/build menu-bar {:app app :current-state current-state})
(dom/div #js {:className "container-fluid"}
(dom/div #js {:className (str "responsive-display " (when-not display-banner "hidden"))}
(om/build welcome-banner nil))
(om/build edit-pane {:app app :current-state current-state})
(cond
(is-home current-state)
(dom/div #js {:className (str "responsive-display " (when (empty? recent-views) "hidden"))}
(om/build recent-boards {:app app :current-state current-state}))
(is-edit current-state)
(dom/div #js {:className "responsive-display"}
(om/build stop-heading current-view)
(om/build arrival-tables-view
{:current-view current-view :current-state current-state}
{:opts {:on-activity-fn (fn [activity] (om/set-state! owner :activity activity))}})))))))))
; those all depend on the screen that's displayed
(let [configured-views (:configured-views app)
complete-state (:complete-state app)
current-view (current-view current-state configured-views)
display (:display (:params current-state))
recent-views (get-recent-board-views configured-views complete-state)
display-banner (and (is-home current-state) (not (is-split complete-state)))]

(println "Rendering stationboard")
(dom/div (clj->js {:className
(str (when-not (:visible current-state) "hidden") " "
(when (= display :expanded) "display-expanded") " "
(when (= activity :idle) "activity-idle") " "
(name (:state-id current-state)))})

(om/build menu-bar {:app app :current-state current-state})
(dom/div #js {:className "container-fluid"}
(dom/div #js {:className (str "responsive-display " (when-not display-banner "hidden"))}
(om/build welcome-banner nil))
(om/build edit-pane {:app app :current-state current-state})
(cond
(is-home current-state)
(dom/div #js {:className (str "responsive-display " (when (empty? recent-views) "hidden"))}
(om/build recent-boards {:app app :current-state current-state}))
(is-edit current-state)
(dom/div #js {:className "responsive-display"}
(om/build stop-heading current-view)
(om/build arrival-tables-view
{:current-view current-view :current-state current-state}
{:opts {:on-activity-fn (fn [activity] (om/set-state! owner :activity activity))}})))))))))

(defn split-stationboard [{:keys [complete-state] :as app} owner]
(reify
Expand All @@ -804,6 +835,14 @@
(clj->js {:className (str "split-board " (name (get order 0)) "-" (name (get order 1)))}))
(map #(om/build stationboard {:current-state % :app app}) states))))))

(defn hook-browser-navigation! []
(doto (History.)
(events/listen
EventType/NAVIGATE
(fn [event]
(secretary/dispatch! (.-token event))))
(.setEnabled true)))

(defn main []
(let [saved-state (or (try (reader/read-string (. js/localStorage (getItem "views"))) (catch :default e (println e) {})) {})
saved-app-state (swap! app-state deep-merge saved-state)]
Expand All @@ -813,3 +852,4 @@
(. js/localStorage (setItem "views"
; here if we don't dissoc the page will reload in the current state
(pr-str new-state))))})))

63 changes: 38 additions & 25 deletions src/less/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,13 +228,17 @@ a .link-icon a.link-icon, a:hover .link-icon, a.link-icon:hover, a:visited .link
}

.control-bar {
display: table;
width: 100%;

background-color: #f5f5f5;
padding: 4px 4px;
margin-bottom: 14px;
margin-top: 10px;

a, a:hover, a:visited {
a, a:hover, a:visited, input {
line-height: 2em;
height: 2em;
}

.glyphicon {
Expand All @@ -258,13 +262,22 @@ a .link-icon a.link-icon, a:hover .link-icon, a.link-icon:hover, a:visited .link
text-decoration: underline;
}

.remove-filter {
padding-left: 3px;
padding-right: 3px;
}

.remove-filter-text {
color: #286090;
margin-left: 8px;
position: absolute;
width: 200px;
top: -0.5em;
}

& > span {
display: table-cell;
vertical-align: middle;
}

}

/* specific styles for the board itself */
Expand Down Expand Up @@ -369,15 +382,21 @@ a .link-icon a.link-icon, a:hover .link-icon, a.link-icon:hover, a:visited .link
}

/* Those things change on smaller devices*/
.first-cell {
width: 70px;
}

.control-bar {
.share-link {
width: 33px;
}
}

.tram-table {
.tram-row {
line-height: 70px
}

.number-cell {
width: 70px;
}

.station-name {
line-height: 32px;
}
Expand Down Expand Up @@ -405,12 +424,6 @@ a .link-icon a.link-icon, a:hover .link-icon, a.link-icon:hover, a:visited .link
line-height: 68px;
}

.control-bar {
.remove-filter {
margin-left: 41px;
}
}

.smaller-device() {
.responsive-display {
font-size: 0.85em;
Expand All @@ -430,9 +443,13 @@ a .link-icon a.link-icon, a:hover .link-icon, a.link-icon:hover, a:visited .link
line-height: 58px;
}

.first-cell {
width: 60px;
}

.control-bar {
.remove-filter {
margin-left: 35px;
.share-link {
width: 30px;
}
}

Expand All @@ -441,10 +458,6 @@ a .link-icon a.link-icon, a:hover .link-icon, a.link-icon:hover, a:visited .link
line-height: 60px
}

.number-cell {
width: 60px;
}

.station-name {
line-height: 28px;
}
Expand Down Expand Up @@ -484,9 +497,13 @@ a .link-icon a.link-icon, a:hover .link-icon, a.link-icon:hover, a:visited .link
padding-right: 2px;
}

.first-cell {
width: 40px;
}

.control-bar {
.remove-filter {
margin-left: 20px;
.share-link {
width: 24px;
}
}

Expand All @@ -495,10 +512,6 @@ a .link-icon a.link-icon, a:hover .link-icon, a.link-icon:hover, a:visited .link
line-height: 40px
}

.number-cell {
width: 40px;
}

.station-name {
line-height: 18px;
}
Expand Down

0 comments on commit fd5dba4

Please sign in to comment.