SAAS-813: Wire up schedule widget on Radio Page
This commit is contained in:
drigato
parent
a569387c5a
commit
27868fbfe5
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 & 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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue