use jplayer
[radio.git] / 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                 <table id="history">
48                         <thead>
49                                 <tr>
50                                         <th>Date</th>
51                                         <th>Song</th>
52                                         <th>Listeners</th>
53                                 </tr>
54                         </thead>
55                 </table>
56         </section>
57
58         <footer>
59                 <p>(c) Proxy Radio</p>
60         </footer>
61 </body>
62
63 </html>