Translate drawing day rows into javascript

Summary: Ref T8300, Translate drawing day rows into javascript

Test Plan: no user facing changes

Reviewers: epriestley, #blessed_reviewers

Reviewed By: epriestley, #blessed_reviewers

Subscribers: Korvin, epriestley

Maniphest Tasks: T8300

Differential Revision: https://secure.phabricator.com/D12983

src/view/phui/calendar/PHUICalendarDayView.php

@@ -46,6 +46,15 @@ final class PHUICalendarDayView extends AphrontView {
     require_celerity_resource('phui-calendar-day-css');
 
     $hours = $this->getHoursOfDay();
+    $js_hours = array();
+
+    foreach ($hours as $hour) {
+      $js_hours[] = array(
+        'hour' => $hour->format('G'),
+        'hour_meridian' => $hour->format('g A'),
+      );
+    }
+
     $js_hourly_events = array();
     $hourly_events = array();
 
@@ -90,6 +99,8 @@ final class PHUICalendarDayView extends AphrontView {
             'eventEndEpoch' => $event->getEpochEnd(),
             'eventName' => $event->getName(),
             'eventID' => $event->getEventID(),
+            'viewerIsInvited' => $event->getViewerIsInvited(),
+            'uri' => $event->getURI(),
           );
         }
       }
@@ -115,7 +126,9 @@ final class PHUICalendarDayView extends AphrontView {
           'eventEndEpoch' => $event->getEpochEnd(),
           'eventName' => $event->getName(),
           'eventID' => $event->getEventID(),
-          'hour' => $hour,
+          'viewerIsInvited' => $event->getViewerIsInvited(),
+          'uri' => $event->getURI(),
+          'hour' => $hour->format('G'),
           'offset' => '0',
           'width' => '100%',
           'top' => $top.'%',
@@ -201,6 +214,8 @@ final class PHUICalendarDayView extends AphrontView {
       array(
         'todayEvents' => $this->jsTodayEvents,
         'hourlyEvents' => $js_hourly_events,
+        'hours' => $js_hours,
+        'firstEventHour' => $first_event_hour->format('G'),
       ));
 
     $table_box = id(new PHUIObjectBoxView())

webroot/rsrc/js/application/calendar/behavior-day-view.js

@@ -4,6 +4,8 @@
 
 
 JX.behavior('day-view', function(config) {
+  var hours = config.hours;
+  var first_event_hour = config.firstEventHour;
   var hourly_events = config.hourlyEvents;
   var today_events = config.todayEvents;
 
@@ -78,8 +80,103 @@ JX.behavior('day-view', function(config) {
     return hourly_events;
   }
 
+  function drawEvent(
+    start,
+    end,
+    name,
+    viewerIsInvited,
+    uri,
+    id,
+    offset,
+    width,
+    top,
+    height) {
+
+    var link_class = 'phui-calendar-day-event-link';
+    if (viewerIsInvited) {
+      link_class = link_class + ' viewer-invited-day-event';
+    }
+
+    var name_link = JX.$N(
+      'a',
+      {
+        className : link_class,
+        href: uri
+      },
+      name);
+
+    var div = JX.$N(
+      'div',
+      {
+        className: 'phui-calendar-day-event',
+        style: {
+          left: offset,
+          width: width,
+          top: top,
+          height: height
+        }
+      },
+      name_link);
+
+    return div;
+  }
+
+  function drawRows() {
+    var rows = [];
+    var early_hours = [8];
+    if (first_event_hour) {
+      early_hours.push(first_event_hour);
+    }
+    var min_early_hour = Math.min(early_hours[0], early_hours[1]);
+
+
+    for(var i=0; i < hours.length; i++) {
+      if (hours[i]['hour'] < min_early_hour) {
+        continue;
+      }
+      var drawn_hourly_events = [];
+      var cell_time = JX.$N(
+        'td',
+        {className: 'phui-calendar-day-hour'},
+        hours[i]['hour_meridian']);
+
+      for (var j=0; j < hourly_events.length; j++) {
+        if (hourly_events[j]['hour'] == hours[i]['hour']) {
+          drawn_hourly_events.push(
+            drawEvent(
+              hourly_events[j]['eventStartEpoch'],
+              hourly_events[j]['eventEndEpoch'],
+              hourly_events[j]['eventName'],
+              hourly_events[j]['eventID'],
+              hourly_events[j]['viewerIsInvited'],
+              hourly_events[j]['hour'],
+              hourly_events[j]['offset'],
+              hourly_events[j]['width'],
+              hourly_events[j]['top'],
+              hourly_events[j]['height']
+            )
+          );
+        }
+      }
+
+      var cell_event = JX.$N(
+        'td',
+        {
+          className: 'phui-calendar-day-events'
+        },
+        drawn_hourly_events);
+      var row = JX.$N(
+        'tr',
+        {},
+        [cell_time, cell_event]);
+      rows.push(row);
+    }
+    return rows;
+  }
+
   var today_clusters = findTodayClusters();
   for(var i=0; i < today_clusters.length; i++) {
     hourly_events = updateEventsFromCluster(today_clusters[i], hourly_events);
   }
+  var rows = drawRows();
 });