blechreiz-website/scoremanager/templates/scoremanager/manage_repertoire.html

{% extends "website/base.html" %} {% load sekizai_tags static %} {% block content %} {% addtoblock "js" strip %}
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
{% endaddtoblock %} {% addtoblock "js" strip %}
<script src="{{STATIC_URL}}js/List.js"></script>
{% endaddtoblock %} {% addtoblock "js" strip %}
<script src="{{STATIC_URL}}js/List.pagination.js"></script>
{% endaddtoblock %} {% addtoblock "css" strip %}
<link
    rel="stylesheet"
    href="{{STATIC_URL}}css/jquery-ui-1.8.21.custom.css"
    type="text/css"
    media="screen"
/>
{% endaddtoblock %} {% addtoblock "css" %}
<style>
    .piecelist {
        position: relative;
        padding: 45px 15px 15px;
        margin: 0 -15px 15px;
        background-color: #fafafa;
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);
        border-color: #e5e5e5 #eee #eee;
        border-style: solid;
        border-width: 1px 0;
        min-height: 500px;
    }

    .piecelist:after {
        content: "Stückliste";
        position: absolute;
        top: 15px;
        left: 15px;
        font-size: 12px;
        font-weight: bold;
        color: #bbb;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .piecelist + .highlight {
        margin: -15px -15px 15px;
        border-radius: 0;
        border-width: 0 0 1px;
    }

    @media (min-width: 768px) {
        .piecelist {
            margin-left: 0;
            margin-right: 0;
            background-color: #fff;
            border-width: 1px;
            border-color: #ddd;
            border-radius: 4px 4px 0 0;
            box-shadow: none;
        }
        .piecelist + .highlight {
            margin-top: -16px;
            margin-left: 0;
            margin-right: 0;
            border-width: 1px;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
        }
    }

    input[type="text"].pieceSearch {
        float: right;
        z-index: 2;
        margin-top: 15px;
        margin-right: 15px;
        font-size: 0.8em;
        height: 12px;
        width: 165px;
        position: relative;
    }

    ul.piecelist {
        list-style-type: none;
    }

    ol.piecelist {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 0;
        margin-left: 0px; /* Since 'ul,ol{}' setting in line 108 affects this selector, 'margin-left' is redefined. */
        list-style-position: inside; /* This will place the number on top and inside of the current color of li */
    }

    .piecelist .item {
        color: #333;
        font-size: 14px;
        font-weight: normal;
        height: 30px;
        display: inline-block;
        vertical-align: text-top;
        width: 90%;
    }

    .piecelist .item img {
        height: 40px;
        float: left;
    }

    .piecelist > li {
        border-radius: 17px;
        background-color: #dff0d8;
        padding: 10px;
        box-shadow: inset 0 1px 0 #fff;
    }

    .piecelist .title {
        font-weight: bold;
        font-size: 1.1em;
    }

    .piecelist .composer {
        font-style: italic;
        font-size: 0.8em;
        padding-left: 10px;
    }

    .piecelist .bookLocation {
        font-style: italic;
        font-size: 0.8em;
        margin-left: 6px;
    }

    .piecelist li span {
        width: 100%;
    }

    .pagination {
        min-height: 30px;
    }
    .pagination li {
        display: inline-block;
        padding: 5px;
    }

    #saveButton {
        float: right;
        margin-top: 20px;
    }
</style>
{% endaddtoblock %} {% addtoblock "js" %}
<script>
    $(function () {
        $("#allPieces li").draggable({
            connectToSortable: "#repertoire",
            appendTo: "parent",
            helper: function () {
                return $(this).clone().width($(this).width());
            },
        });

        $("#allPieces li.in-repertoire").draggable("disable");

        $("#repertoire")
            .sortable({
                receive: function (ev, ui) {
                    $(ui.item).draggable("disable");
                    $("#saveButton").removeAttr("disabled");
                },
                update: function (event, ui) {
                    $("#saveButton").removeAttr("disabled");
                },
            })
            .disableSelection();

        $("#allPieces").droppable({
            accept: "#repertoire li",
            hoverClass: "ui-state-hover",
            drop: function (ev, ui) {
                var id = $(ui.draggable).data("pieceid");
                $("#allPieces li[data-pieceid=" + id + "]").draggable("enable");
                ui.draggable.remove();
                $("#saveButton").removeAttr("disabled");
            },
        });

        $("#saveButton").click(function () {
            var result = {};
            $("#repertoire li").each(function (index, value) {
                var id = parseInt($(this).data("pieceid"));
                result[id] = index + 1;
            });
            $.ajax({
                url: "{% url 'scoremanager:manage_repertoire_ajax_save' %} ",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(result),
                dataType: "text",
                success: function (result) {
                    $("#saveButton").attr("disabled", "disabled");
                },
            });
        });

        var options = {
            valueNames: ["title", "composer"],
            page: 5,
            plugins: [
                ListPagination({ paginationClass: "paginationListMarker" }),
            ],
        };
        var pieceList = new List("allPiecesList", options);
    });
</script>
{% endaddtoblock %}

<div class="container">
    <div class="row">
        <div class="row-fluid">
            <div class="span12">
                <h2>Repertoire Manager</h2>
            </div>
        </div>

        <div class="row">
            <div class="span6" id="allPiecesList">
                <h4>Alle Stücke</h4>

                <input
                    class="search pieceSearch"
                    type="text"
                    placeholder="Suchen"
                />

                <ul id="allPieces" class="piecelist list">
                    {% for piece in allPieces %}
                    <li data-pieceid="{{piece.pk}}"{% if piece.repertoire_nr %} class="in-repertoire"{% endif %}>
                        <p class="item">
                            <img src="{{STATIC_URL}}img/score-icon.png" />
                            <span class="title"> {{ piece.title }} </span>
                            <br />
                            <span class="composer">{{ piece.composer}} </span>
                            {% if piece.booklocation %}
                            <span class="bookLocation">
                                ( {{piece.booklocation}} )
                            </span>
                            {% endif %}
                        </p>
                    </li>
                    {% endfor %}
                </ul>

                <div class="pagination">
                    <ul class="paginationListMarker"></ul>
                </div>
            </div>

            <div class="span6">
                <h4>Repertoire</h4>

                <ol id="repertoire" class="piecelist">
                    {% for piece in repertoire %}
                    <li data-pieceid="{{piece.pk}}">
                        <p class="item">
                            <img src="{{STATIC_URL}}img/score-icon.png" />

                            <span class="title"> {{ piece.title }} </span>
                            <br />
                            <span class="composer">{{ piece.composer}} </span>
                            {% if piece.booklocation %}
                            <span class="bookLocation">
                                ( {{piece.booklocation}} )
                            </span>
                            {% endif %}
                        </p>
                    </li>
                    {% endfor %}
                </ol>

                <button id="saveButton" class="btn btn-primary" disabled="true">
                    Speichern
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}