completed basic functionality

README.md

@@ -83,6 +83,7 @@ library (each category has a representative picture/task, as does each sub-item)
   - sled
   - train
   - airplane
+  - come home
 - getting dressed
   - underpants
   - diaper

resources/public/styles.css

@@ -28,3 +28,10 @@
 .slot-corner.number {
     font-size: large;
 }
+
+.task-editor {
+    cursor: pointer;
+}
+.task-selector {
+    cursor: pointer;
+}

src/lineup/components/edit.cljs

@@ -0,0 +1,84 @@
+(ns lineup.components.edit
+  (:require
+   [lineup.components.edit.selector :refer [task-selector]]
+   [lineup.events :as events]
+   [lineup.subs :as subs]
+   [re-com.core :as re-com]
+   [re-frame.core :as re-frame]))
+
+(defn- task-editor [index task]
+  [re-com/h-box
+   :gap "20px"
+   :class "task-editor"
+   :padding "0 10px"
+   :align :center
+   :attr {:on-click #(re-frame/dispatch [::events/select-selecting index])}
+   :children
+   [[re-com/box
+     :size "none"
+     :child
+     [re-com/title
+      :label (inc index)
+      :level :level1]]
+    [re-com/box
+     :width "100px"
+     :height "100px"
+     :max-width "100px"
+     :max-height "100px"
+     :justify :center
+     :child
+     [:img
+      {:src (:image task)}]]
+    [re-com/box
+     :size "1"
+     :child
+     [re-com/title
+      :label (:name task)
+      :level :level3]]
+    [re-com/box
+     :size "none"
+     :child
+     ;TODO: add move up and move down buttons (row buttons)
+     [re-com/button
+      :label "X"
+      :on-click #(do
+                   (re-frame/dispatch [::events/remove-task index])
+                   (.stopPropagation %))]]]])
+
+(defn- schedule-editor []
+  (let [schedule-data (re-frame/subscribe [::subs/schedule])
+        library-data (re-frame/subscribe [::subs/library])
+        library (fn [id]
+                  (some #(when (= (:id %) id) %) @library-data))]
+    ;TODO: convert to table (with row buttons)
+    [re-com/v-box
+     :gap "10px"
+     :height "100%"
+     :children
+     (concat
+      (map-indexed
+       (fn [index task]
+         ^{:key (str "edit-task-" index)}
+         [task-editor index (library (:ref task))])
+       (:tasks @schedule-data []))
+      [[re-com/box
+        :max-width "50%"
+        :margin "0 0 0 20px"
+        :child
+        [re-com/button
+         :label "+"
+         :class "btn-primary btn-block"
+         :on-click #(re-frame/dispatch [::events/select-selecting (count (:tasks @schedule-data))])]]])]))
+
+(defn edit []
+  (let [selecting (re-frame/subscribe [::subs/selecting])]
+    [re-com/v-box
+     :gap "10px"
+     :height "100%"
+     :children
+     [[re-com/title
+       :label "Schedule Editor"
+       :level :level3]
+      [schedule-editor]
+      (when @selecting
+        [task-selector @selecting])]]))

src/lineup/components/edit/selector.cljs

@@ -0,0 +1,45 @@
+(ns lineup.components.edit.selector
+  (:require
+   [lineup.events :as events]
+   [lineup.subs :as subs]
+   [re-com.core :as re-com]
+   [re-frame.core :as re-frame]))
+
+(defn task-selector [which]
+  (let [library-data (re-frame/subscribe [::subs/library])]
+    [re-com/modal-panel
+     :backdrop-on-click #(re-frame/dispatch [::events/select-selecting nil])
+     :child
+     [re-com/v-box
+      :gap "10px"
+      :align :center
+      :children
+      (concat
+       [[re-com/title
+         :label "Select an Activity"
+         :level :level3]
+        [:div "(TODO: search box here)"]]
+       (map
+        (fn [library-item]
+          [re-com/h-box
+           :gap "20px"
+           :align :center
+           :align-self :start
+           :attr {:on-click #(re-frame/dispatch [::events/select-task which (:id library-item)])}
+           :class "task-selector"
+           :children
+           [[re-com/box
+             :width "50px"
+             :height "50px"
+             :max-width "50px"
+             :max-height "50px"
+             :justify :center
+             :child
+             [:img
+              {:src (:image library-item)}]]
+            [re-com/box
+             :child
+             [re-com/title
+              :label (:name library-item)
+              :level :level3]]]])
+        @library-data))]]))

src/lineup/components/schedule.cljs

@@ -9,7 +9,10 @@
   (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)]
+        task-list (:tasks @schedule-data)
+        library-data (re-frame/subscribe [::subs/library])
+        library (fn [id]
+                  (some #(when (= (:id %) id) %) @library-data))]
     [re-com/v-box
      :gap "10px"
      :height "100%"
@@ -38,7 +41,9 @@
          (map-indexed
           (fn [index task]
             ^{:key (str "slot-" index)}
-            [slot index task])
+            [slot index (-> task
+                            (merge (library (:ref task)))
+                            (dissoc :ref))])
           task-list)
          [[re-com/box
            :height "150px"

src/lineup/components/schedule/slot.cljs

@@ -18,8 +18,25 @@
    :height "300px"
    :class "slot"
    :style {:border-color (if (:complete? task) "green" "black")}
+   :align :center
+   :justify :center
    :attr {:on-click #(re-frame/dispatch [::events/toggle-task-complete index])}
    :child
    [:div
-    [corner index task]
-    "BOX"]])
+    [re-com/v-box
+     :align :center
+     :children
+     [[re-com/box
+       :width "200px"
+       :height "200px"
+       :max-width "200px"
+       :max-height "200px"
+       :justify :center
+       :style {:flex-flow "revert"}
+       :child
+       [:img
+        {:src (:image task)}]]
+      [re-com/title
+       :label (:name task)
+       :level :level2]]]
+    [corner index task]]])

src/lineup/db.cljs

@@ -2,7 +2,8 @@
 
 (def default-db
   {:mode :normal
-   :schedule {:tasks [{} {}]}
+   :selecting nil
+   :schedule {:tasks [{:ref 2} {:ref 5} {:ref 4} {:ref 5} {:ref 1}]}
 
    :library [{:id 1
               :name "sleep"

src/lineup/events.cljs

@@ -13,6 +13,11 @@
  (fn [db [_ new-mode]]
    (assoc db :mode new-mode)))
 
+(re-frame/reg-event-db
+ ::select-selecting
+ (fn [db [_ which]]
+   (assoc db :selecting which)))
+
 (re-frame/reg-event-db
  ::toggle-task-complete
  (fn [db [_ which]]
@@ -22,3 +27,28 @@
     (partial map-indexed #(if (= %1 which)
                             (update %2 :complete? not)
                             %2)))))
+
+(re-frame/reg-event-fx
+ ::select-task
+ (fn [{:keys [db]} [_ which id]]
+   (let [old-tasks (get-in db [:schedule :tasks])
+         new-task {:ref id}
+         new-tasks (if (>= which (count old-tasks))
+                     (conj old-tasks new-task)
+                     (vec
+                      (concat
+                       (subvec old-tasks 0 which)
+                       [new-task]
+                       (subvec old-tasks (inc which)))))]
+     {:db (assoc-in db [:schedule :tasks] new-tasks)
+      :fx [[:dispatch [::select-selecting nil]]]})))
+
+(re-frame/reg-event-db
+ ::remove-task
+ (fn [db [_ which]]
+   (let [old-tasks (get-in db [:schedule :tasks])
+         new-tasks (vec
+                    (concat
+                     (subvec old-tasks 0 which)
+                     (subvec old-tasks (inc which))))]
+     (assoc-in db [:schedule :tasks] new-tasks))))

src/lineup/subs.cljs

@@ -19,3 +19,13 @@
         :schedule
         :tasks
         (every? :complete?))))
+
+(re-frame/reg-sub
+ ::library
+ (fn [db]
+   (:library db)))
+
+(re-frame/reg-sub
+ ::selecting
+ (fn [db]
+   (:selecting db)))

src/lineup/views.cljs

@@ -1,5 +1,6 @@
 (ns lineup.views
   (:require
+   [lineup.components.edit :refer [edit]]
    [lineup.components.schedule :refer [schedule]]
    [lineup.events :as events]
    [lineup.subs :as subs]
@@ -27,6 +28,6 @@
      :children
      [[top-bar @mode]
       (if (= @mode :edit)
-        [:div "EDITING!"]
+        [edit]
         [schedule])]]))