mirror of
https://github.com/mruwnik/chicken-master.git
synced 2025-06-28 23:24:46 +02:00
single day view on smaller screens
This commit is contained in:
parent
ff3559269b
commit
c4b43f004d
14
README.md
14
README.md
@ -1,5 +1,19 @@
|
||||
# chicken-master
|
||||
|
||||
## TODO
|
||||
* daily view
|
||||
* infinite scroll
|
||||
|
||||
* handle regular customers
|
||||
** every n days
|
||||
** copy over to next week
|
||||
** cancel regular order
|
||||
|
||||
* settings menu
|
||||
|
||||
* products CRM
|
||||
|
||||
|
||||
A [re-frame](https://github.com/day8/re-frame) application designed to ... well, that part is up to
|
||||
you.
|
||||
|
||||
|
@ -1,5 +1,6 @@
|
||||
(ns chicken-master.css
|
||||
(:require [garden.def :refer [defstyles]]))
|
||||
(:require [garden.def :refer [defstyles]]
|
||||
[garden.stylesheet :refer [at-media]]))
|
||||
|
||||
(defstyles screen
|
||||
[:html {:height "100%"}
|
||||
@ -8,7 +9,10 @@
|
||||
|
||||
[:.scroll-bar {:position :absolute
|
||||
:right "10px"
|
||||
:width "50px"}]
|
||||
:width "50px"}
|
||||
[:#scroll-down {:position :fixed
|
||||
:right "0"
|
||||
:bottom "0"}]]
|
||||
|
||||
[:.popup {:position :fixed
|
||||
:height "100%"
|
||||
@ -29,13 +33,48 @@
|
||||
[:.form-buttons {:margin "10px"}
|
||||
[:* {:margin "20px"}]]]]
|
||||
|
||||
[:.calendar {:display :grid
|
||||
:grid-template-columns "14% 14% 14% 14% 14% 14% 14%"
|
||||
:grid-template-rows "50% 50%"
|
||||
}
|
||||
[:.scroll-button {:display :none}]
|
||||
(at-media
|
||||
{:max-width "800px"}
|
||||
[:.scroll-bar {:display :none}]
|
||||
[:.scroll-button {:width "100%"
|
||||
:font-size "3em"
|
||||
:display :inherit}]
|
||||
[:.popup
|
||||
[:form {
|
||||
:background-color "#fefefe"
|
||||
:margin "3% auto"
|
||||
:padding "20px"
|
||||
:border "1px solid #888"
|
||||
:width "60%"}
|
||||
[:.product-items-edit {:margin-top "1.5em"}
|
||||
[:.product-item-edit
|
||||
[:label {:display :none}]]]]]
|
||||
[:.calendar
|
||||
[:.day {:min-height "12em"}]
|
||||
])
|
||||
(at-media
|
||||
{:min-width "800px"}
|
||||
[:.popup
|
||||
[:form {
|
||||
:background-color "#fefefe"
|
||||
:margin "15% auto"
|
||||
:padding "20px"
|
||||
:border "1px solid #888"
|
||||
:width "15%"
|
||||
}]]
|
||||
[:.calendar {:display :grid
|
||||
:grid-template-columns "25% 25% 25% 25%"
|
||||
:grid-template-rows "50% 50%"}])
|
||||
(at-media {:min-width "1200px"}
|
||||
[:.calendar
|
||||
{:display :grid
|
||||
:grid-template-columns "14% 14% 14% 14% 14% 14% 14%"
|
||||
:grid-template-rows "50% 50%"}])
|
||||
[:.calendar
|
||||
[:.day-header {:border "2px solid black"
|
||||
:text-align :center
|
||||
:font-size "30px"}]
|
||||
:font-size "2em"}]
|
||||
[:.day.today {:border "2px solid red"}]
|
||||
[:.day {:border "2px solid black"
|
||||
:overflow :auto}
|
||||
@ -56,14 +95,20 @@
|
||||
:font-weight :bold
|
||||
:white-space :nowrap
|
||||
:overflow :hidden
|
||||
:text-overflow :ellipsis}]
|
||||
[:.products {:padding-left "25px"}
|
||||
[:.product {:margin-bottom "5px"}
|
||||
[:.product-amount {:width "40px"
|
||||
:margin-right "10px"
|
||||
:max-height "5px"}]]
|
||||
:text-overflow :ellipsis}]]
|
||||
[[:.products :.products-sum] {:padding-left "25px"}
|
||||
[:.product {:margin-bottom "5px"}
|
||||
[:.product-name {:width "5em"
|
||||
:display :inline-block
|
||||
:text-overflow :ellipsis
|
||||
:white-space :nowrap
|
||||
:overflow :hidden
|
||||
:margin-right "10px"}]
|
||||
[:.product-amount {:width "40px"
|
||||
:max-height "5px"}]
|
||||
|
||||
]]]]]]
|
||||
]]
|
||||
[:.summary {:margin-top "10px"}]]]]]
|
||||
|
||||
; Chrome, Safari, Edge, Opera
|
||||
["input::-webkit-outer-spin-button" {:-webkit-appearance :none :margin 0}]
|
||||
|
@ -32,15 +32,12 @@
|
||||
{:default @(re-frame/subscribe [::subs/order-edit-notes])})
|
||||
(let [available-prods @(re-frame/subscribe [::subs/available-products])
|
||||
selected-prods @(re-frame/subscribe [::subs/order-edit-products])]
|
||||
[:div {}
|
||||
[:label "co"]
|
||||
[:div {:class :product-items-edit}
|
||||
(for [[i {product :prod amount :amount}] (map-indexed vector selected-prods)]
|
||||
(prod/product-item product amount available-prods i))])
|
||||
[:button {:type :button :on-click #(re-frame/dispatch [::event/add-product])} "+"]]
|
||||
;; On success
|
||||
(fn [form]
|
||||
(re-frame/dispatch [::event/save-order (format-raw-order form)])
|
||||
)))
|
||||
(fn [form] (re-frame/dispatch [::event/save-order (format-raw-order form)]))))
|
||||
|
||||
(defn format-order [{:keys [id who day hour notes products state]}]
|
||||
[:div {:class [:order state] :key (gensym)}
|
||||
@ -51,7 +48,10 @@
|
||||
:pending nil
|
||||
nil nil)
|
||||
[:button {:on-click #(re-frame/dispatch [::event/edit-order day id])} "E"]
|
||||
[:button {:on-click #(re-frame/dispatch [::event/remove-order id])} "-"]]
|
||||
[:button {:on-click #(re-frame/dispatch
|
||||
[::event/confirm-action
|
||||
"na pewno usunąć?"
|
||||
::event/remove-order id])} "-"]]
|
||||
[:div {:class :who} who]
|
||||
(if (settings :show-order-time)
|
||||
[:div {:class :when} hour])
|
||||
@ -65,12 +65,21 @@
|
||||
[:div {:class [:day (when (time/today? date) :today)]}
|
||||
[:div {:class :day-header} (time/format-date date)]
|
||||
[:div
|
||||
[:ul {:class :orders}
|
||||
[:div {:class :orders}
|
||||
(if (settings :hide-fulfilled-orders)
|
||||
(->> customers (remove (comp #{:fulfilled} :state)) (map format-order))
|
||||
(map format-order customers))
|
||||
[:button {:type :button
|
||||
:on-click #(re-frame/dispatch [::event/edit-order (time/iso-date date)])} "+"]]]])
|
||||
:on-click #(re-frame/dispatch [::event/edit-order (time/iso-date date)])} "+"]
|
||||
(when (seq (map :products customers))
|
||||
[:div {:class :summary}
|
||||
[:div {:class :header} "w sumie:"]
|
||||
(->> customers
|
||||
(map :products)
|
||||
(apply merge-with +)
|
||||
(sort-by first)
|
||||
(map prod/format-product)
|
||||
(into [:div {:class :products-sum}]))])]]])
|
||||
|
||||
(defn calendar-header []
|
||||
(->> (:day-names settings)
|
||||
|
@ -19,6 +19,11 @@
|
||||
;; "2020-10-16" [1 2 3]
|
||||
;; "2020-10-17" [1 2 3]
|
||||
;; "2020-10-18" [1 2 3]}
|
||||
;; :order-edit {:show true
|
||||
;; :day "2020-10-10"}
|
||||
;; :show-confirmation-modal {:show nil
|
||||
;; :on-confirm-event :bla-bla-bla
|
||||
;; :params [1 2 3]}
|
||||
:products {:eggs {}
|
||||
:milk {}
|
||||
:cabbage {}
|
||||
|
@ -9,10 +9,16 @@
|
||||
|
||||
(re-frame/reg-event-db ::hide-modal (fn [db _] (assoc db :order-edit {})))
|
||||
|
||||
(re-frame/reg-event-fx
|
||||
::confirm-action
|
||||
(fn [_ [_ msg on-confirm-event & params]]
|
||||
(when (js/confirm msg)
|
||||
{:fx [[:dispatch (into [on-confirm-event] params)]]})))
|
||||
|
||||
(re-frame/reg-event-fx
|
||||
::remove-order
|
||||
(fn [_ [_ id]]
|
||||
{:http {:method :post
|
||||
{:http {:method :delete
|
||||
:url "delete-order"
|
||||
:params {:id id}
|
||||
:on-success [::process-fetched-days]
|
||||
@ -23,7 +29,7 @@
|
||||
(fn [{customers :customers :as db} [_ day id]]
|
||||
(assoc db :order-edit
|
||||
(-> customers
|
||||
(get id)
|
||||
(get id {:state :waiting})
|
||||
(update :products (comp vec (partial map (partial zipmap [:prod :amount]))))
|
||||
(merge {:show true :day day})))))
|
||||
|
||||
@ -52,7 +58,6 @@
|
||||
(re-frame/reg-event-fx
|
||||
::save-order
|
||||
(fn [{{order :order-edit} :db} [_ form]]
|
||||
(println "saving" form)
|
||||
{:fx [[:dispatch [::hide-modal]]]
|
||||
:http {:method :post
|
||||
:url "save-order"
|
||||
|
@ -7,9 +7,9 @@
|
||||
|
||||
(defn product-item [what amount available product-no]
|
||||
(let [id (gensym)]
|
||||
[:div {:key (gensym)}
|
||||
[:div {:class :product-item-edit :key (gensym)}
|
||||
[:div {:class :input-item}
|
||||
[:label {:for :product} "co"]
|
||||
[:label {:for :product} "co"]
|
||||
[:select {:name (str "product-" id) :id :product :defaultValue what
|
||||
:on-change #(re-frame/dispatch [::event/selected-product (-> % .-target .-value) product-no])}
|
||||
[:option {:value nil} "-"]
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
(defn format-product [[product amount]]
|
||||
[:div {:key (gensym) :class :product}
|
||||
[:span {:class :product-name} product]
|
||||
(if (settings :editable-number-inputs)
|
||||
[:input {:class :product-amount :type :number :min 0 :defaultValue amount}]
|
||||
[:span {:class :product-amount} amount])
|
||||
[:span {:class :product-name} product]])
|
||||
[:span {:class :product-amount} amount])])
|
||||
|
@ -9,10 +9,12 @@
|
||||
(defn main-panel []
|
||||
(let [name (re-frame/subscribe [::subs/name])]
|
||||
[:div {:class :full-height}
|
||||
[:button {:id :scroll-up-button :class :scroll-button :on-click #(re-frame/dispatch [::event/scroll-weeks -2])} "^"]
|
||||
[:div {:class :scroll-bar}
|
||||
[:button {:on-click #(re-frame/dispatch [::event/scroll-weeks -2])} "^"]
|
||||
[:button {:on-click #(re-frame/dispatch [::event/scroll-weeks 2])}"v"]]
|
||||
[:button {:id :scroll-up :on-click #(re-frame/dispatch [::event/scroll-weeks -2])} "^"]
|
||||
[:button {:id :scroll-down :on-click #(re-frame/dispatch [::event/scroll-weeks 2])} "v"]]
|
||||
(when @(re-frame/subscribe [::subs/show-edit-modal])
|
||||
(cal/edit-order))
|
||||
(cal/calendar @(re-frame/subscribe [::subs/current-days]))
|
||||
[:button {:id :scroll-down-button :class :scroll-button :on-click #(re-frame/dispatch [::event/scroll-weeks 2])} "v"]
|
||||
]))
|
||||
|
Loading…
x
Reference in New Issue
Block a user