Embed.html

<!-- Jquery -->
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="  crossorigin="anonymous"></script>
<script  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"> 
<!-- MomentJS -->
<script type="text/javascript" charset="utf8" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.17/moment-timezone-with-data.min.js"  crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.6/jstz.min.js"  crossorigin="anonymous"></script>
<!-- Regular Datatable -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css"> 
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

<!-- Javascript Code -->
<script>
jQuery(document).ready(function($) {
  if (!sessionStorage.getItem('timezone')) {
  var tz = jstz.determine() || 'UTC';
  sessionStorage.setItem('timezone', tz.name());
  }
  var currTz = sessionStorage.getItem('timezone');
  var now = new Date();
  function getQueryVariable(variable)  {
    var query = top.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
    }
    return(false);
  }

function getParameter(paramName) {
  var searchString = window.location.search.substring(1),
      i, val, params = searchString.split("&");

  for (i=0;i<params.length;i++) {
    val = params[i].split("=");
    if (val[0] == paramName) {
      return val[1];
    }
  }
  return null;
}
    
  var selectedDate= getParameter('date');
  if (!selectedDate) {
    selectedDate = moment(now).tz(currTz).format('YYYYMMDD');
  }
  var selectedChannel= getParameter('channel');
  if (!selectedChannel) {
    selectedChannel = 'Main';
  }
  var s3Url = 'https://s3.amazonaws.com/wucf-playlist/'+selectedChannel+"/"+selectedDate+ '.json';

  //Datatable Error Handling so it gracefully fail.
  $.fn.dataTable.ext.errMode = 'none';
  $('#wucf-playlist')
  .DataTable  ( {
    ajax: 
    {
      url: s3Url,
      dataSrc: '',
      dataType: 'json',
      timeout: 60000
    },
    columns: [
      {data: 'Timestamp', "visible": false, "searchable": false},
      { 
        data: 'Timestamp',
        render: function (data, type, row) {
          var datetime = new Date(data);
          var time = moment(datetime).tz(currTz).format('LT');
          if ( type === 'display' ) {
              return time;
          }
          else
          {
            return data;
          }
        },
        searchable: false,
        defaultContent: ""
      },      
      { data: 'Title', bSortable: false},
      { data: 'Artist', bSortable: false},
      { data: 'Album', bSortable: false},  
      { data: 'Agency', bSortable: false},  
      {
        data: '',
        bSortable: false,
        render: function(data, type, row, meta){
                    var html = '<a target="_blank" href="';
                            var link = 'https://www.amazon.com/s/ref=nb_sb_noss_1?tag=wucforg-20&amp;url=search-alias%3Dpopular&amp;field-keywords="';
                    link += row.Title+'\"  \"'+row.Artist+'\"';
                            var endhtml = '"><img src="//cdnjs.cloudflare.com/ajax/libs/simple-icons/3.0.1/amazon.svg" alt="Buy on Amazon.com" style="max-width:32px;max-height:32px;">	</a>';
                return html + encodeURI(link) + endhtml;
            },
        order: false,
        searchable: false
      }
    ],
    bLengthChange: false,
    iDisplayLength: 50,
    order: [[ '0', "desc" ]],
    language: {
      loadingRecords: "<div id=div-loader>Loading...</div>"
    }
  })
  .on( 'error.dt', function ( e, settings, techNote, message ) {
    if (message.includes("Ajax error")) {     
      document.getElementById('div-loader').innerHTML = "There are no playlist data for this date."
    }
    else if (message.includes('Requested unknown parameter', message)) {
      // Ignore error. No need to process. Empty default values added to handle undefined parameters.
    }
    else {
      console.log( 'An error has been reported by DataTables: ', message );
    }
  } );
  $('#wucf-playlist_filter label').attr( 'id', 'searchlabel');
  $('#wucf-playlist_filter input').attr( 'id', 'searchinput');
  //Add datepicker and channel picker function to the top of filter bar.
  var datefilterbar = ' Date: <input type="text" id="datepicker" name="datepicker"/> ';
  var channelfilterbar = ' Channel: <select id="channelpicker" name="channelpicker"><option value="Main">JAZZ & MORE</option><option value="HD2">CENTRAL FLORIDA\'S CLASSICS</option></select> ';
  var newfilterbar = channelfilterbar + datefilterbar + document.getElementById('searchlabel').innerHTML;
  document.getElementById('searchlabel').innerHTML = newfilterbar;
  $( function() {
   		 var table = $('#wucf-playlist').DataTable();
      		//initiate datepicker
            $( "#datepicker" ).datepicker({
              dateFormat: 'yymmdd',
              minDate: '-1y',
              maxDate: moment(now).tz(currTz).format('YYYYMMDD'),
              gotoCurrent: true,
              showButtonPanel: true,
              autoSize: true,
              onSelect: function(d,i){
                  if(d !== i.lastVal){
                      $(this).change();
                  }
              }
            });
      		//datepicker change function
            $("#datepicker").change(function(){
              var pickedDate = moment($( "#datepicker" ).datepicker( "getDate" )).format('YYYYMMDD');
							if(!pickedDate)
							{
								pickedDate = moment(now).tz(currTz).format('YYYYMMDD');
							}
              var e = document.getElementById("channelpicker");
              var pickedChannel = e.options[e.selectedIndex].value;
              s3Url = 'https://s3.amazonaws.com/wucf-playlist/'+pickedChannel+"/"+pickedDate+ '.json';
              //url.searchParams.set('date', pickedDate);
                table.ajax.url(s3Url).load();
              });
      		//channelpicker change function
            $("#channelpicker").change(function(){
              var e = document.getElementById("channelpicker");
              var pickedChannel = e.options[e.selectedIndex].value;
              if (pickedChannel !== selectedChannel) {
									
									selectedChannel = pickedChannel;
                  var pickedDate = moment($( "#datepicker" ).datepicker( "getDate" )).format('YYYYMMDD');
									if(pickedDate === "Invalid date")
									{
										pickedDate = moment(now).tz(currTz).format('YYYYMMDD');
									}
                  s3Url = 'https://s3.amazonaws.com/wucf-playlist/'+pickedChannel+"/"+pickedDate+ '.json';
                    table.ajax.url(s3Url).load();
              	}
              });
            $("#searchinput").on( 'keyup', function () {
              table.search( this.value ).draw();
    		// Set date and channel fields in the filter bar.
            if (moment($( "#datepicker" ).datepicker( "getDate" )).format('YYYYMMDD') != selectedDate) {
              $("#datepicker").datepicker("setDate", selectedDate);
            }
            var e = document.getElementById("channelpicker");
            if (selectedChannel !== e.options[e.selectedIndex].value) {
              $('#channelpicker').val(selectedChannel).change();
            }
          });
		 //Reload the page every 30 seconds			
		 setInterval( function () {
    		table.ajax.reload( null, false ); // user paging is not reset on reload
            }, 180000 );      		
          if(getQueryVariable('debug')){
            console.log('searchQuery:' + top.location.search.substring(1));
            console.log('s3Url:' + s3Url);
            console.log('selectedDate:' + selectedDate);
            console.log('selectedChannel:' + selectedChannel);
            console.log('filterbar: ' + newfilterbar);
            console.log('Current Timezone: ' + currTz);
          }
       });
})
</script>
<body>
<style>
  #datepicker {
      box-sizing: content-box;
  }
  #searchlabel {
      font-size: 12px;
  }
</style>    
<table id="wucf-playlist" class="display" style="width:100%">
      <thead>
          <tr>
              <th>Timestamp</th>             
              <th>Time</th>                   
              <th>Song Title</th>
              <th>Artist</th>
              <th>Album</th>
              <th>Agency</th>
              <th></th>                
          </tr>
      </thead>
      <tfoot>
          <tr>
              <th>Timestamp</th>                
              <th>Time</th>                
              <th>Song Title</th>
              <th>Artist</th>
              <th>Album</th>   
              <th>Agency</th>         
              <th></th>
          </tr>
      </tfoot>
  </table>
</body>