<!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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js" type="text/javascript"></script>
<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() {
//initialize first day to active
$('.tabs').find("li").first().addClass("active");
$('.schedule_content').find('.schedule_item').first().addClass("active");
$('.tabs li').click(function(){
//var tab_id = $(this).attr('data-tab');
var tab_id = "day-"+$(this).find('span').text();
$('.tabs li').removeClass('active');
$('.schedule_item').removeClass('active');
$(this).addClass('active');
$("#"+tab_id).addClass('active');
});
});
String.prototype.paddingLeft = function(paddingValue) {
return String(paddingValue + this).slice(-paddingValue.length);
};
var schedule_data = <?php echo $this->schedule_data; ?>;
var app = angular.module('scheduleWidget', []);
app.controller('scheduleController', ['$scope', '$window', function($scope, $window) {
// 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.
// NOTE: we have to multiply the timestamp by 1000 because in PHP
// the timestamps are in seconds and are in milliseconds in javascript.
var start_date = new Date(value.starts_timestamp*1000);
var end_date = new Date(value.ends_timestamp*1000);
// 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.toLocaleTimeString([], { hour: 'numeric', minute : 'numeric' }),
"show_end_hour": end_date.toLocaleTimeString([], { hour: 'numeric', minute : 'numeric' }),
"name": value.name
});
}
});
// Convert the object into an array to maintain the same order when we
// iterate over each weekday
$scope.weekDays = $.map($window.schedule_data["weekDays"], function(value, index) {
return [value];
});
$scope.isEmpty = function(obj) {
return obj.length == 0;
};
}]);
</script>
</head>
<body ng-app="scheduleWidget" ng-controller="scheduleController">
<div class="schedule tab_content current">
<ul class="tabs">
<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 weekDays track by $index" ng-attr-id="{{'day-' + x.dayOfMonth}}" class="schedule_item">
<div ng-if="isEmpty(x.shows)" class="row empty-schedule"><?php echo _('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>
<div class="name_grid">{{show.name}}</div>
</div>
</div>
</div>
<div class="weekly-schedule-widget-footer" <?php if ($this->widgetStyle == "premium") echo "style='display:none'"; ?>>
<a href="<?php echo PRODUCT_SITE_URL; ?>" target="_blank"><?php printf(_('Powered by %s'), PRODUCT_NAME); ?></a>
</div>
</div>
</body>
</html>