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])
|
|
|
|
|
console.log(u.item.attr("id") + " is now " + i)
|
|
|
|
|
on_update_operation(u.item.attr("id"), i)
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
$( "#sortable" ).disableSelection();
|
|
|
|
|
|
|
|
|
|
// connect to ppop
|
|
|
|
|
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) {
|
|
|
|
|
console.log(msg.data)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// setInterval(function() {
|
|
|
|
|
// sock.send(JSON.stringify({"op": "tick", "id": "0", "index": 0}));
|
|
|
|
|
// },3000);
|
|
|
|
|
|
|
|
|
|
} );
|
|
|
|
|
var sock = null;
|
|
|
|
|
function on_update_operation(id, index) {
|
|
|
|
|
if(sock) {
|
|
|
|
|
console.log("sending")
|
2019-01-02 19:06:45 +01:00
|
|
|
sock.send(JSON.stringify({"op": "move", "id": id, "index": index}));
|
2019-01-02 16:11:22 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<title>Radiodiodio</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Playlist: {{.NAME}}</h1>
|
|
|
|
|
|
|
|
|
|
<h2>Current Track: {{.CTRACK.NAME}} </h2>
|
|
|
|
|
<h2>Current Album : {{.CALBUM.NAME}} - {{.CALBUM.MAKER}}</h2>
|
|
|
|
|
|
|
|
|
|
<ul id="sortable">
|
|
|
|
|
{{range $.LIST}}
|
|
|
|
|
<li class="ui-state-default" id="{{.ID}}"><span>{{.MAKER}} - {{.ALBUM}} - {{.NAME}}</span></li>
|
|
|
|
|
{{end}}
|
|
|
|
|
</ul>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
