developing look; developing image library (will probably move to a separate project)

src/lineup/db.cljs

@@ -2,4 +2,30 @@
 
 (def default-db
   {:mode :normal
-   :schedule [{} {}]})
+   :schedule {:tasks [{} {}]}
+
+   :library [{:id 1
+              :name "sleep"
+              :categories ["bedtime" "naping"]
+              :keywords ["bed" "nap"]
+              :image "sleep.png"}
+             {:id 2
+              :name "eat"
+              :categories ["eating"]
+              :keywords ["meal" "food" "chopsticks"]
+              :image "eating1.png"}
+             {:id 3
+              :name "eat"
+              :categories ["eating"]
+              :keywords ["meal" "food" "spaghetti"]
+              :image "eating2.png"}
+             {:id 4
+              :name "go to school"
+              :categories ["school"]
+              :keywords ["class"]
+              :image "school.png"}
+             {:id 5
+              :name "brush teeth"
+              :categories ["bedtime"]
+              :keywords ["bedtime" "routine"]
+              :image "teeth-brushing.png"}]})

src/lineup/events.cljs

@@ -16,9 +16,9 @@
 (re-frame/reg-event-db
  ::toggle-task-complete
  (fn [db [_ which]]
-   (update
+   (update-in
     db
-    :schedule
+    [:schedule :tasks]
     (partial map-indexed #(if (= %1 which)
                             (update %2 :complete? not)
                             %2)))))

src/lineup/subs.cljs

@@ -15,6 +15,7 @@
 (re-frame/reg-sub
  ::complete
  (fn [db]
-   (every?
-    :complete?
-    (:schedule db))))
+   (->> db
+        :schedule
+        :tasks
+        (every? :complete?))))

src/lineup/views.cljs

@@ -18,55 +18,81 @@
      :label (if (= mode :edit) "done" "edit")
      :on-click #(re-frame/dispatch [::events/toggle-mode (if (= mode :edit) :normal :edit)])]]])
 
+(defn- corner [index task]
+  (if (:complete? task)
+    [:i
+     {:class "zmdi zmdi-check-circle zmdi-hc-3x"
+      :style {:color "green"
+              :position "absolute"
+              :top "3px"
+              :right "5px"}}]
+    [:div
+     {:style {:position "absolute"
+              :top "3px"
+              :right "5px"
+              :font-size "large"}}
+     (inc index)]))
+
 (defn- slot [index task]
   [re-com/box
    :width "300px"
    :height "300px"
    :style {:padding "10px"
-           :border "3px solid black"
-           :border-radius "10px"
-           :background-color "white"}
+           :border-width "8px"
+           :border-style "solid"
+           :border-color (if (:complete? task) "green" "black")
+           :border-radius "25px"
+           :background-color "white"
+           :position "relative"
+           :cursor "pointer"}
+   :attr {:on-click #(re-frame/dispatch [::events/toggle-task-complete index])}
    :child
    [:div
-    {:style {:width "100%"
-             :height "100%"
-             :cursor "pointer"}
-     :on-click #(re-frame/dispatch [::events/toggle-task-complete index])}
-    "BOX"
-    (when (:complete? task)
-      "COMPLETE!")]])
+    [corner index task]
+    "BOX"]])
 
 (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")}]]])]]))
+  (let [schedule-data (re-frame/subscribe [::subs/schedule])
+        list-complete? (re-frame/subscribe [::subs/complete])
+        schedule-name (:name @schedule-data)
+        task-list (:tasks @schedule-data)]
+    [re-com/v-box
+     :gap "10px"
+     :height "100%"
+     :children
+     [(when (string? schedule-name)
+        [re-com/title
+         :label schedule-name
+         :level :level3])
+      [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])]