cleanup

README.md

@@ -2,3 +2,105 @@
 
 A visual schedule builder for kids.
 
+TODO:
+- edit schedule
+  - make a list, choosing from a (text-searchable) library of images/tasks
+    - use modal-panel component and typeahead component
+- name the schedule/track
+- add little numbers to each box
+- green outline + check mark
+- save state (preserve across refresh)
+- (saveable) preset schedules (in edit menu)
+- (optional) multiple simultaneous schedules (ex: one for each kid, or general vs specific)
+- (optional) split decision tracks (conditions)
+- (saveable) make-your-own tasks
+- use localstorage ??
+
+library (each category has a representative picture/task, as does each sub-item):
+- bedtime routine
+  - bath
+  - shower
+  - brush hair
+  - pyjamas
+  - brush teeth
+  - read book (repeat of reading in activities)
+  - scriptures
+  - pray
+  - cuddle/snuggle
+- sleep
+- potty
+  - sit
+  - flush
+  - wash hands
+  - accident
+- eating
+  - food (generic food with fork)
+    - bite (eg: three more bites)
+  - soup (generic food with spoon)
+  - water/juice (generic food in cup)
+  - sandwich
+  - medicine
+- rewards
+  - ice cream cone
+- play/activities
+  - typing
+  - drawing/colouring
+  - reading
+  - writing
+  - video/TV/movie
+  - clean up
+  - cleaning
+  - listen to music
+  - make music (ie: instrument)
+  - cars/trucks/etc
+  - sing
+  - dance
+  - swing
+  - story
+  - jumping
+  - tickling/wrestling
+  - haircut
+  - look at pictures
+  - take picture
+  - activity is done
+- places
+  - park
+  - library
+  - school
+    - backpack (ie: prepare)
+    - lunch box (ie: prepare)
+    - lesson
+  - church
+    - Primary
+    - nursery
+  - doctor/hospital
+- travel
+  - car
+  - walk
+  - bus
+  - bike
+  - wagon
+  - sled
+  - train
+  - airplane
+- getting dressed
+  - underpants
+  - diaper
+  - pants
+  - shirt
+  - socks
+  - shoes
+  - boots
+  - coat
+  - hat
+  - snowpants
+  - take off clothes
+  - put clothes in laundry
+  - put away shoes
+  - hang up coat
+- generic/misc
+  - letters
+  - numbers
+  - clock (ie: waiting)
+  - no
+  - yes

resources/public/index.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
     <link rel="stylesheet" href="/vendor/css/material-design-iconic-font.min.css">
     <link rel="stylesheet" href="/vendor/css/re-com.css">
+    <link rel="stylesheet" href="styles.css">
     <link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" rel="stylesheet" type="text/css">
     <link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300" rel="stylesheet" type="text/css">
     <title>lineup</title>

resources/public/styles.css

@@ -0,0 +1,30 @@
+
+.top-bar {
+    padding-right: 10px;
+}
+
+.schedule-scroller {
+    padding: 20px 10px;
+}
+
+.slot {
+    padding: 10px;
+    border-width: 8px;
+    border-style: solid;
+    border-radius: 25px;
+    background-color: white;
+    position: relative;
+    cursor: pointer;
+}
+
+.slot-corner {
+    position: absolute;
+    top: 3px;
+    right: 5px;
+}
+.slot-corner.complete {
+    color: green;
+}
+.slot-corner.number {
+    font-size: large;
+}

src/lineup/components/schedule.cljs

@@ -0,0 +1,48 @@
+(ns lineup.components.schedule
+  (:require
+   [lineup.components.schedule.slot :refer [slot]]
+   [lineup.subs :as subs]
+   [re-com.core :as re-com]
+   [re-frame.core :as re-frame]))
+
+(defn schedule []
+  (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
+       :class "schedule-scroller"
+       :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")}]]])]]]]))

src/lineup/components/schedule/slot.cljs

@@ -0,0 +1,25 @@
+(ns lineup.components.schedule.slot
+  (:require
+   [lineup.events :as events]
+   [re-com.core :as re-com]
+   [re-frame.core :as re-frame]))
+
+(defn- corner [index task]
+  (if (:complete? task)
+    [:i
+     {:class "zmdi zmdi-check-circle zmdi-hc-3x slot-corner complete"}]
+    [:div
+     {:class "slot-corner number"}
+     (inc index)]))
+
+(defn slot [index task]
+  [re-com/box
+   :width "300px"
+   :height "300px"
+   :class "slot"
+   :style {:border-color (if (:complete? task) "green" "black")}
+   :attr {:on-click #(re-frame/dispatch [::events/toggle-task-complete index])}
+   :child
+   [:div
+    [corner index task]
+    "BOX"]])

src/lineup/views.cljs

@@ -1,5 +1,6 @@
 (ns lineup.views
   (:require
+   [lineup.components.schedule :refer [schedule]]
    [lineup.events :as events]
    [lineup.subs :as subs]
    [re-com.core :as re-com]
@@ -7,7 +8,7 @@
 
 (defn- top-bar [mode]
   [re-com/h-box
-   :style {:padding-right "10px"}
+   :class "top-bar"
    :justify :between
    :align :center
    :children
@@ -18,87 +19,11 @@
      :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-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
-    [corner index task]
-    "BOX"]])
-
-(defn- schedule []
-  (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])]
     [re-com/v-box
      :gap "10px"
-     :height   "100%"
+     :height "100%"
      :children
      [[top-bar @mode]
       (if (= @mode :edit)