Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //Cut and pasted for test purposes.
- <div class="page-header-info" id="header-generic">
- <h2>Schedule</h2>
- </div>
- <!-- ============================================= Main ============================================= -->
- <div class="content-inner">
- <!-- This comment must not be removed - it makes IE7 behave correctly. No-one knows why. -->
- <div class="page-area clearfix">
- <div class="main-col main-col-large">
- <table class="schedule-table">
- <!-- column headers -->
- <thead>
- <tr>
- <th class="hide">Units</th>
- <th>Hours</th>
- <th>Monday</th>
- <th>Tuesday</th>
- <th>Wednesday</th>
- <th>Thursday</th>
- <th>Friday</th>
- <th>Saturday</th>
- <th>Sunday</th>
- </tr>
- </thead>
- <tbody>
- <tr id="units-0">
- <td class="hide">0</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">00:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-1">
- <td class="hide">1</td>
- <!-- Every other row echo an hour block -->
- </tr>
- <!-- echo a row for each of the 48 units -->
- <tr id="units-2">
- <td class="hide">2</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">01:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-3">
- <td class="hide">3</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-4">
- <td class="hide">4</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">02:00</td>
- </tr>
- <tr id="units-5">
- <td class="hide">5</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-6">
- <td class="hide">6</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">03:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-7">
- <td class="hide">7</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-8">
- <td class="hide">8</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">04:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-9">
- <td class="hide">9</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-10">
- <td class="hide">10</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">05:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-11">
- <td class="hide">11</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-12">
- <td class="hide">12</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">06:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-13">
- <td class="hide">13</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-14">
- <td class="hide">14</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">07:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-15">
- <td class="hide">15</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-16">
- <td class="hide">16</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">08:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-17">
- <td class="hide">17</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-18">
- <td class="hide">18</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">09:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-19">
- <td class="hide">19</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-20">
- <td class="hide">20</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">10:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-21">
- <td class="hide">21</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-22">
- <td class="hide">22</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">11:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-23">
- <td class="hide">23</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-24">
- <td class="hide">24</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">12:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-25">
- <td class="hide">25</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-26">
- <td class="hide">26</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">13:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-27">
- <td class="hide">27</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-28">
- <td class="hide">28</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">14:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-29">
- <td class="hide">29</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-30">
- <td class="hide">30</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">15:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-31">
- <td class="hide">31</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-32">
- <td class="hide">32</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">16:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-33">
- <td class="hide">33</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-34">
- <td class="hide">34</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">17:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-35">
- <td class="hide">35</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-36">
- <td class="hide">36</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">18:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-37">
- <td class="hide">37</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-38">
- <td class="hide">38</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">19:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-39">
- <td class="hide">39</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-40">
- <td class="hide">40</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">20:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-41">
- <td class="hide">41</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-42">
- <td class="hide">42</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">21:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-43">
- <td class="hide">43</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-44">
- <td class="hide">44</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">22:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-45">
- <td class="hide">45</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-46">
- <td class="hide">46</td>
- <!-- Every other row echo an hour block -->
- <td class="time" rowspan="2">23:00</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-47">
- <td class="hide">47</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- <tr id="units-48">
- <td class="hide">48</td>
- <!-- start polling days -->
- <!-- finish echo a row for each of the 48 units -->
- </tr>
- </tbody>
- </table>
- <script type="text/javascript">
- var doFades = true;
- var BauerStations = {
- Schedule : {}
- };
- $(document).ready(function(){
- BauerStations.Schedule.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
- BauerStations.Schedule.Show = function () {
- _s = null;
- _startDate = null;
- _endDate = null;
- this.days = BauerStations.Schedule.days;
- _selector = '';
- this.setShow = function(s) {
- this._s = s;
- this._startDate = new Date( parseInt(s.startminutes, 10) * 1000);
- this._endDate = new Date(parseInt(s.endminutes, 10) * 1000 );
- };
- this.getEndDate = function(){
- return this._endDate;
- }
- this.getStartDate = function(){
- return this._startDate;
- }
- this._getShowDay = function (){
- return this.days[this.getStartDate().getDay()];
- };
- this._getShowUnitsTaken = function(){
- // if it's the same day
- return this._getEndUnits() - this._getStartUnits();
- };
- this._getEndUnits = function(){
- if(this.getEndDate().getHours() == 0)
- {
- //console.log(this._s.longname +' ends at midnight');
- return 48;
- }
- return this.getEndDate().getMinutes() !== 0 ? (this.getEndDate().getHours() * 2) : (this.getEndDate().getHours() * 2);
- };
- this._getStartUnits = function(){
- if(this.getStartDate().getHours() == 0)
- {
- return 0;
- }
- return this.getStartDate().getMinutes() !== 0 ? (this.getStartDate().getHours() * 2) : (this.getStartDate().getHours() * 2);
- };
- this.getCellPositions = function() {
- return {
- 'start' : this.getStartDate(),
- 'end' : this.getEndDate(),
- 'colIndex' : this.getStartDate().getDay() + 2,
- 'startUnits' : this._getStartUnits(),
- 'endUnits' : this._getEndUnits(),
- 'unitsTaken' : this._getShowUnitsTaken()
- }
- };
- this.pad = function(number){
- return number < 10 ? '0'+number : number;
- };
- // return the table cell html.
- this.toHtml = function () {
- var d = new Date();
- var units = this._getStartUnits();
- var rowspan = this._getShowUnitsTaken();
- var desc = this._s.description;
- var name = this._s.longname;
- var starttime = this.pad(this.getStartDate().getHours()) + ':' + this.pad(this.getStartDate().getMinutes());
- var endtime = this.pad(this.getEndDate().getHours()) + ':' + this.pad(this.getEndDate().getMinutes());
- var site = this._s.websitelink;
- var cls = this.isActive() ? 'current-program' : '';
- var isToday = this.getStartDate().getDay() === d.getDay() ? 'active-program' : '';
- var html = '<td class="schedule-show ' + isToday + ' ' + cls + '" rowspan="' + rowspan + '" data-start="' + this.getStartDate() + '" data-end="' + this.getEndDate() + '">';
- html += '<div>';
- html += '<a href="' + site + '" title="' + desc + '">' + name + '</a>';
- html += '</div>';
- if(doFades)
- {
- html += '<div class="schedule_details clearfix" style="display:none;">';
- html += '<img width="105px" height="105px" alt="' + desc + '" src="' + this._s.showimage + '">';
- html += '<strong>' + name + '</strong>';
- html += '<p>' + desc + '</p>';
- html += '<span>' + starttime + ' - ' + endtime +'</span>';
- html += '</div>';
- }
- html += '</td>';
- return html;
- };
- this.setTableSelector = function(sel){
- this._selector = sel;
- };
- // check if we should add the active class.
- this.isActive = function(){
- var t = new Date();
- return t >= this.getStartDate() && t <= this.getEndDate();
- };
- };
- BauerStations.Schedule.ScheduleGen = function(){
- return {
- insertShow : function(show) {
- var p = show.getCellPositions();
- $('tr#units-' + p.startUnits).append(show.toHtml());
- },
- init : function (stationName){
- var self = this;
- // load the schedule.
- $.getJSON('http://radioplayer.bauerradio.com/schedule.php?callback=?', {
- name: 'Radio Borders'
- }, function(json){
- // loop each show and append to our giant table.
- // this is well sick.
- if(json.success === false)
- {
- $('.content-inner table').remove();
- $('<div>errors</div>').appendTo('.content-inner');
- }
- else
- {
- var currentDay = '';
- var day = 0;
- // highlight the current time..
- var d = new Date();
- var weekStart = new Date();
- weekStart.setDate(d.getDate()-6-(d.getDay()||7));
- $.each(json.data.schedule, function(i, broadcast){
- var dStart = new Date( parseInt(broadcast.startminutes, 10) * 1000);
- var dEnd = new Date(parseInt(broadcast.endminutes, 10) * 1000 );
- /*// transform to a show object defined above, if the show spans 2 days we create two show objects.
- // IF THE SHOW STARTS/ENDS AT MIDNIGHT, DON'T SPLIT IT.
- if(dStart.getHours() !== 0 && dEnd.getHours() !== 0 && dStart.getDate() != dEnd.getDate())
- {
- var showOne = new BauerStations.Schedule.Show();
- showOne.setShow(broadcast);
- // set to midnight
- showOne.getEndDate().setHours(0);
- showOne.getEndDate().setMinutes(dStart.getMinutes());
- // append first half of show.
- self.insertShow(showOne);
- // handle second half.
- var showTwo = new BauerStations.Schedule.Show();
- showTwo.setShow(broadcast);
- showTwo.getStartDate().setDate(showTwo.getStartDate().getDate() + 1);
- showTwo.getStartDate().setHours(0);
- showTwo.getStartDate().setMinutes(dEnd.getMinutes());
- //console.log('2nd Half Start: ' + showTwo.getStartDate());
- //console.log('2nd Half End: ' + showTwo.getEndDate());
- self.insertShow(showTwo);
- }
- else
- {*/
- var show = new BauerStations.Schedule.Show();
- show.setShow(broadcast);
- show.setTableSelector('table#schedule');
- // add the show to the table. Thankfully the order these come out the API means they get added
- // in the right place. So don't change the schedule builder code!
- self.insertShow(show);
- //}
- });
- var days = BauerStations.Schedule.days;
- // apply the current day / time classes
- $('th:contains('+ days[d.getDay()]+')').addClass('active');
- $('td.time').each(function(i, cell){
- // get the value, convert to int.
- var hours = $(cell).html().split(':')[0];
- // compare the hours with now, add class if matched.
- if(parseInt(hours, 10) === d.getHours())
- {
- $(cell).addClass('current_time');
- }
- });
- }
- if(doFades)
- {
- // apply events to show info fade in / out.
- $('td.schedule-show').hover(function(){
- $(this).find('.schedule_details').fadeIn('fast');
- }, function(){
- $(this).find('.schedule_details').fadeOut('fast');
- });
- }
- });
- }
- };
- }();
- BauerStations.Schedule.ScheduleGen.init();
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement