Added artist to search Spotify function, added edit song option in queue.

app/app.css

@@ -751,7 +751,7 @@ footer a:hover{
 #s3 {
   opacity: 0.33333333333333;
 }
-#add-song-button{
+#add-song-button, #find-img-button, #save-song-button {
   display: block;
   margin: 0 auto;
 }

app/app.js

@@ -22,10 +22,15 @@ if (Meteor.isClient) {
     var id = parts.pop();
     var type = id.toLowerCase();
 
-    function getSpotifyInfo(title, cb) {
+    function getSpotifyInfo(title, cb, artist) {
+        var q = "";
+        q = title;
+        if (artist !== undefined) {
+            q += " artist:" + artist;
+        }
         $.ajax({
             type: "GET",
-            url: 'https://api.spotify.com/v1/search?q=' + encodeURIComponent(title.toLowerCase()) + '&type=track',
+            url: 'https://api.spotify.com/v1/search?q=' + encodeURIComponent(q) + '&type=track',
             applicationType: "application/json",
             contentType: "json",
             success: function (data) {
@@ -403,6 +408,16 @@ if (Meteor.isClient) {
         "click .preview-button": function(e){
             Session.set("song", this);
         },
+        "click .edit-button": function(e){
+            Session.set("song", this);
+            Session.set("genre", $(e.toElement).data("genre"));
+            $("#type").val(this.type);
+            $("#artist").val(this.artist);
+            $("#title").val(this.title);
+            $("#img").val(this.img);
+            $("#id").val(this.id);
+            $("#duration").val(this.duration);
+        },
         "click #add-song-button": function(e){
             var genre = $(e.toElement).data("genre") || $(e.toElement).parent().data("genre");
             Meteor.call("addSongToPlaylist", genre, this);
@@ -475,6 +490,24 @@ if (Meteor.isClient) {
                     window.location = "/" + $("#croom").val();
                 }
             });
+        },
+        "click #find-img-button": function() {
+            getSpotifyInfo($("#title").val().replace(/\[.*\]/g, ""), function(data) {
+                if (data.tracks.items.length > 0) {
+                    $("#img").val(data.tracks.items[0].album.images[1].url);
+                }
+            }, $("#artist").val());
+        },
+        "click #save-song-button": function() {
+            var newSong = {};
+            newSong.title = $("#title").val();
+            newSong.artist = $("#artist").val();
+            newSong.img = $("#img").val();
+            newSong.type = $("#type").val();
+            newSong.duration = $("#duration").val();
+            Meteor.call("updateQueueSong", Session.get("genre"), Session.get("song"), newSong, function() {
+                $('#editModal').modal('hide');
+            });
         }
     });
 
@@ -931,6 +964,11 @@ if (Meteor.isServer) {
                 throw new Meteor.error(403, "Invalid genre.");
             }
         },
+        updateQueueSong: function(genre, oldSong, newSong) {
+            newSong.id = oldSong.id;
+            Queues.update({type: genre, "songs": oldSong}, {$set: {"songs.$": newSong}});
+            return true;
+        },
         removeSongFromQueue: function(type, songId) {
             type = type.toLowerCase();
             Queues.update({type: type}, {$pull: {songs: {id: songId}}});

app/templates/admin.html

@@ -1,92 +1,128 @@
 <template name="admin">
     <div class="landing">
-      {{> header}}
-      <div class="row">
-        {{#each queues}}
-            <div class="col-md-8 col-md-offset-2 admin-queue-panel">
-                <div class="panel panel-primary">
-                    <div class="panel-heading">
-                        <h3 class="panel-title">{{type}} review queue</h3>
-                    </div>
-                    <div class="panel-body">
-                        <table class="table table-striped">
-                            <thead>
-                                <tr>
-                                    <th>Title</th>
-                                    <th>Artist(s)</th>
-                                    <th>Type</th>
-                                    <th>Id</th>
-                                    <th>Img</th>
-                                    <th>Preview</th>
-                                    <th>Add</th>
-                                    <th colspan="10">Remove</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {{#each songs}}
+        {{> header}}
+        <div class="row">
+            {{#each queues}}
+                <div class="col-md-8 col-md-offset-2 admin-queue-panel">
+                    <div class="panel panel-primary">
+                        <div class="panel-heading">
+                            <h3 class="panel-title">{{type}} review queue</h3>
+                        </div>
+                        <div class="panel-body">
+                            <table class="table table-striped">
+                                <thead>
                                     <tr>
-                                        <th scope="row">{{title}}</th>
-                                        <td>{{artist}}</td>
-                                        <td>{{type}}</td>
-                                        <td>{{id}}</td>
-                                        <td class="column-small"><a href="{{img}}" target="_blank"><button class="btn btn-primary preview-button">Preview Image</button></a></td>
-                                        <td class="column-small"><button class="btn btn-primary preview-button" data-toggle="modal" data-target="#previewModal">Preview</button></td>
-                                        <td class="column-small"><button class="btn btn-success" id="add-song-button" data-genre="{{../type}}"><i class="fa fa-check-circle"></i></button></td>
-                                        <td class="column-small"><button class="btn btn-danger" id="deny-song-button" data-genre="{{../type}}"><i class="fa fa-ban"></i></button></td>
+                                        <th>Title</th>
+                                        <th>Artist(s)</th>
+                                        <th>Type</th>
+                                        <th>Id</th>
+                                        <th>Img</th>
+                                        <th>Preview</th>
+                                        <th>Edit</th>
+                                        <th>Add</th>
+                                        <th colspan="10">Remove</th>
                                     </tr>
-                                {{/each}}
-                            </tbody>
-                        </table>
+                                </thead>
+                                <tbody>
+                                    {{#each songs}}
+                                        <tr>
+                                            <th scope="row">{{title}}</th>
+                                            <td>{{artist}}</td>
+                                            <td>{{type}}</td>
+                                            <td>{{id}}</td>
+                                            <td class="column-small"><a href="{{img}}" target="_blank"><button class="btn btn-primary preview-button">Preview Image</button></a></td>
+                                            <td class="column-small"><button class="btn btn-primary preview-button" data-toggle="modal" data-target="#previewModal">Preview</button></td>
+                                            <td class="column-small"><button class="btn btn-primary edit-button" data-genre="{{../type}}" data-toggle="modal" data-target="#editModal">Edit</button></td>
+                                            <td class="column-small"><button class="btn btn-success" id="add-song-button" data-genre="{{../type}}"><i class="fa fa-check-circle"></i></button></td>
+                                            <td class="column-small"><button class="btn btn-danger" id="deny-song-button" data-genre="{{../type}}"><i class="fa fa-ban"></i></button></td>
+                                        </tr>
+                                    {{/each}}
+                                </tbody>
+                            </table>
+                        </div>
                     </div>
                 </div>
-            </div>
-        {{/each}}
+            {{/each}}
 
-        <div class="col-md-4 col-md-offset-4">
-            <div id="croom_container">
-                <label for="croom" id="croom_label">Room Name:</label>
-                <div class="input-group">
-                    <input type="text" id="croom" name="croom" required />
+            <div class="col-md-4 col-md-offset-4">
+                <div id="croom_container">
+                    <label for="croom" id="croom_label">Room Name:</label>
+                    <div class="input-group">
+                        <input type="text" id="croom" name="croom" required />
+                    </div>
+                    <button class="btn btn-warning btn-block" id="croom_create">Create</button>
                 </div>
-                <button class="btn btn-warning btn-block" id="croom_create">Create</button>
             </div>
-        </div>
 
-        <div id="previewModal" class="modal fade" role="dialog">
-            <div class="modal-dialog">
-                <!-- Modal content-->
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal">&times;</button>
-                        <h4 class="modal-title">Preview</h4>
-                    </div>
-                    <div class="modal-body">
-                        <div width="960" height="540" id="previewPlayer"></div>
-                        <button id="play" class="btn btn-success"><i class="fa fa-play"></i></button>
-                        <button id="stop" class="btn btn-danger" disabled><i class="fa fa-stop"></i></button>
-                        <div id="volume-container-admin">
-                            <input type="text" id="volume-slider" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="hide">
+            <div id="previewModal" class="modal fade" role="dialog">
+                <div class="modal-dialog">
+                    <!-- Modal content-->
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <button type="button" class="close" data-dismiss="modal">&times;</button>
+                            <h4 class="modal-title">Preview</h4>
+                        </div>
+                        <div class="modal-body">
+                            <div width="960" height="540" id="previewPlayer"></div>
+                            <button id="play" class="btn btn-success"><i class="fa fa-play"></i></button>
+                            <button id="stop" class="btn btn-danger" disabled><i class="fa fa-stop"></i></button>
+                            <div id="volume-container-admin">
+                                <input type="text" id="volume-slider" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="hide">
+                            </div>
+                        </div>
+                        <div class="modal-footer">
+                            <button id="close-modal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                         </div>
                     </div>
-                    <div class="modal-footer">
-                        <button id="close-modal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+
+            <div id="editModal" class="modal fade" role="dialog">
+                <div class="modal-dialog">
+                    <!-- Modal content-->
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <button type="button" class="close" data-dismiss="modal">&times;</button>
+                            <h4 class="modal-title">Edit</h4>
+                        </div>
+                        <div class="modal-body">
+                            <label for="type" class="song-input-label">Song Type</label>
+                            <select name="type" id="type" class="song-input-select">
+                                <option name="youtube" id="youtube">YouTube</option>
+                                <option name="soundcloud" id="soundcloud">SoundCloud</option>
+                            </select>
+                            <label for="id" class="song-input-label">Song ID</label>
+                            <input class="song-input" name="id" id="id" type="text" />
+                            <label for="id" class="song-input-label">Song Artist</label>
+                            <input class="song-input" name="artist" id="artist" type="text" />
+                            <label for="title" class="song-input-label">Song Title</label>
+                            <input class="song-input" name="title" id="title" type="text" />
+                            <label for="title" class="song-input-label">Song Duration</label>
+                            <input class="song-input" name="duration" id="duration" type="number" />
+                            <label for="img" class="song-input-label">Song Image</label>
+                            <input class="song-input" name="img" id="img" type="text" />
+                            <button type="button" id="find-img-button" class="button">Find Image</button>
+                            <button type="button" id="save-song-button" class="button">Save Changes</button>
+                        </div>
+                        <div class="modal-footer">
+                            <button id="close-modal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <ul class="bg-bubbles">
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-        </ul>
+            <ul class="bg-bubbles">
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+            </ul>
     </div>
   </div>
 </template>