cciw-website / templates / cciw / officers / officer_list.html

{% extends "cciw/officers/base.html" %}
{% load url from future %}
{% load adminmedia %}
{% block title %}Officer list :: CCIW{% endblock %}

{% block extrastyle %}{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% admin_media_prefix %}css/forms.css" />

{% endblock %}
{% block bodyclass%}change-form{% endblock %}

{% block content %}<div id="content-main">
<h1>Officer list - {{ camp }}</h1>

<p>This page can be used for viewing and managing the officers on your list,
 and for viewing those who have not yet filled in an application form.</p>

<div style="float: left; width: 44em;">
<h2>Current list</h2>

{% include "cciw/officers/officer_list_table_editable.html" %}

</div>
<div style="margin-left: 45em;">
<h2 style="margin-top: 2em;">Add to list</h2>

<div class="selector-filter">
 <a href="#" id="id_add_officer_btn">Add  <img style="vertical-align: middle"
 alt="Add" src="{{ STATIC_URL }}images/officer-list-add.gif" /></a>
 &nbsp;&nbsp;&nbsp;
 <input type="text" id="id_available_officers_filter" />
 <img style="vertical-align: middle" alt="search" src="{% admin_media_prefix %}img/admin/selector-search.gif" />
</div>
<div>
<select multiple="multiple" id="id_available_officers" style="min-width:30em;height: 30em;" name="officers">
{% include "cciw/officers/officer_list_available.html" %}
</select>
</div>

<h3>Help</h3>
<ul>
<li>Add an officer from by double clicking on the entry,
 or by selecting and pressing 'Enter' or clicking the 'Add' button.</li>
<li>Use Shift or Ctrl buttons to select multiple officers.</li>
<li>Type in the search box to quickly find an officer.</li>
<li>Officers from last year are at the start of the list and starred (if the information is available)</li>
</ul>

<h2>New officer</h2>

<ul>
<li>Got a new officer who isn't in the list above?
 <a href="#" id="id_new_officer_btn">Add them</a>.</li>
<li>If you have a list on a computer, you can <a href="mailto:webmaster@cciw.co.uk">e-mail
  the webmaster</a> to have them imported more quickly.</li>
</ul>

</div>

<br style="clear: left;" />
<script type="text/javascript">
//<![CDATA[
(function($){
    // Code specific to page

    // Global that is true if a row of officer details is in 'edit mode'
    var editOfficerMode = false;

    var refreshLists = function() {
        // Refresh different areas of the page:
        $.ajax({
            type: "GET",
            url: "?sections=1&" + Math.random().toString(),
            dataType: 'json',
            success: function(data) {
                refreshChosenList(data.chosen);
                refreshAvailableList(data.available);
                refreshNoApplicationFormList(data.noapplicationform);
            }
        });
    };

    var refreshChosenList = function(text) {
        $("#id_officer_list_table").children().remove();
        $("#id_officer_list_table").html(text);
        editOfficerMode = false;
        addOfficerListHandlers();
    };

    var refreshAvailableList = function(text) {
        var selectedIdx = document.getElementById("id_available_officers").selectedIndex;
        $("#id_available_officers").html(text);
        // restore filter
        $("#id_available_officers_filter").trigger('refresh');
        // restore selected item
        var s = document.getElementById("id_available_officers");
        s.selectedIndex = Math.min(selectedIdx, s.options.length - 1);
    };

    var refreshNoApplicationFormList = function(text) {
        $("#id_noapplicationform").html(text);
    };

    var addOfficerListHandlers = function() {
        // event handlers for all 'edit' buttons
        $(".editbtn").click(function(ev) {
            ev.preventDefault();
            if (editOfficerMode) {
                alert("Please finish editing the other row first");
                return;
            }
            editOfficerMode = true;
            var officerId = parseFloat(ev.target.id.substring(8), 10);
            // Need to retrieve details (we don't know first name and last name)
            $.ajax({
                type: "GET",
                url: "{% url 'cciw.officers.views.officer_details' %}?officer_id=" + officerId.toString() + "&" + Math.random().toString(),
                dataType: 'json',
                success: function(officer) {
                    var escape = function(t) {
                        return $('<div/>').text(t).html();
                    };
                    var row = $('#id_officer_table_tr_' + officerId.toString());
                    // Make input boxes, and save/cancel buttons
                    row.html('<td>' +
                                '<nobr><input size=6 id="id_officer_first_name" type="text" value="' +
                                    escape(officer.first_name) + '" />' +
                                '<input size=6 id="id_officer_last_name" type="text" value="' +
                                    escape(officer.last_name) + '" /></nobr>' +
                             '</td>' +
                             '<td><input size=30 id="id_officer_email" type="text" value="' +
                                escape(officer.email) + '" /></td>' +
                             '<td colspan=2><a href="#" id="id_officer_save">Save</a> / ' +
                             '<a href="#" id="id_officer_cancel">Cancel</a> </td>');
                    // 'Cancel' handler:
                    row.find('#id_officer_cancel').click(function(ev) {
                        ev.preventDefault();
                        refreshLists();
                    });
                    // 'Save' handler
                    row.find('#id_officer_save').click(function(ev) {
                        ev.preventDefault();
                        officer.first_name = $('#id_officer_first_name').val();
                        officer.last_name = $('#id_officer_last_name').val();
                        officer.email = $('#id_officer_email').val();
                        $.ajax({
                            type: 'POST',
                            url: "{% url 'cciw.officers.views.update_officer' %}",
                            data: {'officer_id': officer.id,
                                   'first_name': officer.first_name,
                                   'last_name': officer.last_name,
                                   'email': officer.email
                                   },
                            dataType: 'json',
                            success: refreshLists
                        });
                    });
                }
            });
        });

        // event handlers for 'remove' buttons
        $(".removebtn").click(function(ev) {
            var officerId = parseFloat(ev.target.id.substring(10), 10);
            // Remove from list
            $.ajax({
                type: "POST",
                url:  "{% url 'cciw.officers.views.remove_officer' camp.year camp.number %}",
                data: "officer_id=" + officerId.toString(),
                dataType: 'json',
                success: refreshLists
            });
            ev.preventDefault();
        });

        // event handlers for 'email' buttons
        $(".emailbtn").click(function(ev) {
            ev.preventDefault();
            if (confirm("This will reset the officer's password and re-send the initial signup e-mail.  Continue?")) {
                var officerId = parseFloat(ev.target.id.substring(9), 10);
                $.ajax({
                    type: "POST",
                    url: "{% url 'cciw.officers.views.resend_email' %}",
                    data: "officer_id=" + officerId.toString(),
                    dataType: 'json'
                });
            }
        });
    };

    var officerAddHandler = function(ev) {
        if (ev.type == "keyup") {
            var code = (ev.keyCode ? ev.keyCode : ev.which);
            if (code != 13) { // Enter
                return;
            }
        }
        var officer_ids = [];
        var options = $('#id_available_officers').get(0).options;
        for (var i = 0; i < options.length; i++) {
            if (options[i].selected) {
               officer_ids.push(options[i].value)
            }
        }
        if (officer_ids.length == 0) {
            return;
        }
        $.ajax({
            type: "POST",
            url: "{% url 'cciw.officers.views.add_officers' camp.year camp.number %}",
            data: "officer_ids=" + officer_ids.join(','),
            dataType: 'json',
            success: refreshLists
        });
    };

    var newOfficerHandler = function(ev) {
        var popup = $('#id_add_officer_popup');
        popup.find(".iframe_container").html('<iframe src="{% url 'cciw.officers.views.create_officer' %}?is_popup=1&camp_id={{ camp.id }}" width="780" frameborder="0" height="400">');
        popup.css({
            "position": "fixed",
            "top": ($(window).height()/2 - popup.height()/2).toString() + "px",
            "left": ($(window).width()/2 - popup.width()/2).toString() + "px"
        });
        popup.fadeIn("fast");
        $('#id_popup_background').fadeIn('fast');
        ev.preventDefault();
    };

    var newOfficerClose = function(ev) {
        refreshLists();
        $('#id_add_officer_popup').fadeOut('fast');
        $('#id_popup_background').fadeOut('fast');
        ev.preventDefault();
    };

    $(document).ready(function(){
        $("#id_available_officers_filter").multiSelectFilter("#id_available_officers");
        addOfficerListHandlers();
        $("#id_available_officers")
           .dblclick(officerAddHandler)
           .keyup(officerAddHandler);
        $('#id_add_officer_btn').click(officerAddHandler);
        $('#id_new_officer_btn').click(newOfficerHandler);
        $('#id_popup_close_btn').click(newOfficerClose);
        $("#loading").ajaxStart(function(){
            $(this).show();
        });
        $("#loading").ajaxStop(function(){
            $(this).hide();
        });
    });
})(jQuery);
//]]>
</script>

<h3>List address:</h3>
<p>The above list of officers can be emailed at:
<strong><a href="mailto:{{ address_all }}">{{ address_all }}</a></strong></p>

{% include "cciw/officers/email_list_note.html" %}

<div id="id_noapplicationform">
{% include "cciw/officers/officer_list_noapplicationform.html" %}
</div>

</div> {# id=content-main #}

<div id="id_add_officer_popup" class="inlinepopup">
<div class="closebar">
<a href="#" id="id_popup_close_btn">Close</a>
</div>
<div class="iframe_container">
</div>
</div>

<div class="inlinepopup_background" id="id_popup_background"></div>

<div id="loading" style="text-align: center; background-color: white; border: 1px solid #888; position: fixed; bottom: 0px; right: 0px; width: 224px; height: 40px; display: none;">
<img src="{{ STATIC_URL }}images/loading.gif" alt="" />
<br/>Loading...
</div>
{% endblock %}
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.