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
  29                         $('#history').DataTable();
  30                 });
  31
  32
  33         });
  34         </script>
  35 </head>
  36
  37 <body>
  38         <nav>
  39                 <ul>
  40                         <li><a href="index.html">Proxy Radio</a></li>
  41                         <li class="selected">Played songs</li>
  42                         <li><a href="songs.html">All songs</a></li>
  43                 </ul>
  44         </nav>
  45
  46         <section>
  47                 <h1>Last played songs</h1>
  48
  49                 <table id="history">
  50                         <thead>
  51                                 <tr>
  52                                         <th>Date</th>
  53                                         <th>Song</th>
  54                                         <th>Listeners</th>
  55                                 </tr>
  56                         </thead>
  57                 </table>
  58         </section>
  59
  60         <footer>
  61                 <p>(c) Proxy Radio</p>
  62         </footer>
  63 </body>
  64
  65 </html>