single day view on smaller screens

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.
 

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
+    [:.scroll-button {:display :none}]
-                 :grid-template-columns "14% 14% 14% 14% 14% 14% 14%"
+    (at-media
-                 :grid-template-rows "50% 50%"
+     {: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}]
+               :text-overflow :ellipsis}]]
-       [:.products {:padding-left "25px"}
+      [[:.products :.products-sum] {:padding-left "25px"}
-        [:.product {:margin-bottom "5px"}
+       [:.product {:margin-bottom "5px"}
-         [:.product-amount {:width "40px"
+        [:.product-name {:width "5em"
-                            :margin-right "10px"
+                         :display :inline-block
-                            :max-height "5px"}]]
+                         :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}]

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 {}
+      [:div {:class :product-items-edit}
-       [:label "co"]
        (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]
+   (fn [form] (re-frame/dispatch [::event/save-order (format-raw-order 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)

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

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"

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-amount} amount])])
-   [:span {:class :product-name} product]])

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 {:id :scroll-up :on-click #(re-frame/dispatch [::event/scroll-weeks -2])} "^"]
-      [:button {:on-click #(re-frame/dispatch [::event/scroll-weeks 2])}"v"]]
+      [: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"]
      ]))