gistfile1.mustache

{% extends "main-site/base.html" %}
{% load sekizai_tags %}



{% block content %}
<div id="menu-editor">
<h1>Your Menus</h1>
{% for menu in menus %}
<div class="menu sortableCats" rel="{{ menu.id }}">
    <h2 class="tk-urbana">{{ menu.name }}</h2>
    {% for category in menu.category_set_order %}
    <fieldset id="category_{{ category.id }}" rel="{{ category.id }}">
        <legend>{{ category.name }}</legend>
        <div class="add_item">( + )</div>
        <ul class="sortable">
        {% for item in category.item_set_order %}
            <li class="ui-state-default item" id="item_{{ item.id }}">
                {{ item.name }}
                <div class="edit" rel="{% url menus:edit_item item.id %}">( e )</div>
            </li>
        {% endfor %}
        </ul>
    </fieldset>
    {% endfor %}
    <div class="add_category button tk-urbana">Add Category ></div>

</div>
{% endfor %}
<div class="form_addition" id="category_form">
<form>
{% csrf_token %}
{% for field in category_form %}
    {% include '_partial/formfield.html' with field=field %}
{% endfor %}
<button type="button">Add Category</button>
</form>
</div>
<div class="form_addition" id="item_form">
<form>
{% csrf_token %}
{% for field in item_form %}
    {% include '_partial/formfield.html' with field=field %}
{% endfor %}
<button type="button">Add Item</button>
</form>
</div>
<div id="edit_container"></div>

</div>


{% addtoblock "js" %}
    <script src="{{ STATIC_URL }}js/jquery-1.6.2.min.js"></script>
    <script src="{{ STATIC_URL }}libs/jquery-ui/js/jquery-ui.min.js"></script>
    <script src="{{ STATIC_URL }}js/csrf_ajax.js"></script>
    <script type="text/javascript">
    
    $(function() {
        function update_menu() {
            var items = {}
            $('.sortableCats fieldset').each(function(i) {
                var cat_id = $(this).attr('id');
                items[cat_id] = {'order': i, 'items': {}}
                $(this).children('.sortable').children('li.item').each(function(i) {
                    items[cat_id]['items'][i] = $(this).attr('id');
                });
            });
            $.post('{% url menus:menus %}', {
                'menu_objects':JSON.stringify(items),
                'csrfmiddlewaretoken': $('#csrfmiddlewaretoken').val()}, 'json');
        }
        $('.sortable').sortable({
            update: function(event, ui) {
                update_menu();
            }
        });
        $('.sortable').disableSelection();

        $('.sortableCats').sortable({items:'fieldset',
            update: function(event, ui) { update_menu(); }
        
        });
        $('.sortablecats').disableSelection();
    });
    $(document).ready(function() {
        $('.add_category').click(function(e) {
            e.preventDefault();
            $('#category_form #id_menu').val($(this).parent().attr('rel'));
            $('#category_form').show();
        });
        $('.add_item').click(function(e) {
            e.preventDefault();
            $('#item_form #id_category').val($(this).parent().attr('rel'));
            $('#item_form').show();
        });
        $('.edit').click(function(e) {
            e.preventDefault();
            $.get($(this).attr('rel'), function(data){
                if(data.success == true) {
                    $('#edit_container').html(data.html);
                }
            });
        });
        $('.form_addition button').click(function() {
            var cont = $(this).parent().parent().attr('id');
            if(cont == 'category_form') {
                var url = '{% url menus:add_category %}';
            } else if(cont == 'item_form') {
                var url = '{% url menus:add_item %}';
            }
            $.post(url,
                $(this).parent().serialize(), function(data) {
                    if(data.success == true) {
                        window.location.reload();
                    } else {
                        var form = $('#'+cont+' form');
                        $.each(data.errors, function(index, value) {
                            form.children('#ctrl-id_'+index).addClass('error');
                            $.each(value, function(i) {
                                form.children('#ctrl-id_'+index).children('ul.formHint').append('<li>' + value[i] + '</li>');
                            });
                        });
                    }
                });
        });
    });
    </script>
{% endaddtoblock "js" %}

{% endblock %}