SAAS-813: Wire up schedule widget on Radio Page

This commit is contained in:
drigato 2015-05-27 13:50:25 -04:00
parent a569387c5a
commit 27868fbfe5
6 changed files with 154 additions and 227 deletions

View File

@ -88,14 +88,16 @@ class EmbedController extends Zend_Controller_Action
$CC_CONFIG = Config::getConfig();
$this->view->css = Application_Common_HTTPHelper::getStationUrl() . "/css/schedule-widget.css?".$CC_CONFIG['airtime_version'];
$this->view->css = Application_Common_HTTPHelper::getStationUrl() . "/css/radio-page/weekly-schedule-widget.css?".$CC_CONFIG['airtime_version'];
$this->view->jquery = Application_Common_HTTPHelper::getStationUrl() . "widgets/js/jquery-1.6.1.min.js?".$CC_CONFIG['airtime_version'];
$this->view->jquery_custom = Application_Common_HTTPHelper::getStationUrl() . "widgets/js/jquery-ui-1.8.10.custom.min.js?".$CC_CONFIG['airtime_version'];
//$this->view->widget_js = Application_Common_HTTPHelper::getStationUrl() . "widgets/js/jquery.showinfo.js?".$CC_CONFIG['airtime_version'];
$result = WidgetHelper::getWeekInfoV2($this->getRequest()->getParam("timezone"));
//Logging::info($result);
$this->view->scheduleDataWeek1 = $result[0];
$this->view->scheduleDataWeek2 = $result[1];
$currentDay = new DateTime("now", new DateTimeZone(Application_Model_Preference::GetTimezone()));
//day of the month without leading zeros (1 to 31)
$this->view->currentDayOfMonth = $currentDay->format("j");
}
}

View File

@ -13,6 +13,8 @@ class IndexController extends Zend_Controller_Action
$CC_CONFIG = Config::getConfig();
$baseUrl = Application_Common_OsPath::getBaseDir();
$this->view->headLink()->appendStylesheet($baseUrl.'css/radio-page/radio-page.css?'.$CC_CONFIG['airtime_version']);
$this->view->headLink()->appendStylesheet($baseUrl.'css/radio-page/weekly-schedule-widget.css?'.$CC_CONFIG['airtime_version']);
$this->_helper->layout->setLayout('radio-page');
$this->view->stationLogo = Application_Model_Preference::GetStationLogo();
@ -24,6 +26,8 @@ class IndexController extends Zend_Controller_Action
$stationDescription = Application_Model_Preference::GetStationDescription();
$stationDescription = empty($stationDescription) ? "Station Description" : $stationDescription;
$this->view->stationDescription = $stationDescription;
$this->view->stationUrl = Application_Common_HTTPHelper::getStationUrl();
}
public function mainAction()

View File

@ -8,98 +8,48 @@
<script src="<?php echo $this->widget_js ?>" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
/*var data = <?php //echo $this->scheduleData ?>;
console.log(data);*/
/*$("#scheduleTabs").airtimeWeekSchedule({
sourceDomain:"http://localhost",
dowText:{monday:"Monday", tuesday:"Tuesday", wednesday:"Wednesday", thursday:"Thursday", friday:"Friday", saturday:"Saturday", sunday:"Sunday", nextmonday:"Next Monday", nexttuesday:"Next Tuesday",nextwednesday:"Next Wednesday", nextthursday:"Next Thursday",nextfriday:"Next Friday", nextsaturday:"Next Saturday", nextsunday:"NextSunday"},
miscText:{time:"Time", programName:"Program Name", details:"Details", readMore:"Read More"},
updatePeriod: 600 //seconds
});*/
var d = new Date().getDay();
$('#scheduleTabs.scheduleTabsWeek1').tabs({selected: d === 0 ? 6 : d-1, fx: { opacity: 'toggle' }});
$('#scheduleTabs.scheduleTabsWeek2').tabs({selected: d === 0 ? 6 : d-1, fx: { opacity: 'toggle' }});
$('.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('.scheduleWidgetToggle').click(function() {
$('#scheduleTabs.scheduleTabsWeek1').toggle();
$('#scheduleTabs.scheduleTabsWeek2').toggle();
$('.tabs li').removeClass('active');
$('.schedule_item').removeClass('active');
$(this).addClass('active');
$("#"+tab_id).addClass('active');
});
});
</script>
</head>
<body>
<div id="scheduleTabs" class="ui-tabs embedScheduleWidget scheduleTabsWeek1">
<ul>
<div class="schedule tab_content current">
<ul class="tabs">
<?php
Logging::info($this->scheduleDataWeek1);
foreach($this->scheduleDataWeek1 as $day => $data) {
echo "<li><a href='#" . $day . "'><span class='day-of-week'>".$data["dayOfWeek"]."</span><span class='day-of-month'>" .$data["dayOfMonth"]."</span></a></li>";
} ?>
<!--<li><a class="scheduleWidgetToggle" href="#">Next Week</a></li>-->
$activeClass = $this->currentDayOfMonth == $data["dayOfMonth"] ? "active" : "";
echo "<li class='".$activeClass."' data-tab='day-".$data["dayOfMonth"]."'>" . $data["dayOfWeek"] . "<span>" . $data["dayOfMonth"] . "</span></li>";
}?>
</ul>
<?php
foreach($this->scheduleDataWeek1 as $day => $data) {
echo "<div id='".$day."' class='ui-tabs-hide'>";
echo '<table class="widget widget now-playing-list">
<colgroup>
<col width="150" />
<col width="350" />
</colgroup>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
<tbody>';
foreach ($data["shows"] as $show => $data) {
echo '<tr>
<td>'.$data["show_start_hour"].' - '.$data["show_end_hour"].'</td>
<td><h4>'.$data["name"].'</h4></td>
</tr>';
}
echo '</tbody>
</table>';
echo "</div>";
} ?>
</div>
<div id="scheduleTabs" class="ui-tabs embedScheduleWidget scheduleTabsWeek2" style="display:none">
<ul>
<?php foreach($this->scheduleDataWeek2 as $day => $data) {
echo "<li><a href='#" . $day . "'>" . $data["dayOfWeek"] . "</a></li>";
} ?>
<li><a class="scheduleWidgetToggle" href="#">Previous Week</a></li>
</ul>
<?php foreach($this->scheduleDataWeek2 as $day => $data) {
echo "<div id='".$day."' class='ui-tabs-hide'>";
echo '<table class="widget widget now-playing-list">
<colgroup>
<col width="150" />
<col width="350" />
</colgroup>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
<tbody>';
foreach ($data["shows"] as $show => $data) {
echo '<tr>
<td>'.$data["show_start_hour"].' - '.$data["show_end_hour"].'</td>
<td><h4>'.$data["name"].'</h4></td>
</tr>';
}
echo '</tbody>
</table>';
echo "</div>";
} ?>
<div class="schedule_content">
<?php
foreach($this->scheduleDataWeek1 as $day => $data) {
$activeClass = $this->currentDayOfMonth == $data["dayOfMonth"] ? "active" : "";
echo"<div id='day-".$data["dayOfMonth"]."' class='schedule_item ".$activeClass."'>
<table class='widget widget now-playing-list'>
<colgroup><col width='110'><col width='350'><col width='240'></colgroup>
<thead></thead>
<tfoot><tr><td></td></tr></tfoot>
<tbody>";
foreach ($data["shows"] as $show => $showData) {
echo "<tr><td class='time_grid col_two'>".$showData["show_start_hour"].' - '.$showData["show_end_hour"]."</td>
<td class='name_grid'><h4>".$showData["name"]."</h4></td><td class='more_grid'></td></tr>";
}
echo "</tbody></table></div>";
}?>
</div>
</div>
</body>

View File

@ -8,39 +8,7 @@
} ?>
<div id="tab-1" class="schedule tab_content current">
<ul class="tabs">
<li class="active" data-tab="day-1">THU <span>30</span></li><li class="" data-tab="day-2">FRI <span>1</span></li><li class="" data-tab="day-3">SAT <span>2</span></li><li class="" data-tab="day-4">SUN <span>3</span></li><li class="" data-tab="day-5">MON <span>4</span></li><li class="" data-tab="day-6">TUE <span>5</span></li><li class="" data-tab="day-7">WED <span>6</span></li>
</ul>
<div class="schedule_content">
<div id="day-1" class="schedule_item active">
<table class="widget widget now-playing-list"><colgroup><col width="110"><col width="350"><col width="240"></colgroup><thead></thead><tfoot><tr><td></td></tr></tfoot><tbody><tr><td class="time_grid col_two">09:00 - 10:00</td><td class="name_grid"><h4>Ryerson's Ryecast</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">10:00 - 11:00</td><td class="name_grid"><h4>Endeavours</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">11:00 - 13:00</td><td class="name_grid"><h4>!earshot 20</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">13:00 - 14:00</td><td class="name_grid"><h4>Resonating Reconciliation</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">14:00 - 15:00</td><td class="name_grid"><h4>Documentary and Spoken Word</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">15:00 - 16:00</td><td class="name_grid"><h4>A Peek in the Music Library</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">16:00 - 17:00</td><td class="name_grid"><h4>A Peek in the Music Library</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">17:00 - 18:00</td><td class="name_grid"><h4>A Peek in the Music Library</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">18:00 - 19:00</td><td class="name_grid"><h4>The Star Spot</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">19:00 - 20:00</td><td class="name_grid"><h4>Song Talk</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">20:00 - 21:00</td><td class="name_grid"><h4>Metal On Metal</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">21:00 - 22:00</td><td class="name_grid"><h4>The B &amp; D Approach</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">22:00 - 00:00</td><td class="name_grid"><h4>Something Completely Different</h4></td><td class="more_grid"></td></tr></tbody></table>
</div>
<div id="day-2" class="schedule_item">
<p>Day 2</p>
</div>
<div id="day-3" class="schedule_item">
<p>Day 3</p>
</div>
<div id="day-4" class="schedule_item">
<p>Day 4</p>
</div>
<div id="day-5" class="schedule_item">
<p>Day 5</p>
</div>
<div id="day-6" class="schedule_item">
<p>Day 6</p>
</div>
<div id="day-7" class="schedule_item">
<p>Day 7</p>
</div>
</div>
<iframe id="schedule_iframe" scrolling="no" frameborder="0" src=<?php echo $this->stationUrl."embed/weekly-program"?>></iframe>
</div>
<div id="tab-2" class="about_us tab_content">
@ -57,31 +25,7 @@
</form>
</div>
<!--
<div class="bottom_bar">
<div class="play cont_btn">
</div>
<div class="on_air">
<p>Bob Marley
<span>Chant Down Babylon</span></p>
</div>
<div class="schedule_btn button current" data-tab="tab-1">
</div>
<div class="about_us_btn button" data-tab="tab-2">
</div>
<div class="login_btn button" data-tab="tab-3">
</div>
</div>
-->
<iframe id="player_iframe" frameborder="0" width="100%" style="bottom:0px; left:0px; position:fixed; right:0px;" src="http://localhost/embed/player?stream=s2&title=Staging1"></iframe>
<iframe id="player_iframe" frameborder="0" width="100%" style="bottom:0px; left:0px; position:fixed; right:0px;" src=<?php echo $this->stationUrl."embed/player?stream=auto&title=Staging1";?>></iframe>
</div>

View File

@ -26,13 +26,13 @@ body {
margin: 70px 0px 0px 60px;
}
.tab_content {
#schedule_iframe, .tab_content {
color: #fff;
text-align: center;
/*display: none;*/
visibility: hidden;
height: 100%;
width: 100%;
max-width: 740px;
max-width: 750px;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 140px;
@ -49,88 +49,6 @@ body {
visibility: visible;
}
.schedule .tabs {
list-style: none;
padding-left: 0px;
margin: 0px;
background: rgba(69, 155, 143, 0.8);
}
.schedule .tabs li {
width: 105px;
height: 80px;
display: inline-block;
font-size: 14px;
padding: 15px;
box-sizing: border-box;
cursor: pointer;
}
.schedule .tabs li span {
font-size: 30px;
display: block;
}
.schedule .tabs li.active {
background: #459B8F;
}
.schedule .tabs li.active:hover {
background: #459B8F;
}
.schedule .tabs li:hover {
background: rgba(69, 155, 143, 0.6)
}
.schedule_content {
background: rgba(0, 0, 0, 0.3);
max-height: 0px;
transition: max-height 2s ease;
/*transition-delay: 1s;*/
}
.schedule.current .schedule_content {
max-height: 2000px;
}
.schedule_content table {
opacity: 0;
/*transition: all 1s ease;*/
}
.schedule.current .schedule_content table {
opacity: 1;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.schedule_item {
display: none;
font-size: 17px;
text-align: left;
text-transform: uppercase;
padding: 30px 40px;
}
.schedule_item.active {
display: block;
}
.schedule_item .time_grid {
font-weight: 300;
color: #AAAAAA;
}
.schedule_item .name_grid {
padding-left: 30px;
}
.schedule_item h4 {
margin: 10px 0px;
font-weight: 400;
}
.about_us {
-webkit-transition-delay: 2s;
transition-delay: 2s;

View File

@ -0,0 +1,109 @@
body {
font-family: 'Roboto', sans-serif;
margin: 0px;
}
.tab_content {
color: #fff;
text-align: center;
/*display: none;*/
visibility: hidden;
width: 100%;
max-width: 740px;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 140px;
padding: 10px;
position: absolute;
left: 50%;
margin-left: -380px;
/* -webkit-transition-delay: 1s;
transition-delay: 1s;*/
}
.tab_content.current {
/*display: block;*/
visibility: visible;
}
.schedule .tabs {
list-style: none;
padding-left: 0px;
margin: 0px;
background: rgba(69, 155, 143, 0.8);
}
.schedule .tabs li {
width: 105px;
height: 80px;
display: inline-block;
font-size: 14px;
padding: 15px;
box-sizing: border-box;
cursor: pointer;
}
.schedule .tabs li span {
font-size: 30px;
display: block;
}
.schedule .tabs li.active {
background: #459B8F;
}
.schedule .tabs li.active:hover {
background: #459B8F;
}
.schedule .tabs li:hover {
background: rgba(69, 155, 143, 0.6)
}
.schedule_content {
background: rgba(0, 0, 0, 0.3);
max-height: 0px;
transition: max-height 2s ease;
/*transition-delay: 1s;*/
}
.schedule.current .schedule_content {
max-height: 2000px;
}
.schedule_content table {
opacity: 0;
/*transition: all 1s ease;*/
}
.schedule.current .schedule_content table {
opacity: 1;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.schedule_item {
display: none;
font-size: 17px;
text-align: left;
text-transform: uppercase;
padding: 30px 40px;
}
.schedule_item.active {
display: block;
}
.schedule_item .time_grid {
font-weight: 300;
color: #AAAAAA;
}
.schedule_item .name_grid {
padding-left: 30px;
}
.schedule_item h4 {
margin: 10px 0px;
font-weight: 400;
}