html/last_songs.html

   1 <!DOCTYPE html>
   2 <html>
   3
   4 <head>
   5         <meta charset="UTF-8" />
   6         <link rel="stylesheet" type="text/css" media="all" href="style.css" />
   7         <title>Last played songs</title>
   8
   9         <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
  10
  11         <script type="text/javascript"
  12                 language="javascript"
  13                 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
  14         </script>
  15
  16         <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js">
  17         </script>
  18
  19         <script>$(document).ready(function() {
  20                 $.getJSON("http://radio.wpitchoune.net/cgi-bin/icecast_last_songs.cgi",
  21                           function(data) {
  22                         $.each(data, function(i, value) {
  23                                 $("#history").append("<tr><td>" + value.date + "</td>"
  24                                                      + "<td>" + value.song + "</td>"
  25                                                      + "<td>" + value.listeners + "</td>"
  26                                                      + "</tr>");
  27                         });
  28                         $('#history').DataTable();
  29                 });
  30
  31
  32         });
  33         </script>
  34 </head>
  35
  36 <body>
  37         <nav>
  38                 <ul>
  39                         <li><a href="index.html">Proxy Radio</a></li>
  40                         <li class="selected">Played songs</li>
  41                         <li><a href="songs.html">All songs</a></li>
  42                 </ul>
  43         </nav>
  44
  45         <section>
  46                 <table id="history">
  47                         <thead>
  48                                 <tr>
  49                                         <th>Date</th>
  50                                         <th>Song</th>
  51                                         <th>Listeners</th>
  52                                 </tr>
  53                         </thead>
  54                 </table>
  55         </section>
  56
  57         <footer>
  58                 <ul>
  59                         <li><a href="mailto:proxyradio@wpitchoune.net">Contact</a></li>
  60                 </ul>
  61         </footer>
  62 </body>
  63
  64 </html>