SAAS-870: Schedule widget displays shows in wrong timezone
Timezone conversion done in frontend
This commit is contained in:
drigato
parent
0a4651f752
commit
6db75550cc
5 changed files with 84 additions and 128 deletions
|
|
@ -57,88 +57,83 @@ class WidgetHelper
|
|||
return $result;
|
||||
}
|
||||
|
||||
// Second version of this function.
|
||||
// Removing "next" days and creating two weekly arrays
|
||||
public static function getWeekInfoV2($timezone)
|
||||
/**
|
||||
* Returns a weeks worth of shows in UTC, and an info array of the current week's days.
|
||||
* Returns an array of two arrays:
|
||||
*
|
||||
* The first array is 7 consecutive week days, starting with the current day.
|
||||
*
|
||||
* The second array contains shows scheduled during the 7 week days in the first array.
|
||||
* The shows returned in this array are not in any order and are in UTC.
|
||||
*
|
||||
* We don't do any timezone conversion in this function on purpose. All timezone conversion
|
||||
* and show time ordering should be done on the frontend.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public static function getWeekInfoV2()
|
||||
{
|
||||
$weekStartDateTime = new DateTime("now", new DateTimeZone(Application_Model_Preference::GetTimezone()));
|
||||
|
||||
//$maxNumOFWeeks = 2;
|
||||
|
||||
$result = array();
|
||||
|
||||
// default to the station timezone
|
||||
$timezone = Application_Model_Preference::GetDefaultTimezone();
|
||||
$userDefinedTimezone = strtolower($timezone);
|
||||
// if the timezone defined by the user exists, use that
|
||||
if (array_key_exists($userDefinedTimezone, timezone_abbreviations_list())) {
|
||||
$timezone = $userDefinedTimezone;
|
||||
}
|
||||
$utcTimezone = new DateTimeZone("UTC");
|
||||
|
||||
$weekStartDateTime->setTimezone($utcTimezone);
|
||||
|
||||
// When querying for shows we need the start and end date range to have
|
||||
// a time of "00:00". $utcDayStart is used below when querying for shows.
|
||||
$utcDayStartDT = clone $weekStartDateTime;
|
||||
$utcDayStartDT->setTime(0, 0, 0);
|
||||
// Use this variable as the start date/time range when querying
|
||||
// for shows. We set it to 1 day prior to the beginning of the
|
||||
// schedule widget data to account for show date changes when
|
||||
// converting their start day/time to the client's local timezone.
|
||||
$showQueryDateRangeStart = clone $weekStartDateTime;
|
||||
$showQueryDateRangeStart->sub(new DateInterval("P1D"));
|
||||
$showQueryDateRangeStart->setTime(0, 0, 0);
|
||||
|
||||
$utcDayStart = $utcDayStartDT->format("Y-m-d H:i:s");
|
||||
//$weekCounter = 0;
|
||||
//while ($weekCounter < $maxNumOFWeeks) {
|
||||
|
||||
Logging::info($utcDayStart);
|
||||
for ($dayOfWeekCounter = 0; $dayOfWeekCounter < DAYS_PER_WEEK; $dayOfWeekCounter++) {
|
||||
$dateParse = date_parse($weekStartDateTime->format("Y-m-d H:i:s"));
|
||||
|
||||
$result["scheduleData"][$weekStartDateTime->getTimestamp()] = array();
|
||||
$result["scheduleData"][$weekStartDateTime->getTimestamp()]["dayOfMonth"] = $dateParse["day"];
|
||||
$result["scheduleData"][$weekStartDateTime->getTimestamp()]["dayOfWeek"] = strtoupper(date("D", $weekStartDateTime->getTimestamp()));
|
||||
// Associate data to its date so that when we convert this array
|
||||
// to json the order remains the same - in chronological order.
|
||||
// We also format the key to be for example: "2015-6-1" to match
|
||||
// javascript date formats so it's easier to sort the shows by day.
|
||||
$result["weekDays"][$weekStartDateTime->format("Y-n-j")] = array();
|
||||
$result["weekDays"][$weekStartDateTime->format("Y-n-j")]["dayOfMonth"] = $dateParse["day"];
|
||||
$result["weekDays"][$weekStartDateTime->format("Y-n-j")]["dayOfWeek"] = strtoupper(date("D", $weekStartDateTime->getTimestamp()));
|
||||
|
||||
// Shows scheduled for this day will get added to this array when
|
||||
// we convert the show times to the client's local timezone in weekly-program.phtml
|
||||
$result["weekDays"][$weekStartDateTime->format("Y-n-j")]["shows"] = array();
|
||||
|
||||
// $weekStartDateTime has to be in station timezone when adding 1 day for daylight savings.
|
||||
// TODO: is this necessary since we set the time to "00:00" ?
|
||||
$stationTimezone = Application_Model_Preference::GetDefaultTimezone();
|
||||
$weekStartDateTime->setTimezone(new DateTimeZone($stationTimezone));
|
||||
|
||||
//have to be in station timezone when adding 1 day for daylight savings.
|
||||
$weekStartDateTime->setTimezone(new DateTimeZone($timezone));
|
||||
$weekStartDateTime->add(new DateInterval('P1D'));
|
||||
|
||||
//convert back to UTC to get the actual timestamp used for search.
|
||||
$weekStartDateTime->setTimezone($utcTimezone);
|
||||
}
|
||||
Logging::info($weekStartDateTime->format("Y-m-d H:i:s"));
|
||||
|
||||
// When querying for shows we need the start and end date range to have
|
||||
// a time of "00:00".
|
||||
/*$utcDayEndDT = clone $weekStartDateTime;
|
||||
$utcDayEndDT->setTime(0, 0, 0);
|
||||
$utcDayEnd = $utcDayEndDT->format("Y-m-d H:i:s");
|
||||
$shows = Application_Model_Show::getNextShows($utcDayStart, "ALL", $utcDayEnd);
|
||||
$utcDayStart = $utcDayEnd;
|
||||
// Use this variable as the end date/time range when querying
|
||||
// for shows. We set it to 1 day after the end of the schedule
|
||||
// widget data to account for show date changes when converting
|
||||
// their start day/time to the client's local timezone.
|
||||
$showQueryDateRangeEnd = clone $weekStartDateTime;
|
||||
$showQueryDateRangeEnd->setTime(23, 59, 0);
|
||||
|
||||
// convert to user-defined timezone, or default to station
|
||||
/*Application_Common_DateHelper::convertTimestampsToTimezone(
|
||||
$shows,
|
||||
array("starts", "ends", "start_timestamp", "end_timestamp"),
|
||||
$timezone
|
||||
);*/
|
||||
|
||||
|
||||
/*foreach($shows as &$show) {
|
||||
$startParseDate = date_parse($show['starts']);
|
||||
$show["show_start_hour"] = str_pad($startParseDate["hour"], 2, "0", STR_PAD_LEFT).":".str_pad($startParseDate["minute"], 2, 0, STR_PAD_LEFT);
|
||||
|
||||
$endParseDate = date_parse($show['ends']);
|
||||
$show["show_end_hour"] = str_pad($endParseDate["hour"], 2, 0, STR_PAD_LEFT).":".str_pad($endParseDate["minute"],2, 0, STR_PAD_LEFT);
|
||||
}
|
||||
//$result[$weekCounter][$dayOfWeekCounter]["shows"] = $shows;
|
||||
array_push($result, $shows);*/
|
||||
|
||||
//}
|
||||
//$weekCounter += 1;
|
||||
//}
|
||||
$shows = Application_Model_Show::getNextShows(
|
||||
$showQueryDateRangeStart->format("Y-m-d H:i:s"),
|
||||
"ALL",
|
||||
$showQueryDateRangeEnd->format("Y-m-d H:i:s"));
|
||||
|
||||
$result["shows"] = $shows;
|
||||
|
||||
// XSS exploit prevention
|
||||
SecurityHelper::htmlescape_recursive($result);
|
||||
|
||||
// convert image paths to point to api endpoints
|
||||
//TODO: do we need this here?
|
||||
self::findAndConvertPaths($result);
|
||||
|
||||
return $result;
|
||||
|
|
|
|||
|
|
@ -84,7 +84,6 @@ class EmbedController extends Zend_Controller_Action
|
|||
|
||||
$request = $this->getRequest();
|
||||
|
||||
|
||||
$widgetStyle = $request->getParam('style');
|
||||
if ($widgetStyle == "premium") {
|
||||
$this->view->widgetStyle = "premium";
|
||||
|
|
@ -95,11 +94,9 @@ class EmbedController extends Zend_Controller_Action
|
|||
}
|
||||
$this->view->jquery = Application_Common_HTTPHelper::getStationUrl() . "widgets/js/jquery-1.6.1.min.js?".$CC_CONFIG['airtime_version'];
|
||||
|
||||
$weeklyScheduleData = WidgetHelper::getWeekInfoV2($this->getRequest()->getParam("timezone"));
|
||||
$weeklyScheduleData = WidgetHelper::getWeekInfoV2();
|
||||
|
||||
// Return only the current week's schedule data. In the future we may use the next week's data.
|
||||
$this->view->schedule_data = json_encode($weeklyScheduleData);
|
||||
$this->view->weeklyScheduleData = $weeklyScheduleData;
|
||||
|
||||
$currentDay = new DateTime("now", new DateTimeZone(Application_Model_Preference::GetTimezone()));
|
||||
//day of the month without leading zeros (1 to 31)
|
||||
|
|
|
|||
|
|
@ -25,13 +25,41 @@
|
|||
});
|
||||
});
|
||||
|
||||
String.prototype.paddingLeft = function(paddingValue) {
|
||||
return String(paddingValue + this).slice(-paddingValue.length);
|
||||
};
|
||||
|
||||
var schedule_data = <?php echo $this->schedule_data; ?>;
|
||||
console.log(schedule_data);
|
||||
|
||||
var app = angular.module('scheduleWidget', []);
|
||||
app.controller('scheduleController', ['$scope', '$window', function($scope, $window) {
|
||||
$scope.schedule_data = $window.schedule_data["scheduleData"];
|
||||
|
||||
// Loop through every show and assign it to the corresponding day of the week's
|
||||
// show array.
|
||||
angular.forEach($window.schedule_data["shows"], function(value, key) {
|
||||
|
||||
// First we have to create a Date object out of the show time in UTC.
|
||||
// Then we can format the string in the client's local timezone.
|
||||
var start_date = new Date(value.starts + " UTC");
|
||||
var end_date = new Date(value.ends + " UTC");
|
||||
|
||||
// This variable is used to identify which schedule_data object (which day of the week)
|
||||
// we should assign the show to.
|
||||
// NOTE: we have to add 1 to the month because javascript's Date.getMonth()
|
||||
// function returns the month number starting with an index of 0. In PHP,
|
||||
// the months are indexed starting at 1.
|
||||
var format_start_date = start_date.getFullYear() + "-" + (start_date.getMonth()+1) + "-" + start_date.getDate();
|
||||
|
||||
if ($window.schedule_data["weekDays"][format_start_date] !== undefined) {
|
||||
$window.schedule_data["weekDays"][format_start_date]["shows"].push(
|
||||
{
|
||||
"show_start_hour": start_date.getHours().toString().paddingLeft("00")+":"+ start_date.getMinutes().toString().paddingLeft("00"),
|
||||
"show_end_hour": end_date.getHours().toString().paddingLeft("00")+":"+ end_date.getMinutes().toString().paddingLeft("00"),
|
||||
"name": value.name
|
||||
});
|
||||
}
|
||||
});
|
||||
$scope.weekDays = $window.schedule_data["weekDays"];
|
||||
|
||||
$scope.isEmpty = function(obj) {
|
||||
return obj.length == 0;
|
||||
|
|
@ -43,13 +71,13 @@
|
|||
<body ng-app="scheduleWidget" ng-controller="scheduleController">
|
||||
<div class="schedule tab_content current">
|
||||
<ul class="tabs">
|
||||
<li ng-repeat="x in schedule_data track by $index">
|
||||
<li ng-repeat="x in weekDays track by $index">
|
||||
{{x.dayOfWeek}}<span>{{x.dayOfMonth}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="schedule_content">
|
||||
<div ng-repeat="x in schedule_data track by $index" ng-attr-id="{{'day-' + x.dayOfMonth}}" class="schedule_item">
|
||||
<div ng-repeat="x in weekDays track by $index" ng-attr-id="{{'day-' + x.dayOfMonth}}" class="schedule_item">
|
||||
<div ng-if="isEmpty(x.shows)" class="row empty-schedule">Looks like there are no shows scheduled on this day.</div>
|
||||
<div ng-repeat="show in x.shows" class="row">
|
||||
<div class="time_grid">{{show.show_start_hour}} - {{show.show_end_hour}}</div>
|
||||
|
|
|
|||
|
|
@ -1,64 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="<?php echo $this->css?>" type="text/css">
|
||||
<script src="<?php echo $this->jquery ?>" type="text/javascript"></script>
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.tabs li').click(function(){
|
||||
var tab_id = $(this).attr('data-tab');
|
||||
|
||||
$('.tabs li').removeClass('active');
|
||||
$('.schedule_item').removeClass('active');
|
||||
|
||||
$(this).addClass('active');
|
||||
$("#"+tab_id).addClass('active');
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="schedule tab_content current">
|
||||
<ul class="tabs">
|
||||
<?php
|
||||
foreach($this->weeklyScheduleData as $day => $data) {
|
||||
$activeClass = $this->currentDayOfMonth == $data["dayOfMonth"] ? "active" : "";
|
||||
echo "<li class='".$activeClass."' data-tab='day-".$data["dayOfMonth"]."'>" . $data["dayOfWeek"] . "<span>" . $data["dayOfMonth"] . "</span></li>";
|
||||
}?>
|
||||
</ul>
|
||||
|
||||
<div class="schedule_content">
|
||||
<?php
|
||||
foreach($this->weeklyScheduleData as $day => $data) {
|
||||
$activeClass = $this->currentDayOfMonth == $data["dayOfMonth"] ? "active" : "";
|
||||
|
||||
echo "<div id='day-".$data["dayOfMonth"]."' class='schedule_item ".$activeClass."'>";
|
||||
if (count($data["shows"]) == 0) {
|
||||
echo "<div class='row empty-schedule'>Looks like there are no shows scheduled on this day.</div>";
|
||||
} else {
|
||||
foreach ($data["shows"] as $show => $showData) {
|
||||
echo "<div class='row'>";
|
||||
echo "<div class='time_grid'>" . $showData["show_start_hour"] . ' - ' . $showData["show_end_hour"] . "</div>";
|
||||
echo "<div class='name_grid'>" . $showData["name"] . "</div>";
|
||||
echo "</div>";
|
||||
}
|
||||
}
|
||||
echo "</div>";
|
||||
}?>
|
||||
</div>
|
||||
|
||||
<div class="weekly-schedule-widget-footer" <?php if ($this->widgetStyle == "premium") echo "style='display:none'"; ?>>
|
||||
<a href="https://airtime.pro" target="_blank">Powered by <span>Airtime Pro</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
|
@ -186,7 +186,7 @@ background: rgba(53, 53, 53, 1.0);
|
|||
}
|
||||
|
||||
.schedule_item div.name_grid {
|
||||
width: 72%;
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue