dj_chartsong.html

{% extends "base.html" %}

{% block extra_scripts %}
<script type='text/javascript'>
$(function() {
    $("div.btn-group[data-toggle-name=isNew]").each(function() {
        var group = $(this);
        var form = group.parents("form").eq(0);
        var name = group.attr("data-toggle-name");
        var hidden = $('input[name="' + name + '"]', form);
        $("button", group).each(function() {
            var button = $(this);
            button.live("click", function() {
                hidden.val($(this).val());
                if(button.val() == "0") {
                    $("#new-song-div").slideUp("fast");
                    $("#old-song-div").slideDown("fast");
                }
                if(button.val() == "1") {
                    $("#new-song-div").slideDown("fast");
                    $("#old-song-div").slideUp("fast");
                }
            });
            if(button.val() == hidden.val()) {
                button.addClass('active');
            }
        });
    });
    $("#is-new").change(function() {

    });
    $("#played_list li a").click(function() {
      var play_key = $(this).parent().attr("id");
      $.post(
        '/dj/removeplay/',
        {
          'play_key': play_key,
        },
        function(data) {
          if (data.err) {
            alert(data.err);
            return;
          }
          $("#" + play_key).hide();
        }
      );
      return false;
    });
    $("#album_key").change(function() {
        $.get(
            '/ajax/getSongList/',
            {
                'album_key': $(this).val(),
            },
            function(data) {
                if (data.err) {
                    alert(data.err);
                    return;
                }
                $("#song_key_list").html(data.songListHtml);
            });
    });
});
</script>
{% endblock %}

{% block main_content %}
<div class="row">
<div class="span12">
  <h1>Chart a Song</h1>
  <p>Hello, <strong>{{ session.dj.fullname }}</strong>. You are presently charting for
    the show, <em>{{ session.program.title }}</em>.</p>
  <hr>
</div>
</div>
<div class="row">
  <div class="span6">

    <div>
      <h2>Chart Song</h2>
      <form action='/dj/chartsong/' method='post'>
        <label>My song is...
        </label>
        <div class="btn-group" data-toggle-name="isNew" data-toggle="buttons-radio">
          <button type="button" class="btn" value="0">An older song</button>
          <button type="button" class="btn" value="1">Off the new shelf</button>
        </div>
        <br>
        <input id="is-new" type="hidden" name='isNew' value="0">
        <div id='old-song-div'><label>Track Name
            <input type='text' name='trackname' id='trackname'
                   tabindex='1' class="span5">
          </label>
          <label>Artist
            <input type='text' class='span5 artist-autocomplete'
                   name='artist' tabindex='2' id='artist'>
          </label>
        </div>
        <div id='new-song-div'>
          {% if new_song_div_html %}
          {{ new_song_div_html|safe }}
          {% else %}
          <label>Album</label>
          <br>
          <select class="span5" name='album_key' id='album_key'>
            {% for album in new_albums %}
            <option value='{{ album.key }}'>{{ album.artist }} - {{ album.title }}</option>
            {% endfor %}
          </select>
          <label>Song</label>
          <select class="span5" name='song_key' id='song_key_list'>
            {% for song in album_songs %}
            <option value='{{ song.key }}'>{{ song.title }}</option>
            {% endfor %}
          </select>
          {% endif %}
        </div>
        <button name='submit' class="btn btn-primary" 
                value="Chart Song">
          <i class="icon-ok icon-white"></i> Chart!
        </button>
      </form>
    </div>
    <div class="alert">
      If you are unable to chart, please <a href='mailto:cmsmith@bowdoin.edu'>email me</a> ASAP with your full name, the name of your program, and the names of your co-DJs, if any.
    </div>

  </div>
  <div id='psa-status' class="span3">
    <h2>Log a PSA</h2>
    <form action='/dj/chartsong/' method='post'>
      <label>PSA Description
        <input type='text' name='psa_desc' /></label> 
      <button class="btn btn-primary" name='submit' value="PSA">
        Log PSA
      </button>
    </form>
    <p>{% if last_psa %} The last PSA (<i>{{ last_psa.desc }}</i>)
      was played at {{ last_psa.play_date|date:"h:i" }}, or 
      {{ last_psa.play_date|timesince }} ago.
      {% else %} There have been no PSAs played. {% endif %}</p>
  </div>
  <div id='station-id' class="span3">
    <h2>Log a Station ID</h2>
    <form action='/dj/chartsong/' method='post'>
      <button class="btn btn-primary" name='submit'
              value="Station ID">
        Log Station ID
      </button>
    </form>
  </div>
</div>
<div class="row">
  <div id='current-playlist' class="span6">
    <div class="well">
    <h2>Last Played</h2>
    <ul id='played_list'>
      {{ playlist_html|safe }}
    </ul>
    </div>
  </div>
  <div id='blog-posts' class="span6">
    {% include "last_n_posts.html" %}
  </div>
</div>
  {% endblock %}