From c4b43f004dfc9030a2887a7ff17a525056996bc5 Mon Sep 17 00:00:00 2001 From: Daniel O'Connell Date: Sun, 24 Jan 2021 16:29:14 +0100 Subject: [PATCH] single day view on smaller screens --- README.md | 14 +++++ src/clj/chicken_master/css.clj | 73 ++++++++++++++++++++++----- src/cljs/chicken_master/calendar.cljs | 25 ++++++--- src/cljs/chicken_master/db.cljs | 5 ++ src/cljs/chicken_master/events.cljs | 11 ++-- src/cljs/chicken_master/products.cljs | 8 +-- src/cljs/chicken_master/views.cljs | 6 ++- 7 files changed, 111 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index f3a0850..2119ed7 100644 --- a/README.md +++ b/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. diff --git a/src/clj/chicken_master/css.clj b/src/clj/chicken_master/css.clj index e06fb4c..b6e6c49 100644 --- a/src/clj/chicken_master/css.clj +++ b/src/clj/chicken_master/css.clj @@ -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}] diff --git a/src/cljs/chicken_master/calendar.cljs b/src/cljs/chicken_master/calendar.cljs index 6c6052f..5318597 100644 --- a/src/cljs/chicken_master/calendar.cljs +++ b/src/cljs/chicken_master/calendar.cljs @@ -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) diff --git a/src/cljs/chicken_master/db.cljs b/src/cljs/chicken_master/db.cljs index 9972a00..ba5db24 100644 --- a/src/cljs/chicken_master/db.cljs +++ b/src/cljs/chicken_master/db.cljs @@ -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 {} diff --git a/src/cljs/chicken_master/events.cljs b/src/cljs/chicken_master/events.cljs index d2e36b3..896bc09 100644 --- a/src/cljs/chicken_master/events.cljs +++ b/src/cljs/chicken_master/events.cljs @@ -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" diff --git a/src/cljs/chicken_master/products.cljs b/src/cljs/chicken_master/products.cljs index 41dc60c..cf4f7b2 100644 --- a/src/cljs/chicken_master/products.cljs +++ b/src/cljs/chicken_master/products.cljs @@ -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])]) diff --git a/src/cljs/chicken_master/views.cljs b/src/cljs/chicken_master/views.cljs index 56bd97e..5fc012c 100644 --- a/src/cljs/chicken_master/views.cljs +++ b/src/cljs/chicken_master/views.cljs @@ -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"] ]))