lineup/src/lineup/views.cljs

(ns lineup.views
  (:require
   [lineup.events :as events]
   [lineup.subs :as subs]
   [re-com.core :as re-com]
   [re-frame.core :as re-frame]))

(defn- top-bar [mode]
  [re-com/h-box
   :style {:padding-right "10px"}
   :justify :between
   :align :center
   :children
   [[re-com/title
     :label "Schedule"
     :level :level2]
    [re-com/hyperlink
     :label (if (= mode :edit) "done" "edit")
     :on-click #(re-frame/dispatch [::events/toggle-mode (if (= mode :edit) :normal :edit)])]]])

(defn- slot [index task]
  [re-com/box
   :width "300px"
   :height "300px"
   :style {:padding "10px"
           :border "3px solid black"
           :border-radius "10px"
           :background-color "white"}
   :child
   [:div
    {:style {:width "100%"
             :height "100%"
             :cursor "pointer"}
     :on-click #(re-frame/dispatch [::events/toggle-task-complete index])}
    "BOX"
    (when (:complete? task)
      "COMPLETE!")]])

(defn- schedule []
  (let [task-list (re-frame/subscribe [::subs/schedule])
        list-complete? (re-frame/subscribe [::subs/complete])]
    [re-com/scroller
     :v-scroll :off
     :h-scroll :auto
     :style {:padding "20px 10px"}
     :width "100%"
     :child
     [re-com/h-box
      :gap "10px"
      :align :center
      :children
      (concat
       [[re-com/box
         :height "150px"
         :width "150px"
         :child
         [:img
          {:src "go.png"}]]]
       (map-indexed
        (fn [index task]
          ^{:key (str "slot-" index)}
          [slot index task])
        @task-list)
       [[re-com/box
         :height "150px"
         :width "150px"
         :child
         [:img
          {:src (if @list-complete? "clapping.gif" "clapping.png")}]]])]]))

(defn main-panel []
  (let [mode (re-frame/subscribe [::subs/mode])]
    [re-com/v-box
     :gap "10px"
     :height   "100%"
     :children
     [[top-bar @mode]
      (if (= @mode :edit)
        [:div "EDITING!"]
        [schedule])]]))