Added more genres to genre select, added genres editing to more pages.

app/client/scripts/events.js

@@ -678,6 +678,8 @@ Template.manageStation.events({
         $("#dislikes").val(this.dislikes).change();
         $("#duration").val(this.duration).change();
         $("#skip-duration").val(this.skipDuration).change();
+        $("#genres").val(this.genres).change();
+        $("#genres").material_select();
         $("#previewPlayerContainer").addClass("hide-preview");
         Session.set("image_url", this.img);
         Session.set("editing", true);
@@ -863,7 +865,7 @@ Template.manageStation.events({
         newSong.duration = Number($("#duration").val());
         newSong.skipDuration = $("#skip-duration").val();
         newSong.requestedBy = Session.get("song").requestedBy;
-        newSong.genres = $("#genres").val();
+        newSong.genres = $("#genres").val() || [];
         Meteor.call("updatePlaylistSong", newSong.mid, newSong, function(err, res) {
             console.log(err, res);
             if (err) {

app/client/stylesheets/app.css

@@ -274,3 +274,11 @@ textarea{
 .alert i{
     vertical-align: middle;
 }
+
+.dropdown-content {
+    z-index: 5 !important;
+}
+
+#add-song-button {
+    margin-bottom: 100px;
+}

app/client/templates/manageSongs.html

@@ -105,6 +105,14 @@
                         <option value="" disabled selected>Select Genre(s):</option>
                         <option value="edm">EDM</option>
                         <option value="chill">Chill</option>
+                        <option value="pop">Pop</option>
+                        <option value="country">Country</option>
+                        <option value="rock">Rock</option>
+                        <option value="randb">R&B</option>
+                        <option value="rap">Rap</option>
+                        <option value="heavymetal">Heavy Metal</option>
+                        <option value="christmas">Christmas</option>
+                        <option value="alternative">Alternative</option>
                     </select>
                     <label class="white-text">Genre(s)</label>
                 </div>

app/client/templates/manageStation.html

@@ -87,6 +87,22 @@
             </div>
             <div class="row">
                 <h4 class="center-align">Edit Info</h4>
+                <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
+                    <select multiple id="genres">
+                        <option value="" disabled selected>Select Genre(s):</option>
+                        <option value="edm">EDM</option>
+                        <option value="chill">Chill</option>
+                        <option value="pop">Pop</option>
+                        <option value="country">Country</option>
+                        <option value="rock">Rock</option>
+                        <option value="randb">R&B</option>
+                        <option value="rap">Rap</option>
+                        <option value="heavymetal">Heavy Metal</option>
+                        <option value="christmas">Christmas</option>
+                        <option value="alternative">Alternative</option>
+                    </select>
+                    <label class="white-text">Genre(s)</label>
+                </div>
                 <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
                     <i class="material-icons prefix">vpn_key</i>
                     <label for="mid" class="white-text">Song MID</label>

app/client/templates/queues.html

@@ -13,6 +13,7 @@
                             <th>Artist(s)</th>
                             <th>Id</th>
                             <th>Mid</th>
+                            <th>Genres</th>
                             <th class="table-right-th">Edit</th>
                             <th class="table-right-th">Add</th>
                             <th class="table-right-th">Remove</th>
@@ -25,6 +26,7 @@
                                 <td align="left">{{artist}}</td>
                                 <td align="left">{{id}}</td>
                                 <td align="left">{{mid}}</td>
+                                <td align="left">{{genres}}</td>
                                 <td class="table-right-td">
                                     <button class="btn edit-queue-button" data-genre="{{../type}}"
                                             data-toggle="modal" data-target="#editModal">Edit
@@ -83,6 +85,22 @@
             </div>
             <div class="row">
                 <h4 class="center-align">Edit Info</h4>
+                <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
+                    <select multiple id="genres">
+                        <option value="" disabled selected>Select Genre(s):</option>
+                        <option value="edm">EDM</option>
+                        <option value="chill">Chill</option>
+                        <option value="pop">Pop</option>
+                        <option value="country">Country</option>
+                        <option value="rock">Rock</option>
+                        <option value="randb">R&B</option>
+                        <option value="rap">Rap</option>
+                        <option value="heavymetal">Heavy Metal</option>
+                        <option value="christmas">Christmas</option>
+                        <option value="alternative">Alternative</option>
+                    </select>
+                    <label class="white-text">Genre(s)</label>
+                </div>
                 <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
                     <i class="material-icons prefix">vpn_key</i>
                     <label for="mid" class="white-text">Song MID</label>

app/client/templates/room.html

@@ -119,8 +119,16 @@
                                                 <option value="" disabled selected>Select Genre(s):</option>
                                                 <option value="edm">EDM</option>
                                                 <option value="chill">Chill</option>
+                                                <option value="pop">Pop</option>
+                                                <option value="country">Country</option>
+                                                <option value="rock">Rock</option>
+                                                <option value="randb">R&B</option>
+                                                <option value="rap">Rap</option>
+                                                <option value="heavymetal">Heavy Metal</option>
+                                                <option value="christmas">Christmas</option>
+                                                <option value="alternative">Alternative</option>
                                             </select>
-                                            <label>Genre(s)</label>
+                                            <label class="white-text">Genre(s)</label>
                                         </div>
                                         <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
                                             <i class="material-icons prefix">vpn_key</i>