single day view on smaller screens

This commit is contained in:
Daniel O'Connell 2021-01-24 16:29:14 +01:00
parent ff3559269b
commit c4b43f004d
7 changed files with 111 additions and 31 deletions

View File

@ -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.

View File

@ -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}]

View File

@ -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)

View File

@ -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 {}

View File

@ -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"

View File

@ -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])])

View File

@ -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"]
]))