dj_manage_programs.html

{% extends "base.html" %}

{% block extra_scripts %}
    <script type='text/javascript'>
    function slugify(text) {
        text = text.toLowerCase();
        text = text.replace(/[^-a-zA-Z0-9\s]+/ig, '');
        text = text.replace(/-/gi, "-");
        text = text.replace(/\s/gi, "-");
        return text;
    }

    var djbutton = $("<tr></tr>");
    djbutton.append($("<td><a>&times;</a></td>"))
    djbutton.append($("<td id=\"djname\"></td>"));
    djbutton.append($("<td id=\"djemail\">Email</td>"));
    djbutton.append($("<input type=\"hidden\" id=\"djkey\""+
                      " name=\"djkey\" value=\"\"/>"));

    function addDjToProgram(key, name, email) {
        var newbutton = djbutton.clone();
        newbutton.find("#djname").text(name);
        newbutton.find("#djemail").text(email);
        newbutton.find("#djkey").val(key);
        $("#show-dj-list").find("tbody").append(newbutton);
        $("#dj-table").removeClass("hidden-djs");
        $("#no-dj-alert").addClass("hidden-djs");
    }

    $(function() {
        $("a.delete").click(function(e) {
          var dj_key = $(this).parent().attr("id");
          dj_key = dj_key.split("_")[1];
          var permission_key = $(this).parent().parent().attr("id");
          $.post("/dj/permissions",
          {
            'dj_key': dj_key,
            'permission_key': permission_key,
            'action': 'remove',
          },
          function(data) {
            if (data.err) {
              alert(data.err);
            } else {
              $("#" + permission_key + "_" + dj_key).remove();
            }
          }, "json");
          return false;
        });

        $("#title").focusout(function() {
            $("#title").each(function(index) {
                if($("#slug").val().length > 0) {
                    return;
                }
                var tempslug = slugify($(this).val());
                $("#slug").val(tempslug);
                $("#slugified-slug").text(tempslug);
            });
        });
        $("#slug").focusout(function() {
            $("#slug").each(function(index) {
                $("#slugified-slug").text(slugify($(this).val()));
            });
        });
        if ($(".dj-autocomplete-program").length > 0) {
        $(".dj-autocomplete-program").each(function(index) {
            $(this).autocomplete({
                serviceUrl: '/ajax/djcomplete',
                minChars: 1,
                width: $(".dj-autocomplete-program").width(),
                maxHeight: 400,
                onSelect: function(value, data) {
                    addDjToProgram(data["key"], data["name"], data["email"]);
                },
            });
        });
    }
    });

</script>
{% endblock %}

{% block main_content %}
<div class="row">
  <div class="span12">
    <h1>Manage Programs</h1>
    <hr>
  </div>
</div>
<div class="row">
  <div class="span7">
    <h2>{% if program %}Edit{% else %}Add{% endif %} Program</h2>
    <form action='/dj/programs/{% if program %}{{ program.key }}/{% endif %}' method='post'>
    <h3>Program information</h3>
      <label for='title'>Title
      </label>
        <input id='title' type='text' name='title' value='{{ program.title|escape }}'/>

      <label for='slug'>Slug
      </label>
        <div class="control-group">
        <input id='slug' type='text' name='slug'
               value='{{ program.slug }}' />
        <span class="help-inline">Will format as: 
          <span id="slugified-slug">{{ program.slug }}</span>
        </span>
        </div>

      <label for='current' class='checkbox'>
        <input id='current' type='checkbox' name='current' value='1'
               {% if not program or program.current %}checked='checked'{% endif %}
               /> This show is on the air this season
      </label>

      <label for='desc'>Description
      </label>
        <textarea name='desc' class="span5" rows=7 
                  id='desc'>{{ program.desc|escape }}</textarea>
      <br>

      <label for='page_html'>Page HTML
      </label>
        <textarea class='tinymce' name='page_html'
                  id='page_html'>{{ program.page_html|escape }}</textarea>
      <br>

      <h3>Program DJs</h3>
      <div id="dj-table"
           class="{% if not program or not program.dj_list %}hidden-djs{% endif %}">
      <label>DJs presently in program
      </label>
        <table id="show-dj-list" class="table table-bordered
                                        table-striped">
          <thead><tr><th>Remove?</th><th>Name</th><th>Email</th></tr></thead>
          <tbody>{% for dj in program_djs %}
            <tr><td><a>×</a></td>
              <td id="djname">{{ dj.p_fullname }}</td>
              <td id="djemail">{{ dj.p_email }}</td>
              <input type="hidden" id="djkey" name="djkey" 
                     value="{{ dj.key }}"></tr> 
            {% endfor %}</tbody>
        </table>
      </div>
      <div id="no-dj-alert"
           class="{% if program and program.dj_list %}hidden-djs{% endif %} alert">
        There are presently no DJs in this program! Ancient
        proverb says; <em>a program without DJs is like a bird without
        a beak</em>. You should probably add some.
      </div>

      <label for="djsearch">Add a DJ
      </label>
        <input class="dj-autocomplete-program span6" type="text"
               name="djautosearch" id="djsearch" autocomplete="on"
               placeholder="Start typing to search DJs">

        <div class="form-actions">
      <input type='submit' class="btn btn-primary"
             name='submit' value="{% if program %}Edit{% else %}Add{% endif %} Program">
      {% if program %}
      <input id='delete-button' type='submit' name='submit'
             class="btn btn-danger" value='Delete Program' />

      {% endif %}
        </div>
    </form>
  </div>

  <div class="span5">
    <h2>Find a Program</h2>
    <h3>Most recently added</h3>
    <ul>
      {% for p in new_programs %}
      <li><a href="/dj/programs/{{ p.key }}">{{ p.p_title }}</a></li>
      {% endfor %}
    </ul>
    <h3>Search programs</h3>
    <form class="form-search">
      <input type="text" class="span3 search-query" 
             placeholder="Search programs"/>
      <input type="button" class="btn btn-primary" value="Search!" />
    </form>
  </div>
</div>
{% endblock %}