Commit 60a574ef authored by Zach Copley's avatar Zach Copley

Work improving the interface of the Event micro-app

Squashed commit of the following:

commit da50b6b0223fcbc42cf45d01a138f08930917e71
Author: Zach Copley <zach@status.net>
Date:   Tue Aug 2 00:35:36 2011 -0700

    If end time < start time reset the end time selection

commit 6dfc35579e8e4bd0af9d85fc46799bcc462c68b1
Author: Zach Copley <zach@status.net>
Date:   Mon Aug 1 23:55:10 2011 -0700

    Populate event dates with sensible defaults

commit 0bc8d726706cfdc0830687e7f40e941e61691191
Author: Zach Copley <zach@status.net>
Date:   Mon Aug 1 23:29:46 2011 -0700

    Recalculate times if user changes start or end date

commit 6a92a31429b4eb6f442eaf850d59dcc5b121e57f
Author: Zach Copley <zach@status.net>
Date:   Mon Aug 1 23:03:46 2011 -0700

    * Better date/time display
    * Localize date and time display for user

commit 2bf344068a0eb6e3ed90efacbf33c85e7ee5edf7
Author: Zach Copley <zach@status.net>
Date:   Mon Aug 1 15:56:21 2011 -0700

    Reselect the end time after timelist update

commit 62fd0620eb5fcc94c240c0fc0b304aa17509de8d
Author: Zach Copley <zach@status.net>
Date:   Mon Aug 1 14:40:14 2011 -0700

    Fix bug in which end time was not properly in sync with start time + 30mins

commit 3c6bcfb2d962f3677082c468a29480d2a1813d73
Author: Zach Copley <zach@status.net>
Date:   Mon Aug 1 12:37:00 2011 -0700

    Pass exact URL of the timelist action to event.js

commit efc74841c5b588cdae686630a1b4c1448e5d742b
Author: Zach Copley <zach@status.net>
Date:   Mon Aug 1 11:20:45 2011 -0700

    Add Ajax error handling to new event action

commit 3085f4b3ed93bb930bff1bc475309b4d473ffc83
Author: Zach Copley <zach@status.net>
Date:   Fri Jul 22 01:18:13 2011 -0700

    Ajaxify event end-time selector

commit 8025c1d368d8f862b666702bfab08daf633a34ea
Author: Zach Copley <zach@status.net>
Date:   Thu Jul 21 21:58:43 2011 -0700

    Remove dead code

commit 5fbfff47297dea609a07d67a81d430f97f6698ef
Merge: bcd845d 3c926af
Author: Zach Copley <zach@status.net>
Date:   Thu Jul 21 15:21:58 2011 -0700

    Merge branch 'eventjs' of gitorious.org:~zcopley/statusnet/zcopleys-clone into eventjs

    * 'eventjs' of gitorious.org:~zcopley/statusnet/zcopleys-clone:
      Populate timei selection dropdowns and better CSS (thanks Sammy!)
      Event start/end as dropdowns
      Nothing to see here move along
      Don't allow user to set crazy start and end dates
      New event dates shouldn't ever be in the past, eh?
      Move event microapp JavaScript into included .js file

    Conflicts:
    	plugins/Event/event.js
    	plugins/Event/eventform.php

commit bcd845dc56c147c4ba10eedd43cc7aa799bc6a9a
Author: Zach Copley <zach@status.net>
Date:   Thu Jul 21 15:11:19 2011 -0700

    Move the helper functions for filling the start/end times to their own class

commit d246d39c4afbffb1e76cd561ab61f15dafd8a988
Author: Zach Copley <zach@status.net>
Date:   Wed Jul 20 18:50:38 2011 -0700

    Populate time selection dropdowns and better CSS (thanks Sammy!)

commit 0778533fef5500db79e40664c5b56aa7d9cc8357
Author: Zach Copley <zach@status.net>
Date:   Wed Jul 20 15:54:27 2011 -0700

    Event start/end as dropdowns

commit e800053fdf2cb12fc1f2eac72762d07571647aa8
Author: Zach Copley <zach@status.net>
Date:   Tue Jul 19 14:12:01 2011 -0700

    Nothing to see here move along

commit a85949b9cc4f3b5bb387785d4b7a717e9d952752
Author: Zach Copley <zach@status.net>
Date:   Mon Jul 18 17:48:30 2011 -0700

    Don't allow user to set crazy start and end dates

commit 87d1301ce8aa8877e753440dd52166bf857b29f3
Author: Zach Copley <zach@status.net>
Date:   Sun Jul 17 22:31:24 2011 -0700

    New event dates shouldn't ever be in the past, eh?

commit 7e05aa5fdc02bfec6107bcf8c748627216d51405
Author: Zach Copley <zach@status.net>
Date:   Fri Jul 15 15:36:17 2011 -0700

    Move event microapp JavaScript into included .js file

commit 3c926af287f80ee389b5bc8a4c1dcc5e0904a14c
Author: Zach Copley <zach@status.net>
Date:   Wed Jul 20 18:50:38 2011 -0700

    Populate time selection dropdowns and better CSS (thanks Sammy!)

commit af09c57d5132dba2a6a3e76974e38fdde6422c45
Author: Zach Copley <zach@status.net>
Date:   Wed Jul 20 15:54:27 2011 -0700

    Event start/end as dropdowns

commit b585215ed7deb4dc9d4bbc065d36b6e3f819d710
Author: Zach Copley <zach@status.net>
Date:   Tue Jul 19 14:12:01 2011 -0700

    Nothing to see here move along

commit e1d30ae9b80eded4ed7ef6bdd7515da64ae344de
Author: Zach Copley <zach@status.net>
Date:   Mon Jul 18 17:48:30 2011 -0700

    Don't allow user to set crazy start and end dates

commit ad7c99f021980b867f369066b4413bdb1e882986
Author: Zach Copley <zach@status.net>
Date:   Sun Jul 17 22:31:24 2011 -0700

    New event dates shouldn't ever be in the past, eh?

commit 4741f0a327e10e67fc04e2b816ed56351e38b4fa
Author: Zach Copley <zach@status.net>
Date:   Fri Jul 15 15:36:17 2011 -0700

    Move event microapp JavaScript into included .js file
parent b925eeec
......@@ -82,6 +82,7 @@ class EventPlugin extends MicroappPlugin
case 'CancelrsvpAction':
case 'ShoweventAction':
case 'ShowrsvpAction':
case 'TimelistAction':
include_once $dir . '/' . strtolower(mb_substr($cls, 0, -6)) . '.php';
return false;
case 'EventListItem':
......@@ -89,6 +90,7 @@ class EventPlugin extends MicroappPlugin
case 'EventForm':
case 'RSVPForm':
case 'CancelRSVPForm':
case 'EventTimeList':
include_once $dir . '/'.strtolower($cls).'.php';
break;
case 'Happening':
......@@ -121,6 +123,8 @@ class EventPlugin extends MicroappPlugin
$m->connect('rsvp/:id',
array('action' => 'showrsvp'),
array('id' => '[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}'));
$m->connect('main/event/updatetimes',
array('action' => 'timelist'));
return true;
}
......@@ -345,7 +349,7 @@ class EventPlugin extends MicroappPlugin
function onEndShowScripts($action)
{
$action->inlineScript('$(document).ready(function() { $("#event-startdate").datepicker(); $("#event-enddate").datepicker(); });');
$action->script($this->path('event.js'));
}
function onEndShowStyles($action)
......
......@@ -6,3 +6,11 @@
.event-title { margin-left: 0px; }
#content .event .entry-title { margin-left: 0px; }
#content .event .entry-content { margin-left: 0px; }
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
/* add padding to account for vertical scrollbar */
padding-right: 20px;
}
\ No newline at end of file
$(document).ready(function() {
var today = new Date();
$("#event-startdate").datepicker({
// Don't let the user set a crazy start date
minDate: today,
onClose: function(dateText, picker) {
// Don't let the user set a crazy end date
var newStartDate = new Date(dateText);
var endDate = new Date($("#event-startdate").val());
if (endDate < newStartDate) {
$("#event-enddate").val(dateText);
}
if (dateText !== null) {
$("#event-enddate").datepicker('option', 'minDate', new Date(dateText));
}
},
onSelect: function() {
var startd = $("#event-startdate").val();
var endd = $("#event-enddate").val();
var sdate = new Date(startd);
var edate = new Date(endd);
if (sdate !== edate) {
updateTimes();
}
}
});
$("#event-enddate").datepicker({
minDate: today,
onSelect: function() {
var startd = $("#event-startdate").val();
var endd = $("#event-enddate").val();
var sdate = new Date(startd);
var edate = new Date(endd);
if (sdate !== edate) {
updateTimes();
}
}
});
function updateTimes() {
var startd = $("#event-startdate").val();
var endd = $("#event-enddate").val();
var startt = $("#event-starttime option:selected").val();
var endt = $("#event-endtime option:selected").val();
var sdate = new Date(startd + " " + startt);
var edate = new Date(endd + " " + endt);
var duration = (startd === endd);
$.getJSON($('#timelist_action_url').val(),
{ start: startt, ajax: true, duration: duration },
function(data) {
var times = [];
$.each(data, function(key, val) {
times.push('<option value="' + key + '">' + val + '</option>');
});
$("#event-endtime").html(times.join(''));
if (startt < endt) {
$("#event-endtime").val(endt).attr("selected", "selected");
}
})
}
$("#event-starttime").change(function(e) {
updateTimes();
});
});
......@@ -84,6 +84,17 @@ class EventForm extends Form
function formData()
{
$this->out->elementStart('fieldset', array('id' => 'new_event_data'));
// Passing in the URL of the Ajax action that the .js for this form hits
// when selecting event start and end times. JavaScript will try to
// use a relative path, unless explicitely told where an action is,
// and that's a bit difficult to calculate since the event form is on
// so many pages with different paths. It might be worth solving this
// globally by putting the base site path in the Identifier-URL meta tag
// or something similar, so it would be easy to calculate the exact path
// for actions and other things in JavaScripts. -z
$this->out->hidden('timelist_action_url', common_local_url('timelist'));
$this->out->elementStart('ul', 'form_data');
$this->li();
......@@ -97,49 +108,71 @@ class EventForm extends Form
$this->unli();
$this->li();
$today = new DateTime('today');
$today->setTimezone(new DateTimeZone(common_timezone()));
$this->out->input('event-startdate',
// TRANS: Field label on event form.
_m('LABEL','Start date'),
null,
$today->format('m/d/Y'),
// TRANS: Field title on event form.
_m('Date the event starts.'),
'startdate');
$this->unli();
$this->li();
$this->out->input('event-starttime',
// TRANS: Field label on event form.
_m('LABEL','Start time'),
null,
// TRANS: Field title on event form.
_m('Time the event starts.'),
'starttime');
$times = EventTimeList::getTimes();
$this->out->dropdown(
'event-starttime',
// TRANS: Field label on event form.
_m('LABEL','Start time'),
$times,
// TRANS: Field title on event form.
_m('Time the event starts.'),
false,
null
);
$this->unli();
$this->li();
$this->out->input('event-enddate',
// TRANS: Field label on event form.
_m('LABEL','End date'),
null,
$today->format('m/d/Y'),
// TRANS: Field title on event form.
_m('Date the event ends.'),
'enddate');
$this->unli();
$this->li();
$this->out->input('event-endtime',
// TRANS: Field label on event form.
_m('LABEL','End time'),
null,
// TRANS: Field title on event form.
_m('Time the event ends.'),
'endtime');
// XXX: Initial end time should be at least 30 mins out? We could do
// every 15 minute instead -z
$keys = array_keys($times);
$endStr = date('m/d/y', strtotime('now')) . " {$keys[0]}";
$end = new DateTime($endStr);
$end->modify('+30');
$this->out->dropdown(
'event-endtime',
// TRANS: Field label on event form.
_m('LABEL','End time'),
EventTimeList::getTimes($end->format('c'), true),
// TRANS: Field title on event form.
_m('Time the event ends.'),
false,
null
);
$this->unli();
$this->li();
$this->out->input('event-location',
// TRANS: Field label on event form.
_m('LABEL','Location'),
_m('LABEL','Where?'),
null,
// TRANS: Field title on event form.
_m('Event location.'),
......
......@@ -83,13 +83,33 @@ class EventListItem extends NoticeListItemAdapter
$out->elementEnd('h3'); // VEVENT/H3 OUT
$startDate = strftime("%x", strtotime($event->start_time));
$startTime = strftime("%R", strtotime($event->start_time));
$now = new DateTime();
$startDate = new DateTime($event->start_time);
$endDate = new DateTime($event->end_time);
$userTz = new DateTimeZone(common_timezone());
$endDate = strftime("%x", strtotime($event->end_time));
$endTime = strftime("%R", strtotime($event->end_time));
// Localize the time for the observer
$now->setTimeZone($userTz);
$startDate->setTimezone($userTz);
$endDate->setTimezone($userTz);
// FIXME: better dates
$thisYear = $now->format('Y');
$startYear = $startDate->format('Y');
$endYear = $endDate->format('Y');
$dateFmt = 'D, F j, '; // e.g.: Mon, Aug 31
if ($startYear != $thisYear || $endYear != $thisYear) {
$dateFmt .= 'Y,'; // append year if we need to think about years
}
$startDateStr = $startDate->format($dateFmt);
$endDateStr = $endDate->format($dateFmt);
$timeFmt = 'g:ia';
$startTimeStr = $startDate->format($timeFmt);
$endTimeStr = $endDate->format("{$timeFmt} (T)");
$out->elementStart('div', 'event-times'); // VEVENT/EVENT-TIMES IN
......@@ -98,16 +118,16 @@ class EventListItem extends NoticeListItemAdapter
$out->element('abbr', array('class' => 'dtstart',
'title' => common_date_iso8601($event->start_time)),
$startDate . ' ' . $startTime);
$out->text(' - ');
if ($startDate == $endDate) {
$startDateStr . ' ' . $startTimeStr);
$out->text(' ');
if ($startDateStr == $endDateStr) {
$out->element('span', array('class' => 'dtend',
'title' => common_date_iso8601($event->end_time)),
$endTime);
$endTimeStr);
} else {
$out->element('span', array('class' => 'dtend',
'title' => common_date_iso8601($event->end_time)),
$endDate . ' ' . $endTime);
$endDateStr . ' ' . $endTimeStr);
}
$out->elementEnd('div'); // VEVENT/EVENT-TIMES OUT
......
<?php
/**
* Helper class for calculating and displaying event times
*
* PHP version 5
*
* @category Data
* @package StatusNet
* @author Zach Copley <zach@status.net>
* @license http://www.fsf.org/licensing/licenses/agpl.html AGPLv3
* @link http://status.net/
*
* StatusNet - the distributed open-source microblogging tool
* Copyright (C) 2011, StatusNet, Inc.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/**
* Class to get fancy times for the dropdowns on the new event form
*/
class EventTimeList {
/**
* Round up to the nearest half hour
*
* @param string $time the time to round (date/time string)
* @return DateTime the rounded time
*/
public static function nearestHalfHour($time)
{
$start = strtotime($time);
$minutes = date('i', $start);
$hour = date('H', $start);
if ($minutes >= 30) {
$minutes = '00';
$hour++;
} else {
$minutes = '30';
}
$newTimeStr = date('m/d/y', $start) . " {$hour}:{$minutes}:00";
return new DateTime($newTimeStr);
}
/**
* Output a list of times in half-hour intervals
*
* @param string $start Time to start with (date/time string)
* @param boolean $duration Whether to include the duration of the event
* (from the start)
* @return array $times (UTC time string => localized time string)
*/
public static function getTimes($start = 'now', $duration = false)
{
$newTime = self::nearestHalfHour($start);
$newTime->setTimezone(new DateTimeZone(common_timezone()));
$times = array();
$len = 0;
for ($i = 0; $i < 48; $i++) {
// make sure we store the time as UTC
$newTime->setTimezone(new DateTimeZone('UTC'));
$utcTime = $newTime->format('H:i:s');
// localize time for user
$newTime->setTimezone(new DateTimeZone(common_timezone()));
$localTime = $newTime->format('g:ia');
// pretty up the end-time option list a bit
if ($duration) {
$len += 30;
$hours = $len / 60;
// for i18n
$hourStr = _m('hour');
$hoursStr = _m('hrs');
$minStr = _m('mins');
switch ($hours) {
case 0:
$total = " (0 {$minStr})";
break;
case .5:
$total = " (30 {$minStr})";
break;
case 1:
$total = " (1 {$hourStr})";
break;
default:
$total = " ({$hours} " . $hoursStr . ')';
break;
}
$localTime .= $total;
}
$times[$utcTime] = $localTime;
$newTime->modify('+30min'); // 30 min intervals
}
return $times;
}
}
......@@ -52,8 +52,8 @@ class NeweventAction extends Action
protected $title = null;
protected $location = null;
protected $description = null;
protected $startTime = null;
protected $endTime = null;
protected $startTime = null;
protected $endTime = null;
/**
* Returns the title of the action
......@@ -89,67 +89,78 @@ class NeweventAction extends Action
$this->checkSessionToken();
}
$this->title = $this->trimmed('title');
try {
if (empty($this->title)) {
// TRANS: Client exception thrown when trying to post an event without providing a title.
throw new ClientException(_m('Title required.'));
}
$this->title = $this->trimmed('title');
$this->location = $this->trimmed('location');
$this->url = $this->trimmed('url');
$this->description = $this->trimmed('description');
if (empty($this->title)) {
// TRANS: Client exception thrown when trying to post an event without providing a title.
throw new ClientException(_m('Title required.'));
}
$startDate = $this->trimmed('startdate');
$this->location = $this->trimmed('location');
$this->url = $this->trimmed('url');
$this->description = $this->trimmed('description');
if (empty($startDate)) {
// TRANS: Client exception thrown when trying to post an event without providing a start date.
throw new ClientException(_m('Start date required.'));
}
$startDate = $this->trimmed('startdate');
$startTime = $this->trimmed('starttime');
if (empty($startDate)) {
// TRANS: Client exception thrown when trying to post an event without providing a start date.
throw new ClientException(_m('Start date required.'));
}
if (empty($startTime)) {
$startTime = '00:00';
}
$startTime = $this->trimmed('event-starttime');
$endDate = $this->trimmed('enddate');
if (empty($startTime)) {
$startTime = '00:00';
}
if (empty($endDate)) {
// TRANS: Client exception thrown when trying to post an event without providing an end date.
throw new ClientException(_m('End date required.'));
}
$endDate = $this->trimmed('enddate');
$endTime = $this->trimmed('endtime');
if (empty($endDate)) {
// TRANS: Client exception thrown when trying to post an event without providing an end date.
throw new ClientException(_m('End date required.'));
}
if (empty($endTime)) {
$endTime = '00:00';
}
$endTime = $this->trimmed('event-endtime');
$start = $startDate . ' ' . $startTime;
if (empty($endTime)) {
$endTime = '00:00';
}
common_debug("Event start: '$start'");
$start = $startDate . ' ' . $startTime;
$end = $endDate . ' ' . $endTime;
common_debug("Event start: '$start'");
common_debug("Event start: '$end'");
$end = $endDate . ' ' . $endTime;
$this->startTime = strtotime($start);
$this->endTime = strtotime($end);
common_debug("Event start: '$end'");
if ($this->startTime == 0) {
// TRANS: Client exception thrown when trying to post an event with a date that cannot be processed.
// TRANS: %s is the data that could not be processed.
throw new Exception(sprintf(_m('Could not parse date "%s".'),
$start));
}
$this->startTime = strtotime($start);
$this->endTime = strtotime($end);
if ($this->startTime == 0) {
// TRANS: Client exception thrown when trying to post an event with a date that cannot be processed.
// TRANS: %s is the data that could not be processed.
throw new ClientException(sprintf(_m('Could not parse date "%s".'),
$start));
}
if ($this->endTime == 0) {
// TRANS: Client exception thrown when trying to post an event with a date that cannot be processed.
// TRANS: %s is the data that could not be processed.
throw new Exception(sprintf(_m('Could not parse date "%s".'),
$end));
if ($this->endTime == 0) {
// TRANS: Client exception thrown when trying to post an event with a date that cannot be processed.
// TRANS: %s is the data that could not be processed.
throw new ClientException(sprintf(_m('Could not parse date "%s".'),
$end));
}
} catch (ClientException $ce) {
if ($this->boolean('ajax')) {
$this->outputAjaxError($ce->getMessage());
return false;
} else {
$this->error = $ce->getMessage();
$this->showPage();
return false;
}
}
return true;
......@@ -220,9 +231,13 @@ class NeweventAction extends Action
RSVP::saveNew($profile, $event, RSVP::POSITIVE);
} catch (ClientException $ce) {
$this->error = $ce->getMessage();
$this->showPage();
return;
if ($this->boolean('ajax')) {
$this->outputAjaxError($ce->getMessage());
} else {
$this->error = $ce->getMessage();
$this->showPage();
return;
}
}
if ($this->boolean('ajax')) {
......@@ -242,6 +257,23 @@ class NeweventAction extends Action
}
}
// @todo factor this out into a base class
function outputAjaxError($msg)
{
header('Content-Type: text/xml;charset=utf-8');
$this->xw->startDocument('1.0', 'UTF-8');
$this->elementStart('html');
$this->elementStart('head');
// TRANS: Page title after an AJAX error occurs
$this->element('title', null, _('Ajax Error'));
$this->elementEnd('head');
$this->elementStart('body');
$this->element('p', array('id' => 'error'), $msg);
$this->elementEnd('body');
$this->elementEnd('html');
return;
}
/**
* Show the event form
*
......
<?php
/**
* StatusNet - the distributed open-source microblogging tool
* Copyright (C) 2011, StatusNet, Inc.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
* @category Event
* @package StatusNet
* @author Zach Copley <zach@status.net>
* @copyright 2011 StatusNet, Inc.
* @license http://www.fsf.org/licensing/licenses/agpl-3.0.html AGPL 3.0
* @link http://status.net/
*/
if (!defined('STATUSNET')) {
exit(1);
}
/**
* Callback handler to populate end time dropdown
*/
class TimelistAction extends Action {
private $start;
private $duration;
/**
* Get ready
*
* @param array $args misc. arguments
*
* @return boolean true
*/
function prepare($args) {
parent::prepare($args);
$this->start = $this->arg('start');
$this->duration = $this->boolean('duration', false);
return true;
}
/**
* Handle input and ouput something
*
* @param array $args $_REQUEST arguments
*
* @return void
*/
function handle($args)
{
parent::handle($args);
if (!common_logged_in()) {
// TRANS: Error message displayed when trying to perform an action that requires a logged in user.
$this->clientError(_('Not logged in.'));
return;
}
if (!empty($this->start)) {
$times = EventTimeList::getTimes($this->start, $this->duration);
} else {
$this->clientError(_m('Unexpected form submission.'));
return;
}
if ($this->boolean('ajax')) {
header('Content-Type: application/json; charset=utf-8');
print json_encode($times);
} else {
$this->clientError(_m('This action is AJAX only.'));
}
}
/**
* Override the regular error handler to show something more
* ajaxy
*
* @param string $msg error message
* @param int $code error code
*/
function clientError($msg, $code = 400) {
if ($this->boolean('ajax')) {
header('Content-Type: application/json; charset=utf-8');
print json_encode(
array(
'success' => false,