loader spinner

This commit is contained in:
Daniel O'Connell 2021-02-07 16:39:09 +01:00
parent 17037abdb3
commit 3b591c8f24
10 changed files with 77 additions and 10 deletions

View File

@ -1,10 +1,31 @@
(ns chicken-master.css
(:require [garden.def :refer [defstyles]]
[garden.stylesheet :refer [at-media]]))
[garden.stylesheet :refer [at-media at-keyframes]]))
(defstyles screen
(at-keyframes "spin"
[:0% {:transform "rotate(0deg)"}]
[:100% {:transform "rotate(360deg)"}])
[:html {:height "100%"}
[:body {:height "100%"}
[:.hidden {:display :none}]
[:.loader-container {:position :absolute
:width "100%"
:height "100%"
:z-index 1000
:background-color "rgba(0,0,0,0.4)"
}
[:.loader {:margin :auto
:position :relative
:top "40%"
:border "5px solid #f3f3f3"; /* Light grey */
:border-top "5px solid #3498db"; /* Blue */
:border-radius "50%";
:width "30px"
:height "30px"
:animation "spin 1s linear infinite"}]]
[:.full-height {:height "100%"}]
[:.scroll-bar {:position :absolute

View File

@ -10,6 +10,7 @@
(defn get-customers [] {:body (mocks/fetch-customers {})})
(defn add-customer [request] {:body (some-> request :body :name mocks/add-customer)})
(defn delete-customer [id] {:body (mocks/delete-customer (edn/read-string id))})
(defn get-products [_] (prn _){:body (mocks/get-all-products)})
(defn save-products [request] {:body (some-> request :body mocks/save-stocks)})
@ -32,6 +33,7 @@
(GET "/stock" {params :query-params} (get-stock params))
(GET "/customers" [] (get-customers))
(POST "/customers" request (add-customer request))
(DELETE "/customers/:id" [id] (delete-customer id))
(GET "/products" request (get-products request))
(POST "/products" request (save-products request))

View File

@ -62,6 +62,10 @@
:name customer-name})
(fetch-stock {}))
(defn delete-customer [id]
{:orders (swap! orders #(->> % (remove (comp #{id} :id :who second)) (into {})))
:customers (swap! customers (partial remove (comp #{id} :id)))})
(defn day-customers [day] [day (->> @orders vals (filter (comp #{day} :day)))])
(defn get-orders [params] @orders)

View File

@ -58,6 +58,11 @@
(prn @customers)
(fetch-stock params))
(defn delete-customer [id]
{:orders (swap! orders #(->> % (remove (comp #{id} :id :who second)) (into {})))
:customers (swap! customers (partial remove (comp #{id} :id)))})
(defn- day-customers [day] [day (->> @orders vals (filter (comp #{day} :day)))])
(defn- days-between [from to]
(time/days-range

View File

@ -8,7 +8,18 @@
[chicken-master.time :as time]))
(defn format-raw-order [{:strs [who who-id notes] :as raw-values}]
{:who {:name who :id (prod/num-or-nil who-id)}
(prn who who-id)
(prn (some->> @(re-frame/subscribe [::subs/available-customers])
(filter (comp #{who} :name))
first :id))
{:who {:name who
:id (if (prod/num-or-nil who-id)
(prod/num-or-nil who-id)
;; seeing as there's an autocomplete thingy, assume that if the name is the same,
;; then so is the user
(some->> @(re-frame/subscribe [::subs/available-customers])
(filter (comp #{who} :name))
first :id))}
:notes notes
:products (prod/collect-products (remove (comp #{"who" "notes"} first) raw-values))})
@ -16,9 +27,12 @@
(html/modal
:order-edit
[:div
(let [who @(re-frame/subscribe [::subs/order-edit-who])]
(let [who @(re-frame/subscribe [::subs/order-edit-who])
customers @(re-frame/subscribe [::subs/available-customers])]
[:div
(html/input :who "kto" {:required true :default (:name who)})
(html/input :who "kto" {:required true :default (:name who) :list :customers})
(into [:datalist {:id :customers}]
(for [cust customers] [:option {:value (:name cust) :id (:id cust)}]))
[:input {:id :who-id :name :who-id :type :hidden :value (or (:id who) "")}]])
(html/input :notes "notka"
{:default @(re-frame/subscribe [::subs/order-edit-notes])})

View File

@ -11,7 +11,7 @@
:calendar-heading false ; show a header with the names of days
:show-date true ; display the date for each day
:show-day-name-with-date true ; add the day name to each date
:show-day-add-order false ; Show an add order button in each day
:show-day-add-order true ; Show an add order button in each day
:show-order-time false ; display the time of each order
:show-order-notes true ; display notes

View File

@ -33,7 +33,10 @@
(group-by #(get-in % [:who :id])))]
(for [{:keys [name id] :as who} @(re-frame/subscribe [::subs/available-customers])]
[:details {:class "client" :key (gensym)}
[:summary name]
[:summary [:span name [:button {:on-click #(re-frame/dispatch
[::event/confirm-action
"na pewno usunąć?"
::event/remove-customer id])} "-"]]]
[order-adder {:who who}]
(for [order (reverse (sort-by :day (client-orders id)))]
[order-adder (assoc order :key (gensym))])

View File

@ -36,10 +36,13 @@
(time/update-settings default-settings)
{:db (assoc db/default-db :settings default-settings)
:fx [[:dispatch [::show-from-date (time/iso-date (time/today))]]
[:dispatch [::start-loading]]
[:dispatch [::fetch-stock]]
[:dispatch [::fetch-orders]]]}))
(re-frame/reg-event-db ::hide-modal (fn [db [_ modal]] (assoc-in db [modal :show] nil)))
(re-frame/reg-event-db ::start-loading (fn [db _] (assoc db :loading? true)))
(re-frame/reg-event-db ::stop-loading (fn [db _] (assoc db :loading? nil)))
(re-frame/reg-event-fx
::confirm-action
@ -92,6 +95,7 @@
::process-fetched-days
(fn [db [_ days]]
(-> db
(assoc :loading? nil)
(update :current-days #(map (fn [[day orders]]
[day (if (contains? days day)
(days day) orders)]) %))
@ -101,6 +105,7 @@
::scroll-weeks
(fn [{db :db} [_ offset]]
{:fx [;[:dispatch [::fetch-stock]]
[:dispatch [::start-loading]]
[:dispatch [::show-from-date (-> db
:start-date
time/parse-date
@ -120,7 +125,8 @@
(re-frame/reg-event-fx
::fetch-orders
(fn [_ [_ from to]]
{(settings :http-dispatch) (http-get "orders" {} ::process-stock)}))
{:dispatch [::start-loading]
(settings :http-dispatch) (http-get "orders" {} ::process-stock)}))
;; Customers events
(re-frame/reg-event-fx
@ -135,6 +141,11 @@
{(settings :http-dispatch) (http-request :post "customers"
:body {:name customer-name}
:on-success ::process-stock)}))
(re-frame/reg-event-fx
::remove-customer
(fn [_ [_ id]]
{(settings :http-dispatch) (http-request :delete (str "customers/" id)
:on-success ::process-stock)}))
;;; Storage events
@ -147,7 +158,8 @@
(re-frame/reg-event-fx
::fetch-stock
(fn [_ _]
{(settings :http-dispatch) (http-get "stock" {} ::process-stock)}))
{:dispatch [::start-loading]
(settings :http-dispatch) (http-get "stock" {} ::process-stock)}))
(defn assoc-if [coll key val] (if val (assoc coll key val) coll))
(re-frame/reg-event-fx
@ -179,7 +191,8 @@
(re-frame/reg-event-fx
::save-stock
(fn [_ [_ products]]
{:dispatch [::hide-modal :stock]
{:fx [[:dispatch [::hide-modal :stock]]
[:dispatch [::start-loading]]]
(settings :http-dispatch) (http-request :post "products" :body products :on-sucess ::process-stock)}))
;; Settings
@ -221,9 +234,11 @@
(and (= method :post) (= uri "http://localhost:3000/products"))
(re-frame/dispatch (conj on-success (mocks/save-stocks (cljs.reader/read-string body))))
(= method :delete)
(and (= method :delete) (= (nth parts 3) "orders"))
(re-frame/dispatch (conj on-success (mocks/delete-order (-> parts (nth 4) (js/parseInt)))))
(and (= method :delete) (= (nth parts 3) "customers"))
(re-frame/dispatch (conj on-success (mocks/delete-customer (-> parts (nth 4) (js/parseInt)))))
(and (= method :post) (= uri "http://localhost:3000/customers"))
(re-frame/dispatch (conj on-success (mocks/add-customer (cljs.reader/read-string body))))

View File

@ -3,6 +3,7 @@
(re-frame/reg-sub ::name (fn [db] (:name db)))
(re-frame/reg-sub ::settings (fn [db] (:settings db)))
(re-frame/reg-sub ::loading? (fn [db] (:loading? db)))
(re-frame/reg-sub ::available-products (fn [db] (:products db)))
(re-frame/reg-sub ::available-customers (fn [db] (:customers db)))

View File

@ -14,6 +14,8 @@
(defn main-panel []
[:div {:class :full-height}
[:div {:class [:loader-container (if-not @(re-frame/subscribe [::subs/loading?]) :hidden)]}
[:div {:class :loader}]]
(cond
@(re-frame/subscribe [::subs/show-stock-modal]) (stock/show-available)
@(re-frame/subscribe [::subs/show-settings-modal]) (show-settings)