123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- (ns microtables-frontend.views
- (:require
- [re-frame.core :as re-frame]
- [microtables-frontend.subs :as subs]
- [microtables-frontend.events :as events]
- [microtables-frontend.utils :as utils]))
- ;; TABLE COMPONENTS
- (defn cell [c r data]
- (let [datum (get-in data [c r])]
- ^{:key (str c r)} [:td
- [:input {:id (str c r)
- :class (if (= (:view datum) :highlighted) "highlighted" "")
- :value (if (= (get datum :view nil) :value)
- (get datum :value "")
- (get datum :error (get datum :display (get datum :value ""))));TODO: add "highlight" display mode (possibly just a css class)
- :on-change #(re-frame/dispatch [::events/edit-cell-value c r (.. % -target -value)])
- :on-focus #(re-frame/dispatch [::events/movement-enter-cell c r])
- :on-blur #(re-frame/dispatch [::events/movement-leave-cell c r])
- :on-keyPress #(when (= (.. % -which) 13)
- (re-frame/dispatch [::events/press-enter-in-cell c r]))}]]))
- (defn row [r cols data]
- ^{:key (str "row-" r)} [:tr
- (cons
- ^{:key (str "row-head-" r)} [:th (str r)]
- (map #(cell % r data) cols))])
- (defn header-row [cols]
- ^{:key "header"} [:tr
- (cons
- ^{:key "corner"} [:th]
- (map (fn [c] ^{:key (str "col-head-" c)} [:th c]) cols))])
- (defn sheet [data]
- [:table
- {:id "main-table"}
- [:tbody
- ;TODO: figure out appropriate starting values for maxrow and maxcol (maybe keep them intentionally small)
- ;TODO: figure out movement (maybe allow scroll overflow)
- (let [maxrow 50;(utils/highest-row data)
- maxcol "Z";(utils/highest-col data)
- cols (take-while (partial not= (utils/next-letter maxcol)) utils/col-letters)]
- (cons
- (header-row cols)
- (map #(row % cols data) (range 1 (inc maxrow)))))]])
- (defn extend-range
- []
- [:div {:class "control-group"}
- [:div {:class "control-label"}
- "Extend Range"]
- [:button "-cols"]
- [:input]
- [:button]])
- (defn controls []
- [:div
- ;[extend-range]
- ;extend range (number field, then shrink/left/up and expand/right/down buttons on either side)
- ;fill range (single tap, single column/row fill? number field and button?)
- ;move range (designate new "top-left corner" cell for range, figure out overwriting destination cells)
- ;empty range (delete contents, re-evaluate)
- ;delete range (figure out how to move cells over)
- ;copy range (figure out clipboard)
- [:div
- {:class "control-group"}
- #_[:a ;TODO: consider making the "About" info an overlay rather than a link
- {:href "/about.html"
- :target "_blank"}
- "About"]
- "This is a demo version only, and still in development. Nothing gets saved for the moment."
- [:br]
- "Try adding values (plain numbers) or formulae (ex: \"=B2 + sum(A1:A6)\") into the cells."
- [:br]
- "Created by "
- [:a
- {:href "https://betweentwocommits.com/about"
- :target "_blank"}
- "Brandon Wong"]]])
- (defn control-panel [state]
- [:div
- {:id "controls"}
- [:div
- ;TODO: link left controls with position of the whole table
- {:id "controls-left"
- :class (if (= state :left) "open" "")}
- [controls]]
- [:div
- {:id "controls-bottom"
- :class (if (= state :bottom) "open" "")}
- [controls]]
- ;←↑→↓
- [:div
- {:id "left-controls-button"
- :on-click #(re-frame/dispatch [::events/set-controls-state (if (= state :left) nil :left)])}
- (if (= state :left) "←" "→")]
- [:div
- {:id "bottom-controls-button"
- :on-click #(re-frame/dispatch [::events/set-controls-state (if (= state :bottom) nil :bottom)])}
- (if (= state :bottom) "↓" "↑")]
- [:div
- {:id "main-logo"
- :title "Microtables"}
- [:img {:src "logo.svg"}]]])
- (defn main-panel []
- (let [data (re-frame/subscribe [::subs/table-data])
- controls-state (re-frame/subscribe [::subs/controls-state])]
- [:div
- [sheet @data]
- [control-panel @controls-state]]))
|