2019-01-02 16:11:22 +01:00
|
|
|
<!doctype html>
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
#sortable { list-style-type: none; margin: 10; padding: 10; width: 60%; }
|
|
|
|
|
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; height: 18px; }
|
|
|
|
|
#sortable li span { position: absolute; margin-left: -1.3em; }
|
|
|
|
|
</style>
|
|
|
|
|
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
|
|
|
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
$( function() {
|
|
|
|
|
$( "#sortable" ).sortable({
|
|
|
|
|
update: function (e, u) {
|
|
|
|
|
console.log("update")
|
|
|
|
|
list = Array.from(document.querySelectorAll('#sortable>li'));
|
|
|
|
|
var i = list.indexOf(u.item[0])
|
|
|
|
|
on_update_operation(u.item.attr("id"), i)
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
$( "#sortable" ).disableSelection();
|
|
|
|
|
sock = new WebSocket("ws://localhost:8718/ppop");
|
|
|
|
|
sock.onopen = function() {
|
|
|
|
|
console.log("ppop open")
|
|
|
|
|
}
|
|
|
|
|
sock.onclose = function() {
|
|
|
|
|
console.log("ppop closed")
|
|
|
|
|
sock = new WebSocket("ws://localhost:8718/ppop");
|
|
|
|
|
}
|
|
|
|
|
sock.onmessage = function(msg) {
|
2019-01-03 14:21:24 +01:00
|
|
|
check_fix_list(JSON.parse(msg.data))
|
2019-01-02 16:11:22 +01:00
|
|
|
}
|
|
|
|
|
} );
|
|
|
|
|
var sock = null;
|
|
|
|
|
function on_update_operation(id, index) {
|
|
|
|
|
if(sock) {
|
|
|
|
|
console.log("sending")
|
2019-01-03 14:21:24 +01:00
|
|
|
sock.send(JSON.stringify({"op": "move", "id": id, "index": index}))
|
2019-01-02 16:11:22 +01:00
|
|
|
}
|
|
|
|
|
}
|
2019-01-03 14:21:24 +01:00
|
|
|
function check_fix_list(playlist) {
|
|
|
|
|
|
|
|
|
|
console.log(playlist)
|
|
|
|
|
|
|
|
|
|
$("#pname").text("Playlist: " + playlist.name)
|
|
|
|
|
$("#tname").text("Current Track: " + playlist.ctrack)
|
|
|
|
|
$("#aname").text("Current Album: " + playlist.calbum)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
list = Array.from(document.querySelectorAll('#sortable>li'))
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log("length ul: " + list.length)
|
|
|
|
|
console.log("length playlist: " + playlist.list.length)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < list.length; i++) {
|
|
|
|
|
if(i >= playlist.list.length) {
|
|
|
|
|
break
|
|
|
|
|
} else if (list[i].id != playlist.list[i]["id"]) {
|
|
|
|
|
console.log("difference at index: " + i)
|
|
|
|
|
list[i].setAttribute("id", playlist.list[i]["id"])
|
|
|
|
|
list[i].innerHTML = "<span>" + playlist.list[i]["maker"] +
|
|
|
|
|
" - " + playlist.list[i]["album"] +
|
|
|
|
|
" - " + playlist.list[i]["name"] + "</span>" ;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var ul = document.getElementById('sortable');
|
|
|
|
|
if(list.length > playlist.list.length) {
|
|
|
|
|
for(let i = playlist.list.length; i < list.length; i++) {
|
|
|
|
|
ul.removeChild(list[i])
|
|
|
|
|
}
|
|
|
|
|
} else if (list.length < playlist.list.length) {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
console.log("synched!!")
|
|
|
|
|
}
|
2019-01-02 16:11:22 +01:00
|
|
|
</script>
|
|
|
|
|
<title>Radiodiodio</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2019-01-03 14:21:24 +01:00
|
|
|
<h1 id="pname">Playlist: {{.NAME}}</h1>
|
2019-01-03 14:38:05 +01:00
|
|
|
<audio controls src="http://le-club-des-sans-sujet.host:8718/wwww"></audio>
|
2019-01-03 14:21:24 +01:00
|
|
|
<h2 id="tname">Current Track: {{.CTRACK.NAME}}</h2>
|
|
|
|
|
<h2 id="aname">Current Album : {{.CALBUM.NAME}} - {{.CALBUM.MAKER}}</h2>
|
2019-01-02 16:11:22 +01:00
|
|
|
|
|
|
|
|
<ul id="sortable">
|
|
|
|
|
{{range $.LIST}}
|
|
|
|
|
<li class="ui-state-default" id="{{.ID}}"><span>{{.MAKER}} - {{.ALBUM}} - {{.NAME}}</span></li>
|
|
|
|
|
{{end}}
|
|
|
|
|
</ul>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
