mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-26 08:42:41 +01:00
Translating day view into javascript, actually.
Summary: Ref T8300, Translating day view into javascript, actually Test Plan: should be no user facing changes. should look the same as it did before. Reviewers: #blessed_reviewers, epriestley Reviewed By: #blessed_reviewers, epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T8300 Differential Revision: https://secure.phabricator.com/D12985
This commit is contained in:
parent
07a2bb7f3b
commit
6481884d26
2 changed files with 79 additions and 171 deletions
|
@ -9,7 +9,6 @@ final class PHUICalendarDayView extends AphrontView {
|
||||||
private $year;
|
private $year;
|
||||||
private $browseURI;
|
private $browseURI;
|
||||||
private $events = array();
|
private $events = array();
|
||||||
private $todayEvents = array();
|
|
||||||
private $jsTodayEvents = array();
|
private $jsTodayEvents = array();
|
||||||
|
|
||||||
private $allDayEvents = array();
|
private $allDayEvents = array();
|
||||||
|
@ -55,13 +54,12 @@ final class PHUICalendarDayView extends AphrontView {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
$js_hourly_events = array();
|
|
||||||
$hourly_events = array();
|
|
||||||
|
|
||||||
$first_event_hour = null;
|
$first_event_hour = null;
|
||||||
|
|
||||||
|
$js_hourly_events = array();
|
||||||
|
$js_today_all_day_events = array();
|
||||||
|
|
||||||
$all_day_events = $this->getAllDayEvents();
|
$all_day_events = $this->getAllDayEvents();
|
||||||
$today_all_day_events = array();
|
|
||||||
|
|
||||||
$day_start = $this->getDateTime();
|
$day_start = $this->getDateTime();
|
||||||
$day_end = id(clone $day_start)->modify('+1 day');
|
$day_end = id(clone $day_start)->modify('+1 day');
|
||||||
|
@ -74,7 +72,12 @@ final class PHUICalendarDayView extends AphrontView {
|
||||||
$all_day_end = $all_day_event->getEpochEnd();
|
$all_day_end = $all_day_event->getEpochEnd();
|
||||||
|
|
||||||
if ($all_day_start < $day_end_epoch && $all_day_end > $day_start_epoch) {
|
if ($all_day_start < $day_end_epoch && $all_day_end > $day_start_epoch) {
|
||||||
$today_all_day_events[] = $all_day_event;
|
$js_today_all_day_events[] = array(
|
||||||
|
'name' => $all_day_event->getName(),
|
||||||
|
'id' => $all_day_event->getEventID(),
|
||||||
|
'viewerIsInvited' => $all_day_event->getViewerIsInvited(),
|
||||||
|
'uri' => $all_day_event->getURI(),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -93,7 +96,6 @@ final class PHUICalendarDayView extends AphrontView {
|
||||||
($event->getEpochStart() >= $hour_start
|
($event->getEpochStart() >= $hour_start
|
||||||
&& $event->getEpochStart() < $hour_end)) {
|
&& $event->getEpochStart() < $hour_end)) {
|
||||||
$current_hour_events[] = $event;
|
$current_hour_events[] = $event;
|
||||||
$this->todayEvents[] = $event;
|
|
||||||
$this->jsTodayEvents[] = array(
|
$this->jsTodayEvents[] = array(
|
||||||
'eventStartEpoch' => $event->getEpochStart(),
|
'eventStartEpoch' => $event->getEpochStart(),
|
||||||
'eventEndEpoch' => $event->getEpochEnd(),
|
'eventEndEpoch' => $event->getEpochEnd(),
|
||||||
|
@ -134,94 +136,36 @@ final class PHUICalendarDayView extends AphrontView {
|
||||||
'top' => $top.'%',
|
'top' => $top.'%',
|
||||||
'height' => $height.'%',
|
'height' => $height.'%',
|
||||||
);
|
);
|
||||||
|
|
||||||
$hourly_events[$event->getEventID()] = array(
|
|
||||||
'hour' => $hour,
|
|
||||||
'event' => $event,
|
|
||||||
'offset' => '0',
|
|
||||||
'width' => '100%',
|
|
||||||
'top' => $top.'%',
|
|
||||||
'height' => $height.'%',
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$clusters = $this->findTodayClusters();
|
|
||||||
foreach ($clusters as $cluster) {
|
|
||||||
$hourly_events = $this->updateEventsFromCluster(
|
|
||||||
$cluster,
|
|
||||||
$hourly_events);
|
|
||||||
}
|
|
||||||
|
|
||||||
$rows = array();
|
|
||||||
|
|
||||||
foreach ($hours as $hour) {
|
|
||||||
$early_hours = array(8);
|
|
||||||
if ($first_event_hour) {
|
|
||||||
$early_hours[] = $first_event_hour->format('G');
|
|
||||||
}
|
|
||||||
if ($hour->format('G') < min($early_hours)) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
$drawn_hourly_events = array();
|
|
||||||
$cell_time = phutil_tag(
|
|
||||||
'td',
|
|
||||||
array('class' => 'phui-calendar-day-hour'),
|
|
||||||
$hour->format('g A'));
|
|
||||||
|
|
||||||
foreach ($hourly_events as $hourly_event) {
|
|
||||||
if ($hourly_event['hour'] == $hour) {
|
|
||||||
|
|
||||||
$drawn_hourly_events[] = $this->drawEvent(
|
|
||||||
$hourly_event['event'],
|
|
||||||
$hourly_event['offset'],
|
|
||||||
$hourly_event['width'],
|
|
||||||
$hourly_event['top'],
|
|
||||||
$hourly_event['height']);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$cell_event = phutil_tag(
|
|
||||||
'td',
|
|
||||||
array('class' => 'phui-calendar-day-events'),
|
|
||||||
$drawn_hourly_events);
|
|
||||||
|
|
||||||
$row = phutil_tag(
|
|
||||||
'tr',
|
|
||||||
array(),
|
|
||||||
array($cell_time, $cell_event));
|
|
||||||
|
|
||||||
$rows[] = $row;
|
|
||||||
}
|
|
||||||
|
|
||||||
$table = phutil_tag(
|
|
||||||
'table',
|
|
||||||
array('class' => 'phui-calendar-day-view'),
|
|
||||||
$rows);
|
|
||||||
|
|
||||||
$all_day_event_box = new PHUIBoxView();
|
|
||||||
foreach ($today_all_day_events as $all_day_event) {
|
|
||||||
$all_day_event_box->appendChild(
|
|
||||||
$this->drawAllDayEvent($all_day_event));
|
|
||||||
}
|
|
||||||
|
|
||||||
$header = $this->renderDayViewHeader();
|
$header = $this->renderDayViewHeader();
|
||||||
$sidebar = $this->renderSidebar();
|
$sidebar = $this->renderSidebar();
|
||||||
$warnings = $this->getQueryRangeWarning();
|
$warnings = $this->getQueryRangeWarning();
|
||||||
|
|
||||||
|
$table_id = celerity_generate_unique_node_id();
|
||||||
|
|
||||||
|
$table_wrapper = phutil_tag(
|
||||||
|
'div',
|
||||||
|
array(
|
||||||
|
'id' => $table_id,
|
||||||
|
),
|
||||||
|
'');
|
||||||
|
|
||||||
Javelin::initBehavior(
|
Javelin::initBehavior(
|
||||||
'day-view',
|
'day-view',
|
||||||
array(
|
array(
|
||||||
|
'allDayEvents' => $js_today_all_day_events,
|
||||||
'todayEvents' => $this->jsTodayEvents,
|
'todayEvents' => $this->jsTodayEvents,
|
||||||
'hourlyEvents' => $js_hourly_events,
|
'hourlyEvents' => $js_hourly_events,
|
||||||
'hours' => $js_hours,
|
'hours' => $js_hours,
|
||||||
'firstEventHour' => $first_event_hour->format('G'),
|
'firstEventHour' => $first_event_hour->format('G'),
|
||||||
|
'tableID' => $table_id,
|
||||||
));
|
));
|
||||||
|
|
||||||
$table_box = id(new PHUIObjectBoxView())
|
$table_box = id(new PHUIObjectBoxView())
|
||||||
->setHeader($header)
|
->setHeader($header)
|
||||||
->appendChild($all_day_event_box)
|
->appendChild($table_wrapper)
|
||||||
->appendChild($table)
|
|
||||||
->setFormErrors($warnings)
|
->setFormErrors($warnings)
|
||||||
->setFlush(true);
|
->setFlush(true);
|
||||||
|
|
||||||
|
@ -433,75 +377,6 @@ final class PHUICalendarDayView extends AphrontView {
|
||||||
return $hourly_events;
|
return $hourly_events;
|
||||||
}
|
}
|
||||||
|
|
||||||
private function drawAllDayEvent(AphrontCalendarEventView $event) {
|
|
||||||
$class = 'day-view-all-day';
|
|
||||||
if ($event->getViewerIsInvited()) {
|
|
||||||
$class = $class.' viewer-invited-day-event';
|
|
||||||
}
|
|
||||||
|
|
||||||
$name = phutil_tag(
|
|
||||||
'a',
|
|
||||||
array(
|
|
||||||
'class' => $class,
|
|
||||||
'href' => $event->getURI(),
|
|
||||||
),
|
|
||||||
$event->getName());
|
|
||||||
|
|
||||||
$all_day_label = phutil_tag(
|
|
||||||
'span',
|
|
||||||
array(
|
|
||||||
'class' => 'phui-calendar-all-day-label',
|
|
||||||
),
|
|
||||||
pht('All Day'));
|
|
||||||
|
|
||||||
$div = phutil_tag(
|
|
||||||
'div',
|
|
||||||
array(
|
|
||||||
'class' => 'phui-calendar-day-event',
|
|
||||||
),
|
|
||||||
array(
|
|
||||||
$all_day_label,
|
|
||||||
$name,
|
|
||||||
));
|
|
||||||
|
|
||||||
return $div;
|
|
||||||
}
|
|
||||||
|
|
||||||
private function drawEvent(
|
|
||||||
AphrontCalendarEventView $event,
|
|
||||||
$offset,
|
|
||||||
$width,
|
|
||||||
$top,
|
|
||||||
$height) {
|
|
||||||
|
|
||||||
$class = 'phui-calendar-day-event-link';
|
|
||||||
if ($event->getViewerIsInvited()) {
|
|
||||||
$class = $class.' viewer-invited-day-event';
|
|
||||||
}
|
|
||||||
|
|
||||||
$name = phutil_tag(
|
|
||||||
'a',
|
|
||||||
array(
|
|
||||||
'class' => $class,
|
|
||||||
'href' => $event->getURI(),
|
|
||||||
),
|
|
||||||
$event->getName());
|
|
||||||
|
|
||||||
$div = phutil_tag(
|
|
||||||
'div',
|
|
||||||
array(
|
|
||||||
'class' => 'phui-calendar-day-event',
|
|
||||||
'style' => 'left: '.$offset
|
|
||||||
.'; width: '.$width
|
|
||||||
.'; top: '.$top
|
|
||||||
.'; height: '.$height
|
|
||||||
.';',
|
|
||||||
),
|
|
||||||
$name);
|
|
||||||
|
|
||||||
return $div;
|
|
||||||
}
|
|
||||||
|
|
||||||
// returns DateTime of each hour in the day
|
// returns DateTime of each hour in the day
|
||||||
private function getHoursOfDay() {
|
private function getHoursOfDay() {
|
||||||
$included_datetimes = array();
|
$included_datetimes = array();
|
||||||
|
|
|
@ -8,6 +8,8 @@ JX.behavior('day-view', function(config) {
|
||||||
var first_event_hour = config.firstEventHour;
|
var first_event_hour = config.firstEventHour;
|
||||||
var hourly_events = config.hourlyEvents;
|
var hourly_events = config.hourlyEvents;
|
||||||
var today_events = config.todayEvents;
|
var today_events = config.todayEvents;
|
||||||
|
var today_all_day_events = config.allDayEvents;
|
||||||
|
var table_wrapper = JX.$(config.tableID);
|
||||||
|
|
||||||
|
|
||||||
function findTodayClusters() {
|
function findTodayClusters() {
|
||||||
|
@ -80,19 +82,17 @@ JX.behavior('day-view', function(config) {
|
||||||
return hourly_events;
|
return hourly_events;
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawEvent(
|
function drawEvent(hourly_event) {
|
||||||
start,
|
var name = hourly_event['eventName'];
|
||||||
end,
|
var viewerIsInvited = hourly_event['viewerIsInvited'];
|
||||||
name,
|
var offset = hourly_event['offset'];
|
||||||
viewerIsInvited,
|
var width = hourly_event['width'];
|
||||||
uri,
|
var top = hourly_event['top'];
|
||||||
id,
|
var height = hourly_event['height'];
|
||||||
offset,
|
var uri = hourly_events['uri'];
|
||||||
width,
|
|
||||||
top,
|
|
||||||
height) {
|
|
||||||
|
|
||||||
var link_class = 'phui-calendar-day-event-link';
|
var link_class = 'phui-calendar-day-event-link';
|
||||||
|
|
||||||
if (viewerIsInvited) {
|
if (viewerIsInvited) {
|
||||||
link_class = link_class + ' viewer-invited-day-event';
|
link_class = link_class + ' viewer-invited-day-event';
|
||||||
}
|
}
|
||||||
|
@ -121,6 +121,36 @@ JX.behavior('day-view', function(config) {
|
||||||
return div;
|
return div;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function drawAllDayEvent(
|
||||||
|
viewerIsInvited,
|
||||||
|
uri,
|
||||||
|
name) {
|
||||||
|
var class_name = 'day-view-all-day';
|
||||||
|
if (viewerIsInvited) {
|
||||||
|
class_name = class_name + ' viewer-invited-day-event';
|
||||||
|
}
|
||||||
|
|
||||||
|
name = JX.$N(
|
||||||
|
'a',
|
||||||
|
{
|
||||||
|
className: class_name,
|
||||||
|
href: uri
|
||||||
|
},
|
||||||
|
name);
|
||||||
|
|
||||||
|
var all_day_label = JX.$N(
|
||||||
|
'span',
|
||||||
|
{className: 'phui-calendar-all-day-label'},
|
||||||
|
'All Day');
|
||||||
|
|
||||||
|
var div_all_day = JX.$N(
|
||||||
|
'div',
|
||||||
|
{className: 'phui-calendar-day-event'},
|
||||||
|
[all_day_label, name]);
|
||||||
|
|
||||||
|
return div_all_day;
|
||||||
|
}
|
||||||
|
|
||||||
function drawRows() {
|
function drawRows() {
|
||||||
var rows = [];
|
var rows = [];
|
||||||
var early_hours = [8];
|
var early_hours = [8];
|
||||||
|
@ -142,20 +172,7 @@ JX.behavior('day-view', function(config) {
|
||||||
|
|
||||||
for (var j=0; j < hourly_events.length; j++) {
|
for (var j=0; j < hourly_events.length; j++) {
|
||||||
if (hourly_events[j]['hour'] == hours[i]['hour']) {
|
if (hourly_events[j]['hour'] == hours[i]['hour']) {
|
||||||
drawn_hourly_events.push(
|
drawn_hourly_events.push(drawEvent(hourly_events[j]));
|
||||||
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']
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -179,4 +196,20 @@ JX.behavior('day-view', function(config) {
|
||||||
hourly_events = updateEventsFromCluster(today_clusters[i], hourly_events);
|
hourly_events = updateEventsFromCluster(today_clusters[i], hourly_events);
|
||||||
}
|
}
|
||||||
var rows = drawRows();
|
var rows = drawRows();
|
||||||
|
|
||||||
|
var all_day_events = [];
|
||||||
|
for(i=0; i < today_all_day_events.length; i++) {
|
||||||
|
var all_day_event = today_all_day_events[i];
|
||||||
|
all_day_events.push(drawAllDayEvent(
|
||||||
|
all_day_event['viewerIsInvited'],
|
||||||
|
all_day_event['uri'],
|
||||||
|
all_day_event['name']));
|
||||||
|
}
|
||||||
|
|
||||||
|
var table = JX.$N(
|
||||||
|
'table',
|
||||||
|
{className: 'phui-calendar-day-view'},
|
||||||
|
rows);
|
||||||
|
|
||||||
|
JX.DOM.setContent(table_wrapper, [all_day_events, table]);
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue