Made the date flipper work like in the picture

Gemfile

@@ -19,7 +19,7 @@ gem 'haml'
 gem 'figaro' # Store secrets the 12 factor way. TODO: Get off of this gem.
 gem 'devise', github: 'plataformatec/devise'
 gem 'mutations'
-gem 'active_model_serializers'
+gem 'active_model_serializers', '~> 0.8.3'
 gem 'ice_cube'
 gem 'rails-assets-ng-sortable'
 gem 'rails-assets-js-data'

Gemfile.lock

@@ -49,8 +49,8 @@ GEM
       activesupport (= 4.1.0)
       builder (~> 3.1)
       erubis (~> 2.7.0)
-    active_model_serializers (0.9.3)
-      activemodel (>= 3.2)
+    active_model_serializers (0.8.3)
+      activemodel (>= 3.0)
     activemodel (4.1.0)
       activesupport (= 4.1.0)
       builder (~> 3.1)
@@ -335,7 +335,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  active_model_serializers
+  active_model_serializers (~> 0.8.3)
   capybara
   capybara-angular
   coffee-rails

app/assets/javascripts/farmbot_app/controllers/schedule_controller.js.coffee

@@ -7,15 +7,21 @@ controller = ($scope, Data, Calendar) ->
                     {show: 'Weeks',   value: 'weekly'},
                     {show: 'Months',  value: 'monthly'},
                     {show: 'Years',   value: 'yearly'}]
+  $scope.calDate = new Date()
+  $scope.calDate.setHours(0)
+  $scope.calDate.setMinutes(0)
+  getSchedules = ->
+    Data.ejectAll('schedule')
+    Data.findAll('schedule', start: $scope.calDate, bypassCache: yes).catch nope
+  getSchedules()
+  $scope.$watch 'calDate', getSchedules, true
   Data.findAll('sequence', {}).catch(nope)
-  Data.findAll('schedule', {}).catch(nope)
   Data.bindAll('sequence', {}, $scope, 'sequences')
   Data.bindAll('schedule', {}, $scope, 'schedules')
 
   $scope.prettyDates = []
   drawCalendar = -> $scope.prettyDates = Calendar.draw($scope.schedules)
   $scope.$watchCollection 'schedules', drawCalendar
-
   $scope.submit = -> Data.create('schedule', $scope.form).catch(nope).then clear
 
   $scope.destroy = ->
@@ -25,18 +31,16 @@ controller = ($scope, Data, Calendar) ->
       clear()
 
   $scope.edit = (sched) -> $scope.form = sched
-
+  $scope.shiftDate = (days) ->
+    console.log '->'
+    n = $scope.calDate.getTime() + (86400000 * days);
+    $scope.calDate = new Date(n)
   previousSchedule = (indx) ->
     $scope.prettyDates[indx - 1] || {next_time: new Date(0)}
   currentSchedule = (indx) -> $scope.prettyDates[indx]
-
-  $scope.showDate = (indx) ->
-    return yes if $scope.prettyDates.length is 1
-    before = previousSchedule(indx).next_time.getDay()
-    after = currentSchedule(indx).next_time.getDay()
-    if before is after then no else yes
   $scope.pastEvent = (sched) -> sched.next_time < new Date()
   $scope.nextEvent = ($index) ->
+    return false if $index is 0
     previous = $scope.pastEvent(previousSchedule($index))
     current  = $scope.pastEvent(currentSchedule($index))
     if previous is true and current is false then yes else no

app/controllers/api/schedules_controller.rb

@@ -42,5 +42,14 @@ module Api
     def schedule
       @schedule ||= Schedule.find(params[:id])
     end
+
+    def default_serializer_options
+      # For some strange reason, angular-data crashes if we don't call super()
+      # here. Rails doesn't care, though.
+      super.merge({
+        start: params[:start],
+        finish: params[:finish]
+        })
+    end
   end
 end

app/serializers/schedule_serializer.rb

@@ -12,8 +12,24 @@ class ScheduleSerializer < ActiveModel::Serializer
   end
 
   def calendar
-    start  = serialization_options[:start] || Time.current - 1.day
-    finish = serialization_options[:finish] || Time.current + 1.day
     object.between start, finish
   end
+
+private
+
+  def start
+    if options[:start]
+      Time.parse(options[:start])
+    else
+      Time.current.midnight - 1.day
+    end
+  end
+
+  def finish
+    if options[:finish]
+      Time.parse(options[:finish])
+    else
+      start + 1.day
+    end
+  end
 end

app/views/dashboard/ng-partials/_schedule.html.haml

@@ -3,16 +3,3 @@
     = render partial: "dashboard/ng-partials/widgets/schedule_sequence"
   .large-5.columns
     = render partial: "dashboard/ng-partials/widgets/calendar"
-.widget-wrapper
-  .row
-    .small-4.columns
-      .header-wrapper
-        %h5 Temporary Flipper
-  .row
-    .small-4.columns
-      .content-wrapper.calendar-wrapper
-        .row.day
-          .small-12.columns.centered
-            %button <--
-            %button Calendar
-            %button -->

app/views/dashboard/ng-partials/widgets/_calendar.html.haml

@@ -8,11 +8,11 @@
       .content-wrapper.calendar-wrapper
         .row.date-flipper
           .small-2.columns
-            %i.fa.fa-2x.fa-arrow-left.arrow-button.radius
+            %i.fa.fa-2x.fa-arrow-left.arrow-button.radius{ng_click: 'shiftDate(-1)'}
           .small-8.columns
-            %h6.date {{ schedule.next_time | date: 'MMMM d' }} March 5 (make me real)
+            %h6.date{'pick-a-date' => 'calDate'} {{ calDate | date: 'MMMM d' }}
           .small-2.columns
-            %i.fa.fa-2x.fa-arrow-right.arrow-button.radius.right
+            %i.fa.fa-2x.fa-arrow-right.arrow-button.radius.right{ng_click: 'shiftDate(1)'}
         .row.event{'ng-repeat' => 'schedule in prettyDates', ng_class:'{past: pastEvent(schedule), next: nextEvent($index)}'}
           .small-12.columns
             .event-time {{ schedule.next_time | date: 'h:mm a' }}