status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Adding deleting, closing/opening and diff-cole/open added

This commit is contained in:
Gregg8 2018-01-11 18:15:02 +11:00
parent 3c80acd9db
commit f0ce08c77d
2 changed files with 289 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

288
src/day8/re_frame/trace/view/app_db.cljs
View File

@ -23,6 +23,35 @@
(def pod-gap common/gs-19s) ;; or 31? (def pod-gap common/gs-19s) ;; or 31?
(def pad-padding common/gs-7s) (def pad-padding common/gs-7s)
;; TODO: START ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS
(def *pods (r/atom [{:id (gensym) :path "[\"x\" \"y\"]" :open? true :diff? true}
{:id (gensym) :path "[:abc 123]" :open? true :diff? false}
{:id (gensym) :path "[:a :b :c]" :open? false :diff? true}
{:id (gensym) :path "[\"hello\"]" :open? false :diff? false}]
#_[]))
(defn add-pod []
(let [id (gensym)]
(println "Added pod" id)
(swap! *pods concat [{:id id :path "" :open? true :diff? false}])))
(defn delete-pod [id]
(println "Deleted pod" id)
(reset! *pods (filterv #(not= id (:id %)) @*pods)))
(defn update-pod-field
[id field new-val]
(let [f (fn [pod]
(if (= id (:id pod))
(do
;(println "Updated" field "in" (:id pod) "from" (get pod field) "to" new-val)
(assoc pod field new-val))
pod))]
(reset! *pods (mapv f @*pods))))
;; TODO: END ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS
(defn panel-header [] (defn panel-header []
[rc/h-box [rc/h-box
:justify :between :justify :between
@ -35,7 +64,7 @@
:label [rc/v-box :label [rc/v-box
:align :center :align :center
:children ["+ path inspector"]] :children ["+ path inspector"]]
:on-click #(println "Clicked [+ path inspector]")] :on-click #(add-pod)]
[rc/h-box [rc/h-box
:align :center :align :center
:gap common/gs-7s :gap common/gs-7s
@ -47,11 +76,11 @@
:children [[rc/label :label "reset app-db to:"] :children [[rc/label :label "reset app-db to:"]
[rc/button [rc/button
:class "bm-muted-button" :class "bm-muted-button"
:style {:width "79px" :style {:width "129px"
:padding "0px"} :padding "0px"}
:label [rc/v-box :label [rc/v-box
:align :center :align :center
:children ["initial state"]] :children ["initial epoch state"]]
:on-click #(println "Clicked [initial state]")] :on-click #(println "Clicked [initial state]")]
[rc/v-box [rc/v-box
:width common/gs-81s :width common/gs-81s
@ -66,127 +95,126 @@
:label "PROCESSING"]]] :label "PROCESSING"]]]
[rc/button [rc/button
:class "bm-muted-button" :class "bm-muted-button"
:style {:width "79px" :style {:width "129px"
:padding "0px"} :padding "0px"}
:label [rc/v-box :label [rc/v-box
:align :center :align :center
:children ["end state"]] :children ["end epoch state"]]
:on-click #(println "Clicked [end state]")]]]]]) :on-click #(println "Clicked [end state]")]]]]])
(defn path-header [path] (defn pod-header [{:keys [id path open? diff?]}]
(let [search-string (r/atom (when (some? path) (prn-str path))) ;;(rf/subscribe [:app-db/search-string]) [rc/h-box
*pod-open (r/atom true)] :class "app-db-path--header"
(fn [path] :style (merge {:border-top-left-radius "3px"
[rc/h-box :border-top-right-radius "3px"}
:class "app-db-path--header" (when-not open?
:style {:border-top-left-radius "3px" {:border-bottom-left-radius "3px"
:border-top-right-radius "3px"} :border-bottom-right-radius "3px"}))
:align :center :align :center
:height common/gs-31s :height common/gs-31s
:children [[rc/box :children [[rc/box
:width "36px" :width "36px"
:height common/gs-31s :height common/gs-31s
:class "noselect" :class "noselect"
:style {:cursor "pointer"} :style {:cursor "pointer"}
:attr {:title (str (if @*pod-open "Close" "Open") " the pod bay doors, HAL") :attr {:title (str (if open? "Close" "Open") " the pod bay doors, HAL")
:on-click (rc/handler-fn :on-click (rc/handler-fn (update-pod-field id :open? (not open?)))}
(swap! *pod-open not) :child [rc/box
(println "Clicked [arrow]"))} :margin "auto"
:child [rc/box :child [:span.arrow (if open? "▼" "▶")]]]
:margin "auto" [rc/h-box
:child [:span.arrow (if @*pod-open "▼" "▶")]]] :size "auto"
[rc/h-box :class "app-db-path--path-header"
:size "auto" :children [[rc/input-text
:class "app-db-path--path-header" :style {:height "25px"
:children [[rc/input-text :padding (css-join "0px" common/gs-7s)
;:class (str "app-db-path--path-text " (when (nil? path) "app-db-path--path-text__empty")) :width "-webkit-fill-available"} ;; This took a bit of finding!
:style {:height "25px" :width "100%"
:padding (css-join "0px" common/gs-7s) :model path
:width "-webkit-fill-available"} ;; This took a bit of finding! :on-change #(update-pod-field id :path %) ;;(fn [input-string] (rf/dispatch [:app-db/search-string input-string]))
:width "100%" :on-submit #() ;; #(rf/dispatch [:app-db/add-path %])
:model search-string :change-on-blur? false
:on-change (fn [input-string] (rf/dispatch [:app-db/search-string input-string])) :placeholder "Showing all of app-db. Try entering a path like [:todos 1]"]]]
:on-submit #(rf/dispatch [:app-db/add-path %]) [rc/gap-f :size common/gs-12s]
:change-on-blur? false [rc/box
:placeholder "Showing all of app-db. Try entering a path like [:todos 1]"]]] :class "bm-muted-button noselect"
[rc/gap-f :size common/gs-12s] :style {:width "25px"
[rc/box :height "25px"
:class "bm-muted-button noselect" :padding "0px"
:style {:width "25px" :border-radius "3px"
:height "25px" :cursor "pointer"}
:padding "0px" :attr {:title "Show diff"
:border-radius "3px" :on-click (rc/handler-fn (update-pod-field id :diff? (not diff?)))}
:cursor "pointer"} :child [:img
:attr {:title "Show diff" {:src (str "data:image/svg+xml;utf8," copy)
:on-click (rc/handler-fn (println "Clicked [copy]"))} :style {:width "19px"
:child [:img :margin "0px 3px"}}]]
{:src (str "data:image/svg+xml;utf8," copy) [rc/gap-f :size common/gs-12s]
:style {:width "19px" [rc/box
:margin "0px 3px"}}]] :class "bm-muted-button noselect"
[rc/gap-f :size common/gs-12s] :style {:width "25px"
[rc/box :height "25px"
:class "bm-muted-button noselect" :padding "0px"
:style {:width "25px" :border-radius "3px"
:height "25px" :cursor "pointer"}
:padding "0px" :attr {:title "Remove this pod"
:border-radius "3px" :on-click (rc/handler-fn (delete-pod id))}
:cursor "pointer"} :child [:img
:attr {:title "Remove this pod" {:src (str "data:image/svg+xml;utf8," trash)
:on-click (rc/handler-fn :style {:width "13px"
;(rf/dispatch [:app-db/remove-path %]) :margin "0px 6px"}}]]
(println "Clicked [delete]"))} [rc/gap-f :size common/gs-12s]]])
:child [:img
{:src (str "data:image/svg+xml;utf8," trash)
:style {:width "13px"
:margin "0px 6px"}}]]
[rc/gap-f :size common/gs-12s]]])))
(defn pod [path] (defn pod [{:keys [id path open? diff?] :as pod-info}]
[rc/v-box [rc/v-box
:class "app-db-path" :class "app-db-path"
:style {:border-bottom-left-radius "3px" :style {:border-bottom-left-radius "3px"
:border-bottom-right-radius "3px"} :border-bottom-right-radius "3px"}
:children [[path-header path] :children [[pod-header pod-info]
[rc/v-box (when open?
:height "90px" [rc/v-box
:min-width "100px" :height "90px"
:style {:background-color cljs-dev-tools-background :min-width "100px"
:padding common/gs-7s :style {:background-color cljs-dev-tools-background
:margin (css-join pad-padding pad-padding "0px" pad-padding)} :padding common/gs-7s
:children ["---main-section---"]] :margin (css-join pad-padding pad-padding "0px" pad-padding)}
:children ["---main-section---"]])
[rc/v-box (when (and open? diff?)
:height common/gs-19s [rc/v-box
:justify :end :height common/gs-19s
:style {:margin (css-join "0px" pad-padding)} :justify :end
:children [[rc/hyperlink :style {:margin (css-join "0px" pad-padding)}
;:class "app-db-path--label" :children [[rc/hyperlink
:label "ONLY BEFORE" ;:class "app-db-path--label"
:on-click #(println "Clicked [ONLY BEFORE]")]]] :label "ONLY BEFORE"
[rc/v-box :on-click #(println "Clicked [ONLY BEFORE]")]]])
:height "60px" (when (and open? diff?)
:min-width "100px" [rc/v-box
:style {:background-color cljs-dev-tools-background :height "60px"
:padding common/gs-7s :min-width "100px"
:margin (css-join "0px" pad-padding)} :style {:background-color cljs-dev-tools-background
:children ["---before-diff---"]] :padding common/gs-7s
:margin (css-join "0px" pad-padding)}
[rc/v-box :children ["---before-diff---"]])
:height common/gs-19s (when (and open? diff?)
:justify :end [rc/v-box
:style {:margin (css-join "0px" pad-padding)} :height common/gs-19s
:children [[rc/hyperlink :justify :end
;:class "app-db-path--label" :style {:margin (css-join "0px" pad-padding)}
:label "ONLY AFTER" :children [[rc/hyperlink
:on-click #(println "Clicked [ONLY AFTER]")]]] ;:class "app-db-path--label"
[rc/v-box :label "ONLY AFTER"
:height "60px" :on-click #(println "Clicked [ONLY AFTER]")]]])
:min-width "100px" (when (and open? diff?)
:style {:background-color cljs-dev-tools-background [rc/v-box
:padding common/gs-7s :height "60px"
:margin (css-join "0px" pad-padding)} :min-width "100px"
:children ["---after-diff---"]] :style {:background-color cljs-dev-tools-background
[rc/gap-f :size pad-padding]]]) :padding common/gs-7s
:margin (css-join "0px" pad-padding)}
:children ["---after-diff---"]])
(when open?
[rc/gap-f :size pad-padding])]])
(defn no-pods [] (defn no-pods []
[rc/h-box [rc/h-box
@ -201,18 +229,13 @@
:label "add inspectors to show what happened to app-db"]]]) :label "add inspectors to show what happened to app-db"]]])
(defn pod-section [] (defn pod-section []
(let [ [rc/v-box
pods [["x" "y"] [:abc 123] nil] :gap pod-gap
;pods nil :children (if (empty? @*pods)
] [[no-pods]]
(fn [] (doall (for [p @*pods]
[rc/v-box ^{:key (:id @*pods)}
:gap pod-gap [pod p])))])
:children (if (empty? pods)
[[no-pods]]
(doall (for [p pods]
^{:key (str p)}
[pod p])))])))
;; TODO: OLD UI - REMOVE ;; TODO: OLD UI - REMOVE
(defn original-render [app-db] (defn original-render [app-db]
@ -222,7 +245,11 @@
input-error (r/atom false) input-error (r/atom false)
snapshot-ready? (rf/subscribe [:snapshot/snapshot-ready?])] snapshot-ready? (rf/subscribe [:snapshot/snapshot-ready?])]
(fn [] (fn []
[:div {:style {:flex "1 1 auto" :display "flex" :flex-direction "column" :border "1px solid lightgrey"}} [:div
{:style {:flex "1 1 auto"
:display "flex"
:flex-direction "column"
:border "1px solid lightgrey"}}
[:div.panel-content-scrollable [:div.panel-content-scrollable
[rc/input-text [rc/input-text
:model search-string :model search-string
@ -282,7 +309,6 @@
:children [[panel-header] :children [[panel-header]
[pod-section] [pod-section]
[rc/gap-f :size pod-gap] [rc/gap-f :size pod-gap]
[original-render app-db]]])
;; TODO: OLD UI - REMOVE
#_[original-render app-db]]])

249
src/day8/re_frame/trace/view/subs.cljs
View File

@ -21,6 +21,27 @@
(def pod-gap common/gs-19s) ;; or 31? (def pod-gap common/gs-19s) ;; or 31?
(def pad-padding common/gs-7s) (def pad-padding common/gs-7s)
;; TODO: START ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS
(def *pods (r/atom [{:type :destroyed :layer "3" :path [:todo/blah] :open? true :diff? true}
{:type :created :layer "3" :path [:todo/completed] :open? true :diff? true}
{:type :re-run :layer "3" :path [:todo/completed] :open? true :diff? true}
{:type :re-run :layer "2" :path [:todo/blah] :open? true :diff? true}
{:type :not-run :layer "3" :path [:todo/blah] :open? true :diff? true}]
#_[]))
(defn update-pod-field
[id field new-val]
(let [f (fn [pod]
(if (= id (:id pod))
(do
;(println "Updated" field "in" (:id pod) "from" (get pod field) "to" new-val)
(assoc pod field new-val))
pod))]
(reset! *pods (mapv f @*pods))))
;; TODO: END ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS
(defn tag-color [type] (defn tag-color [type]
(let [types {:created "#9b51e0" (let [types {:created "#9b51e0"
:destroyed "#f2994a" :destroyed "#f2994a"
@ -88,110 +109,110 @@
:style {:margin-top "6px"} :style {:margin-top "6px"}
:on-change #()]]]]]) :on-change #()]]]]])
(defn path-header [{:keys [type layer path]}] (defn pod-header [{:keys [id type layer path open? diff?]}]
(let [search-string (r/atom (when (some? path) (prn-str path))) ;;(rf/subscribe [:app-db/search-string]) [rc/h-box
*pod-open (r/atom true)] :class "app-db-path--header"
(fn [{:keys [type layer path]}] :style {:border-top-left-radius "3px"
[rc/h-box :border-top-right-radius "3px"}
:class "app-db-path--header" :align :center
:style {:border-top-left-radius "3px" :height common/gs-31s
:border-top-right-radius "3px"} :children [[rc/box
:align :center :width "36px"
:height common/gs-31s :height common/gs-31s
:children [[rc/box :class "noselect"
:width "36px" :style {:cursor "pointer"}
:height common/gs-31s :attr {:title (str (if open? "Close" "Open") " the pod bay doors, HAL")
:class "noselect" :on-click (rc/handler-fn
:style {:cursor "pointer"} (swap! open? not)
:attr {:title (str (if @*pod-open "Close" "Open") " the pod bay doors, HAL") (println "Clicked [arrow]"))}
:on-click (rc/handler-fn :child [rc/box
(swap! *pod-open not) :margin "auto"
(println "Clicked [arrow]"))} :child [:span.arrow (if open? "▼" "▶")]]]
:child [rc/box [rc/box
:margin "auto" :width "64px" ;; (100-36)px from box above
:child [:span.arrow (if @*pod-open "▼" "▶")]]] :child [tag type (-> type tag-desc :short)]]
[rc/box [rc/h-box
:width "64px" ;; (100-36)px from box above :size "auto"
:child [tag type (-> type tag-desc :short)]] :class "app-db-path--path-header"
[rc/h-box :children [[rc/input-text
:size "auto" :style {:height "25px"
:class "app-db-path--path-header" :padding (css-join "0px" common/gs-7s)
:children [[rc/input-text :width "-webkit-fill-available"} ;; This took a bit of finding!
;:class (str "app-db-path--path-text " (when (nil? path) "app-db-path--path-text__empty")) :width "100%"
:style {:height "25px" :model path
:padding (css-join "0px" common/gs-7s) :disabled? true
:width "-webkit-fill-available"} ;; This took a bit of finding! :on-change #(update-pod-field id :path %) ;;(fn [input-string] (rf/dispatch [:app-db/search-string input-string]))
:width "100%" :on-submit #() ;; #(rf/dispatch [:app-db/add-path %])
:model search-string :change-on-blur? false
:disabled? true :placeholder "Showing all of app-db. Try entering a path like [:todos 1]"]]]
:on-change (fn [input-string] (rf/dispatch [:app-db/search-string input-string])) [rc/gap-f :size common/gs-12s]
:on-submit #(rf/dispatch [:app-db/add-path %]) [rc/label :label (str "Layer " layer)]
:change-on-blur? false [rc/gap-f :size common/gs-12s]
:placeholder "Showing all of app-db. Try entering a path like [:todos 1]"]]] [rc/box
[rc/gap-f :size common/gs-12s] :class "bm-muted-button noselect"
[rc/label :label (str "Layer " layer)] :style {:width "25px"
[rc/gap-f :size common/gs-12s] :height "25px"
[rc/box :padding "0px"
:class "bm-muted-button noselect" :border-radius "3px"
:style {:width "25px" :cursor "pointer"}
:height "25px" :attr {:title "Show diff"
:padding "0px" :on-click (rc/handler-fn (update-pod-field id :diff? (not diff?)))}
:border-radius "3px" :child [:img
:cursor "pointer"} {:src (str "data:image/svg+xml;utf8," copy)
:attr {:title "Show diff" :style {:width "19px"
:on-click (rc/handler-fn (println "Clicked [copy]"))} :margin "0px 3px"}}]]
:child [:img [rc/gap-f :size common/gs-12s]]])
{:src (str "data:image/svg+xml;utf8," copy)
:style {:width "19px"
:margin "0px 3px"}}]]
[rc/gap-f :size common/gs-12s]]])))
(defn pod [pod-info] (defn pod [{:keys [id type layer path open? diff?] :as pod-info}]
[rc/v-box [rc/v-box
:class "app-db-path" :class "app-db-path"
:style {:border-bottom-left-radius "3px" :style {:border-bottom-left-radius "3px"
:border-bottom-right-radius "3px"} :border-bottom-right-radius "3px"}
:children [[path-header pod-info] :children [[pod-header pod-info]
[rc/v-box (when open?
:height "90px" [rc/v-box
:min-width "100px" :height "90px"
:style {:background-color cljs-dev-tools-background :min-width "100px"
:padding common/gs-7s :style {:background-color cljs-dev-tools-background
:margin (css-join pad-padding pad-padding "0px" pad-padding)} :padding common/gs-7s
:children ["---main-section---"]] :margin (css-join pad-padding pad-padding "0px" pad-padding)}
:children ["---main-section---"]])
[rc/v-box (when (and open? diff?)
:height common/gs-19s [rc/v-box
:justify :end :height common/gs-19s
:style {:margin (css-join "0px" pad-padding)} :justify :end
:children [[rc/hyperlink :style {:margin (css-join "0px" pad-padding)}
;:class "app-db-path--label" :children [[rc/hyperlink
:label "ONLY BEFORE" ;:class "app-db-path--label"
:on-click #(println "Clicked [ONLY BEFORE]")]]] :label "ONLY BEFORE"
[rc/v-box :on-click #(println "Clicked [ONLY BEFORE]")]]])
:height "60px" (when (and open? diff?)
:min-width "100px" [rc/v-box
:style {:background-color cljs-dev-tools-background :height "60px"
:padding common/gs-7s :min-width "100px"
:margin (css-join "0px" pad-padding)} :style {:background-color cljs-dev-tools-background
:children ["---before-diff---"]] :padding common/gs-7s
:margin (css-join "0px" pad-padding)}
[rc/v-box :children ["---before-diff---"]])
:height common/gs-19s (when (and open? diff?)
:justify :end [rc/v-box
:style {:margin (css-join "0px" pad-padding)} :height common/gs-19s
:children [[rc/hyperlink :justify :end
;:class "app-db-path--label" :style {:margin (css-join "0px" pad-padding)}
:label "ONLY AFTER" :children [[rc/hyperlink
:on-click #(println "Clicked [ONLY AFTER]")]]] ;:class "app-db-path--label"
[rc/v-box :label "ONLY AFTER"
:height "60px" :on-click #(println "Clicked [ONLY AFTER]")]]])
:min-width "100px" (when (and open? diff?)
:style {:background-color cljs-dev-tools-background [rc/v-box
:padding common/gs-7s :height "60px"
:margin (css-join "0px" pad-padding)} :min-width "100px"
:children ["---after-diff---"]] :style {:background-color cljs-dev-tools-background
[rc/gap-f :size pad-padding]]]) :padding common/gs-7s
:margin (css-join "0px" pad-padding)}
:children ["---after-diff---"]])
(when open?
[rc/gap-f :size pad-padding])]])
(defn no-pods [] (defn no-pods []
[rc/h-box [rc/h-box
@ -202,22 +223,13 @@
:children [[rc/label :label "There are no subscriptions to show"]]]) :children [[rc/label :label "There are no subscriptions to show"]]])
(defn pod-section [] (defn pod-section []
(let [ [rc/v-box
pods [{:type :destroyed :layer "3" :path [:todo/blah]} :gap pod-gap
{:type :created :layer "3" :path [:todo/completed]} :children (if (empty? @*pods)
{:type :re-run :layer "3" :path [:todo/completed]} [[no-pods]]
{:type :re-run :layer "2" :path [:todo/blah]} (doall (for [p @*pods]
{:type :not-run :layer "3" :path [:todo/blah]}] ^{:key (str p)}
;pods nil [pod p])))])
]
(fn []
[rc/v-box
:gap pod-gap
:children (if (empty? pods)
[[no-pods]]
(doall (for [p pods]
^{:key (str p)}
[pod p])))])))
(defn render [] (defn render []
[] []
@ -228,8 +240,11 @@
[rc/gap-f :size pod-gap] [rc/gap-f :size pod-gap]
;; TODO: OLD UI - REMOVE ;; TODO: OLD UI - REMOVE
[:div.panel-content-scrollable {:style {:border "1px solid lightgrey"}} #_[:div.panel-content-scrollable
[:div.subtrees {:style {:margin "20px 0"}} {:style {:border "1px solid lightgrey"
:margin "0px"}}
[:div.subtrees
{:style {:margin "20px 0"}}
(doall (doall
(->> @subs/query->reaction (->> @subs/query->reaction
(sort-by (fn [me] (ffirst (key me)))) (sort-by (fn [me] (ffirst (key me))))