playlist: fix display, and let people delete items

diff --git a/main.html b/main.html
index 90e2182a03b043aecf431c01312c60be2d38787e..87add75cb96491ee6078b90b4195d1aeac443950 100644 (file)
--- a/main.html
+++ b/main.html
@@ -36,11 +36,18 @@ table.tabs td.selected {
        background-color: white;
 }
 
+/* Playlist styles */
 table#playlist td {
        border-left: black solid 1px;
        padding-right: 0.5em;
 }
 
+td#playlist_del {
+       padding-left: 0.3em;
+       padding-right: 0.2em;
+       font-weight: bold;
+}
+
 /* Get the tabs to float at the bottom */
 html, body {
        height: 100%;
@@ -58,6 +65,10 @@ div#footer {
        height: 1.3em;
        clear: both;
 }
+table#playlist {
+       height: 85px;
+       display: block;
+};
 </style>
 </head>
 

diff --git a/main.js b/main.js
index aa4c7bd961f329b5506724635ae7e4c7b6b72908..9902b935d01e7042570268c13be9d07b82f337c1 100644 (file)
--- a/main.js
+++ b/main.js
@@ -110,6 +110,7 @@ function tramp_mpc_consume() {
        mpc.consume(val);
        setToggleButton(this, val);
 }
+function tramp_mpc_deleteid() { mpc.deleteid(this.title); }
 function tramp_mpc_next() { mpc.next(); }
 function tramp_mpc_pause() { mpc.pause(); }
 function tramp_mpc_play() { mpc.play(); }
@@ -272,6 +273,11 @@ function pretty_time(time) {
        return ret + ("00" + sec).substr(-2);
 }
 
+function playlist_del() {
+       mpc.deleteid(this.title);
+       this.parentNode.remove();
+}
+
 function update_ui(state, cmd) {
        if (typeof(state) == 'string') {
                ui_mpc_status.innerText = ({
@@ -314,6 +320,12 @@ function update_ui(state, cmd) {
                if (song.Pos == currentsong.Pos)
                        row.style.fontWeight = 'bold';
 
+               cell = row.insertCell(-1);
+               cell.id = 'playlist_del';
+               cell.innerHTML = '¤';
+               cell.title = song.Id;
+               cell.onclick = playlist_del;
+
                cell = row.insertCell(-1);
                cell.innerText = song.Pos;
                cell.style.textAlign = 'right';