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         <section>
  39                 <h1>Last played songs</h1>
  40
  41                 <table id="history">
  42                         <thead>
  43                                 <tr>
  44                                         <th>Date</th>
  45                                         <th>Song</th>
  46                                         <th>Listeners</th>
  47                                 </tr>
  48                         </thead>
  49                 </table>
  50         </section>
  51
  52         <footer>
  53                 <p>(c) Proxy Radio</p>
  54         </footer>
  55 </body>
  56
  57 </html>