dj_manage_albums.html

{% extends "base.html" %}

{% block title %}Manage Albums{% endblock %}

{% block extra_scripts %}
<script type='text/javascript'>
    var newalbumlookup = "";
    var oldalbumlookup = "";
    var newalbumtimeout = null;
    var oldalbumtimeout = null;
    $(function() {
        $('#manual-album-form').submit(addManualAlbum);
        $("#album-lookup").keyup(function(e) {
            if ($("#album-lookup").val() == "") {
                $("#add-album-update").slideUp("slow");
            } else if ($("#album-lookup").val() != newalbumlookup || e.keyCode == 13) {
                clearTimeout(newalbumtimeout);
                newalbumlookup = $("#album-lookup").val();
                newalbumtimeout = setTimeout("amazonlookup(\"" + newalbumlookup + "\")", 300);
            }
        });
    });


    function amazonlookup(keywords) {
        $.get('/ajax/albuminfo',
        {
            'keywords': keywords,
        },
        function(data) {
            $("#add-album-results").slideUp("fast",function() {
                $("#add-album-results").html(data.updatehtml);
                $("#add-album-list li").click(addAmazonAlbum);
           });
            $("#add-album-update").slideDown("slow");
            $("#add-album-results").slideDown("fast");
        });
    };

    function addAmazonAlbum() {
        $(this).addClass("album-processing")
        $.post("/dj/albums",
        {
            'ajax': 1,
            'asin': $(this).attr("id"),
            'action': "add",
        },
        function(data) {
            if (data.err) {
                this.removeClass("album-processing");
                alert(data.err);
            } else {
                $(this).removeClass("album-processing");
                $("#add-album-update").hide("slow");
                $("#amazon_msgbox").append(
                    '<div class="alert alert-success alert-block">'
                        +'<a class="close" data-dismiss="alert" href="#">'
                        +'&times;</a>'
                        +'<h4 class="alert-heading">Success!</h4>'
                        +data.msg+'</div>');
            }
        });
    }

    function addManualAlbum() {
        $(this).addClass("album-processing");
        $.post("/dj/albums",
               {
                   'ajax': 1,
                   'action': 'manual',
                   'title': $("#manual-title").val(),
                   'artist': $("#manual-artist").val(),
                   'cover_url': $("#manual-url").val(),
                   'track-list': $("#manual-track-list").val(),
               },
               function(data) {
                   if (parseInt(data.result) != 0) {
                       $("#manual-album-form").removeClass("album-processing");
                       $("#manual_msgbox").append(
                           '<div class="alert alert-error alert-block">'
                               +'<a class="close" data-dismiss="alert"'
                               +'href="#">'
                               +'&times;</a>'
                               +'<h4 class="alert-heading">Bzzt!</h4>'
                               +data.msg+'</div>');
                   } else {
                       $("#manual-album-form").removeClass("album-processing");
                       $("#manual_msgbox").append(
                           '<div class="alert alert-success alert-block">'
                               +'<a class="close" data-dismiss="alert" href="#">'
                               +'&times;</a>'
                               +'<h4 class="alert-heading">Success!</h4>'
                               +data.msg+'</div>');
                       $("#manual-album-form").clearForm();
                       $("#manual-cover-preview-image").attr("src", '/static/images/noalbumart.png');
                   }
               });
        return false;
    }


    function toggleNew() {
        var checkbox = this.getElementsByTagName("input");
        var li = $(this);
        if (li.hasClass("newalbum")) {
            li.removeClass("newalbum").addClass("workingalbum");
            $.post("/dj/albums/", { 'action': "makeOld", 'key': li.attr("id") },
                function(data) {
                    li.removeClass("workingalbum").addClass("oldalbum");
                    $(checkbox).attr("checked", false);
                    $("#msgbox").html(data.msg);
                }
            );
        } else if (li.hasClass("oldalbum")) {
            li.removeClass("oldalbum").addClass("workingalbum");
            $.post("/dj/albums/", { 'action': "makeNew", 'key': li.attr("id") },
                function(data) {
                    li.removeClass("workingalbum").addClass("newalbum");
                    $(checkbox).attr("checked", true);
                    $("#msgbox").html(data.msg);
                }
            );
        }
    }

    $(function() {
        $("#manage-albums-list li").click(toggleNew);
        $("#manual-url").change(function() {
            $("#manual-cover-preview-image").attr("src", $(this).val());
        });
    });

</script>
{% endblock %}

{% block top_row %}
<div class="span12">
  <h1>Album Management</h1>
  <hr>
</div>
{% endblock %}

{% block left_column %}
<div id='add-album'>
  <h2>Add Album from Amazon</h2>
  <div>
    <form class="form-search">
      <input type='text' class="span7 search-query"
             id='album-lookup' placeholder="Search Amazon">
    </form>
    <div class="row">
      <div class="span8">
        <div id='add-album-update' class="well">
          <h3>Search Results</h3>
          <div id='add-album-results'>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div id="amazon_msgbox"></div>
  <div id='new-albums'>
    <h2>On the New Shelf</h2>
    {% if new_album_html %}
    {{ new_album_html|safe }}
    {% else %}
    {% include "dj_manage_new_albums_list.html"}
    {% endif %}
  </div>
</div>
{% endblock %}


{% block right_column %}
    <div id='add-album-manual'>
        <h2>Add Album Manually</h2>
        <form id='manual-album-form' action='/dj/albums' method='post'>
          <input type='hidden' name='action' value='manual'>
          <label for='manual-title'>Title
          <input type='text' name='title' id='manual-title' >
          </label>
          <label for='manual-artist'>Artist
          <input type='text' class='artist-autocomplete' name='artist'
                 id='manual-artist'>
          </label>
          <div id='manual-cover-preview'>
          <label for='manual-url'>URL to artwork
          <input type='text' name='cover_url' id='manual-url'
                 value='/static/images/noalbumart.png'>
           </label>
            <img src='/static/images/noalbumart.png'
                 id='manual-cover-preview-image' >
          </div>
          <label>Track List
            <textarea id='manual-track-list' name='track-list'
                      class="span4"
                      style="height: 120pt"></textarea>
          </label>
            <input id='manual-album-submit'
                   class="btn btn-primary"
                   type='submit' name='submit' value='Add'>
        </form>
    </div>
{% endblock %}