-
-
Notifications
You must be signed in to change notification settings - Fork 137
/
support_viewer.cljs
115 lines (103 loc) · 5.21 KB
/
support_viewer.cljs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
(ns fulcro.support-viewer
(:require
[fulcro.client.primitives :as prim :refer-macros [defui]]
[fulcro.client.dom :as dom]
[fulcro.history :as hist]
[fulcro.client.data-fetch :refer [load]]
[fulcro.client :as core]
[fulcro.client.mutations :as m :refer [defmutation]]
[fulcro.i18n :refer [tr trf]]
[fulcro.client.network :as net]
[fulcro.client :as fc]))
(defonce support-viewer (atom nil))
(defn get-target-app []
(-> @support-viewer :application))
(defmutation initialize-history
[params]
(action [{:keys [state]}]
(swap! state
(fn [s]
(let [req (:support-request @state)
app (get-target-app)
comments (:comment req)
history (:history req)
history-nav (hist/history-navigator history)]
(core/reset-state! @app (::hist/db-after (hist/current-step history-nav)))
(-> s
(dissoc :support-request)
(assoc :comments comments)
(assoc :history history)
(assoc :history-nav history-nav)))))))
(defn nav [state-atom history-fn]
(swap! state-atom update :history-nav history-fn)
(core/reset-state! @(get-target-app) (-> @state-atom :history-nav hist/current-step ::hist/db-after)))
(defmutation step-forward [params] (action [{:keys [state]}] (nav state hist/focus-next)))
(defmutation step-back [params] (action [{:keys [state]}] (nav state hist/focus-previous)))
(defmutation go-to-beg [params] (action [{:keys [state]}] (nav state hist/focus-start)))
(defmutation go-to-end [params] (action [{:keys [state]}] (nav state hist/focus-end)))
(defmutation toggle-position
[params]
(action [{:keys [state]}]
(let [{:keys [position]} @state
new-position (if (= :controls-left position) :controls-right :controls-left)]
(swap! state assoc :position new-position))))
(defui ^:once SupportViewerRoot
static prim/InitialAppState
(initial-state [t p] {:history {} :position :controls-left :client-time (js/Date.) :comments ""})
static prim/IQuery
(query [this] [:history-nav :comments :position])
Object
(render [this]
(let [{:keys [history-nav position comments]} (prim/props this)
[index frames] (hist/nav-position history-nav)
{:keys [::hist/client-time ::hist/network-result ::hist/tx ::hist/tx-result] :as step} (hist/current-step history-nav)]
(dom/div {:style {:maxWidth "300px"}
:className (str "history-controls " (or (some-> position name) "controls-left"))}
(dom/button {:className "toggle-position"
:onClick #(prim/transact! this `[(toggle-position {})])} (tr "<= Reposition =>"))
(dom/button {:className "history-back"
:onClick #(prim/transact! this `[(step-back {})])} (tr "Back"))
(dom/button {:className "history-forward"
:onClick #(prim/transact! this `[(step-forward {})])} (tr "Forward"))
(dom/hr)
(dom/span {:className "frame"} (trf "History offset {f,number} of {end,number} " :f (inc index) :end frames))
(dom/div {:className "user-comments"} comments)
(dom/hr)
(dom/span {:className "timestamp"} (trf "Client Time: {ts,date,short} {ts,time,long}" :ts client-time))
(dom/hr)
(dom/h4 "Transaction")
(dom/p (pr-str tx))
(dom/hr)
(dom/span {:className "history-jump-to"} "Jump to:")
(dom/div {}
(dom/button {:className "history-beg"
:onClick #(prim/transact! this `[(go-to-beg {})])} (tr "Beginning"))
(dom/button {:className "history-end"
:onClick #(prim/transact! this `[(go-to-end {})])} (tr "End")))))))
(defrecord SupportViewer [support dom-id app-root application history]
core/FulcroApplication
(mount [this support-root dom-id-or-node]
(do
(reset! application (core/mount @application app-root dom-id))
(reset! support (core/mount @support support-root dom-id-or-node))
@support))
(reset-state! [this new-state] (core/reset-state! @application new-state))
(refresh [this]
(core/refresh @application)))
(defn start-fulcro-support-viewer
"Create and display a new fulcro support viewer on the given app root, with VCR controls to browse through the given history. The support HTML file must include
a div with app-dom-id (to mount the app) and a div with support-dom-id to mount the viewer controls."
[support-dom-id AppRoot app-dom-id]
(let [viewer (map->SupportViewer
{:app-root AppRoot
:dom-id app-dom-id
:application (atom (core/new-fulcro-client :networking (net/mock-network)))
:support (atom (core/new-fulcro-client
:started-callback
(fn [app]
(load app :support-request nil
{:params {:id (core/get-url-param "id")}
:refresh [:history-nav]
:post-mutation `initialize-history}))))})]
(reset! support-viewer viewer)
(core/mount viewer SupportViewerRoot support-dom-id)))