MusareMeteor/app/client/templates/queues.html

<template name="queues">
    {{> alerts}}
    <div class="landing">
        {{> header}}
        <div class="row">
            {{#each queues}}
                <div class="col m8 s8 l8 offset-l2 offset-m1 offset-s2 admin-queue-panel card-panel teal accent-3">
                    <div class="card-content white-text">
                        <h3 class="text-center">{{display}} review queue</h3>
                        <table class="bordered">
                            <thead>
                            <tr>
                                <th>Title</th>
                                <th>Artist(s)</th>
                                <th>Type</th>
                                <th>Id</th>
                                <th>Likes</th>
                                <th>Dislikes</th>
                                <th>Img</th>
                                <th>Preview</th>
                                <th>Edit</th>
                                <th>Add</th>
                                <th colspan="10">Remove</th>
                            </tr>
                            </thead>
                            <tbody>
                            {{#each songs}}
                                <tr>
                                    <th scope="row">{{title}}</th>
                                    <td>{{artist}}</td>
                                    <td>{{type}}</td>
                                    <td>{{id}}</td>
                                    <td>{{likes}}</td>
                                    <td>{{dislikes}}</td>
                                    <td>
                                        <a class="waves-effect waves-light btn modal-trigger preview-modal-button"
                                           href="#previewModal">Preview Modal</a>
                                    </td>
                                    <td>
                                        <button class="btn preview-button preview-modal-button" data-toggle="modal"
                                                data-target="#previewModal">Preview
                                        </button>
                                    </td>
                                    <td>
                                        <button class="btn edit-queue-button" data-genre="{{../type}}"
                                                data-toggle="modal" data-target="#editModal">Edit
                                        </button>
                                    </td>
                                    <td>
                                        <button class="btn green add-song-button" data-genre="{{../type}}"><i
                                                class="material-icons">thumb_up</i></button>
                                    </td>
                                    <td>
                                        <button class="btn red deny-song-button" data-genre="{{../type}}"><i
                                                class="material-icons">thumb_down</i></button>
                                    </td>
                                </tr>
                            {{/each}}
                            </tbody>
                        </table>
                    </div>
                </div>
            {{/each}}
        </div>

        <div id="previewModal" class="modal">
            <div class="modal-content">
                <h4>Preview</h4>
                <div width="960" height="540" id="previewPlayer"></div>
                <button id="play" title="Play video" class="btn btn-success"><i class="fa fa-play"></i></button>
                <button id="stop" title="Stop video" class="btn btn-danger" disabled><i class="fa fa-stop"></i>
                </button>
                <button id="forward" title="Go to the last 10 seconds of the video" class="btn btn-primary"><i
                        class="fa fa-fast-forward"></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">
                <a href="#!" class=" modal-action modal-close waves-effect waves-light btn-flat">Close</a>
            </div>
        </div>
    </div>
    <!--div id="previewImageModal" class="modal modal-fixed-footer" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Preview Image</h4>
                </div>
                <div class="modal-body">
                    <img alt="Not loading" id="preview-image" height="210px" width="210px" src=""/>
                </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 id="editModal" class="modal modal-fixed-footer">
        <div class="modal-content">
            <div class="row">
                <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>
                    <input class="validate" name="mid" id="mid" type="text" pattern=".{6}"/>
                </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 ID</label>
                    <input class="validate" name="id" id="id" type="text" pattern=".{11}"/>
                </div>
                <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
                    <i class="material-icons prefix">person</i>
                    <label for="id" class="white-text">Song Artist</label>
                    <input class="validate" name="artist" id="artist" aria-required="true" type="text"/>
                </div>
                <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
                    <i class="material-icons prefix">subject</i>
                    <label for="title" class="white-text">Song Title</label>
                    <input class="validate required" name="title" id="title" type="text"/>
                </div>
                <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
                    <i class="material-icons prefix">timelapse</i>
                    <label for="title" class="white-text">Song Duration</label>
                    <input class="validate" name="duration" id="duration" type="number" min="0"/>
                </div>
                <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
                    <i class="material-icons prefix">timer_off</i>
                    <label for="skip-duration" class="white-text">Skip Duration</label>
                    <input class="validate" id="skip-duration" type="number" min="0"/>
                </div>
                <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
                    <i class="material-icons prefix">thumb_up</i>
                    <label for="likes" class="white-text">Likes</label>
                    <input disabled id="likes" type="number"/>
                </div>
                <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
                    <i class="material-icons prefix">thumb_down</i>
                    <label for="dislikes" class="white-text">Dislikes</label>
                    <input disabled id="dislikes" type="number"/>
                </div>
                <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
                    <i class="material-icons prefix">image</i>
                    <label for="img" class="white-text">Song Image</label>
                    <input class="validate" name="img" id="img" type="url"/>
                </div>
            </div>
            <button type="button" id="get-spotify-info" class="button">Get Spotify Data</button>
            <button type="button" id="save-song-button" class="button">Save Changes</button>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-light btn-flat ">X</a>
        </div>
    </div>
</template>