finished report layout, working on report object

app/client/scripts/events.js

@@ -1585,10 +1585,13 @@ Template.room.events({
         reportData.type = [];
         reportData.reason = [];
 
-        $(".report-layer-1 > .checkbox input:checked").each(function () {
-            reportData.type.push(this.id);
+        $(".report-layer-1 > div > input:checked").each(function () {
             if (this.id == "report-other") {
-                var otherText = $(".other-textarea").val();
+                var id = this.id;
+                var otherText = $(".other-textarea-ta").val();
+                reportData.type.push({"report-other": otherText});
+            } else {
+                reportData.type.push(this.id);
             }
         });
 
@@ -1598,7 +1601,7 @@ Template.room.events({
 
         console.log(reportData);
         Meteor.call("submitReport", room, reportData, function () {
-            $("#close-modal-r").click();
+            $("report_modal").closeModal();
         });
     },
     "change #si_or_pl": function () {

app/client/scripts/helpers.js

@@ -401,6 +401,86 @@ Template.room.helpers({
         }, 500);
         return Session.get("reportSong");
     },
+    reportSongOther: function(){
+        Meteor.setInterval(function(){
+            if($("#report-song-other").is(":checked")){
+                Session.set("reportSongOther", true)
+            } else { Session.set("reportSongOther", false) }
+        }, 500);
+        return Session.get("reportSongOther");
+    },
+    reportTitle: function(){
+        Meteor.setInterval(function(){
+            if($("#report-title").is(":checked")){
+                Session.set("reportTitle", true)
+            } else { Session.set("reportTitle", false) }
+        }, 500);
+        return Session.get("reportTitle");
+    },
+    reportTitleOther: function(){
+        Meteor.setInterval(function(){
+            if($("#report-title-other").is(":checked")){
+                Session.set("reportTitleOther", true)
+            } else { Session.set("reportTitleOther", false) }
+        }, 500);
+        return Session.get("reportTitleOther");
+    },
+    reportArtist: function(){
+        Meteor.setInterval(function(){
+            if($("#report-artist").is(":checked")){
+                Session.set("reportArtist", true)
+            } else { Session.set("reportArtist", false) }
+        }, 500);
+        return Session.get("reportArtist");
+    },
+    reportArtistOther: function(){
+        Meteor.setInterval(function(){
+            if($("#report-artist-other").is(":checked")){
+                Session.set("reportArtistOther", true)
+            } else { Session.set("reportArtistOther", false) }
+        }, 500);
+        return Session.get("reportArtistOther");
+    },
+    reportDuration: function(){
+        Meteor.setInterval(function(){
+            if($("#report-duration").is(":checked")){
+                Session.set("reportDuration", true)
+            } else { Session.set("reportDuration", false) }
+        }, 500);
+        return Session.get("reportDuration");
+    },
+    reportDurationOther: function(){
+        Meteor.setInterval(function(){
+            if($("#report-duration-other").is(":checked")){
+                Session.set("reportDurationOther", true)
+            } else { Session.set("reportDurationOther", false) }
+        }, 500);
+        return Session.get("reportDurationOther");
+    },
+    reportAlbumart: function(){
+        Meteor.setInterval(function(){
+            if($("#report-albumart").is(":checked")){
+                Session.set("reportAlbumart", true)
+            } else { Session.set("reportAlbumart", false) }
+        }, 500);
+        return Session.get("reportAlbumart");
+    },
+    reportAlbumartOther: function(){
+        Meteor.setInterval(function(){
+            if($("#report-albumart-other").is(":checked")){
+                Session.set("reportAlbumartOther", true)
+            } else { Session.set("reportAlbumartOther", false) }
+        }, 500);
+        return Session.get("reportAlbumartOther");
+    },
+    reportOther: function(){
+        Meteor.setInterval(function(){
+            if($("#report-other").is(":checked")){
+                Session.set("reportOther", true)
+            } else { Session.set("reportOther", false) }
+        }, 500);
+        return Session.get("reportOther");
+    },
     votes: function () {
         console.log(Rooms.findOne({type: Session.get("type")}).votes);
         return Rooms.findOne({type: Session.get("type")}).votes;

app/client/stylesheets/app.css

@@ -377,6 +377,10 @@ hr{
     margin-left: 38px;
 }
 
+#report_modal textarea{
+    color: black;
+}
+
 /*Media queries stay on the bottom*/
 @media screen and (max-width: 990px){
     .card i{

app/client/templates/room.html

@@ -276,14 +276,15 @@
     <!--Report modal-->
     <div id="report_modal" class="modal">
         <div class="modal-content container">
-            <h4>Reporting: {{currentSong.title}} by {{currentSong.artist}}</h4>
+            <h4>Reporting:</h4>
+            <h5>{{currentSong.title}} <span class="thin">by</span> {{currentSong.artist}}</h5>
             <div class="report-layer-1">
-                <p>
+                <div>
                     <input type="checkbox" id="report-song">
                     <label for="report-song">
                         Song
                     </label>
-                </p>
+                </div>
                 <!-- Layer2 -->
                 {{#if reportSong}}
                     <div class="report-layer-2" id="report-song-list">
@@ -304,178 +305,175 @@
                             <label for="report-song-other">
                                 Other:
                             </label>
-                            <div class="input-field">
-                                <textarea class="materialize-textarea" id="report-song-other-ta" type="text"></textarea>
-                                <label for="report-song-other-ta">What is the issue?</label>
-                            </div>
+                            {{#if reportSongOther}}
+                                <div class="input-field">
+                                    <textarea class="materialize-textarea" id="report-song-other-ta" type="text"></textarea>
+                                    <label for="report-song-other-ta">What is the issue?</label>
+                                </div>
+                            {{/if}}
                         </p>
                     </div>
                 {{/if}}
-                    <div class="checkbox">
-                        <input class="checkbox-box" type="checkbox" id="report-title">
-                        <label for="report-title">
-                            Title
-                        </label>
+                <div class="checkbox">
+                    <input type="checkbox" id="report-title">
+                    <label for="report-title">
+                        Title
+                    </label>
+                </div>
+                <!-- Layer2 -->
+                {{#if reportTitle}}
+                    <div class="report-layer-2" id="report-title-list">
+                        <p>
+                            <input type="checkbox" id="report-title-incorrect">
+                            <label for="report-title-incorrect">
+                                Incorrect
+                            </label>
+                        </p>
+                        <p>
+                            <input type="checkbox" id="report-title-inappropriate">
+                            <label for="report-title-inappropriate">
+                                Inappropriate
+                            </label>
+                        </p>
+                        <p>
+                            <input type="checkbox" id="report-title-other">
+                            <label for="report-title-other">
+                                Other:
+                            </label>
+                            {{#if reportTitleOther}}
+                                <div class="input-field">
+                                    <textarea class="materialize-textarea" id="report-title-other-ta" type="text"></textarea>
+                                    <label for="report-title-other-ta">What is the issue?</label>
+                                </div>
+                            {{/if}}
+                        </p>
                     </div>
-                    <!-- Layer2 -->
-                    {{#if reportTitle}}
-                        <div class="report-layer-2" id="report-title-list">
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-title-incorrect">
-                                <label for="report-title-incorrect">
-                                    Incorrect
-                                </label>
-                            </div>
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-title-inappropriate">
-                                <label for="report-title-inappropriate">
-                                    Inappropriate
-                                </label>
-                            </div>
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-title-other">
-                                <label for="report-title-other">
-                                    Other: <br>
-                                    <textarea class="other-textarea" id="report-title-other-ta" type="text"></textarea>
-                                </label>
-                            </div>
-                        </div>
-                    {{/if}}
-                    <div class="checkbox">
-                        <input class="checkbox-box" type="checkbox" id="report-author">
-                        <label for="report-author">
-                            Author
-                        </label>
+                {{/if}}
+                <div>
+                    <input type="checkbox" id="report-artist">
+                    <label for="report-artist">
+                        Artist
+                    </label>
+                </div>
+                <!-- Layer2 -->
+                {{#if reportArtist}}
+                    <div class="report-layer-2" id="report-artist-list">
+                        <p>
+                            <input type="checkbox" id="report-artist-incorrect">
+                            <label for="report-artist-incorrect">
+                                Incorrect
+                            </label>
+                        </p>
+                        <p>
+                            <input type="checkbox" id="report-artist-inappropriate">
+                            <label for="report-artist-inappropriate">
+                                Inappropriate
+                            </label>
+                        </p>
+                        <p>
+                            <input type="checkbox" id="report-artist-other">
+                            <label for="report-artist-other">
+                                Other:
+                            </label>
+                            {{#if reportArtistOther}}
+                                <div class="input-field">
+                                    <textarea class="materialize-textarea" id="report-artist-other-ta" type="text"></textarea>
+                                    <label for="report-artist-other-ta">What is the issue?</label>
+                                </div>
+                            {{/if}}
+                        </p>
                     </div>
-                    <!-- Layer2 -->
-                    {{#if reportAuthor}}
-                        <div class="report-layer-2" id="report-author-list">
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-author-incorrect">
-                                <label for="report-author-incorrect">
-                                    Incorrect
-                                </label>
-                            </div>
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-author-inappropriate">
-                                <label for="report-author-inappropriate">
-                                    Inappropriate
-                                </label>
-                            </div>
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-author-other">
-                                <label for="report-author-other">
-                                    Other: <br>
-                                    <textarea class="other-textarea" id="report-author-other-ta" type="text"></textarea>
-                                </label>
-                            </div>
+                {{/if}}
+                <div class="checkbox">
+                    <input type="checkbox" id="report-duration">
+                    <label for="report-duration">
+                        Duration
+                    </label>
+                </div>
+                <!-- Layer2 -->
+                {{#if reportDuration}}
+                    <div class="report-layer-2" id="report-duration-list">
+                        <div class="checkbox">
+                            <input type="checkbox" id="report-duration-long">
+                            <label for="report-duration-long">
+                                Too long
+                            </label>
                         </div>
-                    {{/if}}
-                    <div class="checkbox">
-                        <input class="checkbox-box" type="checkbox" id="report-duration">
-                        <label for="report-duration">
-                            Duration
-                        </label>
-                    </div>
-                    <!-- Layer2 -->
-                    {{#if reportDuration}}
-                        <div class="report-layer-2" id="report-duration-list">
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-duration-long">
-                                <label for="report-duration-long">
-                                    Too long
-                                </label>
-                            </div>
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-duration-short">
-                                <label for="report-duration-short">
-                                    Too short
-                                </label>
-                            </div>
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-duration-other">
-                                <label for="report-duration-other">
-                                    Other: <br>
-                                    <textarea class="other-textarea" id="report-duration-other-ta" type="text"></textarea>
-                                </label>
-                            </div>
+                        <div class="checkbox">
+                            <input type="checkbox" id="report-duration-short">
+                            <label for="report-duration-short">
+                                Too short
+                            </label>
+                        </div>
+                        <div class="checkbox">
+                            <input type="checkbox" id="report-duration-other">
+                            <label for="report-duration-other">
+                                Other: <br>
+                            </label>
+                            {{#if reportDurationOther}}
+                                <div class="input-field">
+                                    <textarea class="materialize-textarea" id="report-duration-other-ta" type="text"></textarea>
+                                    <label for="report-duration-other-ta">What is the issue?</label>
+                                </div>
+                            {{/if}}
                         </div>
-                    {{/if}}
-                    <div class="checkbox">
-                        <input class="checkbox-box" type="checkbox" id="report-audio">
-                        <label for="report-audio">
-                            Audio
-                        </label>
                     </div>
-                    <!-- Layer2 -->
-                    {{#if reportAudio}}
-                        <div class="report-layer-2" id="report-audio-list">
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-audio-inappropriate">
-                                <label for="report-audio-inappropriate">
-                                    Inappropriate
-                                </label>
-                            </div>
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-audio-not-playing">
-                                <label for="report-audio-not-playing">
-                                    Not playing
-                                </label>
-                            </div>
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-audio-other">
-                                <label for="report-audio-other">
-                                    Other: <br>
-                                    <textarea class="other-textarea" id="report-audio-other-ta" type="text"></textarea>
-                                </label>
-                            </div>
+                {{/if}}
+                <div class="checkbox">
+                    <input type="checkbox" id="report-albumart">
+                    <label for="report-albumart">
+                        Albumart
+                    </label>
+                </div>
+                <!-- Layer2 -->
+                {{#if reportAlbumart}}
+                    <div class="report-layer-2" id="report-albumart-list">
+                        <div class="checkbox">
+                            <input type="checkbox" id="report-albumart-incorrect">
+                            <label for="report-albumart-incorrect">
+                                Incorrect
+                            </label>
+                        </div>
+                        <div class="checkbox">
+                            <input type="checkbox" id="report-albumart-inappropriate">
+                            <label for="report-albumart-inappropriate">
+                                Inappropriate
+                            </label>
+                        </div>
+                        <div class="checkbox">
+                            <input type="checkbox" id="report-albumart-not-showing">
+                            <label for="report-albumart-not-showing">
+                                Not showing
+                            </label>
+                        </div>
+                        <div class="checkbox">
+                            <input type="checkbox" id="report-albumart-other">
+                            <label for="report-albumart-other">
+                                Other:
+                            </label>
+                            {{#if reportAlbumartOther}}
+                                <div class="input-field">
+                                    <textarea class="materialize-textarea" id="report-albumart-other-ta" type="text"></textarea>
+                                    <label for="report-albumart-other-ta">What is the issue?</label>
+                                </div>
+                            {{/if}}
                         </div>
-                    {{/if}}
-                    <div class="checkbox">
-                        <input class="checkbox-box" type="checkbox" id="report-albumart">
-                        <label for="report-albumart">
-                            Albumart
-                        </label>
                     </div>
-                    <!-- Layer2 -->
-                    {{#if reportAlbumart}}
-                        <div class="report-layer-2" id="report-albumart-list">
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-albumart-incorrect">
-                                <label for="report-albumart-incorrect">
-                                    Incorrect
-                                </label>
-                            </div>
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-albumart-inappropriate">
-                                <label for="report-albumart-inappropriate">
-                                    Inappropriate
-                                </label>
-                            </div>
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-albumart-not-showing">
-                                <label for="report-albumart-not-showing">
-                                    Not showing
-                                </label>
-                            </div>
-                            <div class="checkbox">
-                                <input type="checkbox" id="report-albumart-other">
-                                <label for="report-albumart-other">
-                                    Other: <br>
-                                    <textarea class="other-textarea" id="report-albumart-other-ta" type="text"></textarea>
-                                </label>
-                            </div>
+                {{/if}}
+                <div class="checkbox">
+                    <input type="checkbox" id="report-other">
+                    <label for="report-other">
+                        Other: <br>
+                    </label>
+                    {{#if reportOther}}
+                        <div class="input-field">
+                            <textarea class="materialize-textarea" id="report-other-ta" type="text"></textarea>
+                            <label for="report-other-ta">What is the issue?</label>
                         </div>
                     {{/if}}
-                    <div class="checkbox">
-                        <input class="checkbox-box" type="checkbox" id="report-other">
-                        <label for="report-other">
-                            Other: <br>
-                            <textarea class="other-textarea" id="report-other-ta" type="text"></textarea>
-                        </label>
-                    </div>
                 </div>
-                <button type="button" id="report-song-button" class="button">Submit</button>
+            </div>
+            <a id="report-song-button" class="waves-effect waves-light btn">Report Song</a>
         </div>
         <div class="divider"></div>
         <div class="modal-footer">